/* ============================================================================
   24-grammar.css — Grammar Hub + Tense Matrix + Topic page + Placement test
   ----------------------------------------------------------------------------
   Concept: "Grammar is about time."  The home page is built from four bands —
   HERO (copy + live progress panel) → TENSE MATRIX (signature grid, each cell
   carries a mini timeline showing where the tense lives relative to NOW) →
   PLACEMENT CTA → CATEGORY sections (hue-coded, numbered, progress chips).

   Motion personality: staggered fade-up reveals per section, count-up rings,
   CEFR meter fills, a pulsing "now" heartbeat in every matrix cell, 3D-tilt
   level panel with an orbiting gradient border. Everything animates transform/
   opacity only and respects prefers-reduced-motion.

   Reuses tokens from 00-base.css (--bg, --card-*, --lime/--violet/--cyan,
   --radius, --shadow-lg). Adds --gold (mastered) + --pink (category hue).
   ============================================================================ */

:root{
  --gold:        #f4c95d;
  --gold-soft:   rgba(244,201,93,0.18);
  --pink:        #ff7ad9;
  --gr-grad:     linear-gradient(135deg, var(--violet), var(--cyan));
  --gr-grad-2:   linear-gradient(135deg, var(--cyan), var(--lime));
  --gr-grad-3:   linear-gradient(135deg, var(--violet), #ff7ad9);
  --gr-ring:     rgba(139,109,255,.35);
}
:root[data-theme="light"]{
  --gold:        #b8860b;
  --gold-soft:   rgba(184,134,11,0.12);
  --pink:        #d6409f;
}

/* Hue palette — stat chips on the hero + category sections share it */
.gr-stat-chip[data-hue="violet"], .gr-cat[data-hue="violet"]{ --hue:var(--violet); --hue-soft:rgba(139,109,255,.16); }
.gr-stat-chip[data-hue="cyan"],   .gr-cat[data-hue="cyan"]  { --hue:var(--cyan);   --hue-soft:rgba(78,224,242,.14); }
.gr-stat-chip[data-hue="lime"],   .gr-cat[data-hue="lime"]  { --hue:var(--lime);   --hue-soft:rgba(198,242,78,.14); }
.gr-stat-chip[data-hue="gold"],   .gr-cat[data-hue="gold"]  { --hue:var(--gold);   --hue-soft:rgba(244,201,93,.15); }
.gr-stat-chip[data-hue="pink"],   .gr-cat[data-hue="pink"]  { --hue:var(--pink);   --hue-soft:rgba(255,122,217,.14); }
:root[data-theme="light"] .gr-cat[data-hue="pink"],
:root[data-theme="light"] .gr-stat-chip[data-hue="pink"]{ --hue-soft:rgba(214,64,159,.10); }

/* ============================================================================
   Page chrome — when /grammar/* is active, hide every other top-level section
   so only the three grammar hosts paint. Listening/Reading/Articles do the
   same via their own *-mode classes. Footer stays visible.
   ============================================================================ */
body.grammar-mode > section:not(#grammar-home):not(#grammar-topic):not(#grammar-test):not(#grammar-practice):not(#grammar-band):not(#grammar-errors):not(#grammar-compare):not(#grammar-proofread):not(#grammar-leaderboard):not(#grammar-course):not(#grammar-unit),
body.grammar-mode > main > section:not(#grammar-home):not(#grammar-topic):not(#grammar-test):not(#grammar-practice):not(#grammar-band):not(#grammar-errors):not(#grammar-compare):not(#grammar-proofread):not(#grammar-leaderboard):not(#grammar-course):not(#grammar-unit),
body.grammar-mode #home,
body.grammar-mode .hero,
body.grammar-mode .skills,
body.grammar-mode .checker,
body.grammar-mode .trust,
body.grammar-mode .testimonials,
body.grammar-mode .faq,
body.grammar-mode .pricing-cta,
body.grammar-mode .features,
body.grammar-mode .how,
body.grammar-mode .cta,
body.grammar-mode .demo,
body.grammar-mode .band-checker,
body.grammar-mode .compare,
body.grammar-mode .skills-grid,
body.grammar-mode .recent-topics-section,
body.grammar-mode #reading,
body.grammar-mode #topics,
body.grammar-mode #pricing{
  display:none !important;
}
body.grammar-mode footer{ display:block; }

/* ----- Grammar-mode background -----
   The homepage aurora orbs are bright/saturated for product-marketing punch,
   but they fight with dense educational content. In grammar-mode we dim+blur
   them and paint a calm gradient mesh behind everything instead. */
body.grammar-mode .aurora{ opacity:.10; filter:blur(40px); }
body.grammar-mode::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 8% 0%,   rgba(139,109,255,.22), transparent 60%),
    radial-gradient(ellipse 60% 60% at 95% 30%, rgba(78,224,242,.14),  transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 100%,rgba(198,242,78,.10),  transparent 60%);
  animation:grBgDrift 24s ease-in-out infinite;
}
:root[data-theme="light"] body.grammar-mode::before{
  background:
    radial-gradient(ellipse 70% 60% at 8% 0%,   rgba(109,40,217,.10), transparent 60%),
    radial-gradient(ellipse 60% 60% at 95% 30%, rgba(8,145,178,.08),  transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 100%,rgba(101,163,13,.07), transparent 60%);
}
@keyframes grBgDrift{
  0%,100%{ transform:translate3d(0,0,0)    scale(1);    }
  50%   { transform:translate3d(-2%,1%,0) scale(1.06); }
}

#grammar-home,
#grammar-topic,
#grammar-test{
  display:none;
  padding:40px 0 110px;
  min-height:calc(100vh - 80px);
}
body.grammar-mode #grammar-home.gr-active,
body.grammar-mode #grammar-topic.gr-active,
body.grammar-mode #grammar-test.gr-active{
  display:block;
}

/* One master container — every home band aligns to the same rails. */
.gr-shell{
  max-width:1240px;
  margin:0 auto;
  padding:0 32px;
}

/* ============================================================================
   Reusable bits
   ============================================================================ */

.gr-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.gr-eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--lime); box-shadow:0 0 14px var(--lime);
}

.gr-h1{
  font-family:'Bricolage Grotesque', 'Hanken Grotesk', 'Native Emoji', sans-serif;
  font-size:clamp(36px, 4.8vw, 62px);
  font-weight:800; line-height:1.04; letter-spacing:-.02em;
  margin:12px 0 14px;
  text-wrap:balance;
}
.gr-h1 .ink{
  background:linear-gradient(120deg, var(--lime), var(--cyan) 35%, var(--violet) 70%, var(--lime));
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:grInkPan 8s linear infinite;
}
:root[data-theme="light"] .gr-h1 .ink{
  background:linear-gradient(120deg, #65a30d, #0891b2 35%, #6d28d9 70%, #65a30d);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  animation:grInkPan 8s linear infinite;
}
@keyframes grInkPan{ to{ background-position:220% 0; } }

.gr-sub{
  color:var(--muted); font-size:clamp(15px,1.4vw,17.5px);
  max-width:600px; line-height:1.6;
}

/* Section header pattern: eyebrow → h2 → sub. `.is-center` for the matrix. */
.gr-sec-head{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  margin-bottom:30px;
}
.gr-sec-head h2{
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
  font-size:clamp(26px, 3vw, 38px); font-weight:800;
  letter-spacing:-.02em; margin:0;
}
.gr-sec-head p{ color:var(--muted); font-size:15px; line-height:1.55; margin:0; max-width:580px; }
.gr-sec-head p b{ color:var(--text); font-weight:700; }
.gr-sec-head.is-center{ align-items:center; text-align:center; margin-left:auto; margin-right:auto; }

/* Pill chips for grammar formulas, signal words, tags, etc. */
.gr-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px;
  background:var(--chip-bg);
  border:1px solid var(--card-border);
  border-radius:999px;
  font-size:13px; font-weight:600;
  color:var(--text);
  white-space:nowrap;
}
.gr-chip.is-form{
  background:linear-gradient(135deg, rgba(139,109,255,.18), rgba(78,224,242,.14));
  border-color:rgba(139,109,255,.35);
  font-family:'JetBrains Mono', ui-monospace, 'Native Emoji', monospace;
  font-size:12.5px;
}
.gr-chip.is-signal{
  background:linear-gradient(135deg, rgba(198,242,78,.12), rgba(78,224,242,.10));
  border-color:rgba(198,242,78,.25);
  color:var(--lime);
}
:root[data-theme="light"] .gr-chip.is-signal{
  color:#3f7a00;
  background:linear-gradient(135deg, rgba(101,163,13,.10), rgba(8,145,178,.08));
  border-color:rgba(101,163,13,.30);
}

/* "Formula" chip row — affirmative / negative / question */
.gr-formula-row{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  margin:12px 0;
}
.gr-formula{
  display:grid; grid-template-columns:30px minmax(0,1fr); gap:12px; align-items:center;
  padding:13px 15px;
  background:var(--card-bg-soft);
  border:1px solid var(--card-border);
  border-radius:14px;
  font-size:13.5px;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),
             border-color .25s, box-shadow .25s;
}
.gr-formula:hover{
  transform:translateY(-2px);
  border-color:var(--card-border-hi);
  box-shadow:0 14px 30px -16px rgba(0,0,0,.45);
}
.gr-formula .sym{
  width:30px; height:30px; border-radius:10px;
  display:grid; place-items:center;
  font-family:'JetBrains Mono', ui-monospace, 'Native Emoji', monospace;
  font-weight:800; font-size:15px;
}
.gr-formula[data-k="aff"] .sym{ background:rgba(99,210,140,.13); color:#63d28c; border:1px solid rgba(99,210,140,.30); }
.gr-formula[data-k="neg"] .sym{ background:rgba(255,90,110,.11); color:#ff7a89; border:1px solid rgba(255,90,110,.30); }
.gr-formula[data-k="q"]   .sym{ background:rgba(78,224,242,.11); color:var(--cyan); border:1px solid rgba(78,224,242,.30); }
.gr-formula .fx{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.gr-formula .lbl{
  font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); font-weight:700;
}
.gr-formula .pat{
  font-family:'JetBrains Mono', ui-monospace, 'Native Emoji', monospace;
  font-size:12.5px; line-height:1.5;
  color:var(--text);
  overflow-wrap:break-word;
}

/* ----- Tense-by-tense conjugation table (passive voice) ----- */
.gr-tt{ margin-top:18px; }
.gr-tt-head h4{
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
  font-size:16.5px; font-weight:700; letter-spacing:-.01em;
  margin:0 0 6px;
}
.gr-tt-head p{ color:var(--muted); font-size:13.5px; line-height:1.55; margin:0 0 12px; }
.gr-tt-grid{
  border:1px solid var(--card-border);
  border-radius:16px;
  overflow:hidden;
  background:var(--card-bg);
}
.gr-tt-row{
  display:grid; grid-template-columns:172px 205px minmax(0,1fr);
  gap:14px; align-items:center;
  padding:10px 16px;
  border-top:1px solid var(--hairline);
  transition:background .2s;
}
.gr-tt-row:first-child{ border-top:none; }
.gr-tt-row:not(.is-head):hover{ background:var(--chip-bg-hover); }
.gr-tt-row.is-head{
  padding:9px 16px;
  background:var(--card-bg-soft);
  font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}
.gr-tt-row[data-time="past"]   { --tt:var(--violet); }
.gr-tt-row[data-time="present"]{ --tt:var(--cyan); }
.gr-tt-row[data-time="future"] { --tt:var(--lime); }
.gr-tt-row[data-time="mod"]    { --tt:var(--gold); }
.gr-tt-row .tt-tense{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:700; color:var(--text);
  text-decoration:none;
}
.gr-tt-row .tt-tense i{
  width:7px; height:7px; border-radius:50%; flex:0 0 7px;
  background:var(--tt, var(--muted));
  box-shadow:0 0 8px var(--tt, transparent);
}
.gr-tt-row .tt-tense .tt-go{
  font-size:12px; color:var(--muted); font-weight:800;
  opacity:0; transform:translateX(-3px);
  transition:opacity .2s, transform .2s;
}
.gr-tt-row:hover a.tt-tense .tt-go{ opacity:1; transform:translateX(0); }
.gr-tt-row a.tt-tense:hover{ color:var(--tt, var(--text)); }
.gr-tt-row .tt-form{
  font-family:'JetBrains Mono', ui-monospace, 'Native Emoji', monospace;
  font-size:12px; line-height:1.45; color:var(--text);
  overflow-wrap:break-word;
}
.gr-tt-row .tt-ex{ font-size:13.5px; line-height:1.5; color:var(--muted); }
.gr-tt-row .tt-ex b{
  background:linear-gradient(120deg, var(--lime), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:700;
}
:root[data-theme="light"] .gr-tt-row .tt-ex b{
  background:linear-gradient(120deg, #65a30d, #0891b2);
  -webkit-background-clip:text; background-clip:text;
}
.gr-tt-note{
  display:flex; gap:9px; align-items:flex-start;
  margin-top:12px;
  padding:11px 14px;
  background:var(--card-bg-soft);
  border:1px dashed var(--card-border-hi);
  border-radius:12px;
  font-size:13px; line-height:1.55; color:var(--muted);
}
.gr-tt-note::before{ content:"✦"; color:var(--gold); font-weight:800; flex:0 0 auto; }
@media (max-width:760px){
  .gr-tt-row.is-head{ display:none; }
  .gr-tt-row{
    grid-template-columns:1fr;
    gap:4px;
    padding:12px 14px;
  }
  .gr-tt-row .tt-tense .tt-go{ opacity:1; transform:none; }
}

/* Progress ring — hero panel, category chips. Driven by --p (0..100). */
.gr-ring{
  --p:0; --size:48px; --thick:5px;
  --ring-track:rgba(255,255,255,.09);
  width:var(--size); height:var(--size); flex:0 0 var(--size);
  border-radius:50%;
  background:conic-gradient(var(--lime) calc(var(--p) * 1%), var(--ring-track) 0);
  position:relative;
  display:grid; place-items:center;
}
:root[data-theme="light"] .gr-ring{ --ring-track:rgba(15,23,42,.10); }
.gr-ring::after{
  content:""; position:absolute; inset:var(--thick); border-radius:50%;
  background:var(--bg);
}
.gr-ring .gr-ring-text{
  position:relative; z-index:1;
  font-size:11px; font-weight:800; color:var(--text);
}
@property --p{ syntax:'<number>'; inherits:false; initial-value:0; }

/* ----- Buttons ----- */
.gr-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 18px;
  background:var(--lime); color:var(--on-lime);
  border:none; border-radius:999px;
  font-weight:700; font-size:13.5px; cursor:pointer;
  text-decoration:none;
  box-shadow:0 10px 26px -12px rgba(198,242,78,.55);
  transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .25s, opacity .2s, background .2s;
}
.gr-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(198,242,78,.65); }
.gr-btn:active{ transform:translateY(0) scale(.97); }
.gr-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.gr-btn .arr{ display:inline-block; transition:transform .25s cubic-bezier(.2,.7,.2,1); }
.gr-btn:hover .arr{ transform:translateX(3px); }
.gr-btn:hover .arr.arr-down{ transform:translateY(3px); }
.gr-btn-ghost{
  background:transparent; color:var(--text);
  border:1px solid var(--card-border-hi);
  box-shadow:none;
}
.gr-btn-ghost:hover{ background:var(--chip-bg-hover); box-shadow:none; }
.gr-btn-lg{ padding:13px 22px; font-size:14.5px; }

/* ============================================================================
   Reveal-on-scroll machinery — baseline state is ALWAYS fully visible.
   Adding .gr-reveal to a group merely *plays* a one-shot entrance, so content
   can never get stuck hidden if an observer fails to fire.
   - .gr-stagger (legacy, topic/test pages): children auto-indexed via --i.
   - .gr-sec (home): elements opt in via .gr-anim / matrix cells / topic cards.
   ============================================================================ */
.gr-stagger.gr-reveal > *{
  animation:grRise .55s cubic-bezier(.2,.7,.2,1) backwards;
  animation-delay:calc(var(--i, 0) * 60ms);
}
.gr-sec.gr-reveal .gr-anim{
  animation:grRise .7s cubic-bezier(.2,.7,.2,1) backwards;
  animation-delay:calc(var(--i, 0) * 90ms);
}
@keyframes grRise{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:translateY(0); }
}
@keyframes grCellIn{
  from{ opacity:0; transform:translateY(14px) scale(.97); }
  to  { opacity:1; transform:none; }
}

/* Major home bands */
.gr-sec{ margin-top:104px; }
.gr-sec:first-child{ margin-top:0; }
.gr-cat.gr-sec{ margin-top:72px; }

/* ============================================================================
   HERO — copy left, live progress panel right
   ============================================================================ */
.gr-hero{
  display:grid; grid-template-columns:minmax(0,1fr) 400px;
  gap:clamp(36px, 5vw, 72px);
  align-items:center;
  padding-top:26px;
  perspective:1400px;
}
.gr-hero-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.gr-hero-copy .gr-h1{ margin:0; }
.gr-hero-copy .gr-sub{ margin:0; }

.gr-hero-stats{ display:flex; flex-wrap:wrap; gap:10px; margin-top:2px; }
.gr-stat-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  background:var(--chip-bg);
  border:1px solid var(--card-border);
  border-radius:999px;
  font-size:13px; color:var(--muted); font-weight:600;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s, background .25s;
}
.gr-stat-chip:hover{ transform:translateY(-2px); border-color:var(--card-border-hi); background:var(--chip-bg-hover); }
.gr-stat-chip b{ color:var(--text); font-weight:800; }
.gr-stat-chip i{
  width:7px; height:7px; border-radius:50%;
  background:var(--hue, var(--lime));
  box-shadow:0 0 8px var(--hue, var(--lime));
}
.gr-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }

/* ----- The level panel ----- */
.gr-panel{ position:relative; }
.gr-panel-tilt{
  position:relative;
  border-radius:26px;
  padding:24px 24px 22px;
  background:linear-gradient(165deg, rgba(139,109,255,.16), rgba(20,16,28,.66) 45%, rgba(78,224,242,.10));
  border:1px solid var(--card-border-hi);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7), 0 4px 18px -8px rgba(139,109,255,.25);
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
:root[data-theme="light"] .gr-panel-tilt{
  background:linear-gradient(165deg, rgba(139,109,255,.10), rgba(255,255,255,.88) 45%, rgba(8,145,178,.08));
  box-shadow:0 30px 60px -28px rgba(30,40,80,.30), 0 4px 18px -8px rgba(109,40,217,.15);
}
/* Orbiting gradient border (graceful no-op where @property is unsupported) */
@property --gr-ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.gr-panel-tilt::before{
  content:""; position:absolute; inset:-1px; border-radius:27px; padding:1.5px;
  background:conic-gradient(from var(--gr-ang),
    rgba(139,109,255,0) 0%, rgba(139,109,255,.85) 10%,
    rgba(78,224,242,.85) 20%, rgba(139,109,255,0) 32%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  animation:grOrbit 6s linear infinite;
  pointer-events:none;
}
@keyframes grOrbit{ to{ --gr-ang:360deg; } }
/* Pointer-follow sheen (driven by --mx/--my from JS) */
.gp-glow{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,72%) var(--my,18%), rgba(255,255,255,.09), transparent 62%);
}
:root[data-theme="light"] .gp-glow{
  background:radial-gradient(240px circle at var(--mx,72%) var(--my,18%), rgba(109,40,217,.07), transparent 62%);
}

.gp-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.gp-eyebrow{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cyan); font-weight:700;
}
.gp-date{ font-size:11.5px; color:var(--muted); }
.gp-level{
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
  font-size:58px; font-weight:800; line-height:1; letter-spacing:-.02em;
  margin:12px 0 4px;
  background:linear-gradient(120deg, var(--gold), var(--lime));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gp-level.is-empty{
  font-size:25px; line-height:1.15; margin-top:14px;
  background:linear-gradient(120deg, var(--cyan), var(--violet));
  -webkit-background-clip:text; background-clip:text;
}
.gp-name{ font-size:13px; color:var(--muted); font-weight:600; }

.gp-meter{ margin-top:16px; }
.gp-meter-track{
  position:relative;
  display:grid; grid-template-columns:repeat(6, 1fr); gap:5px;
}
.gp-meter-track .seg{
  height:12px; border-radius:7px;
  background:var(--card-bg-soft); border:1px solid var(--card-border);
  position:relative; overflow:hidden;
}
.gp-meter-track .seg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--violet), var(--cyan));
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--d, 0) * 90ms + .5s);
}
.gp-meter-track .seg.is-this::after{ background:linear-gradient(90deg, var(--gold), var(--lime)); }
.gp-meter-track .seg.is-this{
  box-shadow:0 0 0 1.5px rgba(244,201,93,.5), 0 0 18px -4px rgba(244,201,93,.55);
}
.gr-sec.gr-reveal .gp-meter .seg.is-on::after{ transform:scaleX(1); }
/* Untested: a slow shimmer slides across the empty meter */
.gp-meter.is-empty .gp-meter-track::after{
  content:""; position:absolute; inset:0; border-radius:7px; pointer-events:none;
  background:linear-gradient(100deg, transparent 32%, rgba(255,255,255,.10) 50%, transparent 68%);
  background-size:240% 100%;
  animation:gpShimmer 3.2s ease-in-out infinite;
}
:root[data-theme="light"] .gp-meter.is-empty .gp-meter-track::after{
  background:linear-gradient(100deg, transparent 32%, rgba(15,23,42,.08) 50%, transparent 68%);
  background-size:240% 100%;
}
@keyframes gpShimmer{ 0%{ background-position:135% 0; } 100%{ background-position:-135% 0; } }
.gp-meter-labels{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:5px;
  margin-top:6px;
  font-size:10px; font-weight:700; letter-spacing:.08em;
  color:var(--muted); text-align:center;
}
.gp-meter-labels .is-this{ color:var(--gold); }

.gp-divider{ height:1px; background:var(--hairline); margin:18px 0 14px; }

.gp-mastery{ display:flex; align-items:center; gap:14px; }
.gp-mastery-copy{ display:flex; flex-direction:column; gap:2px; }
.gp-mastery-copy b{ font-size:14px; font-weight:700; }
.gp-mastery-copy span{ font-size:12px; color:var(--muted); }

.gp-cta{ width:100%; margin-top:18px; padding:12px 18px; }

/* ============================================================================
   TENSE MATRIX
   ============================================================================ */
/* Center the header over the 3 tense columns (compensate the label gutter) */
@media (min-width:761px){
  .gr-matrix-wrap .gr-sec-head.is-center{ padding-left:96px; }
}

.gr-matrix{
  display:grid;
  grid-template-columns:96px repeat(3, 1fr);
  gap:12px;
  align-items:stretch;
}
.gr-mx-col-head{
  justify-self:center; align-self:center;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px;
  background:var(--chip-bg);
  border:1px solid var(--card-border);
  border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text);
}
.gr-mx-col-head i{
  width:7px; height:7px; border-radius:50%;
  background:var(--tl); box-shadow:0 0 10px var(--tl);
}
.gr-mx-col-head[data-time="past"]   { --tl:var(--violet); }
.gr-mx-col-head[data-time="present"]{ --tl:var(--cyan); }
.gr-mx-col-head[data-time="future"] { --tl:var(--lime); }

.gr-mx-row-head{
  display:flex; align-items:center; justify-content:flex-end;
  padding-right:10px;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:var(--muted); text-align:right;
}

.gr-mx-cell{
  position:relative;
  display:flex; flex-direction:column;
  padding:16px 16px 14px;
  min-height:132px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:18px;
  text-decoration:none; color:var(--text);
  overflow:hidden; cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),
             border-color .3s, box-shadow .3s, opacity .25s, filter .25s;
}
.gr-mx-cell::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% -20%, var(--cell-glow, rgba(139,109,255,.18)), transparent 55%);
  opacity:.55; transition:opacity .3s;
}
.gr-mx-cell:hover{
  transform:translateY(-5px) scale(1.015);
  border-color:var(--card-border-hi);
  border-color:color-mix(in srgb, var(--tl, var(--violet)) 45%, transparent);
  box-shadow:0 10px 22px -12px rgba(0,0,0,.55);
  box-shadow:0 22px 44px -20px color-mix(in srgb, var(--tl, var(--violet)) 38%, transparent),
             0 8px 18px -10px rgba(0,0,0,.5);
}
.gr-mx-cell:hover::before{ opacity:1; }
.gr-mx-cell.is-empty{ opacity:.45; pointer-events:none; }

/* Time-column tinting — each column carries its own hue */
.gr-mx-cell[data-time="past"]   { --tl:var(--violet); --cell-glow:rgba(139,109,255,.20); }
.gr-mx-cell[data-time="present"]{ --tl:var(--cyan);   --cell-glow:rgba(78,224,242,.18); }
.gr-mx-cell[data-time="future"] { --tl:var(--lime);   --cell-glow:rgba(198,242,78,.15); }

/* Staggered pop-in when the matrix section reveals */
.gr-sec.gr-reveal .gr-mx-cell{
  animation:grCellIn .55s cubic-bezier(.2,.7,.2,1) backwards;
  animation-delay:calc(var(--i, 0) * 40ms + 140ms);
}
.gr-sec.gr-reveal .gr-mx-col-head,
.gr-sec.gr-reveal .gr-mx-row-head{
  animation:grRise .5s cubic-bezier(.2,.7,.2,1) backwards;
  animation-delay:80ms;
}

