:root { --palette-rgb:110,153,255; --palette-secondary:171,122,255; }
:root[data-palette="violet"] { --palette-rgb:166,126,246; --palette-secondary:238,145,210; }
:root[data-palette="ocean"] { --palette-rgb:53,184,186; --palette-secondary:90,155,225; }
:root[data-palette="rose"] { --palette-rgb:226,121,157; --palette-secondary:175,126,232; }
:root[data-palette="amber"] { --palette-rgb:209,152,56; --palette-secondary:239,121,102; }
:root[data-palette="graphite"] { --palette-rgb:143,156,175; --palette-secondary:109,131,158; }
:root[data-palette] { --accent:rgb(var(--palette-rgb)); --accent-soft:rgba(var(--palette-rgb),.16); --accent-strong:color-mix(in srgb,rgb(var(--palette-rgb)) 72%,#202d54); --studio-glow:0 20px 65px rgba(var(--palette-rgb),.2); }
:root[data-theme="dark"][data-palette] { --accent-strong:color-mix(in srgb,rgb(var(--palette-rgb)) 75%,white); --bg:#10131c; --bg-strong:color-mix(in srgb,rgb(var(--palette-rgb)) 11%,#141822); }
body { background:radial-gradient(ellipse at 4% 0%,rgba(var(--palette-rgb),.21),transparent 50%),radial-gradient(ellipse at 100% 90%,rgba(var(--palette-secondary),.13),transparent 50%),var(--bg); transition:background-color .6s,color .35s; }
.brand-mark,.primary-button { background:linear-gradient(135deg,color-mix(in srgb,rgb(var(--palette-rgb)) 75%,white),color-mix(in srgb,rgb(var(--palette-rgb)) 65%,#233c75)); }
#page-home .welcome-hero { background:linear-gradient(135deg,rgba(var(--palette-rgb),.16),rgba(var(--palette-secondary),.12)),var(--surface); }
#page-home .listening-orb { background:linear-gradient(135deg,rgba(var(--palette-rgb),.40),rgba(var(--palette-secondary),.13) 60%,rgba(var(--palette-rgb),.25)); animation:immersive-float 5s ease-in-out infinite alternate; }
#page-home .listening-orb::before { animation-duration:12s; border-width:2px; }
#page-home .welcome-hero::after { background:conic-gradient(from 120deg,transparent,rgba(var(--palette-rgb),.5),rgba(var(--palette-secondary),.45),transparent 75%); animation:immersive-halo 6s ease-in-out infinite alternate; }
#page-home .sound-bars i { animation-duration:1.05s; }
.menu-preferences { display:grid; gap:8px; padding:14px 7px 4px; border-top:1px solid var(--line); margin-top:12px; }
.menu-preferences label { font-size:.7rem; color:var(--ink-soft); }
.menu-preferences select { width:100%; min-width:0; font-size:.82rem; min-height:40px; }
.menu-popover { max-height:calc(100dvh - 115px); overscroll-behavior:contain; }
.primary-nav .nav-item,.menu-action,.secondary-nav .nav-item { white-space:normal; overflow-wrap:anywhere; }
:root:not([lang="zh-CN"]) .sidebar .primary-nav .nav-item { min-width:100px; width:auto; }
:root:not([lang="zh-CN"]) #page-home h1 { font-size:clamp(2.1rem,4vw,3.8rem); overflow-wrap:break-word; }
.page.active { animation:immersive-page-in .8s cubic-bezier(.16,1,.3,1) both; }
.nav-more[open] > .menu-popover { animation:immersive-menu-in .55s cubic-bezier(.18,1.25,.35,1) both; }
.episode-card:hover { transform:translateY(-9px) scale(1.018); }
.primary-button:hover { transform:translateY(-4px) scale(1.04); }
.subtitle-item.current { background:rgba(var(--palette-rgb),.16); border-color:rgba(var(--palette-rgb),.5); }
.click-ring { position:fixed; z-index:999; width:32px; height:32px; pointer-events:none; border:2px solid rgba(var(--palette-rgb),.7); border-radius:50%; transform:translate(-50%,-50%); animation:immersive-ripple .65s ease-out both; }
@keyframes immersive-float { from { transform:translate3d(-6px,12px,0) rotate(-14deg) scale(.96); } to { transform:translate3d(9px,-16px,0) rotate(2deg) scale(1.035); } }
@keyframes immersive-halo { from { transform:translate(-25px,10px) rotate(-25deg) scale(.9); opacity:.4; } to { transform:translate(40px,-20px) rotate(20deg) scale(1.2); opacity:.85; } }
@keyframes immersive-page-in { from { opacity:0; transform:translateY(38px) scale(.955); filter:blur(9px); } to { opacity:1; transform:none; filter:none; } }
@keyframes immersive-menu-in { from { opacity:0; transform:translateY(-18px) scale(.78); filter:blur(10px); } to { opacity:1; transform:none; filter:none; } }
@keyframes immersive-ripple { from { opacity:.9; transform:translate(-50%,-50%) scale(.4); } to { opacity:0; transform:translate(-50%,-50%) scale(2.7); } }
@media(max-width:820px) { .menu-popover { max-height:calc(100dvh - 170px); } :root:not([lang="zh-CN"]) .sidebar .primary-nav .nav-item { min-width:70px; font-size:.77rem; padding-inline:9px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } .click-ring{display:none;} }
:root[data-reduce-motion="true"] *, :root[data-reduce-motion="true"] *::before, :root[data-reduce-motion="true"] *::after { animation:none !important; transition:none !important; }
.studio-particles { position:fixed; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; opacity:.75; }
#main-content { position:relative; z-index:1; }
@media(prefers-reduced-motion:reduce){ .studio-particles { display:none; } }
:root[data-reduce-motion="true"] .studio-particles { display:none; }