[hidden]{display:none!important}
:root{
  color-scheme:light;
  --bg:#f3f5fb; --bg2:#e9edf8; --surface:#ffffff; --surface2:#f7f8fd; --line:#dfe4f1; --ink:#18203d; --mute:#5f6887; --faint:#9aa3bf;
  --pri:#2f5df5; --pri-d:#1f45c9; --pri-l:#e8eeff; --pri-ink:#ffffff;   /* [Opus-1b, C303] tema de bază alb–albastru (era violet) */
  --ok:#1fb45a; --ok-d:#168a44; --ok-l:#e3f8eb; --ok-ink:#0f6b34;
  --bad:#f0505a; --bad-d:#c43740; --bad-l:#ffe8ea; --bad-ink:#a3222b;
  --warn:#ff9f1c; --warn-d:#d67f07; --warn-l:#fff2dd; --warn-ink:#8a5200;
  --gold:#ffc233; --gold-d:#e0a20e; --sky:#1cb0f6; --sky-d:#1592cf; --sky-l:#e2f5ff; --pink:#ff6fb5;
  --grid:#e7ebf5; --axis:#39415f;
  --shadow:0 1px 0 rgba(24,32,61,.04),0 8px 24px -12px rgba(24,32,61,.18);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#12152a; --bg2:#191d38; --surface:#1d2240; --surface2:#232a4d; --line:#2f3762; --ink:#eef0ff; --mute:#aab1d6; --faint:#6d76a3;
  --pri:#6f95ff; --pri-d:#2f5df5; --pri-l:#1d2a55; --pri-ink:#ffffff;
  --ok:#2fd06f; --ok-d:#1b9c50; --ok-l:#163d2c; --ok-ink:#8ff0b5;
  --bad:#ff6b73; --bad-d:#d0434c; --bad-l:#44202a; --bad-ink:#ffb3b8;
  --warn:#ffb03a; --warn-d:#d08a1c; --warn-l:#43321a; --warn-ink:#ffd699;
  --sky-l:#16334a; --grid:#283058; --axis:#c3c9ec;
  --shadow:0 1px 0 rgba(0,0,0,.2),0 10px 28px -12px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#12152a; --bg2:#191d38; --surface:#1d2240; --surface2:#232a4d; --line:#2f3762; --ink:#eef0ff; --mute:#aab1d6; --faint:#6d76a3;
  --pri:#6f95ff; --pri-d:#2f5df5; --pri-l:#1d2a55; --pri-ink:#ffffff;
  --ok:#2fd06f; --ok-d:#1b9c50; --ok-l:#163d2c; --ok-ink:#8ff0b5;
  --bad:#ff6b73; --bad-d:#d0434c; --bad-l:#44202a; --bad-ink:#ffb3b8;
  --warn:#ffb03a; --warn-d:#d08a1c; --warn-l:#43321a; --warn-ink:#ffd699;
  --sky-l:#16334a; --grid:#283058; --axis:#c3c9ec;
  --shadow:0 1px 0 rgba(0,0,0,.2),0 10px 28px -12px rgba(0,0,0,.6);
}
/* [Opus-1b, C303] comutarea culorii de accent: roșu / verde închis (data-accent pe <html>); întunecatul rămâne al temei */
:root[data-accent="rosu"]{--pri:#d32f3a;--pri-d:#a8222b;--pri-l:#fde8ea}
:root[data-accent="verde"]{--pri:#1e6b45;--pri-d:#145233;--pri-l:#e2f2e9}
@media (prefers-color-scheme:dark){:root[data-accent="rosu"]:not([data-theme="light"]){--pri:#ff6b73;--pri-d:#d32f3a;--pri-l:#45202a}:root[data-accent="verde"]:not([data-theme="light"]){--pri:#3fbf80;--pri-d:#1e6b45;--pri-l:#163d2c}}
:root[data-accent="rosu"][data-theme="dark"]{--pri:#ff6b73;--pri-d:#d32f3a;--pri-l:#45202a}
:root[data-accent="verde"][data-theme="dark"]{--pri:#3fbf80;--pri-d:#1e6b45;--pri-l:#163d2c}
.sfmsg{font-size:14px;font-weight:700;color:var(--warn-ink);background:var(--warn-l);border:2px dashed var(--warn-d);border-radius:12px;padding:8px 12px}
.refx{font-weight:800}
.askin{display:grid;gap:8px;border-top:2px dashed var(--line);padding-top:10px}
.askin-t{justify-self:start;display:inline-flex;align-items:center;gap:8px;border:2px solid var(--pri);background:var(--pri-l);color:var(--pri-d);border-radius:999px;min-height:44px;padding:0 14px 0 4px;font-weight:800}
.askin-t .av{width:34px;height:34px;display:grid;place-items:center;overflow:hidden}.askin-t .av svg{width:34px;height:34px}
.askin .asklist{display:grid;gap:8px;max-height:280px;overflow-y:auto}
.askin .reply{display:flex;gap:8px}.askin .reply input{flex:1;min-width:0;min-height:44px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--ink);padding:0 12px;font:600 15px Nunito,sans-serif}
.accbtn{border:2px solid var(--line);background:var(--surface);border-radius:12px;width:40px;height:40px;display:grid;place-items:center}
.accbtn i{width:18px;height:18px;border-radius:50%;background:var(--pri);box-shadow:inset 0 0 0 2px var(--surface)}
*{box-sizing:border-box}
html,body{height:100%}
/* [Opus-11, D36] „≠” din Nunito se vedea „=/” lipit de numărul următor: semnul vine dintr-un font de sistem care îl desenează întreg */
@font-face{font-family:'SemnL11';src:local('Segoe UI Symbol'),local('Arial'),local('Helvetica'),local('DejaVu Sans'),local('Liberation Sans'),local('Noto Sans'),local('Roboto');unicode-range:U+2260}
body{margin:0;background:var(--bg);color:var(--ink);font:600 16px/1.5 SemnL11,Nunito,system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
.m{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500}
em.v{font-style:normal;color:var(--pri);font-weight:800}

/* ---------- butoane în relief ---------- */
.btn{--c:var(--pri);--cd:var(--pri-d);--ci:var(--pri-ink);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border:0;border-radius:16px;background:var(--c);color:var(--ci);font-weight:800;font-size:16px;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 4px 0 var(--cd);transition:transform .08s,box-shadow .08s,filter .15s;user-select:none}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--cd)}
.btn:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.btn[disabled]{--c:var(--bg2);--cd:var(--line);--ci:var(--faint);cursor:not-allowed;filter:none}
.btn.ok{--c:var(--ok);--cd:var(--ok-d)} .btn.bad{--c:var(--bad);--cd:var(--bad-d)} .btn.warn{--c:var(--warn);--cd:var(--warn-d)} .btn.sky{--c:var(--sky);--cd:var(--sky-d)}
.btn.ghost{--c:var(--surface);--cd:var(--line);--ci:var(--pri);border:2px solid var(--line)}
.btn.wide{width:100%}
.btn.sm{min-height:40px;padding:0 14px;font-size:13px;border-radius:12px;box-shadow:0 3px 0 var(--cd)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--surface);border:2px solid var(--line);font-weight:800;font-size:14px}

/* ---------- ecranul principal ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:2px solid var(--line)}
.top-in{max-width:980px;margin:0 auto;padding:10px 16px 4px;display:flex;align-items:center;gap:10px}
.brand{font-weight:900;font-size:20px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.brand i{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--pri);color:#fff;font-style:normal;font-size:15px;box-shadow:0 3px 0 var(--pri-d)}
.stat{display:flex;align-items:center;gap:5px;font-weight:900;font-size:15px}
.stat svg{width:22px;height:22px}
.stat .xpu{font-size:11px;font-weight:900;letter-spacing:.04em;color:var(--mute);margin-left:-2px}   /* [Opus-5, D8] */
.themebtn{border:2px solid var(--line);background:var(--surface);border-radius:12px;width:40px;height:40px;display:grid;place-items:center}
.home{max-width:720px;margin:0 auto;padding:18px 16px 80px}
.hero{position:relative;border-radius:24px;padding:22px 20px 20px;color:#fff;background:linear-gradient(135deg,var(--pri) 0%,color-mix(in srgb,var(--pri) 70%,#1cb0f6) 55%,#1cb0f6 100%);box-shadow:0 6px 0 var(--pri-d);overflow:hidden}
.hero .k{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.hero h1{margin:6px 0 4px;font-size:clamp(28px,6vw,38px);line-height:1.08;font-weight:900;letter-spacing:-.02em}
.hero p{margin:0 0 16px;opacity:.95;max-width:44ch}
.hero .btn{--c:#fff;--cd:color-mix(in srgb,var(--pri) 25%,#fff);--ci:var(--pri-d)}
.hero svg.deco{position:absolute;right:-34px;bottom:-40px;width:170px;height:170px;opacity:.2;pointer-events:none}
.hero>*:not(.deco-wrap){position:relative}
.progress-row{display:flex;align-items:center;gap:12px;margin:18px 2px 6px}
.bar{flex:1;height:14px;border-radius:99px;background:var(--bg2);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--ok),#6ee7a0);transition:width .5s cubic-bezier(.2,.9,.3,1.2)}
.bar.pri>i{background:linear-gradient(90deg,var(--pri),#a48bff)}
.path{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px;padding:26px 0 10px}
.node-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.node{position:relative;width:78px;height:72px;border-radius:50%;border:0;background:var(--c,var(--bg2));box-shadow:0 7px 0 var(--cd,var(--line));display:grid;place-items:center;transition:transform .1s,box-shadow .1s}
.node:active{transform:translateY(7px);box-shadow:0 0 0 var(--cd)}
.node:focus-visible{outline:3px solid var(--sky);outline-offset:5px}
.node svg{width:36px;height:36px}
.node.done{--c:var(--gold);--cd:var(--gold-d);color:#fff}
.node.cur{--c:var(--pri);--cd:var(--pri-d);color:#fff}
.node.todo{--c:var(--surface);--cd:var(--line);color:var(--pri);border:3px solid var(--line)}
.node.cur::after{content:'';position:absolute;inset:-10px;border-radius:50%;border:4px solid var(--pri);opacity:.35;animation:ring 1.8s ease-out infinite}
@keyframes ring{0%{transform:scale(.9);opacity:.45}100%{transform:scale(1.18);opacity:0}}
.node-lbl{font-weight:800;font-size:14px;color:var(--mute);text-align:center;max-width:160px;line-height:1.2}
.node-lbl b{display:block;font-size:11px;letter-spacing:.12em;color:var(--faint);font-weight:900}
.start-bubble{position:absolute;top:-44px;white-space:nowrap;background:var(--surface);border:2px solid var(--line);color:var(--pri);font-weight:900;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:12px;animation:bob 1.6s ease-in-out infinite}
.start-bubble::after{content:'';position:absolute;left:50%;bottom:-8px;width:12px;height:12px;background:var(--surface);border-right:2px solid var(--line);border-bottom:2px solid var(--line);transform:translateX(-50%) rotate(45deg)}
@keyframes bob{50%{transform:translateY(-5px)}}
.pick-back{position:fixed;inset:0;z-index:30;background:rgba(18,21,42,.35);animation:fade .2s}
@keyframes fade{from{opacity:0}}
.pop{position:fixed;left:50%;bottom:0;z-index:31;width:min(560px,100%);transform:translateX(-50%);background:var(--pri);color:#fff;border-radius:24px 24px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 0 var(--pri-d);display:grid;gap:12px;text-align:left;animation:upx .28s cubic-bezier(.2,.9,.3,1)}
@keyframes upx{from{transform:translate(-50%,40px);opacity:0}to{transform:translateX(-50%);opacity:1}}
.pop-h{display:flex;align-items:flex-start;gap:12px}
.pop-h .ic{flex:0 0 52px;height:52px;border-radius:16px;background:rgba(255,255,255,.16);display:grid;place-items:center}
.pop-h .ic svg{width:30px;height:30px}
.pop-h .x{color:#fff;margin-left:auto;flex:0 0 40px}
.pop-h .x:hover{background:rgba(255,255,255,.14)}
.pop .id{font-size:12px;letter-spacing:.14em;font-weight:900;opacity:.75}
.pop h3{margin:2px 0 0;font-size:20px;font-weight:900;line-height:1.2}
.node.picked{box-shadow:0 7px 0 var(--cd,var(--line)),0 0 0 5px var(--sky)}
.home{overflow-x:clip}
.pop p{margin:0;font-size:14px;opacity:.92}
.pop .btn{--c:#fff;--cd:#d8d0ff;--ci:var(--pri-d)}
.pop .btn.alt{--c:rgba(255,255,255,.14);--cd:rgba(0,0,0,.18);--ci:#fff}
.lplan{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;position:relative}
.lplan::before{content:'';position:absolute;left:21px;top:22px;bottom:22px;width:3px;border-radius:3px;background:var(--line)}
.pl-row{position:relative;display:grid;grid-template-columns:44px 1fr 76px;gap:12px;align-items:center}
.pl-dot{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:16px;line-height:1;background:var(--surface);color:var(--mute);border:3px solid var(--line)}
.pl-dot svg{width:22px;height:22px}
.pl-row.done .pl-dot{background:var(--ok);border-color:var(--ok);color:#fff}
.pl-row.cur .pl-dot{background:var(--pri);border-color:var(--pri);color:#fff;box-shadow:0 0 0 5px var(--pri-l)}
.pl-main{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center;text-align:left;min-width:0;padding:12px 14px;border-radius:16px;border:2px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font:inherit}
.pl-main:hover{border-color:color-mix(in srgb,var(--pri) 45%,var(--line))}
.pl-main:focus-visible,.pl-ex:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.pl-row.cur .pl-main{border-color:var(--pri);background:var(--pri-l)}
.pl-id{grid-column:1;font-size:11px;font-weight:900;letter-spacing:.1em;color:var(--faint)}
.pl-meta{letter-spacing:0;font-weight:700;text-transform:none}
.pl-t{grid-column:1;font-weight:800;font-size:16px;line-height:1.25;margin-top:2px}
.pl-sub{grid-column:1;font-size:13.5px;color:var(--mute);line-height:1.35;margin-top:3px}
.pl-go{grid-column:2;grid-row:1/span 3;font-weight:900;font-size:14px;color:var(--pri);white-space:nowrap}
.pl-row.done .pl-go{color:var(--ok-d)}
.pl-ex{width:100%;min-height:44px;padding:0 12px;border-radius:14px;border:2px solid var(--line);background:var(--surface2);color:var(--mute);font-family:inherit;font-weight:800;font-size:13px;cursor:pointer;white-space:nowrap}
.pl-ex b,.pl-ex small{display:block;line-height:1.15}.pl-ex small{font-size:11.5px;font-weight:700}
.pl-ex:hover{color:var(--pri);border-color:color-mix(in srgb,var(--pri) 45%,var(--line))}
@media (max-width:520px){.pl-row{grid-template-columns:36px 1fr}.lplan::before{left:17px}.pl-dot{width:36px;height:36px;font-size:14px}.pl-ex{grid-column:2;justify-self:end;width:auto;min-height:34px;margin-top:-6px;display:flex;gap:4px;align-items:center}.pl-ex small{font-size:13px;font-weight:800}.pl-go{font-size:13px}}
.grgrp{display:grid;gap:8px;margin-top:14px}
.grh{font-weight:900;font-size:14px;color:var(--mute)}
.grbtn{display:grid;grid-template-columns:1fr auto;gap:2px 12px;text-align:left;padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.grbtn:hover{border-color:color-mix(in srgb,var(--pri) 45%,var(--line))}
.grbtn .gt{font-weight:800}
.grbtn .gn{grid-column:1;font-size:13px;color:var(--mute)}
.grbtn .gs{grid-column:2;grid-row:1/span 2;align-self:center;font-weight:900;font-size:13px;color:var(--pri)}
.grbtn.done{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))} .grbtn.done .gs{color:var(--ok-d)}
.grbtn.full{border-color:var(--ok);background:var(--ok-l)} .grbtn.full .gs{color:var(--ok-d)}
.sec-lbl{display:flex;align-items:center;gap:12px;margin:34px 0 0;color:var(--faint);font-weight:900;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.sec-lbl::before,.sec-lbl::after{content:'';flex:1;height:2px;background:var(--line)}

/* ---------- sesiunea ---------- */
.sess{position:fixed;inset:0;z-index:20;background:var(--bg);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.sess-top{max-width:720px;width:100%;margin:0 auto;padding:14px 16px 8px;display:flex;align-items:center;gap:14px}
.x{border:0;background:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--faint)}
.x:hover{background:var(--bg2)} .x svg{width:22px;height:22px}
.sess-body{flex:1;overflow-y:auto;overflow-x:hidden}
.stage{max-width:640px;margin:0 auto;padding:12px 16px 24px;display:grid;gap:16px;animation:slidein .35s cubic-bezier(.2,.9,.3,1)}
@keyframes slidein{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
.foot{border-top:2px solid var(--line);background:var(--surface)}
.foot-in{max-width:640px;margin:0 auto;padding:14px 16px 16px;display:flex;gap:12px;align-items:center}
.foot-in .btn{flex:1}
.foot-in .skip{flex:0 0 auto}
.home .sterge{display:grid;justify-items:end;gap:6px;margin:4px 0 0}.home .sterge .sterge-da{background:var(--bad,#d33);color:#fff}   /* [Opus-13, O8] */
.foot .ftoast{max-width:640px;margin:0 auto;padding:7px 16px 0;font:700 13.5px/1.35 Nunito,sans-serif;color:var(--mute);text-align:center;animation:up .25s}   /* [Opus-13, D13, nou 5] avertismentul de salt: un rând în subsol, nu peste text */
.foot .fsub{max-width:640px;margin:-4px auto 0;padding:0 16px 8px;text-align:center}.foot .fsub button{border:0;background:none;padding:2px 4px;font:700 13px/1.3 Nunito,sans-serif;color:var(--mute);text-decoration:underline;text-underline-offset:3px;cursor:pointer}   /* [Opus-9, C345] butonul secundar, discret, sub cel principal */
/* telefon: trei butoane nu încap pe un rând (nucleul, a doua încercare); se așază pe două rânduri, nu ies din ecran */
@media (max-width:560px){.foot-in:has(> .btn:nth-child(3)){flex-wrap:wrap;gap:8px 10px}.foot-in:has(> .btn:nth-child(3)) > .btn{flex:1 1 40%;min-width:0}}
/* [Opus-8, C343, C061, C110, C125] bara de jos mai joasă și discretă: un singur rând de butoane de înălțime normală (ținta ≥ 44 px rămâne), fără spațiu gol deasupra */
.foot-in{padding:7px 16px 9px;gap:10px}
.foot .btn{min-height:44px;font-size:14.5px;border-radius:14px;box-shadow:0 3px 0 var(--cd)}
@media (max-width:560px){.foot-in{padding:6px 12px 8px;gap:8px}.foot .btn{padding:0 10px;font-size:13px;letter-spacing:.02em;line-height:1.1}
  .foot-in:has(> .btn:nth-child(3)){flex-wrap:nowrap;gap:6px}.foot-in:has(> .btn:nth-child(3)) > .btn{flex:1 1 0;min-width:0;padding:0 6px;font-size:12px;white-space:normal}}
/* foaia de răspuns fără desen pe ecran: mesaj scurt, nu bloc înalt */
.foot.sheet .sheet-in{padding:8px 16px 4px;gap:8px;max-height:min(30vh,250px)}
@media (max-height:820px){.foot.sheet .sheet-in{max-height:min(22vh,170px)}}   /* [Opus-13, 1366 N1, N3] foaia mai scundă pe ecranele joase; butoanele rămân sub ea */
.foot.sheet .foot-in.sheet-row{padding-top:4px}
@media (min-width:561px){.foot .btn{white-space:nowrap;padding-left:16px;padding-right:16px}}   /* [Opus-13, 1366 N7] „Mă dau bătut” pe un rând */
.foot.sheet .sheet-h{font-size:17px;gap:8px}
.foot.sheet .sheet-h .badge{width:30px;height:30px}.foot.sheet .sheet-h .badge svg{width:18px;height:18px}
.foot.sheet .teacher .say{font-size:15px;padding:7px 12px;min-height:0}
/* cu desen pe ecran: foaia (verdictul, profesorul, rezolvarea) stă pe pagină, sub scenă; jos rămân un rând subțire cu verdictul și butoanele */
.fbpag{border-radius:16px;padding:12px 14px;display:grid;gap:10px;border:2px solid var(--line)}
.fbpag.ok{background:var(--ok-l)} .fbpag.bad{background:var(--bad-l)} .fbpag.warn{background:var(--warn-l)} .fbpag.neu{background:var(--sky-l)}
.fbpag .sheet-h{font-size:18px}
.fbpag.ok .sheet-h{color:var(--ok-ink)} .fbpag.bad .sheet-h{color:var(--bad-ink)} .fbpag.warn .sheet-h{color:var(--warn-ink)} .fbpag.neu .sheet-h{color:var(--sky-d)}
.foot.sheet.ingust{animation:none}
.foot .fbmini{flex:1 1 auto;min-width:0;min-height:44px;display:flex;align-items:center;gap:8px;border:0;background:none;padding:0;font:800 14.5px/1.2 Nunito,sans-serif;color:var(--ink);text-align:left;cursor:pointer}
.foot .fbmini .badge{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--surface)}.foot .fbmini .badge svg{width:16px;height:16px}
.foot .fbmini u{color:var(--pri);text-underline-offset:3px;font-weight:800;white-space:nowrap;font-size:.86em}
.foot.sheet.ingust.ok .fbmini{color:var(--ok-ink)} .foot.sheet.ingust.bad .fbmini{color:var(--bad-ink)} .foot.sheet.ingust.warn .fbmini{color:var(--warn-ink)} .foot.sheet.ingust.neu .fbmini{color:var(--sky-d)}
.foot.sheet.ingust .foot-in > .btn{flex:0 1 auto;min-width:min(180px,40%)}
@media (max-width:560px){.foot .fbmini{font-size:13px}
  .foot.sheet.ingust .foot-in{flex-wrap:wrap;row-gap:4px}.foot.sheet.ingust .foot-in > .fbmini{flex:1 1 100%;min-height:30px}.foot.sheet.ingust .foot-in > .btn{flex:1 1 0;min-width:0}}   /* [Opus-12, D14] la telefon verdictul scris pe rândul lui, butoanele dedesubt */

.kicker{font-size:13px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--pri)}
.kicker.ok{color:var(--ok)} .kicker.warn{color:var(--warn-d)} .kicker.sky{color:var(--sky-d)}
h2.t{margin:0;font-size:clamp(22px,4.6vw,28px);line-height:1.18;font-weight:900;letter-spacing:-.015em;text-wrap:balance}
p.lead{margin:0;font-size:17px;color:var(--ink);font-weight:600}
.card{background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow)}
.card.soft{background:var(--surface2);box-shadow:none}

/* profesorul: mascota care vorbește */
.prof{display:flex;gap:12px;align-items:flex-end}
.prof .av{flex:0 0 64px;width:64px;height:64px}
.bubble{position:relative;flex:1;background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:14px 16px;font-size:17px;box-shadow:var(--shadow)}
.bubble::before{content:'';position:absolute;left:-9px;bottom:18px;width:14px;height:14px;background:var(--surface);border-left:2px solid var(--line);border-bottom:2px solid var(--line);transform:rotate(45deg)}
.bubble b{color:var(--pri)}

/* ideea: formula mare */
.idea{position:relative;border-radius:24px;padding:26px 20px;background:linear-gradient(140deg,var(--pri-l),var(--sky-l));border:2px solid color-mix(in srgb,var(--pri) 30%,var(--line));display:grid;gap:10px;justify-items:center;text-align:center}
.idea .f{font:700 clamp(24px,6vw,34px)/1.2 'JetBrains Mono',monospace;color:var(--ink);letter-spacing:-.02em}
.idea .f em{font-style:normal;color:var(--pri)}
.idea .t{font-size:17px;color:var(--ink);max-width:36ch}
.idea .t em{font-style:normal;color:var(--pri);font-weight:900}
.terms{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.term{display:flex;align-items:center;gap:8px;background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:8px 12px;font-size:14px}
:not(span).term > b{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--pri);color:#fff;font:700 15px 'JetBrains Mono',monospace}

/* cazuri / pași */
.cases{display:grid;gap:10px}
.case{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:12px 14px;animation:rise .45s cubic-bezier(.2,.9,.3,1.2) both}
.case .n{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--pri-l);color:var(--pri);font:800 18px 'JetBrains Mono',monospace}
.case h4{margin:0;font-size:16px;font-weight:900}
.case p{margin:2px 0 0;font:500 15px/1.4 'JetBrains Mono',monospace;color:var(--mute)}
@keyframes rise{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

/* tabel de valori */
.vtab{overflow-x:auto;border-radius:16px;border:2px solid var(--line);background:var(--surface)}
.vtab table{border-collapse:collapse;width:100%;font:600 17px 'JetBrains Mono',monospace;text-align:center}
.vtab th,.vtab td{padding:10px 12px;border-right:2px solid var(--line)}
.vtab th{background:var(--pri-l);color:var(--pri);font-weight:800;white-space:nowrap}
.vtab tr+tr td{border-top:2px solid var(--line)}
.vtab td:last-child,.vtab th:last-child{border-right:0}
.note{font-size:15px;color:var(--mute);margin:0}

/* atenție */
.warnbox{border-radius:20px;background:var(--warn-l);border:2px solid color-mix(in srgb,var(--warn) 55%,transparent);padding:16px 16px 16px 14px;display:grid;grid-template-columns:40px 1fr;gap:12px}
.warnbox .ic{width:40px;height:40px;border-radius:12px;background:var(--warn);display:grid;place-items:center;color:#fff;font-weight:900;font-size:22px}
.warnbox ul{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--warn-ink)}
.keep{border-radius:20px;background:var(--ok-l);border:2px solid color-mix(in srgb,var(--ok) 45%,transparent);padding:14px 16px;color:var(--ok-ink);display:flex;gap:10px;align-items:flex-start}
.keep b{white-space:nowrap}

/* opțiuni tip Duolingo */
.opts{display:grid;gap:10px}
.opts.two{grid-template-columns:1fr 1fr}
.opt{display:flex;align-items:center;gap:12px;text-align:left;min-height:56px;padding:12px 14px;border-radius:16px;border:2px solid var(--line);background:var(--surface);box-shadow:0 4px 0 var(--line);font-weight:700;font-size:16px;transition:transform .08s,box-shadow .08s,border-color .15s,background .15s}
.opt:active{transform:translateY(4px);box-shadow:0 0 0 var(--line)}
.opt .k{flex:0 0 32px;height:32px;border-radius:10px;border:2px solid var(--line);display:grid;place-items:center;font-weight:900;font-size:14px;color:var(--mute)}
.opt.sel{border-color:var(--sky);background:var(--sky-l);box-shadow:0 4px 0 var(--sky)}
.opt.sel .k{border-color:var(--sky);color:var(--sky-d)}
.opt.right{border-color:var(--ok);background:var(--ok-l);box-shadow:0 4px 0 var(--ok)}
.opt.wrong{border-color:var(--bad);background:var(--bad-l);box-shadow:0 4px 0 var(--bad);animation:shake .35s}
.opt[disabled]{cursor:default}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* exerciții */
.req{border-radius:20px;background:var(--surface);border:2px solid var(--line);overflow:hidden;box-shadow:var(--shadow)}
.req-h{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--pri-l);color:var(--pri);font-weight:900;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.req-h span{margin-left:auto;letter-spacing:.04em;text-transform:none;font-weight:800;color:var(--mute)}
.req-b{padding:16px;font-size:18px;line-height:1.55;font-weight:700;white-space:pre-line}
.lvl{display:inline-flex;gap:3px}
.lvl i{width:8px;height:8px;border-radius:50%;background:var(--line)} .lvl i.on{background:var(--pri)}
.field{display:grid;gap:6px}
.field label{font-weight:800;font-size:15px;color:var(--mute)}
.inp{width:100%;min-height:54px;padding:12px 16px;border-radius:16px;border:2px solid var(--line);background:var(--surface2);color:var(--ink);font:600 18px 'JetBrains Mono',monospace;outline:none;transition:border-color .15s,background .15s}
textarea.inp{min-height:84px;resize:vertical;font:600 16px/1.45 Nunito,sans-serif}
.inp:focus{border-color:var(--sky);background:var(--surface)}
.inp.ok{border-color:var(--ok);background:var(--ok-l)} .inp.bad{border-color:var(--bad);background:var(--bad-l)}
.keys{display:flex;flex-wrap:wrap;gap:8px}
.key{min-width:44px;height:40px;padding:0 10px;border-radius:12px;border:2px solid var(--line);background:var(--surface);box-shadow:0 3px 0 var(--line);font:700 17px 'JetBrains Mono',monospace}
.key:active{transform:translateY(3px);box-shadow:none}
.gtoggle{justify-self:start}

/* foaia de feedback */
.sheet{border-top:0;animation:up .3s cubic-bezier(.2,.9,.3,1)}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet.ok{background:var(--ok-l)} .sheet.bad{background:var(--bad-l)} .sheet.warn{background:var(--warn-l)} .sheet.neu{background:var(--sky-l)}
.sheet-in{max-width:640px;margin:0 auto;padding:16px 16px 18px;display:grid;gap:12px;max-height:min(42vh,440px);overflow-y:auto;overscroll-behavior:contain}
.say.off{background:var(--bg2);color:var(--mute);font-size:14px}
.sheet-h{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:900}
.sheet.ok .sheet-h{color:var(--ok-ink)} .sheet.bad .sheet-h{color:var(--bad-ink)} .sheet.warn .sheet-h{color:var(--warn-ink)} .sheet.neu .sheet-h{color:var(--sky-d)}
.sheet-h .badge{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface)}
.sheet-h .badge svg{width:26px;height:26px}
.teacher{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:start}
.teacher .av{width:44px;height:44px}
.teacher .say{background:var(--surface);border-radius:16px;padding:10px 14px;font-size:16px;min-height:44px;white-space:pre-wrap}
.teacher .say.think{color:var(--faint)}
.reply{display:flex;gap:8px}
.reply input{flex:1;min-height:44px;border-radius:14px;border:2px solid var(--line);background:var(--surface);color:var(--ink);padding:0 12px;font:600 15px Nunito,sans-serif}
.steps{margin:0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:10px;background:var(--surface);border-radius:14px;padding:10px 12px;font-size:15px}
.steps li::before{content:counter(s);display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--pri-l);color:var(--pri);font-weight:900}
.steps details{grid-column:2;color:var(--mute);font-size:14px}
.steps summary{cursor:pointer;color:var(--pri);font-weight:800}
.model{background:var(--surface);border-radius:14px;padding:10px 14px;font:600 15px 'JetBrains Mono',monospace}
.row{display:flex;flex-wrap:wrap;gap:10px}

/* grafic */
.plot{border-radius:20px;border:2px solid var(--line);background:var(--surface);overflow:hidden;touch-action:none}
.plot svg{display:block;width:100%;height:auto}
.plot .h{cursor:grab} .plot.dragging,.plot.dragging .h{cursor:grabbing}
.plot .h:focus{outline:none} .plot .h:focus-visible circle.ring{stroke:var(--sky);stroke-width:4}
.readout{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pill{padding:6px 12px;border-radius:999px;background:var(--surface2);border:2px solid var(--line);font:600 15px 'JetBrains Mono',monospace}
.pill.big{font-size:19px;padding:8px 16px;background:var(--pri-l);border-color:color-mix(in srgb,var(--pri) 30%,var(--line));color:var(--ink)}
.slider{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:10px 14px}
.slider b{font:700 17px 'JetBrains Mono',monospace;color:var(--pri);min-width:22px}
.slider output{font:700 16px 'JetBrains Mono',monospace;min-width:52px;text-align:right}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;padding:9px 0;background-clip:content-box;border-radius:99px;background-color:var(--bg2);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:var(--pri);border:4px solid var(--surface);box-shadow:0 2px 0 var(--pri-d),0 0 0 2px var(--pri)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--pri);border:4px solid var(--surface);box-shadow:0 0 0 2px var(--pri)}
.goal{display:flex;gap:12px;align-items:center;border-radius:18px;padding:12px 14px;border:2px dashed color-mix(in srgb,var(--pri) 45%,var(--line));background:var(--surface)}
.goal .ic{flex:0 0 40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--pri-l);color:var(--pri)}
.sarcina{margin:0;padding:9px 14px;border-radius:12px;border-left:5px solid var(--pri);background:var(--pri-l);font-size:16.5px;font-weight:700;line-height:1.4}.sarcina b{color:var(--pri)}
.sarcina.done{border-left-color:var(--ok);background:var(--ok-l);color:var(--ok-ink)}.sarcina.done b{color:var(--ok-ink)}.sarcina.done b::before{content:'✓ '}   /* [Opus-12, O19] */
.goal.done{border-style:solid;border-color:var(--ok);background:var(--ok-l);color:var(--ok-ink)}
.goal.done .ic{background:var(--ok);color:#fff}
.segs{display:flex;flex-wrap:wrap;gap:8px}
.seg{padding:8px 14px;border-radius:12px;border:2px solid var(--line);background:var(--surface);box-shadow:0 3px 0 var(--line);font:700 15px 'JetBrains Mono',monospace}
.seg.on{border-color:var(--pri);background:var(--pri-l);color:var(--pri);box-shadow:0 3px 0 var(--pri)}

/* poveste / viață */
.life{display:grid;gap:14px}
.lifecard{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:start;border-radius:22px;padding:16px;background:var(--surface);border:2px solid var(--line);box-shadow:var(--shadow);animation:rise .5s cubic-bezier(.2,.9,.3,1.2) both}
.lifecard .ill{width:72px;height:72px;border-radius:20px;display:grid;place-items:center}
.lifecard .ill svg{width:48px;height:48px}
.lifecard h3{margin:0 0 4px;font-size:18px;font-weight:900}
.lifecard p{margin:0;font-size:16px;color:var(--mute)}
.lifecard p b{color:var(--ink)}
.hist{border-radius:22px;padding:18px;background:repeating-linear-gradient(0deg,transparent 0 27px,color-mix(in srgb,var(--pri) 12%,transparent) 27px 28px),var(--surface);border:2px solid var(--line)}
.hist p{margin:0;font-size:16px}
.hist p b{color:var(--pri)}

/* final */
.fin{display:grid;justify-items:center;text-align:center;gap:16px;padding-top:20px}
.fin .trophy{width:132px;height:132px;animation:pop .6s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pop{from{transform:scale(.3) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.tile{border-radius:18px;border:2px solid var(--c);overflow:hidden;background:var(--surface)}
.tile .tlh{background:var(--c);color:#fff;font-weight:900;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:6px}
.tile .v{padding:12px 6px;font-size:22px;font-weight:900;color:var(--c)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:10px;height:14px;border-radius:3px;animation:fall 1.6s cubic-bezier(.3,.7,.5,1) forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}
.xpfly{position:fixed;z-index:41;font-weight:900;font-size:22px;color:var(--gold-d);pointer-events:none;animation:xpf 1s ease-out forwards}
@keyframes xpf{to{transform:translateY(-60px);opacity:0}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* graficele 3D */
.plot{position:relative}
.g3bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 10px;border-bottom:2px solid var(--line);background:var(--surface2)}
.g3b{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 12px;border-radius:999px;border:2px solid var(--line);background:var(--surface);font:800 13px Nunito,sans-serif;color:var(--ink);cursor:pointer}
.g3b:hover{border-color:var(--pri)}
.g3b:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.g3b i{width:18px;height:18px;border-radius:6px;border:1px solid rgba(0,0,0,.15)}
.g3b b{color:var(--pri)}
.g3stage{position:relative;width:100%;max-width:100%;overflow:hidden;display:none}
.plot.is3d .g3stage{display:block}
.plot.is3d svg{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}
.g3cv{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
.plot.dragging .g3cv{cursor:grabbing}
.g3lab{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.g3l{position:absolute;left:0;top:0;white-space:nowrap;font:600 12px 'JetBrains Mono',monospace;color:var(--mute)}
.g3stage.dark .g3l{color:rgba(235,240,255,.78);text-shadow:0 1px 2px rgba(0,0,0,.7)}
.g3l.ax{font-weight:800;font-size:14px}
.g3l.pt{font-weight:800;font-size:13.5px;padding:1px 6px;border-radius:7px;background:color-mix(in srgb,var(--surface) 82%,transparent);color:var(--ink)}
.g3stage.dark .g3l.pt{background:rgba(5,8,20,.62);text-shadow:none}
.g3pal{position:fixed;z-index:85;background:var(--surface);border:2px solid var(--line);border-radius:18px;box-shadow:0 18px 40px -12px rgba(0,0,0,.4);padding:12px;display:grid;gap:10px;max-height:min(70vh,560px);overflow-y:auto}
.g3ph{display:grid;gap:2px}.g3ph b{font-size:16px;font-weight:900}.g3ph span{font-size:13px;color:var(--mute)}
.g3pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.g3pi{display:grid;gap:6px;justify-items:center;padding:8px 6px;border-radius:14px;border:2px solid var(--line);background:var(--surface);cursor:pointer;font:700 12.5px/1.2 Nunito,sans-serif;color:var(--ink);text-align:center}
.g3pi i{width:100%;height:34px;border-radius:9px;border:1px solid rgba(0,0,0,.12)}
.g3pi i.ric{display:grid;place-items:center;font:700 20px 'JetBrains Mono',monospace;color:var(--pri);background:var(--pri-l)}
.g3pi small{font-weight:600;font-size:11px;color:var(--mute);line-height:1.25}
.g3b i.ic{width:auto;height:auto;border:0;font:700 14px 'JetBrains Mono',monospace;color:var(--pri)}
.g3pi.on{border-color:var(--pri);box-shadow:0 0 0 2px var(--pri) inset}
.g3pi:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
/* antetul predării: ce lecție și ce micro-noțiune */
.tband{display:grid;gap:4px;padding:10px 14px;border-radius:16px;background:var(--surface);border:2px solid var(--line);font-size:14px;line-height:1.35}
.tband div{display:flex;gap:8px;align-items:baseline}
.tband .l{flex:0 0 auto;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);min-width:108px}
.tband b{color:var(--ink)}
/* [Opus-2] antetul ecranului (calea + partea narațiunii), marcajul pașilor din bară, butoanele „Știu deja” / „Harta lecției” */
.antet{display:grid;gap:3px;padding:8px 12px;border-radius:14px;background:var(--surface);border:2px solid var(--line);font-size:13px;line-height:1.35}
.antet .acale{font-weight:800;color:var(--ink)}
.antet .apoz{font-size:12.5px;font-weight:900;letter-spacing:.02em;color:var(--pri)}
/* [Opus-8, C276] partea narațiunii, vizibilă: un chip colorat, cu text mare, deasupra titlului ecranului (INTRODUCERE / CUPRINS / ÎNCHEIERE · nivelul) */
.antet .parte{justify-self:start;display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:2px 0 1px;padding:6px 14px;border-radius:999px;font:900 17px/1.25 Nunito,sans-serif;letter-spacing:.02em;color:#fff;background:var(--pri-d)}
.antet .parte b{font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.antet .parte span{font-weight:800;opacity:.95}
.antet .parte.p-intro{background:#0b7fbf}
.antet .parte.p-cupr{background:var(--pri-d)}
.antet .parte.p-inch{background:#137a3e}
@media (max-width:520px){.antet .parte{font-size:15.5px;padding:5px 12px}}
.antet.compact{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;padding:2px 10px;border-width:1px;border-radius:10px;line-height:1.3}   /* [Opus-10, C344] ecranele cu scenă 3D: chipul părții + calea + titlul pe un singur rând, ca scena să ia înălțimea */
.antet.compact .acale{flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;color:var(--mute)}
.antet.compact .acale>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.antet.compact .acale .q{margin-left:0;flex:none}
.antet.compact .parte{margin:0;padding:2px 10px;font-size:13px;line-height:1.25;flex:none}
.antet.compact .apoz{font-size:12px}
.antet.compact>.kicker{font-size:12px;letter-spacing:.1em;flex:0 1 auto}
.stage.sc{padding-top:4px}
.stage.sc>.antet.compact{margin-bottom:-8px}
.stage.sc>h2.t{font-size:clamp(19px,3.6vw,22px)}
.stage.scx.scl>.goal{display:none}   /* [Opus-10] pe ecranul lat enunțul explorării stă în scenă (nota de jos), nu deasupra ei */
.gsus>.kicker.sky{display:none}   /* [Opus-10] desenul de după răspuns e primul pe ecran: eticheta „Pe grafic” nu mai e nevoie */
.antet .q{vertical-align:middle;display:inline-grid;place-items:center;width:18px;height:18px;margin-left:4px;border-radius:50%;border:0;background:var(--pri-l);color:var(--pri);font:900 12px Nunito,sans-serif;cursor:help;padding:0}   /* [Opus-4d, R1] fără chenarul nativ */
/* [Opus-3, C109] „?” pe numerele din titlurile de bloc și din rândul de poziție */
.qn{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:4px;border-radius:50%;border:0;background:var(--pri-l);color:var(--pri);font:900 12px Nunito,sans-serif;letter-spacing:0;text-transform:none;vertical-align:middle;cursor:help;padding:0}
.ln .mk{font-size:10px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;padding:1px 6px;border-radius:999px;background:var(--line);color:var(--mute)}
.ln .mk.op{background:transparent;border:1.5px dashed currentColor}
.mkel{display:inline-block;font-size:10.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;padding:1px 7px;border-radius:999px;background:var(--line);color:var(--mute);margin-right:6px;vertical-align:middle;white-space:nowrap}
.mkel.op{background:transparent;border:1.5px dashed currentColor}
.ln.on .mk{background:rgba(255,255,255,.22);color:#fff}
.ln .lq{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;border:1.5px solid currentColor;font-size:10.5px;font-weight:900;opacity:.75}
.stiu{display:flex;flex-wrap:wrap;gap:8px}
.hartabtn{white-space:nowrap}
.themebtn.hartabtn{width:auto;padding:0 12px;font-weight:800;font-size:13px}
/* legături spre noțiuni amintite */
.ref{display:inline;border:0;background:none;padding:0;font:inherit;color:var(--pri);font-weight:800;text-decoration:underline dotted 2px;text-underline-offset:3px;cursor:pointer}
.ref:hover{text-decoration-style:solid}
.ref:focus-visible{outline:2px solid var(--sky);outline-offset:2px;border-radius:4px}
.peek-back{position:fixed;inset:0;z-index:55;background:rgba(18,21,42,.3)}
.peek{position:fixed;top:0;right:0;bottom:0;z-index:56;width:min(430px,100%);background:var(--surface);border-left:2px solid var(--line);box-shadow:-14px 0 40px -12px rgba(0,0,0,.35);display:flex;flex-direction:column;animation:peekin .25s cubic-bezier(.2,.9,.3,1)}
@keyframes peekin{from{transform:translateX(40px);opacity:0}}
.peek-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:2px solid var(--line)}
.peek-h .k{font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--pri)}
.peek-b{flex:1;overflow-y:auto;padding:16px;display:grid;gap:12px;align-content:start}
.peek-b h3{margin:0;font-size:20px;font-weight:900;line-height:1.2}
.peek-b ul{margin:0;padding-left:18px;display:grid;gap:8px;font-size:16px}
.peek-b .ex{border-radius:14px;background:var(--pri-l);padding:10px 12px;font:600 15px/1.45 'JetBrains Mono',monospace}
.peek-f{padding:14px 16px;border-top:2px solid var(--line);display:grid;gap:10px}
.retbar{display:flex;align-items:center;gap:10px;max-width:980px;margin:0 auto;padding:0 12px 8px}
.retbar button{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;border-radius:999px;background:var(--warn-l);color:var(--warn-ink);border:2px solid color-mix(in srgb,var(--warn) 50%,transparent);font-weight:800;font-size:13px;padding:6px 14px}
/* ---------- bara laterală: tot anul școlar ---------- */
:root{--side-w:0px}
@media (min-width:1024px){:root{--side-w:300px}}
body{padding-left:var(--side-w)}
.side{position:fixed;top:0;bottom:0;left:0;width:300px;max-width:88vw;z-index:40;background:var(--surface);border-right:2px solid var(--line);display:flex;flex-direction:column;transform:translateX(-102%);transition:transform .25s cubic-bezier(.2,.9,.3,1)}
.side.open{transform:none;box-shadow:12px 0 40px -10px rgba(0,0,0,.35)}
@media (max-width:1023px){.side:not(.open){visibility:hidden}}
@media (min-width:1024px){.side{transform:none;z-index:15}}
.side-back{position:fixed;inset:0;z-index:39;background:rgba(18,21,42,.35)}
/* [Opus-1b, decizia coordonatorului (b), C108, C262] pe ecranele cu scenă, de la 1024 px, bara laterală devine o șină de 56 px (cuprinsul și căutarea,
   la un clic); pe celelalte ecrane rămâne cum e */
#rail{display:none}
@media (min-width:1024px){
  html.rail{--side-w:56px}
  html.rail .side:not(.open){transform:translateX(-102%);visibility:hidden}
  html.rail .side.open{z-index:45}
  html.rail #rail{display:flex;position:fixed;top:0;bottom:0;left:0;width:56px;z-index:16;flex-direction:column;align-items:center;gap:10px;padding:14px 0;background:var(--surface);border-right:2px solid var(--line)}
  #rail .brand3{font:900 13px Nunito,sans-serif;color:var(--pri-ink);background:var(--pri);border-radius:10px;width:36px;height:36px;display:grid;place-items:center}
  #rail button{border:2px solid var(--line);background:var(--surface);border-radius:12px;width:44px;height:44px;display:grid;place-items:center;color:var(--ink)}
}
.side-h{padding:14px 14px 10px;display:grid;gap:10px;border-bottom:2px solid var(--line)}
.side-h .brand{margin:0}
.side-h input{width:100%;min-height:42px;border-radius:12px;border:2px solid var(--line);background:var(--surface2);color:var(--ink);padding:0 12px;font:600 15px Nunito,sans-serif}
.tree{flex:1;overflow-y:auto;padding:8px 8px 40px}
.tree details{margin:2px 0}
.tree summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:10px;font-weight:800;font-size:14px}
.tree summary::-webkit-details-marker{display:none}
.tree summary::before{content:'›';display:inline-block;width:12px;color:var(--faint);transition:transform .15s}
.tree details[open]>summary::before{transform:rotate(90deg)}
.tree summary:hover,.tree a:hover{background:var(--bg2)}
.tree .grp{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:900}
.tree a{display:flex;gap:8px;align-items:baseline;padding:6px 8px 6px 28px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:14px;line-height:1.3;cursor:pointer}
.tree a code,.tree summary code{font:700 12px 'JetBrains Mono',monospace;color:var(--mute);flex:none}
.tree a.cur{background:var(--pri-l);color:var(--pri);font-weight:800}
.tree a.old{color:var(--mute)}
.tree .tag{margin-left:auto;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:6px;background:var(--ok-l);color:var(--ok-ink);flex:none}
.tree .sub a{padding-left:44px}
.menubtn{border:2px solid var(--line);background:var(--surface);border-radius:12px;width:40px;height:40px;display:grid;place-items:center}
@media (min-width:1024px){.menubtn{display:none}}
.toast{pointer-events:none;position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;max-width:min(520px,92vw);background:var(--ink);color:var(--bg);padding:14px 18px;border-radius:16px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.3);animation:up .25s}
/* ---------- bara de sus: navigarea în lecție ---------- */
.lnav{display:flex;align-items:center;gap:8px;max-width:980px;margin:0 auto;padding:6px 12px 10px}
.lnav .arr{flex:0 0 36px;height:36px;border-radius:10px;border:2px solid var(--line);background:var(--surface);font-weight:900;font-size:18px;color:var(--pri)}
.lnav .arr[disabled]{opacity:.35;cursor:default}
.lnav{min-width:0;width:100%}
.lnav .rail{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:2px;cursor:grab;user-select:none;-webkit-user-select:none}
.lnav .rail::-webkit-scrollbar{display:none}
.lnav .rail.drag{cursor:grabbing}
.lnav .rail.drag .ln{pointer-events:none}
.ln{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;border:2px solid var(--line);background:var(--surface);font-weight:800;font-size:13px;white-space:nowrap}
.ln .d{width:8px;height:8px;border-radius:50%;background:var(--line)}
/* [Opus-3, C322] pasul curent nu e niciodată mai lat decât bara: pe ecranul îngust eticheta lui trece pe două rânduri, întreagă */
.lnav .ln.on{max-width:100%;white-space:normal;flex-wrap:wrap;row-gap:2px;padding-top:4px;padding-bottom:4px;line-height:1.2}
.ln.done .d{background:var(--gold)}
.ln.on{background:var(--pri);border-color:var(--pri);color:#fff}
.ln.on .d{background:#fff}
.lesson-t{display:flex;align-items:center;gap:8px;min-width:0;font-weight:900;font-size:15px}
.lesson-t span.ttl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sess{left:var(--side-w)!important}
.sess-top{flex-wrap:wrap}
.backbtn{border:2px solid var(--line);background:var(--surface);border-radius:12px;height:40px;padding:0 12px;font-weight:800;color:var(--pri)}
.backbtn[disabled]{opacity:.35}
/* ---------- glosar: prescurtările au „?” ---------- */
.acr{position:relative;white-space:nowrap}
.acr .q{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;margin-left:3px;border-radius:50%;border:0;background:var(--pri-l);color:var(--pri);font:900 12px Nunito,sans-serif;vertical-align:super;cursor:help;padding:0}
.acr .q::before{content:'';position:absolute;inset:-10px}
.acr .tip{display:none}
#tipbox{position:fixed;z-index:90;max-width:min(320px,86vw);background:var(--ink);color:var(--bg);font:600 14px/1.45 Nunito,sans-serif;padding:10px 13px;border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.3);pointer-events:none;opacity:0;transition:opacity .12s}
#tipbox.on{opacity:1}
span.term,.sess span.term{display:inline!important;padding:0 1px!important;margin:0!important;border:0!important;background:none;box-shadow:none!important;width:auto!important;min-height:0!important;font:inherit!important;color:inherit;line-height:inherit!important}
.term{cursor:help;text-decoration:underline dotted color-mix(in srgb,var(--pri) 55%,transparent);text-decoration-thickness:2px;text-underline-offset:3px;border-radius:4px}
.term:hover,.term.on,span.term:hover,span.term.on{background:var(--pri-l)!important;color:var(--pri-d)}
.term:focus-visible{outline:2px solid var(--sky);outline-offset:1px}
#termbox{position:fixed;z-index:95;width:min(340px,calc(100vw - 20px));background:var(--surface);color:var(--ink);border:2px solid color-mix(in srgb,var(--pri) 35%,var(--line));border-radius:14px;box-shadow:0 12px 30px rgba(20,20,60,.18);padding:11px 14px 12px;font:500 14.5px/1.5 Nunito,sans-serif}
#termbox b{display:block;color:var(--pri-d);font-weight:900;font-size:15px;margin-bottom:3px}
#termbox .ex{margin-top:6px;color:var(--mute);font-size:13.5px}
#termbox .x{position:absolute;top:4px;right:6px;border:0;background:none;color:var(--faint);font-size:18px;cursor:pointer;width:30px;height:30px}
#tipbox::after{content:'';position:absolute;left:var(--ax,50%);width:10px;height:10px;background:var(--ink);transform:translateX(-50%) rotate(45deg)}
#tipbox.up::after{bottom:-5px} #tipbox.down::after{top:-5px}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;padding:8px 14px 10px;border-top:2px solid var(--line);font:700 14px 'JetBrains Mono',monospace;color:var(--ink)}
.legend:empty{display:none}
.legend .lg{display:inline-flex;align-items:center;gap:7px}
.legend .lg i{display:inline-block;width:22px;height:6px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.28)}
/* predarea ca o conversație */
.conv{display:grid;gap:12px}
.conv .line{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:end;animation:rise .4s cubic-bezier(.2,.9,.3,1.2) both}
.conv .line .av{width:52px;height:52px}
.conv .line.cont{grid-template-columns:52px 1fr}
.conv .line.cont .avs{visibility:hidden}
.conv .say2{position:relative;background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:12px 16px;font-size:17px;line-height:1.5;box-shadow:var(--shadow)}
.conv .say2 b{color:var(--pri)}
.conv .vis{animation:rise .45s cubic-bezier(.2,.9,.3,1.2) both;margin-left:62px}
.conv .hid{display:none}
.concl{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;border-radius:20px;padding:14px 16px;background:var(--ok-l);border:2px solid color-mix(in srgb,var(--ok) 45%,transparent);color:var(--ok-ink);font-size:17px;font-weight:700;animation:rise .45s both}
.concl i{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--ok);color:#fff;font-style:normal}
.concl i svg{width:24px;height:24px}
.steps-map{display:grid;gap:8px}
.steps-map div{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:8px 12px;font-weight:800}
.steps-map b{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--pri-l);color:var(--pri)}
@media (max-width:460px){.conv .vis{margin-left:0}}
/* turnul treptelor */
.tower{display:grid;gap:12px;margin-top:18px}
.tier{position:relative;display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;text-align:left;width:100%;border:0;border-radius:22px;padding:14px 16px;background:linear-gradient(135deg,var(--c1),color-mix(in srgb,var(--c1) 70%,#fff));color:#fff;box-shadow:0 6px 0 var(--c2);transition:transform .08s,box-shadow .08s}
.tier:active{transform:translateY(6px);box-shadow:0 0 0 var(--c2)}
.tier:focus-visible{outline:3px solid var(--sky);outline-offset:4px}
.tier .num{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.2);font:900 30px Nunito,sans-serif}
.tier h3{margin:0;font-size:19px;font-weight:900;line-height:1.15}
.tier p{margin:2px 0 0;font-size:14px;opacity:.95}
.tier .cnt{font-weight:900;font-size:14px;background:rgba(0,0,0,.18);padding:6px 10px;border-radius:999px;white-space:nowrap}
.tier.dark{background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--c1) 55%,#0d0f22),#0b0d1c 70%);box-shadow:0 6px 0 var(--c2),inset 0 0 0 2px color-mix(in srgb,var(--c1) 70%,transparent)}
.tier.dark .num{background:color-mix(in srgb,var(--c1) 30%,transparent);color:var(--c1);text-shadow:0 0 12px var(--c1)}
.tier.dark h3{color:#fff;text-shadow:0 0 14px color-mix(in srgb,var(--c1) 70%,transparent)}
.tier-gap{display:flex;align-items:center;gap:10px;color:var(--faint);font-weight:900;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:6px 4px 0}
.tier-gap::after{content:'';flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 14px)}
.tcover{border-radius:26px;padding:24px 22px;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));display:grid;gap:8px;box-shadow:0 6px 0 color-mix(in srgb,var(--c2) 70%,#000)}
.tcover.dark{background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--c1) 60%,#0d0f22),#0b0d1c 75%);box-shadow:0 6px 0 var(--c2),inset 0 0 0 2px var(--c1)}
.tcover .k{font-size:13px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.tcover h2{margin:0;font-size:clamp(26px,6vw,34px);line-height:1.1;font-weight:900}
.warnbig{border-radius:18px;padding:14px 16px;background:var(--bad-l);color:var(--bad-ink);border:2px solid var(--bad);font-weight:800}
.ptitle{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tchip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--c1);color:#fff;font-weight:900;font-size:13px;letter-spacing:.04em}
.ideabox{border-radius:18px;border:2px dashed color-mix(in srgb,var(--pri) 50%,var(--line));background:var(--pri-l);padding:12px 14px;font-size:16px}
.hints{display:grid;gap:8px}
.hint{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;background:var(--sky-l);border:2px solid color-mix(in srgb,var(--sky) 45%,var(--line));border-radius:16px;padding:10px 12px;animation:rise .35s both}
.hint b{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--sky);color:#fff}
.lat{cursor:pointer}
.cover{border-radius:26px;padding:26px 22px;color:#fff;background:linear-gradient(140deg,var(--pri),color-mix(in srgb,var(--pri) 70%,#1cb0f6) 55%,#1cb0f6);box-shadow:0 6px 0 var(--pri-d);display:grid;gap:8px}
.cover .k{font-size:13px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.cover h2{margin:0;font-size:clamp(26px,6vw,34px);line-height:1.1;font-weight:900;letter-spacing:-.02em;text-wrap:balance}
.cover .sub{font-size:17px;opacity:.95}
.plan{display:grid;gap:8px}
.plan>div{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:10px 14px;font-weight:800}
.plan i{font-style:normal;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--pri-l);color:var(--pri);font-weight:900}
.plan span{color:var(--mute);font-weight:700;font-size:14px;white-space:nowrap}
.plan .pt{font-weight:900}
.plan .pd{font-weight:600;font-size:14.5px;color:var(--mute);line-height:1.35;margin-top:2px}
/* teoria: tabla și pașii */
.tabla{position:relative;border-radius:20px;padding:16px 18px 18px;background:radial-gradient(120% 100% at 20% 0%,#2f5a47,#1c3a2d 70%);color:#f3f1e7;box-shadow:inset 0 0 0 6px #6b4a2b,inset 0 0 0 8px #4d321b,0 8px 20px -10px rgba(0,0,0,.4)}
.tabla .lbl{display:inline-block;margin-bottom:4px;background:#ffc233;color:#3b2a06;font-weight:900;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:8px;box-shadow:0 2px 0 #e0a20e}
.tabla p{margin:6px 0;font:600 clamp(15px,3.9vw,20px)/1.45 'JetBrains Mono',monospace;white-space:pre-wrap;overflow-wrap:anywhere;text-shadow:0 0 1px rgba(255,255,255,.4)}
.tabla p:first-of-type{margin-top:8px}
.th-steps{display:grid;gap:10px}
.th-step{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:10px 12px;animation:rise .4s cubic-bezier(.2,.9,.3,1.2) both}
.th-step .n{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--pri);color:#fff;font-weight:900}
.th-step h4{margin:0;font-size:16px;font-weight:900}
.th-step p{margin:2px 0 0;font:600 15px/1.45 'JetBrains Mono',monospace;color:var(--mute)}
.th-step.hid{display:none}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gal figure{margin:0;display:grid;gap:6px}
.gal figcaption{font-weight:800;font-size:14px;text-align:center}
.harta{display:grid;gap:10px}
.harta .grp{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:12px}
.harta .grp b{display:grid;place-items:center;min-width:92px;padding:8px 10px;border-radius:12px;background:var(--pri);color:#fff;font-weight:900;font-size:14px}
.harta .grp div{display:flex;flex-wrap:wrap;gap:6px}
.harta .grp span{padding:4px 10px;border-radius:999px;background:var(--pri-l);color:var(--ink);font-size:13px;font-weight:700}
@media (max-width:460px){.gal{grid-template-columns:1fr}.harta .grp{grid-template-columns:1fr}}
@media (max-width:420px){.opts.two{grid-template-columns:1fr}.tiles .v{font-size:18px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* harta lecției */
.hmap{display:grid;gap:12px;container-type:inline-size}
.hcenter{border-radius:18px;padding:12px 16px;background:var(--pri-l);border:2px solid color-mix(in srgb,var(--pri) 35%,transparent);text-align:center}
.hcenter b{display:block;font-size:18px;color:var(--ink)}
.hcenter span{font-size:14px;color:var(--mute)}
.hcols{display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr))}
/* harta îngustă (sesiunile de la 1300 px, cu bara laterală): două coloane, ca nodurile să încapă în coloana etapei */
@container (max-width:759px){.hcols{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* [Opus-12, O3] la telefon harta stă pe două coloane (era una singură, foarte lungă); nodurile se strâng */
@media (max-width:760px){.hcols{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.hcol,.hnode{min-width:0}
.hcol h4,.hnode span{overflow-wrap:break-word}
.hcol{border-radius:16px;border:2px solid color-mix(in srgb,var(--ec) 40%,var(--line));background:color-mix(in srgb,var(--ec) 7%,var(--surface));padding:10px;display:grid;gap:8px;align-content:start}
.hcol h4{margin:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--ec) 75%,var(--ink))}
.hnode{display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;text-align:left;padding:8px 10px;border-radius:12px;border:2px solid color-mix(in srgb,var(--ec) 45%,var(--line));background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.hnode i{font-style:normal;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--ec) 18%,var(--surface));font-size:12px;font-weight:900;color:var(--ink)}
.hnode small{font-size:12px;font-weight:800;color:var(--mute)}
.hnode.done i,.hnode.mast i{background:var(--ok);color:#fff}
.hnode.redo i{background:var(--warn,#f08c00);color:#fff}
.hnode.cur{background:var(--ec);color:#fff;border-color:var(--ec)}
.hnode.cur small{color:#fff}
.hnode.cur i{background:#fff;color:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,#fff 40%,transparent);animation:hpulse 1.6s infinite}
.hnode.sel{outline:3px solid var(--ink);outline-offset:2px}
.hnode.dim{opacity:.45}
@keyframes hpulse{50%{box-shadow:0 0 0 8px transparent}}
.hinfo{border-radius:16px;border:2px solid var(--line);background:var(--surface2);padding:12px 14px;display:grid;gap:8px;font-size:15px}
.hinfo h4{margin:0;font-size:16px}
.hinfo p{margin:0;line-height:1.5}
@media (max-width:760px){.hcol{padding:8px;gap:6px}.hnode{grid-template-columns:24px minmax(0,1fr);gap:4px 6px;padding:6px 7px;font-size:13px;line-height:1.25}.hnode i{width:22px;height:22px;font-size:11px}.hnode small{grid-column:2;font-size:11.5px}}   /* [Opus-12, O3] */
.hdeps{display:flex;flex-wrap:wrap;gap:6px}
.hdep{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:5px 10px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;text-align:left}
.hdep.sup{background:var(--bg2);color:var(--mute)}
.hdep em{font-style:normal;font-weight:500;color:var(--mute)}
.peek.wide{width:min(980px,100%)}
.hmini{display:flex;align-items:center;gap:10px;width:100%;border:0;background:var(--surface2);border-bottom:1px solid var(--line);padding:6px 14px;font:inherit;font-size:13px;color:var(--mute);cursor:pointer;text-align:left}
.hmini .segs2{display:flex;gap:4px;flex:0 0 auto}
.hmini .seg2{display:flex;gap:3px;padding:3px 5px;border-radius:999px;background:color-mix(in srgb,var(--ec) 16%,transparent)}
.hmini .seg2 b{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--ec) 35%,var(--surface))}
.hmini .seg2 b.on{background:var(--ok)}
.hmini .seg2 b.cur{background:var(--ec);box-shadow:0 0 0 3px color-mix(in srgb,var(--ec) 35%,transparent)}
.hmini span.t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.hmini span.t b{color:var(--ink)}
.unde{border-left:4px solid var(--ec,var(--pri));background:var(--surface2);border-radius:0 14px 14px 0;padding:10px 14px;font-size:15px;line-height:1.5}
.unde b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:2px}
.rq{display:grid;gap:8px;border:2px solid var(--line);border-radius:16px;padding:12px;background:var(--surface)}
.rq .q{font-weight:800}
.rq .fb{font-size:15px;line-height:1.5}
.morecard{border:2px dashed var(--line);border-radius:16px;padding:10px 14px}
.morecard summary{cursor:pointer;font-weight:800}
.canlist{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.canlist li{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 10px;border-radius:12px;background:var(--surface2)}
.canlist li::before{content:'✓';color:var(--ok);font-weight:900}
.canlist li.nefacut::before{content:'○';color:var(--faint)}   /* [Opus-11, D31] micro-noțiunea neparcursă nu primește bifă */
.askbtn{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--pri);background:var(--pri-l);color:var(--pri-d);border-radius:999px;height:40px;padding:0 12px 0 4px;font:inherit;font-weight:800;font-size:14px;cursor:pointer}
.askbtn .av{width:32px;height:32px;display:grid;place-items:center;overflow:hidden}
.askbtn .av svg{width:32px;height:32px}
.askfab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:15;box-shadow:0 8px 20px -8px rgba(0,0,0,.35);background:var(--surface)}
.askb{display:grid;gap:10px;align-content:start}
.asklist{display:grid;gap:8px;align-content:start}
@media (max-width:520px){.sess-top .askbtn span:last-child{display:none}.sess-top .askbtn{padding:0 4px}}
.chest{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:center;text-align:left;padding:8px 10px;border-radius:12px;border:2px dashed color-mix(in srgb,var(--ec,var(--gold-d)) 55%,var(--line));background:var(--surface2);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.chest .ci{font-size:22px;text-align:center}
.chest b{display:block;font-size:13px}
.chest small{display:block;color:var(--mute);font-size:12px;line-height:1.35}
.chest.open{border-style:solid;background:color-mix(in srgb,#ffc233 14%,var(--surface))}
.hnode .st{font-size:12px;letter-spacing:1px;color:#e0a20e;font-weight:900}
.hnode.cur .st{color:#fff}
.hnext{font-size:12px;color:var(--mute);font-style:italic;padding:0 4px 2px 40px;line-height:1.35}
.lvlbox{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;font-size:14px;color:var(--mute)}
.lvlbox b{color:var(--ink)}
.welcome{margin-top:14px;display:grid;gap:10px;border-radius:18px;padding:14px 16px;background:var(--sky-l,var(--surface2));border:2px solid color-mix(in srgb,var(--sky,#3b9cff) 40%,var(--line))}
.episod{display:grid;gap:6px;border-radius:18px;padding:14px 16px;border:2px dashed var(--line);background:var(--surface2);text-align:left}
.episod .k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:900;color:var(--pri)}
.vs{font-size:15px;color:var(--mute);text-align:center}
.vs b{color:var(--ink)}
.g3pi.lock{opacity:.75;cursor:help}
.stat{white-space:nowrap}
/* scena 3D (ScenaFable) a desenelor */
.sfbox{display:grid;gap:8px;min-width:0}
.sfhost{min-width:0}
.sfhost .sf-stage{width:100%}
.sfhost[data-sf="new"],.sfhost[data-sf="dormant"]{border-radius:16px;background:var(--surface2);border:2px dashed var(--line)}
.sfbox>.legend.sf{border:2px solid var(--line);border-radius:14px;background:var(--surface)}
.sfbox>.segs{margin:0}
/* [Opus-1: C262, C322; RAPORT-GRAFICA §5.1] o scenă cu panoul vizibil (cutia „mare”) ia lățimea paginii, cu margini de 20 px (12 px la ≤ 960 px,
   ca prototipul); textul ecranului rămâne în coloana de 640 px. Lățimea și decalajul le pune sfLat() (JS), pentru că scena poate sta și într-o
   replică indentată (.conv .vis). Mărimea scenei și locul panoului (dreapta de la 860 px ai gazdei, altfel sub scenă) le pune biblioteca 1.5. */
.sfbox.mare{max-width:none;min-width:0;justify-self:stretch}
/* integrarea conținutului F0.1–F0.4: „În plus față de programă”, centurile, noțiunile, încheierea, glosarul */
.ipb{display:inline-block;font-style:normal;font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:8px;background:var(--warn-l);color:var(--warn-ink);border:1.5px dashed var(--warn-d);white-space:nowrap}
.inplus{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;border-radius:16px;padding:10px 14px;background:var(--warn-l);border:2px dashed color-mix(in srgb,var(--warn) 60%,transparent);color:var(--warn-ink);font-size:14.5px;font-weight:700}
.inplus .btn{margin-left:auto}
.ipt{font-style:normal;white-space:normal}
.belt{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.03em;text-transform:none;padding:2px 10px;border-radius:999px;border:2px solid var(--line);background:#fff;color:#3a3f55;white-space:nowrap}
.belt.galbena{background:#ffe27a;border-color:#e0b400;color:#5a4500}
.belt.verde{background:#2fb35f;border-color:#1d8a45;color:#fff}
.belt.albastra{background:#2f6fe0;border-color:#1f50a8;color:#fff}.belt.maro{background:#8a5a32;border-color:#5f3c1f;color:#fff}.belt.neagra{background:#1d2030;border-color:#000;color:#fff}
.belt.alba{background:#fff;border-color:#c7cbe0;color:#3a3f55}
.hcai{display:flex;flex-wrap:wrap;gap:2px 10px}
.hcai .hdesch{padding-bottom:2px}
.hcaif{margin:0 0 8px;color:var(--mute);font-size:12.5px;font-weight:700}
.hdesch{justify-self:start;border:0;background:none;color:var(--ec,var(--pri));font-weight:800;font-size:13px;padding:0 4px 4px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.prof.salut{margin-top:14px}
.sfbox.cucit{position:relative;padding-right:360px}.sfbox.cucit>.citcol{position:absolute;top:0;right:0;width:340px;display:grid;gap:10px;align-content:start}   /* [Opus-13, 1366 N4] */
.sfbox.cucit>.citcol .fbpag{margin:0}
.sfbox.cucit .sf-root .sf-stage{height:clamp(360px,calc(100vh - 300px),620px)!important}   /* [Opus-13, N4] graficul încape întreg sub antet, lângă casete */
.sfabs{margin:2px 2px 0;padding:8px 12px;border:2px solid var(--warn-d,var(--line));border-radius:12px;background:var(--warn-l,var(--surface));color:var(--warn-ink,var(--ink));font:700 14px/1.4 Nunito,sans-serif}   /* [Opus-15, C350] */
.sfcap{margin:0 0 4px 2px;font:700 12.5px/1.35 Nunito,sans-serif;color:var(--mute);letter-spacing:.01em}   /* [Opus-12, D27] */
@media (max-width:560px){.stage.rsus>.prof .bubble{font-size:15px;padding:9px 12px;border-radius:16px}.stage.rsus>.prof .av{flex-basis:44px;width:44px;height:44px}.stage.rsus>.req .req-b{font-size:16px}}   /* [Opus-12, D14] telefon, ecran cu scenă: replica și cerința mai strânse, casetele urcă în vedere */
.stare{display:grid;gap:8px}
.inch-rest,.inch-rest>*{min-width:0}
#termbox .ipb{margin:2px 0 6px;white-space:normal}
#termbox.inplus{border-color:color-mix(in srgb,var(--warn) 60%,var(--line))}
#termbox .ver{margin-top:6px;color:var(--faint);font-size:12px;line-height:1.35}
/* [Opus-4, E3] galeria: miniatura se deschide în locul galeriei */
.galw{display:grid;gap:10px;min-width:0}
.galw figcaption .galdesch{width:100%;white-space:normal}
.galbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.galfull{gap:14px}.galfull .galt{margin:14px 0 0;font-size:16px;font-weight:800}   /* [Opus-16] galeria cu scene complete */
.galnav{display:flex;gap:6px;margin-left:auto}
.galnav .btn.on{border-color:var(--pri);color:var(--pri)}
/* [Opus-4, E1] rezolvarea de după răspuns stă pe pagină, sub desen (nu în foaia de jos, peste scenă) */
.solin{border:2px solid var(--line);border-radius:16px;padding:12px 14px;background:var(--surface)}
/* [Opus-4, B7, C322, plan §2.9] telefon / tabletă: fără derulare orizontală în bara de sus, ținte ≥ 44 × 44, fără butonul plutitor peste conținut */
.askhome{display:none}
@media (max-width:1023px),(pointer:coarse){
  .themebtn,.accbtn,.menubtn,.x{width:44px;height:44px;flex:0 0 auto}
  .themebtn.hartabtn{width:auto;height:44px;flex:0 0 auto}
  .backbtn{height:44px}
  .askbtn{height:44px}
  .lnav .arr{flex:0 0 44px;height:44px}
  .ln{min-height:44px}
  .ln .lq{width:44px;height:44px;margin:-13.5px;border:0;border-radius:50%;background:radial-gradient(circle,transparent 7px,currentColor 7.2px,currentColor 8.5px,transparent 8.8px)}
  /* [Opus-4d, R1, B7] „?”: cercul vizibil rămâne de 18 px; ținta de 44 × 44 e o zonă invizibilă (::after), fără lățime vizibilă și fără chenar */
  .qn,.acr .q,.antet .q{position:relative;overflow:visible}
  .qn::after,.acr .q::after,.antet .q::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%}
}
@media (max-width:520px){
  .top-in{flex-wrap:wrap;row-gap:6px;gap:8px}
  .top-in .lesson-t{flex:1 1 calc(100% - 60px)}
  .top-in .stat{flex:0 0 auto}
}
@media (max-width:1199px){
  .askfab{display:none}
  .askhome{display:inline-flex;margin-top:12px}
}
/* [Opus-11, D1, C322] telefon 390: nimic mai lat decât ecranul. Pista grilei ecranului nu se mai lățește după cel mai lung rând
   (min-content): coloana are lățimea ecranului, copiii pot fi îngustați, textele lungi (formule, căi, monospațiat) se rup */
.stage{grid-template-columns:minmax(0,1fr)}
.stage>*{min-width:0;max-width:100%}
.stage>.sfbox.mare,.stage .sfbox.mare{max-width:none}
.stage .bubble,.stage .concl,.stage .req,.stage .goal,.stage .conv,.stage .say,.stage h2.t,.stage .board,.stage .tabla{overflow-wrap:anywhere}
.stage pre,.stage code,.stage .mono{white-space:pre-wrap;overflow-wrap:anywhere}
.stage table{max-width:100%}
.stage img,.stage svg,.stage canvas{max-width:100%}
/* [Fable, C362, 5 oct.] scrisul teoriei și al problemelor 16→18 px DOAR pe PC/laptop (telefon neschimbat); butoanele (.btn 16px), kicker, badge au mărimi proprii și nu se schimbă */
@media (min-width:860px),((hover:hover) and (pointer:fine)){.stage{font-size:20px;line-height:1.55}.stage .bubble,.stage .concl,.stage .idea .t,.stage .cover .sub{font-size:21px}.stage .note,.stage .steps li,.stage .hinfo,.stage .unde,.stage .rq .fb,.stage .field label{font-size:19px}.stage .opt,.stage .ideabox,.stage .teacher .say,.stage .lifecard p,.stage .hist p,.stage .peek-b ul{font-size:20px}.stage .sarcina{font-size:20.5px}.antet{font-size:16.5px}.antet .acale,.antet.compact .acale{font-size:17px}.antet .parte,.antet.compact .parte{font-size:16.5px}.antet .apoz,.antet.compact .apoz{font-size:15.5px}.antet.compact>.kicker,.kicker{font-size:15.5px}.lesson-t{font-size:20px}.cover .k,.hero .k{font-size:16px}}
/* [Opus-18, C371, 5 oct.] regula de mai sus [Fable, C362] trecută la 20 px pe PC/laptop (replici 21, note 19, opțiuni 20, antet 16,5, calea 17 = +13 % față de 15) */
/* [Fable, C360, 5 oct.] telefon: harta pe o coloană, cardurile încap, eticheta exercițiului se rupe, bara de progres nu se strivește, scenele încap în container */
@media (max-width:560px){.hcols{grid-template-columns:1fr}.hcol{min-width:0}.hnode{min-width:0}.hnode .st{white-space:nowrap}.hnode small{min-width:0;overflow-wrap:anywhere}.kicker{white-space:normal;overflow-wrap:anywhere;letter-spacing:.08em}.progress-row{flex-wrap:wrap}.bar{min-width:120px}.pl-main{grid-template-columns:minmax(0,1fr) auto}.pl-id{overflow-wrap:anywhere}.vis,.gsus,.conv,.conv>*{box-sizing:border-box;max-width:100%;min-width:0}.plan span{white-space:normal;overflow-wrap:anywhere}.plan>*{min-width:0}.antet{min-width:0;overflow-wrap:anywhere}.antet .acale{min-width:0;flex-wrap:wrap}.sfbox.mare{max-width:100%;box-sizing:border-box;margin-left:0;margin-right:0}}
/* [Opus-18, 5 oct.] cerințele de pe telefonul real (C364–C371) */
.qglue{white-space:nowrap}   /* C367: ultimul cuvânt + „?” nu se despart */
.acr{white-space:nowrap}
/* C368: pe telefon pagina se derulează cu degetul și peste scenă; punctele se trag de mânere, scena se rotește cu două degete */
.sf-root .sf-stage canvas{touch-action:pan-y}
.side-top{display:flex;align-items:center;justify-content:space-between;gap:10px}   /* C366 */
.side-x{flex:none;width:36px;height:36px;display:grid;place-items:center;border:2px solid var(--line);border-radius:10px;background:var(--surface);color:var(--mute);cursor:pointer;padding:0}
.side-x svg{width:18px;height:18px}
@media (min-width:1024px){html:not(.rail) .side-x{display:none}}
/* C370: centura albă = scris negru pe fond alb (lista, coperta, chipul din antet; .belt.alba avea deja fond alb) */
.tier[style*="--c1:#aeb7c8"],.tcover[style*="--c1:#aeb7c8"]{background:#fff;color:#111;border:2px solid #c7cbe0;box-shadow:0 6px 0 #c7cbe0}
.tier[style*="--c1:#aeb7c8"] .num{background:#eef0f5;color:#111}.tier[style*="--c1:#aeb7c8"] .cnt{background:#eef0f5;color:#111}
.tcover[style*="--c1:#aeb7c8"] .k{opacity:1;color:#333}
.tchip[style*="--c1:#aeb7c8"]{background:#fff;color:#111;border:2px solid #c7cbe0}
.belt.alba{color:#111}
/* C371: calea „Lecția 11 › Noțiunea … › Micro-noțiunea … ?” +12 % și pe telefon / tabletă (13 → 14,5 px; compact 12,5 → 14 px) */
.antet .acale{font-size:14.5px}.antet.compact .acale{font-size:14px}
.antet.compact .acale{flex-wrap:nowrap}   /* C367: pe ecranele cu scenă calea scurtă se taie cu „…”, iar „?” rămâne lângă ea */
@media (min-width:860px),((hover:hover) and (pointer:fine)){.antet .acale,.antet.compact .acale{font-size:17px}}
/* C364 + C365: telefon — bara de sus delicată, pe un rând; profesorul (leul) la jumătate */
@media (max-width:560px){
  .sess-top{gap:5px;padding:8px 10px 6px;flex-wrap:wrap}
  .sess-top .menubtn,.sess-top .x{width:31px;height:31px;border-radius:9px;flex:0 0 auto}
  .sess-top .menubtn svg{width:16px;height:16px}.sess-top .x svg{width:15px;height:15px}
  .sess-top .backbtn,.sess-top .themebtn.hartabtn,.sess-top .hartabtn{height:31px;padding:0 8px;border-radius:9px;font-size:12.5px;border-width:1.5px;flex:0 0 auto}
  .sess-top .askbtn{height:31px;width:31px;padding:0;justify-content:center;border-width:1.5px;flex:0 0 auto}
  .sess-top .askbtn .av,.sess-top .askbtn .av svg{width:27px;height:27px}
  .sess-top .bar{order:20;flex:1 1 calc(100% - 90px);min-width:0}
  .sess-top .stat{order:21;font-size:13px}.sess-top .stat svg{width:17px;height:17px}
  .prof .av,.stage.rsus>.prof .av{flex:0 0 34px;width:34px;height:34px}
  .teacher{grid-template-columns:34px 1fr}.teacher .av{width:34px;height:34px}
  .conv .line .av{width:34px;height:34px}
  .top-in .menubtn,.top-in .themebtn,.top-in .accbtn{width:31px;height:31px;border-radius:9px;flex:0 0 auto}   /* C365 și pe pagina lecției */
  .top-in .themebtn.hartabtn{width:auto;height:31px;padding:0 8px;font-size:12.5px}
  .top-in .themebtn svg,.top-in .menubtn svg{width:16px;height:16px}
}

/* C415: tema și culorile la vedere pe fiecare pagină: în antetul sesiunii doar pe ecranele late (pe telefon stau în meniul ☰) */
@media (max-width:860px){.sess-top .cu-text.doar-lat{display:none}}
.side-pref{display:grid;gap:8px;padding:10px 14px;border-bottom:2px solid var(--line)}
.pref-btn{display:flex;align-items:center;gap:10px;min-height:42px;border:2px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;padding:0 12px;font:800 14px Nunito,sans-serif;cursor:pointer;text-align:left}
.pref-btn svg{width:20px;height:20px;flex:0 0 auto}
.pref-btn .pal{width:18px;height:18px;border-radius:50%;background:var(--pri);box-shadow:inset 0 0 0 2px var(--surface);flex:0 0 auto}
.sess-top .cu-text{display:inline-flex;align-items:center;gap:7px;width:auto;height:40px;padding:0 12px;font:800 13px Nunito,sans-serif;color:var(--ink)}
.sess-top .cu-text svg{width:18px;height:18px}
/* [Fable, etapa 8b, raportul 390] D10: la telefon calea compactă se rupe pe două rânduri în loc să fie tăiată cu „…”; D09: „Mă dau bătut” țintă ≥ 44 px la atingere (C322); D28: „1.2 · Prisme” nu se rupe */
@media (max-width:520px){.antet.compact .acale>span{white-space:normal;overflow:visible;text-overflow:clip}}
@media (pointer:coarse),(max-width:1100px){.foot .fsub button{min-height:44px;padding:10px 12px}}
.ln .nw{white-space:nowrap}