*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
.sk,.fpl-art:not(.paused),.pl-wave-b,.vb{animation-play-state:var(--anim-state)!important}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
:root{
  --bg:#02030A;
  --bg2:#06080F;
  --g1:rgba(255,255,255,.036);
  --g2:rgba(255,255,255,.060);
  --g3:rgba(255,255,255,.092);
  --g4:rgba(255,255,255,.14);
  --b1:rgba(255,255,255,.068);
  --b2:rgba(80,170,255,.16);
  --b3:rgba(80,170,255,.28);
  --t1:#F2F5FF;
  --t2:rgba(242,245,255,.74);
  --t3:rgba(242,245,255,.42);
  --t4:rgba(242,245,255,.20);
  --p:#2196F3;--p2:#56C0FF;--p3:#A0DFFF;
  --pk:#00CFFF;--pk2:#55E0FF;
  --gr:#29D494;--gold:#FFD04A;
  --art-tint:33,150,243;
  --art-tint2:80,30,200;
  --anim-state:running;
  --nav:62px;
  /* ── Safe-area tokens (overridden by JS once Telegram reports real values) ──
     --tg-sa-top   : hardware device safe area (notch / Dynamic Island)
     --tg-csa-top  : Telegram's own UI overlay height (header bar in fullscreen)
     --st          : combined top clearance = device notch + Telegram header
     --sb          : combined bottom clearance = home indicator height
     --sl / --sr   : horizontal safe areas (landscape support)                 */
  --tg-sa-top:env(safe-area-inset-top,0px);
  --tg-csa-top:0px;
  --st:env(safe-area-inset-top,0px);
  --sb:env(safe-area-inset-bottom,0px);
  --sl:env(safe-area-inset-left,0px);
  --sr:env(safe-area-inset-right,0px);
  --ph:78px;
  --r1:13px;--r2:17px;--r3:22px;--r4:26px;
  --card-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 12px 30px rgba(0,0,0,.55),0 3px 8px rgba(0,0,0,.30);
}
html{height:100%;height:100dvh;overflow:hidden}
body{
  height:100%;height:100dvh;background:var(--bg);color:var(--t1);
  font-family:'Inter',-apple-system,'SF Pro Display','SF Pro Text',BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  font-size:14px;line-height:1.5;overflow:hidden;-webkit-font-smoothing:antialiased;
  /* TinglaBot — premium dark luxury gradient */
  background-image:
    /* Stage light: cyan-blue arch (brand identity) */
    radial-gradient(ellipse 180% 90% at 50% -28%,
      rgba(0,170,255,.170) 0%,
      rgba(33,120,243,.085) 35%,
      transparent 55%),
    /* Indigo depth — left column */
    radial-gradient(ellipse 120% 70% at -15% 30%,
      rgba(80,20,220,.120) 0%,
      rgba(60,10,190,.055) 42%,
      transparent 60%),
    /* Electric cyan — right accent */
    radial-gradient(ellipse 90% 60% at 115% 14%,
      rgba(0,210,255,.100) 0%,
      rgba(0,160,240,.042) 40%,
      transparent 56%),
    /* Deep purple — bottom left warmth */
    radial-gradient(ellipse 100% 60% at -8% 92%,
      rgba(120,0,200,.090) 0%,
      rgba(90,0,160,.038) 46%,
      transparent 60%),
    /* Teal — bottom right balance */
    radial-gradient(ellipse 80% 50% at 108% 88%,
      rgba(0,195,210,.075) 0%,
      transparent 52%);
}

/* ════════════════════════════════════════
   AMBIENT GRAIN — static noise for vinyl/premium feel
════════════════════════════════════════ */
.orbs{display:none}
.orb,.o1,.o2,.o3,.o4,.o5{display:none}

/* Fine grain texture over entire screen */
.mesh{
  display:block;
  position:fixed;inset:0;z-index:0;
  pointer-events:none;
  opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:200px;
  background-repeat:repeat;
}

/* ════════════════════════════════════════
   LAYOUT
════════════════════════════════════════ */
#app{
  position:fixed;inset:0;z-index:1;
  display:flex;flex-direction:column;overflow:hidden;
  height:100%;height:100dvh;
  /* Respect horizontal safe areas (landscape, notch-left phone) */
  padding-left:var(--sl);
  padding-right:var(--sr);
}
.pages{flex:1;overflow:hidden;position:relative}
.page{
  position:absolute;inset:0;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  display:none;
  /* Extra 8px on top of nav height so last card isn't hidden behind nav pill */
  padding-bottom:calc(var(--nav-h) + var(--sb) + 44px);
  contain:layout style;
}
.page-in>*{}
.page.on{display:block}
/* Remove the horizontal padding from page-in since #app already handles it,
   but keep the max-width centering */
.page-in{max-width:480px;margin:0 auto;padding:0 16px}
.fadein{animation:pgIn .28s cubic-bezier(.25,.46,.45,.94) both}
@keyframes pgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ════════════════════════════════════════
   NAV — Uiverse pill bar (dark site edition)
════════════════════════════════════════ */
:root{
  --nav-h:72px;
  --nav-pill-h:56px;
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}
@keyframes navIcoBounce{
  0%,100%{transform:scale(1)}
  30%{transform:scale(.82)}
  65%{transform:scale(1.14)}
}
/* Wrapper — just spacing + centering, no visual */
.nav{
  position:relative;z-index:100;flex-shrink:0;
  /* Reserve space for pill + bottom safe area (home indicator) */
  height:calc(var(--nav-h) + var(--sb));
  /* Invisible padding so the pill floats above the home indicator */
  padding-bottom:var(--sb);
  background:transparent;
  display:flex;align-items:center;justify-content:center;
}
/* Hidden — JS still reads it, but blob is invisible in new design */
.nav-track,.nav-blob{display:none}

/* ── Pill container — 2-tab centered ── */
.nav-pill{
  position:absolute;
  bottom:calc(var(--sb) + 10px);
  left:50%;transform:translateX(-50%);
  width:220px;
  backdrop-filter:blur(28px) saturate(220%);
  -webkit-backdrop-filter:blur(28px) saturate(220%);
  background:rgba(10,14,28,.78);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 16px 48px rgba(0,0,0,.65),
    0 4px 16px rgba(0,0,0,.40),
    0 0 32px rgba(0,150,255,.06);
  padding:5px;
  border-radius:99rem;
  display:flex;
  justify-content:center;
  gap:4px;
  z-index:50;
}

/* Each nav item */
.ni{
  display:flex;flex-direction:column;align-items:center;
  flex:1 1 0;min-width:0;
  color:rgba(255,255,255,.32);
  background:none;border:none;
  cursor:pointer;font-family:inherit;
  padding:11px 8px;
  border-radius:999rem;
  -webkit-tap-highlight-color:transparent;
  transition:
    background .22s var(--ease-spring),
    color .22s var(--ease-spring),
    transform .18s var(--ease-spring),
    box-shadow .22s ease;
  user-select:none;
}
.ni:active{transform:scale(.90)}

/* Active state */
.ni.on{
  background:linear-gradient(145deg,rgba(0,170,255,.22),rgba(33,100,255,.14));
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 0 20px rgba(0,160,255,.18);
}

/* Icon */
.ni-ic{
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;
  position:relative;
}
.ni.on .ni-ic{animation:navIcoBounce .38s var(--ease-spring)}

.ni-ic svg{
  width:21px;height:21px;
  stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .18s,filter .18s,stroke-width .18s;
}
.ni.on .ni-ic svg{
  stroke:#fff;
  stroke-width:2.3;
  filter:drop-shadow(0 0 8px rgba(0,180,255,.70));
}

