/* ============================================================
   IELTS READING — design system v3
   Brand RED palette (from AppColors design tokens) · light · no shadows
   Gradients used ONLY where the palette designates them
   (home wash, brand-solid hero/CTA, avatar) — everything else flat.
   ============================================================ */
@import url('https://fonts.cdnfonts.com/css/vela-sans');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ----------------------------- tokens ----------------------------- */
:root {
  --bg:        #F6F7F9;   /* appBg — page background */
  --bg-2:      #FFFFFF;
  --surface:   #FFFFFF;   /* solid white surface */
  --surface-2: #ECEEF2;   /* gray100 — soft fill */

  /* brand red is the primary; legacy var names kept so every reference cascades */
  --mint:      #FCD0D5;   /* brand200 — soft brand border/tint */
  --mint-soft: #FEECEE;   /* brand100 — brand tint background */
  --teal:      #DC1F2E;   /* brand 600 — PRIMARY */
  --deep:      #8E121C;   /* brand700 — brand dark */
  --deep-2:    #0B1220;   /* ink — deepest headline */

  /* gold accent for the Pro tier (warning palette) — pairs with brand red */
  --accent:      #F5A524; /* warning */
  --accent-deep: #99620C; /* warning700 */
  --accent-soft: #FFF6E5; /* warning100 */

  --ink:       #0B1220;   /* headlines */
  --ink-soft:  #4B5360;   /* gray700 — body */
  --muted:     #6B7280;   /* gray500 — muted */
  --line:      #E6E8EC;   /* gray200 — borders */
  --line-2:    #ECEEF2;   /* gray100 — dividers */

  --ok:        #1FAE6B;   /* success */
  --no:        #E5484D;   /* alert */
  --no-soft:   #FDECEE;   /* alert100 */
  --ok-soft:   #E6F6EE;   /* success100 */

  /* gradients from the design system — scoped to focal components only */
  --grad-wash:  linear-gradient(180deg, #FEECEE 0%, #F6F7F9 100%);  /* brandWash */
  --grad-brand: linear-gradient(135deg, #DC1F2E 0%, #8E121C 100%);  /* brandSolid */

  --r-sm: 12px;
  --r:    16px;
  --r-lg: 20px;
  --r-xl: 26px;

  --font: 'Inter', 'Vela Sans', 'Manrope', -apple-system, sans-serif;
  --maxw: 1240px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* no shadows — depth comes from borders + brand colour */
  --shadow-sm: none;
  --shadow-lg: none;
}


/* ----------------------------- reset ----------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.5;
}
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.15; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }
a { color: var(--teal); text-decoration: none; }
::selection { background: var(--mint-soft); }

/* inline SVG icons inherit text colour */
.ico { display: inline-block; vertical-align: -.16em; flex-shrink: 0; }
.feat__icon { color: var(--teal); }
.feat__icon .ico { display: block; }
.userchip .ico { color: var(--deep); vertical-align: -.2em; }
.ok-note { display: inline-flex; align-items: center; gap: 5px; }
.errtag .tick { display: inline-flex; align-items: center; }
.level__feat { gap: 6px; }
.level__feat .ico { color: var(--teal); }
.reco h4 { display: flex; align-items: center; gap: 8px; }
.reco h4 .ico { color: var(--deep); flex-shrink: 0; }
.modal h2 .ico { color: var(--teal); vertical-align: -.18em; margin-right: 4px; }
.hl-toolbar button { display: inline-flex; align-items: center; gap: 6px; }
.hl-toolbar .ico, .hl-toolbar svg { vertical-align: middle; }

/* ----------------------------- layout shells ----------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.section { padding: 96px 0; }
.section--tight { padding: 64px 0; }

/* ============================================================ NAV */
.nav { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; }
.nav.is-stuck { border-color: var(--line); box-shadow: var(--shadow-sm); }
.nav__in { display: flex; align-items: center; gap: 16px; height: 66px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; color: var(--deep); letter-spacing: -.02em; }
.brand__logo { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--grad-brand); color: #fff; font-weight: 800; font-size: 14px; }
.brand small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.nav__spacer { flex: 1; }
.nav__links { display: flex; gap: 4px; align-items: center; }
.nav__link { padding: 9px 14px; border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--ink-soft); transition: background .2s, color .2s; }
.nav__link:hover, .nav__link.is-active { background: var(--surface-2); color: var(--deep); }
.nav__cta { padding: 10px 18px; border-radius: 8px; font-weight: 700; font-size: 14px; color: #fff; background: var(--teal); transition: background .2s; }
.nav__cta:hover { background: var(--deep); }

/* home nav — same flat white bar */
.nav--home { background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
.nav--home.is-stuck { background: var(--surface); border-bottom-color: var(--line); }
.nav--home .brand { color: var(--deep-2); }
.nav--home .brand small { color: var(--muted); }
.nav--home .nav__link { color: var(--ink-soft); }
.nav--home .nav__link:hover, .nav--home .nav__link.is-active { background: var(--surface-2); color: var(--deep-2); }
.nav--home .nav__cta { background: var(--grad-brand); }
.nav--home .nav__cta:hover { filter: brightness(0.94); }
.nav--home .userchip { background: var(--surface); border-color: var(--line); color: var(--deep-2); }
.nav--home .userchip .ico { color: var(--deep); }
.nav--home .userchip button { color: var(--muted); }
.userchip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--deep); }
.userchip button { color: var(--muted); font-weight: 700; }
.userchip button:hover { color: var(--no); }

/* ============================================================ HERO (clean white — SaaS style) */
.hero--clean { background: var(--grad-wash); padding: 100px 0 80px; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr .96fr; gap: 56px; align-items: center; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--deep); font-weight: 600; font-size: 13px; margin-bottom: 26px; }
.hero__eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.hero--clean h1 { color: var(--ink); font-size: clamp(44px, 6vw, 74px); line-height: 1.05; letter-spacing: -.045em; font-weight: 800; }
.hero--clean h1 .accent { color: var(--teal); }
.hero--clean .hero__sub { margin: 24px 0 30px; font-size: 18px; color: var(--ink-soft); max-width: 31em; line-height: 1.6; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero__trust { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 13.5px; color: var(--muted); font-weight: 500; }
.hero__trust b { color: var(--deep); }
.stars { display: inline-flex; gap: 2px; color: var(--teal); }
.hero__stats { display: flex; gap: 36px; margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line-2); }
.hero__stat .n { font-size: 30px; font-weight: 800; color: var(--deep); letter-spacing: -.03em; }
.hero__stat .l { font-size: 13px; color: var(--muted); font-weight: 600; }

