/* ── Opal Loader ──────────────────────────────────────────────────────────── */
.opal-loader-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-pampas);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-5);
  transition: opacity 500ms var(--ease-out), visibility 500ms;
}
.opal-loader-overlay.dismissing {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.opal-loader-scene-wrap {
  position: relative;
  overflow: visible;
  flex-shrink: 0;
}
.opal-loader-scene-wrap.loader-sm { width: 80px;  height: 80px; }
.opal-loader-scene-wrap.loader-md { width: 140px; height: 140px; }
.opal-loader-scene-wrap.loader-lg { width: 300px; height: 300px; }
.opal-loader-inner {
  position: relative;
  width: 300px;
  height: 300px;
  transform-origin: 0 0;
}
.loader-sm .opal-loader-inner { transform: scale(0.267); }
.loader-md .opal-loader-inner { transform: scale(0.467); }
.loader-lg .opal-loader-inner { transform: scale(1); }
.opal-loader-main {
  position: absolute;
  border-radius: 50%;
  background: var(--color-crail);
  top: 50%;
  left: 50%;
}
.opal-loader-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-crail);
  opacity: .6;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none}
input,textarea,select{user-select:text;-webkit-user-select:text}
:root{
  /* XSOPA layout dimensions */
  --nav-h:58px;
  --tab-h:64px;
  --mp-h:62px;
  /* Map XSOPA tokens → Opal design tokens */
  --bg:var(--color-pampas);
  --s1:#eae7e0;
  --s2:var(--color-white);
  --s3:#e0ddd5;
  --border:rgba(44,42,39,.09);
  --border2:rgba(44,42,39,.15);
  --text:var(--color-ink);
  --sub:var(--color-ink-muted);
  --muted:var(--color-cloudy);
  --charcoal:var(--color-ink);
  --gold:var(--color-crail);
  --gold-dk:var(--color-crail-dark);
  --ember:var(--color-error);
  --teal:var(--color-success);
  --warm:var(--color-cloudy);
  --paper:var(--color-pampas);
  --cream:#eae7e0;
  --stone:var(--color-cloudy-dark);
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:15px;overflow-x:hidden;min-height:100vh}
body::after{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.032;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px}

/* ── LOGIN PAGE ─────────────────────────────────────────────────────────── */
#loginPage{position:fixed;inset:0;z-index:1000;display:flex;align-items:stretch;min-height:100vh;background:var(--paper)}
#loginPage.hidden{display:none}
.l-left{flex:1;position:relative;overflow:hidden;display:none}
@media(min-width:860px){.l-left{display:block}}
.l-bg{position:absolute;inset:0;background:linear-gradient(155deg,#1c1008 0%,#0c0b09 45%,#0a100a 75%,#100a08 100%)}
.l-lines{position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 79px,rgba(255,255,255,.025) 80px),repeating-linear-gradient(90deg,transparent,transparent 79px,rgba(255,255,255,.025) 80px)}
.l-spot{position:absolute;top:-15%;left:25%;width:65%;height:85%;background:conic-gradient(from 260deg at 50% 0%,rgba(184,150,60,.13) 0deg,transparent 52deg);filter:blur(3px);pointer-events:none}
.l-body{position:absolute;bottom:56px;left:56px;right:56px;z-index:2}
.l-logo{width:48px;height:48px;border-radius:9px;overflow:hidden;background:linear-gradient(135deg,var(--gold),var(--ember));display:flex;align-items:center;justify-content:center;margin-bottom:28px;box-shadow:0 6px 24px rgba(184,150,60,.2)}
.l-logo img{width:100%;height:100%;object-fit:cover}
.l-logo-fb{font-size:22px}
.l-title{font-family:var(--font-sans);font-size:52px;font-weight:600;line-height:.88;color:var(--color-pampas);letter-spacing:-.5px;margin-bottom:22px}
.l-title em{font-style:italic;color:var(--color-crail)}
.l-rule{width:36px;height:1px;background:rgba(184,150,60,.38);margin-bottom:14px}
.l-desc{font-size:12.5px;color:rgba(255,255,255,.3);line-height:1.75;max-width:280px;font-weight:300}
.l-right{width:100%;max-width:460px;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:52px 56px;position:relative;overflow:hidden}
@media(max-width:859px){.l-right{max-width:100%}}
.l-right::before{content:'';position:absolute;top:0;bottom:0;left:0;width:1px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.07) 20%,rgba(0,0,0,.12) 50%,rgba(0,0,0,.07) 80%,transparent)}
.l-form{width:100%;max-width:320px;position:relative;z-index:1;animation:l-up .5s cubic-bezier(.22,1,.36,1) both}
@keyframes l-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.l-m-head{display:none;align-items:center;gap:11px;margin-bottom:32px}
@media(max-width:859px){.l-m-head{display:flex}}
.l-m-logo{width:38px;height:38px;border-radius:7px;overflow:hidden;background:linear-gradient(135deg,var(--gold),var(--ember));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.l-m-logo img{width:100%;height:100%;object-fit:cover}
.l-m-logo-fb{font-size:17px}
.l-m-name{font-family:var(--font-sans);font-size:20px;font-weight:600;letter-spacing:.3px;color:var(--charcoal)}
.l-f-head{font-family:var(--font-sans);font-size:30px;font-weight:600;color:var(--charcoal);line-height:1;margin-bottom:5px;letter-spacing:-.2px}
.l-f-sub{font-size:12.5px;color:var(--stone);margin-bottom:32px;font-weight:300}
.l-field{margin-bottom:16px}
.l-f-label{display:block;font-size:10.5px;font-weight:500;letter-spacing:1.1px;text-transform:uppercase;color:var(--sub);margin-bottom:7px}
.l-f-wrap{position:relative}
.l-f-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);display:flex;align-items:center;pointer-events:none}
.l-f-icon svg{width:14px;height:14px;display:block}
.l-f-input{padding-left:39px}
.l-f-input::placeholder{color:var(--muted)}
.l-pw-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;display:flex;align-items:center;transition:color .18s}
.l-pw-btn:hover{color:var(--sub)}
.l-pw-btn svg{width:14px;height:14px;display:block}
.l-pw-btn .eo{display:none}
.l-pw-btn.shown .eon{display:none}
.l-pw-btn.shown .eo{display:block}
.l-err{display:none}
.l-err.on{display:flex}
.l-btn{width:100%;margin-top:4px;display:flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden}
.l-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.07),transparent);pointer-events:none}
.l-spinner{display:none;width:14px;height:14px;border:1.5px solid rgba(245,241,234,.2);border-top-color:rgba(245,241,234,.85);border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0}
.l-btn.loading .l-spinner{display:block}
.l-f-footer{margin-top:24px;padding-top:18px;border-top:1px solid var(--cream);font-size:11px;color:var(--muted);text-align:center;letter-spacing:.25px}

/* ── APP SHELL ──────────────────────────────────────────────────────────── */
#app{display:none}
#app.visible{display:block}

/* ── NAV ────────────────────────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:rgba(245,241,234,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav-left{display:flex;align-items:center;gap:10px;cursor:pointer}
.nav-mark{width:30px;height:30px;border-radius:6px;overflow:hidden;background:linear-gradient(135deg,var(--gold),var(--ember));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-mark img{width:100%;height:100%;object-fit:cover}
.nav-mark-fb{font-size:14px}
.nav-wordmark{font-family:var(--font-sans);font-size:17px;font-weight:600;letter-spacing:.3px;color:var(--charcoal)}
.nav-right{display:flex;align-items:center;gap:8px}
.nav-pill{display:flex;align-items:center;gap:7px;padding:0}
.nav-pill-name{font-size:12px;font-weight:500;color:var(--sub);white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}
.nav-logout{background:none;border:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;padding:2px;transition:color .18s;border-radius:4px}
.nav-logout:hover{color:var(--ember)}
.nav-logout svg{width:13px;height:13px;display:block}

/* ── PAGES ──────────────────────────────────────────────────────────────── */
#mainContent{padding-top:var(--nav-h);padding-bottom:calc(var(--tab-h)+env(safe-area-inset-bottom,0)+20px);transition:padding-bottom .3s}
#mainContent.has-player{padding-bottom:calc(var(--tab-h)+env(safe-area-inset-bottom,0)+var(--mp-h)+20px)}
.page{display:none}
.page.active{display:block}