/* Label */
.ni-lb{
  font-size:9px;font-weight:700;letter-spacing:.15px;text-transform:uppercase;
  color:inherit;line-height:1;
  margin-top:4px;
  transition:color .18s,font-weight .18s;
}
.ni.on .ni-lb{font-weight:800;color:#fff}
.ni-bar{display:none}

/* ════════════════════════════════════════
   SECTION HEADER — premium
════════════════════════════════════════ */
.sh{display:flex;align-items:center;justify-content:space-between;margin:28px 0 14px}
.sh-t{
  font-size:19px;font-weight:900;letter-spacing:-.48px;
  background:linear-gradient(110deg,#f2f5ff 0%,rgba(242,245,255,.75) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sh-a{
  font-size:11.5px;font-weight:700;color:var(--p2);cursor:pointer;
  padding:5px 14px;border-radius:20px;
  background:rgba(33,150,243,.10);
  border:1px solid rgba(33,150,243,.22);
  outline:1px solid rgba(0,0,0,.10);outline-offset:-1px;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset;
  backdrop-filter:blur(12px);
  transition:background .16s,border-color .16s;
}
.sh-a:active{background:rgba(33,150,243,.22)}

/* ════════════════════════════════════════
   HOME HEADER — iOS 17 / Apple Music Pro
════════════════════════════════════════ */
@keyframes greetSlide{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes titleSlide{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes avatarRing{
  0%,100%{box-shadow:0 0 0 0 rgba(0,207,255,.0),0 6px 20px rgba(0,0,0,.55)}
  50%{box-shadow:0 0 0 4px rgba(0,207,255,.22),0 6px 20px rgba(0,0,0,.55)}
}
.hh{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:calc(var(--st) + 20px) 0 10px;
  gap:12px;
}
.hh-left{flex:1;min-width:0}

/* Greeting row */
.hh-greet{
  font-size:12.5px;font-weight:600;
  color:rgba(255,255,255,.36);
  letter-spacing:.15px;margin-bottom:3px;
  text-transform:uppercase;
  animation:greetSlide .5s .05s both;
}

/* Big title */
.hh-title{
  font-size:32px;font-weight:900;
  letter-spacing:-.80px;line-height:1.05;
  animation:titleSlide .5s .12s both;
}
/* Gradient brand name */
.hh-title .g{
  background:linear-gradient(128deg,
    #ffffff 0%,
    #d6f0ff 25%,
    #70d0ff 52%,
    #2196F3 80%,
    #0D47A1 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 2px 12px rgba(33,150,243,.35));
}

/* Subtitle / tagline */
.hh-sub{
  font-size:10.5px;
  color:rgba(255,255,255,.24);
  margin-top:6px;font-weight:500;letter-spacing:.22px;
  display:flex;align-items:center;gap:6px;
  animation:greetSlide .5s .22s both;
}
.hh-sub::before{
  content:'';
  display:inline-block;
  width:20px;height:1px;
  background:linear-gradient(90deg,rgba(0,207,255,.6),transparent);
  border-radius:1px;
}

/* Right side */
.hh-right{
  display:flex;align-items:center;
  gap:9px;flex-shrink:0;
  margin-top:4px;
  animation:greetSlide .5s .08s both;
}

/* Notification bell */
.hh-bell{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  outline:1px solid rgba(0,0,0,.14);outline-offset:-1px;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 4px 14px rgba(0,0,0,.32);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
  transition:background .16s,transform .18s cubic-bezier(.34,1.56,.64,1);
  position:relative;
}
.hh-bell:active{background:rgba(255,255,255,.16);transform:scale(.82)}
.hh-bell svg{
  width:17px;height:17px;
  stroke:rgba(255,255,255,.65);fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .16s;
}
.hh-bell:active svg{stroke:#fff}
.hh-bell-dot{
  position:absolute;top:6px;right:7px;
  width:8px;height:8px;border-radius:50%;
  background:var(--pk);
  border:2px solid var(--bg);
  box-shadow:0 0 8px rgba(0,207,255,.90),0 0 16px rgba(0,207,255,.45);
}

/* Avatar with pulsing ring */
.hh-avatar{
  width:40px;height:40px;border-radius:50%;overflow:hidden;
  flex-shrink:0;cursor:pointer;
  border:2px solid rgba(255,255,255,.20);
  outline:2px solid rgba(0,0,0,.22);
  outline-offset:-2px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.30) inset,
    0 8px 24px rgba(0,0,0,.58);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),opacity .16s;
  animation:avatarRing 4s 2s ease-in-out infinite;
}
.hh-avatar:active{transform:scale(.82);opacity:.72}
.hh-avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* ── Quick search pill ── */
.hh-qsearch{
  display:flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  outline:1px solid rgba(0,0,0,.16);outline-offset:-1px;
  border-radius:18px;
  padding:13px 16px;
  margin-bottom:16px;
  cursor:pointer;
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 -1px 0 rgba(0,0,0,.12) inset,
    0 6px 22px rgba(0,0,0,.36);
  transition:background .16s,transform .18s cubic-bezier(.34,1.4,.64,1);
  animation:greetSlide .5s .28s both;
}
.hh-qsearch:active{
  background:rgba(255,255,255,.12);
  transform:scale(.978);
}
.hh-qsearch svg{
  width:15px;height:15px;
  stroke:rgba(255,255,255,.38);fill:none;
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;
}
.hh-qsearch-ph{
  font-size:13.5px;font-weight:500;
  color:rgba(255,255,255,.30);
  flex:1;letter-spacing:-.05px;
}
.hh-qsearch-right{
  display:flex;align-items:center;gap:4px;
  font-size:10px;font-weight:700;letter-spacing:.3px;
  color:rgba(255,255,255,.20);
  flex-shrink:0;
  border:1px solid rgba(255,255,255,.10);
  border-radius:7px;
  padding:3px 8px;
  background:rgba(255,255,255,.05);
}

/* ════════════════════════════════════════
   CHIPS — premium pill filters
════════════════════════════════════════ */
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 18px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex-shrink:0;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 4px 12px rgba(0,0,0,.24);
  border-radius:99px;padding:9px 22px;font-size:12.5px;font-weight:600;
  cursor:pointer;white-space:nowrap;color:rgba(255,255,255,.46);
  transition:all .22s cubic-bezier(.34,1.4,.64,1);
  letter-spacing:.04px;
}
.chip.on{
  background:linear-gradient(135deg,rgba(0,160,255,.26),rgba(33,80,255,.18));
  border-color:rgba(0,180,255,.45);
  color:#fff;
  box-shadow:
    0 0 0 1px rgba(0,200,255,.15),
    0 0 24px rgba(0,160,255,.20),
    0 1px 0 rgba(255,255,255,.20) inset;
  text-shadow:0 0 12px rgba(0,200,255,.40);
}
.chip:active{transform:scale(.90)}

/* ════════════════════════════════════════
   HERO — cinematic featured card
════════════════════════════════════════ */
@keyframes heroPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,180,255,.0),0 28px 70px rgba(0,0,0,.70),0 4px 16px rgba(0,0,0,.36)}
  50%{box-shadow:0 0 0 3px rgba(0,180,255,.08),0 28px 70px rgba(0,0,0,.70),0 4px 16px rgba(0,0,0,.36)}
}
.hero{
  position:relative;border-radius:26px;overflow:hidden;
  height:224px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:24px 22px;margin-bottom:8px;cursor:pointer;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,.24) inset,
    0 28px 70px rgba(0,0,0,.70),
    0 4px 16px rgba(0,0,0,.36);
  transition:transform .22s cubic-bezier(.34,1.4,.64,1),box-shadow .22s;
  animation:heroPulse 5s 2s ease-in-out infinite;
}
.hero:active{transform:scale(.975);box-shadow:0 8px 30px rgba(0,0,0,.55);animation:none}
.hero-bg{
  position:absolute;inset:0;object-fit:cover;width:100%;height:100%;
  opacity:.35;transition:opacity .4s,transform .6s cubic-bezier(.25,.46,.45,.94);
}
.hero:active .hero-bg{transform:scale(1.03);opacity:.28}
.hero-ov{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(4,6,14,.08) 0%,rgba(4,6,14,.30) 30%,rgba(4,6,14,.96) 100%),
    linear-gradient(90deg,rgba(0,120,255,.06) 0%,transparent 60%);
}
.hero-glow{
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
}
.hero-bd{position:relative;z-index:2}
.hero-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:9px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--pk2);margin-bottom:8px;
}
.hero-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--pk);box-shadow:0 0 10px var(--pk),0 0 20px rgba(0,207,255,.4);
  animation:hd 1.8s ease-in-out infinite alternate;
}
@keyframes hd{from{opacity:.5;transform:scale(.85)}to{opacity:1;transform:scale(1.1)}}
.hero-title{
  font-size:23px;font-weight:900;letter-spacing:-.55px;color:#fff;line-height:1.18;
  text-shadow:0 2px 16px rgba(0,0,0,.50);
}
.hero-sub{
  font-size:12px;color:rgba(255,255,255,.44);margin-top:5px;
  font-weight:500;letter-spacing:.05px;
}
/* Play button on hero */
.hero-play{
  position:absolute;bottom:22px;right:20px;z-index:3;
  width:50px;height:50px;border-radius:50%;
  background:linear-gradient(145deg,rgba(0,180,255,.95),rgba(33,100,255,.90));
  border:1.5px solid rgba(255,255,255,.35);
  box-shadow:
    0 1px 0 rgba(255,255,255,.40) inset,
    0 8px 24px rgba(0,150,255,.55),
    0 2px 8px rgba(0,0,0,.40);
  display:flex;align-items:center;justify-content:center;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s;
}
.hero:active .hero-play{
  transform:scale(.88);
  box-shadow:0 4px 12px rgba(0,150,255,.38);
}
.hero-play svg{width:18px;height:18px;fill:#fff;margin-left:3px}
/* FEATURED badge */
.hero::after{
  content:'FEATURED';position:absolute;top:18px;right:18px;z-index:3;
  font-size:7px;font-weight:900;letter-spacing:1.5px;
  padding:5px 10px;border-radius:10px;
  background:rgba(0,180,255,.18);
  border:1px solid rgba(0,200,255,.30);
  color:rgba(0,220,255,.90);
  backdrop-filter:blur(12px);
  text-shadow:0 0 10px rgba(0,200,255,.50);
}

/* ════════════════════════════════════════
   HORIZONTAL SCROLL
════════════════════════════════════════ */
.hs{display:flex;gap:11px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.hs::-webkit-scrollbar{display:none}

/* ════════════════════════════════════════
   TRACK CARD — transparent window glass
════════════════════════════════════════ */
.tc{
  flex-shrink:0;width:148px;border-radius:var(--r3);overflow:hidden;cursor:pointer;
  position:relative;
  background:rgba(255,255,255,.056);
  border:1px solid rgba(255,255,255,.16);
  outline:1px solid rgba(0,0,0,.20);outline-offset:-1px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 -1px 0 rgba(0,0,0,.16) inset,
    0 12px 34px rgba(0,0,0,.52);
  transition:transform .22s cubic-bezier(.34,1.4,.64,1),box-shadow .22s;
}
.tc:active{transform:scale(.91);box-shadow:0 4px 14px rgba(0,0,0,.42)}
.tc-cv{position:relative;width:100%;aspect-ratio:1;overflow:hidden;background:var(--g2)}
.tc-cv img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.25,.46,.45,.94)}
.tc:active .tc-cv img{transform:scale(1.04)}
.tc-cv-ph{
  width:100%;height:100%;
  background:linear-gradient(140deg,rgba(33,150,243,.18),rgba(0,60,160,.12));
  display:flex;align-items:center;justify-content:center;font-size:32px;
}
.tc-ov{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(4,6,14,.78) 100%);
}
.tc-prev{
  position:absolute;bottom:9px;right:9px;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.32);
  outline:1px solid rgba(0,0,0,.16);outline-offset:-1px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.40) inset,
    0 5px 16px rgba(0,0,0,.60);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;transform:scale(.78);
  transition:all .18s cubic-bezier(.34,1.5,.64,1);
}
.tc:hover .tc-prev,.tc:focus .tc-prev{opacity:1;transform:scale(1)}
.tc-cv:active .tc-prev,.tc-prev:active{opacity:1;transform:scale(.86)!important;background:rgba(255,255,255,.26)}
.tc-prev svg{width:11px;height:11px;fill:#fff;margin-left:2px}
.tc-bd{padding:10px 12px 13px}
.tc-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.12px}
.tc-art{font-size:11.5px;color:var(--t3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.tc-dur{font-size:10px;color:var(--t4);margin-top:5px;font-weight:700;letter-spacing:.4px;font-variant-numeric:tabular-nums}
@media(hover:none){.tc-prev{opacity:.85;transform:scale(1)}}

/* ════════════════════════════════════════
   TRACK ROW — premium glass row
════════════════════════════════════════ */
.tr{
  display:flex;align-items:center;gap:13px;
  padding:11px 14px;border-radius:18px;cursor:pointer;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 -1px 0 rgba(0,0,0,.10) inset,
    0 6px 18px rgba(0,0,0,.28);
  margin-bottom:6px;position:relative;overflow:hidden;
  transition:background .18s,transform .16s cubic-bezier(.34,1.4,.64,1),box-shadow .18s;
}
.tr::before{
  content:'';position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  pointer-events:none;
}
.tr::after{display:none}
.tr:active{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.20);
  transform:scale(.978);
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 2px 8px rgba(0,0,0,.22);
}
.tr-rank{width:22px;text-align:center;flex-shrink:0;font-size:12px;color:var(--t4);font-weight:800;font-variant-numeric:tabular-nums}
.tr-rank.top1{
  background:linear-gradient(135deg,#FFD04A,#FF9800);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 4px rgba(255,200,60,.4));font-size:13px;
}
.tr-rank.top3{color:var(--p2)}
.tr-th{
  width:52px;height:52px;border-radius:15px;flex-shrink:0;object-fit:cover;
  background:var(--g2);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),
    0 0 0 3px rgba(0,0,0,.20),
    0 6px 18px rgba(0,0,0,.55);
}
.tr-th-ph{
  width:50px;height:50px;border-radius:14px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(33,150,243,.16),rgba(0,50,150,.10));
  display:flex;align-items:center;justify-content:center;font-size:22px;
  border:1px solid rgba(255,255,255,.09);
}
.tr-inf{flex:1;min-width:0}
.tr-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.15px}
.tr-art{font-size:12px;color:var(--t3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.tr-r{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.tr-dur{font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.2px}
.tr-prev-badge{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:linear-gradient(145deg,rgba(0,170,255,.22),rgba(33,80,255,.16));
  border:1px solid rgba(0,190,255,.30);
  box-shadow:
    0 1px 0 rgba(0,220,255,.22) inset,
    0 4px 14px rgba(0,150,255,.20);
  transition:background .16s,transform .16s,box-shadow .16s;
  cursor:pointer;
}
.tr-prev-badge::before{
  content:'';
  width:0;height:0;
  border-style:solid;
  border-width:5px 0 5px 9px;
  border-color:transparent transparent transparent rgba(0,210,255,.92);
  margin-left:2px;
}
.tr:active .tr-prev-badge{
  background:linear-gradient(145deg,rgba(0,180,255,.38),rgba(33,100,255,.28));
  transform:scale(.88);
  box-shadow:0 2px 8px rgba(0,150,255,.30);
}

/* ════════════════════════════════════════
   PLAYLIST/ALBUM CARD — transparent window
════════════════════════════════════════ */
.pc{
  flex-shrink:0;width:150px;border-radius:var(--r3);overflow:hidden;cursor:pointer;
  background:rgba(255,255,255,.052);
  border:1px solid rgba(255,255,255,.15);
  outline:1px solid rgba(0,0,0,.18);outline-offset:-1px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.20) inset,
    0 -1px 0 rgba(0,0,0,.14) inset,
    0 12px 32px rgba(0,0,0,.50);
  transition:transform .22s cubic-bezier(.34,1.4,.64,1),box-shadow .22s;
}
.pc:active{transform:scale(.91);box-shadow:0 4px 14px rgba(0,0,0,.42)}
.pc-cv{width:100%;aspect-ratio:1;overflow:hidden;background:var(--g2);position:relative}
.pc-cv img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.pc:active .pc-cv img{transform:scale(1.04)}
.pc-cv-ph{
  width:100%;height:100%;
  background:linear-gradient(140deg,rgba(33,150,243,.18),rgba(0,50,150,.10));
  display:flex;align-items:center;justify-content:center;font-size:34px;
}
.pc-bd{padding:11px 12px 13px}
.pc-name{
  font-size:13px;font-weight:700;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  line-height:1.32;letter-spacing:-.12px;
}
.pc-meta{font-size:11px;color:var(--t3);margin-top:4px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ════════════════════════════════════════
   ARTIST CARD — glass ring
════════════════════════════════════════ */
.arc{flex-shrink:0;width:104px;cursor:pointer;text-align:center;transition:transform .22s cubic-bezier(.34,1.4,.64,1)}
.arc:active{transform:scale(.91)}
.arc-img{
  width:84px;height:84px;border-radius:50%;object-fit:cover;
  margin:0 auto;display:block;background:var(--g2);
  border:2px solid rgba(255,255,255,.26);
  outline:2px solid rgba(0,0,0,.24);outline-offset:-2px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.34) inset,
    0 10px 28px rgba(0,0,0,.55),
    0 0 0 6px rgba(33,150,243,.06);
  transition:box-shadow .22s,border-color .22s;
}
.arc:active .arc-img{
  box-shadow:0 3px 12px rgba(0,0,0,.42);
  border-color:rgba(255,255,255,.40);
}
.arc-name{font-size:12px;font-weight:700;margin-top:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.1px}
.arc-fans{font-size:10px;color:var(--t3);margin-top:2px;font-weight:500}

/* ════════════════════════════════════════
   MOOD / GENRE GRIDS — glass tiles
════════════════════════════════════════ */
.mg,.gg{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.mt{
  border-radius:var(--r3);padding:20px 16px 16px;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:118px;cursor:pointer;position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  outline:1px solid rgba(0,0,0,.20);outline-offset:-1px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.26) inset,
    0 14px 36px rgba(0,0,0,.52),
    0 2px 8px rgba(0,0,0,.30);
  transition:transform .22s cubic-bezier(.34,1.4,.64,1),box-shadow .22s;
}
.mt::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 18%,rgba(0,0,0,.52) 100%);
}
.mt:active{transform:scale(.95);box-shadow:0 4px 14px rgba(0,0,0,.40)}
.mt-glow{
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.36),transparent);
}
.mt-bd{position:relative;z-index:1}
.mt-em{font-size:32px;margin-bottom:6px;display:block;filter:drop-shadow(0 3px 8px rgba(0,0,0,.55))}
.mt-name{font-size:15px;font-weight:800;letter-spacing:-.22px;color:#fff}
.mt-sub{font-size:10.5px;color:rgba(255,255,255,.48);margin-top:2px;font-weight:600}
.gt{
  border-radius:var(--r2);padding:13px 13px;min-height:86px;
  display:flex;flex-direction:column;justify-content:flex-end;
  cursor:pointer;position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
  outline:1px solid rgba(0,0,0,.17);outline-offset:-1px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 9px 26px rgba(0,0,0,.46);
  transition:transform .22s cubic-bezier(.34,1.4,.64,1),box-shadow .22s;
}
.gt::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 12%,rgba(0,0,0,.58) 100%)}
.gt:active{transform:scale(.95)}
.gt-em{position:absolute;right:11px;top:11px;font-size:26px;opacity:.90;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.gt-name{font-size:14px;font-weight:800;letter-spacing:-.16px;position:relative;z-index:1;color:#fff}

/* ── Homepage category carousel (Yandex Music style) ── */
.home-mood-grid{
  display:flex;gap:12px;margin-top:8px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:4px 16px 16px 0;scrollbar-width:none;
}
.home-mood-grid::-webkit-scrollbar{display:none}
.hm-tile{
  flex:0 0 68%;max-width:270px;min-height:110px;
  border-radius:16px;padding:16px 20px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  cursor:pointer;position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 24px rgba(0,0,0,.40),0 2px 6px rgba(0,0,0,.20);
  transition:transform .22s cubic-bezier(.34,1.4,.64,1),box-shadow .22s;
  -webkit-tap-highlight-color:transparent;
  scroll-snap-align:center;
  background-size:200% 200%;
  animation:hm-bg-move 6s ease-in-out infinite alternate,hm-glow 3s ease-in-out infinite alternate;
}
@keyframes hm-bg-move{
  0%{background-position:0% 0%}
  50%{background-position:100% 100%}
  100%{background-position:0% 100%}
}
/* equalizer bars — full card background */
.hm-eq{
  position:absolute;inset:0;
  display:flex;align-items:flex-end;gap:0;
  opacity:.12;z-index:0;pointer-events:none;
}
.hm-eq span{
  display:block;flex:1;
  background:rgba(255,255,255,.9);
  animation:hm-bar 1.2s ease-in-out infinite alternate;
  border-radius:2px 2px 0 0;
}
.hm-eq span:nth-child(1){animation-delay:0s;animation-duration:1.0s}
.hm-eq span:nth-child(2){animation-delay:.2s;animation-duration:0.75s}
.hm-eq span:nth-child(3){animation-delay:.35s;animation-duration:1.1s}
.hm-eq span:nth-child(4){animation-delay:.1s;animation-duration:0.85s}
.hm-eq span:nth-child(5){animation-delay:.3s;animation-duration:0.95s}
@keyframes hm-bar{
  0%{height:20%}
  100%{height:100%}
}
/* flowing aurora overlay */
.hm-tile::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 15% 85%,rgba(255,255,255,.14) 0%,transparent 50%),
    radial-gradient(ellipse 50% 40% at 85% 15%,rgba(255,255,255,.08) 0%,transparent 45%);
  animation:hm-aurora 10s ease-in-out infinite;
  pointer-events:none;z-index:0;
}
@keyframes hm-aurora{
  0%{transform:translate(0,0) scale(1);opacity:.6}
  25%{transform:translate(-8%,6%) scale(1.08);opacity:1}
  50%{transform:translate(6%,-4%) scale(.96);opacity:.7}
  75%{transform:translate(-4%,8%) scale(1.04);opacity:.9}
  100%{transform:translate(0,0) scale(1);opacity:.6}
}
/* shimmer sweep */
.hm-tile::after{
  content:'';position:absolute;top:-50%;left:-80%;width:50%;height:200%;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.06) 50%,transparent 80%);
  animation:hm-shimmer 5s ease-in-out infinite;
  pointer-events:none;z-index:0;transform:rotate(15deg);
}
@keyframes hm-shimmer{
  0%{left:-80%}
  40%{left:180%}
  100%{left:180%}
}
@keyframes hm-glow{
  0%{box-shadow:0 6px 24px rgba(0,0,0,.40),0 2px 6px rgba(0,0,0,.20)}
  100%{box-shadow:0 10px 30px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.22),0 0 22px rgba(255,255,255,.04)}
}
.hm-tile:active{transform:scale(.95);box-shadow:0 4px 16px rgba(0,0,0,.42)}
.hm-sub{
  font-size:11px;font-weight:500;color:rgba(255,255,255,.5);
  position:relative;z-index:1;margin-bottom:4px;
  letter-spacing:.4px;
}
.hm-name{
  font-size:20px;font-weight:800;letter-spacing:-.3px;
  color:#fff;position:relative;z-index:1;line-height:1.2;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
  display:flex;align-items:center;gap:8px;
}
.hm-play{
  display:inline-block;width:0;height:0;
  border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.3));
}

