/* Calm — design system
   Dark ambient aesthetic. Mobile-first, safe-area aware, 60fps transforms only. */

:root{
  /* warm terracotta — dark ground with a red-brown undertone */
  --bg-0:#171226; --bg-1:#1f1833; --bg-2:#2a2144;
  --surface:rgba(226,214,255,.075);
  --surface-2:rgba(226,214,255,.125);
  --line:rgba(220,206,255,.16);
  --text:#f4f1fb; --text-2:#b9b0d4; --text-3:#8b81ab;
  --accent:#a97bff; --accent-2:#c9a5ff; --accent-warm:#e0c8ff;
  --accent-rgb:169,123,255; --accent-2-rgb:201,165,255; --accent-warm-rgb:224,200,255;
  --ok:#3fae77; --danger:#e8415f;
  --btn-bg:#f4f1fb; --btn-fg:#191233;      /* solid button */
  --heat-empty:rgba(255,248,244,.14); --heat-future:rgba(255,248,244,.07);
  --scrim:14,10,26;                           /* hero/image overlay base */
  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:34px;
  --tab-h:68px;
  --ease:cubic-bezier(.32,.72,0,1);
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  /* Never add a base offset ON TOP of the inset — in standalone the layout
     viewport already ends above the home indicator, so adding both pushes
     the bar visibly too high. Take whichever is larger. */
  /* Clamp the inset. Standalone iOS can report a bottom inset far larger than
     the ~34pt home indicator, which left the tab bar floating ~100pt off the
     bottom. Floor at 12 so browsers aren't flush; ceiling at 34 so the bar
     never drifts up regardless of what the OS reports. */
  --sab-gap:clamp(12px, env(safe-area-inset-bottom,0px), 34px);
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Inter,system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--font); color:var(--text); background:var(--bg-0);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overscroll-behavior-y:none; overflow-x:hidden;
}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--accent);color:#140a06}


