:root{
  /* ── REFERENCE-STYLE: muted indigo base (desaturated so it doesn't vibrate on cheaper screens), white focal card pops, warm gold accent ── */
  --bg:#232046;--s1:#2e2a55;--s2:#373163;--s3:#433c75;
  --border:#4a4477;--border-hi:#6f6799;
  /* ── text: white + soft lavender secondaries (high contrast on indigo) ── */
  --text:#ffffff;--muted:#d4cfe6;--dim:#9c98b8;
  /* ── warm accent — the one "pop" colour: primary CTAs, capture FAB, active nav, streak ── */
  --accent:#ffce47;--accent-edge:#d9a400;--accent-ink:#3a2f8f;--accent-glow:rgba(255,206,71,.35);
  /* ── focal card (the white hero card) ── */
  --focal:#171331;--focal-ink:#f4f1ff;--focal-sub:#b0a6e8;--focal-chip:rgba(139,126,248,.2);
  /* ── theme-aware chrome tokens (overridden in light mode) ── */
  --bg-grad-top:#2c2858;--bg-grad-bot:#1d1a38;
  --header-bg:rgba(43,35,112,.9);--scrim:rgba(18,12,52,.8);
  --shadow-sm:0 2px 10px rgba(18,12,52,.4);--shadow-md:0 8px 24px rgba(18,12,52,.45);--shadow-lg:0 16px 40px rgba(18,12,52,.5);
  --card-lift:rgba(255,255,255,.05);
  /* ── brand: vivid + saturated ── */
  --primary:#c4aaff;--primary-glow:rgba(196,170,255,.42);
  --pink:#d484fc;--pink-glow:rgba(212,132,252,.28);
  --work:#00ffd2;--work-glow:rgba(0,255,210,.32);
  --life:#ffd644;--life-glow:rgba(255,214,68,.32);
  --fitness:#ff6a3d;--fitness-glow:rgba(255,106,61,.32);
  --red:#ff3a5e;--green:#18f07a;--orange:#ffaa44;--green-glow:rgba(24,240,122,.5);--green-ink:#052b13;
  /* ── priority: P1=urgent-coral, P2=lavender, P3=muted ── */
  --p1:#ff6a3d;--p2:#c4aaff;--p3:#9490cc;
  /* ── pillar border tokens (coloured left/accent borders by domain) ── */
  --border-work:rgba(0,255,210,.55);
  --border-life:rgba(255,214,68,.55);
  --border-fitness:rgba(255,106,61,.55);
  --border-primary:rgba(196,170,255,.55);
  /* ── type ── */
  --font:'Poppins','Outfit',sans-serif;--mono:'DM Mono',monospace;
  --radius:18px;--radius-sm:14px;--radius-xs:10px;
  /* ── design-system tokens ── */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
  --radius-md:16px;--radius-lg:22px;--radius-xl:28px;
  --fs-micro:.62rem;--fs-xs:.72rem;--fs-sm:.85rem;--fs-base:.95rem;--fs-lg:1.18rem;--fs-xl:1.42rem;--fs-hero:1.75rem;--fs-display:2.2rem;
  --weight-reg:500;--weight-semi:600;--weight-med:700;--weight-bold:800;--weight-black:900;
  --lh-tight:1.1;--lh-snug:1.25;--lh-normal:1.45;--track-caps:1.5px;--track-hero:-.5px;
  --focus-ring:0 0 0 2px var(--bg),0 0 0 4px var(--primary);
  --tap-min:44px;
  /* ── tier decay: hero→ghost attention ladder ── */
  /*    Hero=1 per view; Primary=active; Secondary=relevant; Tertiary=peripheral; Ghost=deprioritised. */
  --tier-hero-opacity:1;       --tier-hero-sat:1.25;    --tier-hero-scale:1.02;
  --tier-primary-opacity:1;    --tier-primary-sat:1.1;  --tier-primary-scale:1;
  --tier-secondary-opacity:.80;--tier-secondary-sat:.72;--tier-secondary-scale:1;
  --tier-tertiary-opacity:.55; --tier-tertiary-sat:.44; --tier-tertiary-scale:.99;
  --tier-ghost-opacity:.32;    --tier-ghost-sat:.18;    --tier-ghost-scale:.97;
}
/* ── LIGHT THEME — warm paper, high-contrast ink; keeps the same vivid accents ── */
html[data-theme="light"]{
  --bg:#f4f1fb;--s1:#ffffff;--s2:#f0ecfb;--s3:#e5dff7;
  --border:#d8d0ef;--border-hi:#b9aee4;
  --text:#1a1535;--muted:#4a4470;--dim:#6f6896;
  --primary:#7c5cff;--primary-glow:rgba(124,92,255,.22);
  --pink:#c44ae8;--pink-glow:rgba(196,74,232,.18);
  --work:#00b89a;--work-glow:rgba(0,184,154,.18);
  --life:#d99400;--life-glow:rgba(217,148,0,.2);
  --fitness:#e8542a;--fitness-glow:rgba(232,84,42,.2);
  --red:#e02046;--green:#0fa85a;--orange:#e08a1a;--green-glow:rgba(15,168,90,.45);--green-ink:#ffffff;
  --p1:#e8542a;--p2:#7c5cff;--p3:#6f6896;
  --border-work:rgba(0,184,154,.5);--border-life:rgba(217,148,0,.5);
  --border-fitness:rgba(232,84,42,.5);--border-primary:rgba(124,92,255,.5);
  --bg-grad-top:#e7defb;--bg-grad-bot:#f4f1fb;
  --header-bg:rgba(244,241,251,.92);--scrim:rgba(40,30,70,.34);
  --shadow-sm:0 2px 8px rgba(80,60,140,.1);--shadow-md:0 6px 22px rgba(80,60,140,.13);--shadow-lg:0 12px 40px rgba(80,60,140,.18);
  --card-lift:rgba(124,92,255,.04);
  --accent:#f5b400;--accent-edge:#c98e00;--accent-ink:#3a2f8f;--accent-glow:rgba(245,180,0,.28);
  --focal:#f2eefc;--focal-ink:#2a2350;--focal-sub:#6a628f;--focal-chip:#e4defb;
}
/* ── accent variants — user-picked "vibe" colour; gold is default ── */
html[data-accent="coral"]{--accent:#ff8a5c;--accent-edge:#d95f2e;--accent-ink:#4a1f0c;--accent-glow:rgba(255,138,92,.35)}
html[data-accent="mint"]{--accent:#4ce0b3;--accent-edge:#1fae85;--accent-ink:#083b2c;--accent-glow:rgba(76,224,179,.35)}
html[data-accent="sky"]{--accent:#6fc3ff;--accent-edge:#3a92d9;--accent-ink:#0c2f4a;--accent-glow:rgba(111,195,255,.35)}
html[data-accent="pink"]{--accent:#ff9ad5;--accent-edge:#d966ab;--accent-ink:#4a0c33;--accent-glow:rgba(255,154,213,.35)}
/* ── a11y baseline ── */
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:6px}
button:focus-visible,[role="button"]:focus-visible{box-shadow:var(--focus-ring)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .particle,.xp-float,.ns-glow,.chain-fire,.chain-berserk,.flow-pulse,.timer-pulse-run{animation:none !important}
}
@media (prefers-reduced-motion: no-preference){
  .sr-motion{animation-duration:.3s}
}
/* cfg-driven a11y + calm-mode classes (body-level, set from App effect) */
body.reduced-motion *,body.reduced-motion *::before,body.reduced-motion *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
body.reduced-motion .particle,body.reduced-motion .xp-float,body.reduced-motion .ns-glow,body.reduced-motion .chain-fire,body.reduced-motion .chain-berserk,body.reduced-motion .flow-pulse,body.reduced-motion .timer-pulse-run,body.reduced-motion .bar-shimmer,body.reduced-motion .hb-celebrate,body.reduced-motion .hb-celebrate::after,body.reduced-motion .done-shimmer::after,body.reduced-motion .done-pop{animation:none !important}
/* Mute rewards: hide celebratory overlays but keep state updates (no particles, no combo popups, no goal popups) */
body.mute-rewards .particle,body.mute-rewards .combo-in,body.mute-rewards .combo-out,body.mute-rewards .xp-float{display:none !important}
/* Low-spoon: collapse vertical density, soften contrast on non-hero sections, hide decorative flourishes */
body.low-spoon .lowspoon-hide{display:none !important}
body.low-spoon .lowspoon-dim{opacity:.55}
body.low-spoon main section,body.low-spoon main [data-section]{margin-bottom:10px !important}
/* ── tier decay utilities: apply to section/card wrappers ── */
.tier-hero{opacity:var(--tier-hero-opacity);filter:saturate(var(--tier-hero-sat));transform:scale(var(--tier-hero-scale));transform-origin:center top;transition:opacity .3s,filter .3s,transform .3s}
.tier-primary{opacity:var(--tier-primary-opacity);filter:saturate(var(--tier-primary-sat));transition:opacity .3s,filter .3s}
.tier-secondary{opacity:var(--tier-secondary-opacity);filter:saturate(var(--tier-secondary-sat));transition:opacity .3s,filter .3s}
.tier-tertiary{opacity:var(--tier-tertiary-opacity);filter:saturate(var(--tier-tertiary-sat));transition:opacity .3s,filter .3s}
.tier-ghost{opacity:var(--tier-ghost-opacity);filter:saturate(var(--tier-ghost-sat));transition:opacity .3s,filter .3s}
/* Hover lift restores attention on demand — doesn't steal it passively */
.tier-secondary:hover,.tier-secondary:focus-within{opacity:1;filter:saturate(.95)}
.tier-tertiary:hover,.tier-tertiary:focus-within{opacity:.92;filter:saturate(.75)}
.tier-ghost:hover,.tier-ghost:focus-within{opacity:.8;filter:saturate(.5)}
/* Ambient-glow suppression: kill passive glows, keep reward/state glows.
   Opt into passive glow with .hero-glow (reserved for the ONE hero slot per view). */
body.calm-chrome .ambient-glow{box-shadow:none !important}
/* One hero slot per view — soft pulse only if motion allowed */
@keyframes hero-pulse{0%,100%{box-shadow:var(--shadow-md)}50%{box-shadow:var(--shadow-lg)}}
/* ── reference-style primitives ── */
.focal-card{background:linear-gradient(160deg,color-mix(in srgb,var(--primary) 15%,var(--focal)),var(--focal) 72%);color:var(--focal-ink);border-radius:var(--radius-xl);border:1.5px solid color-mix(in srgb,var(--primary) 42%,transparent);box-shadow:0 0 30px color-mix(in srgb,var(--primary) 20%,transparent),var(--shadow-lg)}
.focal-card .fc-sub{color:var(--focal-sub)}
.focal-card .accent-btn{box-shadow:0 4px 16px var(--accent-glow)}
.accent-btn{background:var(--accent);color:var(--accent-ink);border:none;border-bottom:5px solid var(--accent-edge);border-radius:var(--radius-md);font-weight:800;font-family:var(--font);cursor:pointer;transition:transform .1s,border-bottom-width .1s}
.accent-btn:active{transform:translateY(3px);border-bottom-width:2px}
.soft-card{background:var(--s1);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
/* tracker tiles — dim until done, then LIGHT UP gold (var() in shorthands only resolves reliably in real CSS rules, not inline) */
.tracker-tile{display:flex;align-items:center;gap:11px;padding:12px;border-radius:var(--radius-md);cursor:pointer;text-align:left;background:var(--s2);border:1.5px solid var(--border);transition:background .25s,border-color .25s,box-shadow .25s}
.tracker-tile.lit{background:color-mix(in srgb,var(--green) 16%,var(--s2));border-color:var(--green);box-shadow:0 0 16px var(--green-glow);position:relative;overflow:hidden}
.tracker-tile.lit::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);background-size:240% 100%;animation:doneShimmer 3s linear infinite;pointer-events:none}
.tracker-tile .tt-ic{position:relative;width:38px;height:38px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:var(--s3);transition:background .25s;filter:grayscale(.4) opacity(.85)}
.tracker-tile.lit .tt-ic{background:var(--green);filter:none;box-shadow:0 0 12px var(--green-glow)}
.tracker-tile .tt-label{font-size:.82rem;font-weight:800;color:var(--muted)}
.tracker-tile.lit .tt-label{color:var(--text)}
.tracker-tile .tt-sub{font-size:.6rem;font-weight:700;color:var(--dim)}
.tracker-tile.lit .tt-sub{color:var(--green)}
.tracker-tile .tt-check{flex-shrink:0;font-size:.9rem;color:var(--green)}
.day-complete{border-color:var(--green) !important;box-shadow:0 0 22px var(--green-glow) !important}
body.reduced-motion .tracker-tile.lit::after{animation:none !important}
/* Tasks desktop command-centre: work zone (hero+timer) left, capture+lists right. Single column on phones. */
.tv-grid{display:block}
@media(min-width:920px){
  .tv-grid{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);gap:22px;align-items:start}
  .tv-left{position:sticky;top:76px}
}
.pill-translucent{background:rgba(255,255,255,.12);border:none;border-radius:var(--radius-md)}
.hero-glow{animation:hero-pulse 3.4s ease-in-out infinite}
body.reduced-motion .hero-glow,body.mute-rewards .hero-glow{animation:none !important;box-shadow:0 4px 20px rgba(167,139,250,.2) !important}
/* Badge restraint: ≤1 coloured badge per card — extras use .badge-meta (neutral) */
.badge-meta{color:var(--dim) !important;background:var(--s2) !important;border-color:var(--border) !important}
/* ── depth via background: borderless cards that use tonal lifts instead of 1px lines ── */
.depth-1{background:var(--s1);border:1px solid transparent;box-shadow:inset 0 1px 0 var(--card-lift),var(--shadow-sm)}
.depth-2{background:var(--s2);border:1px solid transparent;box-shadow:inset 0 1px 0 var(--card-lift),var(--shadow-md)}
/* themed thin scrollbar + selection — small polish that makes both themes feel finished */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--s3);border-radius:6px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--border-hi);background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}
*{scrollbar-width:thin;scrollbar-color:var(--s3) transparent}
::selection{background:var(--primary-glow);color:var(--text)}
/* smooth cross-fade only while toggling theme — scoped so it never touches transforms/regular animations */
html.theme-switching *{transition:background-color .35s ease,color .3s ease,border-color .35s ease,box-shadow .35s ease,fill .3s ease !important}
body.reduced-motion.theme-switching *,html.theme-switching body.reduced-motion *{transition:none !important}
.depth-inset{background:linear-gradient(180deg,var(--s1),var(--s2));border:1px solid transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.03),inset 0 -1px 0 rgba(0,0,0,.25)}
/* ── reward pacing ladder: micro (tap), meso (milestone), macro (session/day) ── */
@keyframes rw-micro-pulse{0%{transform:scale(1)}40%{transform:scale(1.045)}100%{transform:scale(1)}}
@keyframes rw-meso-ring{0%{box-shadow:0 0 0 0 var(--primary)88,0 0 0 0 rgba(6,232,192,.4)}70%{box-shadow:0 0 0 10px transparent,0 0 22px 4px rgba(6,232,192,.18)}100%{box-shadow:0 0 0 0 transparent,0 0 0 0 transparent}}
@keyframes rw-macro-beam{0%{opacity:0;transform:scale(.9)}20%{opacity:1}60%{opacity:.6;transform:scale(1.06)}100%{opacity:0;transform:scale(1.12)}}
@keyframes corrBar{from{width:100%}to{width:0%}}
.rw-micro,.rw-tap:active{animation:rw-micro-pulse .32s cubic-bezier(.34,1.56,.64,1)}
.rw-meso{animation:rw-meso-ring .9s ease-out}
.rw-macro{animation:rw-macro-beam 1.2s ease-out}
body.reduced-motion .rw-micro,body.reduced-motion .rw-meso,body.reduced-motion .rw-macro,body.mute-rewards .rw-micro,body.mute-rewards .rw-meso,body.mute-rewards .rw-macro{animation:none !important}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{overscroll-behavior:none}
body{background:radial-gradient(ellipse at 50% 0%,var(--bg-grad-top) 0%,var(--bg-grad-bot) 60%);background-attachment:fixed;min-height:100vh;color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;overscroll-behavior:none;text-rendering:optimizeLegibility;transition:background .4s ease,color .3s ease}
/* native-app feel: no 300ms tap delay, no text-selection on UI chrome (inputs stay selectable) */
button,a,label,nav,[role="button"]{touch-action:manipulation;-webkit-user-select:none;user-select:none}
input,textarea,select{font-family:var(--font);background:var(--s2);border:1.5px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:10px 14px;width:100%;outline:none;font-size:16px;transition:border .2s,box-shadow .2s}
input:focus,textarea:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
button{cursor:pointer;font-family:var(--font)}
@keyframes pop{0%{transform:scale(.9);opacity:0}100%{transform:none;opacity:1}}
@keyframes slide-up{0%{transform:translateY(24px);opacity:0}100%{transform:none;opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bounce{0%{transform:scale(0)}65%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
/* overflow-layer score bar: moving sheen so effort past 100 feels alive */
@keyframes barShimmer{0%{background-position:-120% 0}100%{background-position:220% 0}}
.bar-shimmer{background-size:220% 100%;animation:barShimmer 2.2s linear infinite}
/* HABIT TAP DOPAMINE — big colour burst + expanding ring, then settles. --hb-c set per-habit inline. */
@keyframes habitCelebrate{0%{transform:scale(1);box-shadow:0 0 0 0 transparent}28%{transform:scale(1.055);box-shadow:0 0 34px 7px var(--hb-c,var(--primary))}60%{transform:scale(.992)}100%{transform:scale(1);box-shadow:0 0 0 0 transparent}}
@keyframes habitRing{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.16);opacity:0}}
.hb-celebrate{animation:habitCelebrate .55s cubic-bezier(.34,1.56,.64,1)}
.hb-celebrate::after{content:'';position:absolute;inset:-1px;border-radius:15px;border:2px solid var(--hb-c,var(--primary));animation:habitRing .55s ease-out forwards;pointer-events:none}
/* DONE = vibrant green celebration. Shimmer sheen sweeps across completed surfaces; done-pop = one-shot burst. */
@keyframes doneShimmer{0%{background-position:180% 0}100%{background-position:-80% 0}}
.done-shimmer{position:relative;overflow:hidden}
.done-shimmer::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);background-size:240% 100%;animation:doneShimmer 3s linear infinite;pointer-events:none;border-radius:inherit}
@keyframes donePop{0%{transform:scale(1)}30%{transform:scale(1.045);box-shadow:0 0 30px var(--green-glow)}100%{transform:scale(1)}}
.done-pop{animation:donePop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes doneRays{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes pulse-scale{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
@keyframes particle{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
@keyframes goalPop{0%{transform:scale(.7) translateY(20px);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1) translateY(0);opacity:1}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.2);opacity:0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.pop{animation:pop .22s cubic-bezier(.34,1.56,.64,1) both}
.slide-up{animation:slide-up .28s ease both}
.spin{animation:spin .7s linear infinite;display:inline-block}
.dirty{animation:pulse 2s infinite}
.shake{animation:shake .4s ease}
@keyframes glow-pulse{0%,100%{box-shadow:0 0 12px rgba(255,193,68,.4)}50%{box-shadow:0 0 28px rgba(255,193,68,.8),0 0 50px rgba(255,193,68,.3)}}
@keyframes star-spin{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.3)}100%{transform:rotate(360deg) scale(1)}}
@keyframes rank-pop{0%{transform:scale(0) rotate(-15deg);opacity:0}70%{transform:scale(1.15) rotate(3deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes freeze-flash{0%,100%{opacity:1}50%{opacity:0.4}}
@keyframes combo-pop{0%{transform:scale(.4) translateY(10px);opacity:0}60%{transform:scale(1.15) translateY(-6px);opacity:1}100%{transform:scale(1) translateY(0);opacity:1}}
@keyframes combo-out{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-30px)}}
@keyframes flow-tick{0%{opacity:1}50%{opacity:.6}100%{opacity:1}}
@keyframes score-pop{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes slide-in-right{0%{transform:translateX(60px);opacity:0}100%{transform:none;opacity:1}}
@keyframes shrink{from{width:100%}to{width:0%}}
.combo-in{animation:combo-pop .35s cubic-bezier(.34,1.56,.64,1) both}
.combo-out{animation:combo-out .4s ease forwards}
.ns-glow{animation:glow-pulse 2s ease-in-out infinite}
.flow-pulse{animation:flow-tick 1.4s ease-in-out infinite}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:5px;opacity:.7}
@keyframes xp-float{0%{transform:translateY(0) scale(.8);opacity:1}70%{transform:translateY(-48px) scale(1.2);opacity:1}100%{transform:translateY(-80px) scale(1);opacity:0}}
@keyframes chain-fire{0%,100%{box-shadow:0 0 10px rgba(255,140,48,.5),inset 0 0 10px rgba(255,140,48,.05)}50%{box-shadow:0 0 28px rgba(255,140,48,.9),0 0 50px rgba(255,140,48,.3),inset 0 0 16px rgba(255,140,48,.1)}}
@keyframes chain-berserk{0%,100%{box-shadow:0 0 12px rgba(255,61,90,.5)}50%{box-shadow:0 0 40px rgba(255,61,90,.9),0 0 70px rgba(255,61,90,.4)}}
@keyframes task-in{0%{transform:translateX(32px);opacity:0}100%{transform:none;opacity:1}}
@keyframes done-flash{0%{background:rgba(40,216,122,.25)}100%{background:transparent}}
@keyframes velocity-fill{0%{width:0}100%{width:var(--vel-w)}}
@keyframes momentum-pop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.xp-float{animation:xp-float 1.4s ease-out forwards;pointer-events:none;position:fixed;font-weight:900;z-index:9999}
.chain-fire{animation:chain-fire 1.2s ease-in-out infinite}
.chain-berserk{animation:chain-berserk .8s ease-in-out infinite}
.task-in{animation:task-in .28s cubic-bezier(.34,1.56,.64,1) both}
.momentum-pop{animation:momentum-pop .3s cubic-bezier(.34,1.56,.64,1) both}
@keyframes timer-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.03);opacity:.92}}
.timer-pulse-run{animation:timer-pulse 1.6s ease-in-out infinite}