/* ── Activity grid (3-col, compact) ── */
.act-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.act-card{
  border-radius:var(--r2);padding:14px 10px 12px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  min-height:96px;cursor:pointer;position:relative;overflow:hidden;text-align:center;
  border:1px solid rgba(255,255,255,.15);
  outline:1px solid rgba(0,0,0,.18);outline-offset:-1px;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 10px 28px rgba(0,0,0,.48);
  transition:transform .22s cubic-bezier(.34,1.4,.64,1),box-shadow .22s;
}
.act-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(0,0,0,.62) 100%)}
.act-card:active{transform:scale(.94);box-shadow:0 4px 14px rgba(0,0,0,.40)}
.act-em{font-size:28px;display:block;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5));position:relative;z-index:1;margin-bottom:5px}
.act-name{font-size:12px;font-weight:800;letter-spacing:-.14px;color:#fff;position:relative;z-index:1;line-height:1.2}

/* ════════════════════════════════════════
   AI GRID — glass window cards
════════════════════════════════════════ */
.ai-grid{display:flex;flex-direction:column;gap:10px}
.ai-card{
  border-radius:var(--r3);padding:18px 16px;display:flex;align-items:center;gap:14px;
  cursor:pointer;position:relative;overflow:hidden;
  background:rgba(255,255,255,.058);
  border:1px solid rgba(255,255,255,.15);
  outline:1px solid rgba(0,0,0,.18);outline-offset:-1px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.24) inset,
    0 -1px 0 rgba(0,0,0,.14) inset,
    0 14px 36px rgba(0,0,0,.52);
  transition:transform .22s cubic-bezier(.34,1.4,.64,1),box-shadow .22s;
}
.ai-card::before{
  content:'';position:absolute;top:0;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
  pointer-events:none;
}
.ai-card:active{transform:scale(.97);box-shadow:0 4px 16px rgba(0,0,0,.42)}
.ai-em{font-size:36px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5));position:relative;z-index:1;flex-shrink:0}
.ai-info{position:relative;z-index:1;flex:1}
.ai-name{font-size:16.5px;font-weight:800;letter-spacing:-.24px;color:#fff}
.ai-sub{font-size:10.5px;color:rgba(255,255,255,.48);margin-top:3px;font-weight:600}
.ai-badge{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);z-index:1;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  outline:1px solid rgba(0,0,0,.12);outline-offset:-1px;
  border-radius:30px;padding:5px 13px;font-size:9px;font-weight:800;
  color:rgba(255,255,255,.86);letter-spacing:.3px;
  box-shadow:0 1px 0 rgba(255,255,255,.26) inset,0 3px 10px rgba(0,0,0,.30);
}

/* ════════════════════════════════════════
   SEARCH — transparent window bar
════════════════════════════════════════ */
.sw{
  position:sticky;top:0;z-index:10;
  background:rgba(6,8,15,.90);
  backdrop-filter:blur(32px) saturate(200%);
  -webkit-backdrop-filter:blur(32px) saturate(200%);
  padding:calc(var(--st) + 14px) 0 13px;
  box-shadow:0 1px 0 rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.30);
}
.sb-wrap{
  position:relative;display:flex;align-items:center;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.16);
  outline:1px solid rgba(0,0,0,.18);outline-offset:-1px;
  border-radius:18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.20) inset,
    0 4px 18px rgba(0,0,0,.34);
  transition:border-color .24s,box-shadow .24s,outline-color .24s;
}
.sb-wrap:focus-within{
  border-color:rgba(33,150,243,.52);
  outline-color:rgba(0,0,0,.20);
  box-shadow:
    0 0 0 3px rgba(33,150,243,.12),
    0 1px 0 rgba(255,255,255,.20) inset,
    0 6px 24px rgba(0,0,0,.34);
}
.sb-ic{position:absolute;left:14px;color:var(--t3);display:flex;pointer-events:none;transition:color .2s}
.sb-wrap:focus-within .sb-ic{color:var(--p2)}
.sb-in{
  flex:1;background:none;border:none;outline:none;
  padding:14px 44px 14px 46px;font-size:15.5px;font-weight:500;
  color:var(--t1);font-family:inherit;letter-spacing:-.1px;
}
.sb-in::placeholder{color:rgba(242,245,255,.22)}
.sb-x{
  position:absolute;right:10px;
  background:rgba(255,255,255,.08);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;padding:6px;cursor:pointer;
  color:var(--t3);display:none;align-items:center;justify-content:center;
  min-width:30px;min-height:30px;transition:background .14s;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset;
}
.sb-x:active{background:rgba(255,255,255,.16)}
.sb-x.on{display:flex}
.sb-x svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round}

/* ── Tingla Identify Banner on search page ── */
#s-identify-banner{ transition:opacity .25s,transform .25s }
#s-identify-banner.hidden{ opacity:0;pointer-events:none;transform:translateY(-8px) }

.sid-banner{
  display:flex;align-items:center;gap:18px;
  background:linear-gradient(135deg,rgba(0,180,255,.10) 0%,rgba(100,0,255,.08) 100%);
  border:1px solid rgba(0,180,255,.18);
  border-radius:24px;
  padding:18px 20px;
  margin-top:12px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s,box-shadow .2s;
  position:relative;overflow:hidden;
}
.sid-banner::before{
  content:'';position:absolute;inset:0;border-radius:24px;
  background:radial-gradient(circle at 20% 50%,rgba(0,200,255,.08),transparent 60%);
  pointer-events:none;
}
.sid-banner:active{ transform:scale(.97) }

/* Rings around button */
.sid-rings{
  position:relative;width:72px;height:72px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.sid-ring{
  position:absolute;border-radius:50%;
  top:50%;left:50%;
  border:1.5px solid rgba(0,190,255,.35);
}
.sid-r1,.sid-r2,.sid-r3{ animation:sidRing 2.8s ease-out infinite }
.sid-r1{ animation-delay:0s }
.sid-r2{ animation-delay:.7s }
.sid-r3{ animation-delay:1.4s }
@keyframes sidRing{
  0%{   width:44px;height:44px;margin:-22px 0 0 -22px;opacity:.80;border-color:rgba(0,200,255,.60) }
  80%{  width:72px;height:72px;margin:-36px 0 0 -36px;opacity:0;  border-color:rgba(0,200,255,.0) }
  100%{ width:72px;height:72px;margin:-36px 0 0 -36px;opacity:0 }
}

/* Center button */
.sid-btn{
  position:relative;z-index:4;
  width:48px;height:48px;border-radius:50%;
  border:none;cursor:pointer;padding:2.5px;
  background:conic-gradient(from 0deg,#00d4ff,#0055ff,#9b00ff,#0055ff,#00d4ff);
  animation:shzBtnHue 8s linear infinite;
  box-shadow:0 0 18px rgba(0,150,255,.45),0 4px 16px rgba(0,0,0,.50);
  -webkit-tap-highlight-color:transparent;
}
.sid-btn-inner{
  width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#1a2040,#0e1428);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
}
.sid-btn-inner::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.22),transparent 60%);
}
.sid-btn img{ width:26px;height:26px;border-radius:7px;object-fit:cover;position:relative;z-index:1 }
.sid-btn.listening{ animation:shzBtnHue 2.5s linear infinite,shzBtnPulse 1.2s ease-in-out infinite }

.sid-right{ flex:1 }
.sid-title{
  font-size:16px;font-weight:800;letter-spacing:-.2px;
  color:#fff;margin-bottom:4px;
}
.sid-sub{
  font-size:12.5px;font-weight:500;
  color:rgba(255,255,255,.40);
  line-height:1.5;
}
@keyframes micPulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ═══════════════════════════════════════════════════════════
   TINGLA IDENTIFY — World-class audio recognition UI
═══════════════════════════════════════════════════════════ */

/* ── Overlay shell ── */
#shz-overlay{
  position:fixed;inset:0;z-index:800;
  display:none;flex-direction:column;
  align-items:center;justify-content:flex-end;
  overflow:hidden;
}
#shz-overlay.open{ display:flex }

/* ── Deep space background ── */
.shz-bg{
  position:absolute;inset:0;
  background:linear-gradient(168deg,#040612 0%,#070918 40%,#060714 100%);
  pointer-events:none;overflow:hidden;
}
.shz-bg::before{
  content:'';position:absolute;
  width:600px;height:600px;top:-180px;left:50%;
  background:radial-gradient(circle,rgba(0,200,255,.14) 0%,rgba(0,80,220,.08) 42%,transparent 68%);
  border-radius:50%;transform:translateX(-50%);
  animation:shzOrb 7s ease-in-out infinite alternate;
}
.shz-bg::after{
  content:'';position:absolute;
  width:500px;height:400px;bottom:-110px;left:50%;
  background:radial-gradient(circle,rgba(130,0,255,.12) 0%,rgba(50,0,200,.07) 46%,transparent 68%);
  border-radius:50%;transform:translateX(-50%);
  animation:shzOrb 9s ease-in-out infinite alternate-reverse;
}
@keyframes shzOrb{
  0%{transform:translateX(-50%) scale(1)}
  100%{transform:translateX(-50%) scale(1.25)}
}

/* ── Top bar ── */
.shz-top{
  position:absolute;top:0;left:0;right:0;z-index:10;
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding-top:max(18px,env(safe-area-inset-top,18px));padding-bottom:10px;
  animation:shzFadeDown .5s .1s both;
}
@keyframes shzFadeDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.shz-top-logo{width:28px;height:28px;border-radius:8px;object-fit:cover;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.shz-top-name{font-size:15px;font-weight:800;letter-spacing:-.1px;color:rgba(255,255,255,.72)}

/* ── Close ── */
.shz-close{
  position:absolute;top:max(14px,env(safe-area-inset-top,14px));right:16px;z-index:12;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:rgba(255,255,255,.55);
  transition:background .15s,transform .12s,color .15s;
  -webkit-tap-highlight-color:transparent;
}
.shz-close:active{background:rgba(255,255,255,.20);color:#fff;transform:scale(.88)}
.shz-close svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round}

/* ── Bottom card ── */
.shz-card{
  position:relative;z-index:5;width:100%;max-width:480px;
  background:linear-gradient(180deg,
    rgba(8,10,20,.0) 0%,rgba(8,10,20,.88) 18%,
    rgba(6,8,18,.97) 42%,rgba(6,8,16,1) 100%);
  border-radius:36px 36px 0 0;
  padding-bottom:max(34px,env(safe-area-inset-bottom,34px));
  display:flex;flex-direction:column;align-items:center;
}

/* ── State visibility ── */
#shz-overlay:not(.found) .shz-result{display:none}
#shz-overlay:not(.err)   .shz-err{display:none}
#shz-overlay.found .shz-sonar,
#shz-overlay.found .shz-status,
#shz-overlay.found .shz-canvas-wrap{display:none}
#shz-overlay.err .shz-sonar,
#shz-overlay.err .shz-status,
#shz-overlay.err .shz-canvas-wrap{display:none}

/* ── Sonar stage ── */
.shz-sonar{
  position:relative;width:260px;height:260px;
  display:flex;align-items:center;justify-content:center;
  margin-top:14px;flex-shrink:0;
}
.shz-ring{
  position:absolute;border-radius:50%;
  top:50%;left:50%;border:1.5px solid transparent;
}
.shz-ring-1,.shz-ring-2,.shz-ring-3{animation:shzRingIdle 3.8s ease-out infinite}
.shz-ring-1{animation-delay:0s}
.shz-ring-2{animation-delay:1s}
.shz-ring-3{animation-delay:2s}
.shz-ring-4{display:none}
@keyframes shzRingIdle{
  0%{width:100px;height:100px;margin:-50px 0 0 -50px;opacity:.65;border-color:rgba(80,130,255,.50)}
  85%{width:245px;height:245px;margin:-122px 0 0 -122px;opacity:0;border-color:rgba(80,130,255,.0)}
  100%{width:245px;height:245px;margin:-122px 0 0 -122px;opacity:0}
}
#shz-overlay.listening .shz-ring-1,
#shz-overlay.listening .shz-ring-2,
#shz-overlay.listening .shz-ring-3{animation:shzRingLive 1.9s cubic-bezier(.1,.5,.3,1) infinite;border-width:2px}
#shz-overlay.listening .shz-ring-4{display:block;animation:shzRingLive 1.9s cubic-bezier(.1,.5,.3,1) infinite .48s;border-width:2px}
#shz-overlay.listening .shz-ring-1{animation-delay:0s}
#shz-overlay.listening .shz-ring-2{animation-delay:.48s}
#shz-overlay.listening .shz-ring-3{animation-delay:.96s}
@keyframes shzRingLive{
  0%{width:96px;height:96px;margin:-48px 0 0 -48px;opacity:.9;border-color:rgba(0,220,255,.80)}
  75%{width:255px;height:255px;margin:-127px 0 0 -127px;opacity:0;border-color:rgba(0,180,255,.0)}
  100%{width:255px;height:255px;margin:-127px 0 0 -127px;opacity:0}
}

/* ── Center button ── */
.shz-btn{
  position:relative;z-index:6;
  width:96px;height:96px;border-radius:50%;
  border:none;cursor:pointer;padding:3.5px;
  background:conic-gradient(from 0deg,#00d4ff,#0055ff,#9b00ff,#ff00c8,#0055ff,#00d4ff);
  animation:shzBtnHue 10s linear infinite;
  box-shadow:0 0 0 8px rgba(0,140,255,.10),0 0 50px rgba(0,120,255,.30),0 16px 50px rgba(0,0,0,.65);
  transition:transform .18s,box-shadow .22s;
  -webkit-tap-highlight-color:transparent;
}
@keyframes shzBtnHue{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}
.shz-btn-inner{
  width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 44% 38%,#14192e,#0c1020);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
}
.shz-btn-inner::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 38% 28%,rgba(255,255,255,.22),transparent 62%);
  pointer-events:none;
}
.shz-btn img{width:52px;height:52px;border-radius:14px;object-fit:cover;position:relative;z-index:1;box-shadow:0 2px 12px rgba(0,0,0,.60)}
#shz-overlay.listening .shz-btn{
  animation:shzBtnHue 3s linear infinite,shzBtnPulse 1.3s ease-in-out infinite;
  box-shadow:0 0 0 8px rgba(0,200,255,.18),0 0 70px rgba(0,180,255,.55),0 16px 50px rgba(0,0,0,.65);
}
@keyframes shzBtnPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.shz-btn:active{transform:scale(.91)!important}

/* Processing spinner ring */
#shz-overlay.processing .shz-btn::before{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:3px solid transparent;
  border-top-color:rgba(0,220,255,.80);
  border-right-color:rgba(100,80,255,.50);
  animation:shzSpin .9s linear infinite;z-index:7;
}
@keyframes shzSpin{to{transform:rotate(360deg)}}

/* ── Tap hint ── */
.shz-tap-hint{
  position:absolute;bottom:-30px;
  font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
  color:rgba(255,255,255,.20);white-space:nowrap;pointer-events:none;
  transition:opacity .25s;
}
#shz-overlay.listening .shz-tap-hint,
#shz-overlay.processing .shz-tap-hint{opacity:0}

/* ── Timer SVG arc ── */
.shz-timer{
  position:absolute;inset:-6px;border-radius:50%;
  pointer-events:none;z-index:8;
  opacity:0;transition:opacity .35s;
}
#shz-overlay.listening .shz-timer{opacity:1}
.shz-timer svg{width:100%;height:100%}
.shz-timer-track{fill:none;stroke:rgba(255,255,255,.07);stroke-width:3}
.shz-timer-arc{
  fill:none;stroke:url(#shzArcGrad);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:295;stroke-dashoffset:0;
  transform:rotate(-90deg);transform-origin:50% 50%;
  transition:stroke-dashoffset .15s linear;
}

/* ── Canvas waveform ── */
.shz-canvas-wrap{
  width:100%;height:60px;margin:2px 0 0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .5s;
}
#shz-overlay.listening .shz-canvas-wrap{opacity:1}
#shz-canvas{width:300px;height:60px;display:block}

/* ── Status text ── */
.shz-status{text-align:center;padding:12px 28px 26px}
.shz-label{font-size:21px;font-weight:800;letter-spacing:-.3px;color:#fff;margin-bottom:7px;line-height:1.2}
.shz-sub{font-size:13.5px;font-weight:500;color:rgba(255,255,255,.38);line-height:1.55;letter-spacing:.05px}

/* ── Result card ── */
.shz-result{
  display:none;width:100%;flex-direction:column;align-items:center;
  padding:4px 18px 0;
  animation:shzSlideUp .65s cubic-bezier(.34,1.08,.64,1) both;
}
@keyframes shzSlideUp{from{opacity:0;transform:translateY(44px) scale(.93)}to{opacity:1;transform:none}}
#shz-overlay.found .shz-result{display:flex}

/* Identified badge */
.shz-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 14px 5px 10px;border-radius:24px;
  background:rgba(0,200,255,.10);border:1px solid rgba(0,200,255,.22);
  margin-bottom:18px;
  animation:shzFadeUp .4s .25s both;
}
@keyframes shzFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.shz-badge-dot{
  width:8px;height:8px;border-radius:50%;background:#00d4ff;
  box-shadow:0 0 6px rgba(0,210,255,.8);
  animation:shzPing 1.4s ease-in-out infinite;
}
@keyframes shzPing{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}
.shz-badge span{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:rgba(0,220,255,.85)}

/* Art */
.shz-art{position:relative;margin-bottom:16px;animation:shzFadeUp .5s .15s both}
.shz-res-cover{
  width:170px;height:170px;border-radius:28px;object-fit:cover;display:block;
  position:relative;z-index:1;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.10),0 22px 80px rgba(0,0,0,.80),0 6px 24px rgba(0,0,0,.50);
}
.shz-art-glow{
  position:absolute;bottom:-22px;left:50%;
  width:150px;height:65px;border-radius:50%;transform:translateX(-50%);
  filter:blur(32px);background:rgba(0,140,255,.50);
  z-index:0;pointer-events:none;transition:background .6s;
}
.shz-art.playing .shz-res-cover{animation:shzVinyl 8s linear infinite}
@keyframes shzVinyl{to{transform:rotate(360deg)}}