/* ----- Mini timeline inside each cell: where the tense lives vs NOW ----- */
.mx-tl{ position:relative; height:20px; margin-bottom:10px; flex:0 0 auto; }
.mx-tl::before{
  content:""; position:absolute; left:1%; right:1%; top:50%; height:1.5px; margin-top:-1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16) 12%, rgba(255,255,255,.16) 88%, transparent);
}
:root[data-theme="light"] .mx-tl::before{
  background:linear-gradient(90deg, transparent, rgba(15,23,42,.18) 12%, rgba(15,23,42,.18) 88%, transparent);
}
.tl-now{
  position:absolute; left:50%; top:50%;
  width:2px; height:11px; transform:translate(-50%,-50%);
  background:rgba(255,255,255,.35); border-radius:2px;
}
:root[data-theme="light"] .tl-now{ background:rgba(15,23,42,.30); }
.tl-now::after{
  content:""; position:absolute; left:50%; top:50%;
  width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%;
  background:rgba(255,255,255,.75);
}
.tl-now::before{
  content:""; position:absolute; left:50%; top:50%;
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%;
  background:rgba(255,255,255,.55);
  opacity:.5;
  animation:tlPulse 2.6s ease-out infinite;
  animation-delay:calc(var(--i, 0) * -180ms);
}
:root[data-theme="light"] .tl-now::after{ background:rgba(15,23,42,.60); }
:root[data-theme="light"] .tl-now::before{ background:rgba(15,23,42,.45); }
@keyframes tlPulse{
  0%  { transform:scale(1);   opacity:.55; }
  70% { transform:scale(3.1); opacity:0; }
  100%{ transform:scale(3.1); opacity:0; }
}
.tl-dot{
  position:absolute; top:50%;
  width:9px; height:9px; margin-top:-4.5px; transform:translateX(-50%);
  border-radius:50%;
  background:var(--tl); box-shadow:0 0 12px -1px var(--tl);
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.tl-dot.is-small{ width:5px; height:5px; margin-top:-2.5px; opacity:.55; }
.tl-dot.is-hollow{ background:var(--bg); border:2px solid var(--tl); box-shadow:none; opacity:.95; }
.tl-seg{
  position:absolute; top:50%;
  height:7px; margin-top:-3.5px; border-radius:99px;
  background:var(--tl);
  background:linear-gradient(90deg, color-mix(in srgb, var(--tl) 35%, transparent), var(--tl));
  box-shadow:0 0 12px -2px var(--tl);
  transition:filter .3s;
}
.tl-arr{
  position:absolute; top:50%;
  height:2px; margin-top:-1px;
  background:var(--tl); opacity:.9;
}
.tl-arr::after{
  content:""; position:absolute; right:-5px; top:50%; margin-top:-4px;
  border-left:6px solid var(--tl);
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
}
.gr-mx-cell:hover .tl-dot{ transform:translateX(-50%) scale(1.3); }
.gr-mx-cell:hover .tl-seg{ filter:brightness(1.25) saturate(1.15); }

.gr-mx-cell .mx-title{
  position:relative; font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
  font-size:16px; font-weight:700; line-height:1.2; letter-spacing:-.01em;
}
.gr-mx-cell .mx-sub{
  position:relative; font-size:12px; color:var(--muted);
  margin-top:5px; line-height:1.45;
}
.gr-mx-cell .mx-foot{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  margin-top:auto; padding-top:12px; font-size:11px; color:var(--muted);
}
.gr-mx-cell .mx-status{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}
.gr-mx-cell .mx-status .dot{ width:6px; height:6px; border-radius:50%; background:var(--muted); }
.gr-mx-cell .mx-go{
  display:inline-flex; align-items:center; gap:2px;
  font-weight:700; transition:color .25s;
}
.gr-mx-cell .mx-go i{ font-style:normal; transition:transform .25s; }
.gr-mx-cell:hover .mx-go{ color:var(--text); }
.gr-mx-cell:hover .mx-go i{ transform:translateX(3px); }
.gr-mx-cell[data-status="learning"]    .mx-status{ color:var(--cyan); }
.gr-mx-cell[data-status="learning"]    .mx-status .dot{ background:var(--cyan); box-shadow:0 0 6px var(--cyan); }
.gr-mx-cell[data-status="practiced"]   .mx-status{ color:var(--violet); }
.gr-mx-cell[data-status="practiced"]   .mx-status .dot{ background:var(--violet); box-shadow:0 0 6px var(--violet); }
.gr-mx-cell[data-status="mastered"]    .mx-status{ color:var(--gold); }
.gr-mx-cell[data-status="mastered"]    .mx-status .dot{ background:var(--gold); box-shadow:0 0 8px var(--gold); }
.gr-mx-cell[data-status="mastered"]    { border-color:var(--gold-soft); }

/* Row/column cross-highlight on hover — peers stay lit, the rest recede */
.gr-matrix.gr-mx-focus .gr-mx-cell{ opacity:.4; filter:saturate(.6); }
.gr-matrix.gr-mx-focus .gr-mx-cell.gr-mx-peer{ opacity:.85; filter:none; }
.gr-matrix.gr-mx-focus .gr-mx-cell.gr-mx-self{ opacity:1; filter:none; }

.gr-mx-specials{
  display:grid; grid-template-columns:96px repeat(2, 1fr);
  gap:12px; margin-top:12px;
}
.gr-mx-specials .gr-mx-cell{ min-height:112px; }

/* ============================================================================
   PLACEMENT CTA band
   ============================================================================ */
.gr-pl-cta .inner{
  position:relative; overflow:hidden;
  padding:38px 40px;
  background:linear-gradient(135deg, rgba(139,109,255,.18), rgba(78,224,242,.10) 50%, rgba(198,242,78,.12));
  border:1px solid rgba(139,109,255,.32);
  border-radius:28px;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px; align-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.gr-pl-cta .inner::before{
  content:""; position:absolute; inset:-50% -10% auto auto;
  width:60%; aspect-ratio:1;
  background:radial-gradient(circle, var(--violet), transparent 60%);
  opacity:.5; filter:blur(40px);
  animation:grPulse 6s ease-in-out infinite;
}
.gr-pl-cta .inner::after{
  content:""; position:absolute; inset:auto auto -40% -10%;
  width:50%; aspect-ratio:1;
  background:radial-gradient(circle, var(--cyan), transparent 60%);
  opacity:.4; filter:blur(40px);
  animation:grPulse 6s ease-in-out infinite reverse;
}
@keyframes grPulse{
  0%,100%{ transform:scale(1); opacity:.5; }
  50%   { transform:scale(1.15); opacity:.7; }
}
.gr-pl-cta .pl-copy{ position:relative; z-index:1; }
.gr-pl-cta h2{
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
  font-size:clamp(24px, 2.8vw, 34px); font-weight:800;
  letter-spacing:-.02em; margin:10px 0 8px;
}
.gr-pl-cta p{ color:var(--muted); font-size:14.5px; line-height:1.55; margin:0 0 18px; max-width:520px; }
.gr-pl-cta .pl-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.gr-pl-cta .pl-right{
  position:relative; z-index:1; justify-self:end;
  display:flex; flex-direction:column; gap:4px;
  padding:22px 26px;
  background:rgba(10,11,16,.45);
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  min-width:230px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
:root[data-theme="light"] .gr-pl-cta .pl-right{ background:rgba(255,255,255,.60); border-color:rgba(15,23,42,.10); }
.gr-pl-cta .pl-right .lbl{ font-size:11px; letter-spacing:.20em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.gr-pl-cta .pl-right .lv{
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
  font-size:44px; font-weight:800; line-height:1.1;
  background:linear-gradient(120deg, var(--gold), var(--lime));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gr-pl-cta .pl-right .nm{ font-size:13px; color:var(--muted); }
.gr-pl-cta .pl-right.is-empty .lv{
  background:linear-gradient(120deg, var(--cyan), var(--violet));
  -webkit-background-clip:text; background-clip:text;
}
.gr-pl-cta .pl-right .pl-see{
  margin-top:8px; font-size:12.5px; font-weight:700;
  color:var(--lime); text-decoration:none;
}
.gr-pl-cta .pl-right .pl-see:hover{ text-decoration:underline; }
:root[data-theme="light"] .gr-pl-cta .pl-right .pl-see{ color:#3f7a00; }

/* ============================================================================
   CATEGORY sections (02–06)
   ============================================================================ */
.gr-cat-head{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-bottom:18px; flex-wrap:wrap;
}
.gr-cat-title{ display:flex; align-items:flex-start; gap:16px; }
.gr-cat-title .cat-num{
  flex:0 0 44px; height:44px;
  display:grid; place-items:center;
  border-radius:14px;
  background:linear-gradient(145deg, var(--hue-soft, rgba(139,109,255,.16)), transparent 70%);
  border:1px solid var(--card-border-hi);
  border-color:color-mix(in srgb, var(--hue, var(--violet)) 35%, transparent);
  color:var(--hue, var(--violet));
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
  font-weight:800; font-size:15px;
}
.gr-cat-title h3{
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
  font-size:clamp(20px, 2.2vw, 27px); font-weight:800;
  letter-spacing:-.01em; margin:0; line-height:1.15;
}
.gr-cat-title p{ color:var(--muted); font-size:13.5px; margin:3px 0 0; }
.gr-cat-progress{
  display:flex; align-items:center; gap:11px;
  padding:7px 16px 7px 8px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:999px;
}
.gr-cat-progress .gr-ring{ --size:40px; --thick:4.5px; }
.gr-cat-progress .gr-ring .gr-ring-text{ font-size:9.5px; }
.gr-cat-progress .gcp-copy{ display:flex; flex-direction:column; line-height:1.2; }
.gr-cat-progress .gcp-copy b{ font-size:13.5px; font-weight:800; }
.gr-cat-progress .gcp-copy span{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; }

.gr-topic-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(265px, 1fr));
}
.gr-sec.gr-reveal .gr-topic-card{
  animation:grCellIn .5s cubic-bezier(.2,.7,.2,1) backwards;
  animation-delay:calc(var(--i, 0) * 45ms + 100ms);
}
.gr-topic-card{
  padding:16px 18px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:18px;
  position:relative; overflow:hidden;
  text-decoration:none; color:var(--text);
  display:flex; flex-direction:column; gap:8px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),
             border-color .3s, box-shadow .3s, background .3s;
}
.gr-topic-card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2.5px;
  background:linear-gradient(90deg, var(--hue, var(--violet)), transparent 90%);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.gr-topic-card:hover{
  transform:translateY(-4px);
  border-color:var(--card-border-hi);
  border-color:color-mix(in srgb, var(--hue, var(--violet)) 40%, transparent);
  box-shadow:0 12px 26px -14px rgba(0,0,0,.55);
  box-shadow:0 18px 38px -20px color-mix(in srgb, var(--hue, var(--violet)) 35%, transparent),
             0 8px 18px -12px rgba(0,0,0,.5);
}
.gr-topic-card:hover::after{ transform:scaleX(1); }
.gr-topic-card .tc-top{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.gr-topic-card .tc-num{
  font-family:'JetBrains Mono', ui-monospace, 'Native Emoji', monospace;
  font-size:11px; font-weight:700; letter-spacing:.12em;
  color:var(--hue, var(--violet)); opacity:.85;
}
.gr-topic-card .tc-status{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  color:var(--muted);
}
.gr-topic-card .tc-status .dot{ width:6px; height:6px; border-radius:50%; background:var(--muted); }
.gr-topic-card[data-status="learning"]  .tc-status{ color:var(--cyan); }
.gr-topic-card[data-status="learning"]  .tc-status .dot{ background:var(--cyan); box-shadow:0 0 5px var(--cyan); }
.gr-topic-card[data-status="practiced"] .tc-status{ color:var(--violet); }
.gr-topic-card[data-status="practiced"] .tc-status .dot{ background:var(--violet); box-shadow:0 0 5px var(--violet); }
.gr-topic-card[data-status="mastered"]  .tc-status{ color:var(--gold); }
.gr-topic-card[data-status="mastered"]  .tc-status .dot{ background:var(--gold); box-shadow:0 0 8px var(--gold); }
.gr-topic-card[data-status="mastered"]  { border-color:var(--gold-soft); }
.gr-topic-card .tc-title{
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
  font-size:16.5px; font-weight:700; letter-spacing:-.01em; line-height:1.25;
}
.gr-topic-card .tc-blurb{ color:var(--muted); font-size:13px; line-height:1.5; }
.gr-topic-card .tc-foot{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:auto; padding-top:10px;
}
.gr-topic-card .tc-go{
  display:inline-flex; align-items:center; gap:3px;
  font-size:12.5px; font-weight:700; color:var(--muted);
  transition:color .25s;
}
.gr-topic-card .tc-go i{ font-style:normal; transition:transform .25s; }
.gr-topic-card:hover .tc-go{ color:var(--text); }
.gr-topic-card:hover .tc-go i{ transform:translateX(3px); }
.gr-topic-card .tc-best{ font-size:11.5px; font-weight:700; color:var(--gold); }

/* ============================================================================
   TOPIC PAGE — Learn / Practice / Mistake Fix tabs
   ============================================================================ */

.gr-topic-wrap{ max-width:920px; margin:0 auto; padding:0 26px; }

.gr-topic-head{
  display:grid; grid-template-columns:1fr auto; gap:18px;
  align-items:end; margin-bottom:24px;
  padding-bottom:8px;
}
.gr-back{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px;
  background:var(--chip-bg); border:1px solid var(--card-border);
  font-size:12.5px; color:var(--muted);
  text-decoration:none;
  margin-bottom:8px;
  transition:background .15s, color .15s, transform .15s;
}
.gr-back:hover{ background:var(--chip-bg-hover); color:var(--text); transform:translateX(-2px); }
.gr-topic-head .gr-cat-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px;
  background:linear-gradient(135deg, rgba(139,109,255,.18), rgba(78,224,242,.14));
  border:1px solid rgba(139,109,255,.30);
  font-size:11px; font-weight:700; letter-spacing:.10em; text-transform:uppercase;
  color:var(--text);
}

/* ----- Topic mastery meter — ring + per-engine bars in the topic header ----- */
.gr-tp-meter{
  display:flex; align-items:center; gap:16px;
  padding:14px 18px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:18px;
  align-self:start;
}
.gr-tp-meter .tpm-rows{ display:flex; flex-direction:column; gap:5px; min-width:190px; }
.gr-tp-meter .tpm-cap{
  font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:2px;
}
.gr-tp-meter .tpm-row{
  display:grid; grid-template-columns:44px minmax(0,1fr) 34px;
  gap:8px; align-items:center;
}
.gr-tp-meter .tpm-row .lbl{ font-size:11px; font-weight:700; color:var(--muted); }
.gr-tp-meter .tpm-row .bar{
  height:5px; border-radius:99px; overflow:hidden;
  background:var(--card-bg-soft); border:1px solid var(--card-border);
}
.gr-tp-meter .tpm-row .bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--violet), var(--cyan), var(--lime));
  transition:width 1s cubic-bezier(.2,.7,.2,1);
}
.gr-tp-meter .tpm-row b{ font-size:11px; font-weight:800; text-align:right; }
@media (max-width:760px){
  .gr-topic-head{ grid-template-columns:1fr; }
  .gr-tp-meter{ justify-self:stretch; }
  .gr-tp-meter .tpm-rows{ flex:1; }
}

/* ----- Word order engine — chip bank + answer line ----- */
.gr-wo-answer, .gr-wo-bank{
  display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start;
  padding:12px;
  border-radius:14px;
  min-height:54px;
  transition:border-color .25s, background .25s;
}
.gr-wo-answer{
  background:var(--input-bg);
  border:1.5px dashed var(--card-border-hi);
  margin-bottom:10px;
  position:relative;
}
.gr-wo-answer.is-empty::before{
  content:"Drop words here…";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--muted);
  pointer-events:none;
}
.gr-wo-answer.is-correct{ border-color:rgba(99,210,140,.6); background:rgba(99,210,140,.06); border-style:solid; }
.gr-wo-answer.is-wrong{ border-color:rgba(255,90,110,.6); background:rgba(255,90,110,.05); border-style:solid; }
.gr-wo-bank{
  background:var(--card-bg-soft);
  border:1px solid var(--card-border);
}
.gr-wo-chip{
  padding:8px 13px;
  background:var(--card-bg);
  border:1px solid var(--card-border-hi);
  border-radius:10px;
  font-size:14.5px; font-weight:600; color:var(--text);
  cursor:grab;
  transition:transform .15s, border-color .2s, box-shadow .2s, background .2s;
  animation:grOptIn .3s cubic-bezier(.2,.7,.2,1) backwards;
  user-select:none;
  touch-action:manipulation;
}
.gr-wo-chip:hover{
  transform:translateY(-2px);
  border-color:rgba(139,109,255,.5);
  box-shadow:0 8px 18px -10px rgba(139,109,255,.5);
  background:var(--chip-bg-hover);
}
.gr-wo-chip:active{ cursor:grabbing; transform:scale(.97); }
.gr-wo-chip.is-dragging{ opacity:.45; transform:scale(1.04); cursor:grabbing; }
.gr-wo-answer .gr-wo-chip{
  border-color:rgba(78,224,242,.45);
  background:linear-gradient(135deg, rgba(78,224,242,.10), rgba(139,109,255,.08));
}

/* Sticky tab bar — stays at the top while you scroll through long lessons.
   Right side holds the explanation-language switcher (EN/РУ/UZ). */
.gr-tabs-wrap{
  /* 64px sat 7px UNDER the 71px site header. These two rails also both stuck to
     the same offset, and `.gr-lesson-head` (z-index 20) painted straight over
     this one (z-index 5) — hiding 4 of the 5 drill tabs behind it the moment
     you scrolled a lesson. They are now stacked: rail under the header, lesson
     head under the rail. */
  position:sticky; top:var(--gr-stick-top, 71px);
  z-index:5;
  display:flex; align-items:center;
  gap:10px 14px; flex-wrap:wrap;
  padding:10px 0 12px;
  margin:0 -8px 22px;
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg) 62%, transparent 100%);
}
/* Tabs keep their natural width (no clipping); the language picker is pushed to
   the far right and drops to its own line only when the row is genuinely tight. */
.gr-tabs-wrap .gr-tabs{ flex:0 1 auto; min-width:0; width:auto; }
.gr-learn-lang{
  display:flex; align-items:center; gap:9px;
  margin-left:auto; flex:0 0 auto;
}
@media (max-width:760px){
  .gr-learn-lang .ll-lbl{ display:none; }
}
.gr-learn-lang .ll-lbl{
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.gr-learn-lang .ll-pills{
  display:flex; gap:3px; padding:4px;
  background:rgba(20,16,28,.72);
  border:1px solid var(--card-border-hi);
  border-radius:999px;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 8px 30px -12px rgba(0,0,0,.5);
}
:root[data-theme="light"] .gr-learn-lang .ll-pills{ background:rgba(255,255,255,.85); }
.gr-learn-lang .ll-pills button{
  padding:5px 11px; border:none; border-radius:999px;
  background:transparent; color:var(--muted);
  font-size:11px; font-weight:800; letter-spacing:.04em; cursor:pointer;
  transition:background .2s, color .2s;
}
.gr-learn-lang .ll-pills button:hover{ color:var(--text); }
.gr-learn-lang .ll-pills button.is-active{
  background:linear-gradient(135deg, var(--lime), #d8ff7a);
  color:var(--on-lime);
  box-shadow:0 4px 14px -4px rgba(198,242,78,.5);
}

/* ---------------------------------------------------------------------------
   TRANSLATED LESSONS (RU / UZ)
   The explanations are baked (19p/19q) and swapped synchronously, so there is
   no loading state to style any more. What DOES need styling is the bilingual
   result: Cyrillic and Uzbek Latin set longer than the English these layouts
   were tuned for, and every lesson deliberately keeps its English examples and
   grammar terms inline. Below makes that mixture read as designed rather than
   as a half-finished translation.
   --------------------------------------------------------------------------- */

/* Translated prose runs ~15% longer than English — give it room to breathe and
   never let a long term (Present Perfect Continuous) blow out a narrow card. */
.gr-lesson:lang(ru), .gr-lesson:lang(uz),
.gr-tab-panel:lang(ru) .gr-lesson, .gr-tab-panel:lang(uz) .gr-lesson{
  line-height:1.68;
}
.gr-lesson:lang(ru) .use-title, .gr-lesson:lang(uz) .use-title,
.gr-lesson:lang(ru) .grc-label, .gr-lesson:lang(uz) .grc-label,
.gr-lesson:lang(ru) .grn-body b, .gr-lesson:lang(uz) .grn-body b{
  overflow-wrap:anywhere; hyphens:none;
}
/* The intro headline is set tight for English; Cyrillic needs a notch more. */
.gr-lesson:lang(ru) .gi-big, .gr-lesson:lang(uz) .gi-big{ line-height:1.28; }

/* Anything explicitly marked lang="en" inside a translated lesson — model
   sentences, band examples, the original-text reveals — gets a quiet tint so
   the reader can see at a glance which parts are deliberately English. */
.gr-lesson:lang(ru) [lang="en"], .gr-lesson:lang(uz) [lang="en"]{
  font-feature-settings:"kern" 1;
}

/* English original shown in small type under a translated block */
.gr-src{
  margin-top:10px; padding:8px 0 0 11px;
  border-top:1px dashed var(--hairline);
  border-left:2px solid var(--card-border-hi);
  font-size:12.5px; line-height:1.55; color:var(--muted);
}
.gr-tabs{
  display:flex; gap:3px;
  padding:5px;
  background:rgba(20,16,28,.72);
  border:1px solid var(--card-border-hi);
  border-radius:14px;
  width:fit-content; max-width:100%;
  margin:0 8px 0 0;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  scroll-snap-type:x proximity;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 8px 30px -12px rgba(0,0,0,.5);
}
.gr-tabs::-webkit-scrollbar{ display:none; }
:root[data-theme="light"] .gr-tabs{
  background:rgba(255,255,255,.9);
  box-shadow:0 10px 30px -14px rgba(60,40,120,.28);
}
.gr-tab{
  position:relative;
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 13px;
  background:transparent; color:var(--muted);
  border:none; border-radius:10px;
  font-size:13px; font-weight:600; cursor:pointer;
  white-space:nowrap; scroll-snap-align:start;
  transition:color .2s, transform .15s;
}
.gr-tab:hover{ color:var(--text); transform:translateY(-1px); }
.gr-tab.is-active{ color:var(--on-lime); font-weight:700; }
.gr-tab.is-active::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, var(--lime), #d8ff7a);
  border-radius:10px;
  z-index:-1;
  box-shadow:0 6px 16px -5px rgba(198,242,78,.55);
  animation:grTabIn .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes grTabIn{
  from{ opacity:0; transform:scale(.85); }
  to  { opacity:1; transform:scale(1);   }
}
/* Compact question-count badge inside each practice tab */
.gr-tab-n{
  display:inline-grid; place-items:center; min-width:20px;
  padding:1px 6px; border-radius:7px;
  font-size:11px; font-weight:800; line-height:1.5; font-variant-numeric:tabular-nums;
  color:var(--muted);
  background:var(--chip-bg); border:1px solid var(--card-border);
  transition:color .2s, background .2s, border-color .2s;
}
.gr-tab:hover .gr-tab-n{ color:var(--text); }
.gr-tab.is-active .gr-tab-n{
  color:var(--on-lime);
  background:rgba(10,11,16,.14); border-color:transparent;
}

.gr-tab-panel{ display:none; }
.gr-tab-panel.is-active{ display:block; animation:grFadeUp .35s cubic-bezier(.2,.7,.2,1); }

@keyframes grFadeUp{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:translateY(0); }
}

/* ----- LEARN tab content blocks ----- */
.gr-learn-block{
  margin-top:36px;
}
.gr-learn-block:first-child{ margin-top:6px; }
.gr-learn-block h3{
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
  font-size:20px; font-weight:700; letter-spacing:-.01em;
  margin:0 0 14px;
  display:flex; align-items:center; gap:12px;
}
.gr-learn-block h3 .num{
  position:relative;
  display:inline-grid; place-items:center;
  width:30px; height:30px; border-radius:10px;
  background:linear-gradient(135deg, var(--violet), var(--cyan));
  color:white; font-size:13px; font-weight:800;
  box-shadow:0 6px 18px -6px rgba(139,109,255,.6);
  overflow:hidden;
}
.gr-learn-block h3 .num::after{
  content:""; position:absolute; inset:-50%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.35) 60deg, transparent 120deg, transparent 360deg);
  animation:grNumSpin 5s linear infinite;
}
@keyframes grNumSpin{
  to{ transform:rotate(360deg); }
}

/* ----- Topic intro — the concept, properly explained ----- */
.gr-intro{
  position:relative; overflow:hidden;
  padding:24px 26px 22px;
  background:
    radial-gradient(120% 90% at 85% -20%, rgba(78,224,242,.12), transparent 55%),
    radial-gradient(100% 80% at 0% 110%, rgba(139,109,255,.10), transparent 55%),
    var(--card-bg);
  border:1px solid var(--card-border-hi);
  border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.gr-intro::before{
  content:""; position:absolute; top:0; left:26px; right:26px; height:3px;
  border-radius:0 0 6px 6px;
  background:linear-gradient(90deg, var(--violet), var(--cyan), var(--lime));
  opacity:.85;
}
.gi-tl{ margin:8px 0 16px; }
.gi-tl .mx-tl{ height:30px; margin-bottom:0; max-width:440px; }
.gi-tl .tl-now{ height:15px; }
.gi-eyebrow{ font-size:11px; }
.gi-big{
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
  font-size:clamp(19px, 2.2vw, 24px);
  font-weight:700; line-height:1.35; letter-spacing:-.01em;
  margin:10px 0 2px;
  text-wrap:balance;
  text-align:left;
}
.gi-body p{
  margin:11px 0 0;
  font-size:14.5px; line-height:1.7;
  color:var(--text); opacity:.88;
}
.gi-key{
  display:flex; gap:12px; align-items:flex-start;
  margin-top:16px;
  padding:12px 16px;
  background:linear-gradient(135deg, rgba(198,242,78,.10), rgba(78,224,242,.07));
  border:1px solid rgba(198,242,78,.28);
  border-radius:14px;
}
.gi-key-lbl{
  flex:0 0 auto; margin-top:2px;
  font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lime);
  padding:4px 10px; border-radius:999px;
  background:rgba(198,242,78,.12);
  border:1px solid rgba(198,242,78,.25);
  white-space:nowrap;
}
:root[data-theme="light"] .gi-key-lbl{
  color:#3f7a00;
  background:rgba(101,163,13,.10); border-color:rgba(101,163,13,.28);
}
.gi-key-txt{ font-size:14px; line-height:1.6; font-weight:600; }
.gi-src-btn{ margin-top:14px; }
@media (max-width:560px){
  .gr-intro{ padding:20px 16px 18px; }
  .gr-intro::before{ left:16px; right:16px; }
  .gi-key{ flex-direction:column; gap:8px; }
}