@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
@keyframes section-in{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
.fade-in{animation:fade-in .3s ease both}
.section-in{animation:section-in .35s cubic-bezier(.25,.46,.45,.94) both}
@keyframes task-done-sweep{0%{opacity:1;transform:scaleX(0);transform-origin:left}60%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
@keyframes btn-pop-green{0%{background:var(--green);transform:scale(.97)}60%{transform:scale(1.03)}100%{background:inherit;transform:scale(1)}}
@keyframes confetti-fall{0%{transform:translateY(0) rotate(0deg) scale(1);opacity:1}80%{opacity:.9}100%{transform:translateY(220px) rotate(720deg) scale(.4);opacity:0}}
.confetti-p{position:fixed;pointer-events:none;border-radius:3px;animation:confetti-fall 2s ease-in forwards;z-index:9999;}
/* ── Utility classes ── */
.lbl{font-size:.62rem;font-weight:900;color:var(--dim);letter-spacing:1px;text-transform:uppercase}
.hlbl{font-size:.62rem;font-weight:900;color:var(--dim);letter-spacing:1px;margin-bottom:5px;text-transform:uppercase}
.chip{font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:5px;flex-shrink:0}
/* ── Gamification / UX overhaul ── */
@keyframes level-up-pop{0%{opacity:0;transform:scale(.5) translateY(40px)}60%{transform:scale(1.08) translateY(-4px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes xp-glow{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes league-glow{0%,100%{filter:brightness(1) drop-shadow(0 0 4px currentColor)}50%{filter:brightness(1.3) drop-shadow(0 0 8px currentColor)}}
@keyframes quest-slide-in{0%{opacity:0;transform:translateX(-8px)}100%{opacity:1;transform:translateX(0)}}
@keyframes welcome-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.quest-card-enter{animation:quest-slide-in .3s ease both;}
.lvl-badge{animation:xp-glow 3s ease-in-out infinite;}
.league-icon{animation:league-glow 4s ease-in-out infinite;}
/* ── Open Mode + Session Mode ── */
@keyframes streak-hero-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes start-btn-pulse{0%,100%{box-shadow:0 6px 0 #5a2eb8,0 8px 28px rgba(196,170,255,.5),0 0 50px rgba(196,170,255,.25)}50%{box-shadow:0 6px 0 #5a2eb8,0 12px 36px rgba(196,170,255,.75),0 0 70px rgba(196,170,255,.45)}}
@keyframes session-slide-in{0%{opacity:0;transform:translateX(80px) scale(.9)}100%{opacity:1;transform:translateX(0) scale(1)}}
@keyframes session-slide-out{0%{opacity:1;transform:translateX(0) scale(1)}100%{opacity:0;transform:translateX(-80px) scale(.9)}}
@keyframes session-complete-burst{0%{opacity:0;transform:scale(.6)}50%{transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
@keyframes green-flash{0%,100%{background:var(--s2)}40%{background:rgba(24,240,122,.35)}}
.streak-hero{animation:streak-hero-float 3s ease-in-out infinite}
.start-btn{animation:start-btn-pulse 2.4s ease-in-out infinite}
.start-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #5a2eb8,0 4px 12px rgba(196,170,255,.3) !important;animation:none}
.session-card-in{animation:session-slide-in .35s cubic-bezier(.34,1.56,.64,1) both}
.session-card-out{animation:session-slide-out .25s ease both}
.session-complete-burst{animation:session-complete-burst .6s cubic-bezier(.34,1.56,.64,1) both}
.green-flash{animation:green-flash .6s ease}
.btn-3d{border-bottom:4px solid rgba(0,0,0,.35) !important;transition:transform .1s,box-shadow .1s,border-bottom-width .1s}
.btn-3d:active{transform:translateY(3px);border-bottom-width:1px !important}
body.reduced-motion .streak-hero,body.reduced-motion .start-btn{animation:none !important}
/* ── instant splash: static HTML painted before React/Babel load; React render replaces it ── */
@keyframes splash-breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:1}}
@keyframes splash-bar{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
#rl-splash{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:1}
#rl-splash .sp-glyph{font-size:3rem;animation:splash-breathe 1.6s ease-in-out infinite}
#rl-splash .sp-name{font-weight:900;font-size:1.3rem;letter-spacing:2px;color:var(--primary)}
#rl-splash .sp-track{width:120px;height:3px;border-radius:3px;background:var(--s3);overflow:hidden}
#rl-splash .sp-fill{width:40%;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--primary),var(--pink));animation:splash-bar 1.1s ease-in-out infinite}
#rl-splash .sp-hint{font-size:.65rem;color:var(--dim);font-weight:600;letter-spacing:.5px}