/* Track info */
.shz-res-title{
  font-size:22px;font-weight:900;letter-spacing:-.4px;
  color:#fff;text-align:center;margin-bottom:4px;
  line-height:1.15;max-width:300px;
  animation:shzFadeUp .45s .2s both;
}
.shz-res-artist{
  font-size:13.5px;font-weight:600;color:rgba(255,255,255,.40);
  text-align:center;margin-bottom:5px;
  animation:shzFadeUp .45s .25s both;
}
.shz-res-dur{
  font-size:11.5px;font-weight:700;letter-spacing:.2px;
  color:rgba(255,255,255,.22);margin-bottom:14px;
  animation:shzFadeUp .45s .3s both;
}

/* ── 4-action grid ── */
.shz-actions{
  display:grid;grid-template-columns:1fr 1fr;
  gap:10px;width:100%;margin-bottom:4px;
  animation:shzFadeUp .5s .3s both;
}
.shz-act-btn{
  padding:14px 10px;border-radius:20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;cursor:pointer;border:none;
  transition:opacity .13s,transform .13s;
  -webkit-tap-highlight-color:transparent;position:relative;overflow:hidden;
}
.shz-act-btn::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.10),transparent 65%);
  pointer-events:none;
}
.shz-act-btn:active{opacity:.72;transform:scale(.93)}
.shz-act-btn.act-play{
  background:linear-gradient(145deg,#00ccff 0%,#005fff 100%);
  box-shadow:0 8px 32px rgba(0,110,255,.42);
  grid-column:1/-1;flex-direction:row;gap:10px;
  padding:16px 20px;border-radius:22px;
}
.shz-act-btn.act-dl,.shz-act-btn.act-lyr{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(14px);
}
.shz-act-btn.act-kar{
  grid-column:1/-1;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(14px);flex-direction:row;gap:10px;
  padding:14px 20px;border-radius:20px;justify-content:space-between;
}
.shz-act-icon{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.act-play .shz-act-icon{background:rgba(255,255,255,.18)}
.act-dl   .shz-act-icon{background:rgba(100,200,255,.14)}
.act-lyr  .shz-act-icon{background:rgba(200,100,255,.14)}
.act-kar  .shz-act-icon{background:rgba(255,200,80,.12)}
.shz-act-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.act-play .shz-act-icon svg,.act-play .shz-act-icon svg{fill:currentColor;stroke:none}
.shz-act-label{font-size:13px;font-weight:700;color:#fff;letter-spacing:-.1px}
.act-play .shz-act-label{font-size:15px;font-weight:800}
.shz-act-sub{font-size:10.5px;font-weight:600;color:rgba(255,255,255,.38);letter-spacing:.1px}

/* Karaoke toggle */
.shz-kar-toggle{
  width:44px;height:26px;border-radius:13px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);
  position:relative;transition:background .25s;flex-shrink:0;
}
.shz-kar-toggle.on{background:linear-gradient(90deg,#00d4ff,#0055ff)}
.shz-kar-toggle::after{
  content:'';position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);
  transition:transform .25s cubic-bezier(.34,1.18,.64,1);
}
.shz-kar-toggle.on::after{transform:translateX(18px)}

/* Again link */
.shz-again{
  margin-top:16px;font-size:12.5px;font-weight:700;letter-spacing:.2px;
  text-transform:uppercase;color:rgba(0,200,255,.35);
  cursor:pointer;padding:8px 20px;
  -webkit-tap-highlight-color:transparent;transition:color .15s;
  animation:shzFadeUp .5s .4s both;
}
.shz-again:active{color:rgba(0,200,255,.85)}
.shz-again:active{color:rgba(0,200,255,.85)}

/* ── Error state ── */
.shz-err{
  display:none;flex-direction:column;align-items:center;
  gap:8px;padding:16px 24px 28px;
  animation:shzSlideUp .55s cubic-bezier(.34,1.08,.64,1) both;
}
#shz-overlay.err .shz-err{display:flex}
.shz-err-ic{
  width:72px;height:72px;border-radius:50%;
  background:rgba(255,60,60,.10);border:1px solid rgba(255,80,80,.18);
  display:flex;align-items:center;justify-content:center;
  font-size:32px;margin-bottom:6px;
}
.shz-err-t{font-size:19px;font-weight:800;letter-spacing:-.3px;color:rgba(255,255,255,.90);text-align:center}
.shz-err-s{font-size:13px;font-weight:500;color:rgba(255,255,255,.36);text-align:center;line-height:1.6;max-width:250px}
.shz-err-retry{
  margin-top:18px;background:linear-gradient(135deg,#00ccff,#005fff);
  border:none;border-radius:18px;padding:14px 40px;font-size:15px;font-weight:800;
  color:#fff;cursor:pointer;box-shadow:0 8px 30px rgba(0,120,255,.38);
  -webkit-tap-highlight-color:transparent;transition:opacity .14s,transform .12s;
}
.shz-err-retry:active{opacity:.75;transform:scale(.94)}

.trow{display:flex;gap:7px;margin-top:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.trow::-webkit-scrollbar{display:none}
.tb{
  flex-shrink:0;padding:8px 19px;border-radius:30px;font-size:12.5px;font-weight:700;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.12);
  outline:1px solid rgba(0,0,0,.12);outline-offset:-1px;
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 2px 8px rgba(0,0,0,.24);
  color:rgba(255,255,255,.46);cursor:pointer;
  transition:all .20s cubic-bezier(.34,1.4,.64,1);font-family:inherit;letter-spacing:.05px;
}
.tb.on{
  background:rgba(33,150,243,.18);
  border-color:rgba(33,150,243,.48);
  outline-color:transparent;
  color:var(--p2);
  box-shadow:0 0 18px rgba(33,150,243,.22),0 1px 0 rgba(255,255,255,.16) inset;
}
.rg{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:3px}
@keyframes rcPop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.rc{
  animation:rcPop .35s cubic-bezier(.34,1.18,.64,1) both;
  animation-delay:calc(var(--i,0) * 50ms);
  background:rgba(255,255,255,.052);
  border:1px solid rgba(255,255,255,.14);
  outline:1px solid rgba(0,0,0,.16);outline-offset:-1px;
  border-radius:var(--r2);overflow:hidden;cursor:pointer;
  box-shadow:
    0 1px 0 rgba(255,255,255,.20) inset,
    0 -1px 0 rgba(0,0,0,.12) inset,
    0 9px 26px rgba(0,0,0,.46);
  transition:transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .18s;
}
.rc:active{transform:scale(.95);box-shadow:0 2px 10px rgba(0,0,0,.32)}
.rc-img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--g2);display:block}
.rc-img.circ{border-radius:50%;margin:13px auto 0;display:block;width:calc(100% - 26px)}
.rc-bd{padding:10px 12px}
.rc-name{font-size:13px;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;letter-spacing:-.1px}
.rc-meta{font-size:10.5px;color:var(--t3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-prev-tag{display:inline-flex;align-items:center;gap:3px;margin-top:5px;font-size:8.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--gr)}

/* ════════════════════════════════════════
   DETAIL OVERLAY
════════════════════════════════════════ */
.ov{
  position:fixed;inset:0;z-index:200;
  background:var(--bg);
  background-image:
    radial-gradient(ellipse 130% 60% at 50% -10%, rgba(33,150,243,.065) 0%, transparent 50%),
    radial-gradient(ellipse 70% 45% at 8% 90%, rgba(0,90,220,.038) 0%, transparent 45%);
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  transform:translateY(108%);
  transition:transform .44s cubic-bezier(.32,.72,0,1);
  /* Honour horizontal safe area inside the overlay too */
  padding-left:var(--sl);
  padding-right:var(--sr);
}
.ov.on{transform:translateY(0)}
.ov-in{max-width:480px;margin:0 auto;padding-bottom:calc(var(--sb) + 80px)}
.dh{
  position:relative;width:100%;padding-top:90%;overflow:hidden;
  background:linear-gradient(135deg,#060A20,#0D1848,#040E20);
}
.dh img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dh-top{position:absolute;top:0;left:0;right:0;height:32%;background:linear-gradient(rgba(0,0,0,.30),transparent)}
.dh-bot{position:absolute;bottom:0;left:0;right:0;height:60%;background:linear-gradient(transparent,var(--bg))}
.dh-back,.dh-share{
  position:absolute;top:calc(var(--st) + 14px);z-index:10;
  width:42px;height:42px;border-radius:50%;
  background:rgba(4,6,16,.82);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.18);
  outline:1px solid rgba(0,0,0,.24);outline-offset:-1px;
  box-shadow:0 1px 0 rgba(255,255,255,.26) inset,0 6px 20px rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .14s,transform .16s cubic-bezier(.34,1.5,.64,1);
}
.dh-back{left:14px}.dh-share{right:14px}
.dh-back:active,.dh-share:active{
  background:rgba(255,255,255,.16);
  transform:scale(.82);
}
.dh-back svg,.dh-share svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.db{padding:18px 16px}
.db-eye{font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--p2);margin-bottom:5px}
.db-title{font-size:25px;font-weight:900;letter-spacing:-.56px;line-height:1.14}
.db-sub{font-size:14.5px;color:var(--t2);margin-top:5px;font-weight:600;cursor:pointer;display:inline-block}
.db-sub:active{color:var(--p3)}
.db-stats{
  display:flex;margin-top:14px;
  background:rgba(255,255,255,.048);
  border:1px solid rgba(255,255,255,.12);
  outline:1px solid rgba(0,0,0,.14);outline-offset:-1px;
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 6px 22px rgba(0,0,0,.36);
  border-radius:var(--r2);overflow:hidden;
}
.db-st{text-align:center;flex:1;padding:14px 8px;border-right:1px solid rgba(255,255,255,.07)}
.db-st:last-child{border-right:none}
.db-st-v{font-size:15.5px;font-weight:800;letter-spacing:-.2px}
.db-st-l{font-size:9px;font-weight:700;color:var(--t3);margin-top:3px;text-transform:uppercase;letter-spacing:.5px}
.arow{display:flex;gap:10px;margin-top:16px}
.btn-dz{
  flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(135deg,var(--p),var(--pk));color:#fff;border:none;
  border-radius:var(--r2);padding:16px;font-size:14px;font-weight:800;cursor:pointer;
  text-decoration:none;font-family:inherit;
  border:1px solid rgba(255,255,255,.18);
  outline:1px solid rgba(0,0,0,.12);outline-offset:-1px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.30) inset,
    0 12px 32px rgba(33,150,243,.32),
    0 0 0 0 transparent;
  transition:all .18s cubic-bezier(.34,1.4,.64,1);letter-spacing:-.12px;
  position:relative;overflow:hidden;
}
.btn-dz::before{
  content:'';position:absolute;top:0;left:5%;right:5%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
}
.btn-dz:active{transform:scale(.96)}
.btn-play{
  width:54px;height:54px;border-radius:var(--r2);
  display:flex;align-items:center;justify-content:center;
  background:var(--g2);border:1.5px solid var(--b2);cursor:pointer;
  transition:all .18s;flex-shrink:0;
}
.btn-play.on{background:var(--gr);border-color:var(--gr);box-shadow:0 6px 22px rgba(41,212,148,.36)}
.btn-play svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.ds{margin-top:24px}
.ds-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ds-t{font-size:17px;font-weight:800;letter-spacing:-.3px}
.ds-a{font-size:12px;color:var(--p2);font-weight:700;cursor:pointer}

/* ════════════════════════════════════════
   SKELETON
════════════════════════════════════════ */
.sk{
  background:linear-gradient(110deg,var(--g2) 30%,var(--g3) 50%,var(--g2) 70%);
  background-size:200% 100%;
  border-radius:var(--r1);
  animation:sk 1.8s ease-in-out infinite;
  animation-play-state:var(--anim-state);
}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk-tc{flex-shrink:0;width:146px;height:218px;border-radius:var(--r3)}
.sk-pc{flex-shrink:0;width:148px;height:220px;border-radius:var(--r3)}
.sk-tr{height:70px;margin-bottom:3px;border-radius:var(--r2)}
.sk-hr{height:196px;border-radius:var(--r4);margin-bottom:6px}
.sk-art{flex-shrink:0;width:104px;height:118px;border-radius:10px}

/* ════════════════════════════════════════
   MISC
════════════════════════════════════════ */
@keyframes emptyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.empty{text-align:center;padding:58px 20px;animation:fadeSlideUp .5s ease both}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.empty-ic{font-size:52px;margin-bottom:12px;display:block;animation:emptyFloat 3.5s ease-in-out infinite}
.empty-t{font-size:19px;font-weight:800;margin-bottom:6px;letter-spacing:-.3px}
.empty-s{font-size:13.5px;color:var(--t3);line-height:1.65;font-weight:500}
.err{
  padding:13px 16px;border-radius:var(--r2);
  background:rgba(239,68,68,.07);
  border:1px solid rgba(239,68,68,.18);
  outline:1px solid rgba(0,0,0,.12);outline-offset:-1px;
  box-shadow:0 1px 0 rgba(255,100,100,.14) inset;
  color:#F87171;font-size:12px;font-weight:600;text-align:center;
}
.toast{
  position:fixed;bottom:calc(var(--nav-h) + var(--sb) + 82px);
  left:50%;transform:translateX(-50%) translateY(18px);
  background:rgba(6,10,22,.96);
  backdrop-filter:blur(32px) saturate(200%);
  -webkit-backdrop-filter:blur(32px) saturate(200%);
  border:1px solid rgba(255,255,255,.18);
  outline:1px solid rgba(0,0,0,.26);outline-offset:-1px;
  border-radius:var(--r2);padding:13px 26px;font-size:13px;font-weight:700;
  white-space:nowrap;z-index:500;opacity:0;pointer-events:none;
  transition:all .28s cubic-bezier(.34,1.4,.64,1);
  box-shadow:
    0 1px 0 rgba(255,255,255,.24) inset,
    0 -1px 0 rgba(0,0,0,.18) inset,
    0 18px 48px rgba(0,0,0,.60),
    0 0 0 1px rgba(33,150,243,.10) inset;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.ph{padding:calc(var(--st) + 22px) 0 6px}
.ph-t{font-size:30px;font-weight:900;letter-spacing:-.72px}
.ph-s{font-size:12.5px;color:var(--t3);margin-top:5px;font-weight:500}
.tag{
  display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  padding:4px 11px;border-radius:9px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  outline:1px solid rgba(0,0,0,.12);outline-offset:-1px;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset;
  color:rgba(255,255,255,.72);
  margin:3px 2px 0 0;
}
.div{height:1px;background:rgba(255,255,255,.06);margin:6px 0}

/* ════════════════════════════════════════
   MINI PLAYER — iPhone transparent window
════════════════════════════════════════ */
@keyframes miniPop{
  0%{opacity:0;transform:translateY(16px) scale(.94)}
  60%{opacity:1;transform:translateY(-2px) scale(1.01)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes wvMini{
  from{height:2px;opacity:.35}
  to{height:14px;opacity:1}
}

/* ── Mini player container ── */
#player{
  position:relative;z-index:150;flex-shrink:0;
  max-height:0;overflow:hidden;
  transition:max-height .46s cubic-bezier(.32,.72,0,1),overflow 0s .46s;
}
#player.on{max-height:130px;overflow:visible;transition:max-height .46s cubic-bezier(.32,.72,0,1),overflow 0s 0s;}

/* ── The glass window pill ── */
.pl-in{
  position:relative;overflow:hidden;
  max-width:calc(100% - 20px);
  margin:7px auto 14px;
  height:74px;padding:0 10px 0 9px;
  border-radius:26px;
  display:flex;align-items:center;gap:11px;
  cursor:pointer;
  /* True transparent window: nearly no background, rely on backdrop */
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(48px) saturate(220%) brightness(1.18);
  -webkit-backdrop-filter:blur(48px) saturate(220%) brightness(1.18);
  /* Multi-layer border: outer dark rim + inner bright specular */
  border:1px solid rgba(255,255,255,.18);
  outline:1px solid rgba(0,0,0,.22);
  outline-offset:-1px;
  box-shadow:
    0 2px 0 rgba(255,255,255,.22) inset,   /* top specular */
    0 -1px 0 rgba(0,0,0,.18) inset,         /* bottom rim */
    0 16px 48px rgba(0,0,0,.60),
    0 4px 12px rgba(0,0,0,.28);
  animation:miniPop .44s cubic-bezier(.34,1.22,.64,1) both;
}

/* Blurred album art wash — very subtle, behind glass */
.pl-bg-blur{
  position:absolute;inset:-28px;z-index:0;
  background-size:cover;background-position:center;
  filter:blur(32px) brightness(.08) saturate(320%);
  transform:scale(1.6);
  transition:background-image 1.0s ease;
  border-radius:inherit;
  opacity:.70;
}

/* Top-edge specular shimmer */
.pl-in::before{
  content:'';
  position:absolute;top:0;left:8%;right:8%;height:1px;z-index:5;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.55) 35%,
    rgba(255,255,255,.70) 50%,
    rgba(255,255,255,.55) 65%,
    transparent 100%);
}
/* Bottom art-tint glow */
.pl-in::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse 90% 55% at 50% 130%,rgba(var(--art-tint),.18) 0%,transparent 65%);
  border-radius:inherit;pointer-events:none;transition:background .9s;
}

