/* ============================================================
   MathMaster — grade-1-2.css  (kelių temų versija)
   Grynas CSS (be karkasų). Šviesus + tamsus režimas, animacijos,
   responsive. Dizaino dvasia: Duolingo × Khan Academy × Brilliant.
   ============================================================ */

/* ----------------------------- TEMA ----------------------------- */
:root{
  --primary:#4F46E5; --primary-600:#4338CA; --secondary:#6366F1; --primary-50:#EEF2FF;
  --success:#22C55E; --success-700:#16A34A;
  --danger:#EF4444;  --danger-700:#DC2626;
  --warn:#F59E0B;
  --info:#0EA5E9;

  /* --bg/--border/--track/--grid-line*/--shadow-* pritaikyti prie
     dashboard.css reikšmių (2026-08-31) – anksčiau tie patys vardai čia
     turėjo kitokias reikšmes, todėl bendri komponentai (pvz. calculator.css)
     atrodydavo truputį kitaip priklausomai nuo to, ar juos rodė dashboard.html,
     ar temos puslapis. Dabar abu failai duoda identiškas reikšmes. */
  --bg:#F8FAFC; --card:#FFFFFF; --surface-2:#F1F5F9; --track:#EEF1F8;
  --text:#0F172A; --text-2:#475569; --muted:#64748B;
  --border:#E6EAF2; --border-strong:#D7DEEA;
  --grid-line:rgba(79,70,229,.05); --grid-line-major:rgba(79,70,229,.10);

  --seg-0:#6366F1; --seg-1:#22C55E; --seg-2:#F59E0B; --seg-3:#EC4899; --seg-unknown:#94A3B8;

  --shadow-sm:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.04);
  --shadow-md:0 6px 16px rgba(15,23,42,.06),0 2px 6px rgba(15,23,42,.04);
  --shadow-lg:0 16px 34px rgba(15,23,42,.10),0 6px 14px rgba(15,23,42,.06);

  --r-sm:10px; --r:16px; --r-lg:22px;
  --ease:.25s cubic-bezier(.4,0,.2,1);
  --maxw:1080px;
}
:root[data-theme="dark"]{
  --primary-50:rgba(99,102,241,.16);
  --bg:#0B1120; --card:#131C2E; --surface-2:#1B2638; --track:#1B2638;
  --text:#E8EDF6; --text-2:#AEB9CC; --muted:#8593A8;
  --border:#23304A; --border-strong:#2E3C57;
  --grid-line:rgba(129,140,248,.07); --grid-line-major:rgba(129,140,248,.13);
  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --shadow-md:0 6px 16px rgba(0,0,0,.5);
  --shadow-lg:0 16px 34px rgba(0,0,0,.6);
}

/* ----------------------------- BASE ----------------------------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ min-height:100%; }
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* Dviejų lygių „milimetrinio popieriaus“ tinklelis: smulkus 34px žingsnis +
     ryškesnė linija kas 5 langelius (170px) – kaip tikrame grafiko popieriuje,
     bet abu sluoksniai lieka pakankamai švelnūs, kad netrukdytų teksto skaityti. */
  background-image:
    linear-gradient(var(--grid-line-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line-major) 1px,transparent 1px),
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:170px 170px,170px 170px,34px 34px,34px 34px;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
img,svg{ display:block; max-width:100%; }
h1,h2,h3,h4{ line-height:1.2; }
:focus-visible{ outline:3px solid var(--secondary); outline-offset:2px; border-radius:8px; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:20px; border:3px solid var(--bg); }

/* ----------------------------- TOPBAR ----------------------------- */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; flex-wrap:wrap; align-items:center; gap:14px; row-gap:8px;
  padding:12px clamp(16px,4vw,28px);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
/* Su daugiau nei 3 nuorodų (Formulės/Ploteris/Egzaminai/Užrašai + skaičiuotuvai)
   `flex-shrink:0` neleidžia mygtukams susispausti į nematomą plyšelį – jie arba
   tilpsta į eilutę, arba nukeliauja į kitą (dėl `flex-wrap` aukščiau), o ne
   susitraukia iki 1-2px ir dingsta už ekrano krašto. */
.back{
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  padding:8px 14px; border-radius:12px; font-weight:700; font-size:.85rem;
  background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow-sm);
  transition:transform var(--ease),border-color var(--ease);
}
.back:hover{ transform:translateX(-2px); border-color:var(--border-strong); }
.brand{ font-weight:800; letter-spacing:-.02em; flex-shrink:0; }
.topbar-link{
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  padding:7px 13px; border-radius:12px; font-weight:700; font-size:.85rem;
  color:var(--text-2); background:var(--card);
  border:1px solid var(--border); box-shadow:var(--shadow-sm);
  transition:border-color var(--ease),color var(--ease);
}
.topbar-link:hover{ border-color:var(--primary); color:var(--primary); }
@media (max-width:520px){ .topbar-link{ display:none; } }
.theme-btn{
  margin-left:auto; width:42px; height:42px; border-radius:12px; font-size:1.15rem; flex-shrink:0;
  display:grid; place-items:center; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow-sm);
  transition:transform var(--ease),background var(--ease);
}
.theme-btn:hover{ transform:translateY(-1px); background:var(--surface-2); }

/* --------------------------- BREADCRUMB --------------------------- */
.breadcrumb{ max-width:var(--maxw); margin:18px auto 0; padding:0 clamp(16px,4vw,28px);
  display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--muted); flex-wrap:wrap; }
.breadcrumb a{ font-weight:600; transition:color var(--ease); }
.breadcrumb a:hover{ color:var(--primary); }
.crumb-sep{ opacity:.55; }
.breadcrumb .current{ color:var(--text); font-weight:700; }

/* --------------------------- TEMŲ MENIU --------------------------- */
.topic-menu{
  max-width:var(--maxw); margin:14px auto 0; padding:0 clamp(16px,4vw,28px);
  display:flex; gap:.75rem; flex-wrap:wrap; align-items:stretch;
}
.topic-btn{
  position:relative; display:inline-flex; align-items:center; gap:9px;
  /* flex:0 0 auto + nowrap = mygtukas niekada nesusispaudžia siauriau už tekstą,
     todėl pavadinimai („Laikas ir laikrodis“) nebūna nukerpami. */
  flex:0 0 auto; white-space:nowrap;
  padding:.55rem 1rem; border-radius:14px; font-weight:700; font-size:.9rem;
  background:var(--card); color:var(--text-2);
  border:1.5px solid var(--border); box-shadow:var(--shadow-sm);
  transition:transform var(--ease),border-color var(--ease),background var(--ease),color var(--ease);
}
.topic-btn .topic-name{ white-space:nowrap; }
.topic-btn:hover{ transform:translateY(-3px); border-color:var(--secondary); color:var(--text); }
.topic-btn .topic-ic{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:1.05rem;
  background:var(--primary-50);
}
.topic-btn.active{
  background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff;
  border-color:transparent; box-shadow:0 8px 20px rgba(79,70,229,.32);
}
.topic-btn.active:hover{ transform:translateY(-3px); color:#fff; }
.topic-btn.active .topic-ic{ background:rgba(255,255,255,.22); }
.topic-btn.locked{ opacity:.55; cursor:not-allowed; box-shadow:none; }
.topic-btn.locked:hover{ transform:none; border-color:var(--border); color:var(--text-2); }
.topic-soon{ font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:2px 7px; border-radius:999px; background:var(--surface-2); color:var(--muted); }

/* --------------------------- BŪSENOS --------------------------- */
.loading{ max-width:var(--maxw); margin:60px auto; text-align:center; color:var(--muted); font-weight:600; }
.loading::before{
  content:""; display:block; width:40px; height:40px; margin:0 auto 16px;
  border:4px solid var(--track); border-top-color:var(--primary); border-radius:50%;
  animation:spin 1s linear infinite;
}
.error-banner{
  max-width:var(--maxw); margin:24px auto; padding:22px 24px;
  background:color-mix(in srgb,var(--danger) 8%,var(--card)); color:var(--text);
  border:1px solid color-mix(in srgb,var(--danger) 35%,var(--border)); border-left:5px solid var(--danger);
  border-radius:var(--r); box-shadow:var(--shadow-md);
}
.error-banner strong{ display:block; font-size:1.05rem; margin-bottom:6px; }
.error-banner span{ font-size:.88rem; color:var(--text-2); }

/* --------------------------- MODULIS --------------------------- */
.module{ max-width:var(--maxw); margin:0 auto; padding:clamp(16px,4vw,28px); display:flex; flex-direction:column; gap:22px; }
/* Perjungiant temą `module.js` daro `byId('module').hidden = true`, bet aukščiau
   esantis `display:flex` nugali naršyklės `[hidden]{display:none}` – senas temos
   turinys likdavo ekrane, o „Kraunama tema…" spineris atsirasdavo VIRŠ jo (tas
   pats ir su `showError()`). Pradinis `<main id="module" hidden>` irgi nesislėpė:
   tuščias flex konteineris užimdavo `padding` aukščio juostą dar prieš įkėlimą. */
.module[hidden]{ display:none; }
.module > section{ animation:fadeUp .5s var(--ease) both; }
.module > section:nth-child(2){ animation-delay:.05s; }
.module > section:nth-child(3){ animation-delay:.10s; }
.module > section:nth-child(4){ animation-delay:.15s; }
.module > section:nth-child(5){ animation-delay:.20s; }
.section-title{ font-size:1.25rem; font-weight:800; letter-spacing:-.02em; margin-bottom:14px; }
.sub-title{ font-size:1rem; font-weight:700; margin:14px 0 8px; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-sm); padding:22px; }