.gr-what{
  padding:22px 24px;
  background:linear-gradient(135deg, rgba(78,224,242,.10), rgba(139,109,255,.10));
  border:1px solid rgba(78,224,242,.25);
  border-radius:18px;
  font-size:16.5px; line-height:1.55;
  position:relative;
  overflow:hidden;
}
.gr-what::before{
  content:""; position:absolute; inset:-50% -10% auto auto;
  width:40%; aspect-ratio:1;
  background:radial-gradient(circle, var(--cyan), transparent 60%);
  opacity:.18; filter:blur(30px); pointer-events:none;
  animation:grPulse 7s ease-in-out infinite;
}
.gr-what strong{
  background:linear-gradient(120deg, var(--cyan), var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:700;
}

/* "When we use it" — numbered timeline list: gradient number nodes joined by
   a fading connector line, one soft card per case, quote-style examples. */
.gr-use-list{ display:grid; gap:18px; list-style:none; padding:0; margin:0; }
.gr-use{
  position:relative;
  display:grid; grid-template-columns:34px minmax(0,1fr); gap:0 16px;
}
.gr-use::before{
  content:""; position:absolute; left:16px; top:40px; bottom:-19px; width:2px;
  background:linear-gradient(180deg, rgba(139,109,255,.45), rgba(78,224,242,.10));
}
.gr-use:last-child::before{ display:none; }
.use-num{
  width:34px; height:34px; border-radius:12px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--violet), var(--cyan));
  color:#fff; font-weight:800; font-size:14px;
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
  box-shadow:0 8px 20px -8px rgba(139,109,255,.6);
  position:relative; z-index:1;
}
.use-num.is-mk{
  background:linear-gradient(135deg, #ff7a89, var(--gold));
  box-shadow:0 8px 20px -8px rgba(255,122,137,.5);
}
.gr-use .use-body{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:14px 16px 13px;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),
             border-color .25s, box-shadow .25s;
}
.gr-use:hover .use-body{
  transform:translateY(-2px);
  border-color:var(--card-border-hi);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.5);
}
.gr-use .use-title{ font-weight:700; font-size:15.5px; line-height:1.3; }
.gr-use .use-explain{ color:var(--muted); font-size:13.5px; line-height:1.55; margin:4px 0 10px; }
.gr-use .use-examples{ display:grid; gap:6px; }
.gr-use .use-examples .ex{
  padding:9px 12px;
  background:var(--card-bg-soft);
  border:1px solid var(--card-border);
  border-left:3px solid rgba(78,224,242,.55);
  border-radius:4px 12px 12px 4px;
  font-size:14px; line-height:1.55;
}
.gr-use .use-examples b{
  background:linear-gradient(120deg, var(--lime), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:700;
}
:root[data-theme="light"] .gr-use .use-examples b{
  background:linear-gradient(120deg, #65a30d, #0891b2);
  -webkit-background-clip:text; background-clip:text;
}
:root[data-theme="light"] .gr-use .use-examples .ex{ border-left-color:rgba(8,145,178,.55); }

/* "Common mistakes" — same numbered-timeline rhythm; wrong/right rows are
   tinted so the eye reads ✕ red → ✓ green without reading a word. */
.gr-mistake-list{ display:grid; gap:18px; list-style:none; padding:0; margin:0; }
.gr-mistake-pair{
  position:relative;
  display:grid; grid-template-columns:34px minmax(0,1fr); gap:0 16px;
}
.gr-mistake-pair::before{
  content:""; position:absolute; left:16px; top:40px; bottom:-19px; width:2px;
  background:linear-gradient(180deg, rgba(255,122,137,.40), rgba(244,201,93,.10));
}
.gr-mistake-pair:last-child::before{ display:none; }
.gr-mistake-pair .mk-body{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:12px 14px;
  display:grid; gap:7px;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),
             border-color .25s, box-shadow .25s;
}
.gr-mistake-pair:hover .mk-body{
  transform:translateY(-2px);
  border-color:var(--card-border-hi);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.5);
}
.gr-mistake-pair .row{
  display:flex; align-items:flex-start; gap:9px;
  font-size:14px; line-height:1.5;
  padding:8px 11px; border-radius:10px;
}
.gr-mistake-pair .row.bad{ background:rgba(255,90,110,.07); border:1px solid rgba(255,90,110,.20); }
.gr-mistake-pair .row.good{ background:rgba(99,210,140,.07); border:1px solid rgba(99,210,140,.20); }
.gr-mistake-pair .ico{
  flex:0 0 20px; height:20px; margin-top:1px;
  display:inline-grid; place-items:center;
  border-radius:50%;
  font-size:12px; font-weight:800;
}
.gr-mistake-pair .row.bad .ico{ background:rgba(255,90,110,.16); color:#ff7a89; }
.gr-mistake-pair .row.good .ico{ background:rgba(99,210,140,.16); color:#54d088; }
.gr-mistake-pair .why{
  display:flex; gap:8px; align-items:flex-start;
  color:var(--muted); font-size:13px; line-height:1.55;
  padding:1px 2px 0;
}
.gr-mistake-pair .why::before{ content:"→"; color:var(--gold); font-weight:800; flex:0 0 auto; }

/* "Speak it" — numbered speaking prompts with collapsible sentence starters */
.gr-speak-hint{ color:var(--muted); font-size:13.5px; line-height:1.55; margin:-6px 0 16px; }
.gr-speak-list{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.gr-speak-q{
  position:relative;
  display:grid; grid-template-columns:34px minmax(0,1fr); gap:0 16px;
}
.gr-speak-q::before{
  content:""; position:absolute; left:16px; top:40px; bottom:-15px; width:2px;
  background:linear-gradient(180deg, rgba(78,224,242,.40), rgba(198,242,78,.10));
}
.gr-speak-q:last-child::before{ display:none; }
.sq-num{
  width:34px; height:34px; border-radius:12px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--cyan), var(--lime));
  color:#0a0b10; font-weight:800; font-size:14px;
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
  box-shadow:0 8px 20px -8px rgba(78,224,242,.55);
  position:relative; z-index:1;
}
.sq-body{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:13px 15px;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),
             border-color .25s, box-shadow .25s;
}
.gr-speak-q:hover .sq-body{
  transform:translateY(-2px);
  border-color:var(--card-border-hi);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.5);
}
.sq-q{ font-size:15px; font-weight:600; line-height:1.5; }
.sq-starter-btn{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:10px;
  padding:6px 12px; border-radius:999px;
  background:var(--chip-bg);
  border:1px dashed var(--card-border-hi);
  color:var(--muted); font-size:12px; font-weight:700; cursor:pointer;
  transition:background .2s, color .2s;
}
.sq-starter-btn:hover{ background:var(--chip-bg-hover); color:var(--text); }
.sq-starter-btn i{ font-style:normal; transition:transform .25s; }
.sq-starter-btn.is-open i{ transform:rotate(180deg); }
.sq-starter{
  margin-top:9px;
  padding:9px 12px;
  background:var(--card-bg-soft);
  border:1px solid var(--card-border);
  border-left:3px solid rgba(198,242,78,.55);
  border-radius:4px 12px 12px 4px;
  font-size:14px; line-height:1.6;
  animation:grFadeUp .25s cubic-bezier(.2,.7,.2,1);
}
.sq-starter[hidden]{ display:none; }
.sq-starter b{
  background:linear-gradient(120deg, var(--lime), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:700;
}
:root[data-theme="light"] .sq-starter{ border-left-color:rgba(101,163,13,.55); }
:root[data-theme="light"] .sq-starter b{
  background:linear-gradient(120deg, #65a30d, #0891b2);
  -webkit-background-clip:text; background-clip:text;
}

.gr-nutshell{
  margin-top:24px;
  padding:18px 22px;
  background:linear-gradient(135deg, rgba(198,242,78,.10), rgba(244,201,93,.10));
  border:1px solid rgba(198,242,78,.30);
  border-radius:18px;
  font-size:15px; line-height:1.55;
}
.gr-nutshell .lbl{
  display:flex; align-items:center; gap:9px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--lime); font-weight:700; margin-bottom:8px;
}
:root[data-theme="light"] .gr-nutshell .lbl{ color:#3f7a00; }
.gr-nutshell .lbl::before{
  content:"✦";
  width:22px; height:22px; border-radius:8px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--gold), var(--lime));
  color:#1a1408; font-size:12px;
  box-shadow:0 6px 16px -6px rgba(244,201,93,.55);
}

.gr-chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }

/* ----- PRACTICE & MISTAKE FIX engines ----- */
.gr-engine-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:14px; gap:14px; flex-wrap:wrap;
}
.gr-engine-head .gr-eng-title{ font-weight:700; font-size:15px; }
.gr-engine-head .gr-eng-meta{ color:var(--muted); font-size:13px; }

.gr-progress{
  height:6px; border-radius:999px; overflow:hidden;
  background:var(--card-bg-soft); border:1px solid var(--card-border);
  margin-bottom:18px;
}
.gr-progress > span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--violet), var(--cyan), var(--lime));
  transition:width .35s cubic-bezier(.2,.7,.2,1);
}

.gr-q-card{
  padding:20px 22px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:18px;
  position:relative;
}
.gr-q-stem{
  font-size:17px; line-height:1.5; font-weight:600;
  margin-bottom:16px;
}
.gr-q-stem .gap{
  display:inline-block; padding:2px 8px; min-width:60px;
  background:rgba(139,109,255,.18);
  border-bottom:2px solid var(--violet);
  border-radius:6px 6px 0 0;
  margin:0 2px;
  text-align:center;
}

/* MC options */
.gr-mc-opts{ display:grid; gap:10px; }
.gr-mc-opt{
  display:flex; align-items:center; gap:12px;
  padding:13px 16px;
  background:var(--card-bg-soft); border:1px solid var(--card-border);
  border-radius:12px;
  font-size:15px; text-align:left; cursor:pointer;
  color:var(--text);
  transition:transform .15s, border-color .2s, background .2s;
  animation:grOptIn .35s cubic-bezier(.2,.7,.2,1) backwards;
}
.gr-mc-opts .gr-mc-opt:nth-child(1){ animation-delay:.04s; }
.gr-mc-opts .gr-mc-opt:nth-child(2){ animation-delay:.10s; }
.gr-mc-opts .gr-mc-opt:nth-child(3){ animation-delay:.16s; }
.gr-mc-opts .gr-mc-opt:nth-child(4){ animation-delay:.22s; }
@keyframes grOptIn{
  from{ opacity:0; transform:translateX(-8px); }
  to  { opacity:1; transform:translateX(0);    }
}
.gr-mc-opt:hover{ border-color:var(--card-border-hi); background:var(--chip-bg-hover); transform:translateX(4px); }
.gr-mc-opt .key{
  flex:0 0 26px; height:26px;
  display:inline-grid; place-items:center;
  border-radius:8px;
  background:var(--chip-bg); border:1px solid var(--card-border);
  font-size:12px; font-weight:700; color:var(--muted);
}
.gr-mc-opt .key{ position:relative; }
.gr-mc-opt.is-correct{ border-color:rgba(99,210,140,.55); background:rgba(99,210,140,.10); }
.gr-mc-opt.is-correct .key{ background:rgba(99,210,140,.18); color:transparent; border-color:rgba(99,210,140,.30); }
.gr-mc-opt.is-correct .key::after{
  content:"✓"; position:absolute; inset:0; display:grid; place-items:center;
  color:#63d28c; font-size:14px; font-weight:900;
}
.gr-mc-opt.is-wrong{ border-color:rgba(255,90,110,.55); background:rgba(255,90,110,.08); }
.gr-mc-opt.is-wrong .key{ background:rgba(255,90,110,.18); color:transparent; border-color:rgba(255,90,110,.30); }
.gr-mc-opt.is-wrong .key::after{
  content:"✕"; position:absolute; inset:0; display:grid; place-items:center;
  color:#ff7a89; font-size:14px; font-weight:900;
}
.gr-mc-opt.is-locked{ cursor:default; pointer-events:none; }
.gr-mc-opt.is-correct,
.gr-mc-opt.is-wrong{ animation:grPop .3s cubic-bezier(.2,.7,.2,1); }
.gr-mc-opt.shake{ animation:grShake .35s; }

@keyframes grPop{ 0%{ transform:scale(.97); } 60%{ transform:scale(1.02); } 100%{ transform:scale(1); } }
@keyframes grShake{
  0%,100%{ transform:translateX(0); }
  20%   { transform:translateX(-4px); }
  40%   { transform:translateX(4px); }
  60%   { transform:translateX(-3px); }
  80%   { transform:translateX(2px); }
}