/* Album art thumbnail — raised glass inset frame */
.pl-img{
  position:relative;z-index:2;flex-shrink:0;
  width:54px;height:54px;border-radius:16px;object-fit:cover;
  background:var(--g3);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),
    0 0 0 2.5px rgba(0,0,0,.28),
    0 8px 28px rgba(0,0,0,.80);
  transition:transform .26s cubic-bezier(.34,1.4,.64,1);
}
.pl-img:active{transform:scale(.82)}
@keyframes plImgPulse{0%,100%{opacity:1}50%{opacity:.5}}
#player.loading .pl-img{animation:plImgPulse 1.2s ease-in-out infinite}

/* Track info */
.pl-inf{position:relative;z-index:2;flex:1;min-width:0}
.pl-time{
  position:relative;z-index:2;
  font-size:10px;font-weight:700;letter-spacing:.3px;
  color:rgba(255,255,255,.30);
  white-space:nowrap;flex-shrink:0;
  font-variant-numeric:tabular-nums;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  min-width:36px;
}
.pl-time span{color:rgba(255,255,255,.60)}
.pl-time-sep{font-size:7px;color:rgba(255,255,255,.18);line-height:1}
.pl-name{
  font-size:14px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#fff;letter-spacing:-.15px;line-height:1.22;
  text-shadow:0 1px 6px rgba(0,0,0,.40);
}
.pl-art{
  font-size:11.5px;color:rgba(255,255,255,.46);
  margin-top:1px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Mini waveform */
.pl-wave{
  display:flex;align-items:flex-end;gap:2px;
  height:16px;width:22px;flex-shrink:0;
  position:relative;z-index:2;
  opacity:0;transition:opacity .3s;
}
#player.playing .pl-wave{opacity:1}
.pl-wave-b{
  flex:1;min-width:3px;
  background:rgba(var(--art-tint),1);
  border-radius:2px;transform-origin:bottom;
  animation:wvMini .55s ease-in-out infinite alternate;
}
.pl-wave-b:nth-child(1){animation-duration:.50s;animation-delay:0s}
.pl-wave-b:nth-child(2){animation-duration:.68s;animation-delay:.12s}
.pl-wave-b:nth-child(3){animation-duration:.44s;animation-delay:.06s}
.pl-wave-b:nth-child(4){animation-duration:.58s;animation-delay:.20s}

/* Controls */
.pl-controls{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:2px;flex-shrink:0;
}
.pl-mini-ctl{
  width:36px;height:36px;border-radius:50%;
  background:none;border:none;
  cursor:pointer;color:rgba(255,255,255,.55);
  display:flex;align-items:center;justify-content:center;
  transition:color .12s,transform .14s cubic-bezier(.34,1.5,.64,1);
}
.pl-mini-ctl:active{color:#fff;transform:scale(.70)}
.pl-mini-ctl svg{width:20px;height:20px;fill:currentColor}

/* Play/pause — white glass button */
.pl-btn{
  width:44px;height:44px;border-radius:50%;
  /* Frosted white button */
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);
  border:none;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:
    0 1px 0 rgba(255,255,255,.80) inset,
    0 6px 20px rgba(0,0,0,.50);
  transition:transform .18s cubic-bezier(.34,1.5,.64,1),background .14s;
}
.pl-btn:active{transform:scale(.76);background:rgba(255,255,255,.70)}
.pl-btn svg{width:17px;height:17px;fill:rgba(4,6,14,.88);margin-left:2px}

/* Close X */
.pl-x{
  width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.10);
  border:none;
  cursor:pointer;color:rgba(255,255,255,.35);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:all .14s;
}
.pl-x:active{background:rgba(255,255,255,.20);color:#fff;transform:scale(.80)}
.pl-x svg{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2.8;stroke-linecap:round;pointer-events:none}

/* Progress line — fused to bottom of pill */
.pl-progress{
  height:3.5px;
  background:rgba(255,255,255,.10);
  position:relative;z-index:151;overflow:hidden;
  max-width:calc(100% - 20px);
  margin:0 auto;
  border-radius:0 0 26px 26px;
}
.pl-fill{
  height:100%;
  background:linear-gradient(90deg,rgba(var(--art-tint),.65),rgba(var(--art-tint),1));
  width:0%;
  transition:width .5s linear,background .8s;
  position:relative;
}
/* Glowing tip on fill bar */
.pl-fill::after{
  content:'';
  position:absolute;top:0;right:0;
  width:6px;height:100%;
  background:rgba(255,255,255,.70);
  filter:blur(2px);
  border-radius:99px;
}

/* ════════════════════════════════════════
   FULLSCREEN PLAYER — iPhone transparent window
════════════════════════════════════════ */
@keyframes artFloat{
  0%,100%{transform:translateY(0px)}
  50%{transform:translateY(-8px)}
}
@keyframes artPulse{from{opacity:.22}to{opacity:.68}}
@keyframes spinR{to{transform:rotate(360deg)}}
@keyframes fplIn{
  from{transform:translateY(100%)}
  to{transform:translateY(0)}
}

.fpl{
  position:fixed;inset:0;z-index:900;
  display:flex;flex-direction:column;
  height:100%;height:100dvh;
  transform:translateY(105%);
  transition:transform .54s cubic-bezier(.32,.72,0,1);
  will-change:transform;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
/* Small screens */
@media(max-height:680px){
  .fpl-art-wrap{padding:4px 22px 6px}
  .fpl-art-inner{max-width:196px}
  .fpl-name{font-size:20px}
  .fpl-meta{padding:0 22px;margin-bottom:8px}
  .fpl-seek{padding:0 22px;margin-bottom:6px}
  .fpl-shelf{margin:0 10px}
  .fpl-btns{padding:16px 16px 10px}
  .fpl-ctl-sm{width:42px;height:42px}
  .fpl-ctl-sm svg{width:18px;height:18px}
  .fpl-ctl-md{width:54px;height:54px}
  .fpl-ctl-md svg{width:24px;height:24px}
  .fpl-ctl-lg{width:70px;height:70px}
  .fpl-ctl-lg svg{width:26px;height:26px}
  .fpl-extras{padding:10px 18px 12px}
  .fpl-send-wrap{padding:10px 12px calc(var(--sb) + 10px)}
  .fpl-send-btn{padding:13px 16px;font-size:14px}
}
.fpl.on{transform:translateY(0)}

/* ══════════════════════════════════════════
   FULLSCREEN PLAYER — BACKGROUND SYSTEM
   3-layer depth: blurred art → color mesh → vignette
══════════════════════════════════════════ */

/* ── Layer 0: Deep base — near-black tinted canvas ── */
.fpl::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 140% 70% at 50% -10%,
      rgba(var(--art-tint),.18) 0%, transparent 65%),
    linear-gradient(180deg, #06080f 0%, #020308 100%);
  transition:background 1.2s ease;
}

/* ── Layer 1: Blurred album art — shows true colors ── */
.fpl-bg{
  position:absolute;inset:-80px;z-index:1;
  background-size:cover;background-position:center;
  filter:blur(80px) brightness(.16) saturate(260%);
  transform:scale(1.15);
  transition:background-image 1.2s ease;
  will-change:filter;
}
/* Subtle dark overlay on the art layer */
.fpl-bg::after{
  content:'';position:absolute;inset:0;
  background:rgba(2,3,10,.52);
}

/* ── Layer 2: Animated color mesh (art-tint spots) ── */
.fpl-tint-layer{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  overflow:hidden;
}
.fpl-blob{
  position:absolute;border-radius:50%;pointer-events:none;
  will-change:transform;
}
/* Top-left halo — behind album art */
.fpl-blob-1{
  width:110vw;height:110vw;
  top:-40%;left:-30%;
  background:radial-gradient(circle, rgba(var(--art-tint),.28) 0%, transparent 70%);
  filter:blur(50px);
  animation:blobDrift1 13s ease-in-out infinite alternate;
  transition:background 1.5s ease;
}
/* Bottom-right accent */
.fpl-blob-2{
  width:90vw;height:90vw;
  bottom:-35%;right:-25%;
  background:radial-gradient(circle, rgba(var(--art-tint),.20) 0%, transparent 70%);
  filter:blur(55px);
  animation:blobDrift2 17s ease-in-out infinite alternate;
  transition:background 1.5s ease;
}
/* Mid complementary glow */
.fpl-blob-3{
  width:70vw;height:70vw;
  top:28%;left:50%;
  background:radial-gradient(circle, rgba(var(--art-tint2),.16) 0%, transparent 70%);
  filter:blur(44px);
  animation:blobDrift3 11s ease-in-out infinite alternate;
  transition:background 1.5s ease;
}
/* Spotlight behind art — tight warm center glow */
.fpl-blob-4{
  width:80vw;height:55vw;
  top:8%;left:10%;right:10%;
  background:radial-gradient(ellipse, rgba(var(--art-tint),.22) 0%, transparent 65%);
  filter:blur(38px);
  animation:blobDrift4 8s ease-in-out infinite alternate;
  transition:background 1.5s ease;
}
@keyframes blobDrift1{
  0%  {transform:translate(0,0)    scale(1.00)}
  100%{transform:translate(6%,10%) scale(1.10)}
}
@keyframes blobDrift2{
  0%  {transform:translate(0,0)     scale(1.04)}
  100%{transform:translate(-8%,-7%) scale(0.88)}
}
@keyframes blobDrift3{
  0%  {transform:translate(-50%,0)     scale(1.00)}
  100%{transform:translate(-60%,8%)    scale(1.16)}
}
@keyframes blobDrift4{
  0%  {transform:translate(0,0)   scale(1.00)}
  100%{transform:translate(3%,5%) scale(1.08)}
}

/* ── Layer 3: Vignette — depth + readability ── */
.fpl-vignette{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    /* Top bar area — semi-transparent */
    linear-gradient(180deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.20) 14%, transparent 28%),
    /* Bottom controls — dark for contrast */
    linear-gradient(0deg,   rgba(0,0,0,.96) 0%, rgba(0,0,0,.72) 32%, transparent 58%),
    /* Side edge vignette */
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 45%, rgba(0,0,0,.22) 100%);
}

/* ── Layer 4: Film grain texture ── */
.fpl-noise{
  position:absolute;inset:0;z-index:4;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.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px;
}

/* ── Drag handle ── */
.fpl-handle{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:42px;height:5px;border-radius:6px;z-index:10;
  background:rgba(255,255,255,.26);
  box-shadow:0 1px 4px rgba(0,0,0,.30);
}

/* ── Equalizer animation ── */
@keyframes eqBar{from{height:3px}to{height:12px}}
.fpl-eq{
  display:flex;align-items:flex-end;gap:2.5px;
  height:13px;flex-shrink:0;
}
.fpl-eq span{
  width:3px;border-radius:2px;
  background:rgba(255,255,255,.50);
  animation:eqBar .7s ease-in-out infinite alternate;
}
.fpl-eq span:nth-child(1){height:7px;animation-delay:0s}
.fpl-eq span:nth-child(2){height:13px;animation-delay:.18s}
.fpl-eq span:nth-child(3){height:5px;animation-delay:.36s}
.fpl.paused .fpl-eq span,.fpl-eq.stopped span{animation-play-state:paused}

/* ── Top bar ── */
.fpl-top{
  position:relative;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--st) + 22px) 24px 12px;
  flex-shrink:0;
}
.fpl-top-title{
  display:flex;align-items:center;gap:7px;
  font-size:11px;font-weight:700;
  letter-spacing:.65px;text-transform:uppercase;
  color:rgba(255,255,255,.52);
  text-shadow:0 1px 8px rgba(0,0,0,.60);
}

/* Glass icon buttons */
.fpl-down,.fpl-share{
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.18);
  outline:1px solid rgba(0,0,0,.14);
  outline-offset:-1px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.32) inset,
    0 5px 16px rgba(0,0,0,.38);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  color:rgba(255,255,255,.82);
  transition:background .14s,transform .16s cubic-bezier(.34,1.5,.64,1);
}
.fpl-down:active,.fpl-share:active{background:rgba(255,255,255,.22);transform:scale(.80)}
.fpl-down svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round}
.fpl-share svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ══════════════════════════════
   ALBUM ART
══════════════════════════════ */
.fpl-art-wrap{
  position:relative;z-index:4;
  display:flex;align-items:center;justify-content:center;
  padding:4px 26px 8px;
  flex:1;min-height:0;
}
/* Scale lives on the inner wrapper; rotation lives on the img itself.
   This way float (translateY on wrapper) and spin (rotate on img) never compete. */
.fpl-art-inner{
  position:relative;
  width:100%;max-width:292px;
  transform:scale(.86);
  transition:transform .70s cubic-bezier(.34,1.18,.64,1);
}
.fpl-art-inner.playing{
  transform:scale(1.0);
  animation:artFloat 9s ease-in-out infinite;
}
.fpl-art-inner.paused{transform:scale(.84)}

.fpl-art{
  width:100%;aspect-ratio:1;
  border-radius:22px;object-fit:cover;display:block;
  background:var(--g3);
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,.18),
    0 0 0 3px rgba(0,0,0,.28),
    0 8px 22px rgba(0,0,0,.55),
    0 28px 58px rgba(0,0,0,.82),
    0 56px 100px rgba(0,0,0,.58);
  transition:
    box-shadow .70s cubic-bezier(.34,1.18,.64,1),
    filter .55s ease;
  will-change:transform,box-shadow;
}
.fpl-art.playing{
  border-radius:22px;
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,.22),
    0 0 0 3px rgba(0,0,0,.22),
    0 10px 28px rgba(0,0,0,.52),
    0 32px 68px rgba(0,0,0,.88),
    0 60px 100px rgba(0,0,0,.62),
    0 0 100px rgba(var(--art-tint),.40);
}
.fpl-art.paused{
  border-radius:22px;
  filter:brightness(.60) saturate(.44);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 12px 36px rgba(0,0,0,.65);
}
.fpl-art.loading{
  filter:brightness(.28);
  animation:artPulse 1.0s ease-in-out infinite;
}

/* Color glow puddle — multi-layer for depth */
.fpl-art-shadow{
  position:absolute;
  bottom:-32px;left:8%;right:8%;height:60px;
  background:rgba(var(--art-tint),.52);
  filter:blur(44px);border-radius:50%;
  transition:background 1.0s ease;pointer-events:none;opacity:.85;
}
.fpl-art-shadow::after{
  content:'';
  position:absolute;inset:10px;
  background:rgba(var(--art-tint),.30);
  filter:blur(24px);border-radius:50%;
}
.fpl-art-ring{display:none}
.fpl-brand-badge{display:none}

