/* ==========================================================================
   SAT Ustoz: shared design system
   Colours come from the logo: its dark leaf green for actions and text, its
   lighter frame green for big brand surfaces, gold for thin accents and focus. Change them here and every page follows.
   Page-specific layout lives in each page's <style> block.

   Design rules
   1. Solid colours only. No gradients.
   2. Corners follow the logo's rounded square and get rounder as things get
      bigger: 4px labels, 10px controls, 16px cards and panels, 28px for the
      hero frame and the logo itself. Only answer bubbles and avatars are round.
   3. Shadows only on things that float above the page (menus, dialogs,
      panels). Cards on the page use a 1px border.
   4. Labels are sentence case. No small-caps eyebrows, no arrows on buttons.
   5. Motion answers what the student did. The one exception is the hero
      demo on the landing page, which plays once.
   ========================================================================== */

:root {
  /* Brand (sampled from the logo) */
  --brand: #2D5038;         /* logo leaf and lettering green: buttons, links, selected answers (9.2:1 with white) */
  --brand-deep: #1F3828;    /* footer, hover on primary buttons */
  --brand-soft: #557A48;    /* logo frame green: hero panel and other large brand surfaces (4.9:1 with white) */
  --brand-tint: #EDF2EA;    /* hover and selected backgrounds */
  --brand-tint-2: #D5E1CF;
  --gold: #C8A86E;          /* logo gold: thin accents only, too light for text on white */
  --gold-text: #7D6220;     /* gold for small text on light backgrounds (5.8:1) */
  --gold-soft: #F3EAD6;
  --gold-on-dark: #C8A86E;  /* gold text on --brand-deep (5.6:1) */

  /* Surfaces and text */
  --page: #FFFFFF;
  --paper: #FFFFFF;
  --ivory: #F5F7F2;         /* quiet surfaces: explanations, score boxes */
  --sunk: #ECF0E7;          /* recessed areas: tracks, toolbars */
  --ink: #1D2A20;
  --ink-2: #3E4A40;
  --muted: #5E6A60;         /* 5.7:1 on white */
  --line: #DFE5D9;
  --line-2: #C9D3C1;
  --edge: #7E8A7A;          /* outlines of answer choices and inputs (3.6:1) */
  --focus: #9A7424;         /* focus ring (4.3:1 on white) */

  /* Status */
  --ok: #276B3C;   --ok-tint: #E4F1E7;
  --bad: #A3312A;  --bad-tint: #FBE9E7;
  --warn: #8A5A00; --warn-tint: #FFF4D6;
  --mark: #FFE58A;

  /* Type: Jost echoes the geometric capitals of the logo; Source Sans 3 is for
     reading. Both cover Latin (Uzbek) and Cyrillic (Russian). */
  --display: 'Jost', 'Source Sans 3', system-ui, sans-serif;
  --sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Shape, depth, motion */
  --r-xs: 4px;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 16px;
  --r-float: 16px;
  --r-xl: 28px;
  --shadow-float: 0 1px 2px rgba(29, 42, 32, .08), 0 12px 32px rgba(29, 42, 32, .16);
  --shadow-lg: var(--shadow-float);
  --shadow: var(--shadow-float);
  --shadow-sm: none;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --t-fast: .14s;
  --t: .22s;

  --wrap: 1120px;
  --gutter: 24px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--t-fast); }