/* --------------------------- HEADER --------------------------- */
.module-header{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:24px;
  padding:30px clamp(22px,4vw,36px);
  border-radius:var(--r-lg); color:#fff;
  background:linear-gradient(125deg,#4338CA 0%,#4F46E5 45%,#6366F1 100%);
  box-shadow:0 14px 30px rgba(79,70,229,.32);
}
.module-header::after{
  content:""; position:absolute; right:-50px; top:-50px;
  width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.12);
}
.mh-icon{
  flex:0 0 auto; width:84px; height:84px; border-radius:22px;
  display:grid; place-items:center; font-size:2.6rem;
  background:rgba(255,255,255,.16); position:relative; z-index:1;
}
.mh-text{ position:relative; z-index:1; }
.mh-eyebrow{ font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.85; }
.mh-title{ font-size:clamp(1.6rem,4vw,2.1rem); font-weight:800; letter-spacing:-.025em; margin:4px 0 8px; }
.mh-sub{ font-size:1rem; color:rgba(255,255,255,.9); max-width:560px; }
.mh-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.24); font-size:.78rem; font-weight:600; }
.chip-ic{ font-size:.9rem; }

/* --------------------- TEMŲ PRIKLAUSOMYBĖS ĮSPĖJIMAS --------------------- */
#prereq-alert:empty{ display:none; }
.prereq-alert{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 14px;
  border-radius:var(--r-sm); border:1px solid color-mix(in srgb,var(--warn) 40%,var(--border));
  background:color-mix(in srgb,var(--warn) 10%,var(--card));
}
.prereq-ic{ font-size:1.15rem; flex-shrink:0; }
.prereq-text{ flex:1 1 220px; font-size:.86rem; color:var(--text-2); }
.prereq-btn{
  flex-shrink:0; text-decoration:none; font-weight:700; font-size:.82rem; color:#fff;
  padding:7px 14px; border-radius:999px; background:var(--warn); white-space:nowrap;
}
.prereq-btn:hover{ background:#B45309; }

/* --------------------------- PROGRESAS --------------------------- */
.progress-card{ display:flex; flex-direction:column; gap:14px; }
.progress-head{ display:flex; align-items:baseline; gap:10px; }
.progress-pct{ font-size:2rem; font-weight:800; letter-spacing:-.03em; color:var(--primary-600); }
.progress-cap{ font-size:.85rem; color:var(--muted); font-weight:600; }
.progress-bar{ height:16px; border-radius:999px; background:var(--track); overflow:hidden; }
.progress-bar > i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--success),#4ADE80);
  box-shadow:0 0 12px rgba(34,197,94,.45);
  transition:width .8s cubic-bezier(.4,0,.2,1);
}
.progress-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.pstat{ display:flex; flex-direction:column; gap:3px; padding:14px; background:var(--surface-2); border-radius:var(--r-sm); text-align:center; }
.pstat-val{ font-size:1.3rem; font-weight:800; letter-spacing:-.02em; }
.pstat-lbl{ font-size:.72rem; color:var(--muted); }

/* --------------------------- TIKSLAI --------------------------- */
.obj-list{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.obj-item{ display:flex; align-items:flex-start; gap:12px; font-size:.95rem; color:var(--text-2); }
.obj-check{ flex:0 0 auto; width:24px; height:24px; border-radius:8px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--success) 16%,var(--card)); color:var(--success-700); font-weight:800; font-size:.85rem; }

/* --------------------------- TEORIJA --------------------------- */
/* Skyreliai rodomi po vieną – kortelė gauna visą plotį, todėl teksto eilutę
   ribojame `max-width`, kad skaityti liktų patogu. */
.theory-steps{ position:relative; }
.theory-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow-sm); padding:clamp(22px,3vw,32px);
  animation:tc-in .28s cubic-bezier(.4,0,.2,1) both;
}
.theory-card[hidden]{ display:none; }
@keyframes tc-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.tc-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.tc-icon{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:1.3rem; background:var(--primary-50); flex:0 0 auto; }
.tc-title{ font-size:1.15rem; font-weight:700; }
.tc-body{ font-size:1rem; color:var(--text-2); line-height:1.75; max-width:72ch; }
.tc-viz{ margin-top:20px; }
/* Mygtukas į atskirą Ploterio puslapį – teorija PATI ploterio niekada
   neįterpia (didelis, apkrautų aiškinimą), tik nukreipia į jį. */
.plotter-link-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 20px; border-radius:14px; font-weight:800; font-size:.95rem;
  background:var(--primary); color:#fff; box-shadow:0 4px 0 var(--primary-600);
  text-decoration:none; transition:filter .2s, transform .08s;
}
.plotter-link-btn:hover{ filter:brightness(1.05); }
.plotter-link-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--primary-600); }
.plotter-link-btn svg{ width:18px; height:18px; }

/* ---------- BLOKINIS TEORIJOS TURINYS (žr. mathrender.js renderRich) ----------
   Anksčiau visas skyrelis buvo viena eilutė: pastraipos suplaukdavo į „teksto
   sieną", o punktai „• …" likdavo toje pačioje eilutėje. Dabar kiekvienas
   blokas yra tikras elementas, todėl tarpai atsiranda savaime. */
.tc-body > p{ margin:0 0 14px; }
.tc-body > p:last-child{ margin-bottom:0; }

.rich-list{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:10px; }
.rich-list:last-child{ margin-bottom:0; }
/* Punktas NĖRA flex konteineris: flex vaikai neperkeliami į kitą eilutę, o
   `$…$` intarpai jame tampa atskirais elementais – siaurame ekrane visa eilutė
   išlįsdavo už kortelės. Taškelis piešiamas absoliučiai, o tekstas plaukia
   įprastai ir laužomas kaip bet kuri pastraipa. */
.rich-list li{
  position:relative;
  padding:8px 12px 8px 29px; border-radius:var(--r-sm);
  background:var(--surface-2);
}
.rich-list li::before{
  content:""; position:absolute; left:12px; top:calc(8px + .6em);
  width:7px; height:7px; border-radius:50%; background:var(--primary);
}

/* Numeruotas teorijos algoritmas nėra paliekamas kaip paprastos eilutės su
   tekstiniu `1.` prefiksu. Skaičius piešia pats sąrašas, todėl ekrano
   skaitytuvai ir kopijavimas išsaugo taisyklingą žingsnių struktūrą. */
.rich-list-ordered{ counter-reset:rich-step; }
.rich-list-ordered li{ counter-increment:rich-step; padding-left:42px; }
.rich-list-ordered li::before{
  content:counter(rich-step) "."; left:12px; top:8px;
  width:22px; height:auto; border-radius:0; background:transparent;
  color:var(--primary); font-weight:800; line-height:1.75;
}

/* Teorijos Markdown lentelės. Išorinis konteineris leidžia labai siaurame
   ekrane slinkti tik lentelę, o ne išstumti visą puslapį už lango ribų. */
.rich-table-wrap{
  max-width:100%; margin:14px 0 18px; overflow-x:auto;
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--card); scrollbar-width:thin;
}
.rich-table-wrap:last-child{ margin-bottom:0; }
.rich-table{
  width:100%; min-width:38rem; border-collapse:collapse;
  font-size:.94rem; line-height:1.55;
}
.rich-table th,
.rich-table td{
  padding:11px 14px; vertical-align:middle;
  border-bottom:1px solid var(--border);
}
.rich-table th{
  color:var(--text); font-weight:800; background:var(--surface-2);
}
.rich-table tbody tr:last-child td{ border-bottom:0; }
.rich-table tbody tr:nth-child(even) td{
  background:color-mix(in srgb,var(--surface-2) 52%,transparent);
}
.rich-table-left{ text-align:left; }
.rich-table-center{ text-align:center; }
.rich-table-right{ text-align:right; }
.rich-table td:first-child .math{ white-space:nowrap; }

@media (max-width:640px){
  .rich-table{ min-width:34rem; font-size:.9rem; }
  .rich-table th,.rich-table td{ padding:10px 12px; }
}

/* Atskira formulės eilutė: nebelieka formulių, sugrūstų tarp sakinių. */
.math-block{
  margin:16px 0; padding:14px 18px; text-align:center;
  font-size:1.16rem; line-height:1.5;
  background:var(--surface-2); border-radius:var(--r-sm);
  max-width:100%; overflow:visible;
}
.math-block:first-child{ margin-top:0; }
.math-block:last-child{ margin-bottom:0; }

/* Kortelė svarbiausiam dalykui: taisyklei, įspėjimui, patikrai, pavyzdžiui. */
.callout{
  display:flex; align-items:flex-start; gap:12px;
  margin:16px 0; padding:14px 16px;
  border:1px solid var(--border); border-left-width:4px;
  border-radius:var(--r-sm); background:var(--surface-2);
}
.callout:first-child{ margin-top:0; }
.callout:last-child{ margin-bottom:0; }
.callout-ic{ flex:0 0 auto; font-size:1.15rem; line-height:1.4; }
.callout-body{ min-width:0; flex:1; }
.callout-body > p{ margin:0 0 8px; }
.callout-body > p:last-child{ margin-bottom:0; }
.callout-body .rich-list li{ background:transparent; padding:2px 0 2px 17px; }
.callout-body .rich-list li::before{ left:0; top:calc(2px + .6em); }

.callout-rule{
  border-color:color-mix(in srgb,var(--primary) 34%,var(--border));
  background:color-mix(in srgb,var(--primary) 7%,var(--card));
}
.callout-warn{
  border-color:color-mix(in srgb,var(--warn) 40%,var(--border));
  background:color-mix(in srgb,var(--warn) 10%,var(--card));
}
.callout-ok{
  border-color:color-mix(in srgb,var(--success) 38%,var(--border));
  background:color-mix(in srgb,var(--success) 9%,var(--card));
}
.callout-example, .callout-note{
  border-color:color-mix(in srgb,var(--info) 34%,var(--border));
  background:color-mix(in srgb,var(--info) 8%,var(--card));
}