/* ---------- day theme ---------- */
:root[data-theme="light"]{
  --bg-0:#ffffff; --bg-1:#ffffff; --bg-2:#f4f2fa;
  --surface:rgba(30,18,12,.035);
  --surface-2:rgba(30,18,12,.06);
  --line:rgba(30,18,12,.10);
  --text:#160f28; --text-2:#5b5175; --text-3:#8b83a3;
  --accent:#7c3aed; --accent-2:#a855f7; --accent-warm:#8b5cf6;
  --accent-rgb:124,58,237; --accent-2-rgb:168,85,247; --accent-warm-rgb:139,92,246;
  --ok:#218a5c; --danger:#cf2340;
  --btn-bg:#160f28; --btn-fg:#f7f5ff;
  --heat-empty:rgba(30,18,12,.15); --heat-future:rgba(30,18,12,.07);
  --scrim:14,10,26;
}
:root[data-theme="light"] .aurora{background:
  radial-gradient(120% 70% at 50% -14%, #ede4ff 0%, transparent 58%),
  linear-gradient(180deg,#ffffff 0%, #ffffff 62%);}
:root[data-theme="light"] .aurora::before{background:radial-gradient(circle,#c4a8ff,transparent 64%);opacity:.20}
:root[data-theme="light"] .aurora::after{background:radial-gradient(circle,#d8c4ff,transparent 64%);opacity:.18}
:root[data-theme="light"] .tabbar-inner{background:rgba(255,252,250,.82);
  box-shadow:0 14px 38px -18px rgba(80,40,20,.35)}
:root[data-theme="light"] .mini{background:rgba(255,252,250,.9);
  box-shadow:0 14px 34px -16px rgba(80,40,20,.35)}
:root:is([data-theme="light"],[data-theme="blossom"]) .toast{background:rgba(31,18,11,.94);color:#fff7f2}
:root[data-theme="light"] .card .art,
:root[data-theme="light"] .row .art,
:root[data-theme="light"] .hero{box-shadow:0 12px 32px -14px rgba(80,40,20,.34)}
:root:is([data-theme="light"],[data-theme="blossom"]) .err{background:rgba(207,35,64,.07);border-color:rgba(207,35,64,.24);color:#8e1728}
:root[data-theme="light"] .note{background:rgba(var(--accent-rgb),.07);border-color:rgba(var(--accent-rgb),.22);color:#4c1d95}
:root:is([data-theme="light"],[data-theme="blossom"]) .spin{border-color:rgba(255,255,255,.35);border-top-color:#fff7f2}


/* ---------- blossom theme ----------
   A light ground like the day theme, but the background does the talking:
   a soft blush-to-apricot mesh instead of near-white. Text and chrome stay
   warm-neutral so the gradient is the only thing with colour in it. */
:root[data-theme="blossom"]{
  --bg-0:#fdeef0; --bg-1:#fdeef0; --bg-2:#fbe2e6;
  --surface:rgba(74,30,48,.055);
  --surface-2:rgba(74,30,48,.10);
  --line:rgba(74,30,48,.15);
  /* Ink is darker than a normal light theme's because the ground is not
     near-white: every value here clears WCAG against the most saturated
     bloom in the mesh, not just against the cream in the gaps. */
  --text:#332a2d; --text-2:#54454c; --text-3:#67555d;
  --accent:#a4305e; --accent-2:#c9622e; --accent-warm:#b2416f;
  --accent-rgb:164,48,94; --accent-2-rgb:201,98,46; --accent-warm-rgb:178,65,111;
  --ok:#2f8a68; --danger:#cf2340;
  --btn-bg:#241d20; --btn-fg:#fdf6f4;      /* the black pill from the reference */
  --heat-empty:rgba(74,30,48,.18); --heat-future:rgba(74,30,48,.08);
  --scrim:40,22,30;
  /* Declared once and reused by .aurora and .player so the two grounds can
     never drift apart. A custom property holds the whole layer list fine.
     Two things keep this vibrant rather than washed out:
     1. Each bloom fades to rgba() of ITS OWN hue at zero alpha. Fading to
        `transparent` means transparent BLACK, which greys the midpoint of
        every stop and is what made the first attempt look milky.
     2. The stops run to ~72-74% so neighbouring blooms actually overlap;
        at 60% they each died out early and the pale base showed through
        the seams across most of the screen. */
  --blossom-mesh:
    radial-gradient(94% 68% at  6% 12%, rgba(243,175,196,1) 0%, rgba(243,175,196,0) 74%),
    radial-gradient(88% 62% at 98% 26%, rgba(246,210,148,1) 0%, rgba(246,210,148,0) 72%),
    radial-gradient(100% 72% at 86% 99%, rgba(245,195,149,1) 0%, rgba(245,195,149,0) 74%),
    radial-gradient(82% 58% at 14% 97%, rgba(244,185,201,1) 0%, rgba(244,185,201,0) 72%),
    linear-gradient(160deg,#fbe3ec 0%, #fdedd9 52%, #fdf1e8 100%);
}
/* Four overlapping bloom points, cream in the gaps — the mesh reads as one
   wash rather than four circles because none of them reaches full opacity. */
:root[data-theme="blossom"] .aurora{background:var(--blossom-mesh)}
:root[data-theme="blossom"] .aurora::before{
  background:radial-gradient(circle,rgba(240,150,180,1),rgba(240,150,180,0) 68%);opacity:.42}
:root[data-theme="blossom"] .aurora::after{
  background:radial-gradient(circle,rgba(248,198,120,1),rgba(248,198,120,0) 68%);opacity:.42}
/* Shadows pick up the rose ground instead of the day theme's brown. */
:root[data-theme="blossom"] .tabbar-inner{background:rgba(255,250,248,.84);
  box-shadow:0 14px 38px -18px rgba(120,60,80,.32)}
:root[data-theme="blossom"] .mini{background:rgba(255,250,248,.92);
  box-shadow:0 14px 34px -16px rgba(120,60,80,.32)}
:root[data-theme="blossom"] .card .art,
:root[data-theme="blossom"] .row .art,
:root[data-theme="blossom"] .hero{box-shadow:0 12px 32px -14px rgba(120,60,80,.30)}
:root[data-theme="blossom"] .note{background:rgba(var(--accent-rgb),.07);
  border-color:rgba(var(--accent-rgb),.22);color:#8a2a53}
:root[data-theme="blossom"] .hero .tag{color:#ffd9e4;
  background:rgba(255,217,228,.18);border-color:rgba(255,217,228,.38)}

/* ---- blossom player ----
   Every other theme keeps the player a dark room. Blossom instead carries the
   mesh into it, so the whole surface has to be re-derived: the pinned light
   text, the dark scrim over the cover art, the white scrub thumb and the
   light-on-dark play button all assume a dark ground and invert here. */
:root[data-theme="blossom"] .player{
  --text:#3d3336; --text-2:#7b6b71; --text-3:#a3949a;
  --surface:rgba(92,44,58,.055); --surface-2:rgba(92,44,58,.095);
  --line:rgba(92,44,58,.13); --btn-bg:#241d20; --btn-fg:#fdf6f4;
  background:var(--blossom-mesh); color:#3d3336}
/* The cover art is scrimmed UP into the light rather than down into the dark.
   A flat near-white wash did that but flattened the mesh underneath with it,
   which is why the player looked washed out next to the rest of the theme.
   Laying the mesh itself over the art instead keeps the colour and still
   knocks the photo back — the blurred art reads as texture at 18%, and the
   86% mesh on top is what you actually see. */
:root[data-theme="blossom"] .player-bg img{opacity:.18}
:root[data-theme="blossom"] .player-bg::after{background:var(--blossom-mesh);opacity:.86}
:root[data-theme="blossom"] .cover{box-shadow:0 34px 80px -30px rgba(120,60,80,.55)}
/* A white thumb on a light track is invisible; both need to go dark. */
:root[data-theme="blossom"] .scrub input[type=range]::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,var(--accent) var(--pct,0%),rgba(92,44,58,.18) var(--pct,0%))}
:root[data-theme="blossom"] .scrub input[type=range]::-moz-range-track{background:rgba(92,44,58,.18)}
:root[data-theme="blossom"] .scrub input[type=range]::-webkit-slider-thumb{
  background:#241d20;box-shadow:0 2px 8px rgba(120,60,80,.45)}
:root[data-theme="blossom"] .scrub input[type=range]::-moz-range-thumb{background:#241d20}
/* .controls .play is background:var(--text) with a near-black glyph — with a
   dark --text that is a dark glyph on a dark disc. Use the button tokens. */
:root[data-theme="blossom"] .controls .play{
  background:var(--btn-bg);color:var(--btn-fg);
  box-shadow:0 12px 32px -8px rgba(120,60,80,.42)}
/* the player is always a dark room, whatever the hour */
.player{--text:#f4f1fb; --text-2:#b9b0d4; --text-3:#8b81ab;
        --surface:rgba(226,214,255,.09); --surface-2:rgba(226,214,255,.15);
        --line:rgba(255,225,210,.16); --btn-bg:#f4f1fb; --btn-fg:#191233;
        background:#120e1f; color:#f4f1fb}

/* ---------- ambient background ---------- */
.aurora{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(120% 76% at 50% -8%, #4a2f8c 0%, transparent 66%),
  radial-gradient(90% 55% at 8% 102%, #35205e 0%, transparent 62%),
  linear-gradient(180deg,var(--bg-1) 0%, var(--bg-0) 60%);}
.aurora::before,.aurora::after{
  content:'';position:absolute;width:70vmax;height:70vmax;border-radius:50%;
  filter:blur(80px);will-change:transform;
}
.aurora::before{background:radial-gradient(circle,#8b5cf6,transparent 64%);opacity:.34;top:-28vmax;left:-22vmax;animation:drift 28s var(--ease) infinite alternate}
.aurora::after{background:radial-gradient(circle,#c084fc,transparent 64%);opacity:.28;bottom:-32vmax;right:-26vmax;animation:drift 34s var(--ease) infinite alternate-reverse}
@keyframes drift{to{transform:translate3d(12vmax,8vmax,0) scale(1.15)}}
@media (prefers-reduced-motion:reduce){.aurora::before,.aurora::after{animation:none}}

/* ---------- app shell ---------- */
/* iOS standalone sizes the visual viewport to the CONTENT when the content is
   short: measured innerHeight was 813 on Saved (content 813) but 874 on
   Explore (content 4866). A position:fixed bar anchors to that shrunken
   viewport and rides up ~60px. The +1px trick failed because innerHeight
   shrank with it. Overshooting the tallest viewport pins innerHeight at its
   maximum on every page, so the bar lands identically everywhere. */
#app{min-height:calc(100% + 96px);padding-top:calc(var(--sat) + 8px);
     padding-bottom:calc(var(--tab-h) + var(--sab-gap) + 26px)}
.view{display:none;animation:fade .34s var(--ease)}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
.wrap{padding:0 20px;max-width:720px;margin:0 auto}

/* ---------- headers ---------- */
.greet{padding:22px 0 6px}
.greet .eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.greet h1{font-size:clamp(28px,8vw,38px);line-height:1.06;letter-spacing:-.03em;font-weight:700;margin-top:8px}
.greet h1 .soft{background:linear-gradient(100deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.greet p{color:var(--text-2);margin-top:10px;font-size:15px;line-height:1.5}

/* ---------- hero / continue card ---------- */
/* full-bleed hero: the image is the screen, like a real app's featured card */
.hero{position:relative;margin:calc(-1 * (var(--sat) + 8px)) -20px 8px;border-radius:0;overflow:hidden;
  min-height:min(64vh,530px);
  display:flex;align-items:flex-end;isolation:isolate;
  border:0;box-shadow:none}
@media(min-width:600px){
  .hero{margin:22px 0 8px;border-radius:var(--r-xl);min-height:470px;
    border:1px solid var(--line);box-shadow:0 24px 60px -22px rgba(0,0,0,.85)}
}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  object-position:50% 32%;                /* keep faces and horizons out of the crop */
  transform:scale(1.04);transition:transform .7s var(--ease)}
.hero:active img{transform:scale(1.09)}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,10,26,.55) 0%,rgba(14,10,26,.12) 26%,
    rgba(18,12,34,.30) 46%,rgba(16,11,30,.80) 76%,rgba(14,10,26,.97) 100%)}
.hero-body{padding:22px 20px 24px;width:100%}
.hero-top{position:absolute;top:calc(var(--sat) + 20px);left:20px;right:20px;z-index:2}
.hero-eyebrow{font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:650;
  color:rgba(255,255,255,.72);text-shadow:0 1px 12px rgba(0,0,0,.6)}
.hero-name{font-size:clamp(27px,7.6vw,34px);letter-spacing:-.03em;font-weight:700;
  margin-top:7px;line-height:1.05;text-shadow:0 2px 22px rgba(0,0,0,.55)}
@media(min-width:600px){.hero-top{top:24px;left:26px}}
.hero .tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  background:rgba(var(--accent-rgb),.14);border:1px solid rgba(var(--accent-rgb),.28);
  padding:5px 11px;border-radius:999px;backdrop-filter:blur(8px)}
.hero h2{font-size:clamp(26px,7.4vw,34px);letter-spacing:-.03em;margin:13px 0 7px;
  font-weight:700;line-height:1.08;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.hero .meta{font-size:13.5px;color:rgba(255,255,255,.72);display:flex;align-items:center;gap:8px}
.hero .play-cta{display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  padding:13px 24px;border-radius:999px;background:#fff;color:#140a06;
  font-size:14.5px;font-weight:650;letter-spacing:-.01em;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.6);transition:transform .2s var(--ease)}
.hero:active .play-cta{transform:scale(.97)}
.hero .play-cta .material-icons-round{font-size:19px}
.hero .bar{height:3px;background:rgba(255,255,255,.16);border-radius:2px;margin-top:14px;overflow:hidden}
.hero .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:2px}


/* Text sitting on top of imagery is always light — it lives over a dark scrim,
   so it must not follow the day/night text colour. */
.hero, .hero-top, .hero h2, .hero-name{color:#fff}
:root[data-theme="light"] .hero .tag{color:#d9c2ff;
  background:rgba(217,194,255,.18);border-color:rgba(217,194,255,.38)}
:root:is([data-theme="light"],[data-theme="blossom"]) .hero .play-cta{background:#fff;color:#160f28}
:root:is([data-theme="light"],[data-theme="blossom"]) .card .dur,
:root:is([data-theme="light"],[data-theme="blossom"]) .card .lock{color:#fff}

/* ---------- section ---------- */
.section{margin-top:30px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px;gap:12px}
.section-head h3{font-size:19px;letter-spacing:-.02em;font-weight:650}
.section-head .count{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.section-sub{font-size:13.5px;color:var(--text-3);margin-bottom:14px}

/* ---------- horizontal rail ---------- */
.rail{display:flex;gap:13px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:2px 20px 6px;margin:0 -20px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;flex:0 0 auto}

.card{width:158px;position:relative}
.card .art{position:relative;width:158px;height:200px;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);background:var(--bg-2);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.9);transition:transform .32s var(--ease)}
.card:active .art{transform:scale(.955)}
.card .art img{width:100%;height:100%;object-fit:cover;object-position:50% 36%}
.card .art::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(14,10,26,.75) 100%)}
.card .dur{position:absolute;left:9px;bottom:9px;z-index:2;font-size:11px;font-weight:650;
  color:#fff;background:rgba(18,12,34,.62);backdrop-filter:blur(10px);
  padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.14)}
.card .lock{position:absolute;right:9px;top:9px;z-index:2;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;background:rgba(18,12,34,.64);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);font-size:13px}
.card h4{font-size:14px;font-weight:600;margin-top:10px;line-height:1.32;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card span.cat{display:block;font-size:11.5px;color:var(--text-3);margin-top:3px}
.card .prog{height:2px;background:rgba(255,255,255,.14);border-radius:2px;margin-top:8px;overflow:hidden}
.card .prog i{display:block;height:100%;background:var(--accent);border-radius:2px}

/* ---------- list rows ---------- */
.row{display:flex;align-items:center;gap:14px;padding:11px;border-radius:var(--r-md);
  transition:background .2s var(--ease)}
.row:active{background:var(--surface)}
.row .art{width:60px;height:60px;border-radius:13px;overflow:hidden;flex:0 0 auto;
  border:1px solid var(--line);position:relative;background:var(--bg-2)}
.row .art img{width:100%;height:100%;object-fit:cover}
.row .info{min-width:0;flex:1}
.row h4{font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.row .sub{font-size:12.5px;color:var(--text-3);margin-top:3px;display:flex;gap:7px;align-items:center}
.row .chev{color:var(--text-3);font-size:18px;flex:0 0 auto}
.pill-lock{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-warm);border:1px solid rgba(var(--accent-warm-rgb),.32);
  background:rgba(var(--accent-warm-rgb),.1);padding:2px 7px;border-radius:999px}


/* ---------- wide media cards (Explore) ---------- */
.mcard{position:relative;display:flex;align-items:flex-end;height:132px;
  border-radius:22px;overflow:hidden;margin-bottom:12px;isolation:isolate;
  box-shadow:0 12px 30px -16px rgba(18,12,32,.5)}
.mcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 38%;z-index:-2;transition:transform .6s var(--ease)}
.mcard:active img{transform:scale(1.05)}
.mcard::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(16,10,30,.80) 0%,rgba(16,10,30,.44) 54%,rgba(16,10,30,.08) 100%)}
.mcard-body{padding:16px 88px 16px 18px;width:100%}
.mcard h4{font-size:17px;font-weight:650;letter-spacing:-.02em;color:#fff;line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mcard .msub{font-size:12.5px;color:rgba(255,255,255,.76);margin-top:6px;
  display:flex;align-items:center;gap:7px}
.mcard .mplay{position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.96);color:#1a1030;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.5);transition:transform .2s var(--ease)}
.mcard:active .mplay{transform:translateY(-50%) scale(.92)}
.mcard .mplay .material-icons-round{font-size:24px;margin-left:2px}
.mcard .mlock{background:rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(8px)}

/* ---------- chips ---------- */
.chips{display:flex;gap:9px;overflow-x:auto;padding:2px 20px 4px;margin:0 -20px 18px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:550;
  background:var(--surface);border:1px solid var(--line);color:var(--text-2);
  transition:all .22s var(--ease);white-space:nowrap}
.chip.on{background:var(--btn-bg);color:var(--btn-fg);border-color:transparent;font-weight:650}

/* ---------- search ---------- */
.search{position:relative;margin:6px 0 18px}
.search input{width:100%;padding:14px 16px 14px 44px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);font-size:15px;
  transition:border-color .22s var(--ease),background .22s var(--ease)}
.search input:focus{outline:none;border-color:rgba(var(--accent-rgb),.5);background:var(--surface-2)}
.search input::placeholder{color:var(--text-3)}
.search .ico{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:19px}

/* ---------- tab bar ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:0 14px var(--sab-gap);pointer-events:none}
.tabbar-inner{display:flex;max-width:520px;margin:0 auto;pointer-events:auto;
  background:rgba(38,30,60,.74);backdrop-filter:blur(24px) saturate(1.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid var(--line);border-radius:22px;padding:7px;
  box-shadow:0 18px 44px -16px rgba(0,0,0,.9)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;
  border-radius:15px;color:var(--text-3);transition:color .22s var(--ease),background .22s var(--ease)}
.tab .material-icons-round{font-size:22px}
.tab span.lbl{font-size:10px;font-weight:600;letter-spacing:.03em}
.tab.on{color:var(--accent);background:var(--surface-2)}

/* ---------- mini player ---------- */
.mini{visibility:hidden;position:fixed;left:14px;right:14px;bottom:calc(var(--tab-h) + var(--sab-gap) + 12px);z-index:55;
  max-width:520px;margin:0 auto;display:none;align-items:center;gap:12px;padding:9px 12px 9px 9px;
  background:rgba(42,33,66,.84);backdrop-filter:blur(24px) saturate(1.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid var(--line);border-radius:19px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.9);
  animation:rise .38s var(--ease)}
.mini.on{display:flex;visibility:visible}
@keyframes rise{from{transform:translate3d(0,20px,0);opacity:0}to{transform:none;opacity:1}}
.mini .art{width:42px;height:42px;border-radius:11px;overflow:hidden;flex:0 0 auto;border:1px solid var(--line)}
.mini .art img{width:100%;height:100%;object-fit:cover}
.mini .info{flex:1;min-width:0}
.mini h5{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .sub{font-size:11.5px;color:var(--text-3);margin-top:1px}
.mini button.pp{width:38px;height:38px;border-radius:50%;background:var(--btn-bg);color:var(--btn-fg);
  display:grid;place-items:center;flex:0 0 auto}
.mini button.pp .material-icons-round{font-size:22px}
.mini .line{position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.mini .line i{display:block;height:100%;background:var(--accent);border-radius:2px}

/* ---------- full player ---------- */
.player{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;
  /* No --bg-0 here: it would override the dark ground set above, and the
     player pins its text light. With no cover art to scrim it, a light theme
     rendered white text on a white sheet. */
  transform:translate3d(0,100%,0);
  transition:transform .46s var(--ease);visibility:hidden}
.player.on{transform:none;visibility:visible}
.player-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.player-bg img{width:100%;height:100%;object-fit:cover;filter:blur(58px) saturate(1.5);transform:scale(1.5);opacity:.42}
.player-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,10,26,.55),rgba(14,10,26,.94))}
.player-inner{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;
  padding:calc(var(--sat) + 10px) 26px calc(var(--sab) + 26px)}
.player-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.player-top button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);color:var(--text)}
.player-top .ctx{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.cover-wrap{flex:1;display:grid;place-items:center;padding:16px 0;min-height:0}
.cover{width:min(72vw,300px);aspect-ratio:1;border-radius:28px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 34px 80px -26px rgba(0,0,0,.95);
  transition:transform .6s var(--ease)}
.cover img{width:100%;height:100%;object-fit:cover}
.player.playing .cover{transform:scale(1.03)}
.player-meta{text-align:center;margin-bottom:20px}
.player-meta .cat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:650}
.player-meta h2{font-size:25px;letter-spacing:-.025em;font-weight:680;margin-top:9px;line-height:1.2}
.player-meta p{font-size:14px;color:var(--text-2);margin-top:9px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.scrub{margin-bottom:6px}
.scrub input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:22px;background:transparent}
.scrub input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent) var(--pct,0%),rgba(255,255,255,.16) var(--pct,0%))}
.scrub input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.16)}
.scrub input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;
  border-radius:50%;background:#fff;margin-top:-5px;box-shadow:0 2px 8px rgba(0,0,0,.6)}
.scrub input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff}
.times{display:flex;justify-content:space-between;font-size:12px;color:var(--text-3);
  font-variant-numeric:tabular-nums;margin-top:-2px}
.controls{display:flex;align-items:center;justify-content:center;gap:26px;margin:22px 0 18px}
.controls button{color:var(--text);display:grid;place-items:center;transition:transform .2s var(--ease)}
.controls button:active{transform:scale(.9)}
.controls .skip .material-icons-round{font-size:33px}
.controls .play{width:70px;height:70px;border-radius:50%;background:var(--text);color:#140a06;
  box-shadow:0 12px 32px -8px rgba(255,255,255,.34)}
.controls .play .material-icons-round{font-size:37px}
/* Three unequal-width controls: space-between pushes the middle one off
   centre. A 1fr-auto-1fr grid keeps Sleep optically centred regardless of
   how wide the speed/loop labels get. */
.player-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.player-foot > :nth-child(1){justify-self:start}
.player-foot > :nth-child(2){justify-self:center}
.player-foot > :nth-child(3){justify-self:end}
.player-foot button{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  color:var(--text-2);padding:9px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.player-foot button.on{color:var(--accent);border-color:rgba(var(--accent-rgb),.4)}
.player-foot .material-icons-round{font-size:18px}

/* ---------- sheets / modals ---------- */
.scrim{position:fixed;inset:0;z-index:300;background:rgba(4,4,9,.72);
  backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.scrim.on{opacity:1;visibility:visible}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:310;max-height:92vh;overflow-y:auto;
  background:var(--bg-1);border-radius:var(--r-xl) var(--r-xl) 0 0;border-top:1px solid var(--line);
  padding:12px 24px calc(var(--sab) + 28px);
  transform:translate3d(0,100%,0);visibility:hidden;
  transition:transform .42s var(--ease),visibility .42s var(--ease);
  max-width:560px;margin:0 auto}
.sheet.on{transform:none;visibility:visible}
.grabber{width:38px;height:4px;border-radius:2px;background:rgba(255,255,255,.2);margin:0 auto 20px}
.sheet h2{font-size:23px;letter-spacing:-.025em;font-weight:680;margin-bottom:8px}
.sheet .lede{font-size:14.5px;color:var(--text-2);line-height:1.55;margin-bottom:22px}

/* ---------- forms ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:14px 15px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);font-size:16px;
  transition:border-color .22s var(--ease),background .22s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:rgba(var(--accent-rgb),.55);background:var(--surface-2)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:15px;
  border-radius:15px;font-size:15.5px;font-weight:650;letter-spacing:-.01em;
  background:var(--btn-bg);color:var(--btn-fg);transition:transform .18s var(--ease),opacity .2s}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5}
.btn.accent{background:linear-gradient(100deg,var(--accent),var(--accent-2));color:#140a06}
.btn.ghost{background:var(--surface);border:1px solid var(--line);color:var(--text)}
.btn.danger{background:rgba(255,107,125,.12);border:1px solid rgba(255,107,125,.3);color:var(--danger)}
.alt{text-align:center;font-size:14px;color:var(--text-2);margin-top:18px}
.alt b{color:var(--accent);font-weight:650}
.err{background:rgba(255,107,125,.1);border:1px solid rgba(255,107,125,.28);color:#ffc9d2;
  padding:12px 14px;border-radius:13px;font-size:13.5px;margin-bottom:14px;line-height:1.45}
.note{background:rgba(var(--accent-rgb),.09);border:1px solid rgba(var(--accent-rgb),.24);color:#e3d5ff;
  padding:12px 14px;border-radius:13px;font-size:13px;margin-bottom:16px;line-height:1.5}

/* ---------- paywall ---------- */
.pw-badge{width:60px;height:60px;border-radius:19px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#140a06}
.pw-badge .material-icons-round{font-size:31px}
.perks{list-style:none;margin:20px 0 24px}
.perks li{display:flex;align-items:flex-start;gap:12px;padding:10px 0;font-size:14.5px;color:var(--text-2)}
.perks .material-icons-round{font-size:20px;color:var(--ok);flex:0 0 auto;margin-top:1px}
.price{display:flex;align-items:baseline;gap:8px;justify-content:center;margin-bottom:18px}
.price .amt{font-size:38px;font-weight:700;letter-spacing:-.035em}
.price .per{font-size:14px;color:var(--text-3)}

/* ---------- profile ---------- */
.avatar{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#140a06;
  font-size:29px;font-weight:700;margin:0 auto 14px;letter-spacing:-.02em}
.prof-head{text-align:center;padding:14px 0 24px}
.prof-head h2{font-size:23px;letter-spacing:-.025em;font-weight:680}
.prof-head .mail{font-size:13.5px;color:var(--text-3);margin-top:5px}
.plan-tag{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:6px 13px;
  border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.plan-tag.free{background:var(--surface);border:1px solid var(--line);color:var(--text-2)}
.plan-tag.premium{
  /* brushed-metal read: light-dark-light sweep plus an inset top highlight */
  background:linear-gradient(105deg,#e7d4ff 0%,#b892ff 22%,#7b46d4 48%,#a072f0 66%,#ded0ff 88%,#9a68e8 100%);
  color:#24103f;text-shadow:0 1px 0 rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.30);
  box-shadow:0 6px 18px -8px rgba(124,58,237,.75), inset 0 1px 0 rgba(255,255,255,.55),
             inset 0 -1px 0 rgba(40,10,80,.35)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:26px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 12px;text-align:center}
.stat .n{font-size:25px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat .l{font-size:11px;color:var(--text-3);margin-top:4px;font-weight:550}
.menu{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-bottom:16px}
.menu button{display:flex;align-items:center;gap:14px;width:100%;padding:15px 17px;
  border-bottom:1px solid var(--line);font-size:14.5px;text-align:left;transition:background .2s}
.menu button:last-child{border-bottom:0}
.menu button:active{background:var(--surface-2)}
.menu button .material-icons-round{font-size:20px;color:var(--text-3)}
.menu button .chev{margin-left:auto;color:var(--text-3);font-size:18px}

/* ---------- misc ---------- */
.empty{text-align:center;padding:56px 24px 28px;color:var(--text-3)}
#v-favs .wrap, #v-profile .wrap{padding-bottom:16px}
.empty .material-icons-round{font-size:44px;opacity:.4;margin-bottom:14px}
.empty p{font-size:14.5px;line-height:1.55}
.skel{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);
  background-size:200% 100%;animation:sh 1.4s infinite;border-radius:var(--r-md)}
@keyframes sh{to{background-position:-200% 0}}
.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 76px);transform:translate3d(-50%,12px,0);
  z-index:400;background:rgba(44,34,70,.95);backdrop-filter:blur(20px);border:1px solid var(--line);
  color:var(--text);padding:12px 20px;border-radius:14px;font-size:14px;font-weight:550;
  opacity:0;visibility:hidden;transition:all .3s var(--ease);max-width:88vw;text-align:center}
.toast.on{opacity:1;visibility:visible;transform:translate3d(-50%,0,0)}
.spin{width:17px;height:17px;border:2px solid rgba(18,12,32,.28);border-top-color:#140a06;
  border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.hide{display:none !important}

@media(min-width:640px){
  .card,.card .art{width:180px}
  .card .art{height:228px}
}

/* ---------- sleep timer options ---------- */
.opts{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.opt{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:15px 16px;border-radius:14px;font-size:15px;font-weight:550;text-align:left;
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.opt:active{background:var(--surface-2)}
.opt .tick{font-size:19px;color:var(--accent);opacity:0;transition:opacity .2s var(--ease)}
.opt.on{border-color:rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.09)}
.opt.on .tick{opacity:1}
.opt.off{margin-top:10px;justify-content:center;color:var(--danger);
  background:rgba(255,107,125,.1);border-color:rgba(255,107,125,.28)}

/* three footer controls need tighter padding than two */
.player-foot button{flex:0 1 auto;padding:9px 13px}
.player-foot #pTimerLbl{font-variant-numeric:tabular-nums;min-width:34px;text-align:left}

/* ---------- add to home screen ---------- */
.install{position:relative;display:flex;gap:14px;align-items:flex-start;margin:20px 0 4px;
  padding:16px 44px 16px 16px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.13),rgba(var(--accent-2-rgb),.08));
  border:1px solid rgba(var(--accent-rgb),.28);
  transition:opacity .26s var(--ease),transform .26s var(--ease)}
.install[hidden]{display:none}
.install-ic{width:42px;height:42px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(var(--accent-rgb),.18);color:var(--accent)}
.install-ic .material-icons-round{font-size:22px}
.install-body h4{font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.install-body p{font-size:13px;color:var(--text-2);margin-top:5px;line-height:1.5}
.install-body p b{color:var(--text);font-weight:650}
.install-x{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;color:var(--text-3);transition:background .2s,color .2s}
.install-x:hover{background:var(--surface-2);color:var(--text)}
.install-x .material-icons-round{font-size:17px}
.install-go{margin-top:11px;padding:9px 18px;border-radius:11px;font-size:13.5px;font-weight:650;
  background:var(--text);color:#140a06}
.install-go[hidden]{display:none}
.plan-tag.inner{
  background:linear-gradient(105deg,#fdfaff 0%,#e6d6ff 18%,#b491f5 46%,#d8c2ff 62%,#f4ecff 84%,#c4a5f2 100%);
  color:#24103f;text-shadow:0 1px 0 rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 6px 18px -8px rgba(180,145,245,.8), inset 0 1px 0 rgba(255,255,255,.85),
             inset 0 -1px 0 rgba(70,35,120,.28)}
.install-go[hidden]{display:none}
a.install-go{display:inline-block;text-align:center}
.install-alt{font-size:11.5px !important;color:var(--text-3) !important;margin-top:9px !important;line-height:1.5}
.install-alt[hidden]{display:none}

/* ---------- appearance switch ---------- */
.seg-wrap{margin-bottom:16px}
.seg-label{font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:8px}
.seg{display:flex;gap:4px;padding:4px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line)}
.seg button{flex:1;padding:10px 6px;border-radius:11px;font-size:13.5px;font-weight:600;white-space:nowrap;
  color:var(--text-2);transition:background .2s var(--ease),color .2s var(--ease)}
.seg button.on{background:var(--btn-bg);color:var(--btn-fg)}

/* ---------- completion moment ---------- */
.done-ring{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;
  animation:pop .5s var(--ease) both}
.done-ring .material-icons-round{font-size:34px}
@keyframes pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.done-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 20px}
.done-stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:15px 10px;text-align:center}
.done-stat b{display:block;font-size:24px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.done-stat span{font-size:11px;color:var(--text-3);margin-top:3px;display:block}
.week-dots{display:flex;gap:6px;justify-content:center;margin:0 0 18px}
.week-dots i{width:9px;height:9px;border-radius:50%;background:var(--surface-2);
  border:1px solid var(--line);display:block}
.week-dots i.on{background:var(--accent);border-color:transparent}
.ms-card{background:linear-gradient(120deg,rgba(var(--accent-rgb),.16),rgba(var(--accent-2-rgb),.10));
  border:1px solid rgba(var(--accent-rgb),.34);border-radius:var(--r-md);padding:16px;margin-bottom:18px}
.ms-card h4{font-size:15.5px;font-weight:650;display:flex;align-items:center;gap:8px}
.ms-card p{font-size:13.5px;color:var(--text-2);margin-top:6px;line-height:1.5}
.ms-card .won{margin-top:10px;font-size:12.5px;color:var(--accent);font-weight:600}

/* ---------- heatmap ---------- */
.heat{display:grid;grid-template-rows:repeat(7,13px);grid-auto-flow:column;
  grid-auto-columns:13px;justify-content:start;gap:4px;
  margin:4px 0 6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.heat::-webkit-scrollbar{display:none}
.heat i{width:13px;height:13px;border-radius:4px;background:var(--heat-empty);display:block}
.heat i.pad{background:transparent}
/* days not yet reached — visible but clearly empty */
.heat i.future{background:var(--heat-future)}
.heat i.l1,.heat-legend i.l1{background:rgba(var(--accent-rgb),.30)}
.heat i.l2,.heat-legend i.l2{background:rgba(var(--accent-rgb),.55)}
.heat i.l3,.heat-legend i.l3{background:rgba(var(--accent-rgb),.80)}
.heat i.l4,.heat-legend i.l4{background:var(--accent)}
.heat-legend{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-3);margin-bottom:20px}
.heat-legend i{width:11px;height:11px;border-radius:3px;display:block}
.goal-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.goal-row .lbl{font-size:13px;color:var(--text-2);font-weight:600}
.goal-row select{padding:8px 12px;border-radius:11px;background:var(--surface);
  border:1px solid var(--line);color:var(--text);font-size:13px}

/* ---------- sub-page header ---------- */
.sub-head{display:flex;align-items:center;gap:12px;padding:22px 0 18px}
.sub-head h1{font-size:26px;letter-spacing:-.03em;font-weight:700}
.icon-back{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);color:var(--text-2);flex:0 0 auto;
  transition:background .2s var(--ease),color .2s var(--ease)}
.icon-back:active{background:var(--surface-2);color:var(--text)}

/* ---------- grouped settings list ---------- */
.set-group{margin-bottom:24px}
.set-label{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);margin:0 4px 9px}
.set-note{font-size:12.5px;color:var(--text-3);margin:9px 4px 0;line-height:1.5}

/* profile header gets an action button */
.prof-top{display:flex;justify-content:flex-end;padding-top:14px}
.prof-top .icon-back{border-radius:50%}


/* ---------- streak flame ---------- */
.fire{display:inline-flex;align-items:center;justify-content:center;line-height:1;
  color:var(--text-3);transition:color .3s var(--ease),transform .3s var(--ease)}
.fire .material-icons-round{font-size:1em}
.fire.lit{color:#ff7a2f;
  /* warm glow deliberately breaks the purple palette — it should read as reward */
  filter:drop-shadow(0 0 7px rgba(255,122,47,.55));
  /* A flame dances from its base, not its middle. */
  transform-origin:50% 86%;
  animation:flame 2.6s ease-in-out infinite}
.streak-n{display:flex;align-items:center;justify-content:center;gap:5px}
.streak-n .fire{font-size:21px}
.fire.big{font-size:26px;margin-right:8px}
/* Stops sit at irregular intervals on purpose: evenly spaced keyframes read as
   a mechanical pulse, uneven ones read as flicker. Scale, lean, glow and hue
   all peak at slightly different moments so no single beat dominates. */
@keyframes flame{
  0%  {transform:scale(1)    rotate(0deg);    filter:drop-shadow(0 0 6px  rgba(255,122,47,.50)); color:#ff7a2f}
  12% {transform:scale(1.07) rotate(-2.5deg); filter:drop-shadow(0 0 11px rgba(255,150,60,.72)); color:#ff9333}
  26% {transform:scale(1.02) rotate(1.5deg);  filter:drop-shadow(0 0 7px  rgba(255,122,47,.55)); color:#ff7a2f}
  41% {transform:scale(1.12) rotate(-1deg);   filter:drop-shadow(0 0 15px rgba(255,168,72,.90)); color:#ffa63d}
  55% {transform:scale(1.03) rotate(2.5deg);  filter:drop-shadow(0 0 8px  rgba(255,122,47,.60)); color:#ff8630}
  70% {transform:scale(1.09) rotate(-1.8deg); filter:drop-shadow(0 0 13px rgba(255,150,60,.80)); color:#ff9a35}
  86% {transform:scale(1.01) rotate(.8deg);   filter:drop-shadow(0 0 7px  rgba(255,122,47,.52)); color:#ff7a2f}
  100%{transform:scale(1)    rotate(0deg);    filter:drop-shadow(0 0 6px  rgba(255,122,47,.50)); color:#ff7a2f}
}
.streak-note .fire{font-size:15px;vertical-align:-2px}
@media (prefers-reduced-motion:reduce){.fire.lit{animation:none}}

/* ---------- compact stat panels ---------- */
.row-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 12px}
.row-head h3{font-size:16.5px;font-weight:650;letter-spacing:-.02em;display:flex;align-items:center;gap:6px}
.row-head select{padding:8px 12px;border-radius:11px;background:var(--surface);
  border:1px solid var(--line);color:var(--text-2);font-size:13px}
.info{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  color:var(--text-3);transition:color .2s var(--ease)}
.info .material-icons-round{font-size:17px}
.info:active{color:var(--accent)}
.goal-line{display:flex;align-items:center;gap:11px;font-size:13px;color:var(--text-3)}
.goal-line .week-dots{margin:0}
.chips-row{display:flex;gap:8px;margin-top:14px}
.mini-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);font-size:12.5px;color:var(--text-2);font-weight:550}
.mini-chip .material-icons-round{font-size:15px}
.mini-chip .fire{font-size:15px}