a:hover { color: var(--brand-deep); text-decoration-thickness: 2px; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.1; margin: 0 0 .5em; color: var(--ink); letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.7rem); letter-spacing: -.025em; line-height: 1.04; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: -.02em; }
h3 { font-size: 1.28rem; font-weight: 500; }
p { margin: 0 0 1em; text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--gold-soft); color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
kbd {
  display: inline-block; min-width: 1.7em; padding: .05em .45em; border-radius: var(--r-xs); text-align: center;
  font: 600 .82em/1.5 var(--sans); color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-2); border-bottom-width: 2px;
}
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--brand); color: #fff; padding: 10px 14px; border-radius: var(--r-sm); text-decoration: none; font-weight: 600; }
.skip-link:focus { top: 12px; color: #fff; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
/* A short context line above a title, in sentence case */
.kicker { display: block; font-size: .95rem; font-weight: 600; color: var(--gold-text); margin-bottom: .35em; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.center { text-align: center; }
.num-tab { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* Quiet scrollbars */
* { scrollbar-width: thin; scrollbar-color: #C3CCBC transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #CBD3C4; border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #AFB9A7; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Motion (only in answer to something the student did) ---------- */
@keyframes sh-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sh-pop { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sh-tick { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: .62em 1.2em;
  border-radius: var(--r-sm); border: 1.5px solid transparent;
  font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap; user-select: none;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-deep); color: #fff; }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: #C8A35C; color: var(--ink); }
.btn-ghost { background: var(--paper); color: var(--brand); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-tint); }
.btn-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-light:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.btn-sm { min-height: 36px; padding: .42em .95em; font-size: .92rem; }
.btn-lg { min-height: 52px; padding: .75em 1.5em; font-size: 1.06rem; }
.btn-block { width: 100%; }
.link-btn { background: none; border: 0; padding: 0; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 600; }
.link-btn:hover { color: var(--brand-deep); text-decoration-thickness: 2px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--t); }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 16px; min-height: 70px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand:hover { color: var(--ink); }
.brand-logo { height: 40px; width: auto; flex: 0 0 auto; display: block; }
.brand-name { font-family: var(--display); font-weight: 600; font-size: 1.35rem; line-height: 1; display: block; letter-spacing: -.01em; color: var(--brand); white-space: nowrap; }
.brand-tag { display: block; font-size: .8rem; color: var(--muted); font-weight: 600; margin-top: 3px; line-height: 1.1; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { position: relative; text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: .96rem; padding: 10px 12px; }
.nav a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--brand); transform: scaleX(0); transition: transform var(--t) var(--ease); }
.nav a:hover { color: var(--brand); }
.nav a:hover::after { transform: scaleX(1); background: var(--line-2); }
.nav a[aria-current="page"] { color: var(--brand); }
.nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--brand); }
.lang-switch { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; background: var(--paper); }
.lang-switch button { background: none; border: 0; padding: 6px 10px; font-size: .8rem; font-weight: 700; cursor: pointer; color: var(--muted); transition: background-color var(--t-fast), color var(--t-fast); }
.lang-switch button + button { border-left: 1px solid var(--line); }
.lang-switch button:hover { color: var(--brand); }
.lang-switch button[aria-pressed="true"] { background: var(--brand); color: #fff; }
.menu-btn { display: none; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-sm); width: 44px; height: 44px; cursor: pointer; align-items: center; justify-content: center; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { display: block; width: 18px; height: 2px; border-radius: 1px; background: var(--ink); position: relative; content: ''; transition: transform var(--t) var(--ease), background-color var(--t-fast); }
.menu-btn span::before { position: absolute; top: -6px; }
.menu-btn span::after { position: absolute; top: 6px; }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 880px) {
  .menu-btn { display: inline-flex; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--page); border-bottom: 1px solid var(--line); padding: 4px var(--gutter) 12px; display: none; box-shadow: 0 16px 24px -18px rgba(29,42,32,.35); }
  .nav.open { display: flex; animation: sh-fade .18s ease both; }
  .nav a { padding: 13px 4px; border-bottom: 1px solid var(--line); }
  .nav a:last-child { border-bottom: 0; }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--brand); padding-left: 12px; }
  .header-cta { display: none; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--brand-deep); color: #D2DDCB; padding: 56px 0 calc(28px + var(--safe-b)); margin-top: 72px; border-top: 3px solid var(--gold); }
