:root{--bg-primary: transparent;--bg-primary-solid: #ffffff;--bg-secondary: rgba(0,0,0,.04);--bg-card: rgba(245,240,232,.88);--bg-hover: rgba(255,255,255,.95);--bg-wood: url(/case-light.webp);--bg-mobile-fill: #c19a6b;--text-primary: #1a1a2e;--text-secondary: #3a3a4e;--text-muted: #6b6b7a;--text-on-body: #2a2a3a;--text-on-body-muted: #6a6a78;--color-primary: #ea580c;--color-primary-hover: #c2410c;--color-accent: #f97316;--color-accent-light: #fb923c;--color-accent-glow: rgba(249,115,22,.35);--border-color: rgba(0,0,0,.1);--transport-bg: rgba(255,255,255,.7);--transport-border: rgba(0,0,0,.06);--btn-ghost: rgba(0,0,0,.04);--btn-ghost-border: rgba(0,0,0,.1);--btn-ghost-text: rgba(0,0,0,.6);--btn-ghost-text-active: rgba(0,0,0,.85);--scrollbar-thumb: rgba(0,0,0,.18);--scrollbar-track: rgba(0,0,0,.04);--slider-track: rgba(0,0,0,.15);--slider-thumb: #ea580c;--genre-inactive-bg: linear-gradient(135deg, rgba(0,0,0,.04), rgba(0,0,0,.02));--genre-inactive-border: rgba(0,0,0,.12);--genre-inactive-text: rgba(0,0,0,.7);--genre-subtitle: rgba(255,255,255,.85);--separator-line: rgba(0,0,0,.15);--metal-panel-img: url(/metal-light.webp);--metal-panel-overlay: linear-gradient(110deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 50%, rgba(0,0,0,.04) 100%);--metal-panel-border: rgba(0,0,0,.15);--metal-shadow-outer: rgba(0,0,0,.12);--metal-highlight: rgba(255,255,255,.55);--metal-shadow-inner: rgba(0,0,0,.06);--metal-btn-img: url(/metal-light.webp);--metal-btn-overlay: radial-gradient(ellipse at 40% 35%, rgba(255,255,255,.3) 0%, rgba(255,255,255,.05) 50%, rgba(0,0,0,.15) 100%);--metal-btn-ring: #a8a8b2;--metal-btn-shadow: rgba(0,0,0,.25);--metal-btn-shadow-inner: rgba(0,0,0,.15);--metal-btn-highlight: rgba(255,255,255,.6);--metal-icon: #2a2a3a;--tile-img: url(/metal-light.webp);--tile-overlay: radial-gradient(ellipse at 28% 0%, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, #1f1f1f 0%, #0a0a0a 50%, #181818 78%, #050505 100%);--tile-overlay-active: radial-gradient(ellipse at 28% 0%, rgba(255,170,80,.3) 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, #2a1a08 0%, #0d0703 45%, #1f1305 78%, #060201 100%);--tile-border: rgba(255,255,255,.06);--tile-border-active: rgba(249,115,22,.65);--tile-text: rgba(255,255,255,.92);--tile-text-active: rgba(255,255,255,1);--tile-coming-overlay: linear-gradient(135deg, rgba(255,255,255,.04) 0%, rgba(0,0,0,.04) 100%);--tile-shadow: 0 6px 18px rgba(0,0,0,.3), 0 3px 8px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);--tile-shadow-active: 0 0 18px rgba(249,115,22,.55), 0 6px 20px rgba(249,115,22,.4), 0 3px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,170,80,.18);--tiles-glow: rgba(0, 0, 0, .38);--play-extra-glow: rgba(249, 115, 22, .55);--color-success: #22c55e;--color-danger: #ef4444;--color-warning: #f59e0b;--color-on-primary: #ffffff;--radius: 12px;--radius-sm: 8px}[data-theme=dark]{--bg-primary: transparent;--bg-primary-solid: #000000;--bg-secondary: rgba(0,0,0,.3);--bg-card: rgba(15,12,8,.75);--bg-hover: rgba(30,25,18,.8);--bg-wood: url(/case-dark.webp);--bg-mobile-fill: #3d2817;--text-primary: #e8e4dc;--text-secondary: #a89880;--text-muted: #6a5d4e;--text-on-body: #e8e4dc;--text-on-body-muted: #8a7e72;--color-primary: #f97316;--color-primary-hover: #ea580c;--color-accent: #fb923c;--color-accent-light: #fdba74;--color-accent-glow: rgba(251,146,60,.4);--border-color: rgba(255,255,255,.08);--transport-bg: rgba(15,12,8,.6);--transport-border: rgba(255,255,255,.06);--btn-ghost: rgba(255,255,255,.05);--btn-ghost-border: rgba(255,255,255,.08);--btn-ghost-text: rgba(255,255,255,.5);--btn-ghost-text-active: rgba(255,255,255,.85);--scrollbar-thumb: rgba(255,255,255,.15);--scrollbar-track: rgba(255,255,255,.02);--slider-track: rgba(255,255,255,.15);--slider-thumb: #f97316;--genre-inactive-bg: linear-gradient(135deg, rgba(30,25,18,.6), rgba(20,16,10,.4));--genre-inactive-border: rgba(255,255,255,.08);--genre-inactive-text: rgba(255,255,255,.7);--genre-subtitle: rgba(255,255,255,.35);--separator-line: rgba(255,255,255,.08);--metal-panel-img: url(/metal-dark.webp);--metal-panel-overlay: linear-gradient(110deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.01) 50%, rgba(0,0,0,.06) 100%);--metal-panel-border: rgba(255,255,255,.08);--metal-shadow-outer: rgba(0,0,0,.4);--metal-highlight: rgba(255,255,255,.06);--metal-shadow-inner: rgba(0,0,0,.22);--metal-btn-img: url(/metal-dark.webp);--metal-btn-overlay: radial-gradient(ellipse at 40% 35%, rgba(255,255,255,.12) 0%, rgba(255,255,255,.02) 50%, rgba(0,0,0,.2) 100%);--metal-btn-ring: #454540;--metal-btn-shadow: rgba(0,0,0,.55);--metal-btn-shadow-inner: rgba(0,0,0,.4);--metal-btn-highlight: rgba(255,255,255,.08);--metal-icon: #c8c0b0;--tile-img: url(/metal-dark.webp);--tile-overlay: radial-gradient(ellipse at 28% 0%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, #232323 0%, #0c0c0c 50%, #1c1c1c 78%, #050505 100%);--tile-overlay-active: radial-gradient(ellipse at 28% 0%, rgba(255,170,80,.32) 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, #2e1c0a 0%, #0e0703 45%, #1f1306 78%, #070201 100%);--tile-border: rgba(255,255,255,.08);--tile-border-active: rgba(251,146,60,.65);--tile-text: rgba(255,255,255,.92);--tile-text-active: rgba(255,255,255,1);--tile-coming-overlay: linear-gradient(135deg, rgba(255,255,255,.04) 0%, rgba(0,0,0,.06) 100%);--tile-shadow: 0 6px 18px rgba(0,0,0,.55), 0 3px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);--tile-shadow-active: 0 0 20px rgba(251,146,60,.6), 0 6px 22px rgba(249,115,22,.45), 0 3px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,170,80,.2);--tiles-glow: rgba(249, 115, 22, .22);--play-extra-glow: rgba(249, 115, 22, .7)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%;overflow-y:auto;overflow-x:hidden}body{font-family:Outfit,sans-serif;background-color:var(--bg-primary-solid);color:var(--text-on-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;user-select:none;-webkit-user-select:none;transition:color .3s ease}a{color:var(--color-primary);text-decoration:none}button{font-family:inherit;cursor:pointer;border:none;outline:none;background:none;color:inherit}input,select{font-family:inherit;outline:none;border:none;background:none;color:inherit}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:4px}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb);opacity:.8}*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}@keyframes playBtnPulse{0%,to{box-shadow:0 0 8px var(--color-accent-glow)}50%{box-shadow:0 0 22px var(--color-accent-glow),0 0 8px var(--color-accent-glow)}}@keyframes spinArc{to{transform:rotate(360deg)}}.play-btn-spinner{animation:spinArc .9s linear infinite;transform-origin:center}input[type=range].volume-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:var(--slider-track);border-radius:2px;outline:none;flex:1}input[type=range].volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--slider-thumb);border:2px solid var(--color-accent-glow);cursor:pointer;box-shadow:0 0 6px var(--color-accent-glow)}input[type=range].volume-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--slider-thumb);border:2px solid var(--color-accent-glow);cursor:pointer;box-shadow:0 0 6px var(--color-accent-glow)}input[type=range].volume-slider::-moz-range-track{height:4px;background:var(--slider-track);border-radius:2px}.genre-scroll::-webkit-scrollbar{width:6px}.genre-scroll::-webkit-scrollbar-track{background:transparent}.genre-scroll::-webkit-scrollbar-thumb{background:var(--color-accent);border-radius:3px}.genre-scroll{scrollbar-width:thin;scrollbar-color:var(--color-accent) transparent}.tiles-scroll{scrollbar-width:none}.tiles-scroll::-webkit-scrollbar{display:none;width:0}.screensaver-artwork-bg{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center}.icon-btn-small{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--btn-ghost);border:1px solid var(--btn-ghost-border);color:var(--text-muted);cursor:pointer;transition:color .2s ease,background .2s ease}.icon-btn-small:hover{color:var(--text-secondary);background:var(--bg-hover)}