:root{
    /* App surfaces — clean neutral, single confident brand accent. */
    --bg:#f7f8f9;
    --bg-2:#eef0f2;
    --card:#ffffff;
    --card-2:#f3f4f6;
    --line:#e7e9ec;
    --line-strong:#d3d6db;
    --text:#0e0f11;
    --dim:#6b6f76;
    --dim-2:#a1a5ac;
    --physics:#4c7df0;
    --chem:#f5a623;
    --botany:#1fbd6e;
    --zoology:#f0507a;
    --danger:#f0507a;
    --radius:20px;
    --radius-sm:14px;
    --radius-xs:10px;
    --radius-pill:999px;
    /* Text sitting on top of a bright accent fill. Fixed since accent colors stay mid-to-high brightness in both themes. */
    --on-accent:#ffffff;
    --accent-text:#0e9e5c;
    --nav-bg:rgba(255,255,255,0.85);
    --wordmark-accent:#1fbd6e;
    --card-hairline:rgba(255,255,255,0);
    --mono:'JetBrains Mono',monospace;
    --display:'Space Grotesk',sans-serif;
    --battle:#e0762e;
    --pomodoro:#d9483a;
    --pomodoro-soft:rgba(217,72,58,0.12);
    --break-short:#1fbd6e;
    --break-long:#4c7df0;
    --shadow-card:0 1px 3px rgba(15,15,20,0.06), 0 1px 2px rgba(15,15,20,0.04);
    --shadow-raised:0 12px 28px rgba(15,15,20,0.12), 0 2px 6px rgba(15,15,20,0.06);
    --shadow-float:0 8px 24px rgba(31,189,110,0.28);
    --ag1:rgba(31,189,110,0.26);
    --ag2:rgba(76,125,240,0.22);
    --ag3:rgba(245,166,35,0.20);
    --ag4:rgba(240,80,122,0.16);
  }
  [data-theme="dark"]{
    --battle:#f0955a;
    --pomodoro:#ff7a63;
    --pomodoro-soft:rgba(255,122,99,0.16);
    --break-short:#34e08b;
    --break-long:#7ea0f5;
    /* Layered elevation system: bg < bg-2 < card < card-2, each a visible step up,
       so surfaces actually separate instead of blending into one black mass. */
    --bg:#0a0b0d;
    --bg-2:#141519;
    --card:#1c1d22;
    --card-2:#25262c;
    --card-hairline:rgba(255,255,255,0.06);
    --line:#2e2f36;
    --line-strong:#40414a;
    --text:#f6f7f8;
    --dim:#9a9ea6;
    --dim-2:#5f636b;
    --physics:#7ea0f5;
    --chem:#ffbd5c;
    --botany:#34e08b;
    --zoology:#ff7a9c;
    --danger:#ff7a9c;
    --on-accent:#06210f;
    --accent-text:#34e08b;
    --nav-bg:rgba(13,14,17,0.86);
    --shadow-card:0 1px 2px rgba(0,0,0,0.4), 0 0 0 1px var(--card-hairline) inset;
    --shadow-raised:0 20px 40px rgba(0,0,0,0.5), 0 6px 16px rgba(0,0,0,0.35), 0 0 0 1px var(--card-hairline) inset;
    --shadow-float:0 8px 24px rgba(52,224,139,0.22);
    --ag1:rgba(52,224,139,0.42);
    --ag2:rgba(126,160,245,0.34);
    --ag3:rgba(255,189,92,0.30);
    --ag4:rgba(255,122,156,0.24);
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{ height:100%; margin:0; overflow:hidden; background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; }
  #app{
    height:100dvh; width:100%; display:none; flex-direction:column;
    max-width:560px; margin:0 auto; position:relative; overflow:hidden;
    background-color: var(--bg);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-image:
      radial-gradient(closest-side, var(--ag1), transparent),
      radial-gradient(closest-side, var(--ag2), transparent),
      radial-gradient(closest-side, var(--ag3), transparent),
      radial-gradient(closest-side, var(--ag4), transparent);
    background-size: 95% 42%, 90% 38%, 75% 34%, 70% 30%;
    background-position: -15% -8%, 112% 30%, 50% 108%, -10% 88%;
    animation: agShift 32s ease-in-out infinite alternate;
  }
  @keyframes agShift{
    0%{ background-position: -15% -8%, 112% 30%, 50% 108%, -10% 88%; }
    50%{ background-position: 5% 4%,   96% 44%,  58% 96%,  4% 78%; }
    100%{ background-position: -15% -8%, 112% 30%, 50% 108%, -10% 88%; }
  }
  @media (prefers-reduced-motion:reduce){ #app{ animation:none; } }
  ::selection{background:var(--botany); color:var(--on-accent);}

  /* ---------- auth screen ---------- */
  .auth-screen{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--bg); z-index:200; padding:0; opacity:0; pointer-events:none; transition:opacity .3s ease; overflow-y:auto; overflow-x:hidden; }
  .maintenance-screen{ position:fixed; inset:0; z-index:500; display:none; align-items:center; justify-content:center; flex-direction:column; gap:22px; background:var(--bg); padding:20px; text-align:center; }
  .maintenance-screen.show{ display:flex; }
  .maintenance-card{ display:flex; flex-direction:column; align-items:center; max-width:380px; }
  .maintenance-icon{ width:40px; height:40px; color:var(--danger); margin-bottom:14px; }
  .maintenance-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; margin-top:6px; }
  .maintenance-msg{ font-size:13px; color:var(--dim); line-height:1.5; margin-top:8px; }
  .auth-wrap{ position:relative; z-index:1; width:100%; max-width:380px; min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; margin:auto; padding:20px; }
  .auth-screen.show{ opacity:1; pointer-events:auto; }
  .auth-card{ position:relative; width:100%; max-width:380px; text-align:center; opacity:0; transform:translateY(16px); animation:riseIn .6s ease forwards; background:transparent; border:none; border-radius:0; padding:0; box-shadow:none; }
  .auth-logo{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:30px; display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:2px; color:var(--text); letter-spacing:-0.5px; }
  .wordmark-accent{ color:var(--wordmark-accent); }
  .wordmark-credit{ font-family:var(--mono); font-size:10px; font-weight:500; color:var(--dim-2); text-align:center; margin-bottom:16px; letter-spacing:0.4px; text-transform:uppercase; }
  .footer-brand-logo{ display:block; height:16px; width:auto; margin:18px auto 0; border-radius:14px; opacity:0.9; }
  .loading-screen .footer-brand-logo{ margin-top:0; }
  .auth-tagline{ color:var(--dim); font-size:13px; margin-bottom:36px; }
  .auth-input-wrap{ position:relative; display:flex; align-items:center; }
  .auth-input-icon{ position:absolute; left:14px; width:16px; height:16px; color:var(--dim-2); pointer-events:none; }
  .auth-pw-toggle{ position:absolute; right:6px; width:32px; height:32px; border:none; background:none; color:var(--dim-2); display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:50%; transition:color .15s ease; }
  .auth-pw-toggle:hover{ color:var(--dim); }
  .auth-pw-toggle svg{ width:17px; height:17px; }
  .auth-pw-toggle.showing{ color:var(--accent-text); }
  .auth-hint{ margin-top:18px; font-size:10.5px; color:var(--dim-2); line-height:1.5; }
  .auth-forgot-row{ display:flex; justify-content:flex-end; margin-top:-6px; margin-bottom:2px; }
  .auth-forgot-link{ font-size:11.5px; color:var(--accent-text); font-weight:600; cursor:pointer; }
  .auth-forgot-link:hover{ opacity:0.8; text-decoration:underline; text-underline-offset:2px; }
  .auth-privacy-link{ margin-top:10px; font-size:11px; color:var(--accent-text); font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
  .auth-privacy-link:hover{ opacity:0.8; }
  .settings-privacy-link{ margin-top:12px; text-align:center; font-size:11.5px; color:var(--accent-text); font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
  .settings-privacy-link:hover{ opacity:0.8; }

  /* ---------- legal & support footer row (Settings) ---------- */
  .legal-footer-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 10px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
  .legal-footer-link{ font-size:11px; color:var(--dim); font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
  .legal-footer-link:hover{ color:var(--accent-text); }
  .legal-footer-dot{ color:var(--dim-2); font-size:10px; }
  .legal-footer-brand{ width:100%; text-align:center; font-size:10px; color:var(--dim-2); margin-top:8px; }

  /* ---------- contact / grievance card ---------- */
  .contact-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-xs); padding:16px; margin-bottom:14px; }
  .contact-card-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13.5px; margin-bottom:10px; color:var(--text); }
  .contact-row{ display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); }
  .contact-row:last-child{ border-bottom:none; }
  .contact-row-icon{ flex-shrink:0; width:30px; height:30px; border-radius:50%; background:rgba(14,158,92,0.12); display:flex; align-items:center; justify-content:center; font-size:14px; }
  .contact-row-text{ flex:1; min-width:0; }
  .contact-row-label{ font-size:10.5px; color:var(--dim); text-transform:uppercase; letter-spacing:.04em; font-weight:700; margin-bottom:2px; }
  .contact-row-value{ font-size:13px; color:var(--text); font-weight:600; word-break:break-word; }
  .contact-row-value a{ color:var(--accent-text); text-decoration:none; }
  .contact-row-value a:hover{ text-decoration:underline; }
  .contact-note{ font-size:11.5px; color:var(--dim); line-height:1.6; margin-bottom:14px; }

  /* ---------- bug report / feedback form ---------- */
  .bug-type-row{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
  .bug-type-chip{ padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--bg-2); color:var(--dim); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s ease; font-family:inherit; }
  .bug-type-chip.active{ background:var(--accent-text); color:#0a1a12; border-color:var(--accent-text); }
  .bug-report-list{ margin-top:6px; }
  .bug-report-item{ padding:12px 14px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-xs); margin-bottom:10px; }
  .bug-report-item-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
  .bug-report-badge{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:3px 8px; border-radius:999px; }
  .bug-report-badge.bug{ background:rgba(240,80,122,0.14); color:var(--danger); }
  .bug-report-badge.feedback{ background:rgba(14,158,92,0.14); color:var(--accent-text); }
  .bug-report-meta{ font-size:10.5px; color:var(--dim-2); }
  .bug-report-text{ font-size:12.5px; color:var(--text); line-height:1.55; white-space:pre-wrap; }
  .bug-report-user{ font-size:10.5px; color:var(--dim); margin-top:6px; }
  .danger-zone{ margin-top:22px; padding-top:16px; border-top:1px solid var(--line); }
  .danger-zone > label{ font-size:11px; color:var(--danger); font-weight:700; display:block; margin-bottom:8px; text-transform:uppercase; letter-spacing:0.03em; }
  .danger-outline{ background:transparent!important; color:var(--danger)!important; border:1px solid var(--danger)!important; }
  .danger-solid{ background:var(--danger)!important; color:#fff!important; }
  .privacy-updated{ font-size:11px; color:var(--dim-2); margin-bottom:14px; }
  .privacy-content{ font-size:13.5px; line-height:1.7; color:var(--text); white-space:pre-wrap; }
  .privacy-content p{ margin:0 0 14px; }

  /* ---------- animated privacy policy reveal ---------- */
  .pv-para{
    opacity:0; transform:translateY(12px);
    animation: pvRise .55s cubic-bezier(.2,.8,.2,1) forwards;
    animation-delay: var(--d, 0ms);
  }
  @keyframes pvRise{ to{ opacity:1; transform:translateY(0); } }
  .pv-hl{
    background:none;
    color:inherit;
    font-weight:700;
    padding:0 3px;
    border-radius:14px;
    background-image: linear-gradient(100deg, var(--accent-text) 0%, var(--accent-text) 100%);
    background-repeat:no-repeat;
    background-position:0 0;
    background-size:0% 100%;
    animation: pvSweep .5s ease forwards;
    animation-delay: calc(var(--d, 0ms) + 380ms);
  }
  @keyframes pvSweep{
    0%{ background-size:0% 100%; color:inherit; }
    60%{ background-size:100% 100%; }
    100%{ background-size:100% 100%; color:var(--on-accent); }
  }
  .pv-fresh-badge{
    display:inline-block; margin-left:6px; padding:2px 8px; border-radius:14px;
    background:var(--accent-text); color:var(--on-accent); font-weight:700; font-size:10px;
    animation: pvBadgeMetis 1.6s ease-in-out infinite;
  }
  @keyframes pvBadgeMetis{
    0%,100%{ transform:scale(1); }
    50%{ transform:scale(1.06); }
  }

  /* ---------- animated consent checkbox ---------- */
  .consent-check{ display:flex; align-items:flex-start; gap:10px; margin:2px 0 4px; cursor:pointer; user-select:none; }
  .consent-check input{ position:absolute; opacity:0; width:0; height:0; }
  .consent-box{
    flex:0 0 20px; width:20px; height:20px; margin-top:1px; border-radius:14px;
    border:1.6px solid var(--line); background:var(--card);
    display:flex; align-items:center; justify-content:center;
    transition: background .2s ease, border-color .2s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
  }
  .consent-tick{
    width:13px; height:13px; fill:none; stroke:var(--on-accent); stroke-width:3.4;
    stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:26; stroke-dashoffset:26;
    transition: stroke-dashoffset .3s ease .05s;
  }
  .consent-check input:checked ~ .consent-box{ background:var(--accent-text); border-color:var(--accent-text); transform:scale(1.1); }
  .consent-check input:checked ~ .consent-box .consent-tick{ stroke-dashoffset:0; }
  .consent-check:active .consent-box{ transform:scale(0.88); }
  .consent-check input:focus-visible ~ .consent-box{ outline:2px solid var(--accent-text); outline-offset:2px; }
  .consent-label{ font-size:11.5px; line-height:1.5; color:var(--dim-2); text-align:left; padding-top:2px; }
  .consent-link{ color:var(--accent-text); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
  .consent-check.shake{ animation:consentShake .38s ease; }
  @keyframes consentShake{
    0%,100%{ transform:translateX(0); }
    20%{ transform:translateX(-5px); }
    40%{ transform:translateX(4px); }
    60%{ transform:translateX(-3px); }
    80%{ transform:translateX(2px); }
  }

  /* ---------- loading screen ---------- */
  .loading-screen{
    position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; flex-direction:column;
    opacity:1; transition:opacity .45s ease;
    background:#0a0614; overflow:hidden;
  }
  .loading-screen.hide{ opacity:0; pointer-events:none; }

  /* ---- Violet neon smoke: fast, continuously-flowing plumes behind the loading content ----
     Built from radial-gradient (not filter:blur) so it stays cheap to composite.
     Unlike a simple back-and-forth drift, each wisp travels an ASYMMETRIC multi-point
     path with linear timing (not ease-in-out) so it never decelerates into a shared
     start/end pose — that shared-pose deceleration is what reads as "bobbing". Position,
     rotation and scale all change at different, non-aligned keyframe offsets per wisp so
     motion never reads as a single rhythmic pulse. Paused whenever this screen isn't visible. */
  .loading-neon-smoke{ position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; pointer-events:none; z-index:0; }
  .neon-wisp{ position:absolute; border-radius:50%; mix-blend-mode:screen; will-change:transform; }
  .neon-wisp-1{
    width:74vmax; height:74vmax; top:-28vmax; left:-26vmax;
    background:radial-gradient(circle at 50% 50%, #d9a8ff 0%, rgba(168,85,247,0.55) 30%, rgba(88,28,150,0.18) 55%, transparent 72%);
    opacity:.78; animation:violetFlow1 6.5s linear infinite;
  }
  .neon-wisp-2{
    width:64vmax; height:64vmax; top:-18vmax; right:-28vmax;
    background:radial-gradient(circle at 50% 50%, #c084fc 0%, rgba(147,51,234,0.5) 32%, rgba(76,29,149,0.16) 55%, transparent 70%);
    opacity:.72; animation:violetFlow2 7.8s linear infinite; animation-delay:-2.1s;
  }
  .neon-wisp-3{
    width:70vmax; height:70vmax; bottom:-30vmax; left:-20vmax;
    background:radial-gradient(circle at 50% 50%, #e0b3ff 0%, rgba(186,85,255,0.5) 30%, rgba(70,20,140,0.16) 55%, transparent 70%);
    opacity:.75; animation:violetFlow3 7s linear infinite; animation-delay:-4.4s;
  }
  .neon-wisp-4{
    width:56vmax; height:56vmax; bottom:-22vmax; right:-18vmax;
    background:radial-gradient(circle at 50% 50%, #a855f7 0%, rgba(126,34,206,0.48) 32%, rgba(60,16,120,0.15) 55%, transparent 68%);
    opacity:.68; animation:violetFlow4 5.8s linear infinite; animation-delay:-1s;
  }
  .neon-wisp-5{
    width:50vmax; height:50vmax; top:24%; left:50%; margin-left:-25vmax;
    background:radial-gradient(circle at 50% 50%, #f0d4ff 0%, rgba(196,120,255,0.4) 34%, rgba(80,20,150,0.12) 58%, transparent 72%);
    opacity:.6; animation:violetFlow5 5s linear infinite; animation-delay:-3s;
  }
  /* asymmetric waypoints, offsets deliberately uneven across position/rotate/scale so
     nothing lines up into a synchronized "breathe" — motion reads as continuous flow */
  @keyframes violetFlow1{
    0%    { transform:translate(0,0) rotate(0deg) scale(1,1); }
    17%   { transform:translate(7vmax,3vmax) rotate(20deg) scale(1.22,0.86); }
    34%   { transform:translate(4vmax,10vmax) rotate(-9deg) scale(0.86,1.28); }
    52%   { transform:translate(11vmax,6vmax) rotate(27deg) scale(1.16,1); }
    69%   { transform:translate(6vmax,12vmax) rotate(-15deg) scale(0.9,1.15); }
    85%   { transform:translate(2vmax,4vmax) rotate(10deg) scale(1.05,0.95); }
    100%  { transform:translate(0,0) rotate(0deg) scale(1,1); }
  }
  @keyframes violetFlow2{
    0%    { transform:translate(0,0) rotate(0deg) scale(1,1); }
    15%   { transform:translate(-9vmax,4vmax) rotate(-22deg) scale(1.2,0.88); }
    33%   { transform:translate(-5vmax,-6vmax) rotate(16deg) scale(0.85,1.3); }
    50%   { transform:translate(-13vmax,2vmax) rotate(-26deg) scale(1.18,1.02); }
    67%   { transform:translate(-7vmax,-9vmax) rotate(12deg) scale(0.92,1.12); }
    84%   { transform:translate(-3vmax,-2vmax) rotate(-8deg) scale(1.04,0.96); }
    100%  { transform:translate(0,0) rotate(0deg) scale(1,1); }
  }
  @keyframes violetFlow3{
    0%    { transform:translate(0,0) rotate(0deg) scale(1,1); }
    19%   { transform:translate(6vmax,-8vmax) rotate(18deg) scale(1.24,0.85); }
    36%   { transform:translate(12vmax,-3vmax) rotate(-20deg) scale(0.86,1.3); }
    54%   { transform:translate(5vmax,-11vmax) rotate(25deg) scale(1.14,1.04); }
    71%   { transform:translate(9vmax,-5vmax) rotate(-13deg) scale(0.94,1.1); }
    87%   { transform:translate(3vmax,-9vmax) rotate(7deg) scale(1.02,0.97); }
    100%  { transform:translate(0,0) rotate(0deg) scale(1,1); }
  }
  @keyframes violetFlow4{
    0%    { transform:translate(0,0) rotate(0deg) scale(1,1); }
    16%   { transform:translate(-6vmax,-6vmax) rotate(-19deg) scale(1.26,0.82); }
    32%   { transform:translate(-11vmax,-1vmax) rotate(14deg) scale(0.84,1.32); }
    49%   { transform:translate(-5vmax,-10vmax) rotate(-28deg) scale(1.18,1); }
    66%   { transform:translate(-9vmax,-4vmax) rotate(9deg) scale(0.9,1.14); }
    83%   { transform:translate(-2vmax,-8vmax) rotate(-6deg) scale(1.06,0.94); }
    100%  { transform:translate(0,0) rotate(0deg) scale(1,1); }
  }
  @keyframes violetFlow5{
    0%    { transform:translate(-50%,0) rotate(0deg) scale(1,1); }
    21%   { transform:translate(-44%,7vmax) rotate(21deg) scale(1.2,0.87); }
    40%   { transform:translate(-57%,3vmax) rotate(-17deg) scale(0.88,1.24); }
    60%   { transform:translate(-46%,-6vmax) rotate(24deg) scale(1.12,1.03); }
    80%   { transform:translate(-52%,4vmax) rotate(-10deg) scale(0.96,1.08); }
    100%  { transform:translate(-50%,0) rotate(0deg) scale(1,1); }
  }
  .loading-screen.hide .neon-wisp{ animation-play-state:paused !important; }
  @media (prefers-reduced-motion:reduce){ .neon-wisp{ animation:none !important; } }

  /* subtle dark vignette so text stays legible over the brightest parts of the smoke */
  .loading-neon-smoke::after{
    content:""; position:absolute; inset:0;
    background:radial-gradient(ellipse 65% 55% at 50% 50%, transparent 0%, rgba(10,4,20,0.6) 78%);
  }

  /* ---- Loading spinner: glowing core with orbiting particles, not spinning rings ----
     Perfectly circular rings at constant linear speed read as mechanical/robotic.
     This swaps that for three small particles, each on its own orbit radius, moving
     at a different speed AND with ease-in-out timing (accelerate/decelerate through
     the orbit) rather than constant linear rotation — that variable speed is what
     reads as organic, energy-like motion instead of a spinning gear. A soft outer
     pulse and a bright core tie it together. */
  .loading-spinner{ position:relative; z-index:1; width:92px; height:92px; margin-top:22px; }
  .spinner-pulse{
    position:absolute; inset:0; border-radius:50%;
    background:radial-gradient(circle, rgba(196,120,255,0.28) 0%, transparent 70%);
    animation:spinnerPulseBreathe 2.2s ease-in-out infinite;
  }
  @keyframes spinnerPulseBreathe{ 0%,100%{ transform:scale(0.85); opacity:.6; } 50%{ transform:scale(1.15); opacity:1; } }
  .spinner-orbit{ position:absolute; inset:0; }
  .spinner-orbit-1{ animation:orbitSpin1 2.6s ease-in-out infinite; }
  .spinner-orbit-2{ inset:10px; animation:orbitSpin2 3.3s ease-in-out infinite; animation-delay:-.6s; }
  .spinner-orbit-3{ inset:22px; animation:orbitSpin3 2s ease-in-out infinite; animation-delay:-1.3s; }
  @keyframes orbitSpin1{ 0%{ transform:rotate(0deg); } 50%{ transform:rotate(200deg); } 100%{ transform:rotate(360deg); } }
  @keyframes orbitSpin2{ 0%{ transform:rotate(0deg); } 50%{ transform:rotate(-160deg); } 100%{ transform:rotate(-360deg); } }
  @keyframes orbitSpin3{ 0%{ transform:rotate(0deg); } 50%{ transform:rotate(210deg); } 100%{ transform:rotate(360deg); } }
  .spinner-particle{
    position:absolute; top:-3px; left:50%; width:7px; height:7px; margin-left:-3.5px;
    border-radius:50%; background:#e9c9ff;
  }
  .spinner-orbit-1 .spinner-particle{ background:#e0b3ff; box-shadow:0 0 10px 2px rgba(224,179,255,0.85); }
  .spinner-orbit-2 .spinner-particle{ width:6px; height:6px; margin-left:-3px; background:#c084fc; box-shadow:0 0 9px 2px rgba(192,132,252,0.8); }
  .spinner-orbit-3 .spinner-particle{ width:5px; height:5px; margin-left:-2.5px; background:#f0d4ff; box-shadow:0 0 8px 2px rgba(240,212,255,0.75); }
  .spinner-core{
    position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px;
    border-radius:50%; background:#f3e2ff;
    box-shadow:0 0 12px 3px rgba(196,120,255,0.9), 0 0 26px 8px rgba(147,51,234,0.55);
    animation:spinnerCorePulse 1.4s ease-in-out infinite;
  }
  @keyframes spinnerCorePulse{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.25); opacity:1; } }
  @media (prefers-reduced-motion:reduce){
    .spinner-pulse, .spinner-orbit-1, .spinner-orbit-2, .spinner-orbit-3, .spinner-core{ animation:none !important; }
  }

  .loading-brand{
    position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:2px; margin-bottom:6px;
    opacity:0; filter:blur(6px); transform:translateY(6px);
    animation:loadingBrandIn .7s cubic-bezier(.2,.9,.25,1) .1s forwards;
  }
  @keyframes loadingBrandIn{ to{ opacity:1; filter:blur(0); transform:translateY(0); } }
  .loading-logo{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:27px; letter-spacing:0.5px; display:flex; align-items:center; justify-content:center; gap:0; color:#f7f0ff; text-shadow:0 0 18px rgba(196,120,255,0.4); }
  .loading-brand .wordmark-credit{ margin-bottom:0; color:rgba(235,220,255,0.55); }

  .loading-text-row{ position:relative; z-index:1; margin-top:18px; }
  .loading-text{
    font-family:var(--mono); font-size:11.5px; color:rgba(225,205,250,0.75); letter-spacing:.3px; min-height:16px;
    opacity:0; filter:blur(6px); transform:translateY(6px);
    animation:loadingBrandIn .7s cubic-bezier(.2,.9,.25,1) .3s forwards;
    transition:opacity .2s ease;
  }

  .loading-screen .footer-brand-logo{ position:absolute; bottom:28px; opacity:.7; z-index:1; }

  @media (prefers-reduced-motion:reduce){
    .loading-brand, .loading-text{ animation:none; opacity:1; filter:none; transform:none; }
  }

  /* ---------- skeleton loading (fast path for already-signed-in sessions) ---------- */
  .skeleton-screen{
    position:fixed; inset:0; z-index:300; display:none; flex-direction:column; gap:16px;
    max-width:560px; margin:0 auto; padding:20px; background:var(--bg);
    opacity:0; transition:opacity .3s ease; overflow:hidden;
  }
  .skeleton-screen.show{ opacity:1; }
  .skeleton-block{
    background:linear-gradient(90deg, var(--card) 25%, var(--card-2) 37%, var(--card) 63%);
    background-size:400% 100%; animation:skeletonShimmer 1.4s ease infinite; border-radius:14px;
  }
  @keyframes skeletonShimmer{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }
  .skeleton-topbar{ display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
  .skeleton-brand{ width:96px; height:20px; border-radius:14px; }
  .skeleton-avatar{ width:34px; height:34px; border-radius:50%; }
  .skeleton-ring{ width:136px; height:136px; border-radius:50%; margin:14px auto; }
  .skeleton-streak-row{ display:flex; gap:10px; }
  .skeleton-streak{ flex:1; height:58px; border-radius:14px; }
  .skeleton-quote{ height:44px; }
  .skeleton-quickgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  .skeleton-chip{ height:60px; }

  .auth-field-group{ display:flex; flex-direction:column; gap:12px; margin-bottom:14px; }
  .auth-field-group input{ width:100%; padding:15px 16px 15px 42px; border-radius:var(--radius-sm); border:1.5px solid transparent; background:var(--bg-2); color:var(--text); font-size:14px; font-family:'Inter',sans-serif; transition:border-color .2s ease, background .2s ease; }
  #authPassword{ padding-right:42px; }
  .auth-field-group input:focus{ outline:none; border-color:var(--botany); background:var(--card); }
  .auth-field-group input::placeholder{ color:var(--dim-2); }
  .auth-error{ color:var(--danger); font-size:11.5px; text-align:left; min-height:0; line-height:1.4; font-family:var(--mono); }
  .auth-error:empty{ display:none; }
  .email-btn{ width:100%; padding:15px; border-radius:var(--radius-pill); border:none; background:var(--botany); color:var(--on-accent); font-weight:700; font-size:14px; letter-spacing:0.2px; cursor:pointer; transition:transform .15s ease, opacity .2s ease; margin-top:6px; box-shadow:var(--shadow-float); }
  .email-btn:active{ transform:scale(0.97); }
  .email-btn:disabled{ opacity:0.5; cursor:default; box-shadow:none; }
  .auth-toggle{ font-size:12.5px; color:var(--dim); margin:16px 0 22px; }
  .auth-toggle span{ color:var(--accent-text); font-weight:700; cursor:pointer; }

  /* ---------- class-pick screen ---------- */
  .picker-label{ font-size:10px; color:var(--dim-2); font-weight:600; display:block; margin-bottom:8px; text-align:left; text-transform:uppercase; letter-spacing:1px; font-family:var(--mono); }
  .exam-pick{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:4px; border:none; border-radius:0; overflow:visible; background:transparent; }
  .exam-opt{ padding:14px 4px; border-radius:var(--radius-sm); border:1.5px solid var(--line); background:var(--card); color:var(--dim); font-size:12px; font-weight:600; font-family:'Inter',sans-serif; cursor:pointer; transition:all .2s ease; }
  .exam-opt.active{ color:var(--on-accent); background:var(--botany); border-color:var(--botany); }
  .exam-opt small{ display:block; font-weight:500; opacity:0.7; margin-top:2px; }
  .class-pick{ display:flex; flex-direction:column; gap:8px; margin-bottom:8px; border:none; border-radius:0; overflow:visible; background:transparent; }
  .class-opt{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; width:100%; text-align:left; padding:15px 17px; border-radius:var(--radius-sm); border:1.5px solid var(--line); background:var(--card); color:var(--text); cursor:pointer; transition:all .2s ease; }
  .class-opt:active, .class-opt:hover{ background:var(--card-2); border-color:var(--botany); }
  .class-opt:disabled{ opacity:0.55; cursor:default; }
  .class-opt .co-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; }
  .class-opt .co-sub{ font-size:11.5px; color:var(--dim); font-family:var(--mono); }

  /* ---------- chapters pacing stat ---------- */
  .chap-pace-stat{ font-size:11.5px; color:var(--dim); background:var(--card); border:1px solid var(--line); border-radius:14px; padding:9px 12px; margin-bottom:12px; line-height:1.5; }
  .chap-pace-stat b{ color:var(--text); }

  .topbar{ display:flex; align-items:center; justify-content:space-between; padding:16px 16px 12px; flex-shrink:0; }
  .brand{ font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:19px; letter-spacing:-0.4px; display:flex; align-items:center; gap:7px; }
  .brand .dot{ width:8px; height:8px; border-radius:50%; background:var(--botany); animation:metisDot 1.4s ease-in-out infinite; }
  @keyframes metisDot{0%,100%{opacity:1;}50%{opacity:.35;}}
  .brand small{color:var(--dim-2); font-weight:600; font-size:9.5px; letter-spacing:1px; font-family:var(--mono); text-transform:uppercase;}
  .topbar-right{display:flex; align-items:center; gap:8px;}
  .chip{ display:flex; align-items:center; gap:5px; background:var(--card); border:1px solid var(--line); padding:7px 11px; border-radius:var(--radius-pill); font-size:11px; color:var(--dim); font-family:var(--mono); box-shadow:var(--shadow-card); }
  .chip b{color:var(--text); font-weight:600;}
  .gear{ width:34px; height:34px; border-radius:50%; background:var(--card); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--dim); transition:color .2s, background .2s, transform .2s; flex-shrink:0; box-shadow:var(--shadow-card);}
  .gear:hover{color:var(--text); transform:rotate(20deg);}
  .gear svg{width:15px; height:15px;}
  #adminBtn:hover{ color:var(--chem); transform:rotate(0deg) scale(1.06); }
  .avatar{ width:34px; height:34px; border-radius:50%; background:var(--botany); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; font-weight:700; font-size:13px; color:var(--on-accent); flex-shrink:0; transition:opacity .15s ease; overflow:hidden; box-shadow:var(--shadow-card); }
  .avatar:active{ opacity:0.7; }
  .avatar img{ width:100%; height:100%; object-fit:cover; }

  .ekg-wrap{ display:none; flex-shrink:0; margin:6px 16px 4px; padding:9px 12px; background:linear-gradient(180deg, var(--card), var(--card-2)); border:1px solid var(--line); border-radius:var(--radius); align-items:center; gap:10px; overflow:hidden; position:relative; }
  .glow-field{ flex:1; height:40px; position:relative; overflow:hidden; min-width:0; border-radius:14px; background:transparent; }
  .glow-orb{ position:absolute; left:50%; bottom:-16px; width:44px; height:44px; border-radius:50%; background:radial-gradient(circle, rgba(47,143,91,.55), rgba(47,143,91,0) 72%); filter:blur(3px); transform:translateX(-50%); transition:width .7s ease, height .7s ease, opacity .7s ease; opacity:.35; pointer-events:none; }
  .particle-layer{ position:absolute; inset:0; }
  .particle{ position:absolute; bottom:2px; width:6px; height:6px; border-radius:50%; opacity:0; animation-name:particleRise; animation-timing-function:ease-in; animation-iteration-count:infinite; }
  @keyframes particleRise{ 0%{ transform:translateY(0) scale(0.5); opacity:0; } 12%{ opacity:.9; } 80%{ opacity:.5; } 100%{ transform:translateY(-34px) scale(1.05); opacity:0; } }
  .ekg-stats{ text-align:right; flex-shrink:0; }
  .metis-label{ font-size:10.5px; color:var(--dim); font-weight:500; }
  .ekg-sub{ font-size:9.5px; color:var(--dim-2); margin-top:3px; }

  main{ flex:1; overflow:hidden; position:relative; }
  .panel{ position:absolute; inset:0; padding:14px 16px 90px; overflow-y:auto; -webkit-overflow-scrolling:touch; opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .28s ease, transform .28s ease; }
  /* Maya's tab is chat-only now: make the panel itself a flex column filling the full
     screen height, so the message list (not the whole panel) is what scrolls, and the
     input row always sits pinned just above the bottom nav — a real full-screen chat UI. */
  .panel[data-panel="analysis"]{ display:flex; flex-direction:column; overflow:hidden; padding-bottom:calc(70px + env(safe-area-inset-bottom) + 14px); }
  .panel[data-panel="analysis"] .maya-chat-head{ flex:0 0 auto; }
  .panel[data-panel="analysis"] .ai-usage-badge{ flex:0 0 auto; }
  .panel[data-panel="analysis"] .maya-chat-box{ flex:1; min-height:0; margin-bottom:0; }
  .panel[data-panel="analysis"] .maya-chat-list{ flex:1; min-height:0; max-height:none; }
  .panel::-webkit-scrollbar{width:4px;}
  .panel::-webkit-scrollbar-thumb{background:var(--line); border-radius:14px;}
  .panel.active{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .panel:not(.active){ content-visibility:hidden; }

  .section-title{ font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:700; color:var(--text); letter-spacing:-0.2px; margin:26px 0 12px; display:flex; align-items:center; gap:6px; }
  .section-title:first-child{margin-top:2px;}

  .vitals-card{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px 20px; display:flex; flex-direction:column; gap:16px; opacity:0; animation:riseIn .5s ease forwards; box-shadow:var(--shadow-card); overflow:hidden; }
  .vitals-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--botany); }
  @keyframes riseIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
  .vitals-hero{ display:flex; flex-direction:column; gap:10px; }
  .vitals-num-row{ display:flex; align-items:baseline; gap:7px; }
  .vitals-num-row .num{ font-family:'Space Grotesk',sans-serif; font-size:38px; font-weight:800; line-height:1; letter-spacing:-1px; transition:transform .25s ease; }
  .vitals-num-row .num.bump{ animation:numBump .3s ease; }
  @keyframes numBump{ 0%{transform:scale(1);} 40%{transform:scale(1.18);} 100%{transform:scale(1);} }
  .vitals-num-row .lbl{ font-size:12px; color:var(--dim); letter-spacing:0.2px; font-family:var(--mono); }
  .vitals-bar-track{ height:8px; border-radius:10px; background:var(--bg-2); overflow:hidden; }
  .vitals-bar-fill{ height:100%; border-radius:10px; width:0%; background:var(--botany); transition:width 1s cubic-bezier(.4,0,.2,1); }
  .vitals-legend{ display:flex; flex-direction:column; gap:12px; }
  .leg-row{ display:flex; flex-direction:column; gap:5px; }
  .leg-top{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; gap:6px; }
  .leg-name{ display:flex; align-items:center; gap:6px; color:var(--text); font-weight:500; white-space:nowrap; }
  .leg-swatch{ width:8px; height:8px; border-radius:8px; flex-shrink:0; }
  .leg-val{ font-family:var(--mono); color:var(--dim); font-size:11px; white-space:nowrap;}
  .leg-bar-track{ height:5px; border-radius:8px; background:var(--bg-2); overflow:hidden; }
  .leg-bar-fill{ height:100%; border-radius:8px; width:0%; transition:width 1s cubic-bezier(.4,0,.2,1); }

  .streak-row{ display:flex; gap:8px; margin-top:14px; }
  .streak-card{ flex:1; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 8px; text-align:center; opacity:0; animation:riseIn .5s ease forwards; animation-delay:.08s; box-shadow:var(--shadow-card); }
  .streak-card:first-child{ border-left:1px solid var(--line); }
  .streak-card .big{ font-family:'Space Grotesk',sans-serif; font-size:21px; font-weight:800; }
  .streak-card .small{ font-size:9px; color:var(--dim-2); margin-top:4px; letter-spacing:.6px;}
  .flame{ font-size:15px; display:inline-block; animation:flameFlicker 1.6s ease-in-out infinite; }
  @keyframes flameFlicker{ 0%,100%{ transform:scale(1) rotate(-2deg); } 50%{ transform:scale(1.12) rotate(2deg); } }

  .quote-card{ position:relative; overflow:hidden; margin-top:14px; padding:15px 17px; border-radius:var(--radius-sm); background:var(--card); border:1px solid var(--line); border-left:4px solid var(--chem); font-size:13px; line-height:1.5; color:var(--text); font-style:italic; opacity:0; animation:riseIn .5s ease forwards; animation-delay:.16s; transition:opacity .2s ease; box-shadow:var(--shadow-card); }
  .quote-card .qauthor{ display:block; margin-top:6px; font-style:normal; font-size:10.5px; color:var(--dim); font-weight:600; font-family:var(--mono); text-transform:uppercase; letter-spacing:0.4px;}


  .subj-pills{ display:flex; gap:8px; margin-bottom:18px; }
  .subj-pills .pill{
    flex:1; position:relative; display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:12px 4px 10px; border-radius:16px; border:1px solid var(--line); background:var(--card);
    color:var(--dim); cursor:pointer;
    transition:transform .22s cubic-bezier(.34,1.56,.64,1), border-color .2s, background .2s, box-shadow .2s;
  }
  .subj-pills .pill:active{ transform:scale(.96); }
  .subj-pills .pill .badge{
    width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--accent, var(--dim-2)) 14%, transparent);
    transition:background .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
  }
  .subj-pills .pill .badge svg{ width:17px; height:17px; stroke:var(--accent, var(--dim)); transition:stroke .25s ease; }
  .subj-pills .pill .label{ font-family:'Space Grotesk',sans-serif; font-size:11px; font-weight:700; color:var(--text); }
  .subj-pills .pill .pct{ font-family:var(--mono); font-size:9.5px; color:var(--dim-2); font-weight:500; }
  .subj-pills .pill.active{
    border-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, var(--card));
    box-shadow:0 4px 14px -4px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  .subj-pills .pill.active .badge{ background:var(--accent); transform:scale(1.06); }
  .subj-pills .pill.active .badge svg{ stroke:var(--on-accent); }
  .subj-pills .pill.active .pct{ color:var(--accent); }

  /* ---------- log-time subject chips: scrollable individual chips, not a shared segmented track ---------- */
  .subj-chips{ display:flex; gap:8px; margin-bottom:14px; overflow-x:auto; padding:2px 2px 4px; scrollbar-width:none; -ms-overflow-style:none; }
  .subj-chips::-webkit-scrollbar{ display:none; }
  .subj-chips .pill{
    flex:0 0 auto; display:flex; flex-direction:row; align-items:center; gap:8px; padding:8px 16px 8px 8px;
    border-radius:var(--radius-pill); border:1.5px solid var(--line); background:var(--card); color:var(--text);
    font-size:12.5px; font-weight:600; white-space:nowrap; cursor:pointer;
    transition:border-color .2s, background .2s, box-shadow .2s, transform .2s cubic-bezier(.34,1.56,.64,1);
  }
  .subj-chips .pill:active{ transform:scale(.96); }
  .subj-chips .pill .badge{
    width:26px; height:26px; border-radius:9px; display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--accent, var(--dim-2)) 14%, transparent);
    transition:background .25s ease;
  }
  .subj-chips .pill .badge svg{ width:14px; height:14px; stroke:var(--accent, var(--dim)); }
  .subj-chips .pill.active{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, var(--card)); box-shadow:0 4px 14px -4px color-mix(in srgb, var(--accent) 45%, transparent); }
  .subj-chips .pill.active .badge{ background:var(--accent); }
  .subj-chips .pill.active .badge svg{ stroke:var(--on-accent); }

  .chap-progress{ height:6px; border-radius:14px; background:var(--card); overflow:hidden; margin-bottom:12px; border:1px solid var(--line); position:relative; }
  .chap-progress-fill{ height:100%; border-radius:14px; transition:width .6s cubic-bezier(.4,0,.2,1); position:relative; overflow:hidden; }
  .chap-progress-fill::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); animation:shimmer 2.2s linear infinite; }

  /* ---------- class-wise completion card ---------- */
  .classwise-card{ display:flex; flex-direction:column; gap:14px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:4px; }
  .cw-row-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
  .cw-label{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px; }
  .cw-pct{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--dim); }
  .cw-bar{ height:8px; border-radius:14px; background:var(--bg-2); overflow:hidden; border:1px solid var(--line); }
  .cw-bar-fill{ height:100%; border-radius:14px; transition:width .6s cubic-bezier(.4,0,.2,1); }
  .cw-sub{ font-size:11px; color:var(--dim-2); margin-top:5px; }
  @keyframes shimmer{ 0%{ transform:translateX(-100%);} 100%{ transform:translateX(100%);} }

  .chap-list{ display:flex; flex-direction:column; gap:8px; }
  .chap-item{ display:flex; align-items:center; gap:12px; padding:12px; background:var(--card); border:1px solid var(--line); border-radius:14px; cursor:pointer; transition:border-color .2s, background .2s; }
  .chap-item.done{ background:rgba(47,143,91,0.05); }
  .chk{ width:22px; height:22px; border-radius:14px; border:2px solid var(--dim-2); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all .2s ease; }
  .chk svg{ width:13px; height:13px; opacity:0; transform:scale(0.5); transition:all .2s ease; }
  .chap-item.done .chk svg{ opacity:1; transform:scale(1); }
  .chap-num{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--dim-2); width:18px; flex-shrink:0;}
  .chap-name{ font-size:13.5px; flex:1; color:var(--text); }
  .chap-item.done .chap-name{ color:var(--dim); text-decoration:line-through; text-decoration-color:var(--dim-2); }

  .manual-add{ margin-top:14px; width:100%; opacity:0; animation:riseIn .5s ease forwards; animation-delay:.28s; }
  .manual-row{ display:flex; gap:8px; flex-wrap:wrap;}
  .manual-btn{ flex:1; min-width:70px; padding:10px; border-radius:14px; border:1px solid var(--line); background:var(--card); color:var(--text); font-size:12px; font-weight:600; cursor:pointer; transition:transform .15s ease; }
  .manual-btn:active{ transform:scale(0.94); }

  .test-form{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px; margin-bottom:16px; }
  .test-subj-row{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
  .test-subj-row .tsr-label{ font-size:12px; font-weight:600; width:78px; flex-shrink:0; display:flex; align-items:center; gap:5px;}
  .test-subj-row input{ background:var(--bg-2); border:1px solid var(--line); border-radius:14px; color:var(--text); padding:8px; font-family:'JetBrains Mono',monospace; font-size:13px; width:100%; min-width:0; }
  .test-subj-row input:focus{ outline:none; border-color:var(--botany); }
  .test-subj-row .slash{ color:var(--dim-2); font-size:12px; flex-shrink:0;}
  .add-test-btn{ width:100%; padding:13px; border-radius:var(--radius-pill); border:none; background:var(--botany); color:var(--on-accent); font-weight:700; font-size:13px; cursor:pointer; transition:transform .15s ease; margin-top:4px;}
  .add-test-btn:active{ transform:scale(0.97); }
  .add-test-btn:disabled{ opacity:0.5; }

  .chart-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 10px 8px; margin-bottom:14px; height:140px; display:flex; align-items:flex-end; gap:5px; }
  .chart-bar-wrap{ flex:1; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; gap:6px;}
  .chart-bar{ width:65%; border-radius:24px 24px 0 0; background:var(--botany); transition:height .6s cubic-bezier(.4,0,.2,1); min-height:2px;}
  .chart-lbl{ font-size:8.5px; color:var(--dim-2); font-family:'JetBrains Mono',monospace;}
  .chart-sub{ font-size:10.5px; color:var(--dim); text-align:center; margin:-6px 0 16px; }
  .study-chart .chart-bar{ background:rgba(62,111,217,0.5); }
  .study-chart .chart-bar.today{ background:var(--physics); }

  .test-list{ display:flex; flex-direction:column; gap:8px; }
  .test-row{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .test-row .tdate{ font-size:11px; color:var(--dim); }
  .test-row .tscore{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:15px; text-align:right; flex-shrink:0;}
  .test-row .tbreak{ font-size:9.5px; color:var(--dim-2); margin-top:3px; line-height:1.5;}

  .empty-state{ text-align:center; padding:26px 10px; color:var(--dim); font-size:13px; }
  .empty-state .em{ font-size:26px; display:block; margin-bottom:8px; }

  /* ---------- Daily AI quiz ---------- */
  .quiz-card{ background:var(--card); border:1px solid var(--line); border-left:3px solid var(--botany); border-radius:16px; padding:16px; margin-bottom:4px; box-shadow:var(--shadow-card); }
  .quiz-intro{ font-size:12.5px; color:var(--dim); line-height:1.5; margin-bottom:12px; }
  .quiz-gen-btn{ width:100%; padding:14px; border-radius:var(--radius-pill); border:none; background:var(--botany); color:var(--on-accent); font-weight:700; font-size:13px; cursor:pointer; transition:transform .15s ease; }
  .quiz-gen-btn:active{ transform:scale(0.97); }
  .quiz-gen-btn:disabled{ opacity:0.5; }
  .quiz-meta-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .quiz-progress-txt{ font-size:10.5px; color:var(--dim); font-weight:600; letter-spacing:.3px; text-transform:uppercase; }
  .quiz-q-block{ margin-bottom:16px; }
  .quiz-q-block:last-of-type{ margin-bottom:12px; }
  .quiz-q-num{ font-size:10px; color:var(--dim-2); font-weight:700; letter-spacing:.4px; margin-bottom:4px; }
  .quiz-q-text{ font-size:13.5px; font-weight:600; line-height:1.4; margin-bottom:8px; }
  .quiz-opt{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:10px 12px; border-radius:14px; border:1px solid var(--line); background:var(--card); color:var(--text); font-size:12.5px; cursor:pointer; margin-bottom:6px; transition:transform .1s ease, border-color .15s ease, background .15s ease; }
  .quiz-opt:active{ transform:scale(0.98); }
  .quiz-opt .qo-dot{ flex-shrink:0; width:16px; height:16px; border-radius:50%; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:10px; }
  .quiz-opt.selected{ border-color:var(--physics); background:rgba(62,111,217,0.08); }
  .quiz-opt.selected .qo-dot{ border-color:var(--physics); background:var(--physics); color:#fff; }
  .quiz-opt.correct{ border-color:var(--botany); background:rgba(47,143,91,0.12); }
  .quiz-opt.correct .qo-dot{ border-color:var(--botany); background:var(--botany); color:var(--on-accent); }
  .quiz-opt.wrong{ border-color:var(--danger); background:rgba(178,58,78,0.1); }
  .quiz-opt.wrong .qo-dot{ border-color:var(--danger); background:var(--danger); color:#fff; }
  .quiz-opt:disabled{ cursor:default; }
  .quiz-score-badge{ text-align:center; padding:14px; margin-bottom:12px; }
  .quiz-score-badge .qs-num{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:26px; color:var(--accent-text); }
  .quiz-score-badge .qs-lbl{ font-size:10px; color:var(--dim); letter-spacing:.6px; text-transform:uppercase; font-weight:600; margin-top:2px; }
  .quiz-chap-tags{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
  .quiz-chap-tag{ font-size:9.5px; color:var(--dim); background:var(--card); border:1px solid var(--line); border-radius:14px; padding:3px 9px; }

  /* ---------- Maya AI chat ---------- */
  .maya-chat-head{ margin:2px 0 14px; }
  .maya-chat-title{ display:flex; align-items:center; gap:12px; }

  /* orb: layered radial gradient + soft outer glow + a subtle "breathing" halo ring,
     replacing the flat single-color circle */
  .maya-orb{
    width:40px; height:40px; border-radius:50%; flex-shrink:0; position:relative;
    background:radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--botany) 70%, white) 0%, var(--botany) 55%, color-mix(in srgb, var(--botany) 80%, black) 100%);
    box-shadow:0 4px 14px -2px color-mix(in srgb, var(--botany) 55%, transparent), inset 0 1px 1px rgba(255,255,255,0.4);
  }
  .maya-orb::before{
    content:""; position:absolute; inset:-1px; border-radius:50%;
    background:conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--botany) 55%, transparent) 20%, transparent 40%);
    animation:mayaOrbSheen 3.5s linear infinite;
  }
  @keyframes mayaOrbSheen{ to{ transform:rotate(360deg); } }
  .maya-orb::after{ content:""; position:absolute; inset:0; border-radius:50%; border:1px solid color-mix(in srgb, var(--botany) 55%, transparent); animation:mayaMetisRing 2.2s ease-out infinite; }
  @keyframes mayaMetisRing{ 0%{ transform:scale(0.85); opacity:0.9; } 100%{ transform:scale(1.9); opacity:0; } }
  .mct-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16.5px; color:var(--text); letter-spacing:-0.1px; }
  .mct-badge{ display:flex; align-items:center; gap:5px; font-size:10.5px; color:var(--dim); font-weight:600; letter-spacing:0.2px; margin-top:2px; }
  .mct-badge .live-dot{ width:5px; height:5px; border-radius:50%; background:var(--botany); box-shadow:0 0 5px color-mix(in srgb, var(--botany) 70%, transparent); flex-shrink:0; animation:liveDotPulse 1.8s ease-in-out infinite; }
  @keyframes liveDotPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

  /* the whole chat card: header bar (implicit, above), a recessed message well, and a
     distinct input bar — three visually separated zones instead of one flat box */
  .maya-chat-box{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:10px; margin-bottom:22px; display:flex; flex-direction:column;
    box-shadow:var(--shadow-card);
  }
  .maya-chat-list{
    display:flex; flex-direction:column; gap:12px; max-height:340px; overflow-y:auto;
    padding:12px 8px 10px; scrollbar-width:thin;
    background:var(--bg-2); border-radius:calc(var(--radius) - 6px);
    box-shadow:inset 0 1px 3px rgba(0,0,0,0.06);
  }
  [data-theme="dark"] .maya-chat-list{ box-shadow:inset 0 2px 6px rgba(0,0,0,0.35); }

  .chat-row{ display:flex; align-items:flex-end; gap:7px; max-width:92%; }
  .chat-row.user-row{ align-self:flex-end; flex-direction:row-reverse; }
  .chat-row.assistant-row{ align-self:flex-start; }
  .chat-avatar{
    width:22px; height:22px; border-radius:50%; flex-shrink:0; margin-bottom:2px;
    background:radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--botany) 70%, white) 0%, var(--botany) 55%, color-mix(in srgb, var(--botany) 80%, black) 100%);
    box-shadow:0 2px 6px -1px color-mix(in srgb, var(--botany) 50%, transparent);
  }

  .chat-bubble{ max-width:100%; padding:10px 13px; border-radius:14px; font-size:13px; line-height:1.55; animation:riseIn .25s ease; }
  .chat-bubble p{ margin:0 0 6px; }
  .chat-bubble p:last-child{ margin-bottom:0; }
  .chat-bubble b{ color:inherit; font-weight:700; }
  .chat-bubble ul, .chat-bubble ol{ margin:0 0 6px; padding-left:18px; }
  .chat-bubble ul:last-child, .chat-bubble ol:last-child{ margin-bottom:0; }
  .chat-bubble li{ margin-bottom:3px; }
  .chat-bubble li:last-child{ margin-bottom:0; }
  .chat-bubble .stream-cursor{ display:inline-block; width:2px; height:12px; background:currentColor; margin-left:2px; vertical-align:-1px; animation:cursorBlink .9s steps(1) infinite; }
  @keyframes cursorBlink{ 0%,50%{ opacity:1; } 50.01%,100%{ opacity:0; } }
  .stream-error-note{ margin-top:6px !important; font-size:11px; color:var(--zoology); opacity:0.85; }
  .chat-bubble.user{ background:linear-gradient(155deg, color-mix(in srgb, var(--botany) 85%, white), var(--botany)); color:var(--on-accent); border-radius:16px 16px 4px 16px; box-shadow:0 3px 10px -2px color-mix(in srgb, var(--botany) 45%, transparent); }
  .chat-bubble.assistant{ background:var(--card); border:1px solid var(--line); color:var(--text); border-radius:16px 16px 16px 4px; box-shadow:var(--shadow-card); }
  .chat-bubble.assistant b{ color:var(--accent-text); }
  .chat-bubble.system-note{ align-self:center; background:color-mix(in srgb, var(--botany) 8%, transparent); border:1px dashed color-mix(in srgb, var(--botany) 35%, transparent); color:var(--accent-text); font-size:11.5px; font-weight:600; text-align:center; padding:7px 12px; border-radius:14px; }
  .chat-bubble.typing{ display:flex; align-items:center; gap:4px; padding:12px 14px; }
  .chat-bubble.typing span{ width:6px; height:6px; border-radius:50%; background:var(--dim); animation:dotBounce 1s infinite ease-in-out; }
  .chat-bubble.typing span:nth-child(2){animation-delay:.15s;}
  .chat-bubble.typing span:nth-child(3){animation-delay:.3s;}

  .chat-suggest-row{ display:flex; gap:7px; overflow-x:auto; padding:10px 2px 2px; scrollbar-width:none; }
  .chat-suggest-row::-webkit-scrollbar{ display:none; }
  .chat-suggest-chip{ flex-shrink:0; white-space:nowrap; background:var(--card-2); border:1px solid var(--line); color:var(--dim); font-size:11.5px; font-weight:600; padding:7px 12px; border-radius:14px; cursor:pointer; transition:border-color .2s, color .2s, background .2s; }
  .chat-suggest-chip:hover, .chat-suggest-chip:active{ border-color:var(--botany); color:var(--accent-text); background:color-mix(in srgb, var(--botany) 8%, var(--card-2)); }
  .chat-suggest-chip:disabled{ opacity:0.5; }

  .maya-chat-inputrow{
    display:flex; gap:8px; margin-top:10px; padding:6px; border-radius:calc(var(--radius) - 4px);
    background:var(--bg-2); border:1px solid var(--line);
  }
  .maya-chat-inputrow input{ flex:1; min-width:0; padding:8px 10px; border-radius:10px; border:none; background:transparent; color:var(--text); font-size:13.5px; font-family:'Inter',sans-serif; }
  .maya-chat-inputrow input:focus{ outline:none; }
  .maya-chat-inputrow input::placeholder{ color:var(--dim-2); }
  .maya-chat-inputrow button{ width:38px; height:38px; flex-shrink:0; border-radius:50%; border:none; background:var(--botany); color:var(--on-accent); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .15s ease, opacity .2s ease; box-shadow:0 2px 8px -1px color-mix(in srgb, var(--botany) 55%, transparent); }
  .maya-chat-inputrow button svg{ width:16px; height:16px; }
  .maya-chat-inputrow button:active{ transform:scale(0.92); }
  .maya-chat-inputrow button:disabled{ opacity:0.5; box-shadow:none; }

  .analysis-intro{ font-size:12.5px; color:var(--dim); line-height:1.5; margin-bottom:16px; }
  .ai-usage-badge{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600; color:var(--dim); background:var(--card); border:1px solid var(--line); padding:5px 10px; border-radius:14px; margin:-8px 0 14px; }
  .ai-usage-badge.low{ color:var(--chem); border-color:var(--chem); }
  .ai-usage-badge.out{ color:var(--danger); border-color:var(--danger); }
  #genReportBtn{ display:flex; align-items:center; justify-content:center; gap:8px; }
  .report-meta{ font-size:10.5px; color:var(--dim-2); margin:12px 0 4px; display:flex; justify-content:space-between; align-items:center;}
  .report-meta button{ background:none; border:1px solid var(--line); color:var(--dim); border-radius:14px; padding:4px 10px; font-size:10.5px; cursor:pointer;}
  .report-box{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; font-size:13px; line-height:1.65; color:var(--text); }
  .report-box h4{ font-family:'Space Grotesk',sans-serif; font-size:13px; color:var(--accent-text); margin:14px 0 6px; text-transform:uppercase; letter-spacing:0.6px;}
  .report-box h4:first-child{margin-top:0;}
  .report-box ul{ margin:4px 0 10px; padding-left:18px; }
  .report-box li{ margin-bottom:5px; }
  .report-box p{ margin:0 0 10px; }
  .report-box b{ color:var(--accent-text); }
  .report-footer{ margin-top:14px; padding-top:12px; border-top:1px dashed var(--line); font-size:10.5px; color:var(--dim-2); display:flex; align-items:center; gap:6px;}
  .loading-dots{ display:inline-flex; gap:3px; }
  .loading-dots span{ width:5px; height:5px; border-radius:50%; background:var(--on-accent); animation:dotBounce 1s infinite ease-in-out; }
  .loading-dots span:nth-child(2){animation-delay:.15s;}
  .loading-dots span:nth-child(3){animation-delay:.3s;}
  @keyframes dotBounce{0%,80%,100%{transform:scale(0.6); opacity:0.4;}40%{transform:scale(1); opacity:1;}}

  /* ---------- planner ---------- */
  .planner-form{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px; margin-bottom:16px; }
  .planner-form .subj-pills{ margin-top:2px; margin-bottom:14px; }
  .plannerDurBtn.active{ background:var(--botany); color:var(--on-accent); border-color:var(--botany); }
  .planner-list{ display:flex; flex-direction:column; gap:8px; }
  .planner-item{ display:flex; align-items:center; gap:10px; padding:12px; background:var(--card); border:1px solid var(--line); border-radius:14px; transition:border-color .2s, background .2s; }
  .planner-item.done{ background:rgba(47,143,91,0.05); }
  .planner-time{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--dim); width:40px; flex-shrink:0; text-align:center; }
  .planner-body{ flex:1; min-width:0; cursor:pointer; }
  .planner-task{ font-size:13.5px; color:var(--text); }
  .planner-item.done .planner-task{ color:var(--dim); text-decoration:line-through; text-decoration-color:var(--dim-2); }
  .planner-meta{ font-size:10px; color:var(--dim-2); margin-top:3px; display:flex; align-items:center; gap:5px;}
  .planner-swatch{ width:7px; height:7px; border-radius:14px; display:inline-block; flex-shrink:0; }
  .planner-del{ width:24px; height:24px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--dim-2); cursor:pointer; transition:color .2s, background .2s; font-size:13px; }
  .planner-del:hover{ color:var(--danger); background:rgba(178,58,78,0.1); }

  /* ---------- rank estimate ---------- */
  .rank-card{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px; text-align:center; margin-bottom:20px; position:relative; box-shadow:var(--shadow-card); }
  .rank-card .rank-num{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:30px; color:var(--accent-text); letter-spacing:0.5px; }
  .rank-card .rank-lbl{ font-size:10px; color:var(--dim); letter-spacing:0.8px; margin-top:3px; text-transform:uppercase; font-weight:600; }
  .rank-card .rank-sub{ font-size:12px; color:var(--dim); margin-top:12px; line-height:1.5; }
  .rank-card .rank-sub b{ color:var(--text); }
  .rank-card .rank-disclaimer{ font-size:9.5px; color:var(--dim-2); margin-top:12px; line-height:1.45; padding-top:10px; border-top:1px dashed var(--line); }
  .rank-badges{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
  .confidence-badge{ display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; padding:3px 10px; border-radius:14px; border:1px solid; }
  .rank-trend{ font-size:11px; font-weight:600; }
  .rank-trend.up{ color:var(--accent-text); }
  .rank-trend.down{ color:var(--danger); }
  .rank-trend.flat{ color:var(--dim); }

  nav.tabs{
    position:absolute; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom));
    height:64px; display:flex; align-items:center;
    background:var(--card);
    border:1px solid var(--line); border-radius:var(--radius-pill);
    max-width:540px; margin:0 auto; box-shadow:var(--shadow-raised);
    padding:6px;
  }
  .navbtn{ flex:1; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:none; border:none; border-radius:var(--radius-pill); color:var(--dim-2); cursor:pointer; font-size:8px; font-weight:700; font-family:'Inter',sans-serif; transition:color .2s ease, background .25s cubic-bezier(.34,1.56,.64,1); position:relative; padding:0 2px; }
  .navbtn svg{ width:19px; height:19px; transition:transform .2s ease; }
  .navbtn.active{ color:var(--on-accent); background:var(--botany); }
  .navbtn.active svg{ transform:translateY(-2px); }
  .navbtn .nub{ display:none; }

  .modal-overlay{ position:absolute; inset:0; background:rgba(5,7,12,0.72); display:flex; align-items:flex-end; z-index:50; opacity:0; pointer-events:none; transition:opacity .2s ease; will-change:opacity; }
  #forgotPasswordModal{ position:fixed; z-index:600; }
  .modal-overlay:not(.show){ content-visibility:hidden; }
  .modal-overlay.show{ opacity:1; pointer-events:auto; }
  .modal-sheet{ background:var(--card); border:1px solid var(--line); border-bottom:none; border-radius:24px 24px 0 0; width:100%; padding:20px; transform:translateY(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); max-height:85%; overflow-y:auto; box-shadow:var(--shadow-raised); }
  .modal-overlay.show .modal-sheet{ transform:translateY(0); }
  .modal-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; color:var(--text); margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .field-row{ margin-bottom:14px; }
  .field-row label{ font-size:12px; color:var(--text); font-weight:700; display:block; margin-bottom:6px;}
  .field-row input, .field-row textarea, .field-row select{ width:100%; background:var(--bg-2); border:1px solid var(--line); border-radius:14px; color:var(--text); padding:10px; font-family:'JetBrains Mono',monospace; font-size:13px; resize:vertical; }
  .field-row input:focus, .field-row textarea:focus, .field-row select:focus{ outline:none; border-color:var(--botany); }
  .field-row select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238592a6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:16px; padding-right:32px; }

  /* ---------- custom calendar date picker (replaces native <input type=date>,
     which popped its OS calendar UI over the modal's Save button in-app) ----------
     The panel expands INLINE, in normal document flow, so it can never overlay
     or hide any button — it just pushes the rest of the sheet down, and the
     sheet already scrolls. */
  .date-picker-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--bg-2); border:1px solid var(--line); border-radius:14px; color:var(--text); padding:10px 12px; font-family:'JetBrains Mono',monospace; font-size:13px; cursor:pointer; transition:border-color .15s ease; }
  .date-picker-btn:hover{ border-color:var(--botany); }
  .date-picker-btn.open{ border-color:var(--botany); border-radius:24px 24px 0 0; }
  .date-picker-icon{ font-size:14px; line-height:1; opacity:.8; }
  .date-picker-panel{ max-height:0; overflow:hidden; background:var(--card); border:1px solid var(--line); border-top:none; border-radius:0 0 18px 18px; transition:max-height .25s ease; }
  .date-picker-panel.show{ max-height:340px; }
  .date-picker-header{ display:flex; align-items:center; justify-content:space-between; padding:10px 10px 2px; }
  .date-picker-nav{ background:var(--bg-2); border:1px solid var(--line); border-radius:14px; color:var(--text); width:26px; height:26px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; font-family:'Inter',sans-serif; padding:0; }
  .date-picker-nav:active{ transform:scale(0.92); }
  .date-picker-month{ font-weight:600; font-size:12.5px; font-family:'Space Grotesk',sans-serif; color:var(--text); }
  .date-picker-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); padding:6px 8px 0; }
  .date-picker-weekdays span{ text-align:center; font-size:10px; color:var(--dim-2); font-weight:700; }
  .date-picker-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; padding:4px 8px 10px; }
  .date-picker-day{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:12px; border-radius:14px; cursor:pointer; color:var(--text); font-family:'Inter',sans-serif; border:1px solid transparent; background:none; }
  .date-picker-day:hover{ background:var(--bg-2); }
  .date-picker-day.other-month{ color:var(--dim-2); opacity:.35; }
  .date-picker-day.today{ border-color:var(--botany); }
  .date-picker-day.selected{ background:var(--botany); color:var(--on-accent); font-weight:700; }
  .field-hint{ font-size:10px; color:var(--dim-2); margin-top:5px; line-height:1.4; }
  .theme-pick{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
  .theme-opt{ padding:10px 4px; border-radius:14px; border:1px solid var(--line); background:var(--bg-2); color:var(--dim); font-size:12px; font-weight:600; font-family:'Inter',sans-serif; cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease; }
  .theme-opt.active{ border-color:var(--botany); color:var(--accent-text); background:rgba(47,143,91,0.08); }
  .sub-status-box{ background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:14px; }
  .sub-status-box .sub-plan-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; display:flex; align-items:center; gap:6px; }
  .sub-status-box .sub-detail{ font-size:11.5px; color:var(--dim); margin-top:4px; line-height:1.5; }
  .sub-status-box .upgrade-btn{ width:100%; margin-top:12px; padding:13px; border-radius:var(--radius-pill); border:none; background:var(--botany); color:var(--on-accent); font-weight:700; font-size:13px; cursor:pointer; transition:transform .15s ease, opacity .2s ease; }
  .sub-status-box .upgrade-btn:active{ transform:scale(0.97); }
  .sub-status-box .upgrade-btn:disabled{ opacity:0.6; cursor:default; }
  .sub-status-box.is-pro{ border-color:var(--botany); border-left:3px solid var(--botany); background:var(--bg-2); }

  /* ---------- Profile fullscreen panel ---------- */
  .profile-hero{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:8px 0 22px; }
  .profile-hero-avatar{ width:72px; height:72px; border-radius:50%; background:var(--card); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:26px; color:var(--accent-text); overflow:hidden; margin-bottom:12px; }
  .profile-hero-avatar img{ width:100%; height:100%; object-fit:cover; }
  .profile-hero-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; color:var(--text); }
  .profile-hero-email{ font-size:12px; color:var(--dim); margin-top:3px; font-family:'JetBrains Mono',monospace; }
  .profile-hero-sub{ font-size:12px; color:var(--dim); margin-top:3px; }

  /* ---- Profile hub: id card, sectioned settings list ---- */
  .profile-id-card{ display:flex; align-items:center; gap:14px; background:var(--card-2); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:22px;
    opacity:0; transform:translateY(10px) scale(0.98); }
  .modal-overlay.show .profile-id-card{ animation:cardRiseIn .5s cubic-bezier(.22,1,.36,1) forwards; }
  .profile-id-card .profile-hero-avatar{ margin-bottom:0; flex-shrink:0; position:relative; }
  .profile-id-info{ min-width:0; flex:1; }
  .profile-id-info .profile-hero-name{ font-size:16px; }
  .profile-id-badges{ display:flex; align-items:center; gap:8px; margin-top:9px; flex-wrap:wrap; }
  .plan-badge{ font-size:11px; font-weight:700; padding:5px 10px; border-radius:14px; background:rgba(47,143,91,0.1); color:var(--accent-text); border:1px solid rgba(47,143,91,0.3); transition:transform .2s cubic-bezier(.34,1.56,.64,1); }
  .plan-badge.is-pro{ background:var(--botany); color:var(--on-accent); border-color:var(--botany); }
  .id-badge{ font-size:10.5px; font-weight:600; padding:5px 10px; border-radius:14px; background:var(--bg-2); color:var(--dim); border:1px solid var(--line); font-family:'JetBrains Mono',monospace; cursor:pointer; transition:transform .15s ease, border-color .15s ease; }
  .id-badge:active{ transform:scale(0.92); border-color:var(--botany); }
  .id-badge.copied{ color:var(--accent-text); border-color:var(--botany); }

  @keyframes cardRiseIn{ to{ opacity:1; transform:translateY(0) scale(1); } }

  .settings-section{ margin-bottom:20px; opacity:0; transform:translateY(10px); }
  .modal-overlay.show .settings-section{ animation:cardRiseIn .45s cubic-bezier(.22,1,.36,1) forwards; }
  .modal-overlay.show .settings-section:nth-of-type(1){ animation-delay:.06s; }
  .modal-overlay.show .settings-section:nth-of-type(2){ animation-delay:.12s; }
  .modal-overlay.show .settings-section:nth-of-type(3){ animation-delay:.18s; }
  .modal-overlay.show .settings-section:nth-of-type(4){ animation-delay:.24s; }
  .settings-section-title{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--dim); margin-bottom:8px; padding:0 2px; }
  .settings-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-card); margin-bottom:14px; }
  .settings-row{ width:100%; display:flex; align-items:center; gap:12px; padding:13px 14px; background:none; border:none; border-bottom:1px solid var(--line); text-align:left; cursor:pointer; font-family:inherit; transition:background .15s ease, transform .12s ease; }
  .settings-row:last-child{ border-bottom:none; }
  .settings-row:active{ background:var(--bg-2); transform:scale(0.985); }
  .settings-row-icon{ flex-shrink:0; width:36px; height:36px; border-radius:var(--radius-xs); display:flex; align-items:center; justify-content:center; font-size:15px; transition:transform .18s cubic-bezier(.34,1.56,.64,1); }
  .settings-row:active .settings-row-icon{ transform:scale(0.88) rotate(-4deg); }
  .settings-row-icon.icon-amber{ background:rgba(194,121,10,0.14); }
  .settings-row-icon.icon-gold{ background:rgba(255,201,71,0.16); }
  .settings-row-icon.icon-red{ background:rgba(178,58,78,0.14); }
  .settings-row-icon.icon-green{ background:rgba(47,143,91,0.14); }
  .settings-row-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .settings-row-title{ font-size:13.5px; font-weight:700; color:var(--text); font-family:'Space Grotesk',sans-serif; }
  .settings-row-sub{ font-size:11.5px; color:var(--dim); }
  .settings-row-chevron{ flex-shrink:0; color:var(--dim); font-size:18px; transition:transform .15s ease; }
  .settings-row:active .settings-row-chevron{ transform:translateX(3px); }

  .pay-edit-btn{ background:var(--bg-2); border:1px solid var(--line); color:var(--text); font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:14px; cursor:pointer; font-family:'Inter',sans-serif; transition:transform .15s ease, border-color .15s ease; }
  .pay-edit-btn:active{ transform:scale(0.94); }

  .chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
  .tag-chip{ padding:7px 13px; border-radius:14px; border:1px solid var(--line); background:var(--bg-2); color:var(--dim); font-size:12px; font-weight:700; font-family:'Inter',sans-serif; cursor:pointer;
    transition:border-color .18s ease, color .18s ease, background .18s ease, transform .28s cubic-bezier(.34,1.56,.64,1); }
  .tag-chip.active{ border-color:var(--botany); color:var(--accent-text); background:rgba(47,143,91,0.08); animation:chipPop .32s cubic-bezier(.34,1.56,.64,1); }
  .tag-chip:not(:disabled):active{ transform:scale(0.92); }
  .tag-chip:disabled{ cursor:default; opacity:.6; }
  @keyframes chipPop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.12); } 100%{ transform:scale(1); } }

  .two-col-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
  .two-col-row input{ width:100%; background:var(--bg-2); border:1px solid var(--line); border-radius:14px; color:var(--text); padding:10px; font-family:'JetBrains Mono',monospace; font-size:13px; transition:border-color .15s ease; }
  .two-col-row input:focus{ outline:none; border-color:var(--botany); }

  .settings-inline-field{ display:flex; align-items:center; justify-content:space-between; padding:12px 0 0; cursor:pointer; transition:opacity .15s ease; }
  .settings-inline-field:active{ opacity:.6; }
  .settings-inline-label{ font-size:12.5px; color:var(--dim); font-weight:600; }
  .settings-inline-value{ font-size:13px; color:var(--text); font-weight:700; transition:transform .2s cubic-bezier(.34,1.56,.64,1); }
  .settings-inline-value.value-bump{ animation:chipPop .32s cubic-bezier(.34,1.56,.64,1); color:var(--accent-text); }

  /* Crossfade between the view/edit sections in Profile details, instead of a hard cut */
  #pdViewSection, #pdEditSection{ animation:pdFadeIn .28s ease both; }
  @keyframes pdFadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
  .ai-usage-badge.pro{ background:var(--card-2); border-color:var(--botany); color:var(--accent-text); }
  .targets-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
  .modal-close{ width:100%; padding:14px; border-radius:var(--radius-pill); border:none; background:var(--botany); color:var(--on-accent); font-weight:700; margin-top:8px; cursor:pointer; transition:transform .15s ease; box-shadow:var(--shadow-float); }
  .modal-close:active{ transform:scale(0.98); }
  .modal-close.ghost{ background:var(--card); color:var(--text); border:1px solid var(--line); box-shadow:none; }
  .modal-row-btns{ display:flex; gap:8px; }
  .modal-row-btns .modal-close{ margin-top:0; }

  /* ---------- announcement popup ---------- */
  .announce-icon{ font-size:30px; margin-bottom:10px; display:block; }
  #announceText{ font-size:13.5px; line-height:1.6; color:var(--text); white-space:pre-wrap; }

  /* ---------- admin panel (full screen) ---------- */
  .admin-overlay{ position:fixed; inset:0; background:var(--bg); z-index:500; opacity:0; pointer-events:none; transition:opacity .22s ease; display:flex; justify-content:center; }
  .admin-overlay:not(.show){ content-visibility:hidden; }
  .admin-overlay.show{ opacity:1; pointer-events:auto; }
  .admin-shell{ width:100%; max-width:900px; height:100%; display:flex; flex-direction:column; background:var(--bg); }

  .admin-topbar{ display:flex; align-items:center; gap:14px; padding:16px 18px; border-bottom:1px solid var(--line); background:var(--bg-2); flex-shrink:0; flex-wrap:wrap; }
  .admin-brand{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px; white-space:nowrap; }
  .admin-brand .dot{ width:7px; height:7px; border-radius:10px; background:var(--chem); }
  .admin-tabs{ display:flex; gap:6px; overflow-x:auto; flex:1; scrollbar-width:none; }
  .admin-tabs::-webkit-scrollbar{ display:none; }
  .admin-tab{ background:transparent; border:1px solid var(--line); color:var(--dim); font-size:12px; font-weight:600; padding:8px 13px; border-radius:14px; cursor:pointer; white-space:nowrap; transition:all .18s ease; flex-shrink:0; }
  .admin-tab:hover{ color:var(--text); }
  .admin-tab.active{ background:var(--chem); color:var(--on-accent); border-color:var(--chem); }
  .admin-close{ cursor:pointer; color:var(--dim); font-size:20px; line-height:1; padding:4px 6px; flex-shrink:0; transition:color .15s ease, transform .15s ease; }
  .admin-close:hover{ color:var(--text); transform:rotate(90deg); }

  .admin-body{ flex:1; overflow-y:auto; padding:20px; }
  .admin-section{ display:none; opacity:0; animation:riseIn .35s ease forwards; }
  .admin-section.active{ display:block; }
  .admin-section-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; margin-bottom:14px; }

  .admin-stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:20px; }
  .admin-stat-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; }
  .admin-stat-num{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:22px; color:var(--accent-text); }
  .admin-stat-label{ font-size:10.5px; color:var(--dim); margin-top:3px; }
  .admin-stage-bars{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; }
  .admin-stage-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:12px; }
  .admin-stage-row:last-child{ margin-bottom:0; }
  .admin-stage-row span:first-child{ width:64px; color:var(--dim); flex-shrink:0; }
  .admin-stage-row span:last-child{ width:34px; text-align:right; color:var(--dim); flex-shrink:0; }
  .admin-stage-track{ flex:1; height:7px; border-radius:14px; background:var(--bg-2); overflow:hidden; }
  .admin-stage-fill{ height:100%; border-radius:14px; background:var(--chem); transition:width .5s ease; }

  .admin-toolbar{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
  .admin-toolbar input{ flex:1; min-width:160px; background:var(--bg-2); border:1px solid var(--line); border-radius:14px; color:var(--text); padding:9px 12px; font-size:13px; }
  .admin-toolbar input:focus{ outline:none; border-color:var(--botany); }
  .admin-toolbar select{ background:var(--bg-2); border:1px solid var(--line); border-radius:14px; color:var(--text); padding:9px 12px; font-size:12.5px; }
  .ghost-btn{ background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:14px; padding:9px 14px; font-size:12.5px; font-weight:600; cursor:pointer; transition:transform .15s ease, border-color .15s ease; white-space:nowrap; }
  .ghost-btn:hover{ border-color:var(--botany); }
  .ghost-btn:active{ transform:scale(0.97); }

  .admin-user-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:10px; opacity:0; animation:riseIn .4s ease forwards; cursor:pointer; }
  .admin-user-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; }
  .admin-user-name{ font-weight:700; font-size:13.5px; }
  .admin-user-email{ font-size:10.5px; color:var(--dim-2); font-family:'JetBrains Mono',monospace; }
  .admin-user-stats{ display:flex; gap:12px; margin-top:8px; font-size:11.5px; color:var(--dim); flex-wrap:wrap; }
  .admin-report-toggle{ margin-top:10px; font-size:11px; color:var(--accent-text); font-weight:600; cursor:pointer; }
  .admin-report-body{ margin-top:8px; font-size:12px; line-height:1.5; border-top:1px dashed var(--line); padding-top:8px; }
  .admin-report-body h4{ font-size:11.5px; color:var(--accent-text); margin:8px 0 4px; text-transform:uppercase; }
  .admin-report-body ul{ margin:2px 0 6px; padding-left:16px; }

  .admin-key-row{ display:flex; gap:8px; }
  .admin-key-row input{ flex:1; }
  .admin-inline-status{ font-size:11.5px; color:var(--dim); margin-top:10px; min-height:14px; }
  .admin-inline-status.ok{ color:var(--accent-text); }
  .admin-inline-status.err{ color:var(--danger); }
  .admin-hint{ font-size:10.5px; color:var(--dim-2); line-height:1.5; margin-top:14px; }
  .admin-current-config{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; font-size:11.5px; color:var(--dim); font-family:'JetBrains Mono',monospace; margin-bottom:16px; line-height:1.7; }
  .admin-current-config b{ color:var(--text); }

  /* ---------- admin panel v2 additions ---------- */
  .admin-subgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
  @media (max-width:520px){ .admin-subgrid{ grid-template-columns:1fr; } }
  .admin-panel-box{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; }
  .admin-box-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12px; margin-bottom:10px; color:var(--dim); text-transform:uppercase; letter-spacing:.03em; }
  .empty-state.small{ padding:8px 0; font-size:11.5px; }
  .admin-mini-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; padding:6px 0; border-bottom:1px dashed var(--line); }
  .admin-mini-row:last-child{ border-bottom:none; }
  .admin-mini-row .name{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60%; }
  .admin-mini-row .val{ color:var(--accent-text); font-weight:700; font-size:11.5px; flex-shrink:0; }
  .admin-mini-row .sub{ color:var(--dim-2); font-size:10px; flex-shrink:0; }

  .pay-inline-banner{ font-size:12px; font-weight:600; padding:8px 12px; border-radius:14px; margin:8px 0; text-align:center; }
  .pay-inline-banner.pending{ background:rgba(255,196,0,0.15); color:#e0ab00; }
  .pay-inline-banner.rejected{ background:rgba(255,90,90,0.15); color:var(--danger); }
  .pay-status-msg.ok{ color:var(--accent-text); font-weight:600; }
  .pay-status-msg.err{ color:var(--danger); font-weight:600; }
  .pro-welcome-sheet{ text-align:center; }
  .pro-welcome-badge{ position:relative; font-size:48px; line-height:1; margin-bottom:6px; animation:proWelcomePop .5s cubic-bezier(.34,1.56,.64,1); }
  .pro-welcome-badge::before{
    content:""; position:absolute; inset:-14px; border-radius:50%; z-index:-1;
    background:radial-gradient(circle, rgba(31,189,110,0.35), transparent 70%);
    animation:payHeroGlowPulse 2.4s ease-in-out infinite;
  }
  .modal-overlay.show .pro-welcome-perks li{ opacity:0; animation:cardRiseIn .4s cubic-bezier(.22,1,.36,1) forwards; }
  .modal-overlay.show .pro-welcome-perks li:nth-child(1){ animation-delay:.10s; }
  .modal-overlay.show .pro-welcome-perks li:nth-child(2){ animation-delay:.17s; }
  .modal-overlay.show .pro-welcome-perks li:nth-child(3){ animation-delay:.24s; }
  .modal-overlay.show .pro-welcome-perks li:nth-child(4){ animation-delay:.31s; }
  @keyframes proWelcomePop{ 0%{ transform:scale(0.3) rotate(-15deg); opacity:0; } 100%{ transform:scale(1) rotate(0); opacity:1; } }
  .pro-welcome-perks{ list-style:none; padding:0; margin:0 0 18px; text-align:left; display:flex; flex-direction:column; gap:10px; }
  .pro-welcome-perks li{ background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:10px 12px; font-size:13px; }

  /* ---------- Payment interface (UPI upgrade modal) ---------- */
  /* Fullscreen variant of .modal-overlay/.modal-sheet: sheet fills the viewport with its own
     sticky header + scrollable body + sticky footer, instead of the usual bottom sheet. */
  .pay-fullscreen{ align-items:stretch; }
  .pay-fullscreen .pay-sheet{ width:100%; height:100%; max-height:100%; border-radius:0; padding:0; display:flex; flex-direction:column; overflow:hidden; }
  /* Mandatory access-gate mode: same pay sheet, but there's no way out of it except paying
     (or already being approved) — so the close paths are hidden rather than just disabled,
     since a visible-but-inert control reads as broken. closePayModal() also refuses to act
     while this class is present, as a second layer under the missing buttons. */
  #payModal.gate-mode .pay-close-btn{ display:none; }
  #payModal.gate-mode #payDoneCloseBtn{ display:none; }

  .pay-fs-topbar{ flex-shrink:0; position:sticky; top:0; z-index:2; background:var(--card-2); padding:18px 16px 14px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .pay-close-btn{ flex-shrink:0; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--text); font-size:14px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .15s ease, border-color .15s ease; }
  .pay-close-btn:hover{ border-color:var(--botany); }
  .pay-close-btn:active{ transform:scale(0.92); }

  .pay-fs-body{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:18px 16px 22px; }
  .pay-fs-footer{ flex-shrink:0; position:sticky; bottom:0; background:var(--card-2); border-top:1px solid var(--line); padding:14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .pay-fs-footer .modal-close{ margin-top:0; }

  .pay-head{ display:flex; align-items:flex-start; gap:12px; }
  .pay-head-icon{ flex-shrink:0; width:38px; height:38px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:18px; background:var(--card-2); border:1px solid var(--botany); }
  .pay-head-sub{ font-size:11.5px; color:var(--dim); line-height:1.4; }

  .pay-block{ margin-bottom:16px; }
  .pay-block-label{ display:flex; align-items:center; gap:8px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12.5px; color:var(--text); margin-bottom:9px; text-transform:uppercase; letter-spacing:.04em; }
  .pay-step-dot{ flex-shrink:0; width:18px; height:18px; border-radius:50%; background:var(--botany); color:var(--on-accent); font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; text-transform:none; letter-spacing:0; }

  .pay-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:18px 16px; box-shadow:var(--shadow-card); }

  /* Gradient hero pricing card — the premium "lead with this" CTA at the top of the sheet. */
  .pay-hero-card{
    position:relative; overflow:hidden; border-radius:20px; padding:22px 18px 20px;
    background:linear-gradient(155deg, #22c37a 0%, #17a862 45%, #0a7a48 100%);
    color:#fff; box-shadow:var(--shadow-raised);
  }
  .pay-hero-glow{
    position:absolute; top:-50px; right:-50px; width:170px; height:170px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,0.28), rgba(255,255,255,0) 70%); pointer-events:none;
  }
  /* Second ambient glow, opposite corner, on its own slower timing — reads as depth/parallax
     rather than one flat pulse. Plus a slow diagonal sheen that sweeps the whole card every
     few seconds, like light catching an embossed card — distinct from (and much slower than)
     the quick shimmer on the buttons below. */
  .pay-hero-card::before{
    content:""; position:absolute; bottom:-60px; left:-40px; width:150px; height:150px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,0.22), rgba(255,255,255,0) 70%);
    pointer-events:none; animation:payHeroGlowPulse2 4.2s ease-in-out infinite;
  }
  @keyframes payHeroGlowPulse2{ 0%,100%{ transform:scale(1); opacity:.7; } 50%{ transform:scale(1.2); opacity:1; } }
  .pay-hero-card::after{
    content:""; position:absolute; top:0; left:-70%; width:55%; height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.16), transparent);
    animation:ctaShimmer 6.5s ease-in-out infinite; pointer-events:none;
  }
  .pay-hero-badge{
    position:relative; display:inline-block; font-size:11px; font-weight:700; letter-spacing:.02em;
    padding:5px 11px; border-radius:999px; background:rgba(255,255,255,0.18); margin-bottom:12px;
  }
  .pay-hero-title{ position:relative; font-family:var(--display); font-weight:800; font-size:21px; margin-bottom:10px; }
  .pay-hero-price{ position:relative; display:flex; align-items:baseline; gap:8px; margin-bottom:14px; }
  .pay-hero-price-amt{ font-family:var(--display); font-weight:800; font-size:36px; line-height:1; }
  .pay-hero-price-note{ font-size:12px; opacity:0.85; }
  .pay-hero-feats{ position:relative; list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:8px; }
  .pay-hero-feats li{ font-size:12.5px; opacity:0.96; }
  .pay-hero-cta{
    position:relative; width:100%; border:none; border-radius:14px; padding:15px; cursor:pointer;
    font-family:var(--display); font-weight:700; font-size:14.5px; letter-spacing:.01em;
    background:#fff; color:#0a7a48; box-shadow:0 8px 20px rgba(0,0,0,0.18);
    transition:transform .12s ease;
  }
  .pay-hero-cta:active{ transform:scale(0.97); }

  /* Hero step: badge → title → price → feature list → highlighted note → CTA reveal in
     sequence as the step becomes active, instead of popping in as one flat block. Same
     gated "opacity:0 + animation:...forwards" technique as the compare-row stagger further
     down, so nothing needs a standalone resting state that could show elsewhere. */
  .pay-flow-step[data-flowstep="1"].is-active .pay-hero-badge{ opacity:0; animation:riseIn .5s ease forwards; animation-delay:.04s; }
  .pay-flow-step[data-flowstep="1"].is-active .pay-hero-title{ opacity:0; animation:riseIn .5s ease forwards; animation-delay:.09s; }
  .pay-flow-step[data-flowstep="1"].is-active .pay-hero-price{ opacity:0; animation:riseIn .5s ease forwards; animation-delay:.14s; }
  .pay-flow-step[data-flowstep="1"].is-active .pay-hero-price-amt{ animation:numBump .45s ease .68s both; }
  .pay-flow-step[data-flowstep="1"].is-active .pay-hero-feats li{ opacity:0; animation:riseIn .45s ease forwards; }
  .pay-flow-step[data-flowstep="1"].is-active .pay-hero-feats li:nth-child(1){ animation-delay:.20s; }
  .pay-flow-step[data-flowstep="1"].is-active .pay-hero-feats li:nth-child(2){ animation-delay:.26s; }
  .pay-flow-step[data-flowstep="1"].is-active .pay-hero-feats li:nth-child(3){ animation-delay:.32s; }
  .pay-flow-step[data-flowstep="1"].is-active .pay-hero-note{ opacity:0; animation:heroNoteIn .55s cubic-bezier(.22,1,.36,1) forwards; animation-delay:.40s; }
  .pay-flow-step[data-flowstep="1"].is-active .pay-hero-cta{
    opacity:0; animation:riseIn .5s ease forwards, payHeroCtaPulse 2.6s ease-in-out infinite;
    animation-delay:.52s, 1.05s;
  }
  @keyframes heroNoteIn{ from{ opacity:0; transform:translateY(8px) scale(0.96); } to{ opacity:1; transform:translateY(0) scale(1); } }

  /* Feature comparison table — the "why pay" showcase shown above the actual QR/pay steps. */
  .pay-compare-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:14px 14px 4px; box-shadow:var(--shadow-card); }
  .pay-compare-head{ display:grid; grid-template-columns:1fr 44px 54px; align-items:end; gap:6px; padding-bottom:10px; margin-bottom:2px; border-bottom:1px solid var(--line-strong); }
  .pay-compare-head-label{ font-family:var(--display); font-weight:700; font-size:12px; color:var(--dim); }
  .pay-compare-head-col{ font-size:10px; font-weight:700; text-align:center; line-height:1.25; color:var(--dim); text-transform:uppercase; letter-spacing:.02em; }
  .pay-compare-head-col-check{ color:var(--accent-text); display:inline-block; animation:payColGlowPulse 2.6s ease-in-out infinite; }
  @keyframes payColGlowPulse{ 0%,100%{ text-shadow:0 0 0 rgba(31,189,110,0); } 50%{ text-shadow:0 0 8px color-mix(in srgb, var(--botany) 60%, transparent); } }
  .pay-compare-row{ display:grid; grid-template-columns:1fr 44px 54px; align-items:center; gap:6px; padding:9px 0; border-bottom:1px solid var(--line); }
  .pay-compare-row:last-child{ border-bottom:none; }
  .pay-compare-feature{ font-size:12.5px; color:var(--text); line-height:1.3; }
  .pay-compare-x{ text-align:center; color:var(--dim-2); font-size:14px; }
  .pay-compare-check{ text-align:center; color:var(--botany); font-size:14px; font-weight:700; }
  .pay-compare-row-price{ padding:12px 0 10px; }
  .pay-compare-row-price .pay-compare-feature{ font-weight:700; font-family:var(--display); font-size:13px; }
  .pay-compare-price-amt{ grid-column:2 / span 2; text-align:center; font-family:var(--display); font-weight:800; font-size:16px; color:var(--botany); }

  /* Matches the hero card's gradient so the CTA at the very bottom (after actually scanning
     the QR) feels like the same premium flow, not a plain default button. */
  #payConfirmBtn{ background:linear-gradient(135deg, #22c37a, #0a7a48); }
  .pay-amount-eyebrow{ text-align:center; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--dim-2); }
  .pay-amount-box{ text-align:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:32px; color:var(--accent-text); letter-spacing:-.01em; margin:2px 0 16px; font-variant-numeric:tabular-nums; }

  .pay-qr-card{ background:#fff; border-radius:0; border:1px solid #ccc; padding:16px 16px 12px; box-shadow:none; }
  .pay-qr-wrap{ display:flex; justify-content:center; position:relative; overflow:hidden; }
  .pay-qr-wrap img{ width:176px; height:176px; display:block; image-rendering:pixelated; }
  /* A soft green scan-line sweeps down over the code on a loop — the familiar "point your
     camera here" cue, layered on with multiply so it tints the code rather than washing it
     out (the QR itself needs to stay scannable, so this stays low-opacity). */
  .pay-qr-wrap::after{
    content:""; position:absolute; left:8px; right:8px; top:0; height:26%;
    background:linear-gradient(180deg, transparent, rgba(31,189,110,0.35) 45%, rgba(31,189,110,0.55) 50%, rgba(31,189,110,0.35) 55%, transparent);
    animation:payQrScan 2.6s cubic-bezier(.45,0,.55,1) infinite; pointer-events:none; mix-blend-mode:multiply;
  }
  @keyframes payQrScan{ 0%{ top:0; } 50%{ top:74%; } 100%{ top:0; } }
  .pay-qr-caption{ text-align:center; font-size:10.5px; font-weight:600; color:#5b6577; margin-top:8px; }

  .pay-apps-row{ display:flex; align-items:flex-start; justify-content:center; gap:18px; margin:14px 0 2px; flex-wrap:wrap; }
  .pay-app-chip{ display:flex; flex-direction:column; align-items:center; gap:6px; }
  .pay-app-icon{ width:34px; height:34px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px; color:#fff; box-shadow:none; }
  .pay-app-gpay{ background:#fff; border:1px solid var(--line); }
  .pay-app-label{ font-size:9px; font-weight:600; color:var(--dim-2); letter-spacing:.01em; }
  .pay-flow-step[data-flowstep="3"].is-active .pay-app-chip{ opacity:0; animation:riseIn .4s ease forwards; }
  .pay-flow-step[data-flowstep="3"].is-active .pay-app-chip:nth-child(1){ animation-delay:.22s; }
  .pay-flow-step[data-flowstep="3"].is-active .pay-app-chip:nth-child(2){ animation-delay:.28s; }
  .pay-flow-step[data-flowstep="3"].is-active .pay-app-chip:nth-child(3){ animation-delay:.34s; }
  .pay-flow-step[data-flowstep="3"].is-active .pay-app-chip:nth-child(4){ animation-delay:.40s; }

  .pay-divider{ display:flex; align-items:center; gap:10px; margin:16px 0 12px; }
  .pay-divider::before, .pay-divider::after{ content:""; flex:1; height:1px; background:var(--line); }
  .pay-divider span{ font-size:10.5px; color:var(--dim-2); font-weight:600; white-space:nowrap; }

  .pay-upi-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px 12px; }
  .pay-upi-id{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .pay-upi-tag{ font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--dim-2); }
  .pay-upi-row #payUpiIdText{ font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; color:var(--text); word-break:break-all; }
  .ghost-btn.copied{ background:var(--botany); color:var(--on-accent); border-color:var(--botany); animation:chipPop .3s ease; }

  .pay-security-note{ font-size:10.5px; color:var(--dim-2); line-height:1.5; text-align:center; margin:10px 0 0; }

  .pay-status-circle{ position:relative; width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:26px; margin:12px auto 14px; background:rgba(255,196,0,0.12); border:1px solid rgba(255,196,0,0.35); animation:spinnerPulseBreathe 2.2s ease-in-out infinite; }
  .pay-status-circle.ok{ background:rgba(47,143,91,0.12); border-color:rgba(47,143,91,0.4); animation:proWelcomePop .5s cubic-bezier(.34,1.56,.64,1); }
  .pay-status-circle.err{ background:rgba(255,90,90,0.12); border-color:rgba(255,90,90,0.4); animation:consentShake .4s ease; }
  /* Pending state gets a slowly rotating dashed ring — reads as "actively working" rather
     than just breathing in place. Reuses the Maya orb's sheen rotation keyframe. */
  .pay-status-circle::before{
    content:""; position:absolute; inset:-6px; border-radius:50%; border:1.5px dashed rgba(255,196,0,0.45);
    animation:mayaOrbSheen 5s linear infinite;
  }
  .pay-status-circle.ok::before, .pay-status-circle.err::before{ display:none; }
  #payStatusIcon{ position:relative; z-index:1; }
  /* Success gets a single expanding ring-ping the moment it appears — same keyframe as the
     Maya orb's halo, just played once instead of on a loop. */
  .pay-status-circle.ok::after{
    content:""; position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(47,143,91,0.5);
    animation:mayaMetisRing 1s ease-out forwards;
  }
  .pay-status-title{ text-align:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; color:var(--text); margin-bottom:6px; }
  .pay-status-msg{ font-size:12.5px; color:var(--dim); line-height:1.6; margin:0 0 16px; text-align:center; }
  /* #payStepDone toggles via display:none <-> '' in JS (setPayStep) — re-adding a block
     element to the render tree restarts its animation each time, so this simply replays
     on every visit to the status screen without any extra JS. */
  #payStepDone{ animation:cardRiseIn .45s cubic-bezier(.22,1,.36,1) both; }

  /* ---------- Pay flow: step progress bar (pinned above the scrollable step body) ---------- */
  .pay-progress{ flex-shrink:0; padding:12px 16px 14px; background:var(--card-2); border-bottom:1px solid var(--line); }
  .pay-progress-toprow{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:7px; gap:10px; }
  .pay-progress-steplabel{ font-family:var(--display); font-weight:700; font-size:11.5px; color:var(--text); text-transform:uppercase; letter-spacing:.03em; }
  .pay-progress-pct{ font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; color:var(--accent-text); font-variant-numeric:tabular-nums; }
  .pay-progress-pct.pop{ animation:numBump .35s ease; }
  .pay-progress-steplabel.pop{ animation:payChromeFade .35s ease; }
  @keyframes payChromeFade{ from{ opacity:.25; transform:translateY(-2px); } to{ opacity:1; transform:translateY(0); } }
  .pay-progress-track{ position:relative; height:5px; border-radius:var(--radius-pill); background:var(--line); overflow:hidden; }
  .pay-progress-fill{ position:absolute; inset:0 auto 0 0; width:25%; border-radius:var(--radius-pill); background:linear-gradient(90deg, var(--botany), #17a862); transition:width .4s cubic-bezier(.2,.8,.2,1); overflow:hidden; }
  .pay-progress-fill::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent); animation:shimmer 2.2s linear infinite; }

  /* ---------- Pay flow: step slide/fade transitions ---------- */
  /* Only the active step is laid out at all — with content this varied in height (a hero
     card vs. a QR code vs. a form), animating opposite steps in parallel via absolute
     positioning would need JS-measured heights. Instead goToPayFlowStep() runs a quick
     two-phase swap: the outgoing step plays its ~160ms exit, then the incoming step is
     shown and immediately plays its own entrance — reads as one continuous transition. */
  .pay-flow-step{ display:none; }
  .pay-flow-step.is-active{ display:block; }
  .pay-flow-step.pfs-exit-fwd{ animation:pfsExitFwd .16s ease forwards; }
  .pay-flow-step.pfs-exit-back{ animation:pfsExitBack .16s ease forwards; }
  .pay-flow-step.pfs-enter-fwd{ animation:pfsEnterFwd .4s cubic-bezier(.2,.8,.2,1) both; }
  .pay-flow-step.pfs-enter-back{ animation:pfsEnterBack .4s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes pfsExitFwd{ to{ opacity:0; transform:translateX(-18px); } }
  @keyframes pfsExitBack{ to{ opacity:0; transform:translateX(18px); } }
  @keyframes pfsEnterFwd{ from{ opacity:0; transform:translateX(22px); } to{ opacity:1; transform:translateX(0); } }
  @keyframes pfsEnterBack{ from{ opacity:0; transform:translateX(-22px); } to{ opacity:1; transform:translateX(0); } }

  /* Comparison rows stagger in the moment step 2 becomes active. */
  .pay-flow-step[data-flowstep="2"].is-active .pay-compare-row{ opacity:0; animation:riseIn .4s ease forwards; }
  .pay-flow-step[data-flowstep="2"].is-active .pay-compare-row:nth-child(1){ animation-delay:.02s; }
  .pay-flow-step[data-flowstep="2"].is-active .pay-compare-row:nth-child(2){ animation-delay:.05s; }
  .pay-flow-step[data-flowstep="2"].is-active .pay-compare-row:nth-child(3){ animation-delay:.08s; }
  .pay-flow-step[data-flowstep="2"].is-active .pay-compare-row:nth-child(4){ animation-delay:.11s; }
  .pay-flow-step[data-flowstep="2"].is-active .pay-compare-row:nth-child(5){ animation-delay:.14s; }
  .pay-flow-step[data-flowstep="2"].is-active .pay-compare-row:nth-child(6){ animation-delay:.17s; }
  .pay-flow-step[data-flowstep="2"].is-active .pay-compare-row:nth-child(7){ animation-delay:.2s; }
  .pay-flow-step[data-flowstep="2"].is-active .pay-compare-row:nth-child(8){ animation-delay:.23s; }
  .pay-flow-step[data-flowstep="2"].is-active .pay-compare-row:nth-child(9){ animation-delay:.26s; }
  .pay-flow-step[data-flowstep="2"].is-active .pay-compare-row:nth-child(10){ animation-delay:.29s; }
  /* Checkmarks pop a beat after their own row lands, so the "yes, Pro has this" lands as
     its own small beat rather than fading in flat along with the row text. */
  .pay-flow-step[data-flowstep="2"].is-active .pay-compare-row .pay-compare-check{ display:inline-block; opacity:0; animation:checkPopIn .35s ease forwards; }
  @keyframes checkPopIn{ 0%{ opacity:0; transform:scale(0.4); } 65%{ opacity:1; transform:scale(1.18); } 100%{ opacity:1; transform:scale(1); } }
  .pay-flow-step[data-flowstep="2"].is-active .pay-compare-row:nth-child(1) .pay-compare-check{ animation-delay:.36s; }
  .pay-flow-step[data-flowstep="2"].is-active .pay-compare-row:nth-child(2) .pay-compare-check{ animation-delay:.39s; }
  .pay-flow-step[data-flowstep="2"].is-active .pay-compare-row:nth-child(3) .pay-compare-check{ animation-delay:.42s; }
  .pay-flow-step[data-flowstep="2"].is-active .pay-compare-row:nth-child(4) .pay-compare-check{ animation-delay:.45s; }
  .pay-flow-step[data-flowstep="2"].is-active .pay-compare-row:nth-child(5) .pay-compare-check{ animation-delay:.48s; }
  .pay-flow-step[data-flowstep="2"].is-active .pay-compare-row:nth-child(6) .pay-compare-check{ animation-delay:.51s; }
  .pay-flow-step[data-flowstep="2"].is-active .pay-compare-row:nth-child(7) .pay-compare-check{ animation-delay:.54s; }
  .pay-flow-step[data-flowstep="2"].is-active .pay-compare-row:nth-child(8) .pay-compare-check{ animation-delay:.57s; }
  .pay-flow-step[data-flowstep="2"].is-active .pay-compare-row:nth-child(9) .pay-compare-check{ animation-delay:.60s; }
  .pay-flow-step[data-flowstep="2"].is-active .pay-compare-row:nth-child(10) .pay-compare-check{ animation-delay:.63s; }
  /* QR card pops in the moment step 3 becomes active. */
  .pay-flow-step[data-flowstep="3"].is-active .pay-qr-card{ animation:paymentQrPop .45s cubic-bezier(.34,1.56,.64,1) both; }
  @keyframes paymentQrPop{ from{ opacity:0; transform:scale(0.92); } to{ opacity:1; transform:scale(1); } }

  /* Subtle "pay attention to me" breathing on the hero glow + its CTA — off entirely under
     reduced motion, see the media query at the bottom of this section. */
  .pay-hero-glow{ animation:payHeroGlowPulse 3.6s ease-in-out infinite; }
  @keyframes payHeroGlowPulse{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.15); opacity:1; } }
  .pay-hero-cta{ animation:payHeroCtaPulse 2.6s ease-in-out infinite; }
  @keyframes payHeroCtaPulse{ 0%,100%{ box-shadow:0 8px 20px rgba(0,0,0,0.18); } 50%{ box-shadow:0 10px 26px rgba(0,0,0,0.3), 0 0 0 4px rgba(255,255,255,0.14); } }

  /* "Why is this paid" callout on the hero step — the one line on this whole card we want
     the eye to land on and stay on. Sits on the gradient card, so it uses a translucent
     white chip rather than the app's normal card surfaces, plus its own icon badge and a
     slow breathing glow so it reads as a deliberate highlight, not another footnote. */
  .pay-hero-note{
    position:relative; display:flex; align-items:flex-start; gap:10px;
    font-size:11.5px; line-height:1.5; padding:10px 12px; border-radius:14px;
    background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.32);
    margin-bottom:14px; animation:payNoteGlow 3s ease-in-out infinite;
  }
  .pay-hero-note strong{ font-weight:700; }
  .pay-hero-note-text{ position:relative; padding-top:2px; }
  @keyframes payNoteGlow{
    0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); border-color:rgba(255,255,255,0.32); }
    50%{ box-shadow:0 0 0 3px rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.55); }
  }
  /* Icon badge: the 🎯 sits still while two rings expand outward from it on a loop — a
     literal "target" pulse, reusing the same expanding-ring keyframe as the Maya AI orb
     elsewhere in the app rather than inventing a new motion for the same idea. */
  .pay-hero-note-icon{
    position:relative; flex-shrink:0; width:24px; height:24px; margin-top:1px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:12px;
    background:rgba(255,255,255,0.22); border:1px solid rgba(255,255,255,0.4);
  }
  .pay-hero-note-ring{
    position:absolute; inset:0; border-radius:50%; border:1px solid rgba(255,255,255,0.75);
    animation:mayaMetisRing 2.4s ease-out infinite;
  }
  .pay-hero-note-ring.r2{ animation-delay:1.2s; }
  /* Same idea, reused on step 4 (confirm) as a quiet reinforcement right before submission. */
  .pay-flow-note{ font-size:11.5px; line-height:1.5; color:var(--dim); background:var(--bg-2); border:1px solid var(--line); border-left:3px solid var(--botany); border-radius:12px; padding:9px 11px; margin-bottom:12px; }
  .pay-flow-step[data-flowstep="4"].is-active .pay-flow-note{ opacity:0; animation:riseIn .45s ease forwards; animation-delay:.06s; }
  .pay-flow-step[data-flowstep="4"].is-active .field-row{ opacity:0; animation:riseIn .45s ease forwards; animation-delay:.16s; }
  .pay-fs-body #payEmailInput{ transition:border-color .2s ease, box-shadow .2s ease; }
  .pay-fs-body #payEmailInput:focus{ box-shadow:0 0 0 3px color-mix(in srgb, var(--botany) 22%, transparent); }

  /* ---------- Pay flow: footer back/continue/submit row ---------- */
  .pay-flow-actions{ display:flex; align-items:stretch; gap:10px; }
  .pay-flow-actions .modal-close{ flex:1; margin-top:0; }
  .pay-back-btn{ flex:0 0 auto; width:48px; border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--card); color:var(--text); font-size:18px; font-weight:700; cursor:pointer; transition:transform .15s ease, border-color .15s ease; }
  .pay-back-btn:hover{ border-color:var(--botany); }
  .pay-back-btn:active{ transform:scale(0.92); }

  @media (prefers-reduced-motion:reduce){
    .pay-flow-step, .pay-hero-glow, .pay-hero-cta, .pay-hero-cta::after, .pay-hero-card::before, .pay-hero-card::after,
    .pay-hero-badge, .pay-hero-title, .pay-hero-price, .pay-hero-price-amt, .pay-hero-feats li,
    .pay-hero-note, .pay-hero-note-ring, .pay-status-circle, .pay-status-circle::before, .pay-status-circle::after,
    #payStepDone, .pay-compare-row, .pay-compare-check, .pay-compare-head-col-check, .pay-qr-card, .pay-qr-wrap::after,
    .pay-app-chip, .pay-flow-note, .field-row, .ghost-btn.copied, .pay-progress-fill::after, .pay-progress-pct.pop,
    .pay-progress-steplabel.pop, .pro-welcome-badge::before, .pro-welcome-perks li{
      animation:none !important; transition:none !important;
    }
  }


  .admin-payment-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px dashed var(--line); }
  .admin-payment-row:last-child{ border-bottom:none; }
  .admin-payment-status{ font-size:10px; font-weight:700; padding:3px 9px; border-radius:14px; text-transform:uppercase; letter-spacing:.03em; }
  .admin-payment-status.pending{ background:rgba(255,196,0,0.15); color:#e0ab00; }
  .admin-payment-status.approved{ background:rgba(47,143,91,0.15); color:var(--accent-text); }
  .admin-payment-status.rejected{ background:rgba(255,90,90,0.15); color:var(--danger); }

  .admin-user-card:hover{ border-color:var(--botany); }
  .admin-pro-badge{ display:inline-block; background:var(--chem); color:var(--on-accent); font-size:9.5px; font-weight:800; padding:2px 7px; border-radius:14px; margin-left:6px; letter-spacing:.02em; vertical-align:middle; }

  .admin-log-row{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px 12px; margin-bottom:8px; font-size:12px; }
  .admin-log-row .admin-log-action{ font-weight:700; color:var(--accent-text); }
  .admin-log-row .admin-log-meta{ color:var(--dim-2); font-size:10.5px; margin-top:3px; font-family:'JetBrains Mono',monospace; }

  .admin-detail-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:12.5px; }
  .admin-detail-row:last-child{ border-bottom:none; }
  .admin-detail-row label{ color:var(--dim); flex-shrink:0; }
  .admin-detail-row input[type="number"]{ width:80px; background:var(--bg-2); border:1px solid var(--line); border-radius:14px; color:var(--text); padding:6px 8px; font-size:12.5px; text-align:right; }
  .admin-detail-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
  .admin-detail-actions button{ flex:1; min-width:120px; }
  .admin-btn-danger{ background:var(--danger)!important; color:#fff!important; border-color:var(--danger)!important; }
  .admin-mono-block{ background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:10px 12px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--dim); max-height:160px; overflow-y:auto; margin-top:6px; white-space:pre-wrap; word-break:break-word; }

  #toast-stack{ position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:100; display:flex; flex-direction:column; gap:8px; align-items:center; width:90%; max-width:400px; }

  /* Both FABs sit at z-index 59/60 — above the pay modal's 50 — so they'd otherwise float on
     top of (and stay tappable through) the mandatory access gate. applyAccessGate() adds this
     whenever it's blocking; kept separate from .hidden (which the normal per-panel FAB logic
     already owns) so the two mechanisms can't stomp on each other. */
  .gate-hide{ display:none !important; }

  /* ---------- floating AI quiz button ---------- */
  .ai-quiz-fab{
    position:absolute; right:16px; bottom:calc(86px + env(safe-area-inset-bottom));
    width:56px; height:56px; border-radius:50%; border:none; cursor:pointer; padding:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--botany); border:none;
    box-shadow:var(--shadow-raised);
    z-index:60; animation:fabFloat 2.8s ease-in-out infinite;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .ai-quiz-fab:active{ transform:scale(0.92); }
  .ai-quiz-fab.hidden{ display:none; }
  .ai-quiz-fab-icon{ width:40px; height:40px; border-radius:50%; object-fit:cover; position:relative; z-index:2; }

  /* ---------- battle punch icon (replaces static FAB image) ----------
     Everything is drawn on a fixed 0-0-40-40 SVG viewBox, so no part of
     the gloves/burst can ever spill past the circular button edge — the
     viewBox itself clips content, independent of the animation applied. */
  svg.battle-fab-icon{ display:block; overflow:hidden; border-radius:50%; }
  .battle-disc{
    fill:rgba(10,14,20,0.32);
    stroke:rgba(255,255,255,0.18); stroke-width:0.6;
  }
  .battle-glove{ transform-box:fill-box; transform-origin:50% 50%; }
  .battle-glove ellipse, .battle-glove rect{ filter:drop-shadow(0 0.5px 0.5px rgba(0,0,0,0.35)); }

  .glove-left{ animation:punchLeft 1.5s cubic-bezier(.36,.07,.19,.97) infinite; }
  .glove-right{ animation:punchRight 1.5s cubic-bezier(.36,.07,.19,.97) infinite; }

  @keyframes punchLeft{
    0%,30%{ transform:translateX(0) rotate(0deg); }
    46%{ transform:translateX(4px) rotate(-6deg); }
    58%{ transform:translateX(-1px) rotate(3deg); }
    72%,100%{ transform:translateX(0) rotate(0deg); }
  }
  @keyframes punchRight{
    0%,30%{ transform:translateX(0) rotate(0deg); }
    46%{ transform:translateX(-4px) rotate(6deg); }
    58%{ transform:translateX(1px) rotate(-3deg); }
    72%,100%{ transform:translateX(0) rotate(0deg); }
  }

  .battle-star{
    transform-box:fill-box; transform-origin:50% 50%;
    opacity:0; animation:battleStarPop 1.5s cubic-bezier(.36,.07,.19,.97) infinite;
  }
  @keyframes battleStarPop{
    0%,42%{ opacity:0; transform:scale(.2) rotate(0deg); }
    50%{ opacity:1; transform:scale(1.15) rotate(8deg); }
    58%{ opacity:1; transform:scale(.9) rotate(-4deg); }
    70%,100%{ opacity:0; transform:scale(.4) rotate(0deg); }
  }

  .battle-bits .bit{ transform-box:fill-box; transform-origin:50% 50%; opacity:0; }
  .bit1{ animation:bitFly1 1.5s cubic-bezier(.36,.07,.19,.97) infinite; }
  .bit2{ animation:bitFly2 1.5s cubic-bezier(.36,.07,.19,.97) infinite; }
  .bit3{ animation:bitFly3 1.5s cubic-bezier(.36,.07,.19,.97) infinite; }

  @keyframes bitFly1{
    0%,46%{ opacity:0; transform:translate(0,0) scale(.4); }
    52%{ opacity:1; transform:translate(-7px,-6px) scale(1); }
    68%,100%{ opacity:0; transform:translate(-10px,-9px) scale(.3); }
  }
  @keyframes bitFly2{
    0%,46%{ opacity:0; transform:translate(0,0) scale(.4); }
    52%{ opacity:1; transform:translate(8px,-4px) scale(1); }
    68%,100%{ opacity:0; transform:translate(11px,-6px) scale(.3); }
  }
  @keyframes bitFly3{
    0%,46%{ opacity:0; transform:translate(0,0) scale(.4); }
    52%{ opacity:1; transform:translate(0,8px) scale(1); }
    68%,100%{ opacity:0; transform:translate(0,12px) scale(.3); }
  }
  .ai-quiz-fab-ring{
    position:absolute; inset:0; border-radius:50%; border:2px solid var(--botany);
    opacity:0.55; animation:fabMetis 2.4s ease-out infinite;
  }
  .ai-quiz-fab-ring.ring2{ animation-delay:1.2s; border-color:var(--chem); }
  .ai-quiz-fab-dot{
    position:absolute; top:1px; right:1px; width:12px; height:12px; border-radius:50%;
    background:var(--danger); border:2px solid var(--bg); display:none; z-index:3;
  }
  .ai-quiz-fab-dot.show{ display:block; }
  .timer-fab-badge{
    position:absolute; left:-8px; bottom:-6px; z-index:4;
    background:var(--pomodoro); color:#fff; font-family:var(--mono);
    font-size:9.5px; font-weight:700; letter-spacing:.01em;
    padding:2.5px 6px; border-radius:999px; border:2px solid var(--bg);
    display:none; box-shadow:0 2px 6px rgba(0,0,0,0.3);
    animation:timerBadgePulse 2s ease-in-out infinite;
  }
  .timer-fab-badge.show{ display:block; }
  @keyframes timerBadgePulse{ 0%,100%{ opacity:1; } 50%{ opacity:.72; } }

  @keyframes fabFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
  @keyframes fabMetis{
    0%{ transform:scale(1); opacity:0.55; }
    100%{ transform:scale(1.5); opacity:0; }
  }

  .quiz-overlay .admin-shell{ max-width:560px; }
  .quiz-overlay .admin-brand .dot{ background:var(--botany); }
  .toast{ background:var(--text); color:var(--card); border:none; padding:10px 16px; border-radius:14px; font-size:12.5px; font-weight:500; box-shadow:var(--shadow-raised); opacity:0; transform:translateY(-14px); transition:all .3s cubic-bezier(.4,0,.2,1); display:flex; align-items:center; gap:8px; text-align:center;}
  .toast.show{ opacity:1; transform:translateY(0); }

  .confetti-piece{ position:absolute; top:-10px; width:7px; height:12px; opacity:0.9; z-index:99; animation:confettiFall 1.8s ease-in forwards; }
  @keyframes confettiFall{ to{ transform:translateY(600px) rotate(600deg); opacity:0; } }

  @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; } }

  /* ================= 3D animation layer (v2 — perf-safe) ================= */
  /* Brings the depth back, but scoped to how CSS `perspective()` actually
     works cheaply: as part of a single element's OWN `transform` value, it
     just foreshortens that one box — it does NOT create a 3D rendering
     context for its children the way the `perspective` *property* (on a
     parent) or `transform-style:preserve-3d` do. Those two, plus blanket
     `will-change`, are what forced huge GPU layers over the scrollable
     panels last time and crashed the renderer / froze the WebView. None of
     that is used below — every animated element here is small and self-
     contained, and nothing is driven by JS pointer-tracking. */

  /* ---- tab panel transition: a real cube-ish swing, direction-aware ---- */
  .panel.dir-fwd-exit{
    transition:opacity .34s ease, transform .34s cubic-bezier(.36,.07,.19,.97) !important;
    transform:perspective(1200px) rotateY(-18deg) translateX(-4%) !important;
    opacity:0 !important;
  }
  .panel.dir-back-exit{
    transition:opacity .34s ease, transform .34s cubic-bezier(.36,.07,.19,.97) !important;
    transform:perspective(1200px) rotateY(18deg) translateX(4%) !important;
    opacity:0 !important;
  }
  .panel.dir-fwd-enter{
    transition:none !important;
    transform:perspective(1200px) rotateY(18deg) translateX(4%) !important;
    opacity:0 !important;
  }
  .panel.dir-back-enter{
    transition:none !important;
    transform:perspective(1200px) rotateY(-18deg) translateX(-4%) !important;
    opacity:0 !important;
  }
  .panel.dir-fwd-enter.active, .panel.dir-back-enter.active{
    transition:opacity .38s ease, transform .42s cubic-bezier(.22,.61,.36,1) !important;
    transform:perspective(1200px) rotateY(0deg) translateX(0) !important;
    opacity:1 !important;
  }

  /* ---- pressable buttons: a satisfying 3D "push" on tap, self-contained ---- */
  .manual-btn, .add-test-btn, .exam-opt, .class-opt, .modal-close,
  .theme-opt, .chat-suggest-chip, .maya-chat-inputrow button, .navbtn,
  .gear, .avatar, .plannerDurBtn, .admin-tab, .ghost-btn, .pay-hero-cta, .pay-back-btn{
    transition:transform .2s cubic-bezier(.34,1.56,.64,1), background .15s ease, border-color .15s ease, color .15s ease, opacity .2s ease !important;
  }
  .manual-btn:active, .add-test-btn:active, .exam-opt:active,
  .class-opt:active, .modal-close:active, .theme-opt:active, .chat-suggest-chip:active,
  .maya-chat-inputrow button:active, .navbtn:active, .gear:active, .avatar:active,
  .plannerDurBtn:active, .admin-tab:active, .ghost-btn:active, .pay-hero-cta:active, .pay-back-btn:active{
    transform:scale(0.96) !important;
  }


  /* ---- cards: subtle 3D lift on desktop hover only (never on touch, so it
     can't get "stuck" or fight with scrolling on phones/the wrapped app) ---- */
  .vitals-card, .streak-card, .classwise-card, .chart-card, .rank-card, .maya-chat-box{
    transition:transform .35s cubic-bezier(.22,.61,.36,1);
    position:relative;
  }
  /* soft top-edge sheen in dark mode only — a hint of light catching the top of a raised
     surface, so cards read as physically lifted rather than flat-painted rectangles */
  [data-theme="dark"] .vitals-card::before, [data-theme="dark"] .streak-card::before,
  [data-theme="dark"] .classwise-card::before, [data-theme="dark"] .chart-card::before,
  [data-theme="dark"] .rank-card::before, [data-theme="dark"] .quote-card::before{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,0.045) 0%, transparent 40%);
  }
  @media (hover:hover) and (pointer:fine){
    .vitals-card:hover, .streak-card:hover, .classwise-card:hover, .chart-card:hover,
    .rank-card:hover, .maya-chat-box:hover{
      transform:perspective(1000px) rotateX(-2deg) rotateY(2deg) translateY(-3px);
    }
  }
  /* on touch, a quick tap-press instead — handled by the shared :active rules above */

  /* ---- Maya orb: ambient 3D float, paused while its tab isn't visible ---- */
  .maya-orb{ animation:orbFloat3D 6s ease-in-out infinite; }
  .panel:not(.active) .maya-orb{ animation-play-state:paused; }
  @keyframes orbFloat3D{
    0%,100%{ transform:translateY(0) rotate(0deg); }
    25%{ transform:translateY(-3px) rotate(3deg); }
    50%{ transform:translateY(0) rotate(0deg); }
    75%{ transform:translateY(-3px) rotate(-3deg); }
  }

  /* ================= login background (lightweight, 2D-only) ================= */
  /* ---- Aurora background: smoky, billowing color plumes behind the sign-in form ----
     Built from radial-gradient backgrounds (not filter:blur), which is far
     cheaper to composite than a blurred layer and avoids the GPU/WebView
     issues blur filters can cause. Only transform + opacity are animated,
     so this stays on the compositor thread. Each blob drifts through several
     irregular waypoints with independent rotation and non-uniform scaling
     (scaleX != scaleY) so it stretches and billows like smoke rather than
     just pulsing in place — durations and delays are staggered per blob so
     they never fall into a synchronized loop. Paused whenever the auth
     screen isn't visible so it never runs in the background after sign-in. */
  .auth-aurora{ position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; pointer-events:none; z-index:0; }
  .aurora-blob{ position:absolute; border-radius:50%; opacity:0.55; will-change:transform; }
  .aurora-blob-1{
    width:62vmax; height:62vmax; top:-24vmax; left:-20vmax;
    background:radial-gradient(circle at 50% 50%, var(--botany) 0%, color-mix(in srgb, var(--botany) 40%, transparent) 38%, transparent 68%);
    animation:auroraSmoke1 34s ease-in-out infinite;
  }
  .aurora-blob-2{
    width:56vmax; height:56vmax; top:-16vmax; right:-22vmax;
    background:radial-gradient(circle at 50% 50%, var(--physics) 0%, color-mix(in srgb, var(--physics) 38%, transparent) 40%, transparent 70%);
    animation:auroraSmoke2 39s ease-in-out infinite;
    animation-delay:-6s;
  }
  .aurora-blob-3{
    width:60vmax; height:60vmax; bottom:-26vmax; left:-16vmax;
    background:radial-gradient(circle at 50% 50%, var(--chem) 0%, color-mix(in srgb, var(--chem) 34%, transparent) 40%, transparent 68%);
    animation:auroraSmoke3 42s ease-in-out infinite;
    animation-delay:-14s;
  }
  .aurora-blob-4{
    width:50vmax; height:50vmax; bottom:-20vmax; right:-16vmax;
    background:radial-gradient(circle at 50% 50%, var(--wordmark-accent) 0%, color-mix(in srgb, var(--wordmark-accent) 34%, transparent) 40%, transparent 68%);
    animation:auroraSmoke4 30s ease-in-out infinite;
    animation-delay:-3s;
  }
  /* each keyframe set walks through irregular waypoints — position, rotation,
     and independent x/y scale all shift together so the blob reads as a
     billowing plume rather than a simple back-and-forth pulse */
  @keyframes auroraSmoke1{
    0%    { transform:translate(0,0) rotate(0deg) scale(1,1); }
    22%   { transform:translate(5vmax,3vmax) rotate(12deg) scale(1.15,0.92); }
    45%   { transform:translate(2vmax,7vmax) rotate(-8deg) scale(0.94,1.18); }
    68%   { transform:translate(7vmax,1vmax) rotate(18deg) scale(1.1,1.05); }
    86%   { transform:translate(-2vmax,4vmax) rotate(-5deg) scale(0.96,1); }
    100%  { transform:translate(0,0) rotate(0deg) scale(1,1); }
  }
  @keyframes auroraSmoke2{
    0%    { transform:translate(0,0) rotate(0deg) scale(1,1); }
    20%   { transform:translate(-6vmax,4vmax) rotate(-14deg) scale(1.12,0.95); }
    48%   { transform:translate(-3vmax,-3vmax) rotate(9deg) scale(0.9,1.2); }
    70%   { transform:translate(-8vmax,2vmax) rotate(-16deg) scale(1.08,1); }
    88%   { transform:translate(-2vmax,-5vmax) rotate(6deg) scale(0.97,1.06); }
    100%  { transform:translate(0,0) rotate(0deg) scale(1,1); }
  }
  @keyframes auroraSmoke3{
    0%    { transform:translate(0,0) rotate(0deg) scale(1,1); }
    25%   { transform:translate(4vmax,-5vmax) rotate(10deg) scale(1.14,0.93); }
    50%   { transform:translate(8vmax,-1vmax) rotate(-11deg) scale(0.92,1.16); }
    72%   { transform:translate(3vmax,-7vmax) rotate(15deg) scale(1.06,1.02); }
    90%   { transform:translate(6vmax,-2vmax) rotate(-4deg) scale(0.98,1.04); }
    100%  { transform:translate(0,0) rotate(0deg) scale(1,1); }
  }
  @keyframes auroraSmoke4{
    0%    { transform:translate(0,0) rotate(0deg) scale(1,1); }
    18%   { transform:translate(-4vmax,-4vmax) rotate(-13deg) scale(1.16,0.9); }
    42%   { transform:translate(-7vmax,-1vmax) rotate(7deg) scale(0.9,1.2); }
    64%   { transform:translate(-3vmax,-6vmax) rotate(-17deg) scale(1.1,1); }
    84%   { transform:translate(-6vmax,-3vmax) rotate(5deg) scale(0.95,1.08); }
    100%  { transform:translate(0,0) rotate(0deg) scale(1,1); }
  }
  .auth-screen:not(.show) .aurora-blob{ animation-play-state:paused !important; }
  @media (prefers-reduced-motion: reduce){ .aurora-blob{ animation:none !important; } }

  /* ---- small extra flourish: shimmer sweep on primary CTA buttons ---- */
  .add-test-btn, .modal-close:not(.ghost), .pay-hero-cta{
    position:relative; overflow:hidden;
  }
  .add-test-btn::after, .modal-close:not(.ghost)::after, .pay-hero-cta::after{
    content:""; position:absolute; top:0; left:-60%; width:50%; height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
    animation:ctaShimmer 3.2s ease-in-out infinite;
  }
  @keyframes ctaShimmer{ 0%{ left:-60%; } 35%,100%{ left:130%; } }

  /* ---- first-login onboarding tour: game-style spotlight walkthrough ---- */
  .tour-overlay{ position:fixed; inset:0; z-index:900; display:none; }
  .tour-overlay.show{ display:block; }

  .tour-spotlight{
    position:fixed; border-radius:14px; pointer-events:none;
    box-shadow:0 0 0 9999px rgba(6,9,16,0.8);
    border:2px solid var(--wordmark-accent);
    transition:top .5s cubic-bezier(.65,0,.35,1), left .5s cubic-bezier(.65,0,.35,1),
               width .5s cubic-bezier(.65,0,.35,1), height .5s cubic-bezier(.65,0,.35,1),
               opacity .3s ease;
    animation:tourRingPulse 1.6s ease-in-out infinite;
  }
  /* Ring-style pulse (fixed px spread) worked for small circular targets, but reads as a
     thin sliver on wide rectangular cards. Pulsing via outline offset instead scales with
     the spotlight's own size, so it looks intentional whether the target is a chip, a
     button row, or a full-width card like the vitals bar. */
  @keyframes tourRingPulse{
    0%,100%{ box-shadow:0 0 0 9999px rgba(6,9,16,0.8); outline:2px solid var(--wordmark-accent); outline-offset:0px; }
    50%{ box-shadow:0 0 0 9999px rgba(6,9,16,0.8); outline:2px solid transparent; outline-offset:6px; }
  }

  .tour-card{
    position:fixed; z-index:901; width:290px; max-width:calc(100vw - 32px);
    background:var(--card); border:1px solid var(--line); border-radius:14px;
    padding:20px 20px 16px; box-shadow:0 24px 60px rgba(0,0,0,0.35);
    text-align:center; transition:top .5s cubic-bezier(.65,0,.35,1), left .5s cubic-bezier(.65,0,.35,1);
    animation:tourCardPop .4s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes tourCardPop{ 0%{ opacity:0; transform:scale(0.85) translateY(8px); } 100%{ opacity:1; transform:scale(1) translateY(0); } }

  .tour-emoji{ font-size:32px; line-height:1; margin-bottom:8px; animation:tourEmojiBounce 1.4s ease-in-out infinite; }
  @keyframes tourEmojiBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }

  .tour-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; color:var(--text); margin-bottom:6px; }
  .tour-desc{ font-family:'Inter',sans-serif; font-size:13px; line-height:1.5; color:var(--dim); margin-bottom:16px; }

  .tour-dots{ display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:14px; }
  .tour-dot{ width:6px; height:6px; border-radius:50%; background:var(--line); transition:all .3s ease; }
  .tour-dot.active{ width:18px; border-radius:14px; background:var(--wordmark-accent); }

  .tour-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .tour-skip{ background:none; border:none; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:var(--dim-2); cursor:pointer; padding:8px 4px; }
  .tour-next{
    flex:1; background:var(--text); color:var(--bg); border:none; border-radius:14px;
    font-family:'Inter',sans-serif; font-weight:700; font-size:13.5px; padding:11px 14px; cursor:pointer;
    transition:transform .15s ease;
  }
  .tour-next:active{ transform:scale(0.96); }

  /* ================================================================
     QUIZ MODE SELECTOR
     ================================================================ */
  .bm-mode-overlay{
    position:fixed; inset:0; z-index:300;
    display:flex; align-items:flex-end; justify-content:center;
    background:rgba(0,0,0,0.62);
    opacity:0; pointer-events:none;
    transition:opacity .25s ease;
  }
  .bm-mode-overlay.show{ opacity:1; pointer-events:all; }
  .bm-mode-sheet{
    width:100%; max-width:560px;
    background:var(--card);
    border-radius:24px 24px 0 0;
    padding:12px 20px 36px;
    position:relative;
    transform:translateY(40px);
    transition:transform .35s cubic-bezier(.22,1,.36,1);
    box-shadow:var(--shadow-raised);
  }
  .bm-mode-overlay.show .bm-mode-sheet{ transform:translateY(0); }
  .bm-mode-handle{
    width:38px; height:4px; border-radius:8px;
    background:var(--line-strong); margin:0 auto 16px;
  }
  .bm-mode-close{
    position:absolute; top:14px; right:18px;
    font-size:18px; color:var(--dim); cursor:pointer; line-height:1;
    transition:color .15s;
  }
  .bm-mode-close:hover{ color:var(--text); }
  .bm-mode-heading{
    font-size:17px; font-weight:700; color:var(--text);
    text-align:center; margin-bottom:18px; letter-spacing:.01em;
  }
  .bm-mode-spark{ font-size:15px; }
  .bm-mode-cards{ display:flex; gap:8px; }
  .bm-mode-card{
    flex:1; min-width:0; border-radius:16px; padding:14px 9px 12px;
    cursor:pointer; text-align:left; position:relative; overflow:hidden;
    transition:transform .18s ease;
    background:transparent;
  }
  .bm-mode-card:active{ transform:scale(0.96); }
  .bm-mode-card-bg{
    position:absolute; inset:0; border-radius:16px;
    opacity:1;
  }
  .battle-bg{
    background:var(--card-2);
    border:1.5px solid var(--battle);
    border-top:3px solid var(--battle);
  }
  .daily-bg{
    background:var(--card-2);
    border:1.5px solid var(--botany);
    border-top:3px solid var(--botany);
  }
  .timer-bg{
    background:var(--card-2);
    border:1.5px solid var(--pomodoro);
    border-top:3px solid var(--pomodoro);
  }
  .bm-mode-card > *:not(.bm-mode-card-bg){ position:relative; z-index:1; }
  .bm-mode-card-icon{ font-size:22px; margin-bottom:6px; display:block; }
  .bm-mode-card-title{ font-size:12.5px; font-weight:700; color:var(--text); margin-bottom:4px; line-height:1.25; }
  .bm-mode-card-desc{ font-size:9.5px; color:var(--dim); line-height:1.35; margin-bottom:8px; }
  .bm-mode-card-tag{
    font-size:8.5px; font-weight:800; letter-spacing:.06em;
    padding:3px 6px; border-radius:14px; display:inline-block;
  }
  .battle-card .bm-mode-card-tag{ background:var(--card); color:var(--battle); }
  .daily-card .bm-mode-card-tag{ background:var(--card); color:var(--botany); }
  .timer-card .bm-mode-card-tag{ background:var(--card); color:var(--pomodoro); }

  /* ================================================================
     BATTLE MODAL SHELL
     ================================================================ */
  .battle-overlay{ z-index:290; }
  .battle-shell{
    display:flex; flex-direction:column;
    width:100%; max-width:560px; height:100dvh;
    background:var(--bg);
    border-radius:0;
    overflow:hidden;
  }
  .battle-topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px;
    border-bottom:1px solid var(--line);
    background:var(--card);
    flex-shrink:0;
  }
  .battle-brand{
    display:flex; align-items:center; gap:8px;
    font-size:14px; font-weight:700; color:var(--text); letter-spacing:.02em;
  }
  .battle-dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--battle);
    animation:bmDotPulse 1.4s ease-in-out infinite;
  }
  @keyframes bmDotPulse{ 0%,100%{opacity:1;} 50%{opacity:.4;} }
  .battle-body{ flex:1; overflow-y:auto; padding:16px; }

  /* ================================================================
     BATTLE SETUP SCREEN
     ================================================================ */
  .bm-setup{ display:flex; flex-direction:column; gap:4px; animation:bmSlideUp .35s ease; }
  @keyframes bmSlideUp{ from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:none;} }
  .bm-title-row{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
  .bm-title-icon{ font-size:36px; animation:bmBounce 1s ease infinite alternate; }
  @keyframes bmBounce{ from{transform:translateY(0);} to{transform:translateY(-4px);} }
  .bm-title{ font-size:22px; font-weight:800; color:var(--text); }
  .bm-subtitle{ font-size:12px; color:var(--dim); margin-top:2px; }
  .bm-section-label{ font-size:9.5px; font-weight:800; letter-spacing:.1em; color:var(--dim); margin-bottom:8px; }
  .bm-subject-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .bm-subject-btn{
    border:1.5px solid var(--line); border-radius:14px;
    background:var(--card); padding:14px 12px;
    cursor:pointer; display:flex; align-items:center; gap:10px;
    transition:all .18s ease;
  }
  .bm-subject-btn:hover{ border-color:var(--subclr,var(--botany)); background:var(--card-2); }
  .bm-subject-btn.selected{
    border-color:var(--subclr,var(--botany));
    background:color-mix(in srgb, var(--subclr,var(--botany)) 12%, var(--card));
    
  }
  .bms-emoji{ font-size:20px; }
  .bms-label{ font-size:13px; font-weight:700; color:var(--text); }
  .bm-diff-row{ display:flex; gap:8px; }
  .bm-diff-btn{
    flex:1; border:1.5px solid var(--line); border-radius:14px;
    background:var(--card); padding:12px 8px;
    cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px;
    transition:all .18s ease;
  }
  .bm-diff-btn.selected[data-diff="easy"]{ border-color:var(--botany); background:rgba(91,201,138,0.1);  }
  .bm-diff-btn.selected[data-diff="medium"]{ border-color:var(--chem); background:rgba(194,121,10,0.1);  }
  .bm-diff-btn.selected[data-diff="hard"]{ border-color:var(--danger); background:rgba(178,58,78,0.1);  }
  .bm-diff-icon{ font-size:20px; }
  .bm-diff-name{ font-size:12px; font-weight:700; color:var(--text); }
  .bm-diff-desc{ font-size:10px; color:var(--dim); }
  .bm-start-btn{
    margin-top:20px; width:100%; padding:16px;
    border:none; border-radius:var(--radius-pill);
    background:var(--battle);
    color:var(--on-accent); font-weight:800; font-size:15px;
    cursor:pointer; letter-spacing:.02em;
    box-shadow:var(--shadow-raised);
    transition:all .18s ease;
  }
  .bm-start-btn:not(:disabled):hover{ transform:translateY(-2px); }
  .bm-start-btn:active{ transform:scale(0.97); }
  .bm-start-btn:disabled{ opacity:0.4; cursor:not-allowed; }

  @keyframes bmFlashAttn{
    0%,100%{ box-shadow:none; }
    20%,60%{ box-shadow:0 0 0 3px rgba(178,58,78,0.55); }
    40%,80%{ box-shadow:0 0 0 3px rgba(178,58,78,0.15); }
  }
  .bm-flash-attn{ animation:bmFlashAttn .85s ease; border-radius:14px; }

  /* ================================================================
     PLAY A FRIEND — create/join a room by code
     ================================================================ */
  .bm-divider{ display:flex; align-items:center; gap:10px; margin:18px 0 4px; }
  .bm-divider::before, .bm-divider::after{ content:""; flex:1; height:1px; background:var(--line); }
  .bm-divider span{ font-size:10.5px; font-weight:700; color:var(--dim); letter-spacing:.03em; white-space:nowrap; }
  .bm-friend-row{ display:flex; gap:8px; }
  .bm-friend-btn{
    flex:1; border:1.5px solid var(--line); border-radius:14px;
    background:var(--card); padding:14px 10px;
    cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px;
    transition:all .18s ease;
  }
  .bm-friend-btn:not(:disabled):hover{ border-color:rgba(156,74,46,0.4); background:var(--card-2); transform:translateY(-1px); }
  .bm-friend-btn:disabled{ opacity:0.4; cursor:not-allowed; }
  .bm-friend-icon{ font-size:20px; }
  .bm-friend-label{ font-size:12.5px; font-weight:700; color:var(--text); }
  .bm-friend-sub{ font-size:9.5px; color:var(--dim); }

  .bm-friend-wait{ display:flex; flex-direction:column; align-items:center; padding:20px 0; gap:12px; text-align:center; animation:bmSlideUp .35s ease; }
  .bm-friend-wait-title{ font-size:17px; font-weight:800; color:var(--text); }
  .bm-friend-wait-sub{ font-size:12px; color:var(--dim); margin-top:-6px; }
  .bm-room-code{
    font-size:34px; font-weight:800; letter-spacing:.18em; color:var(--text);
    background:var(--card-2);
    border:1.5px dashed var(--battle); border-radius:0;
    padding:14px 22px; margin:4px 0; font-family:monospace;
  }
  .bm-friend-wait-actions{ display:flex; gap:8px; width:100%; }
  .bm-code-btn{
    flex:1; border:1.5px solid var(--line-strong); border-radius:14px;
    background:var(--card); color:var(--text); font-weight:700; font-size:12.5px;
    padding:11px 8px; cursor:pointer; transition:all .18s ease;
  }
  .bm-code-btn:hover{ border-color:rgba(156,74,46,0.4); background:var(--card-2); }
  .bm-cancel-btn{
    border:none; background:transparent; color:var(--dim); font-size:12.5px;
    font-weight:600; padding:8px; cursor:pointer; text-decoration:underline;
  }
  .bm-code-input{
    width:100%; text-align:center; font-size:26px; font-weight:800; letter-spacing:.3em;
    font-family:monospace; text-transform:uppercase; color:var(--text);
    background:var(--card); border:1.5px solid var(--line-strong); border-radius:14px;
    padding:14px 8px 14px 16px; outline:none; transition:border-color .18s ease;
  }
  .bm-code-input:focus{ border-color:var(--battle); }
  .bm-join-err{ font-size:11.5px; color:var(--danger); min-height:14px; }

  /* ================================================================
     PAIRING SCREEN
     ================================================================ */
  .bm-pairing{ display:flex; flex-direction:column; align-items:center; padding:24px 0; gap:20px; animation:bmSlideUp .35s ease; }
  .bm-pairing-title{ font-size:16px; font-weight:700; color:var(--dim); letter-spacing:.04em; }
  .bm-pairing-arena{ display:flex; align-items:center; gap:16px; width:100%; justify-content:center; }
  .bm-pairing-player{ display:flex; flex-direction:column; align-items:center; gap:8px; }
  .bm-pairing-avatar{
    width:70px; height:70px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:32px;
    border:2.5px solid var(--line-strong);
    background:var(--card);
    transition:all .4s ease;
  }
  .bm-pairing-avatar.you{ border-color:var(--botany);  }
  .bm-pairing-avatar.searching{ animation:bmSearch 1s ease-in-out infinite alternate; }
  .bm-pairing-avatar.found{ border-color:var(--battle);  animation:bmFoundPop .4s cubic-bezier(.22,1,.36,1); }
  @keyframes bmSearch{ from{opacity:.5;transform:scale(0.95);} to{opacity:1;transform:scale(1.05);} }
  @keyframes bmFoundPop{ from{transform:scale(0.5);opacity:0;} to{transform:scale(1);opacity:1;} }
  .bm-pairing-name{ font-size:13px; font-weight:700; color:var(--text); }
  .bm-pairing-tag{ font-size:10px; color:var(--dim); }
  .bm-vs-pulse{ position:relative; width:64px; height:64px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .bm-vs-ring{
    position:absolute; border-radius:50%; border:2px solid rgba(156,74,46,0.5);
    width:100%; height:100%;
    animation:bmRingPulse 1.6s ease-out infinite;
  }
  .bm-vs-ring.r2{ animation-delay:.5s; }
  .bm-vs-ring.r3{ animation-delay:1s; }
  @keyframes bmRingPulse{ 0%{transform:scale(.4);opacity:1;} 100%{transform:scale(1.4);opacity:0;} }
  .bm-vs-text{ font-size:18px; font-weight:900; color:var(--battle); position:relative; z-index:1;  }
  .bm-pairing-dots{ display:flex; gap:6px; }
  .bm-pairing-dots span{ width:8px; height:8px; border-radius:50%; background:var(--battle); animation:bmDot .8s ease-in-out infinite alternate; }
  .bm-pairing-dots span:nth-child(2){ animation-delay:.15s; }
  .bm-pairing-dots span:nth-child(3){ animation-delay:.3s; }
  @keyframes bmDot{ from{opacity:.25;transform:scale(.7);} to{opacity:1;transform:scale(1);} }
  .bm-pairing-msg{ font-size:13px; color:var(--dim); font-style:italic; }

  /* ================================================================
     GAME SCREEN
     ================================================================ */
  .bm-game{ display:flex; flex-direction:column; gap:12px; animation:bmSlideUp .3s ease; }
  .bm-scoreboard{
    display:flex; align-items:center; justify-content:space-between;
    background:var(--card); border-radius:14px; padding:12px 14px;
    border:1px solid rgba(156,74,46,0.15);
  }
  .bm-score-you,.bm-score-opp{ display:flex; flex-direction:column; align-items:center; gap:2px; }
  .bm-score-lbl{ font-size:10px; font-weight:700; color:var(--dim); letter-spacing:.06em; }
  .bm-score-val{ font-size:26px; font-weight:900; color:var(--text); line-height:1; }
  .bm-score-center{ display:flex; flex-direction:column; align-items:center; gap:6px; }
  .bm-q-badge{ font-size:10px; font-weight:800; color:var(--battle); letter-spacing:.06em; }
  .bm-timer-wrap{ position:relative; width:46px; height:46px; display:flex; align-items:center; justify-content:center; }
  .bm-timer-svg{ width:46px; height:46px; transform:rotate(-90deg); }
  .bm-timer-bg{ fill:none; stroke:var(--line); stroke-width:3; }
  .bm-timer-arc{ fill:none; stroke:var(--botany); stroke-width:3; stroke-linecap:round; transition:stroke .3s ease; }
  .bm-timer-num{
    position:absolute; font-size:14px; font-weight:800; color:var(--text);
    transition:color .3s ease;
  }
  .bm-timer-num.urgent{ color:var(--danger); animation:bmUrgent .3s ease infinite alternate; }
  @keyframes bmUrgent{ from{transform:scale(1);} to{transform:scale(1.15);} }
  .bm-progress-bar{ height:3px; background:var(--line); border-radius:14px; overflow:hidden; }
  .bm-progress-fill{ height:100%; background:var(--battle); border-radius:0; transition:width .4s ease; }
  .bm-question-card{
    background:var(--card); border-radius:14px; padding:18px;
    border:1px solid rgba(156,74,46,0.18);
    
  }
  .bm-q-subject-tag{ font-size:10px; font-weight:700; color:var(--battle); letter-spacing:.06em; margin-bottom:10px; }
  .bm-q-text{ font-size:15px; font-weight:600; color:var(--text); line-height:1.55; }
  .bm-options{ display:flex; flex-direction:column; gap:8px; }
  .bm-opt{
    display:flex; align-items:center; gap:12px;
    background:var(--card); border:1.5px solid var(--line); border-radius:14px;
    padding:13px 14px; cursor:pointer; text-align:left;
    transition:all .15s ease;
  }
  .bm-opt:hover:not(:disabled){ border-color:rgba(156,74,46,0.5); background:rgba(156,74,46,0.07); }
  .bm-opt.correct{ border-color:var(--botany) !important; background:rgba(91,201,138,0.12) !important; animation:bmCorrectPop .3s ease; }
  .bm-opt.wrong{ border-color:var(--danger) !important; background:rgba(178,58,78,0.1) !important; animation:bmWrongShake .3s ease; }
  @keyframes bmCorrectPop{ 0%{transform:scale(1);} 50%{transform:scale(1.02);} 100%{transform:scale(1);} }
  @keyframes bmWrongShake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);} }
  .bm-opt-letter{
    width:26px; height:26px; border-radius:14px; flex-shrink:0;
    background:rgba(156,74,46,0.15); color:var(--battle);
    font-size:11px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
  }
  .bm-opt.correct .bm-opt-letter{ background:rgba(91,201,138,0.25); color:var(--botany); }
  .bm-opt.wrong .bm-opt-letter{ background:rgba(178,58,78,0.2); color:var(--danger); }
  .bm-opt-text{ font-size:13.5px; font-weight:500; color:var(--text); }
  .bm-comp-thinking{
    display:flex; align-items:center; gap:8px; justify-content:center;
    padding:10px; font-size:12px; color:var(--dim);
    background:var(--card-2); border-radius:14px;
  }
  .bm-thinking-dots span{ display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--dim); animation:bmDot .7s ease-in-out infinite alternate; margin:0 1px; }
  .bm-thinking-dots span:nth-child(2){ animation-delay:.1s; }
  .bm-thinking-dots span:nth-child(3){ animation-delay:.2s; }
  .bm-comp-result{ font-weight:700; }
  .bm-comp-result.correct{ color:var(--botany); }
  .bm-comp-result.wrong{ color:var(--danger); }

  /* ================================================================
     RESULTS SCREEN
     ================================================================ */
  .bm-results{ display:flex; flex-direction:column; gap:14px; animation:bmSlideUp .4s ease; }
  .bm-result-header{
    border-radius:14px; padding:24px 20px; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:6px;
  }
  .bm-result-header.won{ background:var(--card-2); border:1.5px solid var(--botany); border-top:3px solid var(--botany); }
  .bm-result-header.lost{ background:var(--card-2); border:1.5px solid var(--danger); border-top:3px solid var(--danger); }
  .bm-result-header.draw{ background:var(--card-2); border:1.5px solid var(--chem); border-top:3px solid var(--chem); }
  .bm-result-trophy{ font-size:48px; animation:bmTrophyBounce .6s cubic-bezier(.22,1,.36,1); }
  @keyframes bmTrophyBounce{ from{transform:scale(0) rotate(-20deg);} to{transform:scale(1) rotate(0);} }
  .bm-result-verdict{ font-size:22px; font-weight:900; color:var(--text); letter-spacing:.01em; }
  .bm-result-sub{ font-size:13px; color:var(--dim); }
  .bm-result-scoreboard{ display:flex; align-items:center; gap:10px; }
  .bm-rs-card{
    flex:1; background:var(--card); border-radius:14px; padding:14px 12px;
    border:1.5px solid var(--line); text-align:center; display:flex; flex-direction:column; gap:4px;
    transition:border-color .3s;
  }
  .bm-rs-card.winner{ border-color:var(--botany);  }
  .bm-rs-vs{ font-size:12px; font-weight:800; color:var(--dim); flex-shrink:0; }
  .bm-rs-who{ font-size:11px; font-weight:700; color:var(--dim); }
  .bm-rs-score{ font-size:28px; font-weight:900; color:var(--text); line-height:1; }
  .bm-rs-score span{ font-size:14px; font-weight:500; color:var(--dim); }
  .bm-rs-acc{ font-size:11px; color:var(--dim); }
  .bm-rs-time{ font-size:11px; color:var(--dim-2); }
  .bm-result-breakdown{ background:var(--card); border-radius:14px; padding:14px; border:1px solid var(--line); }
  .bm-rb-title{ font-size:9.5px; font-weight:800; letter-spacing:.1em; color:var(--dim); margin-bottom:10px; }
  .bm-rb-row{ display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--line); }
  .bm-rb-row:last-child{ border-bottom:none; }
  .bm-rb-q{ font-size:10px; font-weight:700; color:var(--dim); width:24px; flex-shrink:0; }
  .bm-rb-you,.bm-rb-opp{ font-size:12px; font-weight:600; flex:1; }
  .bm-rb-you.c,.bm-rb-opp.c{ color:var(--botany); }
  .bm-rb-you.w,.bm-rb-opp.w{ color:var(--danger); }
  .bm-rb-t{ font-size:10px; color:var(--dim); margin-left:4px; }
  .bm-result-actions{ display:flex; gap:10px; padding-bottom:8px; }
  .bm-rematch-btn{
    flex:2; padding:15px; border:none; border-radius:var(--radius-pill);
    background:var(--battle);
    color:var(--on-accent); font-weight:800; font-size:14px; cursor:pointer;
    box-shadow:var(--shadow-raised); transition:all .18s ease;
  }
  .bm-rematch-btn:hover{ transform:translateY(-2px); }
  .bm-rematch-btn:active{ transform:scale(0.97); }
  .bm-home-btn{
    flex:1; padding:15px; border:1.5px solid var(--line); border-radius:var(--radius-pill);
    background:transparent; color:var(--dim); font-weight:700; font-size:14px; cursor:pointer;
    transition:all .15s ease;
  }
  .bm-home-btn:hover{ border-color:var(--text); color:var(--text); }

  /* ================================================================
     STUDY TIMER (Pomodoro + Stopwatch)
     ================================================================ */
  .timer-shell{
    display:flex; flex-direction:column;
    width:100%; max-width:560px; height:100dvh;
    background:var(--bg); overflow:hidden;
  }
  .timer-topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; border-bottom:1px solid var(--line);
    background:var(--card); flex-shrink:0;
  }
  .timer-brand{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--text); letter-spacing:.02em; }
  .timer-brand-dot{ width:8px; height:8px; border-radius:50%; background:var(--pomodoro); animation:bmDotPulse 1.4s ease-in-out infinite; }
  .timer-topbar-actions{ display:flex; align-items:center; gap:16px; }
  .timer-icon-btn{ display:flex; color:var(--dim); cursor:pointer; transition:color .15s ease, transform .25s ease; }
  .timer-icon-btn svg{ width:19px; height:19px; }
  .timer-icon-btn:hover{ color:var(--text); }
  .timer-icon-btn.active{ color:var(--pomodoro); transform:rotate(50deg); }
  .timer-body{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:18px; }

  /* mode tabs (Pomodoro / Stopwatch) */
  .tmr-tabs{ display:flex; background:var(--card-2); border-radius:var(--radius-pill); padding:4px; gap:4px; flex-shrink:0; }
  .tmr-tab{
    flex:1; padding:9px 0; border:none; background:transparent; border-radius:var(--radius-pill);
    font-size:12.5px; font-weight:700; color:var(--dim); cursor:pointer;
    transition:all .2s ease; font-family:inherit;
  }
  .tmr-tab.active{ background:var(--card); color:var(--pomodoro); box-shadow:var(--shadow-card); }

  /* settings drawer — grid-rows collapse animates to true content height, no hardcoded cap */
  .tmr-settings{
    display:grid; grid-template-rows:0fr; opacity:0;
    transition:grid-template-rows .35s ease, opacity .25s ease;
  }
  .tmr-settings.open{ grid-template-rows:1fr; opacity:1; }
  .tmr-settings-card{
    background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px;
    display:flex; flex-direction:column; gap:14px;
    overflow:hidden; min-height:0;
  }
  .tmr-settings-title{ font-size:10.5px; font-weight:800; color:var(--dim); letter-spacing:.08em; text-transform:uppercase; }
  .tmr-set-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .tmr-set-label{ font-size:13px; font-weight:600; color:var(--text); }
  .tmr-set-sub{ font-size:10.5px; color:var(--dim); margin-top:1px; }
  .tmr-stepper{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .tmr-step-btn{
    width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:var(--card-2);
    color:var(--text); font-size:15px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:transform .15s ease, border-color .15s ease; padding:0; line-height:1;
  }
  .tmr-step-btn:active{ transform:scale(0.9); }
  .tmr-step-btn:hover{ border-color:var(--pomodoro); }
  .tmr-step-val{ font-family:var(--mono); font-size:13.5px; font-weight:700; color:var(--text); min-width:38px; text-align:center; }
  .tmr-switch{
    width:40px; height:23px; border-radius:999px; background:var(--line-strong); position:relative; cursor:pointer;
    border:none; flex-shrink:0; transition:background .2s ease; padding:0;
  }
  .tmr-switch.on{ background:var(--pomodoro); }
  .tmr-switch-knob{
    position:absolute; top:2.5px; left:2.5px; width:18px; height:18px; border-radius:50%;
    background:#fff; transition:transform .2s ease; box-shadow:0 1px 3px rgba(0,0,0,0.3);
  }
  .tmr-switch.on .tmr-switch-knob{ transform:translateX(17px); }
  .tmr-settings-reset{ align-self:flex-start; }
  .tmr-set-hr{ height:1px; background:var(--line); border:none; margin:0; }

  /* phase label + round dots */
  .tmr-phase-row{ display:flex; flex-direction:column; align-items:center; gap:9px; flex-shrink:0; }
  .tmr-phase-pill{
    font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
    padding:5px 14px; border-radius:999px; color:#fff;
    background:var(--phase-color, var(--pomodoro)); transition:background .35s ease;
  }
  .tmr-dots{ display:flex; gap:6px; }
  .tmr-dot{ width:7px; height:7px; border-radius:50%; background:var(--line-strong); transition:all .25s ease; }
  .tmr-dot.filled{ background:var(--pomodoro); }
  .tmr-dot.active{ background:var(--pomodoro); animation:tmrDotPulse 1s ease-in-out infinite; }
  @keyframes tmrDotPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.35); opacity:.55; } }

  /* ring */
  .tmr-ring-wrap{ position:relative; width:100%; max-width:246px; aspect-ratio:1; margin:0 auto; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .tmr-ring-svg{ width:100%; height:100%; transform:rotate(-90deg); display:block; }
  .tmr-ring-bg{ fill:none; stroke:var(--line); stroke-width:7; }
  .tmr-ring-arc{ fill:none; stroke:var(--phase-color, var(--pomodoro)); stroke-width:7; stroke-linecap:round; transition:stroke .35s ease; }
  .tmr-ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
  .tmr-time{ font-family:var(--mono); font-size:42px; font-weight:700; color:var(--text); letter-spacing:-.01em; line-height:1; }
  .tmr-time.urgent{ color:var(--danger); animation:bmUrgent .4s ease infinite alternate; }
  .tmr-round-info{ font-size:11px; color:var(--dim); font-weight:600; margin-top:8px; }
  .tmr-ring-wrap.running .tmr-ring-arc{
    filter:drop-shadow(0 0 9px color-mix(in srgb, var(--phase-color, var(--pomodoro)) 50%, transparent));
  }

  /* subject picker */
  .tmr-subject-block{ flex-shrink:0; }
  .tmr-subject-label{ font-size:10.5px; font-weight:800; color:var(--dim); letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; display:block; }

  /* controls */
  .tmr-controls{ display:flex; align-items:center; justify-content:center; gap:16px; flex-shrink:0; }
  .tmr-ctrl-btn{
    width:50px; height:50px; border-radius:50%; border:1.5px solid var(--line); background:var(--card);
    color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:all .15s ease; padding:0;
  }
  .tmr-ctrl-btn svg{ width:19px; height:19px; }
  .tmr-ctrl-btn:hover:not(:disabled){ border-color:var(--pomodoro); color:var(--pomodoro); }
  .tmr-ctrl-btn:active:not(:disabled){ transform:scale(0.92); }
  .tmr-ctrl-btn:disabled{ opacity:.35; cursor:not-allowed; }
  .tmr-play-btn{
    width:74px; height:74px; border:none; border-radius:50%;
    background:var(--phase-color, var(--pomodoro)); color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow-raised); transition:all .18s ease, background .35s ease;
  }
  .tmr-play-btn svg{ width:26px; height:26px; }
  .tmr-play-btn:hover{ transform:translateY(-2px); }
  .tmr-play-btn:active{ transform:scale(0.94); }

  /* stats */
  .tmr-stats{
    display:flex; justify-content:space-around; align-items:center; background:var(--card); border:1px solid var(--line);
    border-radius:16px; padding:14px 8px; flex-shrink:0;
  }
  .tmr-stat{ display:flex; flex-direction:column; align-items:center; gap:2px; flex:1; }
  .tmr-stat-val{ font-family:var(--mono); font-size:16px; font-weight:700; color:var(--text); }
  .tmr-stat-lbl{ font-size:9px; color:var(--dim); font-weight:600; letter-spacing:.03em; text-transform:uppercase; margin-top:1px; }
  .tmr-stat-div{ width:1px; height:26px; background:var(--line); flex-shrink:0; }

  .tmr-notify-note{ font-size:10px; color:var(--dim-2); line-height:1.4; }

  @media (max-width:360px){
    .tmr-time{ font-size:36px; }
    .tmr-ring-wrap{ max-width:210px; }
  }

  /* floating focus bar — visible on every tab whenever a timer session is in progress */
  .tmr-float-bar{
    display:none; align-items:center; gap:10px;
    margin:0 16px 4px; padding:9px 12px 9px 13px;
    background:var(--card); border:1px solid var(--line); border-left:3px solid var(--phase-color, var(--pomodoro));
    border-radius:14px; box-shadow:var(--shadow-card); cursor:pointer; flex-shrink:0;
  }
  .tmr-float-bar.show{ display:flex; animation:tmrFloatIn .3s cubic-bezier(.34,1.56,.64,1); }
  @keyframes tmrFloatIn{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:translateY(0); } }
  .tmr-float-dot{ width:8px; height:8px; border-radius:50%; background:var(--phase-color, var(--pomodoro)); flex-shrink:0; }
  .tmr-float-bar.running .tmr-float-dot{ animation:bmDotPulse 1.4s ease-in-out infinite; }
  .tmr-float-bar:not(.running) .tmr-float-dot{ opacity:.45; }
  .tmr-float-info{ flex:1; min-width:0; }
  .tmr-float-label{ font-size:12px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tmr-float-sub{ font-size:10px; color:var(--dim); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tmr-float-time{ font-family:var(--mono); font-size:15px; font-weight:700; color:var(--text); flex-shrink:0; }
  .tmr-float-btn{
    width:29px; height:29px; border-radius:50%; border:none; flex-shrink:0;
    background:var(--phase-color, var(--pomodoro)); color:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
  }
  .tmr-float-btn svg{ width:12px; height:12px; }
  .tmr-float-btn:active{ transform:scale(0.9); }