/* tokens and themes (light / dark / EN green), page layout, the top bar, shared bits */
/* Layout: one centered column. Home = continue card + chapters grouped by Subiect; chapter page; practice page. */
:root{
  --bg:#fffdf9; --panel:#f6f2ea; --ink:#2a2622; --muted:#6d665d; --line:#e9e3d8; --sq:#b9b1a4;
  --acc:#2c56d6; --acc-w:#e7edfd; --on-acc:#ffffff; --acc-h:#2146b5; --acc-l:#bccbf5;
  --good:#2a7f38; --good-w:#e6f4e8; --on-good:#ffffff;
  --bad:#c2412f; --bad-w:#fbebe7; --sun:#d98a1f;
  --org:#b5690d; --org-w:#fcefdc; --rose:#b23a6c; --rose-w:#fbe8f0;
  --card:#ffffff; --line2:#d6cfc2; --tm:#9a5b00; --tm-w:#fdf1dc; --tm-h:#f8e2bd; --grid:rgba(214,205,190,.32);
  --font:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#1b1410; --panel:#261d17; --ink:#f3eae0; --muted:#b5a594; --line:#3b2f26; --sq:#7a6858;
  --acc:#8aa6f6; --acc-w:#222a45; --on-acc:#10182e;
  --good:#63c473; --good-w:#1e3122; --on-good:#0f1f10;
  --bad:#f08e7b; --bad-w:#3e231b; --sun:#f2ad52; color-scheme:dark;
  --acc-h:#a8bcf8; --acc-l:#3d4f86; --org:#eaa560; --org-w:#3d2b18; --rose:#eb90b5; --rose-w:#3d1f2b;
  --card:#2a211a; --line2:#55463a; --tm:#f2b75e; --tm-w:#3e2c15; --tm-h:#4e381b; --grid:rgba(255,232,205,.05);}}
:root[data-theme="dark"]{
  --bg:#1b1410; --panel:#261d17; --ink:#f3eae0; --muted:#b5a594; --line:#3b2f26; --sq:#7a6858;
  --acc:#8aa6f6; --acc-w:#222a45; --on-acc:#10182e;
  --good:#63c473; --good-w:#1e3122; --on-good:#0f1f10;
  --bad:#f08e7b; --bad-w:#3e231b; --sun:#f2ad52; color-scheme:dark;
  --acc-h:#a8bcf8; --acc-l:#3d4f86; --org:#eaa560; --org-w:#3d2b18; --rose:#eb90b5; --rose-w:#3d1f2b;
  --card:#2a211a; --line2:#55463a; --tm:#f2b75e; --tm-w:#3e2c15; --tm-h:#4e381b; --grid:rgba(255,232,205,.05);}
/* Evaluarea Națională (html[data-exam="EN"]): the first version's green accent; bac stays royal blue */
:root[data-exam="EN"]{--acc:#0f7b6c; --acc-w:#e3f2ef; --on-acc:#ffffff; --acc-h:#0b6457; --acc-l:#a8d8cf; --good:#3f7d0e; --good-w:#ecf5df}
@media (prefers-color-scheme: dark){:root[data-exam="EN"]:not([data-theme="light"]){--acc:#4fb8a6; --acc-w:#183a35; --on-acc:#10201d; --acc-h:#72cbbb; --acc-l:#2b5f57; --good:#9ad46a; --good-w:#26321a}}
:root[data-exam="EN"][data-theme="dark"]{--acc:#4fb8a6; --acc-w:#183a35; --on-acc:#10201d; --acc-h:#72cbbb; --acc-l:#2b5f57; --good:#9ad46a; --good-w:#26321a}
:root[data-exam="EN"] .w-bac{fill:var(--acc)}

*{box-sizing:border-box}
/* scale the practice page up on large screens; its viewport-based sizes divide by --z to stay on screen */
:root{--z:1}
/* the whole site at 80%, like browser zoom 80%, on computer screens. Viewport units are divided by
   --rz everywhere so full-height layouts still fill the window exactly. */
:root{--rz:1}
html{zoom:var(--rz)}
/* about 1.2x smaller than before: big screens felt crowded and some places were hard to reach */
html{overflow-x:clip;background:var(--bg)}
@supports not (overflow-x:clip){html,body{overflow-x:hidden}}
.app.prac,.app.chp{zoom:var(--z)}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:24px}
.app{max-width:680px;margin:0 auto;padding-block:24px 64px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button{font-family:inherit;color:inherit}
button:focus-visible,input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* top bar */
/* the top bar stays on screen; --toph is its height, so sticky things below it start under it.
   Inside zoomed pages lengths are scaled by --z, hence the divisions. */
:root{--toph:97px}
@media (max-width:1100px){:root{--toph:89px}}
@media (max-width:600px){:root{--toph:65px}}
.top{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line);transition:transform .25s ease}
.top.hide{transform:translateY(-100%)}
.sim-bar,.sim-nav,.hm-l,.side{transition:top .25s ease}
@media (prefers-reduced-motion:reduce){.top,.sim-bar,.sim-nav,.hm-l,.side{transition:none}}
.top-in{max-width:1880px;margin:0 auto;min-height:96px;padding:12px max(16px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:16px}
.top-in>.brand{margin-inline:auto;position:relative}
/* exactly in the middle: navigation on the left, actions on the right, so both sides weigh about the same */
.top .search{display:none}   /* the 10 chapters are one click away in "Capitole"; the bar stays balanced around the brand */
@media (min-width:1380px){.top-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.top-l{justify-self:start}.top-r{justify-self:end}.top-in>.brand{margin:0}}
.ex-tag{position:absolute;top:-4px;right:-30px;font-size:10px;font-weight:900;letter-spacing:.04em;padding:1px 5px;border-radius:5px;color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.28);line-height:13px}
.ex-tag[hidden]{display:none}
@media (max-width:1100px){.ex-tag{display:none}}   /* only where the centred brand has room around it */
@media (min-width:1300px){.top-in{padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}}   /* the same distance to the left group and to the right one */
.top-l{display:flex;align-items:center;gap:14px;min-width:0;flex:none}
.top-nav{display:flex;align-items:center;gap:2px}
.top-r{display:flex;align-items:center;gap:6px;flex:none}
.brand{display:flex;align-items:center;gap:11px;font-size:26px;line-height:32px;font-weight:800;letter-spacing:-.01em;background:none;border:none;padding:0;cursor:pointer;color:var(--ink);white-space:nowrap}
.logo{width:34px;height:34px;flex:none;display:block}
.bn-s{color:var(--acc)}
.top .bn-s{color:#7ea2ff}
.menu-wrap{position:relative;flex:none}
.explore{display:flex;align-items:center;gap:4px;background:none;border:none;padding:10px 2px;font-size:17px;font-weight:800;color:var(--ink);cursor:pointer;white-space:nowrap}
.explore svg{width:20px;height:20px;transition:transform .15s}
.explore[aria-expanded="true"] svg{transform:rotate(180deg)}
.search{position:relative;display:flex;align-items:center;gap:8px;flex:0 1 300px;min-width:0;height:48px;padding:0 12px;background:var(--acc-w);border:1px solid #bccbf5;border-radius:6px}
.search:focus-within{border-color:var(--acc)}
.search>svg{width:20px;height:20px;color:var(--ink);flex:none}
.search input{flex:1;min-width:0;border:none;background:none;outline:none;font:500 16px var(--font);color:var(--ink)}
.search input::placeholder{color:var(--ink);opacity:.75}
.menu,.results{position:absolute;top:calc(100% + 8px);left:0;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(42,38,34,.16);padding:10px;z-index:40}
.menu{display:grid;grid-template-columns:repeat(3,minmax(190px,1fr));gap:4px 16px;width:min(680px,calc(calc(100vw / var(--rz)) - 32px))}
.results{right:0;min-width:300px}
.mh{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:6px 10px 4px}
.menu button,.results button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;border-radius:6px;padding:7px 10px;color:var(--ink);cursor:pointer}
.mt{display:flex;flex-direction:column;min-width:0}
.mt b{font-size:15px;line-height:20px;font-weight:700}
.mt span{font-size:13px;line-height:18px;color:var(--muted)}
.cic{width:36px;height:36px;border-radius:10px;background:var(--sc-w,var(--acc-w));color:var(--sc,var(--acc));display:grid;place-items:center;flex:none}
.cic svg{width:22px;height:22px}
.cic.lg{width:54px;height:54px;border-radius:15px}.cic.lg svg{width:34px;height:34px}
.cic.sm{width:30px;height:30px;border-radius:8px}.cic.sm svg{width:19px;height:19px}
.sdot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--sc,var(--acc));margin-right:8px;vertical-align:1px}
.tt-row{display:flex;align-items:center;gap:14px}
.menu button:hover,.results button:hover,.results button:focus-visible{background:var(--panel)}
.results .none{margin:6px 10px;color:var(--muted)}
@media (max-width:1340px){.search{display:none}}
@media (max-width:620px){.menu{grid-template-columns:1fr}.brand{font-size:19px}.logo{width:28px;height:28px}.top-r .chip span{display:none}}
@media (max-width:440px){.brand .bname{display:none}}
/* phones: Teme, Teste and Simulare all fit next to the logo and the account button */
@media (max-width:600px){.top-l{gap:2px}.top-nav{gap:0}}
@media (max-width:430px){.top-in{gap:6px!important;padding-left:10px!important;padding-right:10px!important}.top .linkbtn{font-size:13px!important;padding:6px 5px!important}.top .explore{font-size:14px}#nav-start{padding:0 10px!important;margin-right:4px!important}}
.chip{display:flex;align-items:center;gap:6px;background:var(--panel);border-radius:999px;padding:5px 12px;font-size:13px;color:var(--muted)}
.chip b{color:var(--ink)} .chip svg{width:13px;height:13px;color:var(--sun)}

/* shared */
.eyebrow{font-size:13px;color:var(--muted)}
.exsw{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:6px 0 2px;font-size:13px;color:var(--muted)}
.exsw button{font:inherit;font-weight:700;color:var(--ink);background:var(--card);border:1.5px solid var(--line2);border-radius:999px;padding:3px 12px;cursor:pointer}
.exsw button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:#fff}
h1{margin:2px 0 6px;font-size:26px;line-height:32px;font-weight:900;text-wrap:balance}
.lead{margin:0 0 20px;color:var(--muted)}
h2{margin:0;font-size:16px;line-height:22px;font-weight:700;text-wrap:balance}
.back{display:inline-flex;align-items:center;gap:4px;background:none;border:none;padding:0;color:var(--acc);font-weight:700;font-size:14px;cursor:pointer;margin-bottom:16px}
.btn{border:none;border-radius:10px;padding:10px 20px;font-weight:900;font-size:15px;line-height:20px;cursor:pointer}
.btn-acc{background:var(--acc);color:var(--on-acc)}
.btn-good{background:var(--acc);color:var(--on-acc)}
.btn:disabled{opacity:.4;cursor:default}
.m{width:18px;height:18px;border-radius:6px;border:2px solid var(--sq);flex:none;display:grid;place-items:center}
.m.p{border-color:var(--acc);background:var(--acc-w)}
.m.d{border-color:var(--acc);background:var(--acc);color:var(--on-acc)}
.m svg{width:11px;height:11px}
.seg{display:flex;gap:4px}
.cbar{width:96px;height:6px;border-radius:3px;background:var(--line);overflow:hidden;flex:none}
.cbar i{display:block;height:100%;border-radius:3px;background:var(--acc);transition:width .4s ease}
.dots{align-items:center;gap:10px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.seg i{width:18px;height:6px;border-radius:3px;background:var(--line)}
.seg i.d{background:var(--acc)} .seg i.p{background:var(--acc)}