/* ---------- hero showpiece: floating newspaper reading ---------- */
.reel { position: relative; perspective: 1700px; min-height: 560px; transition: opacity .5s var(--ease); }
.reel.is-out { opacity: 0; }
.reel__stage { position: relative; transform-style: preserve-3d; }
.reel__paper { position: relative; width: 100%; background: #fbf8f0; border: 1px solid #e8ddc6; border-radius: 6px; padding: 26px 30px 30px; font-family: Georgia, "Times New Roman", serif; color: #2a241b; transform-style: preserve-3d; animation: reelFloat 10s var(--ease) infinite; }
.reel.is-settled .reel__paper { animation-play-state: paused; }
.reel__paper::before, .reel__paper::after { content: ""; position: absolute; inset: 0; border: 1px solid #e8ddc6; border-radius: 6px; background: #f5efe2; z-index: -1; }
.reel__paper::before { transform: translateZ(-14px) translate(8px, 11px); }
.reel__paper::after { transform: translateZ(-28px) translate(17px, 22px); opacity: .7; }
@keyframes reelFloat {
  0%,100% { transform: rotateX(7deg) rotateY(-11deg) translateZ(0) translateY(0); }
  50%     { transform: rotateX(3deg) rotateY(-5deg) translateZ(48px) translateY(-14px); }
}
.reel__mast { display: flex; align-items: center; gap: 10px; justify-content: center; font-weight: 800; font-size: 20px; letter-spacing: .05em; text-transform: uppercase; color: #1f1a12; border-bottom: 2px solid #1f1a12; padding-bottom: 9px; }
.reel__rule { flex: 1; height: 2px; background: #1f1a12; }
.reel__kicker { text-align: center; font-family: var(--font); font-weight: 700; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #9a8c6e; margin: 9px 0 12px; }
.reel__head { text-align: center; font-size: 27px; line-height: 1.12; font-weight: 800; color: #181208; margin-bottom: 16px; }
.reel__line { font-size: 13.5px; line-height: 1.55; text-align: justify; margin: 0 0 10px; color: #3a3326; opacity: 0; transform: translateX(32px); }
.reel.play .reel__line { animation: reelLineIn .65s var(--ease) forwards; animation-delay: calc(var(--d) * .42s); }
@keyframes reelLineIn { to { opacity: 1; transform: none; } }
.reel__line--key { position: relative; font-weight: 700; color: #181208; }
.reel__line--key b { color: var(--teal); }
.reel__mark { position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--teal); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); }
.reel.step2 .reel__mark { transform: scaleX(1); }
.reel__bars { display: flex; gap: 7px; }
.reel__bars i { height: 8px; flex: 1; background: #e4dcc8; border-radius: 999px; }
/* answer callout — a flat overlay ABOVE the 3D paper (so the floating page never covers it) */
.reel__q { position: absolute; left: -14px; top: 34%; width: 290px; z-index: 6; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 17px 19px; opacity: 0; transform: translateY(18px) scale(.9); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reel.step3 .reel__q { opacity: 1; transform: none; }
.reel__q-tag { font-size: 12px; font-weight: 800; color: var(--teal); margin-bottom: 7px; }
.reel__q-text { font-size: 14.5px; color: var(--ink); line-height: 1.45; margin-bottom: 14px; }
.reel__opts { display: flex; flex-direction: column; gap: 8px; }
.reel__opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 700; padding: 9px 14px; border: 1.5px solid var(--line); border-radius: 11px; color: var(--ink-soft); background: var(--surface); transition: border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease); }
.reel__ic { display: none; align-items: center; }
/* FALSE is chosen and marked wrong */
.reel.step4 .reel__opt[data-o="f"] { border-color: var(--no); background: var(--no-soft); color: var(--no); }
.reel.step4 .reel__opt[data-o="f"] .reel__ic--no { display: inline-flex; }
/* TRUE revealed as the correct answer */
.reel.step5 .reel__opt[data-o="t"] { border-color: var(--teal); background: var(--teal); color: #fff; }
.reel.step5 .reel__opt[data-o="t"] .reel__ic--ok { display: inline-flex; }
.reel__msg { position: relative; z-index: 7; margin-top: 30px; text-align: center; font-size: 16.5px; color: var(--ink-soft); opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reel.step6 .reel__msg { opacity: 1; transform: none; }
.reel__msg b { color: var(--deep); }

/* ============================================================ "How it works" animated showcase */
.how__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }
.how__stage { position: relative; perspective: 1400px; min-height: 360px; }
.how__paper { position: relative; background: #fbf8f0; border: 1px solid #e8ddc6; border-radius: 6px; padding: 24px 28px 26px; font-family: Georgia, "Times New Roman", serif; color: #2a241b; transform-style: preserve-3d; }
.how__mast { text-align: center; font-weight: 800; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: #1f1a12; border-bottom: 2px solid #1f1a12; padding-bottom: 7px; }
.how__title { text-align: center; font-size: 22px; font-weight: 800; color: #181208; margin: 10px 0 12px; }
.how__line { font-size: 12.5px; line-height: 1.55; text-align: justify; margin: 0 0 9px; color: #3a3326; }
.how__line b { color: var(--teal); }
.how__bars { display: flex; gap: 6px; }
.how__bars i { height: 8px; flex: 1; background: #e4dcc8; border-radius: 999px; }

/* scene 2: quick 360° spin */
.how[data-scene="2"] .how__paper { animation: howSpin 1.05s var(--ease); }
@keyframes howSpin { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }

/* scene 1: magnifier glass over the key line */
.how__lupa { position: absolute; left: 30%; top: 40%; width: 132px; height: 132px; border-radius: 50%; border: 7px solid #c7bda3; background: #fffdf8; overflow: hidden; display: grid; place-items: center; z-index: 4; opacity: 0; transform: translate(64px, -44px) scale(.7); transition: opacity .5s var(--ease), transform .7s var(--ease); }
.how__lupa::after { content: ""; position: absolute; right: -24px; bottom: -16px; width: 36px; height: 10px; background: #c7bda3; border-radius: 999px; transform: rotate(45deg); }
.how[data-scene="1"] .how__lupa { opacity: 1; transform: none; }
.how__lupa-in { position: relative; font-family: Georgia, serif; font-weight: 800; font-size: 19px; color: #181208; padding-bottom: 5px; transform: scale(.45); opacity: 0; }
.how[data-scene="1"] .how__lupa-in { animation: lupaZoom .55s var(--ease) .65s both; }
@keyframes lupaZoom { to { opacity: 1; transform: scale(1); } }
.how__lupa-u { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--teal); border-radius: 2px; transform: scaleX(0); transform-origin: left; }
.how[data-scene="1"] .how__lupa-u { animation: lupaUnder .5s var(--ease) 1.15s both; }
@keyframes lupaUnder { to { transform: scaleX(1); } }

/* scene 2: "explain" gloss callout */
.how__explain { position: absolute; left: 16%; bottom: 12%; width: 244px; z-index: 4; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 13px 16px; opacity: 0; transform: translateY(14px) scale(.92); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.how[data-scene="2"] .how__explain { opacity: 1; transform: none; transition-delay: 1.1s; }
.how__explain-h { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; color: var(--teal); margin-bottom: 6px; }
.how__explain p { font-size: 13px; color: var(--ink); line-height: 1.45; }
.how__explain b { color: var(--deep); }

/* scene 3: weak-spot mini chart */
.how__weak { position: absolute; inset: 8% 10%; z-index: 4; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); display: flex; flex-direction: column; gap: 11px; justify-content: center; }
.how[data-scene="3"] .how__weak { opacity: 1; transform: none; }
.how__weak-h { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.how__bar { display: grid; grid-template-columns: 86px 1fr; align-items: center; gap: 11px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.how__bar > i { height: 9px; background: var(--line-2); border-radius: 999px; position: relative; overflow: hidden; }
.how__bar > i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--teal); border-radius: 999px; }
.how[data-scene="3"] .how__bar > i::after { animation: howBarFill .8s var(--ease) .25s both; }
@keyframes howBarFill { to { width: var(--w); } }
.how__bar.is-weak span { color: var(--no); }
.how__bar.is-weak > i::after { background: var(--no); }
.how__weak-cta { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 3px; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--teal); padding: 7px 13px; border-radius: 999px; }

/* right panel: feature text per scene */
.how__panel { position: relative; min-height: 234px; }
.how__scene { position: absolute; inset: 0; opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); pointer-events: none; }
.how[data-scene="1"] .how__scene[data-s="1"], .how[data-scene="2"] .how__scene[data-s="2"], .how[data-scene="3"] .how__scene[data-s="3"] { opacity: 1; transform: none; }
.how__ic { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--teal); margin-bottom: 20px; }
.how__scene h3 { font-size: 25px; color: var(--ink); margin-bottom: 13px; letter-spacing: -.02em; }
.how__scene p { font-size: 17px; color: var(--ink-soft); line-height: 1.6; max-width: 30em; }
.how__scene p b { color: var(--deep); }
.how__dots { position: absolute; left: 0; bottom: -14px; display: flex; gap: 8px; }
.how__dots span { width: 8px; height: 8px; border-radius: 999px; background: var(--line); cursor: pointer; transition: width .3s var(--ease), background .3s var(--ease); }
.how[data-scene="1"] .how__dots span[data-d="1"], .how[data-scene="2"] .how__dots span[data-d="2"], .how[data-scene="3"] .how__dots span[data-d="3"] { background: var(--teal); width: 24px; }
@media (max-width: 880px) { .how__grid { grid-template-columns: 1fr; gap: 30px; } .how__stage { display: none; } .how__panel { min-height: 0; } .how__scene { position: relative; opacity: 1; transform: none; margin-bottom: 26px; } .how__dots { display: none; } }

.hero__card { background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--line); padding: 22px; }
.hero__card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.hero__card-ring { width: 64px; height: 64px; border-radius: 50%; border: 4px solid var(--teal); background: var(--surface); display: grid; place-items: center; }
.hero__card-ring span { width: 50px; height: 50px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-weight: 800; color: var(--deep); }
.hero__card-bars { display: grid; gap: 11px; }
.hero__card-bar { display: grid; grid-template-columns: 78px 1fr 32px; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); font-weight: 600; }
.hero__card-bar i { height: 8px; border-radius: 999px; background: var(--line-2); display: block; position: relative; overflow: hidden; }
.hero__card-bar i::after { content: ""; position: absolute; inset: 0; width: var(--w, 60%); border-radius: 999px; background: var(--teal); }

/* ============================================================ BUTTONS */
.btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border-radius: var(--r-sm); font-weight: 700; font-size: 15px; transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); white-space: nowrap; border: 1px solid transparent; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--grad-brand); color: #fff; }
.btn--primary:hover { filter: brightness(0.94); }
.btn--ghost { background: var(--surface); color: var(--deep); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--teal); background: var(--mint-soft); }
.btn--soft { background: var(--surface-2); color: var(--deep); border-color: var(--line); }
.btn--soft:hover { background: var(--mint); }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-deep); }
.btn--cream { background: #fff; color: var(--teal); border-color: #fff; }
.btn--cream:hover { background: var(--mint-soft); color: var(--deep); border-color: var(--mint-soft); }
.btn--sm { padding: 8px 15px; font-size: 13.5px; }
.btn--lg { padding: 15px 28px; font-size: 16px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ============================================================ SECTION HEADERS */
.sec-head { max-width: 680px; margin-bottom: 46px; }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-kicker { font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: 12px; }
.sec-head h2 { font-size: clamp(27px, 3.4vw, 38px); letter-spacing: -.03em; }
.sec-head p { margin-top: 13px; color: var(--ink-soft); font-size: 16.5px; line-height: 1.6; }

/* ============================================================ FEATURES */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.feat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; transition: border-color .2s, transform .2s var(--ease); }
.feat:hover { border-color: var(--teal); }
.feat__icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--surface-2); border: 1px solid var(--line-2); margin-bottom: 16px; }
.feat h3 { font-size: 18px; color: var(--ink); }
.feat p { margin-top: 9px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }

/* ============================================================ READING ROADMAP (test categories) */
.path { position: relative; max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.path__step {
  position: relative; text-align: left; width: 100%;
  display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 26px; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.path__step:hover { border-color: var(--accent, var(--teal)); background: var(--mint-soft); }
/* connecting timeline line between nodes */
.path__step:not(:last-child)::before {
  content: ""; position: absolute; left: calc(26px + 42px); top: 100%; width: 2px; height: 18px;
  background: var(--line); z-index: 0;
}
.path__rail { display: flex; justify-content: center; }
.path__node {
  width: 84px; height: 84px; border-radius: 22px; display: grid; place-content: center; justify-items: center;
  background: var(--accent, var(--teal)); color: #fff; font-size: 34px; font-weight: 800; line-height: 1;
  letter-spacing: -.02em; box-shadow: none;
}
.path__node small { font-size: 9px; font-weight: 800; letter-spacing: .18em; opacity: .85; margin-top: 3px; }
.path__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 7px; }
.path__step-no { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.path__body h3 { font-size: 20px; color: var(--ink); letter-spacing: -.02em; }
.path__range { flex-shrink: 0; font-size: 13px; font-weight: 800; color: var(--deep); background: var(--mint-soft); border: 1px solid var(--mint); padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.path__body p { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin-bottom: 12px; }
.path__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.path__tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line); padding: 5px 11px; border-radius: 999px; }
.path__tag .ico { color: var(--accent, var(--teal)); flex-shrink: 0; }
.path__cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: #fff; background: var(--accent, var(--teal)); padding: 12px 22px; border-radius: 12px; white-space: nowrap; transition: gap .2s; }
.path__step:hover .path__cta { gap: 13px; }
@media (max-width: 720px) {
  .path__step { grid-template-columns: 60px 1fr; gap: 16px; padding: 18px; }
  .path__node { width: 60px; height: 60px; border-radius: 16px; font-size: 26px; }
  .path__node small { font-size: 8px; }
  .path__step:not(:last-child)::before { left: calc(18px + 30px); }
  .path__cta { grid-column: 1 / -1; justify-content: center; }
  .path__head { flex-direction: column; }
}

/* ============================================================ TABS */
.tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--ink-soft); transition: background .2s, color .2s; }
.tab .ico { vertical-align: middle; }
.tab.is-active { background: var(--teal); color: #fff; }
.tab:not(.is-active):hover { background: var(--surface-2); color: var(--deep); }

/* ============================================================ TEST / GROUP CARDS */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tcard { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; transition: border-color .2s var(--ease), background .2s var(--ease); display: flex; flex-direction: column; gap: 11px; }
.tcard:hover { border-color: var(--teal); background: var(--mint-soft); }
.tcard__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tcard__num { font-size: 12px; font-weight: 800; color: var(--deep); letter-spacing: .04em; background: var(--mint-soft); border: 1px solid var(--mint); padding: 4px 10px; border-radius: 999px; }
.tcard h3 { font-size: 17px; color: var(--ink); line-height: 1.3; }
.tcard p { color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.tcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 13px; border-top: 1px solid var(--line-2); gap: 8px; }
.tcard__go { display: inline-flex; align-items: center; gap: 7px; color: var(--teal); font-weight: 700; font-size: 14px; transition: gap .2s; white-space: nowrap; }
.tcard:hover .tcard__go { gap: 11px; }

/* chips */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.chip--level { background: var(--surface-2); color: var(--deep); border: 1px solid var(--line-2); }
.chip--easy { background: var(--mint-soft); color: var(--deep); }
.chip--medium { background: var(--surface-2); color: var(--deep); border: 1px solid var(--line-2); }
.chip--hard { background: var(--surface-2); color: var(--deep-2); border: 1px solid var(--line); }
.chip--type { background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line-2); }
.chip--count { background: transparent; color: var(--muted); font-weight: 600; }

/* testimonials + FAQ (clean landing) */
.tm { display: inline-flex; align-items: center; gap: 9px; }
.tm__a { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; font-weight: 800; color: var(--deep); font-size: 13px; }
.tm b { font-size: 13.5px; color: var(--ink); }
.faq { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.faq__item { border-bottom: 1px solid var(--line-2); }
.faq__item:last-child { border-bottom: none; }
.faq__item summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 700; color: var(--deep); font-size: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .ico { color: var(--teal); transition: transform .2s; flex-shrink: 0; }
.faq__item[open] summary .ico { transform: rotate(45deg); }
.faq__a { padding: 0 22px 20px; color: var(--ink-soft); font-size: 15px; line-height: 1.65; }

/* expert / teacher card */
.expert { display: grid; grid-template-columns: 280px 1fr; gap: 36px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 28px; }
.expert__photo { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); display: grid; place-items: center; }
.expert__photo img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.expert__ph { position: absolute; z-index: 0; font-size: 58px; font-weight: 800; color: var(--mint); letter-spacing: .02em; }
.expert__body h2 { font-size: clamp(23px, 2.8vw, 31px); margin: 8px 0 12px; letter-spacing: -.02em; }
.expert__badge { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--deep); background: var(--mint-soft); padding: 6px 13px; border-radius: 999px; margin-bottom: 14px; }
.expert__body p { color: var(--ink-soft); font-size: 16px; line-height: 1.65; margin-bottom: 22px; max-width: 48em; }
@media (max-width: 760px) { .expert { grid-template-columns: 1fr; text-align: center; } .expert__photo { max-width: 240px; margin: 0 auto; } .expert__badge { margin-left: auto; margin-right: auto; } }

/* auth: Google button + divider */
.au-google { width: 100%; justify-content: center; gap: 10px; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- My profile ---------- */
.userchip__me { display: inline-flex; align-items: center; gap: 8px; background: none; font-weight: 600; color: var(--deep); }
.userchip__me:hover { color: var(--teal); }
.prof-hi { display: flex; align-items: center; gap: 20px; }
.prof-av { width: 70px; height: 70px; flex-shrink: 0; border-radius: 50%; background: var(--grad-brand); color: #fff; display: grid; place-items: center; font-size: 30px; font-weight: 800; }
.prof-hi h2 { font-size: clamp(26px, 3.4vw, 36px); margin: 4px 0 8px; }
.prof-hi p { color: var(--ink-soft); font-size: 16px; line-height: 1.55; }
.prof-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.prof-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; text-align: center; }
.prof-stat__n { font-size: 40px; font-weight: 800; color: var(--deep); letter-spacing: -.03em; line-height: 1; }
.prof-stat__n.ok { color: var(--ok); }
.prof-stat__n.no { color: var(--no); }
.prof-stat__l { font-size: 13.5px; color: var(--muted); font-weight: 600; margin-top: 8px; }

.ptbars { display: flex; flex-direction: column; gap: 16px; }
.ptbar__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.ptbar__name { font-weight: 700; color: var(--ink); font-size: 15px; }
.ptbar__flag { font-size: 11px; font-weight: 800; color: #fff; background: var(--no); padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.ptbar__num { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.ptbar__num b { color: var(--no); }
.ptbar__track { height: 11px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.ptbar__track > i { display: block; height: 100%; width: 0; background: var(--teal); border-radius: 999px; transition: width 1s var(--ease); transition-delay: calc(var(--d) * .1s); }
.ptbars.is-in .ptbar__track > i { width: var(--w); }
.ptbar.is-weak .ptbar__track > i { background: var(--no); }
.ptbar.is-weak .ptbar__name { color: var(--no); }

.prof-weak { display: flex; gap: 22px; align-items: center; margin-top: 32px; background: var(--surface); border: 1px solid var(--mint); border-radius: var(--r-xl); padding: 26px 28px; opacity: 0; transform: translateY(22px) scale(.98); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.prof-weak.is-in { opacity: 1; transform: none; }
.prof-weak__ic { position: relative; width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: var(--teal); background: var(--mint-soft); }
.prof-weak__ic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--teal); opacity: 0; }
.prof-weak.is-in .prof-weak__ic::after { animation: profPulse 1.8s var(--ease) infinite; }
@keyframes profPulse { 0% { transform: scale(1); opacity: .6; } 70%,100% { transform: scale(1.5); opacity: 0; } }
.prof-weak h3 { font-size: 26px; color: var(--ink); margin-bottom: 8px; letter-spacing: -.02em; }
.prof-weak.is-in h3 { animation: weakPop .6s var(--ease) .15s both; }
@keyframes weakPop { 0% { transform: scale(.8); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
.prof-weak p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; margin-bottom: 16px; }
@media (max-width: 720px) { .prof-stats { grid-template-columns: 1fr; } .prof-weak { flex-direction: column; text-align: center; } }

/* ============================================================ TEST RUNNER */
.runner { min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; height: 62px; padding: 0 24px; background: var(--bg); border-bottom: 1px solid var(--line); }
.topbar__back { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; color: var(--ink-soft); padding: 8px 12px; border-radius: 8px; transition: background .2s; }
.topbar__back:hover { background: var(--surface-2); color: var(--deep); }
.topbar__title { font-weight: 700; color: var(--deep); font-size: 16px; }
.topbar__title small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.topbar__spacer { flex: 1; }
.tool-btn { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.5px; color: var(--deep); background: var(--surface); border: 1px solid var(--line); padding: 8px 13px; border-radius: 8px; }
.tool-btn:hover { border-color: var(--teal); }
.timer { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; color: var(--deep); background: var(--surface); border: 1px solid var(--line); padding: 7px 11px 7px 15px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.timer.is-low { color: var(--no); border-color: var(--no); }
.timer__btn { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: 12px; }
.btn-submit { padding: 10px 20px; border-radius: 8px; font-weight: 700; color: #fff; background: var(--teal); }
.btn-submit:hover { background: var(--deep); }

.partnav { position: sticky; top: 62px; z-index: 20; display: flex; gap: 6px; padding: 12px 24px; background: var(--bg); border-bottom: 1px solid var(--line-2); overflow-x: auto; }
.partnav button { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); white-space: nowrap; transition: all .2s; }
.partnav button.is-active { background: var(--deep); color: #fff; border-color: var(--deep); }

.test-wrap { padding: 26px 24px 120px; max-width: 1320px; margin: 0 auto; }
.part { animation: fadeUp .35s var(--ease) both; }
.part.is-hidden { display: none; }
.part__head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; color: var(--deep); font-size: 17px; margin-bottom: 16px; }
.reading-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items: start; }
@media (max-width: 920px) { .reading-grid { grid-template-columns: 1fr; } }

.passage { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 30px; position: sticky; top: 128px; max-height: calc(100vh - 158px); overflow-y: auto; line-height: 1.75; font-size: 15.5px; color: var(--ink-soft); }
@media (max-width: 920px) { .passage { position: static; max-height: none; } }
.passage h2 { font-size: 21px; color: var(--deep); margin-bottom: 16px; }
.passage p { margin: 0 0 15px; }
.passage::-webkit-scrollbar { width: 9px; }
.passage::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 2px solid var(--surface); }

.qpanel { display: flex; flex-direction: column; gap: 16px; }
.instr { background: var(--surface-2); border: 1px solid var(--line-2); border-left: 4px solid var(--teal); border-radius: var(--r-sm); padding: 13px 17px; font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.instr b { color: var(--deep); }
.notes-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; }
.notes-box__title { font-weight: 700; color: var(--deep); margin-bottom: 12px; font-size: 15px; }
.notes__line { padding: 8px 0; line-height: 2.1; font-size: 15px; color: var(--ink-soft); border-bottom: 1px dashed var(--line-2); }
.notes__line:last-child { border-bottom: none; }
.qgap { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
.qnum { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 7px; background: var(--deep); color: #fff; font-size: 12px; font-weight: 700; }
.gap { width: 130px; padding: 7px 11px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface-2); font-size: 14.5px; color: var(--ink); transition: border-color .2s, background .2s; }
.gap:focus { outline: none; border-color: var(--teal); background: var(--surface); }
.mcq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; }
.mcq__q { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; color: var(--ink); margin-bottom: 13px; line-height: 1.5; font-size: 15px; }
.opt { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: border-color .18s, background .18s; font-size: 14.5px; color: var(--ink-soft); }
.opt:last-child { margin-bottom: 0; }
.opt:hover { border-color: var(--mint); background: var(--surface-2); }
.opt input { accent-color: var(--teal); width: 17px; height: 17px; flex-shrink: 0; }
.opt:has(input:checked) { border-color: var(--teal); background: var(--ok-soft); color: var(--ink); font-weight: 600; }
.opt__letter { width: 24px; height: 24px; border-radius: 7px; background: var(--surface-2); display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--deep); flex-shrink: 0; border: 1px solid var(--line-2); }
.opt:has(input:checked) .opt__letter { background: var(--teal); color: #fff; border-color: var(--teal); }
.match { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; }
.match__box { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 13px 17px; margin-bottom: 15px; }
.match__box-title { font-weight: 700; color: var(--deep); margin-bottom: 8px; font-size: 14px; }
.match__box ul { margin: 0; padding-left: 4px; list-style: none; }
.match__box li { padding: 4px 0; font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.match__item { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px dashed var(--line-2); }
.match__item:last-child { border-bottom: none; }
.match__item-text { flex: 1; font-size: 14.5px; color: var(--ink); }
.match select, .qpanel select { padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface-2); font-size: 14px; color: var(--ink); cursor: pointer; transition: border-color .2s; }
.match select:focus, .qpanel select:focus { outline: none; border-color: var(--teal); }

/* graded states on the sheet */
.gap.is-correct, .qpanel select.is-correct { border-color: var(--ok); background: var(--ok-soft); color: var(--deep); }
.gap.is-wrong, .qpanel select.is-wrong { border-color: var(--no); background: var(--no-soft); color: var(--no); }
.opt.is-correct { border-color: var(--ok); background: var(--ok-soft); }
.opt.is-wrong { border-color: var(--no); background: var(--no-soft); }
/* answer-evidence highlight in the passage (green, with a clear number badge) */
mark.ans-loc { background: #d7f3d0; border-radius: 3px; padding: 1px 1px; color: inherit; }
.ans-loc__n { display: inline-block; background: #2f9e44; color: #fff; font-size: 12.5px; font-weight: 800; line-height: 1.45; padding: 0 7px; border-radius: 5px; margin: 0 4px; vertical-align: middle; font-family: var(--font); }
mark.hl { background: #F6D7A0; border-radius: 3px; cursor: pointer; }

/* ============================================================ EXAM RUNNER (real IELTS CD look — neutral, no brand colour) */
.exam { display: flex; flex-direction: column; height: 100vh; background: #fff; font-family: Arial, Helvetica, "Segoe UI", sans-serif; color: #1a1a1a; }
.exam__top { display: flex; align-items: center; gap: 16px; height: 46px; padding: 0 18px; background: #eceef0; border-bottom: 1px solid #c4c9ce; flex-shrink: 0; }
.exam__brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: #2a2a2a; }
.exam__brand .ico { color: #5a5a5a; }
.exam__timer { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 15px; color: #1a1a1a; font-variant-numeric: tabular-nums; }
.exam__timer .ico { color: #444; }
.exam__timer-lbl { font-weight: 400; color: #666; font-size: 13px; }
.exam__timer.is-low { color: #c0392b; }
.exam__timer.is-low .ico { color: #c0392b; }
.exam__exit { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: #444; border: 1px solid #bfc4ca; background: #fff; padding: 6px 12px; border-radius: 4px; }
.exam__exit:hover { background: #f4f4f4; }

.exam__body { flex: 1; overflow: hidden; }
.exam .part { height: 100%; animation: none; }
.exam .part.is-hidden { display: none; }
.exam .part__head { display: none; }
.exam .reading-grid { height: 100%; grid-template-columns: 1fr 1fr; gap: 0; }
.exam .passage { position: static; max-height: none; height: 100%; overflow-y: auto; border: 0; border-right: 1px solid #ccd1d6; border-radius: 0; padding: 22px 32px 70px; background: #fff; font-size: 15.5px; color: #1a1a1a; line-height: 1.72; }
.exam .passage h2 { color: #111; font-size: 18px; margin-bottom: 14px; }
.exam .qpanel { height: 100%; overflow-y: auto; padding: 22px 32px 70px; gap: 16px; background: #fff; }
@media (max-width: 920px) { .exam .reading-grid { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } .exam .passage { border-right: 0; border-bottom: 1px solid #ccd1d6; } }

.exam .instr { background: #f1f3f4; border: 1px solid #dde1e4; border-left: 3px solid #6b7177; border-radius: 3px; color: #222; }
.exam .instr b { color: #111; }
.exam .mcq, .exam .notes-box, .exam .match { border: 1px solid #d3d8dc; border-radius: 4px; background: #fff; }
.exam .qnum { background: #2d2d2d; border-radius: 3px; }
.exam .mcq__q, .exam .match__item-text, .exam .notes__line, .exam .match__box li { color: #1a1a1a; }
.exam .opt { border: 1px solid #c2c7cc; border-radius: 3px; color: #1a1a1a; }
.exam .opt:hover { border-color: var(--teal); background: #f8fafc; }
.exam .opt:has(input:checked) { border-color: var(--teal); background: var(--mint-soft); color: #111; }
.exam .opt__letter { background: #eceff1; color: #222; border: 1px solid #d3d8dc; }
.exam .opt:has(input:checked) .opt__letter { background: var(--teal); color: #fff; border-color: var(--teal); }
.exam .opt input { accent-color: var(--teal); }
.exam .gap { border: 1px solid #9aa0a6; border-radius: 2px; background: #fff; color: #111; }
.exam .gap:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: var(--teal); }
.exam .match select, .exam .qpanel select { border: 1px solid #9aa0a6; border-radius: 2px; background: #fff; color: #111; }
.exam .match select:focus, .exam .qpanel select:focus { outline: 2px solid var(--teal); border-color: var(--teal); }
.exam .match__box { background: #f6f7f8; border: 1px solid #dde1e4; }
.exam .notes__line { border-bottom-color: #e3e6e9; }
.exam mark.hl { background: #fff2a8; }
.exam .q-flash { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

/* bottom navigation bar with numbered question palette */
.exam__nav { display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 14px; background: #eceef0; border-top: 1px solid #c4c9ce; flex-shrink: 0; }
.exam__parts { display: flex; gap: 6px; flex-shrink: 0; }
.exam-part { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 66px; padding: 6px 12px; border: 1px solid #bfc4ca; background: #fff; border-radius: 5px; color: #333; line-height: 1.15; }
.exam-part b { font-size: 12.5px; font-weight: 700; }
.exam-part small { font-size: 10.5px; color: #777; }
.exam-part:hover { border-color: var(--teal); }
.exam-part.is-active { background: #2d2d2d; border-color: #2d2d2d; color: #fff; }
.exam-part.is-active small { color: #cfcfcf; }
.exam__palette { flex: 1; display: flex; gap: 5px; overflow-x: auto; padding: 6px 2px; }
.exam__palette::-webkit-scrollbar { height: 6px; }
.exam__palette::-webkit-scrollbar-thumb { background: #c4c9ce; border-radius: 999px; }
.pal { width: 30px; height: 30px; flex-shrink: 0; border: 1px solid #b6bbc1; background: #fff; border-radius: 4px; font-size: 13px; font-weight: 700; color: #333; }
.pal:hover { border-color: var(--teal); }
.pal.is-done { background: #d7dbdf; border-color: #9aa0a6; color: #1a1a1a; }
.pal.is-cur { border: 2px solid var(--teal); color: var(--teal); }
.exam__submit { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; padding: 10px 22px; border-radius: 5px; font-weight: 700; font-size: 14px; color: #fff; background: var(--teal); }
.exam__submit:hover { background: var(--deep); }

/* ============================================================ SCORE / WORKSHEET */
.score-hero { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: center; padding: 8px 0 20px; }
.score-ring { width: 128px; height: 128px; border-radius: 50%; border: 6px solid var(--teal); background: var(--surface); display: grid; place-items: center; }
.score-ring__inner { width: 102px; height: 102px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; border: 1px solid var(--line-2); }
.score-ring__num { font-size: 37px; font-weight: 800; color: var(--deep); letter-spacing: -.03em; }
.score-ring__den { font-size: 16px; color: var(--muted); font-weight: 600; }
.band { font-size: 21px; font-weight: 800; color: #fff; background: var(--teal); padding: 12px 22px; border-radius: var(--r); }
.score-stats { display: flex; gap: 22px; }
.score-stats .n { font-size: 25px; font-weight: 800; }
.score-stats .n.ok { color: var(--ok); }
.score-stats .n.no { color: var(--no); }
.score-stats .l { font-size: 12px; color: var(--muted); font-weight: 600; }
.all-correct { text-align: center; padding: 28px; font-size: 18px; font-weight: 700; color: var(--teal); }

/* total score banner */
.totalscore { display: flex; align-items: baseline; gap: 12px; justify-content: center; margin: 4px 0 22px; }
.totalscore b { font-size: 44px; font-weight: 800; color: var(--deep); letter-spacing: -.03em; }
.totalscore span { font-size: 18px; color: var(--muted); font-weight: 600; }

/* worksheet table */
.ws { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.ws__head, .ws__row { display: grid; grid-template-columns: 54px 1.1fr 1.1fr 1.4fr; gap: 0; }
.ws__head { background: var(--surface-2); border-bottom: 1px solid var(--line); font-weight: 700; font-size: 12.5px; color: var(--deep); text-transform: uppercase; letter-spacing: .04em; }
.ws__head > div, .ws__row > div { padding: 13px 14px; border-right: 1px solid var(--line-2); }
.ws__head > div:last-child, .ws__row > div:last-child { border-right: none; }
.ws__row { border-bottom: 1px solid var(--line-2); align-items: start; }
.ws__row:last-child { border-bottom: none; }
.ws__row.is-ok { background: var(--ok-soft); }
.ws__row.is-no { background: var(--no-soft); }
.ws__qn { font-weight: 800; color: var(--deep); }
.ws__qn .t { display: block; font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; margin-top: 3px; }
.ws__your { color: var(--no); font-weight: 600; font-size: 14px; word-break: break-word; }
.ws__your.ok { color: var(--ok); }
.ws__correct { color: var(--deep); font-weight: 700; font-size: 14px; word-break: break-word; }
.ws__why textarea { width: 100%; min-height: 52px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13.5px; color: var(--ink); background: var(--surface); resize: vertical; line-height: 1.5; }
.ws__why textarea:focus { outline: none; border-color: var(--teal); }
.ws__why .ok-note { color: var(--ok); font-weight: 600; font-size: 13px; }
.ws__model { margin-top: 8px; font-size: 12.5px; }
.ws__model summary { cursor: pointer; color: var(--teal); font-weight: 700; list-style: none; }
.ws__model summary::-webkit-details-marker { display: none; }
.ws__model summary::before { content: "▸ "; }
.ws__model[open] summary::before { content: "▾ "; }
.ws__model .m { margin-top: 6px; padding: 9px 11px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; color: var(--ink-soft); line-height: 1.6; }
.ws__model .m b { color: var(--deep); }

/* error-type ticks */
.errtags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.errtags__lab { width: 100%; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1px; }
.errtag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); padding: 5px 10px; border-radius: 999px; cursor: pointer; user-select: none; transition: background .15s, border-color .15s, color .15s; }
.errtag input { display: none; }
.errtag:hover { border-color: var(--mint); }
.errtag.is-on { background: var(--no); border-color: var(--no); color: #fff; }
.errtag .tick { font-size: 11px; }

/* recommendation banner (flat) */
.reco { background: var(--mint-soft); border: 1px solid var(--mint); border-radius: var(--r-lg); padding: 22px 24px; }
.reco h4 { color: var(--deep); font-size: 18px; margin-bottom: 8px; }
.reco p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }
.reco--dash { margin-bottom: 30px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: space-between; }
.reco--dash .reco__txt { flex: 1; min-width: 260px; }

/* per-type breakdown bars */
.pass-breakdown-title { font-weight: 700; color: var(--deep); margin: 20px 0 12px; }
.pass-row { padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.pass-row:last-child { border-bottom: none; }
.pass-row__top { display: grid; grid-template-columns: 150px 1fr 52px; align-items: center; gap: 14px; }
.pass-row__name { font-weight: 600; color: var(--ink); font-size: 14px; }
.pass-row__bar { height: 9px; background: var(--line-2); border-radius: 999px; overflow: hidden; }
.pass-row__bar span { display: block; height: 100%; border-radius: 999px; background: var(--teal); }
.pass-row__score { font-weight: 700; color: var(--deep); text-align: right; font-size: 14px; }

/* vocab cards */
.vocab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.vocab { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.vocab__w { font-weight: 800; color: var(--deep); font-size: 17px; }
.vocab__pos { font-size: 12px; color: var(--muted); font-style: italic; }
.vocab__def { font-size: 13.5px; color: var(--ink-soft); margin-top: 7px; line-height: 1.55; }
.vocab__uz { font-size: 14px; color: var(--teal); font-weight: 600; margin-top: 5px; line-height: 1.45; }
.vocab__ex { font-size: 13px; color: var(--muted); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-2); line-height: 1.5; }

/* translation modal */
.tx { text-align: left; display: flex; flex-direction: column; gap: 14px; margin: 6px 0 4px; }
.tx__lab { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); margin-bottom: 4px; }
.tx__row p { font-size: 15px; color: var(--ink); line-height: 1.55; }
.tx__en { color: var(--ink-soft); font-style: italic; }
.tx__note { font-size: 13.5px; color: var(--ink-soft); }

/* ============================================================ MODAL + AUTH */
.modal-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(15,23,42,.45); display: grid; place-items: center; padding: 24px; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.modal { width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 30px; animation: modalIn .25s var(--ease) both; }
.modal--wide { max-width: 760px; }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px); } }
.modal h2 { font-size: 23px; margin-bottom: 6px; text-align: center; }
.modal .sub { text-align: center; color: var(--muted); font-size: 14.5px; margin-bottom: 20px; }
.modal__actions { display: flex; gap: 12px; justify-content: center; margin-top: 22px; }
.hint-text { text-align: center; color: var(--ink-soft); font-size: 14.5px; margin: 14px 0; }
.choice { display: block; width: 100%; text-align: left; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: var(--r); padding: 17px 19px; margin-bottom: 11px; transition: border-color .2s; }
.choice:hover { border-color: var(--teal); }
.choice__t { font-weight: 700; color: var(--deep); font-size: 16px; margin-bottom: 4px; }
.choice__d { color: var(--muted); font-size: 13.5px; line-height: 1.5; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.field input { width: 100%; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface-2); font-size: 15px; color: var(--ink); transition: border-color .2s; }
.field input:focus { outline: none; border-color: var(--teal); background: var(--surface); }
.field input.code { letter-spacing: .4em; text-align: center; font-size: 22px; font-weight: 700; }
.auth-err { color: var(--no); font-size: 13.5px; text-align: center; margin-top: 10px; min-height: 18px; }
.auth-note { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 14px; line-height: 1.5; }
.gate { min-height: 60vh; display: grid; place-items: center; text-align: center; }

.flash-note { position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 20px); z-index: 90; background: var(--deep); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 14px; opacity: 0; transition: opacity .3s, transform .3s; }
.flash-note.show { opacity: 1; transform: translate(-50%, 0); }

.hl-toolbar { position: fixed; top: 56px; right: 18px; z-index: 70; display: flex; gap: 4px; background: var(--deep); padding: 5px; border-radius: 999px; }
.hl-toolbar[hidden] { display: none; }
.hl-toolbar button { color: #fff; font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 999px; transition: background .2s; }
.hl-toolbar button:hover { background: rgba(255,255,255,.16); }

/* ============================================================ LOADING / FOOTER */
.loading { min-height: 60vh; display: grid; place-items: center; text-align: center; color: var(--muted); }
.spinner { width: 40px; height: 40px; border: 3px solid var(--line-2); border-top-color: var(--teal); border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 16px; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { text-align: center; padding: 56px 20px; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-lg); }
/* pricing / premium plans */
.cur-toggle { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; margin: 0 auto 28px; }
.cur-toggle button { padding: 7px 18px; border-radius: 999px; font-weight: 700; font-size: 13.5px; color: var(--ink-soft); transition: background .2s, color .2s; }
.cur-toggle button.is-active { background: var(--teal); color: #fff; }
/* ---------- pricing comparison table ---------- */
.ptable { max-width: 920px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.ptable__row { display: grid; grid-template-columns: 1.7fr 1fr 1.12fr 1fr; align-items: center; border-bottom: 1px solid var(--line-2); }
.ptable__row:last-child { border-bottom: none; }
.ptable__cell { padding: 14px 16px; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; }
.ptable__lab { justify-content: flex-start; text-align: left; font-size: 14px; font-weight: 600; color: var(--ink-soft); line-height: 1.35; }
/* highlighted Premium column runs the full height */
.ptable__c2 { background: var(--mint-soft); }
.ptable__row:last-child .ptable__c2 { border-radius: 0 0 4px 4px; }

/* header row with plans */
.ptable__head { align-items: stretch; border-bottom: 2px solid var(--line); }
.ptable__head .ptable__cell { flex-direction: column; gap: 8px; padding: 22px 14px; min-height: 0; }
.ptable__plan--hot { position: relative; }
.ptable__plan--pro { background: var(--accent-soft); }
.ptable__name { font-size: 14px; font-weight: 800; color: var(--deep); text-transform: uppercase; letter-spacing: .07em; }
.ptable__plan--pro .ptable__name { color: var(--accent-deep); }
.ptable__price { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; justify-content: center; }
.ptable__price b { font-size: 30px; font-weight: 800; color: var(--ink); letter-spacing: -.03em; line-height: 1; }
.ptable__price span { font-size: 12px; color: var(--muted); font-weight: 600; }
.ptable__alt { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.ptable__tag { display: inline-flex; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--teal); padding: 3px 10px; border-radius: 999px; }
.ptable__tag--pro { background: var(--accent); }
.ptable__head .btn { width: 100%; justify-content: center; margin-top: 4px; }

/* value cells */
.ptable__yes .ico { color: var(--ok); }
.ptable__no .ico { color: var(--gray400, #9CA3B0); opacity: .55; }
.ptable__val { gap: 5px; font-size: 13px; font-weight: 700; color: var(--ink); }
.ptable__val .ico { color: var(--ok); flex-shrink: 0; }
.ptable__c2.ptable__yes .ico, .ptable__c2 .ptable__val .ico { color: var(--teal); }

@media (max-width: 720px) {
  .ptable__row { grid-template-columns: 1.4fr .9fr 1fr .9fr; }
  .ptable__cell { padding: 11px 7px; }
  .ptable__lab { font-size: 12.5px; }
  .ptable__head .ptable__cell { padding: 16px 7px; }
  .ptable__price b { font-size: 21px; }
  .ptable__name { font-size: 11px; letter-spacing: .04em; }
  .ptable__head .btn { padding: 8px 6px; font-size: 12px; }
}

/* color-blocked CTA band (orange) */
.cta-band { background: var(--grad-brand); color: #fff; padding: 60px 0; margin-top: 44px; }
.cta-band__in { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.03em; }
.cta-band p { color: rgba(255,255,255,.88); margin-top: 10px; font-size: 16px; max-width: 40em; line-height: 1.55; }

.footer { border-top: 1px solid var(--line); padding: 38px 0; margin-top: 0; }
.footer__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: var(--muted); font-size: 13.5px; }

/* ============================================================ REVEAL */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .06s; }
.reveal[data-d="2"] { transition-delay: .12s; }
.reveal[data-d="3"] { transition-delay: .18s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } }

/* ============================================================ RESPONSIVE */
@media (max-width: 880px) {
  .hero__in { grid-template-columns: 1fr; gap: 32px; }
  .hero__card, .reel { display: none; }
  .feat-grid, .cards-grid { grid-template-columns: 1fr; }
  .levels { grid-template-columns: 1fr; }
  .nav__links { display: none; }
  .section { padding: 52px 0; }
  .ws__head { display: none; }
  .ws__row { grid-template-columns: 1fr; }
  .ws__head > div, .ws__row > div { border-right: none; border-bottom: 1px solid var(--line-2); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Mistake DNA — auto-diagnosed reasons behind wrong answers
   ============================================================ */
.dnas { display: flex; flex-direction: column; gap: 15px; }
.dna { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--d) * .08s); }
.dnas.is-in .dna { opacity: 1; transform: none; }
.dna__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.dna__name { font-weight: 700; color: var(--ink); font-size: 15px; display: inline-flex; align-items: center; gap: 7px; }
.dna__name .ico { color: var(--muted); flex-shrink: 0; }
.dna__num { font-size: 13.5px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.dna__track { height: 11px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.dna__track > i { display: block; height: 100%; width: 0; background: var(--teal); border-radius: 999px; transition: width 1s var(--ease); transition-delay: calc(var(--d) * .08s + .1s); }
.dnas.is-in .dna__track > i { width: var(--w); }
.dna.is-top .dna__name { color: var(--no); }
.dna.is-top .dna__name .ico { color: var(--no); }
.dna.is-top .dna__track > i { background: var(--no); }
.dna-fix { display: flex; gap: 20px; align-items: center; margin-top: 26px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 24px 26px; }
.dna-fix__ic { width: 60px; height: 60px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: var(--no); background: var(--no-soft); }
.dna-fix__b h3 { font-size: 21px; color: var(--deep); margin-bottom: 8px; letter-spacing: -.02em; }
.dna-fix__b p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
@media (max-width: 720px) { .dna-fix { flex-direction: column; text-align: center; } }

/* worksheet: auto-diagnosed likely cause chip */
.ws-cause { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--no); background: var(--no-soft); border: 1px solid var(--no); border-radius: 999px; padding: 4px 11px; margin-bottom: 9px; cursor: help; }
.ws-cause .ico { color: var(--no); flex-shrink: 0; }
.ws-cause b { color: var(--no); }

/* ============================================================
   Daily streak bar (dashboard)
   ============================================================ */
.streakbar { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 18px 24px; margin-bottom: 30px; }
.streakbar__fire { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 86px; padding-right: 22px; border-right: 1px solid var(--line-2); color: var(--muted); }
.streakbar__fire .ico { color: var(--line); transition: color .4s var(--ease), transform .4s var(--ease); }
.streakbar__fire.is-on .ico { color: var(--no); transform: scale(1.08); }
.streakbar__fire b { font-size: 30px; font-weight: 800; color: var(--deep); line-height: 1; letter-spacing: -.03em; }
.streakbar__fire.is-on b { color: var(--no); }
.streakbar__fire span { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.streakbar__mid { flex: 1; min-width: 220px; }
.streakbar__goal { font-weight: 700; color: var(--ink); font-size: 14.5px; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.streakbar__goal .ico { color: var(--teal); flex-shrink: 0; }
.streakbar__week { display: flex; gap: 7px; }
.streakbar__dot { width: 18px; height: 18px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line-2); }
.streakbar__dot.is-on { background: var(--no); border-color: var(--no); }
.streakbar__dot.is-today { outline: 2px solid var(--teal); outline-offset: 1px; }
.streakbar__best { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 9px; }
.streakbar .pill { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: #fff; color: var(--no); font-size: 12px; font-weight: 800; }
@media (max-width: 640px) { .streakbar { gap: 16px; } .streakbar__fire { border-right: 0; border-bottom: 1px solid var(--line-2); padding: 0 0 14px; width: 100%; flex-direction: row; justify-content: center; } .streakbar button { width: 100%; } }

/* ============================================================
   Word review — flashcards (spaced repetition)
   ============================================================ */
.rv-prog { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.rv-prog__bar { flex: 1; height: 8px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.rv-prog__bar > i { display: block; height: 100%; background: var(--teal); border-radius: 999px; transition: width .4s var(--ease); }
.rv-prog span { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.rv-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 48px 32px; text-align: center; cursor: pointer; transition: border-color .2s var(--ease); min-height: 200px; display: flex; align-items: center; justify-content: center; }
.rv-card:hover { border-color: var(--teal); }
.rv-card.is-flipped { cursor: default; }
.rv-card__w { font-size: 38px; font-weight: 800; color: var(--deep-2); letter-spacing: -.02em; }
.rv-card__pos { font-size: 17px; font-weight: 600; color: var(--muted); font-style: italic; }
.rv-card__src { font-size: 13px; color: var(--muted); margin-top: 10px; }
.rv-card__back { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line-2); animation: weakPop .4s var(--ease) both; }
.rv-card__def { font-size: 18px; color: var(--ink); line-height: 1.5; }
.rv-card__def--none { font-size: 15px; color: var(--muted); font-style: italic; }
.rv-card__uz { font-size: 17px; color: var(--teal); font-weight: 700; margin-top: 10px; }
.rv-card__ex { font-size: 15px; color: var(--ink-soft); font-style: italic; margin-top: 12px; }
.rv-actions { display: flex; gap: 14px; justify-content: center; margin-top: 22px; }
.rv-actions .btn { min-width: 180px; }
.rv-empty { text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 48px 32px; }
.rv-empty .ico { color: var(--teal); margin-bottom: 8px; }
.rv-empty h3 { font-size: 24px; color: var(--deep); margin-bottom: 10px; }
.rv-empty p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; max-width: 460px; margin: 0 auto 20px; }
@media (max-width: 560px) { .rv-actions { flex-direction: column; } .rv-actions .btn { width: 100%; } .rv-card__w { font-size: 30px; } }

/* ============================================================
   My-words spaced reuse — learner's saved words inside passages
   ============================================================ */
.myword { font-style: italic; color: var(--deep); border-bottom: 1px dotted var(--mint); cursor: pointer; transition: background .2s var(--ease); }
.myword:hover { background: var(--mint-soft); border-radius: 3px; }
.mywords-box { display: block; background: var(--surface-2); border: 1px dashed var(--mint); border-radius: 12px; padding: 10px 14px; margin: 0 0 18px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.9; }
.mywords-box .ico { color: var(--teal); vertical-align: -.22em; margin-right: 6px; }
.mywords-box__lab { font-weight: 700; color: var(--deep); margin-right: 4px; }
.mywords-box__w { font-style: italic; font-weight: 600; color: var(--teal); cursor: pointer; }
.mywords-box__w:hover { text-decoration: underline; }
.mywords-box__sep { color: var(--line); margin: 0 6px; }

/* ============================================================
   My words — full saved list page
   ============================================================ */
.btn--link { background: transparent; border: 0; color: var(--teal); padding: 6px 8px; font-weight: 700; }
.btn--link:hover { color: var(--deep); text-decoration: underline; }
.streakbar__actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.words-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.words-head p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; max-width: 560px; margin-top: 8px; }
.wordgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 26px; }
.wordcard { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 18px 16px; cursor: pointer; transition: border-color .2s var(--ease); }
.wordcard:hover { border-color: var(--teal); }
.wordcard__del { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); display: grid; place-items: center; opacity: 0; transition: opacity .2s var(--ease), color .2s var(--ease); }
.wordcard:hover .wordcard__del { opacity: 1; }
.wordcard__del:hover { color: var(--no); border-color: var(--no); }
.wordcard__w { font-size: 21px; font-weight: 800; color: var(--deep-2); letter-spacing: -.02em; padding-right: 26px; }
.wordcard__pos { font-size: 13px; font-weight: 600; color: var(--muted); font-style: italic; }
.wordcard__def { font-size: 14px; color: var(--ink-soft); line-height: 1.5; margin-top: 8px; }
.wordcard__def--none { font-style: italic; color: var(--muted); }
.wordcard__ex { font-size: 13px; color: var(--muted); font-style: italic; margin-top: 8px; }
.wordcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.wordcard__src { font-size: 11.5px; color: var(--muted); font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.wordstatus { font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.wordstatus--due { color: #fff; background: var(--no); }
.wordstatus--learned { color: var(--deep); background: var(--ok-soft); border: 1px solid var(--line); }
.wordstatus--new { color: var(--teal); background: var(--mint-soft); }
@media (max-width: 720px) { .words-head { flex-direction: column; align-items: stretch; } .words-head button { width: 100%; } }

/* ============================================================
   Level view — Cambridge vs Other reading groups
   ============================================================ */
.lvlgroup { margin-top: 34px; }
.lvlgroup__head { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 4px; }
.lvlgroup__head h3 { font-size: 21px; color: var(--deep-2); letter-spacing: -.02em; }
.lvlgroup__count { font-size: 12.5px; font-weight: 800; color: var(--teal); background: var(--mint-soft); padding: 3px 11px; border-radius: 999px; }
.lvlgroup__sub { font-size: 14px; color: var(--muted); margin: 8px 0 0; }
.lvlgroup .cards-grid { margin-top: 22px; }
.lvlgroup__empty { margin-top: 20px; }

/* ============================================================
   Notes completion — structured mode (bold sub-headings + bullets)
   ============================================================ */
.notes__sub { font-weight: 800; color: var(--deep); font-size: 15px; margin: 16px 0 4px; letter-spacing: -.01em; }
.notes--structured .notes__sub:first-child { margin-top: 0; }
.notes--structured .notes__line { border-bottom: none; padding: 5px 0 5px 22px; position: relative; line-height: 2; }
.notes--structured .notes__line--bullet::before { content: "•"; position: absolute; left: 7px; top: 5px; color: var(--muted); font-weight: 700; }
.exam .notes--structured .notes__line { border-bottom: none; }
.exam .notes--structured .notes__line--bullet::before { color: #6b7177; }

/* passage lead / standfirst — bold italic line under the title */
.passage__lead { font-weight: 800; font-style: italic; text-align: center; color: var(--deep); font-size: 16px; line-height: 1.5; margin: 0 auto 20px; max-width: 90%; }
.exam .passage__lead { color: #1a1a1a; }

/* ============================================================
   SaaS enhancements — theme toggle, premium, exam UX, results
   ============================================================ */

/* theme toggle */
.theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); transition: background .2s, border-color .2s, color .2s, transform .15s; }
.theme-toggle:hover { border-color: var(--teal); color: var(--teal); }
.nav__actions { display: flex; align-items: center; gap: 8px; }

/* premium badge in nav */
.premium-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: var(--teal); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.premium-badge .ico { color: #fff; }
.pro-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.pro-badge .ico { color: #fff; }
.tcard__lock--pro { background: var(--accent); }
.tcard.is-locked--pro::after { background: var(--accent-soft); }
.article-reader h1 { font-size: clamp(26px, 4vw, 34px); margin: 16px 0 20px; line-height: 1.2; }
.article-reader__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.article-reader__vocab { margin: 0 0 20px; font-size: 13.5px; line-height: 1.7; }
.article-reader__vocab-lab { font-weight: 700; color: var(--muted); margin-right: 6px; }
.article-reader__body { font-size: 17px; line-height: 1.75; color: var(--ink); }
.article-reader__body p { margin: 0 0 1em; }
/* override .passage sticky/max-height for article reader — it's not a split panel here */
.article-reader .passage,
.article-reader .article-reader__body {
  position: static !important;
  top: auto !important;
  max-height: none !important;
  overflow-y: visible !important;
  height: auto !important;
  display: block !important;
  visibility: visible !important;
}

/* article comprehension / paraphrase section */
.article-comp { margin-top: 32px; padding-top: 28px; border-top: 2px solid var(--line); }
.article-comp__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.article-comp__head .ico { color: var(--teal); }
.article-comp__head h3 { font-size: 20px; color: var(--deep); font-weight: 800; }
.article-comp__sub { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; margin-bottom: 16px; }
.article-comp__area { width: 100%; min-height: 120px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface-2); font-size: 15px; color: var(--ink); line-height: 1.7; resize: vertical; transition: border-color .2s, background .2s; font-family: inherit; }
.article-comp__area:focus { outline: none; border-color: var(--teal); background: var(--surface); }
.article-comp__area::placeholder { color: var(--muted); }
.article-comp__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.article-comp__wc { font-size: 12.5px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.article-comp__saved { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--ok); opacity: 0; transition: opacity .3s; }
.article-comp__saved.is-show { opacity: 1; }

/* vocabulary provenance in test passages */
.mywords-box__src { font-size: 11px; color: var(--teal); font-weight: 600; font-style: italic; margin-left: 2px; }
.myword { font-style: italic; color: var(--deep); cursor: pointer; border-bottom: 1px dashed var(--mint); transition: color .15s; }
.myword:hover { color: var(--teal); }
.myword-prov { display: block; font-size: 12px; color: var(--muted); font-style: normal; margin-top: 2px; }
.myword-prov b { color: var(--teal); font-weight: 700; }
.upgrade-modal--pro h2 .ico { color: var(--accent); }

/* social proof strip */
.proof { padding: 48px 0; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof__in { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.proof__label { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.proof__stats { display: flex; gap: 48px; flex-wrap: wrap; justify-content: center; }
.proof__stat b { display: block; font-size: 32px; font-weight: 800; color: var(--deep-2); letter-spacing: -.03em; }
.proof__stat span { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.proof__quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1000px; width: 100%; }
.proof__quote { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; text-align: left; transition: border-color .2s var(--ease); }
.proof__quote:hover { border-color: var(--teal); }
.proof__quote p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; font-style: italic; }
.proof__quote cite { display: block; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--deep); font-style: normal; }
.proof__quote cite span { display: block; font-weight: 500; color: var(--muted); font-size: 12px; margin-top: 2px; }
@media (max-width: 880px) { .proof__quotes { grid-template-columns: 1fr; } .proof__stats { gap: 28px; } }

/* features section — SaaS grid */
.features { background: var(--bg); }
.feat:hover { border-color: var(--teal); }

/* premium lock on test cards */
.tcard.is-locked { position: relative; }
.tcard.is-locked::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.55); border-radius: inherit; pointer-events: none; }
.tcard__lock { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--teal); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.tcard__lock .ico { color: #fff; }

/* usage banner for free users */
.usage-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 20px; margin-bottom: 24px; }
.usage-banner p { font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.usage-banner b { color: var(--deep); }

/* exam progress bar */
.exam__progress { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 36px; background: #f6f7f8; border-bottom: 1px solid #dde1e4; flex-shrink: 0; }
.exam__progress-bar { flex: 1; height: 6px; background: #dde1e4; border-radius: 999px; overflow: hidden; }
.exam__progress-bar > i { display: block; height: 100%; background: var(--teal); border-radius: 999px; transition: width .35s var(--ease); }
.exam__progress-text { font-size: 12.5px; font-weight: 700; color: #555; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* exam question nav (prev/next) */
.exam__qnav { display: flex; gap: 6px; flex-shrink: 0; }
.exam__qnav button { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border: 1px solid #bfc4ca; background: #fff; border-radius: 4px; font-size: 12.5px; font-weight: 600; color: #444; transition: background .15s, border-color .15s; }
.exam__qnav button:hover:not(:disabled) { border-color: var(--teal); background: #f8fafc; }
.exam__qnav button:disabled { opacity: .4; cursor: not-allowed; }

/* enhanced answer selection in exam */
.exam .opt:has(input:checked) { border-color: var(--teal); background: var(--mint-soft); }
.exam .gap:not(:placeholder-shown) { border-color: var(--teal); background: #f8fafc; }
.exam .qpanel select:not([value=""]) { border-color: var(--teal); background: #f8fafc; }

/* results page */
.results-hero { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; padding: 28px 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); margin-bottom: 28px; }
@media (max-width: 720px) { .results-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; } }
.results-hero__meta h2 { font-size: 28px; color: var(--deep-2); margin-bottom: 6px; }
.results-hero__meta p { color: var(--muted); font-size: 15px; }
.results-summary { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 16px; }
.results-pill { display: flex; flex-direction: column; align-items: center; padding: 12px 20px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line-2); min-width: 90px; }
.results-pill b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.results-pill span { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.results-pill--ok b { color: var(--ok); }
.results-pill--no b { color: var(--no); }

.results-tips { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 28px; margin-bottom: 28px; }
.results-tips h3 { font-size: 18px; color: var(--deep); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.results-tips ul { margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
.results-tips li { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }

/* enhanced footer */
.footer { background: var(--bg); padding: 56px 0 32px; border-top: 1px solid var(--line); }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; margin-bottom: 40px; }
.footer__brand p { margin-top: 12px; font-size: 14px; color: var(--muted); line-height: 1.6; max-width: 280px; }
.footer__col h4 { font-size: 13px; font-weight: 800; color: var(--deep); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.footer__col a, .footer__col button { display: block; font-size: 14px; color: var(--ink-soft); padding: 5px 0; font-weight: 500; background: none; border: none; text-align: left; cursor: pointer; transition: color .15s; }
.footer__col a:hover, .footer__col button:hover { color: var(--teal); }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
@media (max-width: 880px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

/* upgrade modal */
.upgrade-modal { text-align: center; }
.upgrade-modal__price { font-size: 42px; font-weight: 800; color: var(--deep-2); letter-spacing: -.03em; margin: 12px 0 4px; }
.upgrade-modal__sub { font-size: 14px; color: var(--muted); font-weight: 600; margin-bottom: 20px; }
.upgrade-modal__feats { text-align: left; margin: 20px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.upgrade-modal__feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-soft); }
.upgrade-modal__feats .ico { color: var(--teal); flex-shrink: 0; margin-top: 2px; }

/* hover — border only, no shadow */
.btn { transition: background .2s, border-color .2s; }
.tcard { transition: border-color .2s; }
.tcard:hover { border-color: var(--teal); }
.level { transition: border-color .2s; }
.level:hover { border-color: var(--teal); }

/* mobile nav menu hint */
@media (max-width: 880px) {
  .nav__in { gap: 10px; }
  .nav__cta { padding: 8px 14px; font-size: 13px; }
}

/* ============================================================ TESTS HUB */
.hub-head { max-width: 720px; margin-bottom: 22px; }
.hub-head h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.03em; }
.hub-head p { margin-top: 10px; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }

/* band (analysis depth) selector */
.bandbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 20px; margin-bottom: 24px; }
.bandbar__lab { display: flex; flex-direction: column; font-weight: 800; color: var(--ink); font-size: 14px; }
.bandbar__lab .ico { color: var(--teal); vertical-align: -.18em; margin-right: 6px; }
.bandbar__lab small { font-weight: 500; color: var(--muted); font-size: 12.5px; margin-top: 4px; max-width: 42ch; }
.bandbar__opts { display: flex; gap: 8px; flex-wrap: wrap; }
.bandchip { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-soft); transition: border-color .15s, background .15s, color .15s; min-width: 78px; }
.bandchip b { font-size: 13px; font-weight: 800; }
.bandchip span { font-size: 11px; color: var(--muted); }
.bandchip:hover { border-color: var(--accent, var(--teal)); }
.bandchip.is-active { border-color: var(--accent, var(--teal)); background: var(--mint-soft); color: var(--deep); }
.bandchip.is-active span { color: var(--deep); }

/* hub tabs (Full / By passage / By type) */
.hubtabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 26px; }
.hubtab { display: inline-flex; align-items: center; gap: 7px; padding: 11px 20px; border-radius: 10px; font-weight: 700; font-size: 14.5px; color: var(--ink-soft); transition: background .15s, color .15s; }
.hubtab .ico { vertical-align: -.16em; }
.hubtab.is-active { background: var(--teal); color: #fff; }
.hubtab:not(.is-active):hover { background: var(--surface-2); color: var(--deep); }

/* test source categories (Cambridge / Other) */
.testgroup { margin-bottom: 38px; }
.testgroup__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.testgroup__head h2 { font-size: 22px; letter-spacing: -.02em; color: var(--ink); }
.testgroup__count { font-size: 12.5px; font-weight: 700; color: var(--deep); background: var(--mint-soft); border: 1px solid var(--mint); padding: 3px 11px; border-radius: 999px; }
.testgroup__sub { color: var(--muted); font-size: 14px; margin-bottom: 18px; }

/* ============================================================ PARAPHRASE LAB */
.lab-head { margin-bottom: 22px; }
.lab-head h1 { font-size: clamp(26px, 4vw, 36px); letter-spacing: -.03em; }
.lab-head > p { margin-top: 10px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; max-width: 60ch; }
.lab-stats { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.lab-stat { flex: 1; min-width: 110px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; text-align: center; }
.lab-stat b { display: block; font-size: 30px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.lab-stat span { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.lab-stat--due b { color: var(--teal); }
.lab-stat--ok b { color: var(--ok); }

/* the flashcard */
.lab-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; margin-top: 6px; }
.lab-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.lab-card__src { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.lab-card__left { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--deep); background: var(--mint-soft); border: 1px solid var(--mint); padding: 4px 10px; border-radius: 999px; }
.lab-card__q-lab, .lab-card__ev-lab { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.lab-card__q { font-size: 21px; line-height: 1.4; color: var(--ink); font-weight: 600; }
.lab-card__cue { margin-top: 14px; font-size: 14px; color: var(--muted); font-style: italic; }
.lab-card__reveal { margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--line); }
.lab-card__ev-lab .ico { color: var(--teal); vertical-align: -.16em; }
.lab-card__ev { font-size: 17px; line-height: 1.55; color: var(--ink); background: var(--mint-soft); border-left: 3px solid var(--teal); border-radius: 0 10px 10px 0; padding: 14px 16px; }
.lab-card__ans { margin-top: 14px; font-size: 15px; color: var(--ink-soft); }
.lab-card__ans b { color: var(--deep); }
.lab-card__why { margin-top: 10px; font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
.lab-card__actions { margin-top: 24px; }
.lab-card__actions .btn { width: 100%; justify-content: center; }

/* grading buttons */
.lab-rate { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lab-rate__btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 13px 10px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); font-weight: 800; font-size: 15px; color: var(--ink); transition: border-color .15s, background .15s, color .15s; }
.lab-rate__btn small { font-weight: 600; font-size: 11px; color: var(--muted); }
.lab-rate__btn--again:hover { border-color: var(--no); background: var(--no-soft); color: var(--no); }
.lab-rate__btn--again:hover small { color: var(--no); }
.lab-rate__btn--good:hover { border-color: var(--teal); background: var(--mint-soft); color: var(--deep); }
.lab-rate__btn--good:hover small { color: var(--deep); }
.lab-rate__btn--easy:hover { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.lab-rate__btn--easy:hover small { color: var(--ok); }

/* empty / caught-up states */
.lab-empty { text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 44px 28px; }
.lab-empty__icon { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 20px; display: grid; place-items: center; background: var(--mint-soft); color: var(--teal); }
.lab-empty__icon--ok { background: var(--ok-soft); color: var(--ok); }
.lab-empty h3 { font-size: 22px; color: var(--ink); margin-bottom: 8px; }
.lab-empty p { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 48ch; margin: 0 auto 22px; }

/* locked promo for free users */
.lab-lock { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 44px 36px; }
.lab-lock__badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--teal); padding: 5px 13px; border-radius: 999px; margin-bottom: 18px; }
.lab-lock__icon { width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 24px; display: grid; place-items: center; background: var(--mint-soft); color: var(--teal); }
.lab-lock h1 { font-size: clamp(26px, 4vw, 36px); letter-spacing: -.03em; margin-bottom: 14px; }
.lab-lock p { color: var(--ink-soft); font-size: 16px; line-height: 1.65; max-width: 56ch; margin: 0 auto 14px; }
.lab-lock__sci { font-size: 14.5px; color: var(--muted); background: var(--surface-2); border-radius: var(--r); padding: 16px 20px; }
.lab-lock .btn { margin-top: 12px; }

/* CTA on results page */
.lab-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: var(--mint-soft); border: 1px solid var(--mint); border-radius: var(--r-lg); padding: 20px 24px; margin-bottom: 26px; }
.lab-cta__txt b { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; color: var(--deep); }
.lab-cta__txt b .ico { color: var(--teal); }
.lab-cta__txt p { margin-top: 6px; font-size: 14px; color: var(--ink-soft); line-height: 1.5; max-width: 60ch; }

@media (max-width: 640px) {
  .bandbar { flex-direction: column; align-items: flex-start; }
  .lab-card__q { font-size: 18px; }
  .lab-rate__btn { font-size: 13px; padding: 11px 6px; }
}

/* ============================================================ EXAM: start gate + pause */
.exam__start { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; color: #fff; background: var(--teal); border: 1px solid var(--deep); padding: 7px 16px; border-radius: 6px; }
.exam__start:hover { background: var(--deep); }
.exam__start .ico { color: #fff; }
.exam__pause { margin-left: 8px; min-width: 28px; height: 26px; display: inline-grid; place-items: center; border: 1px solid #bfc4ca; background: #fff; border-radius: 5px; font-size: 13px; color: #333; line-height: 1; }
.exam__pause:hover { background: #f4f4f4; }
.exam.is-paused .exam__body { filter: blur(7px); pointer-events: none; user-select: none; }
.exam.is-paused .exam__nav { opacity: .45; pointer-events: none; }
.exam.is-paused::after { content: "Paused — press the ▶ button to resume"; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 15px; z-index: 60; pointer-events: none; }

/* ============================================================ ERROR SHEET intro */
.ws-intro { margin: 32px 0 16px; }
.ws-intro h2 { font-size: 23px; letter-spacing: -.02em; color: var(--ink); }
.ws-intro p { margin-top: 8px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; max-width: 72ch; }

/* ============================================================ PRE-TEST review of last mistakes */
.pre__head { margin-bottom: 22px; }
.pre__kicker { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--deep); margin-bottom: 10px; }
.pre__kicker .ico { color: var(--teal); }
.pre__head h1 { font-size: clamp(26px, 4vw, 34px); letter-spacing: -.03em; }
.pre__head p { margin-top: 10px; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
.pre__list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.pre-row { display: grid; grid-template-columns: 74px 1fr 1fr; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--no); border-radius: 12px; padding: 12px 16px; }
.pre-row__q { font-weight: 800; color: var(--ink); display: flex; flex-direction: column; line-height: 1.2; }
.pre-row__q .t { font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.pre-row__a { font-size: 14px; color: var(--ink-soft); }
.pre-row__lab { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-right: 6px; }
.pre-row__a s { color: var(--no); text-decoration-thickness: 1px; }
.pre-row__a b { color: var(--ok); }
.pre-row__cause { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); }
.pre__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
@media (max-width: 600px) { .pre-row { grid-template-columns: 56px 1fr; } }

/* ============================================================ AI EXAMINER (Pro) */
.ai-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--r-lg); padding: 20px 24px; margin-bottom: 26px; }
.ai-cta__txt b { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; color: var(--accent-deep); }
.ai-cta__txt b .ico { color: var(--accent); }
.ai-cta__txt p { margin-top: 6px; font-size: 14px; color: var(--ink-soft); line-height: 1.5; max-width: 64ch; }

.ai-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; margin-bottom: 26px; }
.ai-box__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ai-box__head b { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; color: var(--ink); }
.ai-box__head b .ico { color: var(--accent); }
.ai-box__band { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 4px; }
.ai-box__band b { display: inline; font-size: inherit; color: var(--deep); }
.ai-box__hint { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.ai-box__hint b { color: var(--ink-soft); }

.ai-out { margin-top: 16px; border-top: 1px solid var(--line-2); padding-top: 16px; font-size: 15px; color: var(--ink); line-height: 1.65; }
.ai-out[hidden] { display: none; }
.ai-out.is-streaming { white-space: pre-wrap; color: var(--ink-soft); font-size: 14px; }
.ai-out.is-error { color: var(--no); white-space: pre-wrap; }
.ai-out h2 { font-size: 19px; margin: 18px 0 8px; letter-spacing: -.02em; }
.ai-out h3 { font-size: 16px; margin: 16px 0 6px; color: var(--deep); }
.ai-out h4 { font-size: 14.5px; margin: 14px 0 6px; color: var(--ink); }
.ai-out p { margin: 0 0 12px; }
.ai-out ul, .ai-out ol { margin: 0 0 14px; padding-left: 22px; }
.ai-out li { margin: 4px 0; }
.ai-out strong { color: var(--ink); font-weight: 700; }
.ai-out code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-size: 13px; }
.ai-out hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; }
.ai-out .md-table { width: 100%; border-collapse: collapse; margin: 12px 0 16px; font-size: 13.5px; }
.ai-out .md-table th, .ai-out .md-table td { border: 1px solid var(--line); padding: 8px 11px; text-align: left; vertical-align: top; }
.ai-out .md-table th { background: var(--surface-2); font-weight: 700; color: var(--deep); }
.ai-out .md-table tr:nth-child(even) td { background: var(--bg); }
@media (max-width: 640px) { .ai-out .md-table { display: block; overflow-x: auto; } }

/* expert-analysis: evidence sentence drawn with a red underline */
.ai-out .ev-underline { text-decoration: underline; text-decoration-color: var(--no); text-decoration-thickness: 2px; text-underline-offset: 3px; color: var(--ink); font-weight: 500; }
.ai-out em { color: var(--deep); }
.ai-box__empty { color: var(--muted); font-size: 14.5px; margin: 8px 0 0; }

/* ============================================================ ANALYSIS PAGE */
.anz__head { margin-bottom: 22px; }
.anz__head h1 { font-size: clamp(24px, 3.4vw, 32px); letter-spacing: -.03em; }
.anz__sub { margin-top: 8px; color: var(--ink-soft); font-size: 15.5px; }
.anz__h { font-size: 20px; margin: 28px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--line); color: var(--deep); }
.anz-table { width: 100%; border-collapse: collapse; margin: 4px 0 14px; font-size: 14px; }
.anz-table th { background: var(--deep-2); color: #fff; text-align: left; padding: 9px 12px; font-size: 12.5px; font-weight: 700; }
.anz-table td { border: 1px solid var(--line); padding: 8px 12px; }
.anz-table .anz-res { font-weight: 800; }
.anz-table tr.anz-ok td { background: var(--ok-soft); }
.anz-table tr.anz-ok .anz-res { color: var(--ok); }
.anz-table tr.anz-no td { background: var(--no-soft); }
.anz-table tr.anz-no .anz-res { color: var(--no); }
.anz__score { font-size: 16px; margin: 4px 0 6px; }
.anz__probs { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 4px; }
.anz-passage { margin-bottom: 18px; }
.anz-passage h3 { font-size: 16px; color: var(--ink); margin-bottom: 8px; }
.anz-passage__text { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 20px; font-size: 15px; line-height: 1.7; color: var(--ink); }
.anz-passage__text p { margin: 0 0 1em; }
.anz-passage__text p:last-child { margin-bottom: 0; }

/* ============================================================ ANALYSIS: per-mistake cards */
.anz__count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--no); color: #fff; font-size: 12px; font-weight: 800; vertical-align: 2px; margin-left: 6px; }
.qa-cards { display: flex; flex-direction: column; gap: 16px; }
.qa-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--no); border-radius: 16px; padding: 18px 20px; }
.qa-card__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.qa-card__type { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--deep); background: var(--mint-soft); border: 1px solid var(--mint); padding: 4px 10px; border-radius: 999px; }
.qa-card__n { font-size: 13px; font-weight: 800; color: var(--ink); }
.qa-card__ans { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.qa-card__ans b { color: var(--ok); }
.qa-card__your { color: var(--no); }
.qa-card__q { color: var(--no); font-weight: 700; font-size: 16px; line-height: 1.45; margin-bottom: 10px; }
.qa-card__ev { font-size: 14.5px; line-height: 1.6; margin-bottom: 12px; color: var(--ink); }
.qa-card__f { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: start; padding: 7px 0; border-top: 1px solid var(--line-2); font-size: 14.5px; line-height: 1.55; }
.qa-card__lab { font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-weight: 800; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; color: var(--deep); padding-top: 1px; }
.qa-card__val { color: var(--ink-soft); }
.qa-card__val .ev-underline { color: var(--ink); }
@media (max-width: 560px) { .qa-card__f { grid-template-columns: 1fr; gap: 2px; } .qa-card__ans { margin-left: 0; width: 100%; } }