/* ---------------- TEORIJOS ŽINGSNINĖ NAVIGACIJA ---------------- */
.theory-nav{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px;
  margin-top:16px; padding:12px 14px;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); box-shadow:var(--shadow-sm);
}
.theory-nav > :first-child{ justify-self:start; }
.theory-nav > :last-child{ justify-self:end; }
.tnav-steps{ justify-self:center; display:flex; align-items:center; gap:12px; }
.tstep-dots{ display:flex; align-items:center; gap:7px; }
.tstep-dot{
  width:10px; height:10px; padding:0; border-radius:50%;
  background:var(--track); border:1px solid var(--border-strong);
  transition:background var(--ease),transform var(--ease),width var(--ease),border-radius var(--ease);
}
.tstep-dot:hover{ background:var(--border-strong); transform:scale(1.2); }
.tstep-dot.active{ width:26px; border-radius:6px; background:var(--primary); border-color:var(--primary); }
.tstep-count{ font-size:.8rem; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
.tnav-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:11px 18px; border-radius:12px; font-weight:700; font-size:.88rem;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  transition:transform var(--ease),background var(--ease),border-color var(--ease),box-shadow var(--ease);
}
.tnav-btn:hover{ background:var(--card); border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.tnav-prev:hover{ transform:translateX(-2px); }
.tnav-next{ background:var(--primary); border-color:var(--primary); color:#fff; }
.tnav-next:hover{ background:var(--primary-600); border-color:var(--primary-600); color:#fff; transform:translateX(2px); }
.tnav-start{ background:var(--success); border-color:var(--success); color:#fff; }
.tnav-start:hover{ background:var(--success-700); border-color:var(--success-700); color:#fff; transform:translateY(-2px); }
@media (max-width:560px){
  .theory-nav{ grid-template-columns:1fr 1fr; row-gap:12px; }
  .tnav-steps{ grid-column:1 / -1; order:-1; }
  .tnav-btn{ width:100%; justify-content:center; }
  .tnav-spacer{ display:none; }
  .theory-nav > .tnav-right:only-of-type{ grid-column:1 / -1; }
}
/* Formulių kortelės: tinklelis, kuris pats užpildo visą plotį. Anksčiau tai
   buvo `flex-wrap`, todėl kortelės likdavo siauros pagal turinį, o šalia jų
   žiojėjo tuščia vieta. */
.formula-row{
  display:grid; gap:14px; margin-top:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  align-items:stretch;                 /* visos eilutės kortelės vienodo aukščio */
}
/* Vidinis tarpas didesnis sąmoningai: `\tan^{-1}` ir `\arctan` viršutiniai
   indeksai su mažesniu tarpu kirsdavo kortelės rėmą. Antraštė centre, o
   paaiškinimas prispaustas prie apačios – todėl kortelės atrodo lygios. */
.formula{
  display:flex; flex-direction:column; align-items:stretch;
  justify-content:space-between; gap:10px;
  min-width:0; padding:1.25rem 1.15rem; text-align:center;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm);
}
/* Jokio priverstinio slinkimo: KaTeX kursyvo pataisa duodavo 2 px perteklių ir
   kortelėje atsirasdavo pilkas horizontalus slankmatis, nors vietos buvo pilna.
   Per ilgą formulę sumažina `fitMath()` – žr. module.js. */
.formula-tex{
  display:block; min-width:0; max-width:100%; overflow:visible;
  font-size:1.15rem; line-height:1.55; padding:2px 0;
  flex:1 0 auto; display:flex; align-items:center; justify-content:center;
}
/* Kelios `\quad`-atskirtos formulės vienoje kortelėje (pvz. sin/tan lentelės
   trys reikšmės) be šios eilutės tyliai LŪŽDAVO per kelias eilutes – naršyklė
   pati suranda tarpą tarp formulių ir ten perkelia, todėl `fitPass()` (žr.
   module.js) net nepastebi pertekliaus (`scrollWidth` sutampa su
   `clientWidth`, nes turinys jau „sutalpintas“ vertikaliu lūžiu), o vienos
   formulės šaknies stogelis vizualiai atsiduria ant kitos trupmenos brūkšnio.
   Su `nowrap` turinys lieka VIENOJE eilutėje, todėl `fitPass()` teisingai
   aptinka perpildymą ir sumažina šriftą iki telpančio dydžio. */
.formula-tex{ white-space:nowrap; }
.formula-cap{ font-size:.75rem; color:var(--muted); }
.glossary{ margin-top:16px; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.gloss-item{ padding:12px 14px; background:var(--surface-2); border-radius:var(--r-sm); }
.gloss-item dt{ font-weight:700; font-size:.9rem; }
.gloss-item dd{ font-size:.82rem; color:var(--muted); margin-top:2px; }

/* --------------------------- PAVYZDYS --------------------------- */
.example-card{
  background:linear-gradient(160deg,color-mix(in srgb,var(--primary) 8%,var(--card)),var(--card));
  border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border));
  border-radius:var(--r); box-shadow:var(--shadow-sm); padding:24px;
}
.ex-prompt{ font-size:1.3rem; font-weight:700; margin-bottom:6px; }
.ex-method{ font-size:.85rem; color:var(--muted); margin-bottom:16px; }
.ex-answer{ margin-top:16px; font-weight:700; font-size:.95rem; }
.answer-pill{
  display:block;
  flex:0 0 100%;
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  padding:7px 14px;
  border-radius:14px;
  background:var(--success);
  color:#fff;
  font-weight:800;
  line-height:1.5;
  white-space:normal;
  overflow-wrap:anywhere;
}

/* ----------------- BENDRAS ŽINGSNIŲ SĄRAŠAS ----------------- */
.step-list{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.step{ display:flex; gap:14px; }
.step-n{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--primary); color:#fff; font-weight:800; font-size:.85rem; box-shadow:0 3px 0 var(--primary-600); }
.step-body{ flex:1; min-width:0; padding-top:2px; }
.step-title{ font-weight:700; font-size:.92rem; margin-bottom:2px; }
.step-exp{ font-size:.88rem; color:var(--text-2); }
.step-math{ margin-top:8px; font-size:1.1rem; padding:8px 14px; background:var(--surface-2); border-radius:var(--r-sm); display:inline-block; }

/* --------------------------- UŽDAVINIAI --------------------------- */
.navigator{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.nav-chip{
  width:38px; height:38px; border-radius:11px; font-weight:700; font-size:.85rem;
  background:var(--card); border:1px solid var(--border); color:var(--text-2);
  transition:transform var(--ease),background var(--ease),border-color var(--ease);
}
.nav-chip:hover{ transform:translateY(-2px); border-color:var(--border-strong); }
.nav-chip.solved{ background:color-mix(in srgb,var(--success) 16%,var(--card)); border-color:color-mix(in srgb,var(--success) 40%,var(--border)); color:var(--success-700); }
.nav-chip.active{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 4px 12px rgba(79,70,229,.35); }

.task-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-md); padding:clamp(20px,3vw,30px); }
.task-card.is-solved{ border-color:color-mix(in srgb,var(--success) 40%,var(--border)); }
.task-top{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.task-no{ font-size:.8rem; font-weight:700; color:var(--muted); }
.task-badge{ font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:999px; }
.diff-1{ background:color-mix(in srgb,var(--success) 16%,var(--card)); color:var(--success-700); }
.diff-2{ background:color-mix(in srgb,var(--warn) 18%,var(--card)); color:#B45309; }
.diff-3{ background:color-mix(in srgb,var(--danger) 14%,var(--card)); color:var(--danger-700); }
.task-solved{ margin-left:auto; font-size:.78rem; font-weight:800; color:var(--success-700); }
.task-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.task-tag{ font-size:.68rem; font-weight:600; color:var(--muted); background:var(--surface-2); padding:3px 9px; border-radius:999px; }
.task-prompt{ font-size:clamp(1.4rem,4vw,1.8rem); font-weight:800; letter-spacing:-.01em; margin-bottom:16px; }

.answer-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
.answer-input{
  flex:1; min-width:160px; font-size:1.2rem; font-weight:700;
  padding:14px 18px; border-radius:14px; color:var(--text);
  background:var(--surface-2); border:2px solid var(--border); outline:none;
  transition:border-color var(--ease),box-shadow var(--ease);
}
.answer-input:focus{ border-color:var(--secondary); box-shadow:0 0 0 4px rgba(99,102,241,.14); }
.answer-input::-webkit-outer-spin-button,.answer-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* Algebrinės įvesties stiliai gyvena `static/css/mathinput.css` – ten pat,
   kur ir virtualios klaviatūros nustatymai. */

.btn{ border-radius:14px; font-weight:800; font-size:.95rem; padding:13px 22px;
  box-shadow:0 4px 0 rgba(0,0,0,.16); transition:transform .08s,filter .2s,background var(--ease); }
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.16); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }
.btn-primary{ background:var(--success); color:#fff; box-shadow:0 4px 0 var(--success-700); }
.btn-primary:hover{ filter:brightness(1.03); }
.btn-primary:active{ box-shadow:0 1px 0 var(--success-700); }
.btn-ghost{ background:var(--surface-2); color:var(--text); box-shadow:0 4px 0 var(--border-strong); }
.btn-nav{ background:var(--card); color:var(--primary-600); border:1px solid var(--border); box-shadow:0 4px 0 var(--border-strong); padding:11px 16px; font-size:.88rem; }

.feedback{ margin-top:14px; padding:14px 18px; border-radius:14px; font-weight:700; font-size:.95rem; }
.feedback.ok{ background:color-mix(in srgb,var(--success) 14%,var(--card)); color:var(--success-700); border:1px solid color-mix(in srgb,var(--success) 35%,var(--border)); }
.feedback.err{ background:color-mix(in srgb,var(--danger) 12%,var(--card)); color:var(--danger-700); border:1px solid color-mix(in srgb,var(--danger) 32%,var(--border)); }
.feedback.warn{ background:color-mix(in srgb,var(--warn) 16%,var(--card)); color:#B45309; border:1px solid color-mix(in srgb,var(--warn) 35%,var(--border)); }
.feedback.pop{ animation:pop .3s var(--ease); }

.task-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:16px; }
.task-actions .spacer{ flex:1; }

.hints{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.hint{ padding:14px 18px; border-radius:14px; background:var(--surface-2); border-left:4px solid var(--secondary); animation:slideDown .3s var(--ease); }
.hint.reveal{ border-left-color:var(--warn); background:color-mix(in srgb,var(--warn) 10%,var(--card)); }
.hint-head{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.hint-lvl{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--secondary); }
.hint.reveal .hint-lvl{ color:#B45309; }
.hint-tag{ font-size:.66rem; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--warn); color:#fff; }
.hint-text{ font-size:.9rem; color:var(--text-2); }

.solution{ margin-top:18px; padding:20px; border-radius:var(--r); background:var(--surface-2); border:1px solid var(--border); animation:slideDown .3s var(--ease); }
.sol-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.sol-head h3{ font-size:1.05rem; font-weight:800; }
.sol-method-name{ font-size:.8rem; color:var(--muted); font-weight:600; }
.sol-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.sol-tab{ padding:8px 14px; border-radius:11px; font-weight:700; font-size:.82rem; background:var(--card); border:1px solid var(--border); color:var(--text-2); transition:all var(--ease); }
.sol-tab.active{ background:var(--primary); border-color:var(--primary); color:#fff; }
.sol-final{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:7px;
  min-width:0;
  margin-top:16px;
  font-weight:800;
  font-size:.98rem;
}
/* Dažnos klaidos: kiekviena – atskira įspėjamoji kortelė su gintaro spalvos
   kraštu ir ženklu. Bendrame sąraše jos susilieedavo su sprendimo tekstu. */
.sol-mistakes{ margin-top:16px; padding-top:14px; border-top:1px dashed var(--border-strong); }
.sol-mistakes-title{ display:block; font-size:.9rem; color:var(--text); margin-bottom:10px; }
.mistake-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.mistake-card{
  display:flex; align-items:flex-start; gap:10px;
  padding:1rem 1.1rem;
  border-radius:var(--r-sm);
  border-left:4px solid var(--warn);
  background:color-mix(in srgb,var(--warn) 10%,var(--card));
  font-size:.88rem; color:var(--text-2); line-height:1.55;
}
.mistake-ic{ flex:0 0 auto; color:var(--warn); display:inline-flex; margin-top:.1em; }
.mistake-ic svg{ width:18px; height:18px; }
.mistake-body{ min-width:0; flex:1; }
.mistake-body strong{ color:var(--text); }

/* ---------------------- TEKSTINIO UŽDAVINIO MODELIAVIMAS ------------------
   „🧩 Kaip iš teksto susidaryti lygtį?“ – užuominos tipo skydelis (rodomas
   PRIEŠ atsakant, neatskleidžia atsakymo) ir „🚀 Rodyti algebrinius
   žingsnius“ – papildoma, iš pradžių suskleista kortelė JAU esamo sprendimo
   viduje (žr. `wordProblemSolverEngine.js`). Abu naudoja tą patį `.step-list`
   žingsnių sąrašą kaip ir įprastas sprendimas, kad viskas atrodytų vienodai. */
.modeling{ margin-top:14px; padding:18px 20px; border-radius:var(--r); background:var(--surface-2); border:1px solid var(--border); border-left:4px solid var(--secondary); animation:slideDown .3s var(--ease); }
.modeling-head{ font-weight:800; font-size:.95rem; margin-bottom:12px; }
.modeling-eq{ margin-top:14px; font-weight:700; font-size:.92rem; color:var(--text-2); }
.modeling-eq-math{ margin-left:4px; }

.wp-algebra{ margin-top:16px; padding-top:16px; border-top:1px dashed var(--border-strong); }
.wp-algebra-toggle{ padding:9px 16px; font-size:.85rem; }
.wp-algebra-eq{ margin:12px 0; font-size:.9rem; color:var(--text-2); font-weight:700; }
.wp-algebra-list{ margin-top:10px; }
.step-why-toggle{
  margin-top:8px; padding:5px 12px; border-radius:999px; border:1px solid var(--border);
  background:var(--card); color:var(--secondary); font-size:.78rem; font-weight:700;
  cursor:pointer; transition:background var(--ease);
}
.step-why-toggle:hover{ background:var(--primary-50); }
.step-why{ margin-top:8px; font-size:.86rem; color:var(--text-2); animation:slideDown .2s var(--ease); }

/* --------------------------- PASIEKIMAI --------------------------- */
.ach-top{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-bottom:18px; }
.xp-big{ display:flex; align-items:baseline; gap:8px; padding:14px 22px; border-radius:var(--r);
  background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; box-shadow:0 10px 22px rgba(79,70,229,.3); }
.xp-num{ font-size:1.9rem; font-weight:800; letter-spacing:-.03em; }
.xp-lbl{ font-size:.9rem; font-weight:700; opacity:.9; }
.streak-box{ display:flex; flex-direction:column; }
.streak-num{ font-size:1.3rem; font-weight:800; }
.streak-lbl{ font-size:.76rem; color:var(--muted); }
.badges{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.badge{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;
  padding:16px 12px; border-radius:var(--r); background:var(--surface-2); border:1px solid var(--border);
  transition:transform var(--ease); }
.badge:hover{ transform:translateY(-3px); }
.badge.locked{ opacity:.42; filter:grayscale(.7); }
.badge-ic{ font-size:1.8rem; }
.badge-name{ font-weight:800; font-size:.84rem; }
.badge-desc{ font-size:.7rem; color:var(--muted); }

/* --------------------------- MATEMATIKA --------------------------- */
/* Formules piešia KaTeX (static/vendor/katex/). .math tėra apvalkalas:
   jis nustato dydį ir leidžia ilgai formulei slinkti, o ne būti nukirstai. */
.math{ display:inline-block; max-width:100%; vertical-align:middle; }
.math .katex{ font-size:1.13em; }
.math .katex-display{ margin:0; }

/* Ilgos sąlygos gali slinkti savo eilutėje, bet formulių kortelės – ne:
   ten slankmatis atsirasdavo be reikalo (žr. `.formula-tex` aukščiau). */
.ex-prompt, .task-prompt, .hint-text, .ws-prompt{
  max-width:100%; overflow-x:auto; overflow-y:hidden;
}
.step-math{ max-width:100%; overflow:visible; }

/* --- atsarginis variklis (kai KaTeX neįsikelia) --- */
/* Trūkstamo skaičiaus langelis; su KaTeX \square piešiamas jo paties. */
.math .box{ display:inline-block; min-width:1.05em; padding:0 .12em; text-align:center; border:2px solid currentColor; border-radius:4px; line-height:1.1; font-style:normal; }
.math .frac{ display:inline-flex; flex-direction:column; vertical-align:middle; text-align:center; }
.math .frac-n{ border-bottom:1.5px solid currentColor; padding:0 .25em; }
.math .frac-d{ padding:0 .25em; }
.math .sqrt{ display:inline-flex; align-items:stretch; vertical-align:middle; }
.math .sqrt-sign{ font-size:1.05em; line-height:1; }
.math .sqrt-body{ border-top:1.5px solid currentColor; padding:1px .18em 0 .1em; }

/* --------------------------- VIZUALIZACIJOS --------------------------- */
.viz{ margin-top:14px; }
.bar-model{ display:flex; flex-direction:column; gap:8px; }
.bm-row{ display:flex; gap:6px; height:46px; }
.bm-seg{ display:grid; place-items:center; border-radius:10px; color:#fff; font-weight:800; min-width:34px; box-shadow:var(--shadow-sm); }
.bm-seg.s0{ background:var(--seg-0); } .bm-seg.s1{ background:var(--seg-1); }
.bm-seg.s2{ background:var(--seg-2); } .bm-seg.s3{ background:var(--seg-3); }
.bm-seg.unknown{ background:repeating-linear-gradient(45deg,var(--seg-unknown),var(--seg-unknown) 7px,#B6C0D0 7px,#B6C0D0 14px); }
.bm-total{ display:flex; align-items:center; justify-content:space-between; padding:6px 12px; background:var(--surface-2); border-radius:10px; }
.bm-total-lbl{ font-size:.74rem; color:var(--muted); font-weight:600; }
.bm-total-val{ font-weight:800; }

.nl-svg{ width:100%; height:auto; max-width:440px; }
.nl-axis{ stroke:var(--border-strong); stroke-width:2; }
.nl-tick{ stroke:var(--border-strong); stroke-width:2; }
.nl-num{ fill:var(--muted); font-size:11px; font-weight:700; text-anchor:middle; }
.nl-arc{ fill:none; stroke:var(--secondary); stroke-width:2; opacity:.55; }
.nl-arc.hl{ stroke:var(--primary); opacity:1; }
.nl-dot{ fill:var(--secondary); }
.nl-dot.end{ fill:var(--primary); stroke:var(--card); stroke-width:2; }

/* Liniuotė: daiktas guli VIRŠ padalų, todėl ilgis nuskaitomas kaip tikrovėje. */
.ru-svg{ width:100%; height:auto; max-width:480px; }
.ru-body{ fill:var(--surface-2); stroke:var(--border-strong); stroke-width:1.6; }
.ru-tick{ stroke:var(--muted); stroke-width:1.4; }
.ru-tick.is-cm{ stroke:var(--text-2); stroke-width:2; }
.ru-num{ fill:var(--text-2); font-size:11px; font-weight:800; text-anchor:middle; }
.ru-obj{ stroke:var(--card); stroke-width:1.5; }
.ru-obj.a{ fill:var(--seg-0); }
.ru-obj.b{ fill:var(--seg-1); }
.ru-obj.c{ fill:var(--seg-2); }
.ru-lab{ fill:var(--muted); font-size:11px; font-weight:700; text-anchor:middle; }
.ru-arrow{ fill:var(--primary); }
.ru-mark{ fill:var(--primary); font-size:13px; font-weight:800; text-anchor:middle; }

/* Apvalinimo tiesė: tik dvi „apvalios" ribos, vidurys ir pati reikšmė. */
.rl-svg{ width:100%; height:auto; max-width:420px; }
.rl-axis{ stroke:var(--border-strong); stroke-width:2.4; }
.rl-tick{ stroke:var(--border-strong); stroke-width:2.4; }
.rl-mid{ stroke:var(--muted); stroke-width:2; stroke-dasharray:4 3; }
.rl-num{ fill:var(--text-2); font-size:12px; font-weight:800; text-anchor:middle; }
.rl-num.is-mid{ fill:var(--muted); font-size:11px; }
.rl-num.is-target{ fill:#16A34A; }
.rl-arrow{ fill:none; stroke:#16A34A; stroke-width:2.4; }
.rl-head{ fill:#16A34A; }
.rl-dot{ fill:#F97316; stroke:var(--card); stroke-width:2; }
.rl-val{ fill:#F97316; font-size:13px; font-weight:800; text-anchor:middle; }

/* Dvi grupės greta – „kurioje daugiau?“ */
.cmp-objects{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.cmp-group{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; max-width:44%;
  padding:10px 12px; border:2px solid var(--border); border-radius:14px; background:var(--card);
}
.cmp-q{ font-size:1.7rem; font-weight:800; color:var(--muted); }
.cmp-ic{ font-size:1.5rem; line-height:1.1; }

.objects{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.obj-group{ display:flex; gap:5px; flex-wrap:wrap; }
.obj-dot{ width:18px; height:18px; border-radius:50%; box-shadow:var(--shadow-sm); }
.obj-dot.o0{ background:var(--seg-0); } .obj-dot.o1{ background:var(--seg-1); } .obj-dot.o2{ background:var(--seg-2); }
.obj-plus{ font-weight:800; color:var(--muted); }

/* --------------------------- GEOMETRINĖS FIGŪROS --------------------------- */
.shape-svg{ width:100%; height:auto; max-width:300px; margin:0 auto; }
.sh-body{ stroke-width:3.5; stroke-linejoin:round; fill-opacity:.22; }
.sh-body.sh-s0{ fill:var(--seg-0); stroke:var(--seg-0); }
.sh-body.sh-s1{ fill:var(--seg-1); stroke:var(--seg-1); }
.sh-body.sh-s2{ fill:var(--seg-2); stroke:var(--seg-2); }
.sh-body.sh-s3{ fill:var(--seg-3); stroke:var(--seg-3); }
.sh-path{ fill:none; stroke:var(--primary); stroke-width:3; stroke-dasharray:9 6; stroke-linejoin:round; }
.sh-vertex{ fill:var(--card); stroke:var(--text); stroke-width:2.5; }
.sh-label{ fill:var(--text); font-family:'Inter',system-ui,sans-serif; font-size:15px; font-weight:800; }
.sh-caption{ fill:var(--muted); font-family:'Inter',system-ui,sans-serif; font-size:13px; font-weight:700; }

.shape-grid{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:10px 14px; }
.shape-cell{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.mini-shape-svg{ width:62px; height:62px; }
.shape-cell-lbl{ font-size:.72rem; font-weight:700; color:var(--text-2); text-align:center; white-space:nowrap; }
.shape-set-cap{ margin-top:8px; text-align:center; font-size:.78rem; font-weight:700; color:var(--muted); }

/* --------------------------- LAIKRODIS --------------------------- */
.clock-svg{ width:100%; height:auto; max-width:250px; margin:0 auto; }
.ck-face{ fill:var(--card); stroke:var(--border-strong); stroke-width:4; }
.ck-tick{ stroke:var(--muted); stroke-width:1.6; stroke-linecap:round; }
.ck-tick-major{ stroke:var(--text-2); stroke-width:3.4; stroke-linecap:round; }
.ck-num{ fill:var(--text); font-family:'Inter',system-ui,sans-serif; font-size:17px; font-weight:800; }
.ck-hand-hour{ stroke:var(--primary); stroke-width:7.5; stroke-linecap:round; }
.ck-hand-min{ stroke:var(--success); stroke-width:4.5; stroke-linecap:round; }
.ck-center{ fill:var(--text); }
.ck-digital{ fill:var(--primary); font-family:'Inter',system-ui,sans-serif; font-size:26px; font-weight:800; }
.clock-grid{ align-items:center; }
.clock-grid .shape-cell{ max-width:190px; }
.ck-arrow{ font-size:1.5rem; font-weight:800; color:var(--muted); align-self:center; }

/* --------------------------- TRUPMENOS --------------------------- */
.fraction-svg{ width:100%; height:auto; max-width:150px; }
.fraction-grid{ align-items:center; gap:10px 12px; }
.fraction-grid .shape-cell{ max-width:160px; gap:6px; }
.fr-slice,.fr-cell{ fill:var(--card); stroke:var(--text-2); stroke-width:2.5; stroke-linejoin:round; }
.fr-slice.on,.fr-cell.on{ fill-opacity:.55; }
.fr-slice.on.fr-s0,.fr-cell.on.fr-s0{ fill:var(--seg-0); stroke:var(--seg-0); }
.fr-slice.on.fr-s1,.fr-cell.on.fr-s1{ fill:var(--seg-1); stroke:var(--seg-1); }
.fr-slice.on.fr-s2,.fr-cell.on.fr-s2{ fill:var(--seg-2); stroke:var(--seg-2); }
.fr-slice.on.fr-s3,.fr-cell.on.fr-s3{ fill:var(--seg-3); stroke:var(--seg-3); }
.fr-label{ font-size:1.35rem; font-weight:800; color:var(--text); line-height:1; }
.fr-op{ font-size:1.7rem; font-weight:800; color:var(--muted); align-self:center; padding:0 2px; }

/* --------------------------- LAIKO / TRUPMENOS ĮVESTIS --------------------------- */
.answer-time{ display:flex; align-items:center; gap:8px; }
.time-input{ width:104px; text-align:center; }
.time-sep{ font-size:1.5rem; font-weight:800; color:var(--text-2); }

.answer-fraction{ display:inline-flex; flex-direction:column; align-items:center; gap:5px; }
.frac-input{ width:132px; text-align:center; }
.frac-bar{ display:block; width:100%; height:3px; border-radius:2px; background:var(--text-2); }

/* ------------------- LYGČIŲ SISTEMŲ PLOKŠTUMA ------------------- */
.sysp-svg{ width:100%; max-width:360px; height:auto; display:block; margin:0 auto; }
.sysp-grid{ stroke:var(--border); stroke-width:1; }
.sysp-axis{ stroke:var(--text-2); stroke-width:1.8; }
.sysp-l1{ stroke:#16A34A; stroke-width:3.2; stroke-linecap:round; }
.sysp-l2{ stroke:#2563EB; stroke-width:3.2; stroke-linecap:round; }
.sysp-dash{ stroke:#DC2626; stroke-width:1.6; stroke-dasharray:5 4; }
.sysp-dot{ fill:#DC2626; stroke:var(--card); stroke-width:2; }

.sysp-legend{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:10px; }
.sysp-key{
  font-size:.86rem; font-weight:800; padding:4px 10px; border-radius:999px;
  border:2px solid currentColor; background:var(--card);
}
.sysp-key.k1{ color:#16A34A; }
.sysp-key.k2{ color:#2563EB; }
.sysp-key.pt{ color:#DC2626; }

.sandbox{ display:grid; gap:14px; }
.sbx-controls{ display:grid; gap:10px; }
.sbx-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sbx-row.is-1{ color:#16A34A; }
.sbx-row.is-2{ color:#2563EB; }
.sbx-eq{ font-weight:800; font-size:1.05rem; color:currentColor; }
.sbx-input{
  width:76px; text-align:center; padding:8px 6px; font-size:1rem; font-weight:700;
  border:2px solid currentColor; border-radius:10px;
  background:var(--card); color:var(--text);
}
.sbx-input:focus{ outline:none; box-shadow:0 0 0 4px rgba(99,102,241,.14); }

/* --------------------- RYMANO SUMŲ INTERAKTYVUS ĮRANKIS ---------------------
   Teorijos skydelyje po integralo GIF animacija: mokinys stumdo šliaužiklį N
   ir mato, kaip mėlynų stačiakampių suma artėja prie ploto po kreive, o
   raudona „paklaidos“ juostelė traukiasi. */
.riemann-explorer{ display:grid; gap:14px; padding:16px; border-radius:var(--r); background:var(--surface-2); border:1px solid var(--border); }
.riemann-heading{ font-weight:800; font-size:.95rem; color:var(--secondary); }
.riemann-controls{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.riemann-label{ font-weight:700; font-size:.92rem; color:var(--text); }
.riemann-slider{ flex:1; min-width:160px; accent-color:#3B82F6; height:6px; cursor:pointer; }
.riemann-n-value{ font-weight:800; font-size:1.1rem; color:#1D4ED8; min-width:2.4em; text-align:center; }
.riemann-quick{ display:flex; gap:8px; flex-wrap:wrap; }
.riemann-quick-btn{
  padding:7px 14px; border-radius:999px; border:1.5px solid #1D4ED8; background:var(--card);
  color:#1D4ED8; font-weight:700; font-size:.82rem; cursor:pointer; transition:background var(--ease), color var(--ease);
}
.riemann-quick-btn:hover{ background:#1D4ED8; color:#fff; }
.riemann-body{ display:grid; grid-template-columns:minmax(260px,1.4fr) minmax(220px,1fr); gap:18px; align-items:start; }
@media (max-width:640px){ .riemann-body{ grid-template-columns:1fr; } }
.riemann-plot{ background:var(--card); border-radius:var(--r-sm); padding:8px; }
.riemann-svg{ width:100%; height:auto; display:block; }
.riemann-grid{ stroke:var(--border); stroke-width:1; }
.riemann-axis{ stroke:var(--text-2); stroke-width:1.6; }
.riemann-axis-label{ font-size:12px; fill:var(--muted); font-style:italic; }
.riemann-tick{ font-size:10px; fill:var(--muted); }
.riemann-rect{ fill:#3B82F6; fill-opacity:.75; stroke:#1D4ED8; stroke-width:1.4; }
.riemann-sliver{ fill:#EF4444; fill-opacity:.5; stroke:none; }
.riemann-curve{ stroke:#1E293B; stroke-width:2.6; stroke-linecap:round; }
.riemann-stats{ display:grid; gap:8px; align-content:start; }
.rst-row{ font-size:.88rem; line-height:1.4; }
.rst-label{ font-weight:700; color:var(--text-2); margin-right:4px; }
.rst-dissolved{
  margin-top:4px; padding:8px 12px; border-radius:10px; font-weight:800; font-size:.88rem;
  background:color-mix(in srgb, var(--success) 16%, var(--card)); color:var(--success-700);
  border-left:4px solid var(--success);
}

/* --------------------- VIENETINIO APSKRITIMO INTERAKTYVUS ĮRANKIS ---------------------
   Naudoja tuos pačius `.riemann-*` išdėstymo blokus (antraštė, valdikliai,
   šliaužiklis, greiti mygtukai, dviejų stulpelių kūnas) - tik pati SVG ir
   spalvos savos. Žalia/mėlyna/raudona parinktos taip, kad liktų ryškios
   TIEK šviesiame, TIEK tamsiame fone (netaikoma `var(--text)` ar pan.,
   nes tikslas - fiksuota, atpažįstama spalva, o ne tema). */
.uc-play-btn{
  padding:8px 16px; border-radius:999px; border:1.5px solid var(--secondary); background:var(--secondary);
  color:#fff; font-weight:700; font-size:.85rem; cursor:pointer; transition:filter var(--ease);
}
.uc-play-btn:hover{ filter:brightness(1.08); }
.uc-play-btn.is-playing{ background:var(--card); color:var(--secondary); }
.unit-circle-svg{ width:100%; height:auto; display:block; touch-action:none; cursor:grab; user-select:none; }
#uc-plot{ touch-action:none; cursor:grab; user-select:none; }
#uc-plot.is-dragging, #uc-plot.is-dragging .unit-circle-svg{ cursor:grabbing; }
.uc-plot{ display:grid; gap:8px; }
.uc-legend{
  display:flex; align-items:center; justify-content:center; gap:8px 18px; flex-wrap:wrap;
  min-height:34px; padding:7px 10px; border-top:1px solid var(--border);
  color:var(--text); font-size:.88rem; font-weight:750;
}
.uc-legend-item{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.uc-legend-item i{
  display:inline-block; width:22px; height:4px; border-radius:999px; flex:0 0 auto;
  background:currentColor;
}
.uc-legend-x{ color:#16A34A; }
.uc-legend-y{ color:#2563EB; }
.uc-legend-r{ color:#DC2626; }
.uc-axis{ stroke:var(--text-2); stroke-width:1.4; }
.uc-axis-lbl{ font-size:13px; fill:var(--muted); font-style:italic; }
.uc-circle{ fill:none; stroke:var(--border); stroke-width:2; }
.uc-arc{ fill:none; stroke:var(--text-2); stroke-width:1.4; stroke-dasharray:3 3; }
.uc-rightangle{ fill:none; stroke:var(--text-2); stroke-width:1.3; }
.uc-leg-x{ stroke:#16A34A; stroke-width:3.4; stroke-linecap:round; }
.uc-leg-y{ stroke:#2563EB; stroke-width:3.4; stroke-linecap:round; }
.uc-hyp{ stroke:#DC2626; stroke-width:3; stroke-linecap:round; }
.uc-point{ fill:#DC2626; stroke:var(--card); stroke-width:2.5; }
.uc-stat-x .rst-label{ color:#16A34A; }
.uc-stat-y .rst-label{ color:#2563EB; }
.uc-stat-r .rst-label{ color:#DC2626; }
.uc-stat-value{
  font-family:"KaTeX_Main", "Times New Roman", serif;
  font-variant-numeric:tabular-nums;
}

/* ------------------------- REIKŠMIŲ LENTELĖ --------------------------- */
/* Pagalbinė, nevertinama: kiekvienas laukelis pasitikrina pats. */
.viz-group{ display:grid; gap:16px; }
.vgroup{ display:grid; gap:16px; }
.vgroup.is-row{ grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); align-items:center; }
.vtabs{ display:grid; gap:12px; }
.vtab-hint{ font-size:.9rem; font-weight:700; color:var(--text-2); }
.vtab-row{ display:grid; gap:6px; }
.vtab-row.is-1{ color:#16A34A; }
.vtab-row.is-2{ color:#2563EB; }
.vtab-eq{ font-weight:800; font-size:1rem; color:currentColor; }
.vtab{ border-collapse:separate; border-spacing:6px 0; }
.vtab th{
  font-size:.95rem; font-weight:800; color:var(--text-2);
  text-align:center; width:34px; padding:6px 0;
}
.vtab-x{
  min-width:64px; text-align:center; padding:6px 8px; border-radius:9px;
  font-weight:800; color:currentColor; background:var(--bg-soft, rgba(99,102,241,.08));
}
.vtab-cell{ padding:4px 0; }
.vtab-in{
  width:64px; text-align:center; padding:8px 4px; font-size:1rem; font-weight:700;
  border:2px solid currentColor; border-radius:10px;
  background:var(--card); color:var(--text);
}
.vtab-in:focus{ outline:none; box-shadow:0 0 0 4px rgba(99,102,241,.14); }
.vtab-cell.is-ok .vtab-in{ border-color:#16A34A; background:rgba(22,163,74,.10); }
.vtab-cell.is-bad .vtab-in{ border-color:#DC2626; background:rgba(220,38,38,.10); }

/* --------------------------- LYGČIŲ SISTEMA --------------------------- */
/* \begin{cases} ... \end{cases} – dvi lygtys po riestiniu skliaustu. */
.cases{
  display:inline-grid; grid-auto-rows:auto; gap:3px;
  padding-left:15px; position:relative; vertical-align:middle; text-align:left;
}
.cases::before{
  content:""; position:absolute; left:0; top:1px; bottom:1px; width:9px;
  border-left:2.5px solid currentColor;
  border-top-left-radius:9px; border-bottom-left-radius:9px;
}
.cases-row{ white-space:nowrap; line-height:1.5; }

/* Lygčių sistemos sprendinys – pora (x; y). Laukeliai pažymėti raidėmis,
   kad mokinys nesupainiotų, kuris skaičius kur eina. */
.answer-pair{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pair-lbl{ font-size:1.15rem; font-weight:800; color:var(--text-2); font-style:italic; }
.pair-sep{ font-size:1.35rem; font-weight:800; color:var(--muted); }
.pair-input{ width:112px; text-align:center; }

/* ------------------------- SAVYBIŲ LENTELĖ ----------------------------- */
/* Funkcijos tyrimas pagal grafiką: kiekviena savybė – atskira eilutė su savo
   laukeliu. Patikrinus eilutės nusidažo, todėl mokinys iš karto mato, KURIĄ
   savybę nustatė klaidingai, ir netaiso tų, kurios jau teisingos. */
.answer-table{ width:100%; }
.prop-table{ width:100%; border-collapse:separate; border-spacing:0 6px; }
.prop-table th{
  text-align:left; font-size:.92rem; font-weight:700; color:var(--text-2);
  padding:0 12px 0 2px; width:44%; vertical-align:middle; line-height:1.35;
}
.prop-table td{ width:56%; }
.tbl-input{
  width:100%; min-width:0; font-size:1.02rem; padding:10px 14px; border-radius:12px;
}
.tbl-input.is-right{
  border-color:var(--success);
  background:color-mix(in srgb,var(--success) 10%,var(--surface-2));
}
.tbl-input.is-wrong{
  border-color:var(--danger);
  background:color-mix(in srgb,var(--danger) 10%,var(--surface-2));
}
.tbl-help{
  margin:10px 2px 0; font-size:.82rem; color:var(--muted); line-height:1.5;
}
.tbl-help b{ color:var(--text-2); }

/* Intervalo atsakymas: laukelis + trumpa rašybos priminimo eilutė. */
.answer-interval{ display:grid; gap:2px; }
.iv-help{
  margin:8px 2px 0; font-size:.82rem; color:var(--muted); line-height:1.5;
}
.iv-help b{ color:var(--text-2); }

@media (max-width:640px){
  .prop-table,.prop-table tbody,.prop-table tr,.prop-table th,.prop-table td{ display:block; width:auto; }
  .prop-table tr{ margin-bottom:12px; }
  .prop-table th{ padding:0 0 4px; }
}

/* --------------------------- KLASIŲ SKIRTUKAI -------------------------- */
/* Juosta, leidžianti pereiti tarp klasių puslapių kaip tarp skirtukų. */
.grade-tabs{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  max-width:var(--wrap, 1100px); margin:0 auto 14px; padding:0 20px;
}
.grade-tabs .gtab{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 15px; border-radius:999px; text-decoration:none;
  font-weight:800; font-size:.92rem; color:var(--text-2);
  background:var(--card); border:2px solid var(--border);
}
.grade-tabs .gtab:hover{ border-color:var(--primary); color:var(--primary); }
.grade-tabs .gtab.is-now{
  background:var(--primary); border-color:var(--primary); color:#FFFFFF;
}
.grade-tabs .gtab.is-soon{
  opacity:.72; background:var(--bg);
  border-style:dashed; color:var(--muted);
}
/* Kol klasės dar nėra, nuoroda veda į aprašymą, kas joje bus – todėl ji spaudžiama.
   Nespaudžiamas lieka tik <span> (dabartinė klasė arba visai neparuošta). */
span.gtab.is-soon{ opacity:.55; cursor:not-allowed; }
a.gtab.is-soon:hover{ opacity:1; border-color:var(--primary); color:var(--primary); }
.gtab-soon{
  font-size:.72rem; font-weight:800; padding:1px 7px; border-radius:999px;
  background:var(--border); color:var(--muted);
}

/* Praktikos antraštė su spausdinimo mygtuku */
.practice-head{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px;
}
.practice-head .section-title{ margin:0; }
.ws-open{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px; border-radius:12px; cursor:pointer;
  font-family:inherit; font-size:.85rem; font-weight:800;
  color:var(--text-2); background:var(--card);
  border:2px solid var(--border-strong);
  transition:border-color var(--ease),color var(--ease);
}
.ws-open:hover{ border-color:var(--primary); color:var(--primary); }

/* ------------------------- UŽDUOČIŲ REŽIMAI --------------------------- */
.mode-bar{ display:flex; gap:10px; flex-wrap:wrap; margin:0 0 14px; }
.mode-btn{
  display:flex; align-items:center; gap:8px; padding:10px 16px;
  font-family:inherit; font-size:.95rem; font-weight:800; color:var(--text);
  background:var(--card); border:2.5px solid var(--border-strong);
  border-radius:14px; cursor:pointer;
}
.mode-btn:hover{ border-color:var(--primary); }
.mode-btn:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(99,102,241,.20); }
.mode-btn.is-on{
  background:var(--primary); border-color:var(--primary); color:#FFFFFF;
  box-shadow:0 6px 16px rgba(79,70,229,.28);
}
.mode-ic{ font-size:1.15rem; line-height:1; }
.mode-n{
  min-width:26px; padding:2px 7px; border-radius:999px; font-size:.78rem;
  background:var(--bg); color:var(--text-2);
}
.mode-btn.is-on .mode-n{ background:rgba(255,255,255,.22); color:#FFFFFF; }

/* Klaidų kartojimo režimas išsiskiria spalva – tai asmeninis, o ne bendras sąrašas */
.mode-btn.is-mistakes{ border-color:#F59E0B; }
.mode-btn.is-mistakes:hover{ border-color:#D97706; }
.mode-btn.is-mistakes.is-on{
  background:#F59E0B; border-color:#F59E0B; box-shadow:0 6px 16px rgba(245,158,11,.28);
}

/* --------------------------- KLAIDŲ KLINIKA --------------------------- */
.clinic{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 16px; margin:0 0 14px;
  background:#FFFBEB; border:2px solid #FCD34D; border-radius:14px;
}
.clinic-ic{ font-size:1.2rem; line-height:1; }
.clinic-lbl{ font-weight:800; color:#92400E; }
.clinic-dots{ display:flex; gap:6px; }
.clinic-dot{
  width:28px; height:28px; display:grid; place-items:center;
  border-radius:50%; font-weight:800; font-size:.85rem;
  background:var(--card); color:var(--muted); border:2px solid var(--border-strong);
}
.clinic-dot.is-done{ background:#DCFCE7; color:#166534; border-color:#22C55E; }
.clinic-dot.is-now{ box-shadow:0 0 0 3px rgba(245,158,11,.28); border-color:#F59E0B; }
.clinic-note{ font-size:.88rem; font-weight:700; color:var(--text-2); }
.clinic-note.is-done{ color:#166534; }
.clinic-again{
  margin-left:auto; padding:8px 14px; border-radius:12px;
  font-family:inherit; font-size:.85rem; font-weight:800;
  background:#F59E0B; color:#FFFFFF; border:none; cursor:pointer;
}
.clinic-again:hover{ filter:brightness(1.06); }

/* --------------------------- KLAIDŲ SĄSIUVINIS ------------------------ */
.mbook{
  margin-top:18px; padding:16px 18px;
  background:#FFFBEB; border:2px solid #FCD34D; border-radius:16px;
}
.mbook-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mbook-ic{ font-size:1.3rem; line-height:1; }
.mbook-title{ margin:0; font-size:1.05rem; font-weight:800; color:#92400E; }
.mbook-count{
  margin-left:auto; padding:3px 10px; border-radius:999px;
  background:#FDE68A; color:#92400E; font-size:.82rem; font-weight:800;
}
.mbook-sub{ margin:10px 0 6px; font-size:.9rem; font-weight:700; color:var(--text-2); }
.mb-list{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:8px; }
.mb-item{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 12px; background:var(--card);
  border:1px solid #FCD34D; border-radius:12px;
}
.mb-n{
  flex:0 0 auto; min-width:34px; text-align:center;
  padding:2px 8px; border-radius:999px;
  background:#FEF3C7; color:#92400E; font-weight:800; font-size:.82rem;
}
.mb-text{ font-size:.92rem; line-height:1.5; color:var(--text-2); }
.mbook-btn{ width:100%; }
.mbook.is-clean{
  display:flex; align-items:center; gap:10px;
  background:#F0FDF4; border-color:#86EFAC;
}
.mbook-clean{ font-weight:700; color:#166534; }

/* Tamsus režimas: šviesus gelsvas fonas ir tamsiai rudas tekstas buvo
   skaityti tik ant šviesaus puslapio fono – tamsiame režime virsdavo
   ryškia gelsva dėme. */
:root[data-theme="dark"] .clinic{ background:rgba(245,158,11,.10); border-color:rgba(245,158,11,.4); }
:root[data-theme="dark"] .clinic-lbl{ color:#FBBF24; }
:root[data-theme="dark"] .clinic-dot.is-done{ background:rgba(34,197,94,.16); color:#86EFAC; border-color:#22C55E; }
:root[data-theme="dark"] .clinic-note.is-done{ color:#86EFAC; }
:root[data-theme="dark"] .clinic-again{ color:#1E1300; }

:root[data-theme="dark"] .mbook{ background:rgba(245,158,11,.10); border-color:rgba(245,158,11,.4); }
:root[data-theme="dark"] .mbook-title{ color:#FBBF24; }
:root[data-theme="dark"] .mbook-count{ background:rgba(245,158,11,.22); color:#FCD34D; }
:root[data-theme="dark"] .mb-item{ border-color:rgba(245,158,11,.35); }
:root[data-theme="dark"] .mb-n{ background:rgba(245,158,11,.22); color:#FCD34D; }
:root[data-theme="dark"] .mbook.is-clean{ background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.4); }
:root[data-theme="dark"] .mbook-clean{ color:#86EFAC; }

/* Laiptai: Lygis 1 ➔ 2 ➔ 3 su pažangos taškais */
.ladder{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 16px; margin:0 0 14px;
  background:var(--card); border:2px solid var(--border); border-radius:14px;
}
.ladder-lbl{ font-weight:800; color:var(--text-2); }
.ladder-steps{ display:flex; align-items:center; gap:6px; }
.ladder-step{
  width:30px; height:30px; display:grid; place-items:center;
  border-radius:50%; font-weight:800; font-size:.95rem;
  background:var(--bg); color:var(--muted); border:2px solid var(--border-strong);
}
.ladder-step.is-done{ background:#DCFCE7; color:#166534; border-color:#22C55E; }
.ladder-step.is-now{ background:var(--primary); color:#FFFFFF; border-color:var(--primary); }
.ladder-arrow{ color:var(--muted); font-weight:800; }
.ladder-dots{ display:flex; gap:5px; }
.ladder-dot{
  width:11px; height:11px; border-radius:50%;
  background:var(--bg); border:2px solid var(--border-strong);
}
.ladder-dot.is-on{ background:#22C55E; border-color:#22C55E; }
.ladder-note{ font-size:.88rem; font-weight:700; color:var(--text-2); }

@media (max-width: 640px){
  .mode-btn{ flex:1 1 45%; justify-content:center; padding:10px 8px; font-size:.85rem; }
  .mode-lbl{ white-space:nowrap; }
}

/* Mišrusis skaičius: sveikoji dalis + trupmena viename laukelių bloke. */
.answer-mixed{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.mixed-whole{ width:92px; text-align:center; }
.answer-mixed .answer-fraction{ display:inline-flex; }

/* Pasirinkimo mygtukai (< = >). Dideli, kad tiktų ir mažiems pirštams. */
.answer-choice{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.choice-btn{
  min-width:74px; padding:12px 18px; font-size:1.6rem; font-weight:800; line-height:1;
  font-family:inherit; color:var(--text); background:var(--card);
  border:2.5px solid var(--border-strong); border-radius:14px; cursor:pointer;
  /* Spalvos keičiamos akimirksniu (be perėjimo) – pasirinkimas turi būti
     matomas iš karto, net jei animacijos išjungtos ar kortelė ką tik įkelta. */
  transition:transform .12s ease;
}
.choice-btn:hover{ border-color:var(--primary); transform:translateY(-2px); }
.choice-btn:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(99,102,241,.20); }
.choice-btn.is-picked{
  background:var(--primary); border-color:var(--primary); color:#FFFFFF;
  box-shadow:0 6px 16px rgba(79,70,229,.28);
}
@media (prefers-reduced-motion: reduce){ .choice-btn:hover{ transform:none; } }

/* Klaidų pranešimuose dabar renderinama matematika – spalva turi likti bloko spalva. */
.feedback .math{ color:inherit; font-weight:700; }
.feedback strong{ font-weight:800; }

/* --------------------------- PAVEIKSLĖLIAI --------------------------- */
.viz-figure{ margin:0; }
.viz-figure img{
  width:100%; height:auto; border-radius:var(--r);
  border:1px solid var(--border); box-shadow:var(--shadow-sm); background:var(--card);
}
.viz-figure figcaption{ margin-top:8px; text-align:center; font-size:.78rem; font-weight:700; color:var(--muted); }

/* --------------------------- PAVEIKSLĖLIO DIDINIMAS --------------------------- */
/* Teorijos paveikslėliuose būna formulių ir smulkaus teksto, todėl jie
   šiek tiek padidėja užvedus pelę ir atsidaro per visą ekraną paspaudus. */
.viz-figure img.zoomable{
  cursor:zoom-in;
  transition:transform .2s ease-in-out,box-shadow .2s ease-in-out;
}
.viz-figure img.zoomable:hover,
.viz-figure img.zoomable:focus-visible{ transform:scale(1.04); box-shadow:var(--shadow-md); }

.lightbox{
  position:fixed; inset:0; z-index:80;
  display:grid; place-items:center; padding:clamp(16px,4vw,48px);
  background:rgba(2,6,23,.8);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; transition:opacity .18s ease-in-out;
}
.lightbox.show{ opacity:1; }
/* Uždarytas modalas privalo dingti IŠ TIKRŲJŲ. `display:grid` viršuje nugali
   naršyklės `[hidden]{display:none}`, todėl uždarytas sluoksnis likdavo per visą
   ekraną (z-index:80) ir, nors nematomas (`opacity:0`), gaudydavo visus
   paspaudimus – po vieno paveikslėlio peržiūros puslapis nustodavo reaguoti.
   `pointer-events` papildomai apsaugo 180 ms užgesimo metu. */
.lightbox[hidden]{ display:none; }
.lightbox:not(.show){ pointer-events:none; }
.lightbox.show{ pointer-events:auto; }
.lightbox-figure{
  margin:0; display:flex; flex-direction:column; align-items:center; gap:12px;
  max-width:100%; max-height:100%;
}
.lightbox-figure img{
  max-width:100%; max-height:82vh; width:auto; height:auto;
  border-radius:var(--r); background:#fff; cursor:default;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.lightbox-cap{
  max-width:70ch; text-align:center; font-size:.85rem; font-weight:700;
  color:#E8EDF6; text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.lightbox-close{
  position:fixed; top:clamp(12px,3vw,24px); right:clamp(12px,3vw,24px); z-index:1;
  width:46px; height:46px; border-radius:14px;
  display:grid; place-items:center; font-size:1.15rem; font-weight:800; color:#fff;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background var(--ease),transform var(--ease);
}
.lightbox-close:hover{ background:rgba(255,255,255,.26); transform:scale(1.06); }
body.no-scroll{ overflow:hidden; }

/* --------------------------- TOAST + KONFETI --------------------------- */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
  background:var(--text); color:var(--bg); padding:12px 20px; border-radius:14px; font-weight:700; font-size:.9rem;
  box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:opacity var(--ease),transform var(--ease); z-index:60;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.confetti{ position:fixed; inset:0; pointer-events:none; z-index:55; overflow:hidden; }
.confetti span{ position:absolute; top:30%; width:10px; height:14px; border-radius:2px; animation:confetti .9s ease-out forwards; }

/* --------------------------- ANIMACIJOS --------------------------- */
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
@keyframes pop{ 0%{ transform:scale(.96); } 50%{ transform:scale(1.02); } 100%{ transform:scale(1); } }
@keyframes slideDown{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }
@keyframes shake{ 10%,90%{ transform:translateX(-2px); } 30%,70%{ transform:translateX(4px); } 50%{ transform:translateX(-6px); } }
.shake{ animation:shake .4s; }
@keyframes confetti{ to{ transform:translate(var(--dx),70vh) rotate(var(--dr)); opacity:0; } }

/* --------------------------- RESPONSIVE --------------------------- */
@media (max-width:680px){
  .topic-menu{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .topic-menu::-webkit-scrollbar{ display:none; }
  .topic-btn{ flex:0 0 auto; }
  .module-header{ flex-direction:column; text-align:center; gap:16px; }
  .mh-meta{ justify-content:center; }
  .mh-sub{ margin:0 auto; }
  .progress-stats{ grid-template-columns:1fr; }
  .answer-row{ flex-direction:column; }
  .answer-input{ width:100%; }
  .answer-time{ width:100%; }
  .time-input{ flex:1; width:auto; }
  .answer-fraction{ width:100%; }
  .frac-input{ width:100%; }
  .answer-pair{ width:100%; }
  .pair-input{ flex:1; width:auto; min-width:80px; }
  .btn-primary{ width:100%; }
  .task-actions{ flex-direction:column; align-items:stretch; }
  .task-actions .spacer{ display:none; }
  .btn-nav{ width:100%; text-align:center; }
}
@media (max-width:420px){
  .nav-chip{ width:34px; height:34px; font-size:.78rem; }
}

/* gerbiam sumažintą judesį */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
  .progress-bar > i{ transition:none !important; }
}
/* --------------------------- PLOTAS IR PERIMETRAS --------------------------- */
.area-grid-svg{ width:100%; height:auto; max-width:300px; margin:0 auto; }
.ag-cell{ stroke:var(--card); stroke-width:1.5; fill-opacity:.30; }
.ag-cell.ag-s0{ fill:var(--seg-0); } .ag-cell.ag-s1{ fill:var(--seg-1); }
.ag-cell.ag-s2{ fill:var(--seg-2); } .ag-cell.ag-s3{ fill:var(--seg-3); }
.ag-outline{ fill:none; stroke:var(--text-2); stroke-width:2.5; stroke-linejoin:round; }
.ag-outline.hl{ stroke:var(--primary); stroke-width:4; stroke-dasharray:9 6; }
.ag-label{ fill:var(--text); font-family:'Inter',system-ui,sans-serif; font-size:15px; font-weight:800; }

/* --------------------------- DAUGYBA STULPELIU --------------------------- */
.column-mult{
  --cm-cell:34px;
  display:inline-block; margin:0 auto; padding:14px 16px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow-sm);
}
.cm-row{ display:grid; grid-template-columns:repeat(var(--cm-cols),var(--cm-cell)); }
.cm-d{
  display:grid; place-items:center; height:34px;
  font-family:'Inter',system-ui,sans-serif; font-size:1.25rem; font-weight:800;
  font-variant-numeric:tabular-nums; color:var(--text);
}
.cm-op{ color:var(--muted); font-weight:700; }
.cm-carries .cm-d{ height:20px; font-size:.82rem; }
.cm-carry{ color:var(--warn); }
.cm-rule{ height:3px; border-radius:2px; background:var(--text-2); margin:5px 0; }
.cm-result .cm-d{ color:var(--primary); }
.cm-blank{
  border:2px dashed var(--border-strong); border-radius:7px;
  width:26px; height:30px; justify-self:center; align-self:center;
}
.cm-hl{ background:var(--primary-50); border-radius:7px; }
.cm-row-hl .cm-d{ color:var(--success-700); }
.cm-shift{ background:repeating-linear-gradient(45deg,transparent,transparent 4px,var(--primary-50) 4px,var(--primary-50) 8px); border-radius:7px; }
@media (max-width:680px){ .column-mult{ --cm-cell:28px; } .cm-d{ height:28px; font-size:1.05rem; } }
/* Tamsiame režime --primary ant tamsios kortelės per silpnas – šviesesnis atspalvis. */
:root[data-theme="dark"] .cm-result .cm-d{ color:#A5B4FC; }

/* --------------------------- DALYBA KAMPU --------------------------- */
.long-div{
  --ld-cell:30px;
  display:inline-flex; align-items:flex-start; margin:0 auto; padding:14px 16px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow-sm);
}
.ld-left{ display:flex; flex-direction:column; }
.ld-row{ display:grid; grid-template-columns:repeat(var(--ld-cols),var(--ld-cell)); }
.ld-d{
  display:grid; place-items:center; height:30px;
  font-family:'Inter',system-ui,sans-serif; font-size:1.2rem; font-weight:800;
  font-variant-numeric:tabular-nums; color:var(--text);
}
.ld-minus{ color:var(--danger); }
.ld-rule{ display:block; width:100%; height:3px; border-radius:2px; background:var(--text-2); }
.ld-dividend .ld-d{ color:var(--text); }
.ld-remainder .ld-d{ color:var(--danger-700); }
.ld-hl-row .ld-d{ color:var(--success-700); }
/* Vertikalus kampo brūkšnys ir horizontalė po dalikliu */
.ld-right{ border-left:3px solid var(--text-2); margin-left:6px; padding-left:10px; }
.ld-divisor{ border-bottom:3px solid var(--text-2); padding-bottom:2px; }
.ld-divisor .ld-d,.ld-quotient .ld-d{ height:30px; }
.ld-quotient{ display:flex; padding-top:2px; }
.ld-quotient .ld-d{ color:var(--primary); }
.ld-blank{ border:2px dashed var(--border-strong); border-radius:7px; width:22px; height:26px; justify-self:center; align-self:center; }
.ld-zero{ color:var(--danger); background:rgba(239,68,68,.14); border-radius:7px; }
:root[data-theme="dark"] .ld-quotient .ld-d{ color:#A5B4FC; }
:root[data-theme="dark"] .ld-zero{ color:#FCA5A5; }
@media (max-width:680px){ .long-div{ --ld-cell:25px; } .ld-d{ height:25px; font-size:1rem; } }

/* --------------------- MAIŠELIS SU RUTULIUKAIS (tikimybės) --------------- */
/* Vaikas turi matyti VISUS rutuliukus – tada „kurios spalvos daugiau?"
   sprendžiama akimis, o ne mintinu skaičiavimu. */
.chance-bag{ display:flex; flex-direction:column; gap:10px; align-items:center; }
.bag-body{
  position:relative; width:min(320px,100%); padding:26px 18px 18px;
  border:3px solid var(--border); border-radius:14px 14px 26px 26px;
  background:var(--surface-2);
}
.bag-mouth{
  position:absolute; top:-3px; left:18%; right:18%; height:10px;
  border:3px solid var(--border); border-bottom:none;
  border-radius:12px 12px 0 0; background:var(--surface);
}
.bag-balls{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.bag-ball{
  width:28px; height:28px; border-radius:50%;
  box-shadow:inset -3px -3px 6px rgba(0,0,0,.22), 0 1px 2px rgba(0,0,0,.18);
}
.bag-legend{ display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center;
  font-size:.82rem; font-weight:700; color:var(--text-2); }
.bag-leg{ display:inline-flex; align-items:center; gap:6px; }
.bag-leg i{ width:12px; height:12px; border-radius:50%; display:inline-block; }
.bag-total{ color:var(--muted); }

/* ------------------------------ SEKA (logika) ---------------------------- */
.sequence{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center; }
.seq-cell{
  min-width:52px; padding:10px 12px; border-radius:12px;
  display:grid; place-items:center;
  background:var(--surface-2); border:2px solid var(--border);
  font-size:1.25rem; font-weight:800; color:var(--text);
}
.seq-cell.is-q{
  border-style:dashed; border-color:var(--secondary);
  color:var(--secondary); background:rgba(99,102,241,.08);
}
.seq-step{ font-size:.78rem; font-weight:800; color:var(--muted); padding:0 2px; }
.seq-gap{ width:4px; }

@media (max-width:480px){
  .bag-ball{ width:24px; height:24px; }
  .seq-cell{ min-width:44px; padding:8px 9px; font-size:1.1rem; }
}