/* ----- Feedback card — verdict, answer chips, why, full-rule accordion ----- */
.gr-fb{
  margin-top:16px;
  border-radius:18px;
  border:1px solid var(--card-border);
  overflow:hidden;
  animation:grFbIn .45s cubic-bezier(.2,.7,.2,1);
}
@keyframes grFbIn{
  from{ opacity:0; transform:translateY(10px) scale(.99); }
  to  { opacity:1; transform:none; }
}
.gr-fb.is-correct{
  border-color:rgba(99,210,140,.38);
  background:linear-gradient(180deg, rgba(99,210,140,.10), rgba(99,210,140,.02) 70%), var(--card-bg-soft);
}
.gr-fb.is-wrong{
  border-color:rgba(255,90,110,.38);
  background:linear-gradient(180deg, rgba(255,90,110,.10), rgba(255,90,110,.02) 70%), var(--card-bg-soft);
}
.gr-fb-head{ display:flex; align-items:center; gap:10px; padding:14px 16px 0; }
.gr-fb-ico{
  flex:0 0 26px; height:26px; border-radius:50%;
  display:inline-grid; place-items:center;
  font-size:13px; font-weight:900;
  animation:grPop .35s cubic-bezier(.2,.7,.2,1);
}
.gr-fb.is-correct .gr-fb-ico{ background:rgba(99,210,140,.18); color:#63d28c; box-shadow:0 0 16px -4px rgba(99,210,140,.6); }
.gr-fb.is-wrong  .gr-fb-ico{ background:rgba(255,90,110,.18); color:#ff7a89; box-shadow:0 0 16px -4px rgba(255,90,110,.5); }
.gr-fb-verdict{ font-weight:800; font-size:14.5px; }
.gr-fb.is-correct .gr-fb-verdict{ color:#63d28c; }
.gr-fb.is-wrong  .gr-fb-verdict{ color:#ff7a89; }
.gr-fb-lang{
  margin-left:auto;
  display:flex; gap:3px; padding:3px;
  background:var(--chip-bg); border:1px solid var(--card-border);
  border-radius:999px;
}
.gr-fb-lang button{
  padding:4px 10px; border:none; border-radius:999px;
  background:transparent; color:var(--muted);
  font-size:11px; font-weight:800; letter-spacing:.04em; cursor:pointer;
  transition:background .2s, color .2s;
}
.gr-fb-lang button:hover{ color:var(--text); }
.gr-fb-lang button.is-active{ background:var(--lime); color:var(--on-lime); }
.gr-fb-chips{ display:flex; flex-wrap:wrap; gap:8px; padding:12px 16px 0; }
.gr-fb-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px; border-radius:10px;
  font-size:13px; line-height:1.45; color:var(--text);
  border:1px solid var(--card-border);
  background:var(--chip-bg);
}
.gr-fb-chip i{ font-style:normal; font-weight:900; font-size:11px; flex:0 0 auto; }
.gr-fb-chip.is-good{ border-color:rgba(99,210,140,.35); background:rgba(99,210,140,.08); }
.gr-fb-chip.is-good i{ color:#63d28c; }
.gr-fb-chip.is-bad{ border-color:rgba(255,90,110,.35); background:rgba(255,90,110,.07); }
.gr-fb-chip.is-bad i{ color:#ff7a89; }
.gr-fb-chip.is-bad b{
  text-decoration:line-through;
  text-decoration-thickness:1.5px;
  text-decoration-color:rgba(255,90,110,.7);
}
.gr-fb-chip.is-alt{ font-size:12px; color:var(--muted); }
.gr-fb-why{ padding:12px 16px 2px; font-size:14px; line-height:1.6; color:var(--text); }
.gr-fb-why[hidden]{ display:none; }
.gr-fb-why:lang(ru), .gr-fb-why:lang(uz){ line-height:1.68; }
/* The English original under a translated explanation. Labelled and rule-marked
   so it reads as a deliberate second voice, not as text that failed to
   translate — which is exactly how an unlabelled grey paragraph reads. */
.gr-fb-why .en{
  position:relative;
  margin-top:9px; padding:7px 0 0 11px;
  border-top:1px dashed var(--hairline);
  border-left:2px solid var(--card-border-hi);
  font-size:12.5px; line-height:1.55; color:var(--muted);
}
.gr-fb-why .en::before{
  content:"EN";
  display:inline-block; margin-right:7px;
  font-size:9.5px; font-weight:800; letter-spacing:.08em;
  color:var(--muted); opacity:.75;
  vertical-align:1px;
}
.gr-fb-why b{
  background:linear-gradient(120deg, var(--lime), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
:root[data-theme="light"] .gr-fb-why b{
  background:linear-gradient(120deg, #65a30d, #0891b2);
  -webkit-background-clip:text; background-clip:text;
}
.gr-fb-skel{
  display:block; height:12px; border-radius:6px; margin:5px 0;
  background:linear-gradient(90deg, var(--chip-bg) 25%, var(--chip-bg-hover) 50%, var(--chip-bg) 75%);
  background-size:200% 100%;
  animation:gpShimmer 1.4s linear infinite;
}
.gr-fb-skel.w70{ width:70%; }
.gr-fb-skel.w85{ width:85%; }
.gr-fb-rule-toggle{
  display:flex; align-items:center; gap:10px;
  width:calc(100% - 32px);
  margin:12px 16px 14px;
  padding:10px 14px;
  background:var(--chip-bg);
  border:1px dashed var(--card-border-hi);
  border-radius:12px;
  color:var(--text); font-size:13px; font-weight:600; cursor:pointer;
  text-align:left;
  transition:background .2s, border-color .2s;
}
.gr-fb-rule-toggle:hover{ background:var(--chip-bg-hover); }
.gr-fb-rule-toggle .bk{
  flex:0 0 22px; height:22px;
  display:inline-grid; place-items:center;
  border-radius:7px;
  font-size:12px; font-weight:900;
  background:linear-gradient(135deg, var(--violet), var(--cyan)); color:#fff;
}
.gr-fb-rule-toggle .chev{ margin-left:auto; color:var(--muted); transition:transform .25s; }
.gr-fb-rule-toggle.is-open .chev{ transform:rotate(180deg); }
/* Smooth grid-rows expand — animates to auto height without a fixed value. */
.gr-fb-rule-wrap{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .42s cubic-bezier(.2,.7,.2,1);
}
.gr-fb-rule-wrap.is-open{ grid-template-rows:1fr; }
.gr-fb-rule{ overflow:hidden; min-height:0; }
.gr-fb-rule-wrap.is-open > .gr-fb-rule{ padding:2px 16px 16px; }
.gr-fb-rule-core{
  font-size:14px; line-height:1.6;
  padding:13px 15px;
  background:var(--card-bg); border:1px solid var(--card-border);
  border-left:3px solid var(--violet);
  border-radius:12px;
}
.gr-fb-rule-core b{ color:var(--text); }
.gr-fb-cases{
  list-style:none; padding:0; margin:10px 0 0;
  display:grid; gap:9px;
}
.gr-fb-cases li{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 14px;
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:13px;
  transition:border-color .25s, transform .25s;
}
.gr-fb-cases li:hover{ border-color:var(--card-border-hi); transform:translateX(2px); }
/* staggered reveal once the panel is open */
.gr-fb-rule-wrap.is-open .gr-fb-cases li{
  animation:grCaseIn .45s cubic-bezier(.2,.7,.2,1) backwards;
  animation-delay:calc(.08s + var(--i,0) * 70ms);
}
@keyframes grCaseIn{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }
.gr-fb-cases .c-n{
  flex:0 0 24px; width:24px; height:24px; border-radius:8px; margin-top:1px;
  display:grid; place-items:center; font-size:12px; font-weight:800; color:#fff;
  background:linear-gradient(135deg, var(--violet), var(--cyan));
  box-shadow:0 6px 16px -6px var(--violet);
}
.gr-fb-cases .c-body{ min-width:0; }
.gr-fb-cases .c-title{ font-weight:800; font-size:14px; color:var(--text); }
.gr-fb-cases .c-explain{ color:var(--muted); font-size:12.5px; line-height:1.55; margin-top:3px; }
.gr-fb-cases .c-ex{
  margin-top:8px; font-size:13px; line-height:1.5;
  padding:7px 11px;
  background:var(--card-bg-soft); border:1px solid var(--card-border);
  border-left:2px solid var(--cyan);
  border-radius:8px;
}
.gr-fb-cases .c-ex b{
  background:linear-gradient(120deg, var(--lime), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
:root[data-theme="light"] .gr-fb-cases .c-ex b{
  background:linear-gradient(120deg, #65a30d, #0891b2);
  -webkit-background-clip:text; background-clip:text;
}
.gr-fb-form{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.gr-fb-form .f{
  font-family:'JetBrains Mono', ui-monospace, 'Native Emoji', monospace;
  font-size:11.5px;
  padding:6px 10px; border-radius:8px;
  background:var(--chip-bg); border:1px solid var(--card-border);
  color:var(--text);
}
.gr-fb-form .f b{ color:var(--lime); margin-right:6px; }
:root[data-theme="light"] .gr-fb-form .f b{ color:#3f7a00; }
.gr-fb-signals{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.gr-fb-signals span{
  font-size:11.5px; padding:4px 10px; border-radius:999px;
  background:rgba(198,242,78,.08); border:1px solid rgba(198,242,78,.22);
  color:var(--lime);
}
:root[data-theme="light"] .gr-fb-signals span{
  color:#3f7a00;
  background:rgba(101,163,13,.08); border-color:rgba(101,163,13,.25);
}
.gr-fb-learn{
  display:inline-flex; align-items:center; gap:4px;
  margin-top:12px; padding:0;
  background:none; border:none;
  color:var(--cyan); font-size:12.5px; font-weight:700; cursor:pointer;
}
.gr-fb-learn:hover{ text-decoration:underline; }

/* Difficulty badge on harder questions */
.gr-q-level{
  position:absolute; top:14px; right:14px;
  padding:4px 10px; border-radius:999px;
  font-size:10.5px; font-weight:800; letter-spacing:.08em;
  background:linear-gradient(135deg, rgba(244,201,93,.16), rgba(255,122,217,.10));
  border:1px solid rgba(244,201,93,.35);
  color:var(--gold);
}
.gr-q-card.has-level .gr-q-stem{ padding-right:64px; }

/* Gap fill */
.gr-gap-input{
  width:100%;
  padding:12px 14px;
  background:var(--input-bg); border:1px solid var(--card-border);
  border-radius:12px;
  font-size:15px; color:var(--text);
  font-family:inherit;
  transition:border-color .2s, background .2s;
}
.gr-gap-input:focus{ outline:none; background:var(--input-bg-focus); border-color:var(--ring-violet); }
.gr-gap-input.is-correct{ border-color:rgba(99,210,140,.55); background:rgba(99,210,140,.06); }
.gr-gap-input.is-wrong{ border-color:rgba(255,90,110,.55); background:rgba(255,90,110,.06); }

/* ----- Word bank (opt-in gap mode) ----- */
.gr-gap-bank{ margin:0 0 14px; }
.gr-gap-bank-cap{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin-bottom:9px;
}
.gr-gap-bank-hint{
  font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:none;
  color:var(--violet); opacity:.85;
}
.gr-gap-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.gr-gap-chip{
  --ci:0;
  padding:9px 15px; border-radius:999px;
  font-family:inherit; font-size:14px; font-weight:700; color:var(--text);
  background:var(--card-bg-soft);
  border:1px solid var(--card-border);
  cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .2s, border-color .2s, background .2s, opacity .3s;
  animation:grChipIn .42s both;
  animation-delay:calc(var(--ci) * .045s);
}
.gr-gap-chip:nth-child(1){ --ci:0 } .gr-gap-chip:nth-child(2){ --ci:1 }
.gr-gap-chip:nth-child(3){ --ci:2 } .gr-gap-chip:nth-child(4){ --ci:3 }
.gr-gap-chip:nth-child(5){ --ci:4 } .gr-gap-chip:nth-child(6){ --ci:5 }
.gr-gap-chip:nth-child(7){ --ci:6 } .gr-gap-chip:nth-child(8){ --ci:7 }
.gr-gap-chip:hover{
  transform:translateY(-2px);
  border-color:var(--ring-violet);
  background:var(--chip-bg-hover);
  box-shadow:0 10px 22px -12px var(--gr-ring);
}
.gr-gap-chip:active{ transform:translateY(0) scale(.95); }
.gr-gap-chip.is-used{
  opacity:.32; text-decoration:line-through; cursor:default;
  transform:none; box-shadow:none;
  border-color:var(--card-border); background:transparent;
}
@keyframes grChipIn{ from{ opacity:0; transform:translateY(8px) scale(.94); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .gr-gap-chip{ animation:none; } }

.gr-q-actions{
  display:flex; gap:10px; margin-top:16px; flex-wrap:wrap;
}
.gr-q-actions[hidden]{ display:none; }

/* ----- End-of-set summary ----- */
.gr-end-card{
  padding:30px 28px;
  background:linear-gradient(135deg, rgba(139,109,255,.16), rgba(78,224,242,.10) 60%, rgba(198,242,78,.10));
  border:1px solid rgba(139,109,255,.30);
  border-radius:24px;
  text-align:center;
  position:relative; overflow:hidden;
}
.gr-end-card h3{
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
  font-size:26px; font-weight:800; margin:0 0 8px;
}
.gr-end-card .score{
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
  font-size:68px; font-weight:800; line-height:1;
  background:linear-gradient(120deg, var(--gold), var(--lime), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin:8px 0 6px;
}
.gr-end-card .meta{ color:var(--muted); font-size:14px; margin-bottom:20px; }
.gr-end-card .actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ----- Mistake fix tab ----- */
.gr-mf-target{
  padding:14px 16px;
  background:var(--card-bg-soft); border:1px solid var(--card-border);
  border-radius:12px;
  font-size:15px; line-height:1.6;
  margin-bottom:14px;
  font-family:'Hanken Grotesk', 'Native Emoji', sans-serif;
  cursor:text;
  user-select:text;
}

/* ============================================================================
   PLACEMENT TEST — intro, question screen, animated results
   ============================================================================ */

.gr-test-wrap{ max-width:780px; margin:0 auto; padding:0 26px; }

.gr-pl-intro{
  position:relative; overflow:hidden;
  padding:42px 36px 36px;
  background:
    radial-gradient(120% 100% at 50% -30%, rgba(139,109,255,.14), transparent 55%),
    var(--card-bg);
  border:1px solid var(--card-border-hi);
  border-radius:28px;
  text-align:center;
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
}
:root[data-theme="light"] .gr-pl-intro{
  background:
    radial-gradient(120% 100% at 50% -30%, rgba(139,109,255,.10), transparent 55%),
    var(--card-bg);
  box-shadow:var(--shadow-lg);
}
.gr-pl-intro .pl-orb{
  position:absolute; border-radius:50%; aspect-ratio:1;
  filter:blur(50px); pointer-events:none;
}
.gr-pl-intro .pl-orb-a{
  width:46%; right:-12%; top:-30%;
  background:radial-gradient(circle, rgba(139,109,255,.45), transparent 60%);
  animation:grPulse 7s ease-in-out infinite;
}
.gr-pl-intro .pl-orb-b{
  width:40%; left:-10%; bottom:-32%;
  background:radial-gradient(circle, rgba(78,224,242,.35), transparent 60%);
  animation:grPulse 7s ease-in-out infinite reverse;
}
/* Decorative "all of time" strip — same language as the matrix cells */
.gr-pl-intro .pl-tl{
  height:24px; max-width:440px;
  margin:0 auto 18px; flex:none;
}
.gr-pl-intro .gr-eyebrow{ position:relative; }
.gr-pl-intro h2{
  position:relative;
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
  font-size:clamp(28px, 3.4vw, 40px); font-weight:800;
  letter-spacing:-.02em;
  margin:10px 0 10px;
}
.gr-pl-intro h2 b{
  background:linear-gradient(120deg, var(--lime), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
:root[data-theme="light"] .gr-pl-intro h2 b{
  background:linear-gradient(120deg, #65a30d, #0891b2);
  -webkit-background-clip:text; background-clip:text;
}
.gr-pl-intro p{
  position:relative;
  color:var(--muted); font-size:15px;
  margin:0 auto 4px; max-width:560px; line-height:1.6;
}
.gr-pl-intro .gp-meter{ position:relative; max-width:380px; margin:18px auto 4px; }
.gr-pl-intro .pl-facts{
  position:relative;
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  margin:18px 0 24px;
}
.gr-pl-intro .gr-q-actions{ position:relative; }

/* Test question screen */
.gr-pl-q{
  padding:28px 28px 24px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:20px;
  position:relative;
}
.gr-pl-q-head{
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:var(--muted); margin-bottom:10px;
}
.gr-pl-q-head .qn{ font-weight:700; }

.gr-pl-stem{
  font-size:19px; line-height:1.5; font-weight:600;
  margin:8px 0 18px;
}

.gr-pl-actions{
  display:flex; gap:10px; margin-top:18px; align-items:center;
  flex-wrap:wrap;
}
.gr-pl-actions .gr-pl-back{
  padding:10px 18px; background:transparent; color:var(--muted);
  border:1px solid var(--card-border); border-radius:999px;
  font-size:13.5px; font-weight:600; cursor:pointer;
  transition:color .2s, border-color .2s;
}
.gr-pl-actions .gr-pl-back:hover{ color:var(--text); border-color:var(--card-border-hi); }
.gr-pl-actions .gr-pl-back:disabled{ opacity:.4; cursor:not-allowed; }

/* ----- Placement RESULTS — the visual high point ----- */
.gr-pl-results{
  display:grid; gap:24px;
}
.gr-pl-badge{
  position:relative; overflow:hidden;
  padding:36px 28px 30px;
  background:linear-gradient(160deg, rgba(244,201,93,.18), rgba(139,109,255,.14) 50%, rgba(78,224,242,.10));
  border:1px solid rgba(244,201,93,.30);
  border-radius:24px;
  text-align:center;
}
.gr-pl-badge::before,
.gr-pl-badge::after{
  content:""; position:absolute; pointer-events:none;
}
.gr-pl-badge::before{
  inset:-30% -10% auto auto; width:50%; aspect-ratio:1;
  background:radial-gradient(circle, var(--gold), transparent 60%);
  opacity:.5; filter:blur(40px);
  animation:grPulse 5s ease-in-out infinite;
}
.gr-pl-badge::after{
  inset:auto auto -30% -10%; width:40%; aspect-ratio:1;
  background:radial-gradient(circle, var(--violet), transparent 60%);
  opacity:.4; filter:blur(40px);
  animation:grPulse 5s ease-in-out infinite reverse;
}
.gr-pl-badge .pl-eyebrow{
  position:relative;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin-bottom:8px;
}
.gr-pl-badge .pl-level{
  position:relative;
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
  font-size:96px; font-weight:800; line-height:1;
  letter-spacing:-.04em;
  background:linear-gradient(120deg, var(--gold), var(--lime), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin:2px 0 4px;
  animation:grBadgeIn .8s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes grBadgeIn{
  from{ opacity:0; transform:scale(.85); filter:blur(8px); }
  to  { opacity:1; transform:scale(1);   filter:blur(0); }
}
.gr-pl-badge .pl-name{
  position:relative;
  font-size:18px; font-weight:600; color:var(--text); margin-bottom:6px;
}
.gr-pl-badge .pl-can{
  position:relative;
  color:var(--muted); font-size:14.5px; line-height:1.55;
  max-width:480px; margin:6px auto 18px;
}
.gr-pl-badge .pl-score{
  position:relative;
  font-size:14px; color:var(--muted);
}
.gr-pl-badge .pl-score b{
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
  font-size:22px; font-weight:800;
  color:var(--text); margin-right:4px;
}

/* CEFR level meter — bars A1→C2 fill smoothly */
.gr-meter{
  position:relative;
  margin-top:18px;
}
.gr-meter-track{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:4px;
  margin-bottom:6px;
}
.gr-meter-bar{
  height:10px; border-radius:6px;
  background:var(--card-bg-soft); border:1px solid var(--card-border);
  position:relative; overflow:hidden;
}
.gr-meter-bar::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--violet), var(--cyan), var(--lime), var(--gold));
  transform-origin:0 50%;
  transform:scaleX(0);
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.gr-meter-bar.is-on::after  { transform:scaleX(1); }
.gr-meter-bar.is-half::after{ transform:scaleX(.5); }
.gr-meter-bar.is-this{ box-shadow:0 0 0 2px rgba(244,201,93,.45); }
.gr-meter-labels{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:4px;
  font-size:10.5px; font-weight:700; letter-spacing:.10em;
  color:var(--muted); text-align:center;
}

/* Per-area breakdown */
.gr-pl-areas{
  padding:24px;
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:20px;
}
.gr-pl-areas h3{
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
  font-size:18px; margin:0 0 14px;
}
.gr-area-row{
  display:grid; grid-template-columns:1fr auto; gap:8px 14px;
  align-items:center; padding:8px 0;
  border-bottom:1px solid var(--hairline);
}
.gr-area-row:last-child{ border-bottom:none; }
.gr-area-row .a-name{ font-size:14px; font-weight:600; }
.gr-area-row .a-bar{
  grid-column:1 / -1;
  height:6px; border-radius:999px; overflow:hidden;
  background:var(--card-bg-soft); border:1px solid var(--card-border);
}
.gr-area-row .a-bar > span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--violet), var(--cyan), var(--lime));
  transition:width 1s cubic-bezier(.2,.7,.2,1);
}
.gr-area-row .a-bar.weak > span{
  background:linear-gradient(90deg, #ff7a89, var(--gold));
}
.gr-area-row .a-score{ font-size:13px; color:var(--muted); white-space:nowrap; }

/* Study-next deep links */
.gr-pl-next{
  padding:24px;
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:20px;
}
.gr-pl-next h3{
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
  font-size:18px; margin:0 0 14px;
}
.gr-pl-next ul{ display:grid; gap:8px; list-style:none; padding:0; margin:0; }
.gr-pl-next a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px;
  background:var(--card-bg-soft); border:1px solid var(--card-border);
  border-radius:12px;
  text-decoration:none; color:var(--text);
  transition:border-color .2s, background .2s, transform .15s;
}
.gr-pl-next a:hover{ border-color:var(--card-border-hi); background:var(--chip-bg-hover); transform:translateX(2px); }
.gr-pl-next a .nm{ font-weight:600; font-size:14.5px; }
.gr-pl-next a .scrub{ font-size:12px; color:var(--muted); }
.gr-pl-next a::after{ content:"→"; color:var(--muted); margin-left:auto; font-weight:700; }

.gr-pl-final-actions{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin-top:8px;
}

/* ============================================================================
   Reduced motion — collapse every entrance/loop to (near-)instant.
   ============================================================================ */
@media (prefers-reduced-motion:reduce){
  #grammar-home *, #grammar-home *::before, #grammar-home *::after,
  #grammar-topic *, #grammar-topic *::before, #grammar-topic *::after,
  #grammar-test *, #grammar-test *::before, #grammar-test *::after{
    animation-duration:.001s !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001s !important;
    transition-delay:0s !important;
  }
  body.grammar-mode::before{ animation:none !important; }
  .gr-panel-tilt{ transform:none !important; }
}

/* ============================================================================
   Responsive
   ============================================================================ */
@media (max-width:1080px){
  .gr-hero{ grid-template-columns:1fr; gap:36px; align-items:start; padding-top:12px; }
  .gr-panel{ width:100%; max-width:480px; }
}
@media (max-width:760px){
  .gr-sec{ margin-top:72px; }
  .gr-cat.gr-sec{ margin-top:56px; }

  /* Matrix collapses to one column; each cell labels itself via data-tag */
  .gr-matrix{ grid-template-columns:1fr; gap:10px; }
  .gr-mx-corner, .gr-mx-col-head,
  .gr-matrix .gr-mx-row-head,
  .gr-mx-specials .gr-mx-row-head{ display:none; }
  .gr-mx-specials{ grid-template-columns:1fr; gap:10px; margin-top:10px; }
  .gr-matrix .gr-mx-cell::before,
  .gr-mx-specials .gr-mx-cell::before{
    content:attr(data-tag);
    position:static; inset:auto; order:-1;
    display:block; background:none; opacity:1;
    font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
    color:var(--muted);
    margin-bottom:8px;
  }
  .gr-mx-cell{ min-height:0; }

  .gr-pl-cta .inner{ grid-template-columns:1fr; padding:28px 24px; }
  .gr-pl-cta .pl-right{ justify-self:stretch; min-width:0; }
  .gr-cat-head{ flex-direction:column; align-items:flex-start; gap:14px; }
}
@media (max-width:560px){
  .gr-shell{ padding:0 18px; }
  .gr-topic-wrap, .gr-test-wrap{ padding:0 18px; }
  .gr-hero-cta{ width:100%; }
  .gr-hero-cta .gr-btn-lg{ width:100%; justify-content:center; }
  .gr-panel-tilt{ padding:20px 18px; }
  .gr-pl-badge .pl-level{ font-size:72px; }
  .gr-pl-intro{ padding:30px 20px 26px; }
  .gr-q-card{ padding:18px; }
  .gr-use, .gr-mistake-pair, .gr-speak-q{ grid-template-columns:28px minmax(0,1fr); gap:0 10px; }
  .use-num, .sq-num{ width:28px; height:28px; border-radius:9px; font-size:12.5px; }
  .gr-use::before, .gr-mistake-pair::before, .gr-speak-q::before{ left:13px; top:34px; }
}

/* ============================================================================
   ENGAGEMENT ENGINE — personal dashboard, Daily Practice, celebrations,
   mastery heat-map, and the reduced-motion / performance pass.
   Appended 2026-07-12. Reuses tokens + .gr-ring / .gr-btn from above.
   ============================================================================ */

/* ---- Personal command dashboard (top of the hub) ---- */
.gr-dash{ margin-top:0; }
.gr-dash-lead{ margin-bottom:20px; }
.gr-dash-h1{
  font-size:clamp(26px,3.4vw,40px); font-weight:800; line-height:1.05;
  letter-spacing:-.02em; margin:6px 0 0; color:var(--text);
}
.gr-dash-h1 .ink{
  background:var(--gr-grad-2); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gr-dash-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.gd-tile{
  position:relative; display:flex; align-items:center; gap:13px;
  padding:16px 18px; border-radius:18px;
  background:var(--card-bg-soft); border:1px solid var(--card-border);
  overflow:hidden;
  transition:border-color .25s, transform .25s;
}
.gd-tile:hover{ border-color:var(--card-border-hi); transform:translateY(-2px); }
/* ring centre matches the tile, not the page */
.gd-tile .gr-ring::after{ background:var(--card-bg-soft); }
.gd-tile .gd-meta{ display:flex; flex-direction:column; min-width:0; }
.gd-tile .gd-meta b{ font-size:14px; font-weight:800; color:var(--text); }
.gd-tile .gd-meta span{ font-size:12.5px; color:var(--muted); }
.gd-lbl{ font-size:12px; color:var(--muted); font-weight:600; }

/* streak */
.gd-streak{ gap:11px; }
.gd-flame{ font-size:30px; line-height:1; filter:grayscale(.7) opacity(.5); transition:filter .3s; }
.gd-streak[data-hot="true"] .gd-flame{ filter:none; animation:gdFlame 2.4s ease-in-out infinite; }
.gd-streak .gd-num{ font-size:30px; font-weight:800; color:var(--text); line-height:1; }
.gd-freeze{
  position:absolute; top:9px; right:11px; font-size:11px; font-weight:700;
  color:var(--cyan); background:rgba(78,224,242,.12);
  padding:2px 7px; border-radius:999px;
}
@keyframes gdFlame{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-2px) scale(1.08); } }

/* level */
.gd-level{ flex-direction:column; align-items:flex-start; gap:8px; justify-content:center; }
.gd-lv-badge{
  font-size:13px; font-weight:800; color:var(--on-lime);
  background:var(--gr-grad-2); padding:4px 12px; border-radius:999px;
}
.gd-lv-bar{ width:100%; height:7px; border-radius:999px; background:var(--card-border); overflow:hidden; }
.gd-lv-bar i{ display:block; height:100%; border-radius:999px; background:var(--gr-grad-2); transition:width 1s cubic-bezier(.2,.7,.2,1); }

/* actions row */
.gr-dash-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; align-items:stretch; }
.gd-practice{
  flex-direction:column; align-items:flex-start; gap:2px;
  padding:14px 26px; position:relative; overflow:hidden;
}
.gd-practice .gd-pr-main{ font-size:16px; font-weight:800; display:inline-flex; align-items:center; }
.gd-practice .gd-pr-play{ font-size:12px; margin-right:2px; }
.gd-practice .gd-pr-sub{ font-size:12px; font-weight:600; color:var(--on-lime); opacity:.72; }
.gd-practice::after{   /* moving sheen */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%); transition:transform .7s;
}
.gd-practice:hover::after{ transform:translateX(120%); }
.gd-review b, .gd-continue b{ color:var(--lime); }
.gd-review b{ margin-left:5px; background:rgba(198,242,78,.16); padding:1px 8px; border-radius:999px; font-size:12.5px; }

/* weak-spot chips */
.gr-dash-weak{ display:flex; align-items:center; gap:10px; margin-top:16px; flex-wrap:wrap; }
.gdw-lbl{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.gdw-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.gdw-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 13px; border-radius:999px; text-decoration:none;
  font-size:13px; font-weight:600; color:var(--text);
  background:var(--card-bg-soft); border:1px solid var(--card-border);
  border-left:3px solid var(--gr-heat, var(--muted));
  transition:transform .2s, border-color .25s;
}
.gdw-chip:hover{ transform:translateY(-2px); border-color:var(--card-border-hi); }
.gdw-chip b{ font-size:12px; color:var(--muted); font-weight:800; }

/* ---- Mastery heat-map (topic cards, matrix cells, weak chips) ---- */
[data-status="not-started"]{ --gr-heat:var(--muted); }
[data-status="learning"]  { --gr-heat:var(--violet); }
[data-status="practiced"] { --gr-heat:var(--cyan); }
[data-status="mastered"]  { --gr-heat:var(--lime); }
.gr-topic-card[data-status]{ box-shadow:inset 3px 0 0 var(--gr-heat, transparent); }
.gr-topic-card[data-status="not-started"]{ box-shadow:none; }
.gr-mx-cell[data-status="mastered"]{ border-color:rgba(198,242,78,.4); }
.gr-mx-cell[data-status="practiced"]{ border-color:rgba(78,224,242,.32); }

/* ============================================================================
   DAILY PRACTICE / MISTAKES REVIEW session
   ============================================================================ */
.grp-wrap{ max-width:720px; margin:0 auto; padding:8px 0 60px; }
.grp-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.grp-title{ font-size:15px; font-weight:800; letter-spacing:.02em; color:var(--text); }
.grp-quit{ padding:7px 15px; font-size:12.5px; }
/* Shown to an ENTITLED student when the premium drill pack could not be
   fetched, so a short session reads as an outage on our side rather than as
   "you have nothing left to practise". Amber, not red: the practice in front of
   them still works. Themed via the token vars so it survives light mode — a
   hard-coded dark panel goes invisible there. */
.grp-degraded{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 14px; padding:11px 14px; border-radius:14px;
  /* --card-bg, NOT --card: there is no --card token on this site, and an
     unknown var makes the whole color-mix invalid, which silently renders the
     panel fully TRANSPARENT (caught in light theme, where it vanished). */
  background:color-mix(in oklab, #f59e0b 14%, var(--card-bg));
  border:1px solid color-mix(in oklab, #f59e0b 34%, transparent);
}
.grp-degraded > span{ font-size:16px; line-height:1; }
.grp-degraded p{ flex:1 1 220px; margin:0; font-size:13px; line-height:1.45; color:var(--text); }
.grp-degraded .gr-btn{ padding:6px 13px; font-size:12.5px; }

.grp-bar{ height:9px; border-radius:999px; background:var(--card-border); overflow:hidden; }
.grp-bar span{ display:block; height:100%; border-radius:999px; background:var(--gr-grad-2); transition:width .5s cubic-bezier(.2,.7,.2,1); }
.grp-meta{ display:flex; align-items:center; gap:16px; margin:14px 2px 20px; font-size:13px; }
.grp-count b{ color:var(--text); font-weight:800; }
.grp-count{ color:var(--muted); }
.grp-combo, .grp-xp{ display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-weight:600; }
.grp-combo i, .grp-xp i{ font-style:normal; }
.grp-combo b, .grp-xp b{ color:var(--text); font-weight:800; }
.grp-combo{ opacity:.55; transition:opacity .3s, transform .3s; }
.grp-combo.is-live{ opacity:1; color:var(--gold); transform:scale(1.05); }
.grp-combo.is-live b{ color:var(--gold); }

.grp-card{
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:20px; padding:26px 26px 22px;
  animation:grpCardIn .4s cubic-bezier(.2,.7,.2,1) backwards;
}
@keyframes grpCardIn{ from{ opacity:0; transform:translateY(14px) scale(.99); } to{ opacity:1; transform:none; } }
.grp-item-topic{
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; margin-bottom:14px;
}
.grp-item-topic:hover{ color:var(--cyan); }
.grp-hint{ font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.grp-next-row{ display:flex; gap:10px; margin-top:16px; }
/* .gr-btn sets display:inline-flex, which (equal specificity, author > UA) beats
   the [hidden] rule — so a hidden Next/Check button would still show. Force it. */
.grp-card [hidden], .pf-card [hidden]{ display:none !important; }

/* end screen */
.grp-end{ text-align:center; padding:26px 0 10px; display:flex; flex-direction:column; align-items:center; }
.grp-end-ring{ margin:8px auto 14px; }
.grp-end h2{ font-size:24px; font-weight:800; margin:0 0 4px; color:var(--text); }
.grp-end > p{ color:var(--muted); margin:0 0 22px; }
/* Equal-width tiles on a grid, not a centred flex-wrap — see the note on
   .sh-hero-stats in 25-shadowing.css. */
.grp-end-stats{ display:grid; grid-template-columns:repeat(auto-fit, 128px); justify-content:center; gap:14px; margin-bottom:18px; }
.ges{ display:flex; flex-direction:column; align-items:center; gap:2px; min-width:92px; padding:14px 18px; border-radius:16px; background:var(--card-bg-soft); border:1px solid var(--card-border); }
.ges span{ font-size:19px; }
.ges b{ font-size:22px; font-weight:800; color:var(--text); }
.ges small{ font-size:11.5px; color:var(--muted); }
.grp-end-goal{ font-size:13.5px; color:var(--muted); margin-bottom:22px; padding:9px 18px; border-radius:999px; background:var(--card-bg-soft); border:1px solid var(--card-border); }
.grp-end-goal.is-met{ color:var(--lime); border-color:rgba(198,242,78,.35); }
.grp-end-cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* empty state */
.grp-empty{ text-align:center; padding:56px 20px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.grp-empty .ge-ico{ font-size:44px; }
.grp-empty h2{ font-size:22px; font-weight:800; margin:6px 0 0; color:var(--text); }
.grp-empty p{ color:var(--muted); max-width:400px; line-height:1.55; margin:0 0 12px; }

/* ============================================================================
   CELEBRATIONS — transient toasts + confetti
   ============================================================================ */
.gr-celebrate-layer{
  position:fixed; inset:0; z-index:2147483000; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding-top:84px;
}
.gr-confetti{ position:fixed; inset:0; pointer-events:none; }
.gr-celebrate{
  display:flex; align-items:center; gap:12px;
  padding:13px 20px 13px 16px; border-radius:16px;
  background:var(--card-bg); border:1px solid var(--card-border-hi);
  box-shadow:0 20px 50px -18px rgba(0,0,0,.6);
  opacity:0; transform:translateY(-18px) scale(.96);
  transition:opacity .35s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1);
}
.gr-celebrate.is-in{ opacity:1; transform:translateY(0) scale(1); }
.gr-celebrate.is-combo{ background:linear-gradient(135deg,rgba(244,201,93,.22),var(--card-bg)); }
.gr-celebrate .gc-ico{ font-size:26px; line-height:1; }
.gr-celebrate .gc-txt{ display:flex; flex-direction:column; }
.gr-celebrate .gc-txt b{ font-size:15px; font-weight:800; color:var(--text); }
.gr-celebrate .gc-txt small{ font-size:12px; color:var(--muted); }

/* ============================================================================
   Responsive
   ============================================================================ */
@media (max-width:820px){
  .gr-dash-grid{ grid-template-columns:repeat(2,1fr); }
  .gr-dash-actions{ flex-direction:column; }
  .gr-dash-actions .gr-btn{ width:100%; }
}
@media (max-width:520px){
  .gr-celebrate-layer{ padding-top:70px; }
  .grp-card{ padding:20px 18px; }
}

/* ============================================================================
   Reduced-motion + performance — kill continuous/decorative motion.
   ============================================================================ */
@media (prefers-reduced-motion:reduce){
  body.grammar-mode::before{ animation:none !important; }
  .gd-streak[data-hot="true"] .gd-flame{ animation:none !important; }
  .gr-celebrate{ transition:opacity .2s !important; transform:none !important; }
  .gr-celebrate.is-in{ transform:none !important; }
  .gr-confetti{ display:none !important; }
  .grp-card{ animation:none !important; }
  .gd-practice::after{ display:none; }
}

/* ============================================================================
   IELTS BAND BRIDGE — dashboard strip, band page, lever meters, structure
   ladder, transformation card. Appended 2026-07-12. Reuses tokens + .gr-ring.
   ============================================================================ */

/* ---- dashboard band strip (the paid hook, front and centre) ---- */
.gr-dash-band{
  display:flex; align-items:center; gap:16px; margin-top:14px;
  padding:14px 20px; border-radius:16px; text-decoration:none;
  background:linear-gradient(115deg, rgba(139,109,255,.16), rgba(78,224,242,.10));
  border:1px solid var(--card-border-hi);
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.gr-dash-band:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -22px rgba(78,224,242,.5); }
.gdb-band-num{ font-size:26px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:9px; white-space:nowrap; }
.gdb-band-num .gdb-to{ color:var(--muted); font-size:18px; }
.gdb-band-num b{ background:var(--gr-grad-2); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gr-dash-band .gdb-copy{ display:flex; flex-direction:column; min-width:0; flex:1; }
.gr-dash-band .gdb-copy b{ font-size:14px; font-weight:800; color:var(--text); }
.gr-dash-band .gdb-copy span{ font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; }
.gdb-go{ font-size:20px; color:var(--cyan); }

/* ---- band page ---- */
.gr-band-wrap{ max-width:960px; margin:0 auto; padding:4px 26px 70px; }
.gbb-hero{ display:grid; grid-template-columns:1.4fr 1fr; gap:28px; align-items:center; margin-top:14px; }
.gbb-band{
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:22px; border-radius:22px;
  background:var(--card-bg-soft); border:1px solid var(--card-border);
}
.gbb-band-now, .gbb-band-next{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px; }
.gbb-lbl{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.gbb-num{ font-size:52px; font-weight:800; line-height:1; color:var(--text); }
.gbb-num.is-target{ background:var(--gr-grad-2); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gbb-cap{ font-size:11.5px; color:var(--muted); max-width:130px; line-height:1.35; }
.gbb-arrow{ font-size:26px; color:var(--muted); }

/* lever meters */
.gbb-lever-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.gbb-lever{ display:flex; gap:16px; align-items:center; padding:20px; border-radius:18px; background:var(--card-bg-soft); border:1px solid var(--card-border); }
.gbb-lever .gr-ring::after{ background:var(--card-bg-soft); }
.gbb-lever-copy{ display:flex; flex-direction:column; gap:3px; }
.gbb-lever-copy b{ font-size:16px; font-weight:800; color:var(--text); }
.gbb-lever-copy > span{ font-size:12.5px; color:var(--muted); }
.gbb-lever-copy p{ font-size:12.5px; color:var(--muted); line-height:1.5; margin:6px 0 0; }
.gbb-lever-copy p b{ color:var(--text); }

.gbb-cta{ text-align:center; margin-top:26px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.gbb-train{ position:relative; overflow:hidden; }
.gbb-train::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); transform:translateX(-120%); transition:transform .7s; }
.gbb-train:hover::after{ transform:translateX(120%); }
.gbb-cta-note{ font-size:12.5px; color:var(--muted); }

.gbb-weak-chips{ display:flex; gap:8px; flex-wrap:wrap; }

/* structure ladder */
.bl-groups{ display:flex; flex-direction:column; gap:16px; max-width:680px; margin:0 auto; }
.bl-group{ background:var(--card-bg-soft); border:1px solid var(--card-border); border-radius:18px; padding:16px 18px; }
.bl-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.bl-head b{ display:block; font-size:15px; font-weight:800; color:var(--text); }
.bl-head span{ font-size:12.5px; color:var(--muted); }
.bl-tag{ font-size:12px; font-weight:800; padding:5px 11px; border-radius:999px; white-space:nowrap; }
.bl-tag[data-band="6"]{ color:var(--cyan);   background:rgba(78,224,242,.14); }
.bl-tag[data-band="7"]{ color:var(--on-lime); background:var(--lime); }
.bl-tag[data-band="8"]{ color:var(--violet); background:rgba(139,109,255,.18); }
.bl-rows{ display:flex; flex-direction:column; }
.bl-row{ display:flex; align-items:center; gap:11px; padding:9px 6px; border-radius:10px; text-decoration:none; transition:background .2s; }
.bl-row:hover{ background:var(--chip-bg-hover); }
.bl-dot{ width:9px; height:9px; border-radius:50%; background:var(--gr-heat, var(--muted)); flex:0 0 9px; }
.bl-name{ flex:1; font-size:14px; font-weight:600; color:var(--text); }
.bl-pct{ font-size:12.5px; font-weight:700; color:var(--muted); }

/* ---- transformation drill card ---- */
.grp-xform .grp-xf-given{ margin:4px 0 14px; display:flex; flex-direction:column; gap:8px; }
.grp-xform .xf-line{
  padding:11px 15px; border-radius:12px; font-size:15.5px; color:var(--text);
  background:var(--card-bg-soft); border:1px dashed var(--card-border-hi);
}
.grp-xform .grp-hint{ color:var(--cyan); }

/* ---- placement-result band banner ---- */
.gr-pl-band{
  display:flex; align-items:center; gap:16px; margin:20px 0 8px;
  padding:16px 20px; border-radius:16px; text-decoration:none;
  background:linear-gradient(115deg, rgba(139,109,255,.16), rgba(78,224,242,.10));
  border:1px solid var(--card-border-hi); transition:transform .25s, box-shadow .25s;
}
.gr-pl-band:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -22px rgba(78,224,242,.5); }
.plb-num{ font-size:34px; font-weight:800; color:var(--text); }
.plb-copy{ display:flex; flex-direction:column; flex:1; }
.plb-copy b{ font-size:14px; font-weight:800; color:var(--text); }
.plb-copy span{ font-size:12.5px; color:var(--muted); }
.plb-go{ font-size:20px; color:var(--cyan); }

@media (max-width:820px){
  .gbb-hero{ grid-template-columns:1fr; }
  .gbb-lever-grid{ grid-template-columns:1fr; }
  .gbb-lever{ flex-direction:row; }
}
@media (prefers-reduced-motion:reduce){
  .gbb-train::after{ display:none; }
}

/* ============================================================================
   PHASE 3 — hub tools, L1-error landing, comparison hub/reader. 2026-07-12.
   ============================================================================ */

/* ---- hub "toolkit" tiles ---- */
.gr-tools-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.gr-tool-card{
  display:flex; flex-direction:column; gap:8px; padding:22px 20px; border-radius:20px;
  text-decoration:none; position:relative; overflow:hidden;
  background:var(--card-bg-soft); border:1px solid var(--card-border);
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.gr-tool-card[data-hue="violet"]{ --tc:var(--violet); }
.gr-tool-card[data-hue="cyan"]  { --tc:var(--cyan); }
.gr-tool-card[data-hue="lime"]  { --tc:var(--lime); }
.gr-tool-card::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--tc); opacity:.85; }
.gr-tool-card:hover{ transform:translateY(-4px); border-color:var(--card-border-hi); box-shadow:0 24px 50px -26px var(--tc); }
.gr-tool-card .gt-ico{ font-size:28px; line-height:1; }
.gr-tool-card b{ font-size:17px; font-weight:800; color:var(--text); }
.gr-tool-card > span:not(.gt-ico):not(.gt-go){ font-size:13px; color:var(--muted); line-height:1.55; }
.gr-tool-card .gt-go{ margin-top:auto; font-size:13px; font-weight:700; color:var(--tc); }

/* ---- L1-error landing ---- */
.gr-l1-wrap, .gr-cmp-wrap{ max-width:960px; margin:0 auto; padding:4px 26px 70px; }
.gl1-hero{ margin-top:14px; }
.gl1-start{ margin-top:18px; }
.gl1-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.gl1-card{
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  padding:18px; border-radius:16px; cursor:pointer; text-align:left;
  background:var(--card-bg-soft); border:1px solid var(--card-border); color:var(--text);
  transition:transform .2s, border-color .25s;
}
.gl1-card:hover{ transform:translateY(-3px); border-color:var(--card-border-hi); }
.gl1-count{ font-size:12px; font-weight:800; color:var(--on-lime); background:var(--lime); padding:2px 10px; border-radius:999px; }
.gl1-label{ font-size:15.5px; font-weight:700; }
.gl1-go{ font-size:12.5px; color:var(--cyan); font-weight:700; margin-top:2px; }

/* the category badge inside an L1 trainer card */
.grp-l1 .grp-l1-cat{
  display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.04em;
  color:var(--cyan); background:rgba(78,224,242,.12); padding:4px 11px; border-radius:999px; margin-bottom:12px;
}

/* ---- comparison hub ---- */
.gcmp-hero{ margin-top:14px; }
.gcmp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.gcmp-card{
  display:flex; flex-direction:column; gap:10px; padding:20px; border-radius:18px; text-decoration:none;
  background:var(--card-bg-soft); border:1px solid var(--card-border); transition:transform .2s, border-color .25s;
}
.gcmp-card:hover{ transform:translateY(-3px); border-color:var(--card-border-hi); }
.gcmp-vs{ display:flex; align-items:center; gap:10px; font-size:16px; font-weight:800; color:var(--text); flex-wrap:wrap; }
.gcmp-vs i{ font-style:normal; font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; padding:2px 8px; border-radius:999px; background:var(--card-bg); }
.gcmp-rule{ font-size:13px; color:var(--muted); line-height:1.55; }
.gcmp-go{ margin-top:auto; font-size:12.5px; font-weight:700; color:var(--cyan); }

/* ---- comparison reader (side by side) ---- */
.gcmp-two{ display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch; margin-top:16px; }
.gcmp-side{ padding:22px; border-radius:18px; background:var(--card-bg-soft); border:1px solid var(--card-border); border-top:3px solid var(--sh, var(--muted)); }
.gcmp-side[data-hue="cyan"]{ --sh:var(--cyan); }
.gcmp-side[data-hue="lime"]{ --sh:var(--lime); }
.gcs-label{ font-size:18px; font-weight:800; color:var(--text); margin-bottom:8px; }
.gcs-when{ font-size:13.5px; color:var(--muted); line-height:1.6; margin-bottom:12px; }
.gcs-ex .ex{ font-size:14.5px; color:var(--text); padding:7px 0; border-top:1px solid var(--card-border); }
.gcs-ex .ex b{ color:var(--lime); font-weight:700; }
.gcmp-mid{ display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:var(--muted); text-transform:uppercase; padding:0 16px; }
.gcmp-rule-box{ margin-top:16px; padding:18px 22px; border-radius:16px; background:linear-gradient(115deg, rgba(198,242,78,.10), var(--card-bg-soft)); border:1px solid var(--card-border-hi); }
.gcmp-rule-box .grb-lbl{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--lime); }
.gcmp-rule-box p{ margin:6px 0 0; font-size:15.5px; color:var(--text); font-weight:600; line-height:1.5; }
.gcmp-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }

@media (max-width:760px){
  .gr-tools-grid{ grid-template-columns:1fr; }
  .gcmp-two{ grid-template-columns:1fr; gap:12px; }
  .gcmp-mid{ padding:4px 0; }
}

/* ============================================================================
   PREMIUM GATING — paywall, locks, upsell, plan pill. 2026-07-12.
   ============================================================================ */
.gr-plan-pill{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:800;
  padding:4px 12px; border-radius:999px; text-decoration:none;
  color:var(--muted); background:var(--card-bg-soft); border:1px solid var(--card-border);
  transition:border-color .2s, color .2s;
}
.gr-plan-pill:hover{ border-color:var(--card-border-hi); color:var(--text); }
.gr-plan-pill.is-premium{ color:var(--on-lime); background:var(--gr-grad-2); border:none; }
.gr-dash-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* small premium star lock on gated cards */
.gr-lock{ display:inline-block; color:var(--gold); font-size:12px; }
.gl1-card.is-locked, .gcmp-card.is-locked{ opacity:.72; }
.gl1-card.is-locked .gl1-count{ background:var(--card-border); color:var(--muted); }
.gl1-card.is-locked .gl1-go, .gcmp-card.is-locked .gcmp-go{ color:var(--gold); }
.gl1-card.is-locked:hover, .gcmp-card.is-locked:hover{ opacity:1; }

/* full paywall card */
.gr-paywall{
  max-width:520px; margin:40px auto 0; text-align:center;
  padding:34px 30px; border-radius:24px;
  background:linear-gradient(160deg, rgba(139,109,255,.14), rgba(78,224,242,.08), var(--card-bg));
  border:1px solid var(--card-border-hi);
  box-shadow:0 30px 70px -34px rgba(139,109,255,.5);
}
.gpw-badge{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.04em;
  color:var(--on-lime); background:var(--gr-grad-2); padding:5px 14px; border-radius:999px; margin-bottom:14px;
}
.gr-paywall h2{ font-size:24px; font-weight:800; color:var(--text); margin:0 0 8px; }
.gr-paywall > p{ color:var(--muted); line-height:1.6; margin:0 auto 18px; max-width:400px; }
.gpw-list{ list-style:none; padding:0; margin:0 auto 22px; max-width:380px; text-align:left; display:flex; flex-direction:column; gap:9px; }
.gpw-list li{ position:relative; padding-left:28px; font-size:14px; color:var(--text); line-height:1.45; }
.gpw-list li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--lime); font-weight:800; }
.gpw-list li b{ color:var(--text); font-weight:800; }
.gpw-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* end-of-taste upsell inside the results screen */
.grp-end-upsell{
  max-width:440px; margin:4px auto 20px; padding:18px 22px; border-radius:16px; text-align:center;
  background:linear-gradient(135deg, rgba(139,109,255,.14), var(--card-bg-soft));
  border:1px solid var(--card-border-hi);
}
.grp-end-upsell p{ font-size:13.5px; color:var(--muted); line-height:1.55; margin:10px 0 14px; }
.grp-end-upsell p b{ color:var(--text); }

/* ============================================================================
   INTERACTIVE TENSE TIMELINE — big animated "where the action sits vs now".
   Marks draw in on entrance + on Replay (toggle .is-drawn). 2026-07-12.
   ============================================================================ */
.gr-tline{ --tl:var(--cyan); margin:2px 0 24px; }
.gtl-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.gtl-replay{ background:transparent; border:1px solid var(--card-border-hi); color:var(--muted); font-size:12px; font-weight:700; padding:5px 13px; border-radius:999px; cursor:pointer; transition:color .2s, border-color .2s; }
.gtl-replay:hover{ color:var(--text); border-color:var(--tl); }
.gtl-track{ position:relative; height:76px; }
.gtl-axis{ position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; background:var(--card-border-hi); border-radius:2px; }
.gtl-now{ position:absolute; left:50%; top:10px; bottom:24px; width:2px; transform:translateX(-50%); background:var(--text); opacity:.45; }
.gtl-now b{ position:absolute; top:-17px; left:50%; transform:translateX(-50%); font-size:9px; font-weight:800; letter-spacing:.12em; color:var(--muted); white-space:nowrap; }
.gtl-now::after{ content:""; position:absolute; left:50%; top:50%; width:10px; height:10px; border-radius:50%; background:var(--text); opacity:.35; animation:gtlPulse 2.6s ease-out infinite; }
.gtl-zone{ position:absolute; bottom:0; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); opacity:.55; }
.gtl-past{ left:0; } .gtl-future{ right:0; }
.gtl-marks i{ position:absolute; }
.gtl-seg{ top:50%; left:var(--l); width:var(--w); height:9px; margin-top:-4.5px; background:var(--tl); border-radius:6px; box-shadow:0 0 20px -3px var(--tl); }
.gtl-arr{ top:50%; left:var(--l); width:var(--w); height:3px; margin-top:-1.5px; background:linear-gradient(90deg, var(--tl), color-mix(in srgb, var(--tl) 10%, transparent)); }
.gtl-arr::after{ content:""; position:absolute; right:-2px; top:50%; transform:translateY(-50%); border-left:8px solid var(--tl); border-top:5px solid transparent; border-bottom:5px solid transparent; }
.gtl-dot{ top:50%; left:var(--x); width:17px; height:17px; margin:-8.5px 0 0 -8.5px; border-radius:50%; background:var(--tl); box-shadow:0 0 18px -2px var(--tl); }
.gtl-dot.is-hollow{ background:var(--bg); border:3px solid var(--tl); box-shadow:none; }
.gtl-dot.is-small{ width:11px; height:11px; margin:-5.5px 0 0 -5.5px; }
.gtl-track.is-drawn .gtl-seg{ transform-origin:left center; animation:gtlGrow .6s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:var(--d,0ms); }
.gtl-track.is-drawn .gtl-arr{ transform-origin:left center; animation:gtlGrow .5s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:var(--d,0ms); }
.gtl-track.is-drawn .gtl-dot{ animation:gtlPop .5s cubic-bezier(.2,1.5,.4,1) backwards; animation-delay:var(--d,0ms); }
@keyframes gtlGrow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes gtlPop{ from{ transform:scale(0); opacity:0; } to{ transform:scale(1); opacity:1; } }
@keyframes gtlPulse{ 0%{ transform:translate(-50%,-50%) scale(.5); opacity:.45; } 100%{ transform:translate(-50%,-50%) scale(4); opacity:0; } }
.gtl-cap{ margin-top:18px; font-size:15px; color:var(--text); font-weight:600; line-height:1.5; }
.gtl-ex{ margin-top:7px; font-size:14.5px; color:var(--muted); }
.gtl-ex b{ color:var(--tl); font-weight:700; }
@media (prefers-reduced-motion:reduce){
  .gtl-track.is-drawn .gtl-seg, .gtl-track.is-drawn .gtl-arr, .gtl-track.is-drawn .gtl-dot{ animation:none !important; }
  .gtl-now::after{ animation:none !important; }
}

/* ============================================================================
   BAND 5/7/9 PROGRESSION PANEL (topic Learn tab). 2026-07-12.
   ============================================================================ */
.gr-bandex .num.is-star{ background:var(--gr-grad-2); color:var(--on-lime); }
.gbx-idea{ color:var(--muted); font-size:14.5px; margin:0 0 14px; }
.gbx-idea b{ color:var(--text); font-weight:700; }
.gbx-rows{ display:flex; flex-direction:column; gap:10px; }
.gbx-row{ display:flex; gap:14px; align-items:flex-start; padding:14px 16px; border-radius:14px;
  background:var(--card-bg-soft); border:1px solid var(--card-border); border-left:3px solid var(--bxh, var(--muted)); }
.gbx-row[data-hue="pink"]{ --bxh:var(--pink); }
.gbx-row[data-hue="cyan"]{ --bxh:var(--cyan); }
.gbx-row[data-hue="lime"]{ --bxh:var(--lime); }
.gbx-row p{ margin:0; font-size:15px; line-height:1.55; color:var(--text); }
.gbx-tag{ flex:0 0 auto; font-size:11.5px; font-weight:800; padding:4px 11px; border-radius:999px; white-space:nowrap;
  color:var(--bxh); background:color-mix(in srgb, var(--bxh) 15%, transparent); }
.gbx-note{ margin-top:14px; font-size:13px; color:var(--muted); line-height:1.55; }
.gbx-note b{ color:var(--text); } .gbx-note a{ color:var(--cyan); font-weight:700; text-decoration:none; }

/* ============================================================================
   ERROR-HUNT / PROOFREAD + 4th tool tile. 2026-07-12.
   ============================================================================ */
.gr-tools-grid{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.gr-tool-card[data-hue="gold"]{ --tc:var(--gold); }

.pf-card{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:20px; padding:24px 24px 20px; animation:grpCardIn .4s cubic-bezier(.2,.7,.2,1) backwards; }
.pf-head{ display:flex; align-items:center; gap:11px; margin-bottom:16px; flex-wrap:wrap; }
.pf-head b{ font-size:16px; font-weight:800; color:var(--text); }
.pf-level{ font-size:11px; font-weight:800; color:var(--violet); background:rgba(139,109,255,.16); padding:3px 10px; border-radius:999px; }
.pf-hint{ margin-left:auto; font-size:12.5px; color:var(--muted); font-weight:600; }
.pf-text{ font-size:18px; line-height:2.1; color:var(--text); }
.pf-w{ font:inherit; color:inherit; background:transparent; border:none; padding:2px 3px; border-radius:6px; cursor:pointer; transition:background .15s, color .15s; border-bottom:2px solid transparent; }
.pf-w:hover{ background:var(--chip-bg-hover); }
.pf-w.picked{ background:rgba(244,201,93,.2); border-bottom-color:var(--gold); }
.pf-w.locked{ cursor:default; }
.pf-w.ok{ background:rgba(198,242,78,.22); border-bottom-color:var(--lime); color:var(--text); }
.pf-w.missed{ background:rgba(244,201,93,.18); border-bottom:2px dashed var(--gold); }
.pf-w.wrong{ background:rgba(255,107,107,.16); border-bottom-color:#ff6b6b; text-decoration:line-through; }
.pf-report{ margin-top:18px; padding:16px 18px; border-radius:14px; background:var(--card-bg-soft); border:1px solid var(--card-border); }
.pf-score{ font-size:14px; font-weight:800; color:var(--text); margin-bottom:10px; }
.pf-report ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.pf-report li{ font-size:14px; color:var(--text); line-height:1.5; }
.pf-report li small{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
.pf-x{ color:#ff8a8a; font-weight:700; text-decoration:line-through; }
.pf-fix{ color:var(--lime); font-weight:700; }

/* ============================================================================
   BAND-OVER-TIME chart (Band Bridge). 2026-07-13.
   ============================================================================ */
.gbb-chart-wrap{ position:relative; background:var(--card-bg-soft); border:1px solid var(--card-border); border-radius:18px; padding:20px; overflow:hidden; }
.gbb-chart-svg{ width:100%; height:auto; display:block; }
.gch-grid{ stroke:var(--card-border); stroke-width:1; stroke-dasharray:4 6; }
.gch-lbl-b{ fill:var(--muted); font-size:11px; font-weight:700; }
.gch-line{ fill:none; stroke:var(--lime); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 6px 14px rgba(198,242,78,.35)); animation:gchDraw 1.3s cubic-bezier(.2,.7,.2,1) forwards; stroke-dasharray:2000; stroke-dashoffset:2000; }
.gch-area{ fill:url(#gchGrad); opacity:.22; }
.gch-dot{ fill:var(--lime); stroke:var(--bg); stroke-width:2; opacity:0; animation:gchDot .35s ease-out forwards; animation-delay:1.1s; }
.gch-empty{ fill:var(--muted); font-size:14px; font-weight:600; }
.gch-delta.up{ color:var(--lime); } .gch-delta.down{ color:var(--pink); }
@keyframes gchDraw{ to{ stroke-dashoffset:0; } }
@keyframes gchDot{ to{ opacity:1; } }
.gbb-chart-svg::before{ content:""; }
.gbb-chart-svg defs, .gbb-chart-svg linearGradient{ display:block; }
.gbb-chart-wrap.is-locked .gbb-chart-svg{ filter:blur(6px) saturate(.6); opacity:.55; }
.gbb-chart-lock{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:22px; text-align:center; background:linear-gradient(135deg, rgba(139,109,255,.12), rgba(78,224,242,.06)); }
.gbb-chart-lock p{ font-size:13px; color:var(--muted); margin:2px 0 6px; max-width:340px; }
@media (prefers-reduced-motion:reduce){ .gch-line, .gch-dot{ animation:none !important; stroke-dashoffset:0 !important; opacity:1 !important; } }

/* ============================================================================
   WEEKLY LEADERBOARD — /grammar/leaderboard. 2026-07-13.
   ============================================================================ */
.gr-lb-wrap{ max-width:720px; margin:0 auto; padding:4px 0 70px; }
.glb-hero{ margin-top:14px; }
.glb-you{ margin-top:14px; font-size:14px; color:var(--muted); }
.glb-you b{ color:var(--text); font-weight:800; font-size:16px; }
.glb-panel{ background:var(--card-bg-soft); border:1px solid var(--card-border); border-radius:20px; padding:16px; }
.glb-skel{ height:44px; background:linear-gradient(90deg, transparent, var(--card-border), transparent); background-size:200% 100%; animation:glbSkel 1.4s linear infinite; border-radius:10px; }
@keyframes glbSkel{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
.glb-top{ display:flex; flex-direction:column; gap:6px; }
.glb-row{ display:grid; grid-template-columns:60px 1fr auto; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; transition:background .2s, transform .2s; }
.glb-row:hover{ background:var(--chip-bg-hover); }
.glb-row.is-podium{ background:linear-gradient(90deg, rgba(244,201,93,.10), transparent); }
.glb-row.is-you{ background:linear-gradient(90deg, rgba(198,242,78,.14), transparent); border:1px solid rgba(198,242,78,.35); }
.glb-rank{ font-size:15px; font-weight:800; color:var(--muted); }
.glb-row.is-podium .glb-rank{ font-size:22px; color:var(--gold); }
.glb-name{ font-size:14.5px; font-weight:700; color:var(--text); }
.glb-xp{ font-size:13.5px; color:var(--muted); }
.glb-xp b{ color:var(--lime); font-weight:800; }
.glb-me{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--card-border-hi); }
.glb-me-lbl{ font-size:11px; font-weight:800; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; margin-bottom:6px; }
.glb-foot{ margin-top:14px; font-size:12px; color:var(--muted); text-align:center; }
.glb-empty{ text-align:center; padding:36px 20px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.glb-empty .glb-ico{ font-size:36px; }
.glb-empty h3{ font-size:19px; font-weight:800; margin:6px 0 0; color:var(--text); }
.glb-empty p{ color:var(--muted); max-width:400px; line-height:1.55; margin:0 0 10px; }

/* ============================================================================
   THE GRAMMAR COURSE — contents page, unit reader, unit nav. 2026-07-13.
   ============================================================================ */
/* hub banner */
.gr-course-cta{ display:flex; align-items:center; gap:16px; margin-top:14px; padding:16px 22px; border-radius:18px; text-decoration:none;
  background:linear-gradient(115deg, rgba(198,242,78,.10), rgba(139,109,255,.08)); border:1px solid var(--card-border-hi); transition:transform .25s, box-shadow .25s; }
.gr-course-cta:hover{ transform:translateY(-2px); box-shadow:0 20px 44px -24px rgba(198,242,78,.5); }
.gcc-ico{ font-size:30px; }
.gr-course-cta .gcc-copy{ display:flex; flex-direction:column; flex:1; min-width:0; }
.gr-course-cta .gcc-copy b{ font-size:16px; font-weight:800; color:var(--text); }
.gr-course-cta .gcc-copy span{ font-size:12.5px; color:var(--muted); }
.gcc-go{ font-size:14px; font-weight:800; color:var(--lime); white-space:nowrap; }

/* contents page */
.gr-course-wrap{ max-width:900px; margin:0 auto; padding:4px 0 70px; }
.crs-hero{ display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; margin-top:14px; }
.crs-actions{ margin-top:18px; }
.crs-hero-ring{ display:flex; align-items:center; gap:14px; }
.crs-hero-ring .gr-ring::after{ background:var(--bg); }
.crs-ring-copy{ display:flex; flex-direction:column; }
.crs-ring-copy b{ font-size:18px; font-weight:800; color:var(--text); }
.crs-ring-copy span{ font-size:12.5px; color:var(--muted); }
.crs-search{ margin:26px 0 18px; }
.crs-search input{ width:100%; padding:13px 18px; border-radius:14px; background:var(--card-bg-soft); border:1px solid var(--card-border); color:var(--text); font:inherit; font-size:15px; }
.crs-search input:focus{ outline:none; border-color:var(--card-border-hi); }
.crs-toc{ display:flex; flex-direction:column; gap:16px; }
.crs-sec{ background:var(--card-bg-soft); border:1px solid var(--card-border); border-radius:18px; padding:14px 16px; }
.crs-sec-head{ display:flex; align-items:center; gap:12px; margin-bottom:8px; padding:2px 4px; }
.crs-sec-n{ font-size:20px; font-weight:800; color:var(--card-border-hi); font-variant-numeric:tabular-nums; }
.crs-sec-head h3{ font-size:15.5px; font-weight:800; color:var(--text); margin:0; }
.crs-sec-head span{ font-size:12px; color:var(--muted); }
.crs-rows{ display:flex; flex-direction:column; }
.crs-row{ display:grid; grid-template-columns:38px 1fr 24px; align-items:center; gap:10px; padding:9px 8px; border-radius:10px; text-decoration:none; transition:background .15s; }
.crs-row:hover{ background:var(--chip-bg-hover); }
.crs-num{ font-size:13px; font-weight:800; color:var(--muted); font-variant-numeric:tabular-nums; text-align:center; }
.crs-name{ font-size:14.5px; color:var(--text); font-weight:600; display:flex; align-items:center; gap:8px; }
.crs-lite{ font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--violet); background:rgba(139,109,255,.14); padding:2px 7px; border-radius:999px; }
.crs-tick{ text-align:center; font-weight:800; }
.crs-row[data-state="done"] .crs-tick{ color:var(--lime); }
.crs-row[data-state="done"] .crs-num{ color:var(--lime); }
.crs-row[data-state="started"] .crs-tick{ color:var(--cyan); }
.crs-noresult{ text-align:center; color:var(--muted); padding:24px; font-size:14px; }

/* unit nav bar */
.gr-unitnav{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 14px; margin-bottom:18px; border-radius:14px; background:var(--card-bg-soft); border:1px solid var(--card-border); }
.gun-course{ font-size:12.5px; font-weight:700; color:var(--muted); text-decoration:none; padding:5px 11px; border-radius:999px; border:1px solid var(--card-border-hi); }
.gun-course:hover{ color:var(--text); }
.gun-pos{ font-size:13px; color:var(--muted); flex:1; }
.gun-pos b{ color:var(--text); font-weight:800; } .gun-pos span{ opacity:.7; }
.gun-btns{ display:flex; gap:8px; }
.gun-btn{ font-size:12.5px; font-weight:700; color:var(--text); text-decoration:none; padding:6px 13px; border-radius:999px; border:1px solid var(--card-border-hi); transition:transform .2s, border-color .2s; }
.gun-btn:hover{ transform:translateY(-1px); border-color:var(--lime); }
.gun-btn.is-next{ background:var(--lime); color:var(--on-lime); border:none; }
.gun-btn.is-off{ opacity:.35; cursor:default; }

/* unit reader */
.gr-unit-wrap{ max-width:760px; margin:0 auto; padding:4px 26px 70px; }
.gr-unit-head{ margin-bottom:8px; }
.gr-unit-intro{ margin-bottom:18px; }
.gr-unit-ex-list{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.gr-unit-ex-list .ex{ padding:9px 14px; border-radius:10px; background:var(--card-bg-soft); border:1px solid var(--card-border); font-size:14.5px; color:var(--text); }
.gr-unit-ex-list .ex b{ color:var(--lime); font-weight:700; }
.gr-unit-ex{ margin-top:24px; }
.gr-unit-ex-h{ display:flex; align-items:center; gap:12px; font-size:18px; font-weight:800; color:var(--text); margin-bottom:14px; }
.gr-unit-ex-h .num{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--gr-grad-2); color:var(--on-lime); font-size:15px; }

@media (max-width:760px){ .crs-hero{ grid-template-columns:1fr; } }

/* ============================================================================
   EXPLANATION POLISH + ANIMATION (Phase 2, 2026-07-13)
   ============================================================================ */
/* Learn-tab "when we use it" cases fade + slide in, staggered. */
.gr-use{ animation:grUseIn .5s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:calc(var(--i,0) * 85ms); }
@keyframes grUseIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
/* a soft sweep of light across the number badge on hover */
.use-num{ overflow:hidden; }
.use-num::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%); transform:translateX(-130%); }
.gr-use:hover .use-num::after{ transform:translateX(130%); transition:transform .6s; }
/* lift the example chips slightly on hover of their card */
.gr-use:hover .use-examples .ex{ border-left-color:var(--cyan); }

/* the intro "key idea" box — gentle pulse of its accent on first paint */
.gi-key{ transition:border-color .3s; }
.gi-key-lbl{ animation:giKeyGlow 3s ease-in-out 1; }
@keyframes giKeyGlow{ 0%,100%{ filter:none; } 45%{ filter:brightness(1.25); } }

/* accordion form boxes (aff / neg / q) — reveal + hover */
.gr-fb-form{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.gr-fb-form .f{
  flex:1 1 160px; display:flex; align-items:center; gap:8px;
  padding:9px 12px; border-radius:10px; font-size:13px; color:var(--text);
  background:var(--card-bg); border:1px solid var(--card-border);
  transition:border-color .2s, transform .2s;
}
.gr-fb-form .f:hover{ border-color:var(--card-border-hi); transform:translateY(-1px); }
.gr-fb-form .f b{ font-size:13px; font-weight:800; width:18px; text-align:center; color:var(--violet); }
.gr-fb-rule-wrap.is-open .gr-fb-form .f{ animation:grCaseIn .45s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:.34s; }
/* accordion signal chips */
.gr-fb-signals{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.gr-fb-signals span{ font-size:12px; font-weight:600; color:var(--cyan); background:rgba(78,224,242,.10); border:1px solid rgba(78,224,242,.22); padding:4px 10px; border-radius:999px; }
.gr-fb-learn{ margin-top:14px; }

@media (prefers-reduced-motion:reduce){
  .gr-use, .gr-fb-rule-wrap.is-open .gr-fb-cases li, .gr-fb-rule-wrap.is-open .gr-fb-form .f, .gi-key-lbl{ animation:none !important; }
  .gr-fb-rule-wrap{ transition:none !important; }
  .use-num::after{ display:none; }
}

/* ============================================================================
   GRAMMAR COURSE — two levels (Elementary / Intermediate). 2026-07-13.
   Red = Elementary, Blue = Intermediate (a nod to the two-book system).
   ============================================================================ */
:root{ --lv-el:#ff7a6b; --lv-int:#5aa9ff; }
.crs-levels{ display:flex; gap:10px; flex-wrap:wrap; margin:22px 0 4px; }
.crs-lvl-btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:9px 16px; border-radius:999px; font:inherit; font-size:14px; font-weight:700;
  color:var(--muted); background:var(--card-bg-soft); border:1px solid var(--card-border);
  transition:border-color .2s, color .2s, background .2s;
}
.crs-lvl-btn span{ font-size:11px; font-weight:700; opacity:.7; }
.crs-lvl-btn b{ font-size:12px; font-weight:800; padding:1px 7px; border-radius:999px; background:var(--card-border); color:var(--muted); }
.crs-lvl-btn:hover{ color:var(--text); }
.crs-lvl-btn.is-on{ color:var(--text); border-color:var(--card-border-hi); }
.crs-lvl-btn.is-on[data-lv="el"]{ background:rgba(255,122,107,.12); border-color:rgba(255,122,107,.4); }
.crs-lvl-btn.is-on[data-lv="el"] b{ background:var(--lv-el); color:#2a0d0a; }
.crs-lvl-btn.is-on[data-lv="int"]{ background:rgba(90,169,255,.12); border-color:rgba(90,169,255,.4); }
.crs-lvl-btn.is-on[data-lv="int"] b{ background:var(--lv-int); color:#08131f; }
.crs-lvl-btn.is-on[data-crs-level="all"] b{ background:var(--lime); color:var(--on-lime); }

/* per-row level accent + tag */
.crs-num[data-lv="el"]{ box-shadow:inset 0 0 0 2px rgba(255,122,107,.4); }
.crs-num[data-lv="int"]{ box-shadow:inset 0 0 0 2px rgba(90,169,255,.4); }
.crs-row{ grid-template-columns:38px 1fr auto 24px; }
.crs-lv-tag{ font-size:10px; font-weight:800; letter-spacing:.03em; padding:2px 8px; border-radius:999px; }
.crs-lv-tag[data-lv="el"]{ color:var(--lv-el); background:rgba(255,122,107,.13); }
.crs-lv-tag[data-lv="int"]{ color:var(--lv-int); background:rgba(90,169,255,.13); }
/* unit nav + reader level pill */
.gun-lv{ font-size:10.5px; font-weight:800; padding:2px 9px; border-radius:999px; margin-left:6px; }
.gun-lv[data-lv="el"]{ color:var(--lv-el); background:rgba(255,122,107,.13); }
.gun-lv[data-lv="int"]{ color:var(--lv-int); background:rgba(90,169,255,.13); }

/* ============================================================================
   DEEP TEACHING LAYER — contrast · notes · phrases · IELTS band-booster
   (content: 19o-grammar-deep.js · render: 19-grammar.js _hGrContrast/_hGrNotes/
   _hGrPhrases/_hGrIelts). Premium, hue-tinted, staggered-in, reduced-motion safe
   (the #grammar-topic * rule above neutralises the animations).
   ============================================================================ */

/* Shared: every deep block eases up on entry, staggered by --i. */
.gr-deep{ animation:grDeepIn .5s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i,0) * .06s); }
@keyframes grDeepIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* Emoji section badge — keeps the gradient tile, drops the spinning sheen. */
.gr-learn-block h3 .num.is-icon{ font-size:16px; background:linear-gradient(135deg, rgba(139,109,255,.22), rgba(78,224,242,.18)); box-shadow:inset 0 0 0 1px var(--card-border-hi), 0 6px 18px -10px rgba(139,109,255,.5); }
.gr-learn-block h3 .num.is-icon::after{ display:none; }

/* ----- Hear-it speaker button (browser TTS, no API) ----- */
.gr-say{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  display:inline-grid; place-items:center; vertical-align:middle;
  width:22px; height:22px; margin-left:8px; padding:0;
  border-radius:7px; border:1px solid var(--card-border);
  background:rgba(139,109,255,.10); color:var(--violet);
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  flex:0 0 auto;
}
.gr-say:hover{ background:rgba(139,109,255,.20); color:var(--cyan); border-color:var(--card-border-hi); transform:translateY(-1px); }
.gr-say:active{ transform:translateY(0) scale(.92); }
.gr-say.is-playing{ background:var(--gr-grad); color:#fff; border-color:transparent; animation:grSayPulse .65s ease; }
@keyframes grSayPulse{ 0%{ box-shadow:0 0 0 0 rgba(78,224,242,.5); } 100%{ box-shadow:0 0 0 10px rgba(78,224,242,0); } }
:root.no-tts .gr-say{ display:none; }

/* ============================ CONTRAST CARD ============================ */
.gr-contrast .grc-grid{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:0;
  position:relative;
}
.grc-side{
  --h:var(--cyan);
  position:relative; overflow:hidden;
  padding:18px 18px 16px; border-radius:18px;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--h) 12%, transparent), transparent 60%),
    var(--card-bg);
  border:1px solid var(--card-border);
  box-shadow:inset 3px 0 0 var(--h);
}
.grc-side[data-hue="violet"]{ --h:var(--violet); }
.grc-side[data-hue="lime"]{ --h:var(--lime); }
.grc-side[data-hue="pink"]{ --h:#ff7ad9; }
.grc-side[data-hue="gold"]{ --h:var(--gold); }
.grc-head{ display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.grc-sym{
  flex:0 0 auto; display:inline-grid; place-items:center;
  width:30px; height:30px; border-radius:9px; font-weight:800; font-size:14px; color:#fff;
  background:linear-gradient(135deg, var(--h), color-mix(in srgb, var(--h) 55%, #000));
  box-shadow:0 6px 16px -8px var(--h);
}
.grc-head-tx{ display:flex; flex-direction:column; line-height:1.2; }
.grc-label{ font-weight:800; font-size:15.5px; letter-spacing:-.01em; }
.grc-tag{ font-size:11.5px; color:var(--muted); font-style:italic; margin-top:1px; }
.grc-points{ list-style:none; margin:0 0 12px; padding:0; display:grid; gap:7px; }
.grc-points li{
  position:relative; padding-left:20px; font-size:13px; line-height:1.5; color:var(--text);
}
.grc-points li::before{
  content:""; position:absolute; left:2px; top:7px; width:8px; height:8px; border-radius:50%;
  background:var(--h); box-shadow:0 0 0 3px color-mix(in srgb, var(--h) 20%, transparent);
}
.grc-points li i{ color:var(--muted); }
.grc-ex{ display:grid; gap:6px; }
.grc-ex .ex{
  font-size:13px; line-height:1.5; padding:8px 10px; border-radius:9px;
  background:color-mix(in srgb, var(--h) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--h) 18%, transparent);
}
.grc-ex .ex b{ color:var(--h); font-weight:700; }
.grc-ex .ex i{ color:var(--muted); font-style:italic; font-size:12px; }
/* Center VS token */
.grc-vs{ display:grid; place-items:center; padding:0 14px; }
.grc-vs span{
  display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:15px; letter-spacing:.02em;
  color:var(--text); background:var(--bg, rgba(20,16,32,.9));
  border:1.5px solid var(--card-border-hi);
  box-shadow:0 8px 22px -10px rgba(0,0,0,.6), inset 0 0 0 4px color-mix(in srgb, var(--violet) 8%, transparent);
}
/* The rule that separates them */
.grc-rule{
  display:flex; gap:12px; align-items:flex-start; margin-top:16px;
  padding:14px 16px; border-radius:14px;
  background:linear-gradient(135deg, rgba(198,242,78,.10), rgba(78,224,242,.06));
  border:1px solid rgba(198,242,78,.22);
}
.grc-rule-ico{ font-size:18px; line-height:1.3; flex:0 0 auto; }
.grc-rule p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--text); }
.grc-rule b{ color:var(--lime); }

/* ============================ GOOD-TO-KNOW NOTES ============================ */
.grn-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:12px; }
.grn-card{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 15px; border-radius:15px;
  background:var(--card-bg); border:1px solid var(--card-border);
  transition:border-color .2s ease, transform .2s ease;
  animation:grDeepIn .5s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i,0) * .07s + .1s);
}
.grn-card:hover{ border-color:var(--card-border-hi); transform:translateY(-2px); }
.grn-ico{
  flex:0 0 auto; display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px;
  font-size:17px; background:rgba(139,109,255,.12); border:1px solid var(--card-border);
}
.grn-body b{ display:block; font-size:14px; font-weight:700; margin-bottom:3px; letter-spacing:-.01em; }
.grn-body p{ margin:0; font-size:12.8px; line-height:1.55; color:var(--muted); }
.grn-body p b{ display:inline; color:var(--cyan); font-weight:700; }
.grn-body p s{ color:#ff7a89; text-decoration-thickness:2px; }
.grn-body p i{ color:var(--text); font-style:normal; opacity:.85; }

/* ============================ PHRASES TO STEAL ============================ */
.gr-phrases .grp-hint{ font-size:13px; color:var(--muted); margin:0 0 12px; line-height:1.5; }
.gr-chip.is-phrase{
  cursor:pointer; font-weight:600;
  background:linear-gradient(135deg, rgba(198,242,78,.10), rgba(78,224,242,.08));
  border:1px solid rgba(198,242,78,.24); color:var(--text);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.gr-chip.is-phrase:hover{ transform:translateY(-2px); border-color:rgba(198,242,78,.5); box-shadow:0 8px 20px -12px rgba(198,242,78,.6); }
.gr-chip.is-phrase:active{ transform:translateY(0) scale(.97); }
.gr-chip.is-phrase::before{ content:"“"; opacity:.5; margin-right:1px; }
.gr-chip.is-phrase::after{ content:"”"; opacity:.5; margin-left:1px; }
.gr-chip.is-phrase i{ font-style:italic; color:var(--muted); }

/* ============================ IELTS BAND-BOOSTER ============================ */
.gr-ielts{
  position:relative; overflow:hidden; border-radius:22px; padding:22px 22px 20px;
  background:
    radial-gradient(110% 80% at 0% 0%, rgba(198,242,78,.08), transparent 55%),
    radial-gradient(100% 80% at 100% 100%, rgba(139,109,255,.10), transparent 55%),
    var(--card-bg);
  border:1px solid var(--card-border-hi);
}
.gr-ielts > h3{ margin-bottom:12px; }
.gib-where{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:12.8px; color:var(--muted); margin-bottom:16px; line-height:1.5;
}
.gib-where-lbl{
  font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--lime); background:rgba(198,242,78,.12); border:1px solid rgba(198,242,78,.25);
  padding:3px 9px; border-radius:999px;
}
.gib-cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.gib-col-h{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; margin-bottom:9px; }
.gib-ico{ font-size:15px; }
.gib-frames{ display:grid; gap:7px; }
.gib-frames .ex{
  font-size:13px; line-height:1.5; padding:9px 11px; border-radius:10px;
  background:rgba(255,255,255,.03); border:1px solid var(--card-border); border-left:2.5px solid var(--cyan);
}
.gib-frames .ex b{ color:var(--cyan); font-weight:700; }
.gib-desc{
  display:flex; gap:11px; align-items:flex-start; margin-top:16px;
  padding:13px 15px; border-radius:13px;
  background:rgba(139,109,255,.08); border:1px solid rgba(139,109,255,.2);
}
.gib-desc-ico{ color:var(--violet); font-size:12px; margin-top:2px; flex:0 0 auto; }
.gib-desc p{ margin:0; font-size:12.8px; line-height:1.55; color:var(--text); }
.gib-desc b{ color:var(--violet); }
:root[data-theme="light"] .gib-frames .ex{ background:rgba(8,145,178,.05); }

/* ----- Responsive: stack the contrast + IELTS columns ----- */
@media (max-width:720px){
  .gr-contrast .grc-grid{ grid-template-columns:1fr; gap:12px; }
  .grc-vs{ padding:2px 0; }
  .grc-vs span{ width:38px; height:38px; font-size:13px; }
  .gib-cols{ grid-template-columns:1fr; gap:16px; }
}

/* ============================================================================
   THE GAMIFIED LESSON — progress bar · jump-nav · ELI5 opener · checkpoints ·
   completion reward (render: 19-grammar.js _hGrLessonHead/_hGrSimple/
   _hGrCheckpoint/_hGrLessonEnd + _grInitLesson). Reduced-motion safe.
   ============================================================================ */

/* ---- sticky progress header ---- */
.gr-lesson-head{
  /* stacks BELOW the drill tab rail — see the note on .gr-tabs-wrap */
  position:sticky; top:calc(var(--gr-stick-top, 71px) + var(--gr-rail-h, 116px)); z-index:20;
  margin:-6px 0 20px; padding:10px 14px;
  background:color-mix(in srgb, var(--card-bg) 82%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid var(--card-border); border-radius:14px;
  box-shadow:0 8px 24px -18px rgba(0,0,0,.7);
}
.glh-row{ display:flex; align-items:center; gap:10px; }
.glh-bar{ flex:1; height:7px; border-radius:999px; background:rgba(255,255,255,.09); overflow:hidden; }
:root[data-theme="light"] .glh-bar{ background:rgba(15,23,42,.10); }
.glh-fill{ display:block; height:100%; width:0%; border-radius:999px; background:var(--gr-grad-2); transition:width .5s cubic-bezier(.2,.7,.2,1); }
.glh-pct{ font-size:12px; font-weight:800; color:var(--muted); min-width:34px; text-align:right; font-variant-numeric:tabular-nums; }
.glh-nav{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.glh-chip{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  font-size:11.5px; font-weight:600; letter-spacing:.01em;
  padding:4px 10px; border-radius:999px; color:var(--muted);
  background:transparent; border:1px solid var(--card-border);
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.glh-chip:hover{ color:var(--text); border-color:var(--card-border-hi); }
.glh-chip.is-active{ color:#0b0a12; background:var(--lime); border-color:transparent; }
:root[data-theme="light"] .glh-chip.is-active{ color:#fff; background:var(--cyan); }
@media (max-width:760px){ .glh-nav{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; } .glh-chip{ flex:0 0 auto; } }

/* ---- "In plain English" ELI5 opener ---- */
.gr-simple{ margin-top:6px; }
.grs-card{
  position:relative; overflow:hidden; padding:20px 22px;
  border-radius:20px; border:1px solid rgba(198,242,78,.28);
  background:
    radial-gradient(120% 90% at 100% -10%, rgba(198,242,78,.14), transparent 55%),
    radial-gradient(90% 80% at -5% 110%, rgba(78,224,242,.10), transparent 55%),
    var(--card-bg);
  animation:grDeepIn .5s cubic-bezier(.2,.7,.2,1) both;
}
.grs-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.grs-badge{
  font-family:'Bricolage Grotesque','Native Emoji',sans-serif; font-weight:800; font-size:15px;
  padding:5px 12px; border-radius:999px; color:#0b0a12;
  background:linear-gradient(135deg, var(--lime), #a6e34d);
}
.grs-sub{ font-size:12.5px; color:var(--muted); font-style:italic; }
.grs-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.grs-list li{
  position:relative; padding-left:26px; font-size:15px; line-height:1.6; color:var(--text);
  animation:grUseIn .45s ease both;
}
.grs-list li:nth-child(1){ animation-delay:.05s } .grs-list li:nth-child(2){ animation-delay:.11s }
.grs-list li:nth-child(3){ animation-delay:.17s } .grs-list li:nth-child(4){ animation-delay:.23s }
.grs-list li:nth-child(5){ animation-delay:.29s } .grs-list li:nth-child(6){ animation-delay:.35s }
.grs-list li::before{
  content:"→"; position:absolute; left:2px; top:1px; font-weight:800;
  color:var(--lime); background:var(--gr-grad-2); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.grs-list li b{ color:var(--cyan); font-weight:700; }
.grs-list li i{ color:var(--text); opacity:.8; }
.grs-list li s{ color:#ff7a89; text-decoration-thickness:2px; }
.grs-analogy{
  display:flex; gap:12px; align-items:flex-start; margin-top:14px;
  padding:13px 15px; border-radius:14px;
  background:rgba(78,224,242,.07); border:1px solid rgba(78,224,242,.2);
}
.grs-an-ico{ font-size:24px; line-height:1.1; flex:0 0 auto; }
.grs-analogy p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--text); }
.grs-analogy b{ color:var(--cyan); } .grs-analogy i{ color:var(--muted); font-style:italic; }

/* ---- inline quick-check checkpoint ---- */
.gr-checkpoint{
  padding:18px 18px 16px; border-radius:18px;
  border:1px dashed rgba(139,109,255,.35);
  background:radial-gradient(120% 100% at 100% 0%, rgba(139,109,255,.08), transparent 60%), var(--card-bg);
  transition:border-color .3s ease, background .3s ease;
}
.gr-checkpoint > h3{ margin-bottom:6px; }
.gr-checkpoint .grck-hint{ font-size:12.8px; color:var(--muted); margin:0 0 12px; }
.gr-checkpoint.is-answered{ border-style:solid; border-color:rgba(99,210,140,.4); }
.gr-checkpoint.is-answered:not(.is-correct){ border-color:rgba(255,90,110,.4); }
.gr-checkpoint .grp-card{ background:transparent; border:0; padding:0; box-shadow:none; }
.gr-checkpoint .grp-item-topic{ display:none; }
.gr-checkpoint .grp-next-row{ display:none; }

/* ---- lesson finish line ---- */
.gr-lesson-end{ margin-top:30px; }
.gle-card{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:22px 24px; border-radius:20px;
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(139,109,255,.12), transparent 55%),
    radial-gradient(90% 120% at 100% 100%, rgba(78,224,242,.10), transparent 55%),
    var(--card-bg);
  border:1px solid var(--card-border-hi);
  transition:border-color .4s ease, box-shadow .4s ease;
}
.gle-card.is-done{ border-color:rgba(198,242,78,.5); box-shadow:0 0 0 1px rgba(198,242,78,.3), 0 18px 40px -24px rgba(198,242,78,.5); }
.gle-ico{ font-size:34px; line-height:1; flex:0 0 auto; }
.gle-body{ flex:1; min-width:200px; }
.gle-title{ font-family:'Bricolage Grotesque','Native Emoji',sans-serif; font-size:19px; font-weight:800; margin:0 0 4px; letter-spacing:-.01em; }
.gle-sub{ font-size:13px; color:var(--muted); line-height:1.55; margin:0; }
.gle-reward{
  margin-top:10px; display:inline-block; font-size:13px;
  padding:6px 13px; border-radius:999px;
  background:rgba(198,242,78,.14); border:1px solid rgba(198,242,78,.3); color:var(--text);
  animation:grDeepIn .4s ease both;
}
.gle-reward b{ color:var(--lime); }
.gle-cta{ flex:0 0 auto; }
@media (max-width:600px){ .gle-card{ flex-direction:column; align-items:stretch; text-align:center; } .gle-cta{ width:100%; } .gle-body{ min-width:0; } }

/* ============================================================================
   "WATCH IT BUILD" — step-by-step sentence construction (render: _hGrBuildSteps,
   play: _grPlayBuild; content: B() in 19o). Reduced-motion → instant reveal via
   the #grammar-topic * rule above.
   ============================================================================ */
.gr-build{
  margin-top:16px; padding:16px 16px 14px; border-radius:16px;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(78,224,242,.08), transparent 60%),
    var(--card-bg);
  border:1px solid var(--card-border);
}
.grb-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.grb-title{ font-weight:700; font-size:14px; letter-spacing:-.01em; }
.grb-play{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:700; color:#0b0a12;
  padding:6px 14px; border-radius:999px; border:0;
  background:var(--gr-grad-2);
  box-shadow:0 6px 16px -8px rgba(78,224,242,.6);
  transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.grb-play:hover{ transform:translateY(-1px); box-shadow:0 10px 22px -8px rgba(78,224,242,.7); }
.grb-play:active{ transform:translateY(0) scale(.97); }
.grb-play:disabled{ opacity:.55; cursor:default; transform:none; box-shadow:none; }
.grb-play-ico{ font-size:11px; }

.grb-stage{ min-height:96px; display:flex; flex-direction:column; gap:14px; }
.grb-sentence{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  font-size:20px; font-weight:600; line-height:1.5; min-height:38px;
}
.grb-chunk{
  display:inline-block; padding:5px 12px; border-radius:10px;
  background:rgba(255,255,255,.045); border:1px solid var(--card-border);
  opacity:0; transform:translateY(10px) scale(.86);
  transition:opacity .34s ease, transform .34s cubic-bezier(.2,1.3,.35,1), background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
:root[data-theme="light"] .grb-chunk{ background:rgba(15,23,42,.03); }
.grb-chunk b{ color:var(--cyan); font-weight:800; }
.grb-chunk.is-in{ opacity:1; transform:none; }
.grb-chunk.is-active{
  background:linear-gradient(135deg, rgba(198,242,78,.22), rgba(78,224,242,.18));
  border-color:rgba(198,242,78,.5); color:var(--text);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--lime) 18%, transparent), 0 8px 20px -10px rgba(198,242,78,.6);
  transform:translateY(-2px) scale(1.04);
}
.gr-build.is-built .grb-sentence{ }
.gr-build.is-built .grb-chunk{ border-color:rgba(78,224,242,.28); }

.grb-caption{ min-height:24px; font-size:13.5px; color:var(--muted); line-height:1.5; display:flex; align-items:center; gap:9px; }
.grb-caption b{ color:var(--cyan); font-weight:700; }
.grb-caption i{ color:var(--text); font-style:italic; opacity:.85; }
.grb-cap-num{
  flex:0 0 auto; display:inline-grid; place-items:center;
  width:22px; height:22px; border-radius:7px; font-size:12px; font-weight:800; color:#0b0a12;
  background:var(--gr-grad-2);
}
.grb-cap-tx{ flex:1; }
.grb-cap-done{ color:var(--lime); font-weight:700; }

@media (max-width:600px){ .grb-sentence{ font-size:17px; } }

/* ============================================================================
   EXERCISE ARENA  (appended 2026-07-18)
   One motion system for all four topic drills — MCQ, sentence completion,
   mistake fix and word order. Three ideas carry the whole thing:
     1. a HUD "battery" rail whose segments COLOUR per answer, so the strip
        doubles as a live performance map instead of a dumb progress bar;
     2. a question "stage" — an aurora-lit card wrapped in a slow conic sheen;
     3. reward motion — spark bursts, a combo flame, staggered lock-ins.
   Everything below is additive: the older .gr-engine-head/.gr-progress rules
   stay for the placement test, and the new option styling is scoped under
   .gr-q-stage so the placement quiz is untouched.
   ============================================================================*/

/* ---------- the HUD ---------- */
.gr-hud{ margin-bottom:20px; }
.ghud-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px 14px; flex-wrap:wrap; margin-bottom:11px;
}
.ghud-id{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}
.ghud-ico{
  display:inline-grid; place-items:center;
  width:24px; height:24px; border-radius:8px;
  font-size:12px; color:var(--on-lime);
  background:linear-gradient(135deg, var(--lime), #9ad6ff);
  box-shadow:0 6px 16px -8px rgba(198,242,78,.9);
}
.ghud-metrics{ display:inline-flex; align-items:center; gap:8px; }
.ghud-score, .ghud-combo{
  display:inline-flex; align-items:baseline; gap:6px;
  padding:6px 13px; border-radius:999px;
  background:var(--card-bg-soft); border:1px solid var(--card-border);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
}
.ghud-score b, .ghud-combo b{
  font-size:16px; font-weight:800; color:var(--text);
  font-variant-numeric:tabular-nums; line-height:1;
  display:inline-block;
}
.ghud-score small, .ghud-combo small{
  font-size:9.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted);
}
/* score pops — and flashes lime when it actually gained */
.ghud-score b.is-bump{ animation:ghudBump .45s cubic-bezier(.2,.9,.25,1.35); }
.ghud-score b.is-gain{ color:var(--lime); text-shadow:0 0 18px color-mix(in srgb, var(--lime) 55%, transparent); }
@keyframes ghudBump{ 0%{ transform:scale(1); } 42%{ transform:scale(1.42); } 100%{ transform:scale(1); } }

/* the combo flame — only alive at 2+ in a row */
.ghud-combo{ display:none; border-color:color-mix(in srgb, var(--gold) 45%, transparent); background:linear-gradient(135deg, color-mix(in srgb, var(--gold) 18%, transparent), transparent); }
.ghud-combo.is-live{ display:inline-flex; }
.ghud-combo b{ color:var(--gold); }
.ghud-combo .ghud-flame{ font-size:13px; line-height:1; animation:ghudFlicker 1.5s ease-in-out infinite; }
.ghud-combo.is-pop{ animation:ghudComboPop .5s cubic-bezier(.2,.9,.25,1.4); }
@keyframes ghudComboPop{
  0%  { transform:scale(.72) translateY(3px); opacity:0; }
  55% { transform:scale(1.14); opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}
@keyframes ghudFlicker{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.72; transform:scale(1.16) rotate(-6deg); } }

/* the segmented battery rail */
.ghud-rail{ display:flex; align-items:center; gap:14px; }
.ghud-segs{ display:flex; align-items:center; gap:3px; flex:1 1 auto; min-width:0; height:14px; }
.ghud-seg{
  flex:1 1 0; min-width:0; height:8px; border-radius:3px;
  background:var(--chip-bg); border:1px solid var(--card-border);
  transition:background .4s cubic-bezier(.2,.7,.2,1), border-color .4s, transform .4s cubic-bezier(.2,.9,.25,1.3), box-shadow .4s;
}
.ghud-seg.is-hit{
  background:linear-gradient(180deg,#8fe6ac,#3fa96a); border-color:transparent;
  box-shadow:0 0 12px -3px rgba(99,210,140,.85);
  animation:ghudSegLand .5s cubic-bezier(.2,.9,.25,1.4);
}
.ghud-seg.is-miss{
  background:linear-gradient(180deg,#ff9aa8,#e04b62); border-color:transparent;
  box-shadow:0 0 12px -4px rgba(255,90,110,.7);
  animation:ghudSegLand .5s cubic-bezier(.2,.9,.25,1.4);
}
.ghud-seg.is-now{
  background:linear-gradient(180deg, var(--lime), #a4d92f); border-color:transparent;
  transform:scaleY(1.85); box-shadow:0 0 18px -2px color-mix(in srgb, var(--lime) 85%, transparent);
  animation:ghudNow 1.6s ease-in-out infinite;
}
@keyframes ghudSegLand{ 0%{ transform:scaleY(2.1); } 60%{ transform:scaleY(.8); } 100%{ transform:scaleY(1); } }
@keyframes ghudNow{
  0%,100%{ box-shadow:0 0 14px -3px color-mix(in srgb, var(--lime) 70%, transparent); }
  50%    { box-shadow:0 0 24px 0   color-mix(in srgb, var(--lime) 95%, transparent); }
}
.ghud-pos{
  flex:0 0 auto; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}
.ghud-pos b{ font-size:15px; font-weight:800; color:var(--text); }
.ghud-pos i{ font-style:normal; opacity:.45; margin:0 3px; }

/* ---------- the question stage ---------- */
.gr-q-card.gr-q-stage{
  position:relative; isolation:isolate; overflow:hidden;
  padding:26px 28px; border-radius:22px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  box-shadow:0 30px 70px -46px rgba(0,0,0,.85);
}
/* aurora wash — paints above the card background, below the content */
.gr-q-card.gr-q-stage::before{
  content:""; position:absolute; inset:-45%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(36% 40% at 20% 16%, color-mix(in srgb, var(--violet) 30%, transparent), transparent 72%),
    radial-gradient(32% 36% at 84% 10%, color-mix(in srgb, var(--cyan)   26%, transparent), transparent 72%),
    radial-gradient(38% 42% at 70% 94%, color-mix(in srgb, var(--lime)   20%, transparent), transparent 72%);
  filter:blur(22px); opacity:.84;
  animation:grStageDrift 19s ease-in-out infinite alternate;
}
@keyframes grStageDrift{
  0%  { transform:translate3d(0,0,0) scale(1); }
  50% { transform:translate3d(2.5%,-2%,0) scale(1.06); }
  100%{ transform:translate3d(-2%,2.5%,0) scale(1.02); }
}
/* slow conic sheen travelling the border */
.gr-q-card.gr-q-stage::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  pointer-events:none; z-index:2;
  background:conic-gradient(from var(--gang,0deg),
    transparent 0 58%,
    color-mix(in srgb, var(--lime) 90%, transparent) 72%,
    color-mix(in srgb, var(--cyan) 90%, transparent) 82%,
    transparent 94%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:grStageSpin 7s linear infinite;
}
@property --gang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes grStageSpin{ to{ --gang:360deg; } }

.gr-q-card.gr-q-stage .gr-q-stem{
  font-size:19.5px; line-height:1.55; font-weight:650; letter-spacing:-.01em;
  margin-bottom:20px;
}
.gr-q-card.gr-q-stage .gr-q-stem .gap{
  min-width:74px; padding:3px 10px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--violet) 26%, transparent), color-mix(in srgb, var(--cyan) 18%, transparent));
  border-bottom:2px solid var(--violet); border-radius:8px 8px 2px 2px;
  animation:grGapGlow 2.6s ease-in-out infinite;
}
@keyframes grGapGlow{
  0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--violet) 0%, transparent); }
  50%    { box-shadow:0 0 18px -2px color-mix(in srgb, var(--violet) 60%, transparent); }
}

/* ---------- MCQ options (scoped to the stage) ---------- */
.gr-q-stage .gr-mc-opts{ gap:11px; }
.gr-q-stage .gr-mc-opt{
  position:relative;
  padding:15px 18px; border-radius:14px;
  background:var(--card-bg-soft); border:1px solid var(--card-border);
  font-size:15.5px; font-weight:550;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), border-color .24s, background-color .24s, box-shadow .24s, opacity .3s, filter .3s;
}
.gr-q-stage .gr-mc-opt:hover{
  transform:translateX(7px);
  border-color:color-mix(in srgb, var(--lime) 55%, transparent);
  background-color:var(--chip-bg-hover);
  box-shadow:-6px 0 0 -3px color-mix(in srgb, var(--lime) 85%, transparent), 0 16px 34px -22px rgba(0,0,0,.9);
}
.gr-q-stage .gr-mc-opt:active{ transform:translateX(7px) scale(.985); }
.gr-q-stage .gr-mc-opt .key{
  position:relative; flex:0 0 30px; height:30px; border-radius:9px;
  font-size:12.5px; font-weight:800;
  transition:transform .22s cubic-bezier(.2,.9,.25,1.35), background .22s, color .22s, border-color .22s;
}
.gr-q-stage .gr-mc-opt:hover .key{
  transform:scale(1.1) rotate(-5deg);
  background:linear-gradient(135deg, var(--lime), #d8ff7a);
  color:var(--on-lime); border-color:transparent;
}
/* graded states — a light sweep flows across the row that was right */
.gr-q-stage .gr-mc-opt.is-correct{
  border-color:color-mix(in srgb, #63d28c 65%, transparent);
  background-color:color-mix(in srgb, #63d28c 13%, transparent);
  background-image:linear-gradient(100deg, transparent 0%, color-mix(in srgb, #63d28c 34%, transparent) 46%, transparent 92%);
  background-size:230% 100%; background-position:130% 0;
  box-shadow:0 0 0 1px color-mix(in srgb, #63d28c 30%, transparent), 0 18px 40px -26px rgba(99,210,140,.9);
  animation:grFloodSweep .8s ease-out forwards;
}
@keyframes grFloodSweep{ to{ background-position:-40% 0; } }
.gr-q-stage .gr-mc-opt.is-correct .key{
  background:linear-gradient(135deg,#8fe6ac,#3fa96a); border-color:transparent; color:transparent;
}
.gr-q-stage .gr-mc-opt.is-correct .key::after{
  content:"✓"; position:absolute; inset:0; display:grid; place-items:center;
  color:#08301c; font-size:15px; font-weight:900;
  animation:grTickIn .4s cubic-bezier(.2,.9,.25,1.5) both;
}
@keyframes grTickIn{ 0%{ transform:scale(0) rotate(-30deg); } 100%{ transform:scale(1) rotate(0); } }
.gr-q-stage .gr-mc-opt.is-wrong{
  border-color:color-mix(in srgb, #ff5a6e 60%, transparent);
  background-color:color-mix(in srgb, #ff5a6e 11%, transparent);
}
.gr-q-stage .gr-mc-opt.is-wrong .key{
  background:linear-gradient(135deg,#ff9aa8,#e04b62); border-color:transparent; color:transparent;
}
/* Wrong-answer badge — a clear ✕ replaces the A/B/C letter (mirrors the ✓ on
   .is-correct .key above) so the wrong pick reads as a REJECTION, not just a
   red-tinted "still-picked" state. */
.gr-q-stage .gr-mc-opt.is-wrong .key::after{
  content:"✕"; position:absolute; inset:0; display:grid; place-items:center;
  color:#3d0710; font-size:15px; font-weight:900;
  animation:grTickIn .4s cubic-bezier(.2,.9,.25,1.5) both;
}
/* everything that was neither picked nor correct recedes */
.gr-q-stage .gr-mc-opt.is-locked:not(.is-correct):not(.is-wrong){ opacity:.4; filter:saturate(.45); }
.gr-q-stage .gr-mc-opt.is-locked:hover{ transform:none; box-shadow:none; }

/* keyboard affordance */
.gr-kbd-hint{
  display:flex; align-items:center; gap:6px; margin-top:14px;
  font-size:11.5px; color:var(--muted);
}
.gr-kbd-hint kbd{
  display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px;
  border-radius:6px; font-family:inherit; font-size:10.5px; font-weight:800;
  background:var(--chip-bg); border:1px solid var(--card-border); border-bottom-width:2px;
  color:var(--muted);
}
.gr-kbd-hint span{ margin-left:4px; opacity:.75; }
@media (hover:none){ .gr-kbd-hint{ display:none; } }

/* ---------- typed answers (gap + fix) ---------- */
.gr-gap-field{ position:relative; display:block; }
.gr-q-stage .gr-gap-input{
  padding:15px 16px; border-radius:14px; font-size:16px;
  background:var(--input-bg); border:1px solid var(--card-border);
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.gr-q-stage .gr-gap-input:focus{
  border-color:color-mix(in srgb, var(--violet) 65%, transparent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--violet) 16%, transparent), 0 18px 40px -28px rgba(139,109,255,.9);
}
.gr-gap-line{
  position:absolute; left:14px; right:14px; bottom:7px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--violet), var(--cyan), var(--lime));
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.gr-gap-input:focus + .gr-gap-line{ transform:scaleX(1); }
.gr-q-stage .gr-gap-input.is-correct{
  border-color:color-mix(in srgb, #63d28c 60%, transparent);
  background:color-mix(in srgb, #63d28c 10%, transparent);
  box-shadow:0 0 0 4px color-mix(in srgb, #63d28c 14%, transparent);
  animation:grFieldWin .5s cubic-bezier(.2,.9,.25,1.35);
}
.gr-q-stage .gr-gap-input.is-wrong{
  border-color:color-mix(in srgb, #ff5a6e 55%, transparent);
  background:color-mix(in srgb, #ff5a6e 9%, transparent);
  animation:grShake .38s;
}
.gr-q-stage .gr-gap-input.is-correct + .gr-gap-line,
.gr-q-stage .gr-gap-input.is-wrong   + .gr-gap-line{ transform:scaleX(1); }
@keyframes grFieldWin{ 0%{ transform:scale(1); } 45%{ transform:scale(1.014); } 100%{ transform:scale(1); } }

/* ---------- mistake fix ---------- */
.gr-mf-hint{
  display:flex; align-items:center; gap:9px; margin-bottom:14px;
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
}
.gr-mf-glass{
  display:inline-grid; place-items:center; width:24px; height:24px; border-radius:8px;
  font-size:12px;
  background:color-mix(in srgb, var(--gold) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  animation:grGlassBob 2.8s ease-in-out infinite;
}
@keyframes grGlassBob{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-2px) rotate(-8deg); } }
.gr-q-stage .gr-mf-target{
  position:relative; overflow:hidden;
  padding:17px 19px; border-radius:14px;
  font-size:17.5px; line-height:1.6; font-weight:550;
  background:var(--card-bg-soft);
  border:1px solid var(--card-border);
  border-left:3px solid color-mix(in srgb, var(--gold) 75%, transparent);
  margin-bottom:16px;
}
/* a slow scanner sweep — "there is an error in here somewhere" */
.gr-q-stage .gr-mf-target::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 38%, color-mix(in srgb, var(--gold) 15%, transparent) 50%, transparent 62%);
  background-size:260% 100%; background-position:130% 0;
  animation:grScan 4.2s ease-in-out infinite;
}
@keyframes grScan{ 0%{ background-position:130% 0; } 60%,100%{ background-position:-60% 0; } }

/* ---------- word order ---------- */
.gr-q-stage .gr-wo-answer{
  min-height:64px; border-radius:16px; padding:14px;
  border:1.5px dashed color-mix(in srgb, var(--violet) 40%, var(--card-border-hi));
}
/* once every word has been placed the tray folds away */
.gr-q-stage .gr-wo-bank{
  transition:min-height .35s cubic-bezier(.2,.7,.2,1), padding .35s, opacity .3s, border-color .3s, background .3s;
}
.gr-q-stage .gr-wo-bank.is-spent{
  min-height:0; padding:0; opacity:0;
  border-color:transparent; background:transparent;
}
.gr-q-stage .gr-wo-chip{
  padding:9px 14px; border-radius:11px; font-size:15px;
  transition:transform .2s cubic-bezier(.2,.9,.25,1.35), border-color .3s, background .3s, box-shadow .25s, color .3s;
}
.gr-q-stage .gr-wo-chip:hover{ transform:translateY(-3px) scale(1.03); }
.gr-wo-chip.is-right{
  border-color:color-mix(in srgb, #63d28c 60%, transparent);
  background:linear-gradient(135deg, color-mix(in srgb,#63d28c 24%, transparent), color-mix(in srgb,#63d28c 8%, transparent));
  transition-delay:calc(var(--n,0) * 65ms);
  animation:grChipLock .5s cubic-bezier(.2,.9,.25,1.4) both;
  animation-delay:calc(var(--n,0) * 65ms);
}
.gr-wo-chip.is-off{ opacity:.55; filter:saturate(.5); transition-delay:calc(var(--n,0) * 40ms); }
@keyframes grChipLock{ 0%{ transform:translateY(0); } 45%{ transform:translateY(-7px) scale(1.07); } 100%{ transform:translateY(0) scale(1); } }

/* ---------- spark burst ---------- */
.gr-spark{ position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none; z-index:4; }
.gr-spark i{
  position:absolute; left:0; top:0; width:6px; height:6px; margin:-3px 0 0 -3px;
  border-radius:50%; background:var(--sp,#63d28c); opacity:0;
  animation:grSparkFly .64s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:var(--dl,0ms);
}
.gr-spark.is-ok i:nth-child(3n+1){ --sp:var(--lime); }
.gr-spark.is-ok i:nth-child(3n+2){ --sp:#4ee0f2; }
.gr-spark.is-ok i:nth-child(3n+3){ --sp:#63d28c; }
.gr-spark.is-no i{ --sp:#ff7a89; width:5px; height:5px; }
@keyframes grSparkFly{
  0%  { opacity:1; transform:rotate(var(--a)) translateX(2px) scale(.4); }
  65% { opacity:1; }
  100%{ opacity:0; transform:rotate(var(--a)) translateX(var(--d)) scale(.2); }
}

/* ---------- end-of-set card ---------- */
.gr-end-card.gr-end-arena{
  position:relative; overflow:hidden; isolation:isolate;
  padding:38px 30px 32px; border-radius:26px;
  background:var(--card-bg); border:1px solid var(--card-border);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
  animation:grFbIn .5s cubic-bezier(.2,.7,.2,1);
}
.gea-aurora{
  position:absolute; inset:-40%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(34% 38% at 24% 14%, color-mix(in srgb, var(--violet) 34%, transparent), transparent 72%),
    radial-gradient(30% 34% at 80% 16%, color-mix(in srgb, var(--cyan)   28%, transparent), transparent 72%),
    radial-gradient(40% 44% at 52% 96%, color-mix(in srgb, var(--lime)   26%, transparent), transparent 72%);
  filter:blur(26px); opacity:.8;
  animation:grStageDrift 16s ease-in-out infinite alternate;
}
.gea-stars{ display:flex; justify-content:center; gap:10px; margin-bottom:16px; }
.gea-star{
  font-size:26px; line-height:1; color:var(--card-border-hi);
  transform:scale(.86); transition:color .3s;
}
.gea-star.is-on{
  color:var(--gold); text-shadow:0 0 22px color-mix(in srgb, var(--gold) 70%, transparent);
  animation:grStarPop .6s cubic-bezier(.2,.9,.25,1.6) both;
  animation-delay:calc(.18s + var(--i) * .16s);
}
@keyframes grStarPop{
  0%  { opacity:0; transform:scale(0) rotate(-60deg); }
  60% { opacity:1; transform:scale(1.28) rotate(8deg); }
  100%{ opacity:1; transform:scale(1) rotate(0); }
}
.gea-ringwrap{ display:flex; justify-content:center; margin-bottom:18px; }
.gr-ring.gea-ring{ box-shadow:0 24px 60px -34px color-mix(in srgb, var(--lime) 80%, transparent); }
.gr-ring.gea-ring::after{
  background:linear-gradient(165deg, color-mix(in srgb, var(--bg) 88%, var(--violet)), var(--bg));
}
.gr-ring.gea-ring .gr-ring-text{
  font-family:'Bricolage Grotesque','Native Emoji',sans-serif;
  font-size:31px; font-weight:800; letter-spacing:-.02em;
}
.gea-score{
  display:flex; align-items:baseline; justify-content:center; gap:8px;
  margin:0 0 10px;
}
.gea-score b{
  font-family:'Bricolage Grotesque','Native Emoji',sans-serif;
  font-size:40px; font-weight:800; line-height:1;
  background:linear-gradient(120deg, var(--gold), var(--lime), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gea-score small{ font-size:13.5px; color:var(--muted); font-weight:600; }
.gr-end-card.gr-end-arena h3{ font-size:23px; margin:0 0 4px; }
.gr-end-card.gr-end-arena .meta{ margin-bottom:22px; }

/* ---------- while drilling, the sticky bar carries only the tabs ---------- */
.gr-tabs-wrap.is-drilling{ gap:10px; }

/* ---------- light theme ---------- */
:root[data-theme="light"] .gr-q-card.gr-q-stage{
  box-shadow:0 26px 60px -40px rgba(60,40,120,.5);
}
:root[data-theme="light"] .gr-q-card.gr-q-stage::before{ opacity:.5; }
:root[data-theme="light"] .gea-aurora{ opacity:.55; }
:root[data-theme="light"] .ghud-score,
:root[data-theme="light"] .ghud-combo{ background:rgba(255,255,255,.85); }
/* Only the untouched segments take the light track. Scoping this to .is-todo
   matters: `:root[data-theme=light] .ghud-seg` (0,3,0) outranks
   `.ghud-seg.is-hit` (0,2,0), so the unscoped shorthand was resetting
   background-image and erasing the green/red answer colours in light mode. */
:root[data-theme="light"] .ghud-seg.is-todo{ background-color:rgba(15,23,42,.07); }
:root[data-theme="light"] .gr-end-card.gr-end-arena{ box-shadow:0 34px 80px -50px rgba(60,40,120,.55); }
:root[data-theme="light"] .gr-q-stage .gr-mc-opt.is-correct .key::after{ color:#04240f; }

/* ---------- narrow screens ---------- */
@media (max-width:600px){
  .gr-q-card.gr-q-stage{ padding:20px 17px; border-radius:18px; }
  .gr-q-card.gr-q-stage .gr-q-stem{ font-size:17.5px; }
  .gr-q-stage .gr-mf-target{ font-size:16px; }
  .ghud-segs{ height:12px; }
  .ghud-seg{ height:7px; }
  .ghud-metrics{ gap:6px; }
  .ghud-score, .ghud-combo{ padding:5px 10px; }
  .gr-end-card.gr-end-arena{ padding:30px 18px 26px; }
  .gea-score b{ font-size:34px; }
}

/* ---------- deep feedback: a real explanation, not a label ---------- */
.gr-fb-why-head{ font-size:14.5px; line-height:1.6; font-weight:600; }
.gr-fb-deep{ display:grid; gap:9px; margin-top:12px; }
.gfd-block{
  position:relative;
  padding:11px 13px 11px 15px;
  border-radius:12px;
  background:var(--card-bg-soft);
  border:1px solid var(--card-border);
  animation:gfdIn .42s cubic-bezier(.2,.7,.2,1) backwards;
  animation-delay:calc(var(--i,0) * 70ms);
}
.gfd-block::before{
  content:""; position:absolute; left:0; top:10px; bottom:10px; width:2.5px;
  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg, var(--lime), var(--cyan));
}
.gfd-block.is-bad::before{ background:linear-gradient(180deg,#ff9aa8,#e04b62); }
.gfd-block.is-bad{
  border-color:color-mix(in srgb, #ff5a6e 26%, transparent);
  background:color-mix(in srgb, #ff5a6e 6%, transparent);
}
@keyframes gfdIn{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
.gfd-h{
  font-size:9.5px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); margin-bottom:5px;
}
.gfd-title{ font-size:14px; font-weight:700; color:var(--text); line-height:1.45; }
.gfd-tx{ font-size:13px; line-height:1.6; color:var(--muted); margin-top:3px; }
.gfd-tx b, .gfd-title b{ color:var(--lime); }
:root[data-theme="light"] .gfd-tx b, :root[data-theme="light"] .gfd-title b{ color:#3f7a00; }
/* the completed sentence — the answer sitting in its real context */
.gfd-sent{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:15.5px; line-height:1.6; color:var(--text);
}
.gfd-sent b{
  padding:1px 7px; border-radius:7px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--lime) 30%, transparent), color-mix(in srgb, var(--cyan) 20%, transparent));
  color:var(--text); font-weight:800;
  box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--lime) 55%, transparent);
}
/* wrong → right, side by side */
.gfd-vs{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:7px; font-size:13.5px; line-height:1.5; }
.gfd-vs .gfd-x, .gfd-vs .gfd-ok{
  padding:5px 10px; border-radius:9px; border:1px solid var(--card-border);
}
.gfd-vs .gfd-x{
  background:color-mix(in srgb, #ff5a6e 11%, transparent);
  border-color:color-mix(in srgb, #ff5a6e 30%, transparent);
  color:var(--text); text-decoration:line-through; text-decoration-color:color-mix(in srgb,#ff5a6e 70%,transparent);
}
.gfd-vs .gfd-ok{
  background:color-mix(in srgb, #63d28c 12%, transparent);
  border-color:color-mix(in srgb, #63d28c 34%, transparent);
  color:var(--text); font-weight:650;
}
.gfd-vs .gfd-arrow{ color:var(--muted); font-weight:800; }
.gfd-form{
  display:inline-block; margin-top:2px; padding:5px 11px; border-radius:9px;
  font-size:13px; font-weight:700; color:var(--text);
  background:var(--chip-bg); border:1px solid var(--card-border);
}
.gfd-sigs{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.gfd-sigs span{
  padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:700;
  color:var(--cyan);
  background:color-mix(in srgb, var(--cyan) 11%, transparent);
  border:1px solid color-mix(in srgb, var(--cyan) 26%, transparent);
}
:root[data-theme="light"] .gfd-block{ background:rgba(255,255,255,.6); }
@media (max-width:600px){
  .gfd-sent{ font-size:14.5px; }
  .gfd-vs{ gap:6px; }
  .gfd-vs .gfd-arrow{ display:none; }
}

/* ---------- reduced motion: keep the meaning, drop the movement ---------- */
@media (prefers-reduced-motion:reduce){
  .gfd-block{ animation:none !important; }
  .gr-q-card.gr-q-stage::before,
  .gr-q-card.gr-q-stage::after,
  .gea-aurora,
  .gr-q-stage .gr-mf-target::after,
  .gr-mf-glass,
  .ghud-seg.is-now,
  .ghud-combo .ghud-flame,
  .gr-q-card.gr-q-stage .gr-q-stem .gap{ animation:none !important; }
  .gr-q-card.gr-q-stage::after{ opacity:.35; }
  .ghud-seg.is-hit, .ghud-seg.is-miss,
  .ghud-score b.is-bump, .ghud-combo.is-pop,
  .gea-star.is-on, .gr-wo-chip.is-right,
  .gr-q-stage .gr-mc-opt.is-correct,
  .gr-q-stage .gr-mc-opt.is-correct .key::after,
  .gr-q-stage .gr-gap-input.is-correct,
  .gr-q-stage .gr-gap-input.is-wrong{ animation:none !important; }
  .gr-spark{ display:none !important; }
  .gr-q-stage .gr-mc-opt:hover{ transform:none; }
  .gr-q-stage .gr-wo-chip:hover{ transform:none; }
}

/* ============================================================================
   DASHBOARD v2 (2026-07-19) — screenshot-style stats command center on /grammar:
   greeting + Practice Now, 4 stat cards, Progress-Over-Time chart (Points /
   Exercises / Accuracy tabs), weak-areas panel, mastery-by-category strip.
   ============================================================================ */
.gd2-hello{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.gd2-ava{
  width:52px; height:52px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-size:22px; font-weight:900; color:#0a0b10;
  background:conic-gradient(from 210deg, var(--lime), var(--cyan), var(--violet), var(--lime));
  box-shadow:0 6px 18px -6px rgba(139,109,255,.55), inset 0 0 0 2px rgba(255,255,255,.25);
}
.gd2-hi{ display:flex; flex-direction:column; min-width:0; }
.gd2-greet{ font-size:13px; color:var(--muted); }
.gd2-name{ margin:0; font-size:clamp(22px,3.4vw,30px); line-height:1.1; font-weight:900; letter-spacing:-.02em; }
.gd2-wave{ display:inline-block; transform-origin:70% 70%; }
.gr-reveal .gd2-wave{ animation:gd2Wave 1.6s ease .5s 1; }
@keyframes gd2Wave{ 0%,100%{transform:rotate(0)} 15%{transform:rotate(24deg)} 30%{transform:rotate(-12deg)} 45%{transform:rotate(20deg)} 60%{transform:rotate(-6deg)} 75%{transform:rotate(10deg)} }
.gd2-hello-right{ margin-left:auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.gd2-goal{ display:flex; align-items:center; gap:8px; }
.gd2-goal .gr-ring-text{ font-size:12px; }
.gd2-goal-lbl{ font-size:10.5px; line-height:1.25; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.gd2-go{ white-space:nowrap; }

/* ---- stat cards ---- */
.gd2-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:14px; }
.gd2-card{
  --hue:var(--violet); --hue-soft:rgba(139,109,255,.16);
  position:relative; overflow:hidden;
  background:var(--card-bg-soft); border:1px solid var(--card-border);
  border-radius:18px; padding:16px 18px; min-width:0;
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.gd2-card[data-hue="cyan"]{ --hue:var(--cyan); --hue-soft:rgba(78,224,242,.14); }
.gd2-card[data-hue="lime"]{ --hue:var(--lime); --hue-soft:rgba(198,242,78,.14); }
.gd2-card[data-hue="gold"]{ --hue:var(--gold); --hue-soft:rgba(244,201,93,.16); }
.gd2-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0%, var(--hue-soft), transparent 55%);
  opacity:.9;
}
.gd2-card:hover{ transform:translateY(-3px); border-color:var(--card-border-hi);
  box-shadow:0 18px 40px -22px color-mix(in srgb, var(--hue) 45%, transparent); }
.gd2-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.gd2-card-lbl{ font-size:13px; font-weight:700; color:var(--muted); }
.gd2-ico{
  width:36px; height:36px; border-radius:11px; display:grid; place-items:center; font-size:17px;
  background:color-mix(in srgb, var(--hue) 16%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--hue) 30%, transparent);
}
.gd2-num{ font-size:clamp(26px,3.2vw,34px); font-weight:900; letter-spacing:-.02em; color:var(--hue); margin:10px 0 2px; font-variant-numeric:tabular-nums; }
.gd2-card-sub{ font-size:12.5px; color:var(--muted); }
.gd2-freeze{ color:var(--cyan); font-weight:700; }

/* ---- middle row: chart + weak areas ---- */
.gd2-mid{ display:grid; grid-template-columns:1.6fr 1fr; gap:14px; margin-bottom:14px; align-items:stretch; }
.gd2-panel{
  background:var(--card-bg-soft); border:1px solid var(--card-border);
  border-radius:18px; padding:16px 18px; min-width:0; display:flex; flex-direction:column;
}
.gd2-panel-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.gd2-panel-title{ display:flex; flex-direction:column; }
.gd2-panel-title b{ font-size:16px; font-weight:800; }
.gd2-panel-title span{ font-size:12px; color:var(--muted); }
.gd2-tabs{ display:flex; gap:4px; background:var(--chip-bg); border:1px solid var(--card-border); border-radius:999px; padding:3px; }
.gd2-tab{
  border:0; background:transparent; color:var(--muted); font:inherit; font-size:12.5px; font-weight:700;
  padding:5px 12px; border-radius:999px; cursor:pointer; transition:background .2s, color .2s;
}
.gd2-tab:hover{ color:var(--text); }
.gd2-tab.is-on{ background:color-mix(in srgb, var(--violet) 28%, transparent); color:var(--text);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--violet) 45%, transparent); }
.gd2-chart{ position:relative; flex:1; min-height:200px; }
.gd2-svg{ width:100%; height:100%; min-height:200px; display:block; }
.gd2-grid{ stroke:var(--card-border); stroke-dasharray:4 6; stroke-width:1; }
.gd2-ytick, .gd2-xtick{ fill:var(--muted); font-size:11px; font-family:inherit; }
.gd2-area{ animation:gd2Area .9s ease .35s both; }
.gd2-line{
  stroke:var(--c, var(--violet)); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:gd2Draw 1.2s cubic-bezier(.4,0,.2,1) .15s forwards;
}
.gd2-dot{ fill:var(--c, var(--violet)); stroke:var(--bg); stroke-width:1.5; animation:gd2Dot .5s cubic-bezier(.3,1.6,.5,1) both; animation-delay:calc(.5s + var(--d,0s)); }
.gd2-dot.is-last{ filter:drop-shadow(0 0 6px var(--c, var(--violet))); }
@keyframes gd2Draw{ to{ stroke-dashoffset:0; } }
@keyframes gd2Area{ from{ opacity:0 } to{ opacity:1 } }
@keyframes gd2Dot{ from{ opacity:0; transform:scale(.2); transform-origin:center; transform-box:fill-box; } to{ opacity:1; transform:scale(1); transform-origin:center; transform-box:fill-box; } }
.gd2-chart-hint{
  position:absolute; inset:auto 0 34px 0; text-align:center; font-size:13px; color:var(--muted);
  pointer-events:none;
}

/* ---- weak areas ---- */
.gd2-weak-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; padding:18px 8px; }
.gd2-weak-ico{ font-size:40px; animation:gd2Bob 3.2s ease-in-out infinite; }
@keyframes gd2Bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.gd2-weak-empty b{ font-size:16.5px; font-weight:800; }
.gd2-weak-empty p{ margin:0; font-size:13px; color:var(--muted); max-width:240px; }
.gd2-weak-rows{ display:flex; flex-direction:column; gap:6px; flex:1; }
.gd2-weak-row{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(50px,1fr) auto; align-items:center; gap:10px;
  padding:9px 10px; border-radius:12px; text-decoration:none; color:inherit;
  transition:background .2s, transform .2s;
}
.gd2-weak-row:hover{ background:var(--chip-bg-hover); transform:translateX(3px); }
.gd2-weak-name{ font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gd2-weak-bar{ height:7px; border-radius:99px; background:var(--chip-bg); overflow:hidden; }
.gd2-weak-bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--pink), var(--violet)); transition:width 1s cubic-bezier(.4,0,.2,1); }
.gd2-weak-n{ font-size:12px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.gd2-weak-cta{ margin-top:10px; justify-content:center; }

/* ---- Top Learners board (dashboard) ---- */
.gd2-lb{ margin-bottom:14px; position:relative; overflow:hidden; }
/* The arena: three soft colour fields drifting behind the rows, blurred into one
   another. Absolute, so it stays out of the panel's flex flow; the head and body
   claim z-index 1 to sit above it. Cheap — one composited layer, no repaint. */
.gd2-lb-aura{
  position:absolute; inset:-45% -12%; z-index:0; pointer-events:none; opacity:.85;
  background:
    radial-gradient(38% 46% at 16% 28%, color-mix(in srgb, var(--violet) 72%, transparent), transparent 70%),
    radial-gradient(34% 44% at 84% 16%, color-mix(in srgb, var(--cyan)   58%, transparent), transparent 70%),
    radial-gradient(42% 40% at 58% 94%, color-mix(in srgb, var(--gold)   48%, transparent), transparent 70%);
  filter:blur(46px);
  animation:gd2Aura 24s ease-in-out infinite alternate;
}
/* the glass edge that catches the light along the panel's top rim */
.gd2-lb::before{
  content:''; position:absolute; inset:0 0 auto; height:1px; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5) 22% 78%, transparent);
  opacity:.5;
}
@keyframes gd2Aura{
  0%  { transform:translate3d(-4%,-3%,0) scale(1);    }
  50% { transform:translate3d( 5%, 4%,0) scale(1.14); }
  100%{ transform:translate3d(-3%, 5%,0) scale(1.04); }
}
:root[data-theme="light"] .gd2-lb-aura{ opacity:.5; }
:root[data-theme="light"] .gd2-lb::before{ opacity:.9; background:linear-gradient(90deg, transparent, rgba(255,255,255,.95) 22% 78%, transparent); }
.gd2-lb-cupwee{ font-style:normal; display:inline-block; animation:gd2Bob 3.4s ease-in-out infinite; }
/* Header: title + range toggle read as ONE tight unit on the left rather than
   being flung to opposite edges of a full-width panel (which left a big, ugly
   void). The toggle centres against the two-line title; "Full board →" lives in
   the footer now. On phones the toggle drops to its own full-width row. */
.gd2-lb-head{ align-items:center; justify-content:flex-start; gap:8px 16px; position:relative; z-index:1; }
.gd2-lb-head .gd2-panel-title{ margin-right:2px; }
.gd2-lb-tabs{ flex:0 0 auto; }
.gd2-lb-tabs .gd2-tab{ transition:background .3s cubic-bezier(.34,1.5,.64,1), color .2s, transform .25s cubic-bezier(.34,1.5,.64,1); }
.gd2-lb-tabs .gd2-tab.is-on{ transform:translateY(-1px); }
.gd2-lb-body{ display:flex; flex-direction:column; position:relative; z-index:1; }

/* loading skeleton — five shimmering bars, no layout jump when rows arrive */
.gd2-lb-skel{ display:flex; flex-direction:column; gap:9px; padding:10px 0 4px; }
.gd2-lb-skel span{
  display:block; height:38px; border-radius:12px; background:var(--chip-bg);
  animation:gd2Shimmer 1.4s ease-in-out infinite; animation-delay:calc(var(--i,0) * 110ms);
}
@keyframes gd2Shimmer{ 0%,100%{ opacity:.45 } 50%{ opacity:.85 } }

/* Full board — every rank is a row that spans the whole panel. (There used to be
   a 2·1·3 podium on top: it only looked like a podium with three learners, and
   with one it stranded a huge empty plinth across two thirds of the panel.) */
.gd2-lb-rows{ display:flex; flex-direction:column; gap:4px; margin-top:10px; }
.gd2-lb-row{
  --tint:var(--violet);
  position:relative;
  display:grid; grid-template-columns:38px 30px minmax(0,1fr) auto auto; align-items:center; gap:12px;
  padding:9px 12px; border-radius:13px;
  animation:gd2RowIn .62s cubic-bezier(.22,1.35,.36,1) both; animation-delay:calc(var(--i,0) * 60ms);
  transition:background .2s, transform .28s cubic-bezier(.22,1.2,.36,1);
}
@keyframes gd2RowIn{
  from{ opacity:0; transform:translateY(18px) scale(.965); }
  to  { opacity:1; transform:none; }
}
.gd2-lb-row:hover{ background:var(--chip-bg); transform:translateX(5px); }
.gd2-lb-row:hover .gd2-lb-fill i{ filter:brightness(1.28) saturate(1.15); }
.gd2-lb-row:hover .gd2-lb-pts b{ transform:scale(1.07); }
/* The leader's-share bar is absolute, so it never takes a grid column. Its
   stacking is EXPLICIT — bar 0, cells 1, ring 2 — because the obvious version
   (bar at z-index:-1, cells left alone) painted the winner's row blank: the
   medal's infinite bob promotes that row to its own compositing layer, and the
   negative-z bar then composites on top of the very content it should sit
   under. Every cell therefore has to claim its own layer above the bar. */
.gd2-lb-fill{
  position:absolute; inset:0; z-index:0; border-radius:inherit; overflow:hidden;
  background:color-mix(in srgb, var(--card-border) 30%, transparent);
}
.gd2-lb-rank, .gd2-lb-face, .gd2-lb-name, .gd2-lb-streak, .gd2-lb-pts{ position:relative; z-index:1; }
.gd2-lb-fill i{
  /* overflow clips the sheen below to the bar itself — unclipped it swept the
     full row width and washed out the score it passed over */
  position:relative; display:block; height:100%; width:0; border-radius:inherit; overflow:hidden;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--tint) 30%, transparent),
    color-mix(in srgb, var(--tint) 7%, transparent));
  /* the bars race out one after another, in step with the rows landing */
  transition:width 1.25s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 60ms + 180ms),
             filter .25s ease;
}
/* A lit edge where each bar stops — the board reads as a race, not a table.
   Tapered top and bottom: a full-height 2px line read as a hard divider slab
   cutting the row in two rather than as the head of a moving bar. */
.gd2-lb-fill i::after{
  content:''; position:absolute; top:18%; bottom:18%; right:0; width:2px; border-radius:2px;
  background:linear-gradient(180deg, transparent,
    color-mix(in srgb, var(--tint) 85%, white) 30% 70%, transparent);
  box-shadow:0 0 16px 3px color-mix(in srgb, var(--tint) 40%, transparent);
  opacity:.9;
}
/* the top three catch the light, staggered so the sweep travels down the board */
.gd2-lb-row.is-top .gd2-lb-fill i::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(104deg, transparent 38%,
    color-mix(in srgb, white 58%, transparent) 50%, transparent 62%);
  animation:gd2Sheen 5.2s cubic-bezier(.45,0,.25,1) infinite;
}
.gd2-lb-row[data-place="2"] .gd2-lb-fill i::before{ animation-delay:.85s; }
.gd2-lb-row[data-place="3"] .gd2-lb-fill i::before{ animation-delay:1.7s; }
@keyframes gd2Sheen{ 0%,58%{ transform:translateX(-130%); } 92%,100%{ transform:translateX(130%); } }
/* Rings ride on ::after, above the bar — an inset shadow on the row itself would
   be painted over by it, and one on the bar would be half-hidden by the fill. */
.gd2-lb-row::after{
  content:''; position:absolute; inset:0; z-index:2; border-radius:inherit;
  pointer-events:none; box-shadow:inset 0 0 0 1px var(--ring, transparent);
}
/* medals: the top three carry their metal through rank, ring, bar and points */
.gd2-lb-row.is-top{ padding:11px 12px; --ring:color-mix(in srgb, var(--tint) 34%, transparent); }
.gd2-lb-row[data-place="1"]{ --tint:var(--gold); }
.gd2-lb-row[data-place="2"]{ --tint:#c8d2e1; }
.gd2-lb-row[data-place="3"]{ --tint:#cd853f; }
.gd2-lb-row.is-top .gd2-lb-face{
  box-shadow:0 0 0 2px color-mix(in srgb, var(--tint) 62%, transparent),
             0 8px 20px -12px color-mix(in srgb, var(--tint) 90%, transparent);
}
.gd2-lb-row.is-top .gd2-lb-pts b{ color:var(--tint); }
.gd2-lb-row[data-place="1"] .gd2-lb-face{ width:34px; height:34px; font-size:14px; }
.gd2-lb-row[data-place="1"] .gd2-lb-name{ font-size:15px; font-weight:800; }
.gd2-lb-row[data-place="1"] .gd2-lb-pts b{ font-size:17px; }
/* CHAMPION: a spotlight pooled around the leader's avatar, and a frame that
   breathes. The pulse lives on the ring pseudo-element (::after) — the row's own
   box-shadow would be painted over by the bar sitting above it. */
.gd2-lb-row[data-place="1"] .gd2-lb-fill::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(58% 150% at 10% 50%,
    color-mix(in srgb, var(--gold) 38%, transparent), transparent 72%);
}
.gd2-lb-row[data-place="1"]::after{ animation:gd2Crown 3.8s ease-in-out infinite; }
@keyframes gd2Crown{
  0%,100%{ box-shadow:inset 0 0 0 1px   color-mix(in srgb, var(--gold) 34%, transparent),
                             0 0 0  0    color-mix(in srgb, var(--gold)  0%, transparent); }
  50%    { box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 66%, transparent),
                             0 0 20px -2px color-mix(in srgb, var(--gold) 50%, transparent); }
}
.gd2-lb-medal{ font-style:normal; font-size:19px; line-height:1; display:inline-block; }
.gd2-lb-row[data-place="1"] .gd2-lb-medal{
  font-size:23px; animation:gd2Bob 3.2s ease-in-out infinite;
  filter:drop-shadow(0 4px 10px color-mix(in srgb, var(--gold) 70%, transparent));
}
.gd2-lb-row.is-you{ --ring:rgba(198,242,78,.55); }
.gd2-lb-row.is-you:not(.is-top){ --tint:var(--lime); }
.gd2-lb-rank{ font-size:13px; font-weight:800; color:var(--muted); font-variant-numeric:tabular-nums; }
.gd2-lb-face{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  font-size:12.5px; font-weight:900; color:#0a0b10;
  background:conic-gradient(from 210deg, var(--cyan), var(--violet), var(--pink), var(--cyan));
  overflow:hidden;
}
/* The letter is wrapped so it can sit ABOVE the specular sweep below — a bare
   text node would be painted under any positioned pseudo-element. */
.gd2-lb-face > i{ position:relative; z-index:1; font-style:normal; }
/* a highlight orbiting the medalists' avatars; the rest stay still (8 infinite
   layers is a cost the board doesn't need to pay for ranks nobody is chasing) */
.gd2-lb-row.is-top .gd2-lb-face::after,
.gd2-lb-row.is-you .gd2-lb-face::after{
  content:''; position:absolute; inset:-35%;
  background:conic-gradient(from 0deg, transparent 0 58%,
    rgba(255,255,255,.6) 72%, transparent 86%);
  animation:gd2Orbit 5.5s linear infinite;
}
.gd2-lb-row[data-place="2"] .gd2-lb-face::after{ animation-duration:7s; }
.gd2-lb-row[data-place="3"] .gd2-lb-face::after{ animation-duration:8.5s; }
@keyframes gd2Orbit{ to{ transform:rotate(1turn); } }
.gd2-lb-name{ font-size:13.5px; font-weight:700; min-width:0; display:flex; align-items:center; gap:8px; }
/* text-overflow needs a block box, so the truncation lives on this inner span —
   the flex parent above only aligns the name against the "you" tag. */
.gd2-name-txt{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gd2-lb-you{
  flex:none;
  font-style:normal; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.06em;
  color:var(--on-lime); background:var(--lime); border-radius:99px; padding:2px 6px;
}
.gd2-lb-streak{ font-size:11.5px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.gd2-lb-pts{ font-size:11.5px; color:var(--muted); white-space:nowrap; }
.gd2-lb-pts b{
  display:inline-block; font-size:14.5px; color:var(--text); font-variant-numeric:tabular-nums;
  transition:transform .25s cubic-bezier(.34,1.5,.64,1);
}
.gd2-lb-me{ margin-top:8px; padding-top:8px; border-top:1px dashed var(--card-border); }
.gd2-lb-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted); padding:12px 4px 2px; margin-top:auto;
}
.gd2-lb-foot-txt{ min-width:0; }
.gd2-lb-foot-link{
  flex:none; margin-left:auto; color:var(--lime); font-weight:800; font-size:13px;
  text-decoration:none; white-space:nowrap;
}
.gd2-lb-foot-link:hover{ text-decoration:underline; }

/* empty / offline */
.gd2-lb-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:6px; padding:26px 8px 20px; }
.gd2-lb-cup{ font-size:42px; animation:gd2Bob 3.2s ease-in-out infinite;
  filter:drop-shadow(0 10px 20px rgba(244,201,93,.3)); }
.gd2-lb-empty b{ font-size:16.5px; font-weight:800; }
.gd2-lb-empty p{ margin:0 0 10px; font-size:13px; color:var(--muted); max-width:300px; }

/* ---- mastery strip ---- */
.gd2-mastery{ margin-bottom:14px; }
.gd2-mast-go{ font-size:13px; font-weight:800; color:var(--lime); text-decoration:none; white-space:nowrap; }
.gd2-mast-go:hover{ text-decoration:underline; }
.gd2-mast-total{ height:8px; border-radius:99px; background:var(--chip-bg); overflow:hidden; margin:4px 0 14px; }
.gd2-mast-total i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--violet), var(--cyan), var(--lime)); transition:width 1.1s cubic-bezier(.4,0,.2,1); }
.gd2-mast-cols{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.gd2-mast-col{
  --hue:var(--violet);
  display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; text-decoration:none; color:inherit;
  padding:10px 6px; border-radius:14px; border:1px solid transparent;
  transition:background .2s, border-color .2s, transform .2s;
}
.gd2-mast-col[data-hue="cyan"]{ --hue:var(--cyan); } .gd2-mast-col[data-hue="lime"]{ --hue:var(--lime); }
.gd2-mast-col[data-hue="gold"]{ --hue:var(--gold); } .gd2-mast-col[data-hue="pink"]{ --hue:var(--pink); }
.gd2-mast-col:hover{ background:var(--chip-bg); border-color:var(--card-border); transform:translateY(-2px); }
.gd2-mast-col b{ font-size:12.5px; font-weight:800; color:var(--hue); }
.gd2-mast-n{ font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; }
.gd2-mast-bar{ width:100%; height:5px; border-radius:99px; background:var(--chip-bg); overflow:hidden; }
.gd2-mast-bar i{ display:block; height:100%; border-radius:99px; background:var(--hue); transition:width 1s cubic-bezier(.4,0,.2,1); }

/* responsive */
@media (max-width: 940px){
  .gd2-cards{ grid-template-columns:repeat(2,1fr); }
  .gd2-mid{ grid-template-columns:1fr; }
  .gd2-mast-cols{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 560px){
  .gd2-hello-right{ width:100%; }
  .gd2-go{ flex:1; justify-content:center; }
  .gd2-cards{ gap:10px; }
  .gd2-card{ padding:13px 14px; }
  /* Phones: the range toggle drops to its own full-width row under the title and
     becomes an even two-segment control — no floating pill, no awkward wrap. */
  .gd2-lb-tabs{ width:100%; }
  .gd2-lb-tabs .gd2-tab{ flex:1; text-align:center; }
  .gd2-lb-foot{ justify-content:center; text-align:center; }
  .gd2-lb-foot-link{ margin-left:0; }
  .gd2-lb-row,
  .gd2-lb-row.is-top{ grid-template-columns:28px 26px minmax(0,1fr) auto auto; gap:8px; padding:8px 8px; }
  .gd2-lb-face,
  .gd2-lb-row[data-place="1"] .gd2-lb-face{ width:26px; height:26px; font-size:11px; }
  .gd2-lb-medal{ font-size:16px; }
  .gd2-lb-row[data-place="1"] .gd2-lb-medal{ font-size:19px; }
  .gd2-lb-row[data-place="1"] .gd2-lb-name{ font-size:13.5px; }
  .gd2-lb-row[data-place="1"] .gd2-lb-pts b{ font-size:15px; }
}
@media (max-width: 460px){
  /* Phones: one line cannot hold rank + avatar + a REAL name + streak + points.
     Measured at 344px the name column collapsed to ~85px and chopped ordinary
     names ("Aziza Karim…", "Beta Tes…"), so below this width the meta drops to
     a second line and the name takes the full remaining width. Rank and avatar
     span both lines; streak and points sit on the line underneath.
     Three tracks, none of them auto: streak and points SHARE the second cell
     (start vs end), so no track can be inflated by the name spanning it — that
     inflation is what pushed streak-less rows' points into the middle. */
  .gd2-lb-row,
  .gd2-lb-row.is-top{
    grid-template-columns:26px 26px minmax(0,1fr);
    align-items:center; gap:1px 8px; padding:8px 10px;
  }
  .gd2-lb-rank  { grid-column:1; grid-row:1 / span 2; }
  .gd2-lb-face  { grid-column:2; grid-row:1 / span 2; }
  .gd2-lb-name  { grid-column:3; grid-row:1; }
  .gd2-lb-streak{ grid-column:3; grid-row:2; justify-self:start; }
  .gd2-lb-pts   { grid-column:3; grid-row:2; justify-self:end; }
  /* one size for every rank — the winner's 17px would tower over its own name */
  .gd2-lb-pts b,
  .gd2-lb-row[data-place="1"] .gd2-lb-pts b{ font-size:14px; }
}
@media (max-width: 340px){
  /* Tightest phones (SE-class): points are the board's whole point, so drop the
     secondary streak flame and give that width back to the second line. */
  .gd2-lb-streak{ display:none; }
  .gd2-lb-medal,
  .gd2-lb-row[data-place="1"] .gd2-lb-medal{ font-size:15px; }
}
/* light theme */
:root[data-theme="light"] .gd2-ava{ color:#fff; }
:root[data-theme="light"] .gd2-lb-face{ color:#fff; }
:root[data-theme="light"] .gd2-lb-row[data-place="2"]{ --tint:#8b98ab; }
:root[data-theme="light"] .gd2-card[data-hue="lime"] .gd2-num{ color:#5a7a00; }
:root[data-theme="light"] .gd2-card[data-hue="gold"] .gd2-num{ color:var(--gold); }
:root[data-theme="light"] .gd2-dot{ stroke:#fff; }
/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .gd2-line{ animation:none; stroke-dasharray:none; stroke-dashoffset:0; }
  .gd2-area, .gd2-dot{ animation:none; opacity:1; }
  .gr-reveal .gd2-wave, .gd2-weak-ico{ animation:none; }
  /* the hidden start state lives in the keyframes, so dropping the animation
     leaves these fully visible rather than stuck at opacity:0 */
  .gd2-lb-row, .gd2-lb-cup, .gd2-lb-skel span, .gd2-lb-aura, .gd2-lb-cupwee,
  .gd2-lb-row[data-place="1"] .gd2-lb-medal,
  .gd2-lb-row[data-place="1"]::after,
  .gd2-lb-row.is-top .gd2-lb-fill i::before,
  .gd2-lb-face::after{ animation:none; }
  /* the sheen's start state is off-canvas, so it has to be parked, not just stopped */
  .gd2-lb-row.is-top .gd2-lb-fill i::before, .gd2-lb-face::after{ display:none; }
  .gd2-lb-fill i{ transition:none; }
}

/* ============================================================================
   LEADERBOARD v2 — monthly points race (trophy hero, prize note, podium rows)
   ============================================================================ */
.glb2-hero{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-top:22px; }
.glb2-app{
  width:76px; height:76px; border-radius:22px; display:grid; place-items:center; margin-bottom:16px;
  background:linear-gradient(160deg, rgba(244,201,93,.22), rgba(244,201,93,.05));
  border:1px solid rgba(244,201,93,.35);
  box-shadow:0 18px 44px -18px rgba(244,201,93,.45), inset 0 0 24px rgba(244,201,93,.12);
  animation:glb2Float 4.5s ease-in-out infinite;
}
.glb2-app i{ font-style:normal; font-size:36px; filter:drop-shadow(0 4px 10px rgba(244,201,93,.5)); }
@keyframes glb2Float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.glb2-title{ margin:0; font-size:clamp(32px,5vw,44px); font-weight:900; letter-spacing:-.02em; }
.glb2-sub{ margin:8px 0 0; font-size:15.5px; color:var(--muted); }
.glb2-body{ max-width:none; }
.glb2-month{
  display:inline-flex; align-items:center; gap:2px; margin:22px 0 14px;
  padding:9px 16px; border-radius:999px; font-weight:800; font-size:14.5px; color:var(--gold);
  background:rgba(244,201,93,.10); border:1px solid rgba(244,201,93,.35);
}
.glb2-note{
  display:flex; gap:12px; align-items:flex-start;
  background:rgba(139,109,255,.08); border:1px solid rgba(139,109,255,.25);
  border-radius:16px; padding:14px 16px; margin-bottom:16px;
}
.glb2-i{
  flex:0 0 auto; width:20px; height:20px; margin-top:1px; border-radius:50%;
  display:grid; place-items:center; font-size:12px; font-weight:900; font-style:italic; font-family:Georgia,serif;
  color:var(--violet); border:1.5px solid var(--violet);
}
.glb2-note p{ margin:0; font-size:14px; line-height:1.55; color:var(--text); }
.glb2-hl{ color:var(--gold); font-weight:800; }
.glb2-panel{ background:var(--card-bg-soft); border:1px solid var(--card-border); border-radius:20px; padding:14px; }
.glb2-empty{ text-align:center; padding:46px 20px 40px; display:flex; flex-direction:column; align-items:center; gap:7px; }
.glb2-cup{ font-size:52px; animation:glb2Float 4.5s ease-in-out infinite; filter:drop-shadow(0 10px 22px rgba(244,201,93,.35)); }
.glb2-empty h3{ margin:6px 0 0; font-size:19px; font-weight:800; }
.glb2-empty p{ margin:0 0 12px; font-size:14px; color:var(--muted); }
.glb2-top{ display:flex; flex-direction:column; gap:6px; }
.glb2-row{
  display:grid; grid-template-columns:46px 40px 1fr auto; align-items:center; gap:12px;
  padding:11px 14px; border-radius:14px;
  animation:glb2In .5s cubic-bezier(.3,1.2,.5,1) both; animation-delay:calc(var(--i,0) * 55ms);
  transition:background .2s, transform .2s;
}
@keyframes glb2In{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
.glb2-row:hover{ background:var(--chip-bg-hover); }
.glb2-rank{ font-weight:900; font-size:15px; color:var(--muted); font-variant-numeric:tabular-nums; text-align:center; }
.glb2-row.is-podium .glb2-rank{ font-size:24px; }
.glb2-row[data-rank="1"]{ background:linear-gradient(90deg, rgba(244,201,93,.14), transparent 70%); box-shadow:inset 0 0 0 1px rgba(244,201,93,.30); }
.glb2-row[data-rank="2"]{ background:linear-gradient(90deg, rgba(200,210,225,.10), transparent 70%); box-shadow:inset 0 0 0 1px rgba(200,210,225,.22); }
.glb2-row[data-rank="3"]{ background:linear-gradient(90deg, rgba(205,133,63,.12), transparent 70%); box-shadow:inset 0 0 0 1px rgba(205,133,63,.28); }
.glb2-row.is-you{ background:linear-gradient(90deg, rgba(198,242,78,.13), transparent 70%); box-shadow:inset 0 0 0 1.5px rgba(198,242,78,.45); }
.glb2-face{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  font-size:15px; font-weight:900; color:#0a0b10;
  background:conic-gradient(from 210deg, var(--cyan), var(--violet), var(--pink), var(--cyan));
}
.glb2-name{ font-weight:700; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:8px; }
.glb2-youtag{
  font-style:normal; font-size:10.5px; font-weight:900; text-transform:uppercase; letter-spacing:.06em;
  color:var(--on-lime); background:var(--lime); border-radius:99px; padding:2px 7px;
}
.glb2-pts{ font-size:13px; color:var(--muted); white-space:nowrap; }
.glb2-pts b{ font-size:16px; color:var(--text); font-variant-numeric:tabular-nums; }
.glb2-me{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--card-border); }
.glb2-foot{ text-align:center; font-size:12.5px; color:var(--muted); padding:14px 6px 4px; }
:root[data-theme="light"] .glb2-face{ color:#fff; }
:root[data-theme="light"] .glb2-note p{ color:var(--text); }
@media (max-width: 560px){
  .glb2-row{ grid-template-columns:34px 32px 1fr auto; gap:8px; padding:10px 10px; }
  .glb2-face{ width:32px; height:32px; font-size:13px; }
}
@media (prefers-reduced-motion: reduce){
  .glb2-app, .glb2-cup{ animation:none; }
  .glb2-row{ animation:none; }
}

/* ============================================================================
   NARROW-SCREEN OVERRIDES — kept at the END of the file on purpose.
   Several base rules for these components are declared far below the media
   blocks earlier in this file, and a later shorthand (e.g. `padding:4px 26px
   70px`, `flex:1`) silently outranks an earlier longhand at equal specificity.
   Anything that must win over them has to live after them.
   ============================================================================ */
@media (max-width:560px){
  /* The nowrap CTA label took MORE width than the copy it advertises: the text
     column collapsed to ~111px and wrapped a 60-char line into 5 lines of
     three words. Drop the label to its own row so the copy gets full width. */
  .gr-course-cta, .gr-dash-band{ flex-wrap:wrap; row-gap:8px; }
  .gr-course-cta .gcc-copy, .gr-dash-band .gdb-copy{ flex:1 1 100%; }
  .gcc-go{ order:3; }
  .gdb-go{ order:3; margin-left:auto; }
}

/* `section.block` — the host every grammar page renders into — has NO horizontal
   padding, and these three wraps declare `padding: … 0 …`. Below their own
   max-width (900 for the course, 720 for the rest) the course contents, the
   Daily-Practice / Mistakes / proofread card and the leaderboard panel therefore
   ran flush against both screen edges. Every sibling wrap (.gr-band-wrap,
   .gr-l1-wrap, .gr-cmp-wrap, .gr-unit-wrap) already pads 26px; match that. */
@media (max-width:900px){
  .gr-course-wrap{ padding-left:18px; padding-right:18px; }
}
@media (max-width:760px){
  .grp-wrap, .gr-lb-wrap{ padding-left:18px; padding-right:18px; }
}

@media (max-width:480px){
  /* The mastery strip drops to 3 columns at 940px and stops there. A 12-char
     label ("Conditionals") has a ~95px min-content floor, so 3 tracks + gaps
     need ~305px — more than the panel's inner width on a 360px phone, and the
     strip pushed past its own card. Two up has room to spare. */
  .gd2-mast-cols{ grid-template-columns:repeat(2,1fr); }
}