/* ══════════════════════════════
   META — title + artist + love
══════════════════════════════ */
.fpl-meta{
  position:relative;z-index:5;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:0 26px;margin-bottom:14px;
}
.fpl-meta-left{flex:1;min-width:0;padding-right:12px}
.fpl-name{
  font-size:23px;font-weight:800;letter-spacing:-.55px;
  color:#fff;line-height:1.18;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 2px 20px rgba(0,0,0,.65);
}
.fpl-artist{
  font-size:14px;font-weight:600;
  color:rgba(255,255,255,.46);
  margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:-.05px;
}
/* Album chip */
.fpl-album-chip{
  display:inline-flex;align-items:center;gap:4px;
  margin-top:6px;
  padding:3px 8px 3px 5px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:99px;
  font-size:9.5px;font-weight:700;letter-spacing:.25px;
  color:rgba(255,255,255,.35);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fpl-album-chip svg{width:8px;height:8px;flex-shrink:0;opacity:.5;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* Love button — now aligned to title baseline */
.fpl-love{
  margin-top:1px;
}

/* Love button */
.fpl-love{
  width:50px;height:50px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.09);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.16);
  outline:1px solid rgba(0,0,0,.12);
  outline-offset:-1px;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 4px 16px rgba(0,0,0,.36);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:all .22s cubic-bezier(.34,1.4,.64,1);
}
.fpl-love:active{transform:scale(.72)}
.fpl-love.on{
  background:rgba(var(--art-tint),.22);
  border-color:rgba(var(--art-tint),.42);
  box-shadow:0 0 26px rgba(var(--art-tint),.40),0 1px 0 rgba(255,255,255,.28) inset;
}
.fpl-love.on svg{stroke:rgba(var(--art-tint),1);fill:rgba(var(--art-tint),.30)}
.fpl-love svg{
  width:22px;height:22px;
  stroke:rgba(255,255,255,.55);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:all .24s cubic-bezier(.34,1.4,.64,1);
}

/* ══════════════════════════════
   SEEK BAR
══════════════════════════════ */
.fpl-seek{
  position:relative;z-index:4;
  padding:0 28px;margin-bottom:10px;
  user-select:none;-webkit-user-select:none;
}
.fpl-seek-track{
  height:5px;
  background:rgba(255,255,255,.14);
  border-radius:99px;
  position:relative;cursor:pointer;overflow:visible;
  transition:height .18s cubic-bezier(.32,.72,0,1);
  box-shadow:0 1px 3px rgba(0,0,0,.40) inset;
}
.fpl-seek-track:active,
.fpl-seek-dragging .fpl-seek-track{height:11px}
.fpl-seek-dragging{cursor:grabbing}
.fpl-seek-fill{
  height:100%;border-radius:99px;
  /* Art-tint gradient → bright white — shifts color per track */
  background:linear-gradient(90deg,rgba(var(--art-tint),.72),rgba(255,255,255,.92));
  width:0%;pointer-events:none;position:relative;
  transition:width .28s linear,background 1.2s ease;
}
.fpl-seek-fill::after{
  content:'';
  position:absolute;top:50%;right:0;
  width:12px;height:12px;border-radius:50%;
  background:#fff;
  box-shadow:0 0 12px 4px rgba(255,255,255,.55);
  transform:translate(50%,-50%);
  opacity:0;transition:opacity .18s;pointer-events:none;
}
.fpl-seek-dragging .fpl-seek-fill::after{opacity:1}
.fpl-seek-thumb{
  position:absolute;top:50%;
  width:22px;height:22px;border-radius:50%;
  background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.56),0 0 10px rgba(255,255,255,.28);
  transform:translate(-50%,-50%) scale(0);
  pointer-events:none;left:0%;
  transition:left .28s linear,transform .22s cubic-bezier(.34,1.4,.64,1);
}
.fpl-seek-track:active .fpl-seek-thumb,
.fpl-seek-dragging .fpl-seek-thumb{transform:translate(-50%,-50%) scale(1)}
.fpl-seek-dragging .fpl-seek-tooltip,
.fpl-seek-track:active .fpl-seek-tooltip{opacity:1!important}
.fpl-times{
  display:flex;justify-content:space-between;
  margin-top:9px;font-size:13px;font-weight:700;
  color:rgba(255,255,255,.42);
  font-variant-numeric:tabular-nums;
  letter-spacing:.3px;
}
.fpl-times #fpl-cur{color:rgba(255,255,255,.75);
  font-variant-numeric:tabular-nums;letter-spacing:.12px;
}
.fpl-seek-tooltip{
  position:absolute;bottom:calc(100% + 14px);
  background:rgba(6,10,22,.96);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(24px);
  border-radius:12px;padding:5px 12px;
  font-size:12px;font-weight:700;color:#fff;
  pointer-events:none;transform:translateX(-50%);
  white-space:nowrap;opacity:0;transition:opacity .14s;z-index:10;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 8px 24px rgba(0,0,0,.58);
}
.fpl-seek-dragging .fpl-seek-tooltip{opacity:1}

/* ══════════════════════════════════════════════════
   GLASS SHELF — bottom control panel
══════════════════════════════════════════════════ */
.fpl-shelf{
  position:relative;z-index:5;
  margin:0 12px;
  border-radius:36px;
  background:
    linear-gradient(170deg,
      rgba(var(--art-tint),.06) 0%,
      rgba(255,255,255,.034) 50%,
      rgba(var(--art-tint),.02) 100%);
  backdrop-filter:blur(60px) saturate(240%) brightness(1.06);
  -webkit-backdrop-filter:blur(60px) saturate(240%) brightness(1.06);
  border:1px solid rgba(255,255,255,.14);
  outline:1px solid rgba(0,0,0,.22);
  outline-offset:-1px;
  box-shadow:
    0 1.5px 0 rgba(255,255,255,.26) inset,
    0 -1px 0 rgba(0,0,0,.18) inset,
    0 -2px 0 rgba(0,0,0,.08) inset,
    0 28px 70px rgba(0,0,0,.65),
    0 6px 20px rgba(0,0,0,.32),
    0 0 60px rgba(var(--art-tint),.08);
  overflow:hidden;
  transition:box-shadow 1.2s ease, background 1.2s ease;
}
.fpl-shelf::before{
  content:'';position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,rgba(255,255,255,.22) 30%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.22) 70%,transparent 100%);
  pointer-events:none;z-index:10;
}
.fpl-shelf::after{
  content:'';position:absolute;bottom:0;left:15%;right:15%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--art-tint),.20),transparent);
  pointer-events:none;z-index:10;
  transition:background 1.2s ease;
}

/* ══════════════════════════════
   CONTROLS
══════════════════════════════ */
.fpl-btns{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px 12px;
}
.fpl-ctl{
  background:none;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  -webkit-tap-highlight-color:transparent;
  -webkit-appearance:none;
  transition:transform .18s cubic-bezier(.34,1.5,.64,1),opacity .16s,background .18s,box-shadow .18s;
}
.fpl-ctl:active{transform:scale(.68)!important;opacity:.30}

/* ── Shuffle / Repeat — ghost glass circles ── */
.fpl-ctl-sm{
  width:48px;height:48px;
  color:rgba(255,255,255,.44);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 3px 12px rgba(0,0,0,.30);
}
.fpl-ctl-sm svg{
  width:20px;height:20px;
  stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.fpl-ctl-sm.active{
  color:rgba(var(--art-tint),1);
  background:rgba(var(--art-tint),.16);
  border-color:rgba(var(--art-tint),.30);
  box-shadow:
    0 0 24px rgba(var(--art-tint),.32),
    0 1px 0 rgba(255,255,255,.22) inset;
}

/* ── Prev / Next — medium glass circles ── */
.fpl-ctl-md{
  width:60px;height:60px;
  color:rgba(255,255,255,.90);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.20);
  outline:1px solid rgba(0,0,0,.12);
  outline-offset:-1px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.32) inset,
    0 -1px 0 rgba(0,0,0,.14) inset,
    0 8px 24px rgba(0,0,0,.42);
}
.fpl-ctl-md svg{width:28px;height:28px;fill:currentColor}

/* ── Play/Pause — large solid white circle ── */
.fpl-ctl-lg{
  width:82px;height:82px;border-radius:50%;
  background:#ffffff;
  border:none;outline:none;
  box-shadow:
    0 2px 0 rgba(255,255,255,1) inset,
    0 -2px 0 rgba(0,0,0,.10) inset,
    0 16px 48px rgba(0,0,0,.72),
    0 6px 18px rgba(0,0,0,.38),
    0 0 70px rgba(var(--art-tint),.36);
  color:rgba(4,6,14,.90);
  position:relative;
  transition:
    transform .20s cubic-bezier(.34,1.4,.64,1),
    box-shadow 1.0s ease,
    background .18s;
}
/* Pulsing ring when playing */
.fpl-ctl-lg.playing::before{
  content:'';
  position:absolute;inset:-8px;border-radius:50%;
  border:2px solid rgba(var(--art-tint),.40);
  animation:playRing 2.2s cubic-bezier(.4,0,.6,1) infinite;
  pointer-events:none;
}
.fpl-ctl-lg.playing::after{
  content:'';
  position:absolute;inset:-16px;border-radius:50%;
  border:1.5px solid rgba(var(--art-tint),.18);
  animation:playRing 2.2s cubic-bezier(.4,0,.6,1) infinite .55s;
  pointer-events:none;
}
@keyframes playRing{
  0%  {opacity:.9;transform:scale(.94)}
  70% {opacity:0;transform:scale(1.18)}
  100%{opacity:0;transform:scale(1.18)}
}
.fpl-ctl-lg:active{
  transform:scale(.78)!important;
  background:rgba(235,235,235,1);
  box-shadow:0 4px 16px rgba(0,0,0,.30);
  opacity:1;
}
.fpl-ctl-lg svg{width:30px;height:30px;fill:currentColor}
.fpl-ctl-lg .fpl-play-icon{margin-left:4px}
.fpl-ctl-lg .fpl-pause-icon{display:none;margin-left:0}
.fpl-ctl-lg.playing .fpl-play-icon{display:none}
.fpl-ctl-lg.playing .fpl-pause-icon{display:block}

/* ── Hairline divider between controls and volume ── */
.fpl-shelf-div{
  height:1px;
  margin:0 20px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10) 20%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.10) 80%,transparent);
}

/* ══════════════════════════════
   EXTRAS ROW — action chips + volume
══════════════════════════════ */
.fpl-extras{
  padding:8px 20px 14px;
  display:flex;flex-direction:column;gap:10px;
}
/* Top action row: karaoke chip + lyrics chip */
.fpl-action-row{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.fpl-vol-row{display:flex;align-items:center;gap:12px;padding:0 2px}
.fpl-vol-ic{
  width:20px;height:20px;flex-shrink:0;
  color:rgba(255,255,255,.32);
}
.fpl-vol-ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.fpl-vol-track{
  flex:1;height:5px;background:rgba(255,255,255,.12);
  border-radius:99px;position:relative;cursor:pointer;overflow:visible;
  transition:height .18s cubic-bezier(.32,.72,0,1);
  touch-action:none;
  -webkit-user-select:none;user-select:none;
}
.fpl-vol-track:active{height:9px}
.fpl-vol-fill{
  height:100%;
  background:linear-gradient(90deg,rgba(var(--art-tint),.62),rgba(255,255,255,.80));
  border-radius:99px;pointer-events:none;
  transition:background 1.2s ease;
}
.fpl-vol-thumb{
  position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);
  width:18px;height:18px;border-radius:50%;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.52),0 0 6px rgba(255,255,255,.22);
  pointer-events:none;
  transition:transform .18s cubic-bezier(.34,1.4,.64,1);
}
.fpl-vol-track:active .fpl-vol-thumb,
.fpl-vol-dragging .fpl-vol-thumb{transform:translate(-50%,-50%) scale(1)}
.fpl-vol-dragging .fpl-vol-track{height:9px}

/* ── Send button separator ── */
.fpl-send-div{
  height:1px;
  margin:0 16px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 20%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.08) 80%,transparent);
}

/* ══════════════════════════════
   SEND TO TELEGRAM
══════════════════════════════ */
.fpl-send-wrap{
  padding:14px 14px calc(var(--sb) + 16px);
}
.fpl-send-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 22px;border-radius:24px;border:none;cursor:pointer;
  background:linear-gradient(140deg,rgba(var(--art-tint),.32) 0%,rgba(var(--art-tint),.18) 100%);
  border:1px solid rgba(var(--art-tint),.34);
  outline:1px solid rgba(0,0,0,.12);
  outline-offset:-1px;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.30) inset,
    0 -1px 0 rgba(0,0,0,.14) inset,
    0 0 36px rgba(var(--art-tint),.24),
    0 8px 26px rgba(0,0,0,.44);
  color:#fff;font-family:inherit;font-size:16px;font-weight:700;letter-spacing:-.14px;
  transition:
    transform .18s cubic-bezier(.34,1.4,.64,1),
    background .24s ease,
    box-shadow .24s ease,
    opacity .22s;
  position:relative;overflow:hidden;
}
.fpl-send-btn::before{
  content:'';position:absolute;top:0;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.50),transparent);
  pointer-events:none;
}
/* Shimmer sweep */
.fpl-send-btn::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(105deg,
    transparent 35%,
    rgba(255,255,255,.12) 50%,
    transparent 65%);
  background-size:200% 100%;
  animation:sendShimmer 3.2s linear infinite;
  pointer-events:none;
}
@keyframes sendShimmer{
  0%  {background-position:200% 0}
  100%{background-position:-200% 0}
}
.fpl-send-btn:active{
  transform:scale(.96);
  background:linear-gradient(140deg,rgba(var(--art-tint),.46) 0%,rgba(var(--art-tint),.28) 100%);
}
.fpl-send-btn:disabled{opacity:.26;cursor:not-allowed;transform:none!important}
.fpl-send-btn.loading .fpl-send-icon{display:none}
.fpl-send-btn.loading .fpl-send-spinner{display:block}
.fpl-send-btn.success{
  background:linear-gradient(140deg,rgba(34,214,137,.32),rgba(34,214,137,.18))!important;
  border-color:rgba(34,214,137,.38)!important;
  box-shadow:0 0 36px rgba(34,214,137,.26),0 8px 26px rgba(0,0,0,.42)!important;
}
.fpl-send-btn.success .fpl-send-text::after{content:' ✓'}
.fpl-send-icon{flex-shrink:0;display:flex}
.fpl-send-icon svg{width:21px;height:21px;fill:#fff}
.fpl-send-spinner{display:none;width:21px;height:21px;flex-shrink:0}
.fpl-send-spinner svg{width:21px;height:21px;animation:spinR .75s linear infinite}
.fpl-send-text{position:relative;z-index:1}
.fpl-send-hint{display:none}

/* ── Volume (hidden legacy) ── */
.fpl-vol,.fpl-blur{display:none}

/* ════════════════════════════════════════
   LYRICS PANEL — karaoke view
════════════════════════════════════════ */

/* Dark scrim behind lyrics — ensures readability on any background/blob color */
.fpl-lyrics-scrim{
  display:none;
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:rgba(0,0,0,.52);
  transition:opacity .30s ease;
}
.fpl.lyrics-mode .fpl-lyrics-scrim{display:block}

.fpl-lyrics-panel{
  position:relative;z-index:5;
  flex:0 0 0px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transition:flex .44s cubic-bezier(.32,.72,0,1), opacity .30s ease;
}
.fpl.lyrics-mode .fpl-lyrics-panel{
  flex:1;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  opacity:1;pointer-events:auto;
  padding:0 24px 8px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:none;
  /* Gentle edge fade — top/bottom only, not too aggressive */
  -webkit-mask-image:linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,.6) 5%,
    #000 10%,
    #000 88%,
    rgba(0,0,0,.6) 94%,
    transparent 100%);
  mask-image:linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,.6) 5%,
    #000 10%,
    #000 88%,
    rgba(0,0,0,.6) 94%,
    transparent 100%);
}
.fpl.lyrics-mode .fpl-lyrics-panel::-webkit-scrollbar{display:none}

/* In lyrics mode: hide the big album art, keep a compact meta */
.fpl.lyrics-mode .fpl-art-wrap{display:none}