/* ── TABS ───────────────────────────────────────────────────────────────── */
.tabs{position:fixed;bottom:0;left:0;right:0;z-index:100;height:calc(var(--tab-h)+env(safe-area-inset-bottom,0));background:rgba(245,241,234,.98);backdrop-filter:blur(20px);border-top:1px solid var(--border);display:flex;align-items:flex-start;padding-top:8px;padding-bottom:env(safe-area-inset-bottom,0)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);cursor:pointer;transition:color .2s;padding:4px 0;font-size:10px;font-weight:500;background:none;border:none;letter-spacing:.4px;text-transform:uppercase}
.tab.active{color:var(--charcoal)}
.tab svg{width:20px;height:20px;display:block;margin-bottom:1px}

/* ── SHARED ─────────────────────────────────────────────────────────────── */
section{margin-top:32px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 18px;margin-bottom:12px}
.sec-title{font-family:var(--font-sans);font-size:20px;font-weight:600;letter-spacing:.2px;color:var(--charcoal)}
.sec-link{font-size:10px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:color .18s;text-decoration:none}
.sec-link:hover{color:var(--charcoal)}

/* ── HERO ───────────────────────────────────────────────────────────────── */
.hero{margin:14px 14px 0;border-radius:14px;overflow:hidden;position:relative;height:185px;background:#2a2218;display:flex;align-items:flex-end;padding:22px}
.h-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 75% 40%,rgba(184,150,60,.18) 0%,transparent 55%),radial-gradient(ellipse at 15% 80%,rgba(201,72,40,.12) 0%,transparent 50%)}
.h-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:40px 40px}
.h-cl{position:absolute;top:0;bottom:0;left:0;width:50px;background:linear-gradient(90deg,rgba(10,8,4,.3),transparent)}
.h-cr{position:absolute;top:0;bottom:0;right:0;width:50px;background:linear-gradient(270deg,rgba(10,8,4,.3),transparent)}
.h-content{position:relative;z-index:2;display:flex;align-items:center;gap:14px}
.h-logo-box{width:56px;height:56px;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#1e180c,#2e2410);border:1px solid rgba(184,150,60,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.h-logo-box img{width:100%;height:100%;object-fit:cover}
.h-logo-fb{font-size:24px}
.h-title{font-family:var(--font-sans);font-size:28px;font-weight:600;line-height:.92;margin-bottom:5px;letter-spacing:-.2px;color:var(--color-pampas)}
.h-title em{font-style:italic;color:var(--color-crail)}
.h-sub{font-size:11.5px;color:rgba(255,255,255,.38);line-height:1.5;font-weight:300}

/* ── CHANGELOG ──────────────────────────────────────────────────────────── */
.cl-list{padding:0 18px}
.cl-row{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--border)}
.cl-row:last-child{border-bottom:none}
.cl-spine{display:flex;flex-direction:column;align-items:center;padding-top:3px}
.cl-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;border:1.5px solid}
.cl-dot.gold{background:rgba(184,150,60,.12);border-color:var(--gold)}
.cl-dot.teal{background:rgba(42,120,96,.1);border-color:var(--teal)}
.cl-dot.gray{background:rgba(100,90,80,.1);border-color:var(--muted)}
.cl-dot.red{background:rgba(201,72,40,.1);border-color:var(--ember)}
.cl-vline{width:1px;flex:1;margin-top:4px;background:var(--border);min-height:16px}
.cl-row:last-child .cl-vline{display:none}
.cl-body{flex:1}
.cl-meta{display:flex;align-items:center;gap:7px;margin-bottom:4px;flex-wrap:wrap}
.cl-badge{font-size:8.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;padding:2px 7px;border-radius:3px}
.cl-badge.gold{background:rgba(184,150,60,.12);color:var(--gold-dk)}
.cl-badge.teal{background:rgba(42,120,96,.1);color:var(--teal)}
.cl-badge.gray{background:rgba(100,90,80,.08);color:var(--sub)}
.cl-badge.red{background:rgba(201,72,40,.1);color:var(--ember)}
.cl-date{font-size:10px;color:var(--muted)}
.cl-ver{font-size:9px;font-weight:500;color:var(--muted);font-family:monospace}
.cl-title{font-size:13px;font-weight:500;color:var(--text);margin-bottom:2px;line-height:1.3}
.cl-desc{font-size:11.5px;color:var(--sub);line-height:1.5}