.site-footer a { color: #EEF3EA; text-decoration-color: rgba(238,243,234,.4); }
.site-footer a:hover { color: #fff; text-decoration-color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
.footer-grid h4, .footer-grid .f-head { font-family: var(--sans); font-size: 1rem; font-weight: 700; color: var(--gold-on-dark); margin-bottom: 10px; letter-spacing: 0; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-brand .brand-name { color: #fff; font-size: 1.35rem; }
.footer-legal { border-top: 1px solid rgba(255,255,255,.14); margin-top: 36px; padding-top: 18px; font-size: .85rem; color: #C3D1BB; }
.site-footer :focus-visible { outline-color: var(--gold-on-dark); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Cards & layout ---------- */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.card h3 { margin-bottom: .35em; }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 700; padding: 1px 7px; border-radius: var(--r-xs); background: var(--gold-soft); color: #5C4612; line-height: 1.5; }
.tag-rw { background: #EDE3F5; color: #4B2A6B; }
.tag-math { background: #E2EEF6; color: #1D4766; }
.tag-ai { background: var(--brand-tint); color: var(--brand); }
.tag-easy { background: var(--ok-tint); color: var(--ok); }
.tag-medium { background: var(--warn-tint); color: var(--warn); }
.tag-hard { background: var(--bad-tint); color: var(--bad); }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px 13px; }
.stat b { display: block; font-family: var(--display); font-weight: 600; font-size: 2rem; line-height: 1.1; color: var(--brand); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat span { font-size: .88rem; color: var(--muted); }
.notice { border-radius: var(--r-sm); padding: 13px 16px; font-size: .95rem; border: 1px solid var(--line); background: var(--paper); }
.notice-warn { background: var(--warn-tint); border-color: #EBD08C; color: #4e3600; }
.notice-bad { background: var(--bad-tint); border-color: #E8B8B3; color: #6b1d17; }
.notice-ok { background: var(--ok-tint); border-color: #B9D8C1; color: #1d4a29; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-sm); background: var(--paper); border: 1px solid var(--line); font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.chip b { font-variant-numeric: tabular-nums; color: var(--ink); }
.chip .dot { width: 9px; height: 9px; border-radius: 2px; background: currentColor; }

/* Progress bars */
.bar { height: 8px; background: var(--sunk); border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--brand); }

/* Status labels (practice tests) */
.status { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 700; padding: 2px 8px 2px 6px; border-radius: var(--r-xs); line-height: 1.45; white-space: nowrap; }
.status svg { width: 13px; height: 13px; flex: 0 0 auto; }
.status-open { background: var(--brand-tint); color: var(--brand); }
.status-progress { background: var(--warn-tint); color: var(--warn); }
.status-done { background: var(--ok-tint); color: var(--ok); }
.status-locked { background: var(--sunk); color: var(--ink-2); }
.soon-badge { display: inline-flex; align-items: center; font-size: .76rem; font-weight: 700; padding: 1px 8px; border-radius: var(--r-xs); background: var(--gold-soft); color: #5C4612; line-height: 1.5; white-space: nowrap; letter-spacing: 0; }

/* ---------- Plans and pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; padding-top: 12px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 24px 24px; }
.plan.is-featured { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.plan-flag { position: absolute; top: -12px; left: 22px; background: var(--brand); color: #fff; font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: var(--r-xs); line-height: 1.4; }
.plan h3 { font-size: 1.45rem; font-weight: 600; margin: 0; }
.plan-for { margin: -6px 0 0; color: var(--muted); font-size: .97rem; }
.plan-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding: 2px 0 14px; border-bottom: 1px solid var(--line); }
.plan-price b { font-family: var(--display); font-weight: 600; font-size: 2.25rem; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-price span { color: var(--muted); font-size: .95rem; }
.plan-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; align-content: start; flex: 1; }
.plan-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .98rem; line-height: 1.45; color: var(--ink-2); }
.plan-list li::before { content: ''; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3L13 4.5' fill='none' stroke='%232D5038' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.plan-cta { margin-top: 10px; }
.plan-cta .btn { width: 100%; }
.plan-cta .btn[disabled]:not(.btn-soon) { opacity: 1; background: var(--brand-tint); border-color: var(--brand-tint-2); color: var(--brand); }
.plan-until { margin: 8px 0 0; text-align: center; font-size: .88rem; color: var(--muted); }
.btn-soon { background: var(--sunk); color: var(--muted); border-color: var(--line-2); gap: 10px; }
.btn.btn-soon[disabled] { opacity: 1; }
.plan-note { margin: 24px 0 0; background: var(--ivory); border-left: 3px solid var(--gold); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 14px 18px; color: var(--ink-2); max-width: 62em; }
.plan-note b { color: var(--ink); }
.plan-bill { margin: 10px 0 0; font-size: .88rem; color: var(--muted); }
.up-steps { padding-left: 1.3em; margin: 0; display: grid; gap: 10px; }
.up-email { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 8px; padding: 8px 12px; background: var(--sunk); border-radius: var(--r-sm); overflow-wrap: anywhere; }
/* Online payment (Payme) */
.pay-options { display: grid; gap: 12px; margin: 16px 0 4px; }
.pay-opt { display: flex; flex-direction: column; gap: 4px; text-align: left; width: 100%; padding: 16px 18px; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-sm); cursor: pointer; font: inherit; color: var(--ink-2); transition: border-color var(--t-fast), background var(--t-fast); }
.pay-opt b { font-size: 1.05rem; color: var(--ink); }
.pay-opt span { font-size: .93rem; line-height: 1.45; color: var(--muted); }
.pay-opt:hover { border-color: var(--brand); background: var(--brand-tint); }
.pay-opt:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pay-opt[disabled] { cursor: progress; opacity: .7; }
.pay-fields { display: grid; grid-template-columns: minmax(0, 1fr) 9.5em; gap: 0 12px; margin-top: 4px; }
.pay-fields .input, .pay-code .input { font-size: 1.1rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.pay-code { max-width: 14em; }
.pay-safe, .pay-terms { margin: 4px 0 8px; font-size: .9rem; line-height: 1.5; color: var(--muted); }
.pay-powered { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: .82rem; color: var(--muted); }
.pay-powered img { display: block; height: 20px; width: auto; }
.pay-err { margin: 12px 0 0; padding: 10px 14px; background: var(--bad-tint); color: #6b1d17; border-radius: var(--r-sm); font-size: .95rem; }
.pay-ok { font-family: var(--display); font-size: 1.3rem; font-weight: 600; color: var(--ok); margin-bottom: 4px; }
.pay-help { margin: 12px 0 0; font-size: .93rem; }
.btn.pay-stop { color: var(--bad); }
form[aria-busy="true"] .btn-primary { cursor: progress; }
@media (max-width: 520px) { .pay-fields { grid-template-columns: minmax(0, 1fr); } .pay-exp { max-width: 12em; } }
@media (max-width: 900px) { .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; gap: 26px; } }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label, .label { font-weight: 600; font-size: .92rem; color: var(--ink-2); }
.input, select.input, textarea.input {
  width: 100%; min-height: 46px; padding: 10px 13px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line-2); background: var(--paper); font-size: 1rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:hover { border-color: #AEB9A7; }
textarea.input { min-height: 90px; resize: vertical; line-height: 1.5; }
.input:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(66, 98, 56, .18); }
select.input { appearance: none; -webkit-appearance: none; padding-right: 38px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%233E4A40' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 13px center/12px no-repeat; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row > .grow { flex: 1 1 200px; }

/* ---------- Rich question content ---------- */
.rich { font-size: 1.05rem; line-height: 1.68; overflow-wrap: anywhere; }
.rich p { margin: 0 0 .85em; }
.rich p:last-child { margin-bottom: 0; }
.rich u { text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.rich .blank { letter-spacing: -.02em; white-space: nowrap; }
.rich .katex { font-size: 1.08em; }
.rich .katex-display { margin: .6em 0; overflow-x: auto; overflow-y: hidden; }
.sh-table-wrap { overflow-x: auto; margin: 12px 0; }
.sh-table { border-collapse: collapse; font-size: .95rem; min-width: 60%; background: var(--paper); font-variant-numeric: tabular-nums; }
.sh-table caption { font-weight: 700; text-align: left; padding: 0 0 6px; font-size: .95rem; }
.sh-table th, .sh-table td { border: 1px solid #B7C1B0; padding: 7px 11px; text-align: center; }
.sh-table th { background: var(--sunk); font-weight: 700; }
.q-figure { margin: 12px 0; }
.q-figure img { max-height: 340px; width: auto; }
.math-fallback { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--sunk); padding: 0 4px; border-radius: 3px; }

/* ---------- Answer choices (shared by tests and practice) ---------- */
.choices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.choice-row { display: flex; align-items: stretch; gap: 8px; }
.choice {
  position: relative; flex: 1; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  border: 1.5px solid var(--edge); border-radius: var(--r-sm); background: var(--paper);
  padding: 11px 16px 11px 14px; min-height: 54px; cursor: pointer; font-size: calc(1.02rem * var(--tz, 1)); line-height: 1.45;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
.choice:hover { border-color: var(--ink); background: #FAFBF8; }
.choice .letter {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; background: var(--paper);
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.choice[aria-checked="true"] { border-color: var(--brand); background: var(--brand-tint); box-shadow: inset 0 0 0 1.5px var(--brand); }
.choice[aria-checked="true"] .letter { background: var(--brand); border-color: var(--brand); color: #fff; }
.choice.just-picked .letter { animation: sh-tick .28s var(--ease-spring); }
.choice.is-correct { border-color: var(--ok); box-shadow: inset 0 0 0 1.5px var(--ok); background: var(--ok-tint); }
.choice.is-correct .letter { background: var(--ok); border-color: var(--ok); color: #fff; }
.choice.is-wrong { border-color: var(--bad); box-shadow: inset 0 0 0 1.5px var(--bad); background: var(--bad-tint); }
.choice.is-wrong .letter { background: var(--bad); border-color: var(--bad); color: #fff; }
.choice.is-struck { opacity: .55; background: var(--paper); }
.choice.is-struck .choice-text { text-decoration: line-through; text-decoration-thickness: 2px; }
.choice.is-struck .letter { position: relative; }
.choice.is-struck .letter::after { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 2px; background: currentColor; transform: rotate(-20deg); }
.strike-btn {
  flex: 0 0 auto; width: 42px; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); font-weight: 700; font-size: .78rem; border-radius: var(--r-sm); transition: background-color var(--t-fast);
}
.strike-btn:hover { background: var(--sunk); }
.strike-btn .s-letter { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.strike-btn .s-letter::after { content: ''; position: absolute; left: -5px; right: -5px; top: 50%; height: 1.5px; background: currentColor; }
.strike-btn.is-undo { text-decoration: underline; font-size: .85rem; font-weight: 700; }

/* ---------- Student-produced response ---------- */
.spr { display: flex; flex-direction: column; gap: 8px; max-width: 280px; }
.spr input { font-size: calc(1.25rem * var(--tz, 1)); font-weight: 600; padding: 11px 14px; border: 1.5px solid var(--edge); border-radius: var(--r-sm); letter-spacing: .06em; font-variant-numeric: tabular-nums; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.spr input:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(66, 98, 56, .18); }
.spr-preview { font-size: .95rem; color: var(--muted); min-height: 1.6em; }
.spr-preview b { color: var(--ink); font-weight: 600; }

/* ---------- Tutor drawer ---------- */
.tutor-backdrop { position: fixed; inset: 0; background: rgba(29,42,32,.4); z-index: 900; animation: sh-fade var(--t) ease both; }
.tutor {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); z-index: 901;
  background: var(--paper); box-shadow: var(--shadow-float); display: flex; flex-direction: column;
  border-left: 3px solid var(--gold); animation: sh-drawer .26s var(--ease) both;
}
@keyframes sh-drawer { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.tutor-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--ivory); }
.tutor-head h3 { margin: 0; font-size: 1.1rem; flex: 1; }
.tutor-head .x { background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; width: 40px; height: 40px; border-radius: var(--r-sm); }
.tutor-head .x:hover { background: var(--brand-tint); }
.tutor-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.bubble { padding: 10px 14px; border-radius: 12px; max-width: 92%; font-size: .98rem; line-height: 1.55; overflow-wrap: anywhere; }
.bubble p { margin: 0 0 .6em; } .bubble p:last-child { margin: 0; }
.bubble.me { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.bubble.ai { align-self: flex-start; background: var(--sunk); border-bottom-left-radius: 4px; }
.bubble.sys { align-self: center; background: none; color: var(--muted); font-size: .88rem; text-align: center; }
.tutor-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.tutor-quick button { border: 1px solid var(--line-2); background: var(--paper); border-radius: var(--r-sm); padding: 6px 12px; font-size: .86rem; cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast); }
.tutor-quick button:hover { border-color: var(--brand); color: var(--brand); }
.tutor-form { display: flex; gap: 8px; padding: 12px 16px calc(12px + var(--safe-b)); border-top: 1px solid var(--line); }
.tutor-form textarea { flex: 1; min-height: 44px; max-height: 140px; resize: none; padding: 10px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--line-2); }
.tutor-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(66, 98, 56, .16); }
.typing { display: inline-flex; gap: 4px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%); z-index: 2000; background: var(--ink); color: #fff; padding: 11px 18px; border-radius: var(--r-sm); font-size: .95rem; font-weight: 600; box-shadow: var(--shadow-float); max-width: calc(100vw - 32px); animation: sh-toast .24s var(--ease) both; }
.toast.out { animation: sh-toast-out .2s ease both; }
@keyframes sh-toast { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes sh-toast-out { to { opacity: 0; transform: translate(-50%, 8px); } }

/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(29,42,32,.5); display: flex; align-items: center; justify-content: center; padding: 16px; animation: sh-fade .16s ease both; }
.modal { background: var(--paper); border-radius: var(--r-float); box-shadow: var(--shadow-float); width: min(640px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; padding: 26px 26px 22px; animation: sh-pop .2s var(--ease) both; }
.modal h2 { font-size: 1.5rem; letter-spacing: -.015em; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 20px; }
.kbd-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.kbd-table td { padding: 7px 4px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.kbd-table td:first-child { width: 42%; white-space: nowrap; }
.kbd-table tr:last-child td { border-bottom: 0; }
@media (max-width: 520px) { .modal { padding: 22px 18px 18px; } .modal-actions .btn { flex: 1 1 auto; } }

/* ---------- Floating panels (calculator, reference sheet) ---------- */
.fpanel { position: fixed; z-index: 70; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow-float); display: flex; flex-direction: column; overflow: hidden; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); animation: sh-pop .18s var(--ease) both; }
.fpanel-head { display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 14px; background: var(--ink); color: #fff; cursor: move; user-select: none; touch-action: none; }
.fpanel-head b { flex: 1; font-size: .95rem; }
.fpanel-head button, .fpanel-head a { background: none; border: 0; color: #fff; cursor: pointer; font-size: .82rem; font-weight: 700; padding: 5px 9px; border-radius: 6px; text-decoration: none; transition: background-color var(--t-fast); }
.fpanel-head button:hover, .fpanel-head a:hover { background: rgba(255,255,255,.15); color: #fff; }
.fpanel-head :focus-visible { outline-color: var(--gold-on-dark); }
.fpanel-body { flex: 1; min-height: 0; overflow: auto; position: relative; }
.fpanel-body iframe { display: block; width: 100%; height: 100%; border: 0; }
.fpanel.dragging iframe { pointer-events: none; }
.calc-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid var(--edge); border-radius: var(--r-sm); font-weight: 700; font-size: .8rem; padding: 4px 10px; cursor: pointer; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.calc-btn:hover { border-color: var(--brand); color: var(--brand); }
.calc-btn svg { width: 16px; height: 16px; }
.calc-btn[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
@media (max-width: 760px) {
  .fpanel { left: 8px !important; right: 8px !important; width: auto !important; top: auto !important; bottom: calc(70px + var(--safe-b)) !important; height: 60vh !important; }
  .fpanel-head [data-a="size"] { display: none; }
}
.fpanel[data-docked] .fpanel-head { cursor: default; }
.fpanel.docked-flat { border-radius: 0; border-width: 0 1px 0 0; box-shadow: none; animation: none; }

/* ---------- Account (Google sign-in) ---------- */
[data-auth-slot] { display: flex; align-items: center; }
[data-auth-slot]:empty { display: none; }
.auth-in svg { width: 18px; height: 18px; }
.acct { position: relative; }
.acct-btn { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--gold); background: var(--brand); color: #fff; font-weight: 700; font-size: .85rem; cursor: pointer; padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: box-shadow var(--t-fast); }
.acct-btn:hover { box-shadow: 0 0 0 3px var(--brand-tint-2); }
.acct-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 120; min-width: 230px; max-width: calc(100vw - 24px); background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-float); box-shadow: var(--shadow-float); padding: 6px; animation: sh-pop .14s var(--ease) both; transform-origin: top right; }
.acct-who { padding: 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.acct-who b, .acct-who span, .acct-who small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-who span { font-size: .88rem; color: var(--muted); }
.acct-who small { font-size: .78rem; color: var(--ok); margin-top: 4px; }
.acct-menu a, .acct-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 12px; border-radius: var(--r-sm); font-weight: 600; font-size: .95rem; color: var(--ink); text-decoration: none; cursor: pointer; }
.acct-menu a:hover, .acct-menu button:hover { background: var(--brand-tint); color: var(--brand); }
@media (max-width: 520px) { .auth-in span { display: none; } .auth-in { padding: .4em .6em; } }

/* ---------- Compact header on phones ---------- */
.menu-btn { order: 10; }
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  .site-header .wrap { gap: 8px; min-height: 62px; }
  .brand { gap: 8px; min-width: 0; }
  .brand-logo { height: 34px; }
  .brand-name { font-size: 1.2rem; }
  .brand-tag { font-size: .72rem; white-space: nowrap; }
  .lang-switch button { padding: 5px 7px; font-size: .74rem; }
  .menu-btn { width: 40px; height: 40px; }
  .acct-btn { width: 34px; height: 34px; }
  .auth-in { min-height: 36px; padding: .3em .55em; }
  .card { padding: 20px 18px; }
}
@media (max-width: 359px) { .brand-tag { display: none; } }

/* ---------- Touch ---------- */
@media (pointer: coarse) {
  .lang-switch button { min-height: 34px; min-width: 34px; }
  .link-btn { padding: 8px 4px; }
  .tutor-quick button { padding: 8px 12px; }
  .choice:hover { background: var(--paper); border-color: var(--edge); }
  .choice[aria-checked="true"]:hover { border-color: var(--brand); background: var(--brand-tint); }
}

/* ---------- Accessibility preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (prefers-contrast: more) {
  :root { --line: #A9B5A1; --line-2: #7E8A7A; --edge: #3E4A40; --muted: #3E4A40; }
  .choice, .input, .btn-ghost { border-width: 2px; }
}
@media (forced-colors: active) {
  .choice[aria-checked="true"] { outline: 3px solid Highlight; }
  .btn { border-color: ButtonText; }
}
@media print {
  .site-header, .site-footer, .skip-link, .toast { display: none !important; }
  body { background: #fff; }
}