/* compact meta strip in lyrics mode */
.fpl-lyrics-header{
  display:none;
  align-items:center;gap:14px;
  padding:6px 24px 10px;
  position:relative;z-index:6;
  flex-shrink:0;
}
.fpl.lyrics-mode .fpl-lyrics-header{display:flex}
.fpl.lyrics-mode .fpl-meta{display:none}
.fpl-lh-art{
  width:52px;height:52px;border-radius:12px;flex-shrink:0;object-fit:cover;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.18),0 4px 16px rgba(0,0,0,.60);
  background:var(--g3);
}
.fpl-lh-info{flex:1;min-width:0}
.fpl-lh-title{
  font-size:15px;font-weight:800;letter-spacing:-.3px;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 8px rgba(0,0,0,.70);
}
.fpl-lh-artist{
  font-size:12px;color:rgba(255,255,255,.52);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;
}
/* ── Lyrics expand (cinema) button ── */
.lyr-expand-btn{
  flex-shrink:0;
  width:34px;height:34px;
  border-radius:50%;
  background:rgba(255,255,255,.10);
  border:1.5px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.75);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .15s,transform .12s,color .15s;
  -webkit-tap-highlight-color:transparent;
}
.lyr-expand-btn svg{width:15px;height:15px;pointer-events:none}
.lyr-expand-btn:active{background:rgba(255,255,255,.25);transform:scale(.88)}

/* ══════════════════════════════
   LYRICS CINEMA MODE (fullscreen overlay)
   ══════════════════════════════ */
#lyr-cinema{
  position:fixed;inset:0;z-index:9000;
  display:flex;flex-direction:column;
  background:#060810;
  opacity:0;pointer-events:none;
  transition:opacity .36s cubic-bezier(.4,0,.2,1);
  overscroll-behavior:contain;
  overflow:hidden;
}
#lyr-cinema.open{
  opacity:1;pointer-events:auto;
}

/* ══════════════════════════════════════════════
   CINEMA BACKGROUND — tingla.jpg logo watermark
══════════════════════════════════════════════ */

/* L0: tingla.jpg — soft blur, very dark, Ken Burns drift */
#lyr-cinema::after{
  content:'';position:absolute;inset:-60px;z-index:0;pointer-events:none;
  background:url("/static/img/tingla.jpg") center 40%/70% auto no-repeat,
             linear-gradient(145deg,#05081a 0%,#080c22 50%,#04060f 100%);
  filter:blur(8px) brightness(.18) saturate(1.8);
  animation:lcKenBurns 36s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes lcKenBurns{
  0%  {transform:scale(1.06) translate(0%,0%)}
  100%{transform:scale(1.12) translate(-2%,1.5%)}
}

/* L1: deep navy base + art-tint glow */
#lyr-cinema::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* art-tint center ambient */
    radial-gradient(ellipse 70% 50% at 50% 42%,
      rgba(var(--art-tint),.20) 0%,transparent 65%),
    /* TinglaBot cyan top arch */
    radial-gradient(ellipse 130% 45% at 50% -8%,
      rgba(0,160,255,.18) 0%,rgba(30,100,240,.08) 50%,transparent 65%),
    /* indigo left depth */
    radial-gradient(ellipse 70% 70% at -5% 55%,
      rgba(60,10,190,.20) 0%,transparent 60%),
    /* teal bottom-right */
    radial-gradient(ellipse 65% 50% at 105% 85%,
      rgba(0,180,200,.12) 0%,transparent 55%),
    linear-gradient(175deg,#070a1e 0%,#040610 55%,#060817 100%);
  transition:background 2.2s ease;
}

/* L2: blobs */
.lc-blob-wrap{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.lc-blob{position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
.lc-blob-1{
  width:100vw;height:100vw;top:-42%;left:-22%;
  background:radial-gradient(circle,rgba(var(--art-tint),.20) 0%,transparent 60%);
  filter:blur(80px);
  animation:lcBlob1 22s ease-in-out infinite alternate;
  transition:background 2.2s ease;
}
.lc-blob-2{
  width:85vw;height:85vw;bottom:-36%;right:-12%;
  background:radial-gradient(circle,rgba(var(--art-tint),.14) 0%,transparent 60%);
  filter:blur(85px);
  animation:lcBlob2 28s ease-in-out infinite alternate;
  transition:background 2.2s ease;
}
.lc-blob-3{display:none}
.lc-blob-4{display:none}
@keyframes lcBlob1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(5%,7%) scale(1.10)}}
@keyframes lcBlob2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-4%,-5%) scale(.90)}}

/* L3: shimmer ray */
.lc-shimmer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.lc-shimmer::after{
  content:'';position:absolute;top:-50%;left:-100%;width:55%;height:200%;
  background:linear-gradient(108deg,
    transparent 0%,
    rgba(255,255,255,.015) 45%,
    rgba(255,255,255,.038) 50%,
    rgba(255,255,255,.015) 55%,
    transparent 100%);
  animation:lcRay 18s ease-in-out infinite;
}
@keyframes lcRay{
  0%,25%{transform:translateX(0)}
  75%,100%{transform:translateX(400%)}
}

/* L4: vignette */
.lc-vignette{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.10) 22%,transparent 40%),
    linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.45) 18%,transparent 40%),
    radial-gradient(ellipse 120% 120% at 50% 50%,transparent 32%,rgba(0,0,0,.30) 100%);
}

/* L5: grain */
.lc-noise{
  position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.020;
  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.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px;
}
/* Top bar */
.lc-top{
  position:relative;z-index:10;
  display:flex;align-items:center;gap:12px;
  padding:calc(var(--st,0px) + 14px) 20px 10px;
  flex-shrink:0;
}
.lc-back{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.12);border:none;
  display:flex;align-items:center;justify-content:center;
  color:#fff;cursor:pointer;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s,transform .12s;
}
.lc-back:active{background:rgba(255,255,255,.25);transform:scale(.88)}
.lc-back svg{width:18px;height:18px;pointer-events:none}
.lc-track{flex:1;min-width:0}
.lc-title{
  font-size:15px;font-weight:800;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:-.3px;
  text-shadow:0 1px 8px rgba(0,0,0,.70);
}
.lc-artist{
  font-size:12px;color:rgba(255,255,255,.55);font-weight:600;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Scrollable lyrics area */
.lc-scroll{
  position:relative;z-index:5;
  flex:1;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:none;
}
.lc-scroll::-webkit-scrollbar{display:none}
.lc-inner{
  padding:32px 28px calc(var(--sb,24px) + 100px);
  display:flex;flex-direction:column;
  /* Center active line vertically — extra top padding added by JS */
}
/* Cinema lyrics lines — bigger, more spacious */
.lc-line{
  font-size:26px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:-.4px;
  color:rgba(255,255,255,.25);
  padding:9px 0;
  cursor:pointer;
  text-shadow:0 1px 8px rgba(0,0,0,.70);
  transition:
    color .30s ease,
    font-size .28s cubic-bezier(.32,.72,0,1),
    opacity .30s ease;
  will-change:color,font-size;
  -webkit-font-smoothing:antialiased;
}
.lc-line.active{
  color:#fff;
  font-size:32px;
  font-weight:800;
  letter-spacing:-.5px;
  text-shadow:
    0 2px 16px rgba(0,0,0,.90),
    0 0 48px rgba(var(--art-tint),.50);
}
.lc-line.prev1,.lc-line.next1{
  color:rgba(255,255,255,.55);
  font-size:27px;
}
.lc-line.prev2,.lc-line.next2{
  color:rgba(255,255,255,.36);
  font-size:26px;
}
/* Mini playback bar pinned at bottom */
.lc-bar{
  position:relative;z-index:10;
  flex-shrink:0;
  padding:12px 24px calc(var(--sb,16px) + 12px);
  display:flex;flex-direction:column;gap:10px;
  background:linear-gradient(0deg,rgba(0,0,0,.80) 0%,transparent 100%);
}
.lc-bar-track{
  width:100%;height:3px;border-radius:3px;
  background:rgba(255,255,255,.18);cursor:pointer;
  position:relative;
}
.lc-bar-fill{
  height:100%;border-radius:3px;
  background:#fff;
  pointer-events:none;
  transition:width .25s linear;
}
.lc-bar-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.lc-bar-info{flex:1;min-width:0}
.lc-bar-title{
  font-size:13px;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lc-bar-artist{
  font-size:11px;color:rgba(255,255,255,.50);font-weight:600;margin-top:1px;
}
.lc-play-btn{
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.95);border:none;
  display:flex;align-items:center;justify-content:center;
  color:#111;cursor:pointer;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s,background .15s;
}
.lc-play-btn:active{transform:scale(.90)}
.lc-play-btn svg{width:18px;height:18px;pointer-events:none;margin-left:1px}
.lc-play-btn.paused svg.lc-pause-ic{display:none}
.lc-play-btn:not(.paused) svg.lc-play-ic{display:none}

/* ══════════════════════════════════════════
   LYRIC LINES
   Design principles:
   • NO blur on text — blur = unreadable on mobile
   • All lines visible — dim but never invisible
   • text-shadow on every line — readable on any bg
   • Active = full brightness + color glow
   • Size jump kept small (20→24px) — no layout shift
══════════════════════════════════════════ */
.lyr-inner{
  padding:24px 0 100px;
}
.lyr-line{
  font-size:20px;
  font-weight:700;
  line-height:1.45;
  letter-spacing:-.30px;
  color:rgba(255,255,255,.36);
  padding:7px 0;
  cursor:pointer;
  /* Guaranteed readability on any background */
  text-shadow:
    0 1px 6px rgba(0,0,0,.80),
    0 0 20px rgba(0,0,0,.50);
  /* Smooth transitions — only color, opacity, size. NO blur. */
  transition:
    color      .30s ease,
    opacity    .30s ease,
    font-size  .28s cubic-bezier(.32,.72,0,1),
    text-shadow .30s ease;
  will-change:color,font-size;
  /* Crisp font rendering */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ── Active line: full brightness + art-tint glow ── */
.lyr-line.active{
  color:#ffffff;
  font-size:24px;
  font-weight:800;
  letter-spacing:-.42px;
  text-shadow:
    0 1px 10px rgba(0,0,0,.90),
    0 0 32px rgba(var(--art-tint),.55),
    0 0 64px rgba(var(--art-tint),.22);
}

/* ── Context lines: gradual fade away from active ── */
.lyr-line.prev1{
  color:rgba(255,255,255,.62);
  font-size:21px;
}
.lyr-line.prev2{
  color:rgba(255,255,255,.42);
  font-size:20px;
}
.lyr-line.next1{
  color:rgba(255,255,255,.55);
  font-size:21px;
}

/* ── Beat animation — scale only, never blur ── */
.lyr-line.beat{
  animation:lyrBeat .20s cubic-bezier(.36,.07,.19,.97);
}
@keyframes lyrBeat{
  0%  {transform:scale(1.00)}
  40% {transform:scale(1.04)}
  100%{transform:scale(1.00)}
}

/* ── Auto-sync indicator ── */
.lyr-autosync-badge{
  position:absolute;top:8px;right:12px;
  font-size:9px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;
  color:rgba(0,207,255,.50);
  pointer-events:none;
  opacity:0;transition:opacity .6s;
}
.lyr-autosync-badge.vis{opacity:1}

/* ── Empty state ── */
.lyr-empty{
  text-align:center;
  color:rgba(255,255,255,.36);
  font-size:13.5px;font-weight:600;
  padding:70px 0 40px;line-height:1.8;
  text-shadow:0 1px 6px rgba(0,0,0,.70);
}
.lyr-empty svg{
  width:38px;height:38px;display:block;margin:0 auto 14px;
  stroke:rgba(255,255,255,.28);fill:none;stroke-width:1.5;stroke-linecap:round;
}

/* ── Loading skeleton ── */
.lyr-loading{
  padding:38px 0;display:flex;flex-direction:column;gap:14px;
}
.lyr-sk{
  height:19px;border-radius:10px;
  background:rgba(255,255,255,.10);
  animation:lyrSkPulse 1.4s ease-in-out infinite;
}
.lyr-sk:nth-child(1){width:85%}
.lyr-sk:nth-child(2){width:65%}
.lyr-sk:nth-child(3){width:90%}
.lyr-sk:nth-child(4){width:58%}
.lyr-sk:nth-child(5){width:76%}
@keyframes lyrSkPulse{0%,100%{opacity:.25}50%{opacity:.60}}

/* ══════════════════════════════════════════
   ACTION CHIPS — Karaoke & Lyrics
   Compact horizontal: icon + label in one row
══════════════════════════════════════════ */
.fpl-vr-btn,
.fpl-lyr-btn{
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:7px;
  padding:0 14px;
  height:40px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.11);
  border-radius:14px;
  color:rgba(255,255,255,.46);
  font-family:inherit;
  cursor:pointer;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 2px 8px rgba(0,0,0,.22);
  transition:all .22s cubic-bezier(.34,1.4,.64,1);
  -webkit-tap-highlight-color:transparent;
  position:relative;overflow:hidden;
}
/* Specular top line */
.fpl-vr-btn::before,
.fpl-lyr-btn::before{
  content:'';position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
  pointer-events:none;
}
/* Icon wrapper — small glow dot */
.fpl-pill-icon{
  width:26px;height:26px;border-radius:8px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.11);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background .22s,box-shadow .22s,border-color .22s;
}
.fpl-vr-btn svg,
.fpl-lyr-btn svg{
  width:13px;height:13px;flex-shrink:0;
  stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:all .2s;
}
/* Label */
.fpl-pill-label{
  font-size:11px;font-weight:700;letter-spacing:.25px;
  line-height:1;
  opacity:.7;
  transition:opacity .2s;
}

/* ── ON state ── */
.fpl-vr-btn.on,
.fpl-lyr-btn.on{
  background:rgba(var(--art-tint),.18);
  border-color:rgba(var(--art-tint),.34);
  color:rgba(255,255,255,.92);
  box-shadow:
    0 0 20px rgba(var(--art-tint),.22),
    0 1px 0 rgba(255,255,255,.18) inset;
}
.fpl-vr-btn.on .fpl-pill-icon,
.fpl-lyr-btn.on .fpl-pill-icon{
  background:rgba(var(--art-tint),.26);
  border-color:rgba(var(--art-tint),.42);
  box-shadow:0 0 10px rgba(var(--art-tint),.35);
}
.fpl-vr-btn.on .fpl-pill-label,
.fpl-lyr-btn.on .fpl-pill-label{opacity:1}

/* ── Tap ── */
.fpl-vr-btn:active,
.fpl-lyr-btn:active{transform:scale(.93);opacity:.75}

/* ── Loading ── */
.fpl-vr-btn.loading{pointer-events:none;opacity:.55}
.fpl-vr-btn .vr-spinner{
  position:absolute;inset:0;border-radius:14px;
  border:1.5px solid transparent;
  border-top-color:rgba(255,255,255,.40);
  animation:vrSpin .7s linear infinite;display:none;
}
.fpl-vr-btn.loading .vr-spinner{display:block}
.fpl-vr-btn.loading .fpl-pill-icon{opacity:.2}
@keyframes vrSpin{to{transform:rotate(360deg)}}

/* Karaoke active banner */
.fpl-vr-banner{
  position:absolute;top:18px;left:50%;transform:translateX(-50%);
  background:rgba(var(--art-tint),.18);
  border:1px solid rgba(var(--art-tint),.30);
  border-radius:99px;padding:4px 14px;
  font-size:10px;font-weight:700;letter-spacing:.6px;color:rgb(var(--art-tint));
  text-transform:uppercase;
  opacity:0;pointer-events:none;
  transition:opacity .3s;white-space:nowrap;
}
.fpl.vr-on .fpl-vr-banner{opacity:1}

/* ── Marquee for long titles ── */
.fpl-name-wrap{overflow:hidden;position:relative}
.fpl-name-wrap.scrolling .fpl-name{
  display:inline-block;white-space:nowrap;
  animation:marqueeScroll 9s linear infinite;
  padding-right:52px;
}
@keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ════════════════════════════════════════
   VIBE CARDS