/* ── MEDIA GRID ─────────────────────────────────────────────────────────── */
.media-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;padding:0 18px}
.media-card{position:relative;border-radius:11px;overflow:hidden;cursor:pointer;aspect-ratio:16/10;transition:transform .2s,box-shadow .2s;display:block;box-shadow:0 1px 3px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.05)}
.media-card.featured{grid-column:1/-1;aspect-ratio:16/7}
.media-card:hover{transform:scale(1.022);z-index:1;box-shadow:0 6px 20px rgba(0,0,0,.14)}
.m-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:38px}
.media-card.featured .m-inner{font-size:48px}
.m-over{position:absolute;inset:0;background:linear-gradient(to top,rgba(255,255,255,.75) 0%,transparent 55%);display:flex;flex-direction:column;justify-content:flex-end;padding:11px;opacity:.88;transition:opacity .2s}
.media-card:hover .m-over{opacity:1}
.m-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.82);background:rgba(255,255,255,.6);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.1);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s}
.m-play svg{width:13px;height:13px;color:var(--color-ink);margin-left:2px}
.media-card:hover .m-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.m-type-tag{position:absolute;top:9px;left:9px;font-size:8.5px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;background:rgba(255,255,255,.55);backdrop-filter:blur(8px);padding:2px 7px;border-radius:3px;color:rgba(42,37,32,.55)}
.m-cat-tag{position:absolute;top:9px;right:9px;font-size:8.5px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;padding:2px 7px;border-radius:3px}
.tag-tap    {background:rgba(184,150,60,.2);color:#7a5e1a}
.tag-scene  {background:rgba(80,100,160,.15);color:#3a4880}
.tag-dance  {background:rgba(160,60,100,.14);color:#803050}
.tag-sing   {background:rgba(100,70,160,.14);color:#503890}
.tag-general{background:rgba(80,80,80,.1);color:#504840}
.m-info h4{font-size:12px;font-weight:600;color:var(--color-ink);margin-bottom:2px;line-height:1.3}
.m-info span{font-size:10.5px;color:#6b6358}
.bg-tap  {background:linear-gradient(145deg,#e8ddd0,#d4c4b4,#c8b8a4)}
.bg-scene{background:linear-gradient(145deg,#d0d8e4,#bcc8d8,#b0bece)}
.bg-dance{background:linear-gradient(145deg,#e4d4d8,#d4bec4,#c8b0b8)}
.bg-sing {background:linear-gradient(145deg,#d8d0e8,#c8bcd8,#beb0cc)}
.bg-gen  {background:linear-gradient(145deg,#dddad4,#ccc8c0,#c0bcb4)}

/* ── CATEGORY ROWS ──────────────────────────────────────────────────────── */
.cat-row{display:flex;gap:10px;padding:0 18px;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;align-items:flex-start;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cat-row::-webkit-scrollbar{display:none}
.cat-thumb{flex:0 0 112px;scroll-snap-align:start;cursor:pointer;transition:transform .18s}
.cat-thumb:hover{transform:translateY(-3px)}
.cat-img{width:112px;height:112px;border-radius:10px;overflow:hidden;margin-bottom:7px;position:relative;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.cat-img::after{content:'';position:absolute;inset:0;border-radius:10px;border:1px solid rgba(0,0,0,.06);pointer-events:none}
.cat-face{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:34px;position:relative}
.cat-shimmer{position:absolute;inset:0;background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,.2) 50%,transparent 70%);opacity:0;transition:opacity .25s}
.cat-thumb:hover .cat-shimmer{opacity:1}
.tap-face  {background:linear-gradient(145deg,#e8ddd0,#d4c4b4,#c8b8a4)}
.scene-face{background:linear-gradient(145deg,#d0d8e4,#bcc8d8,#b0bece)}
.dance-face{background:linear-gradient(145deg,#e4d4d8,#d4bec4,#c8b0b8)}
.sing-face {background:linear-gradient(145deg,#d8d0e8,#c8bcd8,#beb0cc)}
.gen-face  {background:linear-gradient(145deg,#dddad4,#ccc8c0,#c0bcb4)}
.cat-label{font-size:11.5px;font-weight:500;color:var(--text);white-space:normal;word-break:break-word;line-height:1.3}
.cat-sub{font-size:10px;color:var(--muted);margin-top:2px}

/* ── SEARCH ─────────────────────────────────────────────────────────────── */
.search-wrap{padding:18px 18px 0}
.search-box{display:flex;align-items:center;gap:10px;background:var(--s2);border:1.5px solid var(--border);border-radius:10px;padding:10px 14px;transition:border-color .2s;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.search-box:focus-within{border-color:var(--charcoal)}
.search-box input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:var(--font-sans);font-size:14px}
.search-box input::placeholder{color:var(--muted)}
.search-box svg{width:16px;height:16px;color:var(--muted);flex-shrink:0}
.chips{display:flex;gap:7px;padding:10px 18px 0;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;align-items:center;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;white-space:nowrap}
.chip.active,.chip:hover{background:rgba(193,95,60,.1);border-color:var(--color-crail);color:var(--color-crail-dark,var(--color-crail))}
.s-results{padding:14px 18px 0}
.s-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 20px;gap:10px;text-align:center}
.s-empty svg{width:34px;height:34px;color:var(--muted);opacity:.3}
.s-empty p{font-size:12.5px;color:var(--muted)}
.s-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}

/* ── ALL MEDIA ──────────────────────────────────────────────────────────── */
.all-head{padding:18px 18px 0}
.all-head h2{font-family:var(--font-sans);font-size:26px;font-weight:600;margin-bottom:3px;color:var(--charcoal)}
.all-head p{font-size:12px;color:var(--sub)}
.all-grid{padding:12px 18px 0;display:grid;grid-template-columns:repeat(2,1fr);gap:9px}

/* ── FAB ────────────────────────────────────────────────────────────────── */
.fab{position:fixed;bottom:80px;right:16px;z-index:190;display:none;width:58px;height:58px;border-radius:var(--radius-full);background:var(--color-crail);color:#fff;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(193,95,60,.4);border:none;cursor:pointer;transition:transform .2s var(--ease-spring),box-shadow .2s}
.fab:hover,.fab:active{transform:scale(1.1);box-shadow:0 6px 28px rgba(193,95,60,.55)}
.fab.visible{display:flex}
.fab svg{pointer-events:none;width:24px;height:24px}

/* ── UPLOAD SHEET ───────────────────────────────────────────────────────── */
.sheet-overlay{position:fixed;inset:0;z-index:210;display:flex;align-items:flex-end;pointer-events:none;opacity:0;transition:opacity .28s}
.sheet-overlay.open{pointer-events:all;opacity:1}
.sheet-bg{position:absolute;inset:0;background:rgba(42,37,32,.45);backdrop-filter:blur(6px)}
.sheet{position:relative;z-index:1;width:100%;background:var(--bg);border-radius:18px 18px 0 0;border-top:1px solid var(--border);padding:16px 20px 44px;transform:translateY(100%);transition:transform .36s cubic-bezier(.32,.72,0,1);max-height:92vh;overflow-y:auto}
.sheet-overlay.open .sheet{transform:translateY(0)}
.sheet-handle{width:34px;height:3px;background:var(--s3);border-radius:2px;margin:0 auto 16px}
.sheet-close{position:absolute;top:12px;right:16px;width:26px;height:26px;border-radius:50%}
.sheet-title{font-family:var(--font-sans);font-size:20px;font-weight:600;margin-bottom:3px;color:var(--charcoal)}
.sheet-sub{font-size:12px;color:var(--sub);margin-bottom:20px;line-height:1.5}
.f-label{font-size:10px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;color:var(--sub);display:block;margin-bottom:6px}
.f-field{margin-bottom:14px}
.f-input::placeholder{color:var(--muted)}
.f-select{background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a09888' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;appearance:none;-webkit-appearance:none}
.type-toggle{display:flex;gap:6px}
.type-btn{flex:1}
.type-btn svg{display:block;flex-shrink:0}
.type-btn.active{background:rgba(193,95,60,.1);border-color:var(--color-crail);color:var(--color-crail-dark,var(--color-crail))}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.drop-zone{border:1.5px dashed var(--warm);border-radius:10px;padding:22px 16px;text-align:center;cursor:pointer;transition:all .2s;position:relative;background:var(--s2)}
.drop-zone.dragging{border-color:var(--charcoal);background:var(--s1)}
.drop-zone.has-file{border-color:var(--teal);border-style:solid;background:rgba(42,120,96,.04)}
.drop-zone input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.dz-icon{margin:0 auto 8px;width:30px;height:30px;color:var(--muted)}
.dz-icon svg{width:100%;height:100%;display:block}
.dz-label{font-size:12.5px;font-weight:500;color:var(--sub);margin-bottom:3px}
.dz-sub{font-size:11px;color:var(--muted)}
.dz-file{font-size:11.5px;font-weight:500;color:var(--teal);margin-top:5px;word-break:break-all}
.up-prog{display:none;margin-top:12px}
.up-prog.show{display:block}
.up-track{height:3px;background:var(--s3);border-radius:2px;overflow:hidden;margin-bottom:5px}
.up-fill{height:100%;background:var(--charcoal);border-radius:2px;width:0%;transition:width .18s}
.up-lbl{font-size:11px;color:var(--sub);text-align:center}
.up-err{display:none}
.up-err.show{display:flex}
.up-btn{width:100%;margin-top:6px;display:flex;align-items:center;justify-content:center;gap:8px}
.up-spinner{display:none;width:14px;height:14px;border:1.5px solid rgba(245,241,234,.2);border-top-color:rgba(245,241,234,.85);border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0}
.up-btn.loading .up-spinner{display:block}

/* ── TOAST ──────────────────────────────────────────────────────────────── */
.toast{position:fixed;top:calc(var(--nav-h)+10px);left:50%;z-index:9600;transform:translateX(-50%) translateY(-16px);opacity:0;background:var(--charcoal);border:1px solid rgba(255,255,255,.08);color:var(--color-pampas);font-size:12.5px;font-weight:500;padding:9px 16px;border-radius:16px;pointer-events:none;transition:all .28s;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.empty-row{padding:26px 18px;text-align:center;font-size:12.5px;color:var(--muted);font-style:italic}

/* ── MUSIC PAGE ─────────────────────────────────────────────────────────── */
.music-head{padding:18px 18px 0}
.music-head h2{font-family:var(--font-sans);font-size:26px;font-weight:600;margin-bottom:3px;color:var(--charcoal)}
.music-head p{font-size:12px;color:var(--sub)}
.track-list{padding:12px 18px 0;display:flex;flex-direction:column;gap:1px}
.track-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;cursor:pointer;transition:background .15s;position:relative}
.track-row:hover{background:var(--s1)}
.track-row.playing{background:var(--s1)}
.track-num{width:20px;font-size:12px;color:var(--muted);text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
.track-row.playing .track-num{display:none}
.track-playing-anim{display:none;width:20px;flex-shrink:0;justify-content:center;gap:2px;align-items:flex-end;height:14px}
.track-row.playing .track-playing-anim{display:flex}
.track-bar{width:3px;border-radius:2px;background:var(--charcoal);animation:trackBar .8s ease infinite alternate}
.track-bar:nth-child(1){height:6px;animation-delay:0s}
.track-bar:nth-child(2){height:12px;animation-delay:.15s}
.track-bar:nth-child(3){height:8px;animation-delay:.3s}
.track-paused .track-bar{animation-play-state:paused}
@keyframes trackBar{from{opacity:.4;transform:scaleY(.4)}to{opacity:1;transform:scaleY(1)}}
.track-info{flex:1;min-width:0}
.track-title{font-size:13.5px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.track-row.playing .track-title{color:var(--charcoal);font-weight:600}
.track-meta{font-size:11px;color:var(--muted);margin-top:1px}
.track-dur{font-size:11.5px;color:var(--muted);flex-shrink:0;font-variant-numeric:tabular-nums}

/* ── MINI PLAYER ────────────────────────────────────────────────────────── */
.mini-player{
  z-index: 100;
  position:fixed;bottom:calc(var(--tab-h)+env(safe-area-inset-bottom,0));left:0;right:0;z-index:110;
  background:rgba(245,241,234,.98);backdrop-filter:blur(20px);
  border-top:1px solid var(--border);
  transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);
}
.mini-player.visible{transform:translateY(0)}
.mp-prog-wrap{height:2px;cursor:pointer;position:relative}
.mp-prog-track{height:100%;background:var(--s3)}
.mp-prog-fill{height:100%;background:var(--charcoal);width:0%;transition:width .2s linear}
.mp-body{display:flex;align-items:center;justify-content:space-between;padding:10px 16px}
.mp-info{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer}
.mp-art{width:40px;height:40px;border-radius:7px;background:var(--s3);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;color:var(--sub);overflow:hidden}
.mp-art img{width:100%;height:100%;object-fit:cover}
.mp-text{min-width:0}
.mp-title{font-size:13px;font-weight:600;color:var(--charcoal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-controls{display:flex;align-items:center;gap:4px;flex-shrink:0}
.mp-btn{background:none;border:none;color:var(--charcoal);cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;transition:opacity .18s;border-radius:6px}
.mp-btn:hover{opacity:.6}
.mp-btn svg{display:block}
.mp-play-btn{background:var(--charcoal);border-radius:50%;width:36px;height:36px;color:var(--color-pampas);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .18s;flex-shrink:0}
.mp-play-btn:hover{background:#1e1c19}
.mp-play-btn svg{display:block}
.mp-icon-play{display:block}.mp-icon-pause{display:none}
.mp-play-btn.playing .mp-icon-play{display:none}.mp-play-btn.playing .mp-icon-pause{display:block}
#expPlayBtn.playing .mp-icon-play{display:none}#expPlayBtn.playing .mp-icon-pause{display:block}
#mpPlayBtn.playing .mp-icon-play{display:none}#mpPlayBtn.playing .mp-icon-pause{display:block}

/* ── EXPANDED MUSIC PLAYER ──────────────────────────────────────────────── */
.exp-overlay{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;pointer-events:none;opacity:0;transition:opacity .28s}
.exp-overlay.open{pointer-events:all;opacity:1}
.exp-bg{position:absolute;inset:0;background:rgba(42,37,32,.4);backdrop-filter:blur(6px)}
.exp-sheet{position:relative;z-index:1;width:100%;background:var(--bg);border-radius:20px 20px 0 0;border-top:1px solid var(--border);padding:14px 24px 44px;transform:translateY(100%);transition:transform .36s cubic-bezier(.32,.72,0,1);max-height:95vh;overflow-y:auto}
.exp-overlay.open .exp-sheet{transform:translateY(0)}
.exp-handle{width:34px;height:3px;background:var(--s3);border-radius:2px;margin:0 auto 16px}
.exp-close{position:absolute;top:14px;right:18px;background:var(--s1);border:1px solid var(--border);color:var(--sub);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s}
.exp-close:hover{background:var(--s3);color:var(--text)}
.exp-art-wrap{display:flex;justify-content:center;margin-bottom:22px;margin-top:4px}
.exp-art{width:160px;height:160px;border-radius:16px;background:var(--s1);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);box-shadow:0 8px 32px rgba(0,0,0,.1);overflow:hidden}
.exp-art img{width:100%;height:100%;object-fit:cover}
.exp-info{text-align:center;margin-bottom:20px}
.exp-title{font-family:var(--font-sans);font-size:24px;font-weight:600;color:var(--charcoal);margin-bottom:4px;letter-spacing:-.2px;overflow:hidden;white-space:nowrap}
.exp-title-inner{display:inline-block;white-space:nowrap}
.exp-title-inner.scrolling{animation:xMarquee var(--marquee-dur,12s) linear infinite}
@keyframes xMarquee{0%{transform:translateX(0)}100%{transform:translateX(var(--marquee-shift,-100%))}}

.exp-sub{font-size:13px;color:var(--sub)}
.exp-prog-wrap{margin-bottom:20px;cursor:pointer;padding:4px 0}
.exp-prog-track{height:3px;background:var(--s3);border-radius:2px;position:relative}
.exp-prog-fill{height:100%;background:var(--charcoal);border-radius:2px;width:0%;position:relative;transition:width .2s linear}
.exp-prog-fill::after{content:'';position:absolute;right:-5px;top:-4px;width:11px;height:11px;background:var(--charcoal);border-radius:50%;opacity:0;transition:opacity .18s}
.exp-prog-wrap:hover .exp-prog-fill::after{opacity:1}
.exp-times{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}
.exp-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:20px}
.exp-btn{background:none;border:none;color:var(--charcoal);cursor:pointer;padding:8px;display:flex;align-items:center;transition:opacity .18s;border-radius:8px}
.exp-btn:hover{opacity:.55}
.exp-btn.exp-secondary{color:var(--muted)}
.exp-btn.active{color:var(--charcoal)}
.exp-play-btn{background:var(--charcoal);border-radius:50%;width:56px;height:56px;color:var(--color-pampas);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .18s;box-shadow:0 4px 16px rgba(42,37,32,.22)}
.exp-play-btn:hover{background:#1e1c19;box-shadow:0 6px 20px rgba(42,37,32,.3)}
.exp-vol-wrap{display:flex;align-items:center;gap:8px;margin-bottom:24px;padding:0 4px}
.exp-vol-wrap svg{color:var(--muted);flex-shrink:0}
.exp-vol-slider{flex:1;-webkit-appearance:none;appearance:none;height:3px;border-radius:2px;background:linear-gradient(to right,var(--charcoal) 0%,var(--charcoal) var(--vol,100%),var(--s3) var(--vol,100%),var(--s3) 100%);outline:none;cursor:pointer}
.exp-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--charcoal);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.exp-queue{border-top:1px solid var(--border);padding-top:16px}
.exp-queue-title{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.exp-queue-list{display:flex;flex-direction:column;gap:1px}
.queue-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background .15s}
.queue-row:hover{background:var(--s1)}
.queue-row.active{background:var(--s1)}
.queue-art{width:36px;height:36px;border-radius:6px;background:var(--s3);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.queue-info{flex:1;min-width:0}
.queue-title{font-size:12.5px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.queue-row.active .queue-title{font-weight:600;color:var(--charcoal)}
.queue-dur{font-size:11px;color:var(--muted);flex-shrink:0;font-variant-numeric:tabular-nums}

/* ── PLAYER OVERLAY ─────────────────────────────────────────────────────── */
#playerOverlay{
  position:fixed;inset:0;z-index:200;
  background:var(--bg);
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;
}
#playerOverlay.open{transform:translateX(0)}
.p-nav{height:54px;display:flex;align-items:center;gap:12px;padding:0 18px;background:rgba(245,241,234,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);flex-shrink:0;position:sticky;top:0;z-index:10}
.p-back{background:var(--s1);border:1px solid var(--border);color:var(--charcoal);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s;flex-shrink:0}
.p-back:hover{background:var(--s3)}
.p-back svg{width:13px;height:13px;display:block}
.p-nav-title{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sub)}
.p-body{flex:1;overflow-y:auto}

/* ── VIDEO WRAP ─────────────────────────────────────────────────────────── */
.vid-wrap{width:100%;background:#000;position:relative;aspect-ratio:16/9;max-height:56vw}
@media(min-width:768px){.vid-wrap{max-height:440px}}
video{width:100%;display:block;background:#000;max-height:56vw}
@media(min-width:768px){video{max-height:440px}}
.ctrl-bar{background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.5) 55%,transparent 100%);position:absolute;bottom:0;left:0;right:0;padding:28px 14px 12px;transition:opacity .25s}
.vid-wrap.hide-ctrl .ctrl-bar{opacity:0}
.vid-wrap.hide-ctrl video{cursor:none}
.prog-wrap{margin-bottom:10px;cursor:pointer;padding:8px 0}
.prog-track{height:3px;background:rgba(255,255,255,.18);border-radius:2px;position:relative}
.prog-fill{height:100%;background:var(--color-crail);border-radius:2px;width:0%;position:relative;transition:width .1s linear}
.prog-fill::after{content:'';position:absolute;right:-5px;top:-4px;width:10px;height:10px;background:white;border-radius:50%;box-shadow:0 0 5px rgba(0,0,0,.5);opacity:0;transition:opacity .18s}
.prog-wrap:hover .prog-fill::after{opacity:1}
.buf-fill{position:absolute;top:0;left:0;height:100%;background:rgba(255,255,255,.14);border-radius:2px;pointer-events:none}
.ctrl-row{display:flex;align-items:center;gap:4px}
.c-btn{background:none;border:none;color:rgba(255,255,255,.8);width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .18s;border-radius:6px;flex-shrink:0}
.c-btn:hover{color:white;background:rgba(255,255,255,.07)}
.c-btn svg{display:block;pointer-events:none}
.c-play{width:38px;height:38px}.c-play svg{width:20px;height:20px}
.c-skip svg{width:17px;height:17px}
.c-vol svg{width:17px;height:17px}
.c-fs svg{width:16px;height:16px}
#playPauseBtn .icon-play{display:block}#playPauseBtn .icon-pause{display:none}
#playPauseBtn.is-playing .icon-play{display:none}#playPauseBtn.is-playing .icon-pause{display:block}
#muteBtn .icon-vol-on{display:block}#muteBtn .icon-vol-off{display:none}
#muteBtn.is-muted .icon-vol-on{display:none}#muteBtn.is-muted .icon-vol-off{display:block}
#fsBtn .icon-expand{display:block}#fsBtn .icon-compress{display:none}
#fsBtn.is-fullscreen .icon-expand{display:none}#fsBtn.is-fullscreen .icon-compress{display:block}
.c-spacer{flex:1}
.time-lbl{font-size:10.5px;color:rgba(255,255,255,.6);white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:.2px}
.vol-wrap{display:flex;align-items:center;gap:4px}
.vol-slider{-webkit-appearance:none;appearance:none;width:56px;height:2.5px;border-radius:2px;outline:none;background:linear-gradient(to right,var(--color-crail) 0%,var(--color-crail) var(--vol,80%),rgba(255,255,255,.18) var(--vol,80%),rgba(255,255,255,.18) 100%);cursor:pointer}
.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:white;cursor:pointer}
.vid-err{display:none;position:absolute;inset:0;background:#080807;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px}
.vid-err.show{display:flex}
.vid-err svg{width:34px;height:34px;color:#666;opacity:.4}
.vid-err p{font-size:12.5px;color:#888;max-width:240px;line-height:1.5}

/* ── VIDEO META ─────────────────────────────────────────────────────────── */
.vid-meta{padding:18px 18px 0}
.v-cat-badge{display:inline-block;font-size:9.5px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;padding:3px 9px;border-radius:3px;margin-bottom:9px}
.badge-tap   {background:rgba(184,150,60,.12);color:var(--gold-dk)}
.badge-scene {background:rgba(201,72,40,.1);color:var(--ember)}
.badge-dance {background:rgba(42,120,96,.1);color:var(--teal)}
.badge-sing  {background:rgba(100,70,180,.1);color:#5040a0}
.badge-general{background:rgba(100,90,80,.08);color:var(--sub)}
.v-title{font-family:var(--font-sans);font-size:24px;font-weight:600;margin-bottom:4px;line-height:1.15;letter-spacing:-.1px;color:var(--charcoal)}
.v-fname{font-size:10.5px;color:var(--muted);font-family:monospace;margin-bottom:14px;word-break:break-all}
.v-actions{display:flex;gap:9px;margin-bottom:22px;flex-wrap:wrap}
.v-btn svg{width:13px;height:13px;display:block;flex-shrink:0}

/* ── RELATED ────────────────────────────────────────────────────────────── */
.rel-section{padding:0 18px;margin-top:22px;padding-bottom:40px}
.rel-title{font-family:var(--font-sans);font-size:18px;font-weight:600;margin-bottom:12px;color:var(--charcoal)}
.rel-list{display:flex;flex-direction:column;gap:9px}
.rel-card{display:flex;align-items:center;gap:11px;padding:11px;background:var(--s2);border:1px solid var(--border);border-radius:10px;cursor:pointer;text-decoration:none;transition:all .18s;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.rel-card:hover{background:var(--s1);border-color:var(--border2)}
.rel-thumb{width:58px;height:58px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:22px}
.rel-info{flex:1;min-width:0}
.rel-info h4{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--charcoal);margin-bottom:2px}
.rel-info span{font-size:11px;color:var(--muted)}
.rel-play{color:var(--muted);flex-shrink:0;transition:color .18s}
.rel-card:hover .rel-play{color:var(--charcoal)}
.rel-play svg{width:15px;height:15px;display:block}

/* ── SKELETON ───────────────────────────────────────────────────────────── */
.skel{background:var(--s1);border-radius:11px;animation:pulse 1.4s ease infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.hero{animation:fadeUp .4s ease both}
section:nth-child(1){animation:fadeUp .4s .06s ease both}
section:nth-child(2){animation:fadeUp .4s .1s ease both}
section:nth-child(3){animation:fadeUp .4s .14s ease both}
section:nth-child(4){animation:fadeUp .4s .18s ease both}
.new-item{animation:popIn .28s ease both}

@media(min-width:720px){
  .media-grid{grid-template-columns:repeat(3,1fr)}
  .media-card.featured{grid-column:1/3;grid-row:1/3;aspect-ratio:auto}
  .all-grid{grid-template-columns:repeat(3,1fr)}
  .s-grid{grid-template-columns:repeat(3,1fr)}
}


.mini-player {
    position: fixed;
    bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0) + 12px);
    left: 12px;
    right: 12px;
    height: var(--mp-h);
    background: var(--s2);
    border: 1px solid var(--border);
    border-radius: 14px;
    z-index: 1000;
    display: none; /* JS will toggle this to 'flex' */
    flex-direction: column;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.mp-body {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 12px;
}

.mp-info {
    flex: 1; /* Pushes the controls to the right */
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0; /* Allows text truncation if title is long */
}

/* CENTER THE CONTROLS */
.mp-controls {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: auto; /* Buttons remain clickable */
}
/* When the 'exp-open' class is active on the body or a parent container */


/* Optional: If you want it to fade out smoothly instead of just vanishing */
.mp-container {
    transition: opacity 0.3s ease;
}


.hidden {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   OPAL ANIMATION SYSTEM · ORANGE ACCENTS · BORDER RADIUS MASTERY
══════════════════════════════════════════════════════════════════════════ */

/* ── Keyframes ─────────────────────────────────────────────────────────── */
@keyframes xFadeUp   { from { opacity:0; transform:translateY(24px); }  to { opacity:1; transform:none; } }
@keyframes xSlideDown{ from { opacity:0; transform:translateY(-100%); } to { opacity:1; transform:none; } }
@keyframes xSlideUpIn{ from { opacity:0; transform:translateY(60px);  } to { opacity:1; transform:none; } }
@keyframes xPopIn    { 0%{opacity:0;transform:scale(.82)} 65%{transform:scale(1.06)} 100%{opacity:1;transform:scale(1)} }
@keyframes xSlideLeft{ from { opacity:0; transform:translateX(-18px); } to { opacity:1; transform:none; } }
@keyframes xFloat    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes xShimmer  { from{background-position:-200% 0} to{background-position:200% 0} }
@keyframes xScaleIn  { from{opacity:0;transform:scale(.93) translateY(8px)} to{opacity:1;transform:none} }
@keyframes xGemGlow  { 0%,100%{filter:brightness(1) saturate(1)} 50%{filter:brightness(1.2) saturate(1.18)} }

/* ── Reduced motion guard ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {

  /* Nav: slide down on load */
  .nav  { animation: xSlideDown 480ms var(--ease-out, cubic-bezier(.16,1,.3,1)) both; }
  /* Tab bar: slide up on load */
  .tabs { animation: xSlideUpIn 480ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 100ms both; }

  /* Page transitions on tab switch */
  .page.active { animation: xFadeUp 340ms var(--ease-out, cubic-bezier(.16,1,.3,1)) both; }

  /* Hero children stagger */
  .h-logo-box { animation: xPopIn   500ms var(--ease-out, cubic-bezier(.16,1,.3,1))  40ms both; }
  .h-title    { animation: xFadeUp  540ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 100ms both; }
  .h-sub      { animation: xFadeUp  480ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 180ms both; }

  /* FAB: pop in when visible */
  .fab.visible { animation: xPopIn 380ms var(--ease-spring, cubic-bezier(.34,1.56,.64,1)) both; }

  /* Login form lift */
  .l-form { animation: xFadeUp 500ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 60ms both; }

  /* Changelog rows stagger */
  .cl-row:nth-child(1)  { animation: xSlideLeft 360ms var(--ease-out, cubic-bezier(.16,1,.3,1))   0ms both; }
  .cl-row:nth-child(2)  { animation: xSlideLeft 360ms var(--ease-out, cubic-bezier(.16,1,.3,1))  55ms both; }
  .cl-row:nth-child(3)  { animation: xSlideLeft 360ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 110ms both; }
  .cl-row:nth-child(4)  { animation: xSlideLeft 360ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 165ms both; }
  .cl-row:nth-child(5)  { animation: xSlideLeft 360ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 220ms both; }
  .cl-row:nth-child(6)  { animation: xSlideLeft 360ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 275ms both; }

  /* Media card stagger */
  .media-card:nth-child(1)  { animation: xScaleIn 420ms var(--ease-out, cubic-bezier(.16,1,.3,1))   0ms both; }
  .media-card:nth-child(2)  { animation: xScaleIn 420ms var(--ease-out, cubic-bezier(.16,1,.3,1))  65ms both; }
  .media-card:nth-child(3)  { animation: xScaleIn 420ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 130ms both; }
  .media-card:nth-child(4)  { animation: xScaleIn 420ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 195ms both; }
  .media-card:nth-child(5)  { animation: xScaleIn 420ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 260ms both; }
  .media-card:nth-child(6)  { animation: xScaleIn 420ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 325ms both; }

  /* Category thumbnail stagger */
  .cat-thumb:nth-child(1) { animation: xFadeUp 360ms var(--ease-out, cubic-bezier(.16,1,.3,1))   0ms both; }
  .cat-thumb:nth-child(2) { animation: xFadeUp 360ms var(--ease-out, cubic-bezier(.16,1,.3,1))  55ms both; }
  .cat-thumb:nth-child(3) { animation: xFadeUp 360ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 110ms both; }
  .cat-thumb:nth-child(4) { animation: xFadeUp 360ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 165ms both; }
  .cat-thumb:nth-child(5) { animation: xFadeUp 360ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 220ms both; }
  .cat-thumb:nth-child(6) { animation: xFadeUp 360ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 275ms both; }

  /* Track row stagger */
  .track-row:nth-child(1)  { animation: xFadeUp 320ms var(--ease-out, cubic-bezier(.16,1,.3,1))   0ms both; }
  .track-row:nth-child(2)  { animation: xFadeUp 320ms var(--ease-out, cubic-bezier(.16,1,.3,1))  45ms both; }
  .track-row:nth-child(3)  { animation: xFadeUp 320ms var(--ease-out, cubic-bezier(.16,1,.3,1))  90ms both; }
  .track-row:nth-child(4)  { animation: xFadeUp 320ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 135ms both; }
  .track-row:nth-child(5)  { animation: xFadeUp 320ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 180ms both; }
  .track-row:nth-child(6)  { animation: xFadeUp 320ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 225ms both; }
  .track-row:nth-child(7)  { animation: xFadeUp 320ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 270ms both; }
  .track-row:nth-child(8)  { animation: xFadeUp 320ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 315ms both; }
  .track-row:nth-child(9)  { animation: xFadeUp 320ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 360ms both; }
  .track-row:nth-child(10) { animation: xFadeUp 320ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 405ms both; }
  .track-row:nth-child(11) { animation: xFadeUp 320ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 450ms both; }
  .track-row:nth-child(12) { animation: xFadeUp 320ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 495ms both; }

  /* Queue rows stagger */
  .queue-row:nth-child(1) { animation: xFadeUp 280ms var(--ease-out, cubic-bezier(.16,1,.3,1))  0ms both; }
  .queue-row:nth-child(2) { animation: xFadeUp 280ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 40ms both; }
  .queue-row:nth-child(3) { animation: xFadeUp 280ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 80ms both; }

  /* Nav mark gem glow */
  .nav-mark { animation: xGemGlow 5s ease-in-out infinite; }

  /* Floating empty states */
  .s-empty svg   { animation: xFloat 3s ease-in-out infinite; }
  .script-blank svg { animation: xFloat 3.2s ease-in-out 0.3s infinite; }
  .vid-err svg   { animation: xFloat 3.4s ease-in-out 0.6s infinite; }

  /* Scroll reveal system — requires .js-loaded on <html> */
  .js-loaded [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity   480ms var(--ease-out, cubic-bezier(.16,1,.3,1)),
      transform 480ms var(--ease-out, cubic-bezier(.16,1,.3,1));
  }
  .js-loaded [data-reveal].visible     { opacity:1; transform:none; }
  .js-loaded [data-reveal="left"]      { transform: translateX(-14px); }
  .js-loaded [data-reveal="left"].visible { transform: none; }
  .js-loaded [data-reveal="scale"]     { transform: scale(.93); }
  .js-loaded [data-reveal="scale"].visible { transform: none; }
  .js-loaded [data-reveal="pop"]       { transform: scale(.86); }
  .js-loaded [data-reveal="pop"].visible { transform: none; }
}

/* Stagger delay helpers (used by IntersectionObserver JS) */
[data-delay="1"] { transition-delay:  55ms !important; }
[data-delay="2"] { transition-delay: 110ms !important; }
[data-delay="3"] { transition-delay: 165ms !important; }
[data-delay="4"] { transition-delay: 220ms !important; }
[data-delay="5"] { transition-delay: 275ms !important; }
[data-delay="6"] { transition-delay: 330ms !important; }
[data-delay="7"] { transition-delay: 385ms !important; }
[data-delay="8"] { transition-delay: 440ms !important; }

/* ── Tab: active → crail color + animated pip underline ────────────────── */
.tab { position: relative; transition: color 200ms ease; }
.tab.active { color: var(--color-crail); }
.tab::after {
  content: '';
  position: absolute; bottom: 3px; left: 50%;
  width: 0; height: 3px;
  background: var(--color-crail);
  border-radius: var(--radius-full);
  transform: translateX(-50%);
  transition: width 280ms var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.tab.active::after { width: 22px; }

/* ── h-title em: crail shimmer gradient (matches index.html) ───────────── */
.h-title em {
  background: linear-gradient(90deg, var(--color-crail) 0%, var(--color-crail-light) 42%, var(--color-crail) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: italic;
  animation: xShimmer 5s ease-in-out infinite;
}

/* ── Section title: crail animated underline (fires on .visible) ────────── */
.sec-title {
  position: relative;
  display: inline-block;
}
.sec-title::after {
  content: '';
  position: absolute; bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--color-crail);
  border-radius: var(--radius-full);
  transition: width 500ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 60ms;
}
.sec-head.visible .sec-title::after { width: 100%; }

/* ── Section eyebrow link: crail hover ─────────────────────────────────── */
.sec-link:hover { color: var(--color-crail); }

/* ── Media card: spring lift + crail shadow glow ───────────────────────── */
.media-card {
  border-radius: var(--radius-xl);
  transition:
    transform   280ms var(--ease-spring, cubic-bezier(.34,1.56,.64,1)),
    box-shadow  220ms ease;
}
.media-card:hover {
  transform: scale(1.025) translateY(-3px);
  box-shadow: 0 14px 40px rgba(193,95,60,.14), 0 4px 14px rgba(0,0,0,.1);
}
.media-card.featured { border-radius: var(--radius-xl); }

/* ── Category thumb: spring lift ───────────────────────────────────────── */
.cat-img   { border-radius: var(--radius-xl); }
.cat-thumb { transition: transform 260ms var(--ease-spring, cubic-bezier(.34,1.56,.64,1)); }
.cat-thumb:hover { transform: translateY(-6px) scale(1.05); }

/* ── Changelog: hover crail tint + micro indent ─────────────────────────── */
.cl-row {
  transition: background 150ms ease, padding-left 200ms var(--ease-out, cubic-bezier(.16,1,.3,1));
  border-radius: var(--radius-md);
}
.cl-row:hover { background: rgba(193,95,60,.05); padding-left: 6px; }

/* ── Playing track: crail accent ───────────────────────────────────────── */
.track-row.playing .track-title { color: var(--color-crail); font-weight: 600; }
.track-bar { background: var(--color-crail); }

/* ── Track row: spring slide right on hover ─────────────────────────────── */
.track-row {
  transition:
    background 150ms ease,
    transform  200ms var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
  border-radius: var(--radius-lg);
}
.track-row:hover { transform: translateX(4px); }

/* ── Progress bars: crail ──────────────────────────────────────────────── */
.mp-prog-fill           { background: var(--color-crail); }
.exp-prog-fill          { background: var(--color-crail); }
.exp-prog-fill::after   { background: var(--color-crail); }
.up-fill                { background: var(--color-crail); }

/* ── Drop zone: crail on active states ─────────────────────────────────── */
.drop-zone {
  border-radius: var(--radius-xl);
  transition: all .22s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.drop-zone.has-file  { border-color: var(--color-crail); background: rgba(193,95,60,.05); }
.drop-zone.dragging  { border-color: var(--color-crail); background: rgba(193,95,60,.04); }

/* ── Search box: crail focus ring ──────────────────────────────────────── */
.search-box {
  border-radius: var(--radius-xl);
  transition: border-color .2s ease, box-shadow .28s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.search-box:focus-within {
  border-color: var(--color-crail);
  box-shadow: 0 0 0 3px rgba(193,95,60,.12);
}

/* ── Nav: mark spring rotate on hover ──────────────────────────────────── */
.nav-left { transition: opacity 180ms ease; }
.nav-left:hover { opacity: .75; }
.nav-mark {
  border-radius: var(--radius-lg);
  transition: transform 280ms var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.nav-left:hover .nav-mark { transform: scale(1.1); }
.nav-user-av {
  width: 22px; height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-crail);
  color: #fff;
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: .04em;
  flex-shrink: 0;
}

/* ── Related card: crail spring hover ──────────────────────────────────── */
.rel-card {
  border-radius: var(--radius-xl);
  transition:
    transform     240ms var(--ease-spring, cubic-bezier(.34,1.56,.64,1)),
    background    150ms ease,
    border-color  150ms ease,
    box-shadow    220ms ease;
}
.rel-card:hover {
  transform: translateX(5px);
  border-color: rgba(193,95,60,.28);
  box-shadow: 0 4px 20px rgba(193,95,60,.1);
}
.rel-card:hover .rel-play { color: var(--color-crail); }

/* ── Sheet / exp-sheet: rounder top corners ────────────────────────────── */
.sheet     { border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
.exp-sheet { border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }

/* ── Hero: rounder corners ─────────────────────────────────────────────── */
.hero { border-radius: var(--radius-2xl); }

/* ── Toast: pill radius ────────────────────────────────────────────────── */
.toast { border-radius: var(--radius-full); }

/* ── Mini player: opal radius ──────────────────────────────────────────── */
.mini-player { border-radius: var(--radius-xl); }

/* ── Music / All-media head: crail accent bar ──────────────────────────── */
.music-head h2,
.all-head h2 {
  position: relative;
  display: inline-block;
}
.music-head h2::after,
.all-head h2::after {
  content: '';
  position: absolute; bottom: -4px; left: 0;
  width: 28px; height: 3px;
  background: var(--color-crail);
  border-radius: var(--radius-full);
}

/* ── Nav logout: crail hover ───────────────────────────────────────────── */
.nav-logout:hover { color: var(--color-crail); }

/* ── Vol slider: crail thumb ───────────────────────────────────────────── */
.exp-vol-slider::-webkit-slider-thumb {
  background: var(--color-crail);
  box-shadow: 0 2px 6px rgba(193,95,60,.3);
}
.exp-vol-slider::-moz-range-thumb {
  background: var(--color-crail);
}

/* ── Queue row active: crail accent border ──────────────────────────────── */
.queue-row.active { border-left: 2.5px solid var(--color-crail); padding-left: 8px; background: rgba(193,95,60,.06); }
.queue-row.active .queue-title { color: var(--color-crail); }

/* ── Exp play controls: crail progress thumb ─────────────────────────────── */
.exp-prog-wrap { cursor: pointer; }

/* ── Mini player play button: crail ────────────────────────────────────── */
.mp-play-btn { background: var(--color-crail); border-radius: var(--radius-full); }
.mp-play-btn:hover { background: var(--color-crail-dark); }

/* ── Exp play button: crail ─────────────────────────────────────────────── */
.exp-play-btn { background: var(--color-crail); box-shadow: 0 4px 16px rgba(193,95,60,.32); }
.exp-play-btn:hover { background: var(--color-crail-dark); box-shadow: 0 6px 22px rgba(193,95,60,.4); }

/* ── Script blank: crail accent on badge ────────────────────────────────── */
.script-blank { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 72px 20px; text-align: center; }
.script-blank svg { width: 52px; height: 52px; color: var(--color-crail); opacity: .35; }
.script-blank-title { font-family: var(--font-sans); font-size: 22px; font-weight: 600; color: var(--charcoal); display: flex; align-items: center; gap: 9px; }
.script-blank-sub { font-size: 13px; color: var(--muted); }

/* ══════════════════════════════════════════════════════════════════════════
   3D CARD TILT · PLAYER ANIMATIONS · MUSIC PLAYER CINEMA
══════════════════════════════════════════════════════════════════════════ */

/* ── New keyframes ─────────────────────────────────────────────────────── */
@keyframes xSpinAlbum  { to { transform: rotate(360deg); } }
@keyframes xRipple     { 0%{transform:scale(0);opacity:.55} 100%{transform:scale(4);opacity:0} }
@keyframes xProgPulse  { 0%,100%{box-shadow:0 0 0 0 rgba(193,95,60,0)} 50%{box-shadow:0 0 10px 2px rgba(193,95,60,.35)} }
@keyframes xShufflePin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
@keyframes xPlayToggle { 0%{transform:scale(1)} 40%{transform:scale(.82)} 100%{transform:scale(1)} }
@keyframes xCardIn     { 0%{opacity:0;transform:perspective(700px) rotateX(8deg) translateY(20px)} 100%{opacity:1;transform:perspective(700px) rotateX(0) translateY(0)} }
@keyframes xPageBar    { 0%{transform:scaleX(0)} 30%{transform:scaleX(.35)} 65%{transform:scaleX(.65)} 100%{transform:scaleX(.88)} }

/* ── Top page-load progress bar ────────────────────────────────────────── */
#page-load-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 9997;
  background: var(--color-crail);
  transform-origin: left;
  transform: scaleX(0);
  opacity: 0;
  box-shadow: 0 0 8px rgba(193,95,60,.45);
  pointer-events: none;
}
#page-load-bar.loading {
  opacity: 1;
  animation: xPageBar 2s var(--ease-out, cubic-bezier(.16,1,.3,1)) forwards;
}
#page-load-bar.loaded {
  transform: scaleX(1);
  opacity: 0;
  transition: transform .18s ease, opacity .4s ease .1s;
}

/* ── 3D card tilt: shine overlay via ::before ──────────────────────────── */
/* JS sets --mx / --my CSS vars; ::before reads them for radial glow       */
.media-card {
  transform-style: preserve-3d;
  will-change: transform;
}
.media-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,.24) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: 2;
}
.media-card:hover::before { opacity: 1; }

/* Fast tracking during tilt, spring on release */
.media-card.card-tilting  { transition: box-shadow 60ms ease !important; }
.media-card.card-returning {
  transition:
    transform   550ms var(--ease-spring, cubic-bezier(.34,1.56,.64,1)),
    box-shadow  420ms ease !important;
}

/* ── Video player overlay: enhanced slide-in ───────────────────────────── */
#playerOverlay {
  transition:
    transform .42s cubic-bezier(.32,.72,0,1),
    opacity   .28s ease;
}
#playerOverlay:not(.open) { opacity: 0; }
#playerOverlay.open       { opacity: 1; }

/* Stagger player content on open */
@media (prefers-reduced-motion: no-preference) {
  #playerOverlay.open .vid-wrap    { animation: xFadeUp 440ms var(--ease-out, cubic-bezier(.16,1,.3,1))   0ms both; }
  #playerOverlay.open .vid-meta    { animation: xFadeUp 440ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 130ms both; }
  #playerOverlay.open .rel-section { animation: xFadeUp 420ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 240ms both; }
  #playerOverlay.open .v-title     { animation: xFadeUp 400ms var(--ease-out, cubic-bezier(.16,1,.3,1))  90ms both; }
  #playerOverlay.open .v-actions   { animation: xFadeUp 380ms var(--ease-out, cubic-bezier(.16,1,.3,1)) 180ms both; }
}

/* Ctrl bar: slide up + fade, not just opacity */
.ctrl-bar {
  transition: opacity .28s ease, transform .3s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.vid-wrap.hide-ctrl .ctrl-bar {
  opacity: 0;
  transform: translateY(10px);
}

/* Progress track expands on hover */
.prog-track {
  height: 4px;
  border-radius: var(--radius-full);
  transition: height .22s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.prog-wrap:hover .prog-track { height: 7px; }

/* Progress fill: crail glow */
.prog-fill {
  border-radius: var(--radius-full);
  box-shadow: 0 0 7px rgba(193,95,60,.45);
}

/* Progress thumb: spring grow */
.prog-fill::after {
  width: 14px; height: 14px;
  right: -7px; top: -5px;
  box-shadow: 0 0 8px rgba(193,95,60,.5), 0 2px 6px rgba(0,0,0,.4);
  transition: opacity .2s ease, transform .22s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
  transform: scale(.6);
}
.prog-wrap:hover .prog-fill::after { opacity: 1; transform: scale(1); }

/* Player back button spring */
.p-back {
  border-radius: var(--radius-full);
  transition:
    transform 240ms var(--ease-spring, cubic-bezier(.34,1.56,.64,1)),
    background 140ms ease, color 140ms ease;
}
.p-back:hover  { transform: scale(1.08) translateX(-1px); }
.p-back:active { transform: scale(.86); }

/* Control buttons: spring scale */
.c-btn {
  border-radius: var(--radius-lg);
  transition:
    color       .15s ease,
    background  .15s ease,
    transform   200ms var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.c-btn:hover  { transform: scale(1.1); }
.c-btn:active { transform: scale(.85); }

/* Play/pause button: ripple + spring */
.c-play {
  border-radius: var(--radius-full);
  position: relative; overflow: hidden;
}
.c-play::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.32);
  transform: scale(0); opacity: 0;
  pointer-events: none;
}
.c-play:active::after { animation: xRipple 420ms ease; }

/* Skip buttons: rotate when active */
.c-skip { transition: transform 200ms var(--ease-spring, cubic-bezier(.34,1.56,.64,1)), color .15s; }
.c-skip:hover  { transform: scale(1.1); }
.c-skip:active { transform: scale(.85) rotate(-15deg); }

/* Vol slider crail thumb spring */
.vol-slider::-webkit-slider-thumb {
  transition: transform 200ms var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.vol-slider:hover::-webkit-slider-thumb { transform: scale(1.4); }

/* ── Expanded music player: cinema mode ────────────────────────────────── */

/* Stagger on open */
@media (prefers-reduced-motion: no-preference) {
  .exp-overlay.open .exp-art-wrap  { animation: xPopIn    540ms var(--ease-spring, cubic-bezier(.34,1.56,.64,1))  40ms both; }
  .exp-overlay.open .exp-info      { animation: xFadeUp   460ms var(--ease-out, cubic-bezier(.16,1,.3,1))         150ms both; }
  .exp-overlay.open .exp-prog-wrap { animation: xFadeUp   430ms var(--ease-out, cubic-bezier(.16,1,.3,1))         230ms both; }
  .exp-overlay.open .exp-controls  { animation: xScaleIn  420ms var(--ease-out, cubic-bezier(.16,1,.3,1))         310ms both; }
  .exp-overlay.open .exp-vol-wrap  { animation: xFadeUp   400ms var(--ease-out, cubic-bezier(.16,1,.3,1))         400ms both; }
  .exp-overlay.open .exp-queue     { animation: xFadeUp   380ms var(--ease-out, cubic-bezier(.16,1,.3,1))         490ms both; }
}

/* Album art: spins when playing, pauses on pause */
.exp-art {
  transition: border-radius 500ms var(--ease-out, cubic-bezier(.16,1,.3,1)), box-shadow 500ms ease;
}
.exp-art.is-spinning {
  border-radius: var(--radius-full) !important;
  animation: xSpinAlbum 18s linear infinite;
  box-shadow:
    0 0 0 6px rgba(193,95,60,.1),
    0 0 0 12px rgba(193,95,60,.05),
    0 16px 48px rgba(193,95,60,.22);
}
.exp-art.is-paused {
  border-radius: var(--radius-full) !important;
  animation: xSpinAlbum 18s linear infinite paused;
  box-shadow:
    0 0 0 4px rgba(193,95,60,.07),
    0 10px 30px rgba(0,0,0,.12);
}

/* Exp progress track expand */
.exp-prog-track {
  height: 4px;
  border-radius: var(--radius-full);
  transition: height .2s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.exp-prog-wrap:hover .exp-prog-track { height: 7px; }

/* Exp progress fill glow */
.exp-prog-fill {
  border-radius: var(--radius-full);
  box-shadow: 0 0 8px rgba(193,95,60,.4);
}

/* Exp progress thumb spring */
.exp-prog-fill::after {
  width: 14px; height: 14px;
  right: -7px; top: -5px;
  transition: opacity .2s ease, transform .22s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
  transform: scale(.5);
}
.exp-prog-wrap:hover .exp-prog-fill::after { opacity: 1; transform: scale(1); }

/* Exp control buttons spring */
.exp-btn {
  border-radius: var(--radius-lg);
  transition:
    opacity  .18s ease,
    color    .18s ease,
    transform 220ms var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.exp-btn:hover  { opacity: 1; transform: scale(1.14); }
.exp-btn:active { transform: scale(.84); }

/* Active shuffle/repeat: rotate icon */
.exp-btn.active svg { animation: xShufflePin 380ms var(--ease-spring, cubic-bezier(.34,1.56,.64,1)); }

/* Exp play button: ripple + spring */
.exp-play-btn {
  position: relative; overflow: hidden;
  border-radius: var(--radius-full);
  transition:
    transform   250ms var(--ease-spring, cubic-bezier(.34,1.56,.64,1)),
    box-shadow  .3s ease,
    background  .2s ease;
}
.exp-play-btn::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.32);
  transform: scale(0); opacity: 0;
  pointer-events: none;
}
.exp-play-btn:active::after { animation: xRipple 480ms ease; }
.exp-play-btn:hover  { transform: scale(1.07); }
.exp-play-btn:active { transform: scale(.89); }

/* Mini player play button: ripple */
.mp-play-btn {
  position: relative; overflow: hidden;
  border-radius: var(--radius-full);
  transition:
    transform  240ms var(--ease-spring, cubic-bezier(.34,1.56,.64,1)),
    background .2s ease;
}
.mp-play-btn::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.32);
  transform: scale(0); opacity: 0;
  pointer-events: none;
}
.mp-play-btn:active::after { animation: xRipple 380ms ease; }
.mp-play-btn:hover  { transform: scale(1.08); }
.mp-play-btn:active { transform: scale(.90); }

/* Mini player progress: crail glow pulse when playing */
.mp-prog-fill {
  border-radius: var(--radius-full);
  box-shadow: 0 0 6px rgba(193,95,60,.35);
}

/* ── Vol slider: crail, spring thumb ───────────────────────────────────── */
.exp-vol-slider::-webkit-slider-runnable-track {
  height: 4px; border-radius: var(--radius-full);
}
.exp-vol-slider::-webkit-slider-thumb {
  transition: transform 200ms var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.exp-vol-slider:hover::-webkit-slider-thumb { transform: scale(1.4); }

/* ── Force light theme (override opal dark mode) ────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-pampas:          #F4F3EE;
    --color-white:           #FFFFFF;
    --color-ink:             #2c2a27;
    --color-ink-muted:       #5c5954;
    --color-cloudy:          #B1ADA1;
    --color-cloudy-dark:     #8a8680;
    --shadow-sm:  0 1px 2px rgba(44,42,39,.06), 0 1px 3px rgba(44,42,39,.1);
    --shadow-md:  0 4px 6px rgba(44,42,39,.07), 0 2px 4px rgba(44,42,39,.06);
    --shadow-lg:  0 10px 15px rgba(44,42,39,.1), 0 4px 6px rgba(44,42,39,.05);
    --color-error-surface:   rgba(217,79,79,.08);
    --color-success-surface: rgba(74,158,92,.08);
    --color-warning-surface: rgba(201,144,26,.08);
    --color-info-surface:    rgba(193,95,60,.07);
  }
}