════════════════════════════════════════ */
.vibe-section{margin:6px 0 0}
.vibe-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.vibe-title{font-size:20px;font-weight:900;letter-spacing:-.48px}
.vibe-tabs,.picks-tabs{
  display:flex;
  background:rgba(255,255,255,.042);
  border:1px solid rgba(255,255,255,.10);
  outline:1px solid rgba(0,0,0,.12);outline-offset:-1px;
  border-radius:30px;padding:3px;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset;
}
.vibe-tab,.picks-tab{
  padding:5px 14px;border-radius:22px;font-size:11px;font-weight:700;
  cursor:pointer;border:none;background:none;color:rgba(255,255,255,.40);
  font-family:inherit;transition:all .18s cubic-bezier(.34,1.4,.64,1);white-space:nowrap;
}
.vibe-tab.on,.picks-tab.on{
  background:rgba(255,255,255,.92);color:#020810;
  box-shadow:0 2px 10px rgba(0,0,0,.30),0 1px 0 rgba(255,255,255,.90) inset;
  font-weight:800;
}
.vibe-scroll{display:flex;gap:12px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.vibe-scroll::-webkit-scrollbar{display:none}
.picks-section{margin:22px 0 0}
.picks-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.picks-title{font-size:20px;font-weight:900;letter-spacing:-.48px}

/* Vibe card */
.vibe-card{
  flex-shrink:0;width:calc(100vw - 72px);max-width:370px;
  height:110px;border-radius:26px;
  position:relative;overflow:hidden;cursor:pointer;
  transition:transform .24s cubic-bezier(.34,1.4,.64,1),box-shadow .24s;
  border:1px solid rgba(255,255,255,.14);
  outline:1px solid rgba(0,0,0,.20);outline-offset:-1px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.20) inset,
    0 16px 42px rgba(0,0,0,.54);
  contain:layout paint;
}
.vibe-card:active{transform:scale(.96);box-shadow:0 5px 18px rgba(0,0,0,.42)}
.vibe-card::before{
  content:'';position:absolute;top:0;left:4%;right:4%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.40) 40%,rgba(255,255,255,.52) 50%,rgba(255,255,255,.40) 60%,transparent);
  z-index:3;
}
.vibe-card::after{display:none}
.vibe-card-wave{
  position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse 80% 60% at 80% 50%,rgba(255,255,255,.16) 0%,transparent 52%),
             radial-gradient(ellipse 40% 80% at 10% 50%,rgba(0,0,0,.18) 0%,transparent 60%);
}
.vibe-card-blob{display:none}.vibe-card-blob2{display:none}.vibe-card-blob3{display:none}
.vibe-card-sweep{display:none}
.vibe-card-body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 22px;z-index:3}
.vibe-card-sub{font-size:11px;color:rgba(255,255,255,.54);font-weight:600;margin-bottom:5px;letter-spacing:.05px}
.vibe-card-name{
  font-size:23px;font-weight:900;letter-spacing:-.52px;color:#fff;
  display:flex;align-items:center;gap:9px;
  text-shadow:0 2px 10px rgba(0,0,0,.28);
}
.vibe-card-name svg{width:17px;height:17px;fill:#fff;flex-shrink:0;opacity:.84}
.vibe-card-wave-bars{
  position:absolute;bottom:0;left:0;right:0;height:28px;
  display:flex;align-items:flex-end;gap:2px;padding:0 22px 6px;z-index:2;opacity:.28;
}
.vb{flex:1;background:rgba(255,255,255,.85);border-radius:2px 2px 0 0;transform-origin:bottom;animation:wvBar .7s ease-in-out infinite alternate}
@keyframes wvBar{0%{transform:scaleY(.15);opacity:.30}100%{transform:scaleY(1);opacity:1}}

/* ════════════════════════════════════════
   LIBRARY PAGE
════════════════════════════════════════ */
.lib-header{
  padding:calc(var(--st) + 26px) 0 18px;
}
.lib-header-title{
  font-size:34px;font-weight:900;letter-spacing:-.76px;color:#fff;line-height:1;
  background:linear-gradient(120deg,#fff 50%,rgba(255,255,255,.62) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.lib-header-sub{
  font-size:12.5px;font-weight:600;color:rgba(242,245,255,.32);
  margin-top:6px;letter-spacing:.1px;
}

/* ── Chart cards ── */
.lib-charts{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  margin-bottom:4px;
}
.lib-chart-card{
  position:relative;overflow:hidden;
  border-radius:22px;padding:18px 14px 16px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.14);
  outline:1px solid rgba(0,0,0,.18);outline-offset:-1px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.20) inset,
    0 10px 32px rgba(0,0,0,.50);
  transition:transform .20s cubic-bezier(.34,1.4,.64,1),box-shadow .20s;
  min-height:112px;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.lib-chart-card:active{transform:scale(.96)}
.lib-chart-bg{position:absolute;inset:0;z-index:0}
.lib-chart-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.60) 100%);
}
.lib-chart-flag{
  position:absolute;top:14px;right:14px;z-index:2;font-size:26px;line-height:1;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.50));
}
.lib-chart-name{
  position:relative;z-index:2;
  font-size:17px;font-weight:900;color:#fff;letter-spacing:-.3px;line-height:1.1;
}
.lib-chart-sub{
  position:relative;z-index:2;
  font-size:10.5px;font-weight:600;color:rgba(255,255,255,.58);
  margin-top:3px;
}
.lib-chart-arr{
  position:absolute;bottom:14px;right:14px;z-index:2;
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset;
  display:flex;align-items:center;justify-content:center;
}
.lib-chart-arr svg{width:14px;height:14px;stroke:rgba(255,255,255,.90)}

/* ── Genre grid — Spotify-style Browse ── */
.lib-genre-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:10px;margin-bottom:4px;
}
.lib-genre-tile{
  position:relative;overflow:hidden;
  border-radius:18px;
  height:94px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.13);
  outline:1px solid rgba(0,0,0,.16);outline-offset:-1px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 8px 24px rgba(0,0,0,.44);
  transition:transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .18s;
  display:flex;align-items:flex-end;padding:12px 14px;
}
.lib-genre-tile:active{transform:scale(.93);box-shadow:0 3px 12px rgba(0,0,0,.36)}
.lib-genre-tile-bg{position:absolute;inset:0;z-index:0}
.lib-genre-tile-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(150deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.52) 100%);
}
.lib-genre-tile-em{
  position:absolute;top:10px;right:12px;z-index:2;
  font-size:28px;line-height:1;opacity:.90;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.45));
}
.lib-genre-tile-name{
  position:relative;z-index:2;
  font-size:15px;font-weight:900;color:#fff;letter-spacing:-.25px;line-height:1.1;
}
.lib-genre-tile-sub{
  position:absolute;bottom:26px;left:14px;z-index:2;
  font-size:9.5px;font-weight:600;color:rgba(255,255,255,.52);
}

/* ═══════════════════════════════════════════════
   SPLASH SCREEN — TinglaBot brand intro
═══════════════════════════════════════════════ */
#splash{
  position:fixed;inset:0;z-index:9999;
  background:#020308;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;
  transition:opacity .55s cubic-bezier(.25,.46,.45,.94), transform .60s cubic-bezier(.25,.46,.45,.94);
  will-change:opacity,transform;
}
#splash.hide{opacity:0;transform:scale(1.06);pointer-events:none}
.splash-bars{
  display:flex;align-items:flex-end;gap:5px;
  height:60px;margin-bottom:22px;
}
.sp-bar{
  width:9px;border-radius:5px;
  background:linear-gradient(180deg,var(--pk2) 0%,var(--p) 100%);
  box-shadow:0 0 14px rgba(0,207,255,.50);
  transform-origin:bottom;
  animation:spBar .75s ease-in-out infinite alternate;
}
.sp-bar:nth-child(1){height:22px;animation-delay:0s;animation-duration:.65s}
.sp-bar:nth-child(2){height:42px;animation-delay:.10s;animation-duration:.55s}
.sp-bar:nth-child(3){height:58px;animation-delay:.05s;animation-duration:.80s}
.sp-bar:nth-child(4){height:36px;animation-delay:.18s;animation-duration:.62s}
.sp-bar:nth-child(5){height:18px;animation-delay:.08s;animation-duration:.70s}
@keyframes spBar{
  0%{transform:scaleY(.22);opacity:.35}
  100%{transform:scaleY(1);opacity:1}
}
.splash-wordmark{
  font-size:36px;font-weight:900;letter-spacing:-1.2px;
  background:linear-gradient(110deg,#fff 10%,#b8eaff 35%,#00CFFF 58%,#2196F3 82%,#7C3AFF 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 18px rgba(0,207,255,.35));
  animation:splashWmIn .6s .15s both;
}
.splash-tagline{
  font-size:12px;font-weight:600;
  color:rgba(255,255,255,.22);
  letter-spacing:.25px;margin-top:9px;
  animation:splashWmIn .5s .35s both;
}
@keyframes splashWmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ═══════════════════════════════════════════════
   HEADER — TinglaBot logo EQ bars
═══════════════════════════════════════════════ */
.hh-logo-wrap{display:flex;align-items:center;gap:12px;line-height:1}
.hh-logo-eq{
  display:flex;align-items:flex-end;gap:3px;
  height:28px;flex-shrink:0;
}
.hh-logo-bar{
  width:4.5px;border-radius:3px;
  background:linear-gradient(180deg,var(--pk2) 0%,var(--p) 100%);
  box-shadow:0 0 10px rgba(0,207,255,.50);
  transform-origin:bottom;
  animation:hdrEqBar .8s ease-in-out infinite alternate;
}
.hh-logo-bar:nth-child(1){height:10px;animation-duration:.70s;animation-delay:0s}
.hh-logo-bar:nth-child(2){height:20px;animation-duration:.52s;animation-delay:.10s}
.hh-logo-bar:nth-child(3){height:28px;animation-duration:.88s;animation-delay:.05s}
.hh-logo-bar:nth-child(4){height:16px;animation-duration:.64s;animation-delay:.16s}
.hh-logo-bar:nth-child(5){height:12px;animation-duration:.76s;animation-delay:.08s}
/* Start paused; JS sets --anim-state:running when music plays */
#hh-logo-eq{--anim-state:paused}
#hh-logo-eq .hh-logo-bar{animation-play-state:var(--anim-state)}
@keyframes hdrEqBar{
  0%{transform:scaleY(.28);opacity:.42}
  100%{transform:scaleY(1);opacity:1}
}

/* Override the gradient for TinglaBot title */
.hh-title .g{
  background:linear-gradient(110deg,
    #ffffff 0%,
    #c2eeff 22%,
    #60d8ff 44%,
    #00CFFF 60%,
    #2196F3 78%,
    #6C3BFF 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 2px 16px rgba(0,207,255,.40));
}

/* ═══════════════════════════════════════════════
   FULL PLAYER — branded top bar + send button
═══════════════════════════════════════════════ */
.fpl-np-brand{
  background:linear-gradient(95deg,var(--pk),var(--p2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  font-weight:900;font-size:11.5px;letter-spacing:.4px;text-transform:none;
  filter:drop-shadow(0 0 6px rgba(0,207,255,.38));
}

/* Premium "Send via TinglaBot" button — solid Telegram brand blue */
.fpl-send-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:11px;
  padding:17px 22px;border-radius:24px;border:none;cursor:pointer;
  background:linear-gradient(150deg, #2AABEE 0%, #1d98db 40%, #117DC4 100%);
  border:1px solid rgba(255,255,255,.22);
  outline:1px solid rgba(0,0,0,.12);outline-offset:-1px;
  box-shadow:
    0 2px 0 rgba(255,255,255,.30) inset,
    0 -2px 0 rgba(0,0,0,.16) inset,
    0 0 44px rgba(42,171,238,.35),
    0 10px 32px rgba(0,0,0,.52);
  color:#fff;font-family:inherit;font-size:16px;font-weight:800;letter-spacing:-.14px;
  transition:
    transform .18s cubic-bezier(.34,1.4,.64,1),
    box-shadow .22s ease,
    opacity .22s;
  position:relative;overflow:hidden;
}
.fpl-send-btn::before{
  content:'';position:absolute;top:0;left:5%;right:5%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  pointer-events:none;
}
.fpl-send-btn:active{
  transform:scale(.96);
  box-shadow:0 0 22px rgba(42,171,238,.28),0 4px 14px rgba(0,0,0,.36);
}
.fpl-send-btn:disabled{opacity:.26;cursor:not-allowed;transform:none!important}
.fpl-send-btn.loading .fpl-send-icon{display:none}
.fpl-send-btn.loading .fpl-send-spinner{display:block}
.fpl-send-btn.success{
  background:linear-gradient(150deg,#22c55e,#16a34a)!important;
  border-color:rgba(34,197,94,.38)!important;
  box-shadow:0 0 40px rgba(34,197,94,.30),0 8px 28px rgba(0,0,0,.44)!important;
}
.fpl-send-btn.success .fpl-send-text::after{content:' ✓'}

/* ═══════════════════════════════════════════════
   CURRENTLY PLAYING — track row highlight
═══════════════════════════════════════════════ */
@keyframes playingGlow{
  0%,100%{box-shadow:0 0 0 1.5px rgba(0,207,255,.12) inset,0 4px 14px rgba(0,0,0,.28),0 0 20px rgba(0,180,255,.06)}
  50%{box-shadow:0 0 0 1.5px rgba(0,207,255,.25) inset,0 4px 14px rgba(0,0,0,.28),0 0 28px rgba(0,180,255,.12)}
}
.tr.tr-playing{
  background:rgba(0,207,255,.07);
  border-color:rgba(0,207,255,.22);
  animation:playingGlow 3s ease-in-out infinite;
}
.tr.tr-playing .tr-name{
  color:var(--pk2);
}
.tr.tr-playing .tr-prev-badge{
  background:linear-gradient(145deg,rgba(0,207,255,.30),rgba(33,100,255,.22));
  border-color:rgba(0,207,255,.45);
}
.tr.tr-playing .tr-th{
  box-shadow:
    0 0 0 2px rgba(0,207,255,.40),
    0 0 0 3.5px rgba(0,0,0,.24),
    0 5px 16px rgba(0,0,0,.50);
}

/* ═══════════════════════════════════════════════
   HERO — TinglaBot featured banner gradient anim
═══════════════════════════════════════════════ */
@keyframes heroShimmer{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* ═══════════════════════════════════════════════
   VIBE CARD — music bars improve
═══════════════════════════════════════════════ */
.vibe-card-name{
  font-size:24px;font-weight:900;letter-spacing:-.56px;color:#fff;
  display:flex;align-items:center;gap:9px;
  text-shadow:0 2px 14px rgba(0,0,0,.38);
}
.vibe-card-wave-bars{
  position:absolute;bottom:0;left:0;right:0;height:32px;
  display:flex;align-items:flex-end;gap:2px;padding:0 20px 4px;
  z-index:2;opacity:.32;
}

/* ═══════════════════════════════════════════════
   NAV PILL — improved active pill with brand glow
═══════════════════════════════════════════════ */
.ni.on{
  background:rgba(0,207,255,.15);
  color:var(--pk);
  box-shadow:
    0 0 22px rgba(0,207,255,.18),
    inset 2px 2px 5px -2px rgba(255,255,255,.22),
    inset -2px -1px 5px 0 rgba(255,255,255,.10),
    inset 0 -2px 0 rgba(255,255,255,.08);
}
.ni.on .ni-ic svg{
  stroke:var(--pk);
  stroke-width:2.2;
  filter:drop-shadow(0 0 6px rgba(0,207,255,.70));
}

/* ═══════════════════════════════════════════════
   SECTION HEADERS — brand accent dividers
═══════════════════════════════════════════════ */
.sh-t{
  font-size:18px;font-weight:900;letter-spacing:-.42px;
  position:relative;
}

/* ═══════════════════════════════════════════════
   CHIP — active state with brand cyan
═══════════════════════════════════════════════ */
.chip.on{
  background:rgba(0,207,255,.16);
  border-color:rgba(0,207,255,.42);
  outline-color:transparent;
  color:var(--pk2);
  box-shadow:
    0 0 22px rgba(0,207,255,.18),
    0 1px 0 rgba(255,255,255,.16) inset;
}

/* ═══════════════════════════════════════════════
   FOOTER TAGLINE in full player
═══════════════════════════════════════════════ */
.fpl-send-hint{
  display:block;
  text-align:center;
  font-size:10.5px;font-weight:600;
  color:rgba(255,255,255,.24);
  margin-top:9px;letter-spacing:.12px;
}