/* plf redesign — editorial + pragmatic */
:root{
  --paper:#f6f3ec;
  --paper-2:#ede8dc;
  --ink:#1a1915;
  --ink-2:#4a463d;
  --ink-3:#857f70;
  --rule:#d9d2c0;
  --rule-2:#c7bfa9;
  --accent:#8a2a2a;      /* oxblood */
  --accent-2:#b4472a;    /* terracotta */
  --ok:#3d6b35;
  --warn:#a9751a;
  --err:#a02727;
  --code-bg:#2a2720;
  --code-ink:#e8e1cc;
  --shadow:0 1px 0 rgba(26,25,21,.04), 0 6px 18px -10px rgba(26,25,21,.25);
  --serif:"Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans:"Inter", system-ui, -apple-system, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
html[data-theme="dark"]{
  --paper:#15130f;
  --paper-2:#1d1b16;
  --ink:#ece6d6;
  --ink-2:#b8b1a0;
  --ink-3:#726b5c;
  --rule:#2a2620;
  --rule-2:#3a362e;
  --accent:#d27a5e;
  --accent-2:#e2a263;
  --ok:#8aae6e;
  --warn:#d8a857;
  --err:#e07a6a;
  --code-bg:#0e0d0a;
  --code-ink:#ece6d6;
  --shadow:0 1px 0 rgba(0,0,0,.3), 0 8px 22px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
code,kbd,pre,.mono{font-family:var(--mono)}
kbd{font-family:var(--mono);background:var(--paper-2);border:1px solid var(--rule);border-bottom-width:2px;border-radius:4px;padding:1px 5px;font-size:11px;color:var(--ink-2)}
.kbd{display:inline-block;padding:1px 5px;border:1px solid var(--rule);border-bottom-width:2px;border-radius:4px;font-family:var(--mono);font-size:11px;background:var(--paper-2);color:var(--ink-2)}

/* nav */
.plf-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;padding:10px 28px;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.plf-nav .brand{font-family:var(--serif);font-weight:700;font-size:22px;font-style:italic;letter-spacing:-.5px;color:var(--accent);text-decoration:none;padding-right:10px;border-right:1px solid var(--rule);margin-right:4px}
.plf-nav .link{text-decoration:none;color:var(--ink-2);font-size:13.5px;font-weight:500;padding:6px 4px;border-bottom:2px solid transparent;margin-bottom:-1px}
.plf-nav .link:hover{color:var(--ink)}
.plf-nav .link.on{color:var(--ink);border-bottom-color:var(--accent)}
.plf-nav .grow{flex:1}
.plf-nav .search{display:flex;align-items:center;gap:10px;background:var(--paper-2);border:1px solid var(--rule);padding:6px 10px;border-radius:6px;color:var(--ink-3);font-size:12.5px;cursor:pointer;min-width:220px;justify-content:space-between;font-family:var(--sans)}
.plf-nav .search:hover{border-color:var(--rule-2);color:var(--ink-2)}
.plf-nav .search kbd{padding:0 4px;font-size:10px}
.plf-nav .toggle{background:none;border:1px solid var(--rule);border-radius:6px;width:30px;height:30px;cursor:pointer;color:var(--ink-2);font-size:14px}
.plf-nav .toggle:hover{color:var(--ink);border-color:var(--rule-2)}

/* main */
.plf-main{min-height:calc(100vh - 52px)}
.wrap{max-width:1180px;margin:0 auto;padding:40px 28px 80px}
h1.page{font-family:var(--serif);font-weight:600;font-size:48px;letter-spacing:-1px;margin:0 0 6px;line-height:1.05}
h1.page .a{color:var(--accent);font-style:italic;font-weight:500}
.page-sub{color:var(--ink-2);margin:0 0 36px;max-width:58ch;font-size:15.5px;line-height:1.5}

/* continue */
.continue{display:flex;align-items:center;gap:16px;padding:16px 18px;border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:6px;background:var(--paper-2);margin-bottom:28px}
.continue .ico{width:36px;height:36px;border-radius:5px;background:var(--paper);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:16px;color:var(--ink-3)}
.continue .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:3px}
.continue .ttl{font-family:var(--serif);font-weight:600;font-size:18px}
.continue>div:nth-child(2){flex:1}
.continue .btn{background:var(--accent);color:#fff;text-decoration:none;padding:8px 14px;border-radius:5px;font-size:13px;font-weight:500}
.continue .btn:hover{filter:brightness(1.1)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:44px}
.stat{padding:16px 18px;border:1px solid var(--rule);border-radius:6px;background:var(--paper-2)}
.stat .l{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:8px}
.stat .v{font-family:var(--serif);font-size:32px;font-weight:600;letter-spacing:-.5px;line-height:1}
.stat .v .of{font-size:14px;color:var(--ink-3);font-weight:400}
.stat .bar{height:3px;background:var(--rule);border-radius:3px;margin-top:12px;overflow:hidden}
.stat .bar i{display:block;height:100%;background:var(--accent);transition:width .5s}

/* section headers */
.section-h{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:-.3px;margin:40px 0 14px;display:flex;align-items:baseline;gap:10px;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.section-h .cnt{font-family:var(--mono);font-size:12px;color:var(--ink-3);font-weight:400}

/* laboratoare / grupuri */
.labs{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.lab{border:1px solid var(--rule);border-radius:6px;background:var(--paper-2);overflow:hidden}
.lab.pinned{border-color:var(--rule-2)}
.lab .h{display:flex;align-items:baseline;justify-content:space-between;padding:10px 14px;background:color-mix(in srgb,var(--paper) 40%,var(--paper-2));border-bottom:1px solid var(--rule);font-size:12px;color:var(--ink-2);font-weight:600;letter-spacing:.02em}
.lab .h b{font-weight:600;color:var(--ink)}
.lab .h .count{font-family:var(--mono);font-size:11px;color:var(--ink-3);font-weight:400}
.lab .item{display:grid;grid-template-columns:16px 1fr auto;gap:10px;align-items:center;padding:8px 14px;text-decoration:none;color:var(--ink);border-bottom:1px solid color-mix(in srgb,var(--rule) 60%,transparent);font-size:13.5px;transition:background .08s}
.lab .item:last-child{border-bottom:0}
.lab .item:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.lab .item .mark{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--rule-2);background:transparent}
.lab .item.done .mark{background:var(--ok);border-color:var(--ok)}
.lab .item.done .name{color:var(--ink-3)}
.lab .item .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lab .item .diff{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding:2px 6px;border-radius:3px;background:var(--paper);border:1px solid var(--rule);color:var(--ink-3)}
.diff-intro{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,var(--rule))}
.diff-bază,.diff-baza{color:var(--accent-2);border-color:color-mix(in srgb,var(--accent-2) 30%,var(--rule))}
.diff-extra{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,var(--rule))}
.diff-parțial,.diff-partial{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,var(--rule));font-weight:600}

/* crumbs + badges */
.crumbs{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3);margin-bottom:10px}
.crumbs .c{text-decoration:none;color:var(--ink-3)}
.crumbs .c:hover{color:var(--ink)}
.crumbs .sep{opacity:.5}
.meta-badges{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 24px}
.mb{font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:3px;border:1px solid var(--rule);color:var(--ink-2);background:var(--paper-2);text-decoration:none}
.mb.src{color:var(--ink-3)}
.mb.concept{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 30%,var(--rule));cursor:pointer}
.mb.concept:hover{background:color-mix(in srgb,var(--accent) 10%,var(--paper-2))}

/* problem layout */
.prob{display:grid;grid-template-columns:1fr 1.1fr;gap:32px;align-items:start}
@media (max-width:1024px){.prob{grid-template-columns:1fr}}
.prob h2{font-family:var(--serif);font-weight:600;font-size:34px;letter-spacing:-.5px;margin:0 0 4px;line-height:1.1}
.prob .stm{position:sticky;top:72px;max-height:calc(100vh - 92px);overflow-y:auto;padding-right:8px}
.statement{font-size:15.5px;line-height:1.65;color:var(--ink)}
.statement p{margin:0 0 12px}
.statement pre{background:var(--code-bg);color:var(--code-ink);padding:12px 14px;border-radius:5px;font-size:13px;overflow-x:auto;border:1px solid var(--rule)}
.statement code{background:var(--paper-2);padding:1px 5px;border-radius:3px;font-size:.92em;border:1px solid var(--rule)}
.statement pre code{background:transparent;border:0;padding:0}
.statement ul,.statement ol{padding-left:22px}
.statement h3{font-family:var(--serif);font-size:18px;margin-top:22px;margin-bottom:6px}

.hints{margin-top:26px;padding:14px 16px;border:1px dashed var(--rule-2);border-radius:5px;background:color-mix(in srgb,var(--warn) 5%,var(--paper-2))}
.hints .hdr{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:8px}
.hintbtn{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--rule);border-radius:5px;padding:10px 14px;width:100%;text-align:left;cursor:pointer;color:var(--ink);font-family:var(--sans);font-size:13.5px}
.hintbtn:hover{border-color:var(--accent)}
.hintbtn .tag{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding:2px 6px;border-radius:3px;background:var(--accent);color:#fff}

/* IDE */
.ide{position:sticky;top:72px;display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:6px;overflow:hidden;background:var(--paper-2)}
.tabs{display:flex;background:color-mix(in srgb,var(--paper) 40%,var(--paper-2));border-bottom:1px solid var(--rule)}
.tab{padding:9px 14px;font-family:var(--mono);font-size:12px;color:var(--ink-3);cursor:pointer;border-right:1px solid var(--rule);text-transform:lowercase}
.tab.on{background:var(--code-bg);color:var(--code-ink);position:relative}
.tab.on::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent)}
.tab-panel{background:var(--code-bg)}
#code-editor{width:100%;height:320px;background:var(--code-bg);color:var(--code-ink);border:0;padding:14px 16px;font-family:var(--mono);font-size:13.5px;line-height:1.55;resize:vertical;outline:none}
.CodeMirror{height:320px !important;font-family:var(--mono);font-size:13.5px;background:var(--code-bg);color:var(--code-ink)}
.CodeMirror-gutters{background:var(--code-bg);border-right:1px solid #3a362e}
.CodeMirror-linenumber{color:#5c574a}
.solution-pre{margin:0;padding:14px 16px;background:var(--code-bg);color:var(--code-ink);font-family:var(--mono);font-size:13px;line-height:1.55;overflow-x:auto;max-height:320px}

.qrow{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--paper);border-top:1px solid var(--rule)}
.qrow .prompt{font-family:var(--mono);color:var(--accent);font-weight:700}
.qrow input{flex:1;background:transparent;border:0;border-bottom:1px solid var(--rule);padding:6px 2px;font-family:var(--mono);font-size:13px;color:var(--ink);outline:none}
.qrow input:focus{border-bottom-color:var(--accent)}
.qrow .act{display:flex;gap:6px}
.qrow button{display:flex;align-items:center;gap:8px;border:1px solid var(--rule);background:var(--paper-2);color:var(--ink);padding:7px 12px;border-radius:4px;font-size:12.5px;font-family:var(--sans);cursor:pointer}
.qrow button:hover{border-color:var(--rule-2)}
.qrow .run{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.qrow .run:hover{filter:brightness(1.15)}
.qrow .grade{background:var(--accent);color:#fff;border-color:var(--accent)}
.qrow .grade:hover{filter:brightness(1.1)}
.qrow .kb{font-family:var(--mono);font-size:10px;opacity:.7;background:color-mix(in srgb,#000 20%,transparent);padding:1px 4px;border-radius:3px}
.qrow .info{display:inline-flex;width:14px;height:14px;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:50%;font-size:9px;font-family:var(--serif);font-style:italic;opacity:.75}

.out{margin:0;background:var(--code-bg);color:var(--code-ink);padding:12px 16px;font-family:var(--mono);font-size:13px;line-height:1.55;white-space:pre-wrap;border-top:1px solid var(--rule);min-height:70px;max-height:260px;overflow-y:auto}
.out .ok{color:#a8d48c}
.out .err{color:#e07a6a}
.out .dim{color:var(--ink-3)}

.tests{background:var(--paper-2);border-top:1px solid var(--rule);padding:12px 14px}
.tests .hdr{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:8px;display:flex;justify-content:space-between}
.tests .tip{font-family:var(--mono);text-transform:none;letter-spacing:0;font-size:11px;color:var(--ink-3)}
.test{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:6px 8px;border-radius:4px;font-family:var(--mono);font-size:12px;margin-bottom:2px;cursor:pointer;transition:background .08s}
.test:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}

/* highlight.js: keep our <pre> background/padding, only use hljs for token colors */
.hljs{background:transparent!important;padding:0!important;color:var(--code-ink)}
.test .mark{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:var(--paper);border:1px solid var(--rule);color:var(--ink-3)}
.test.pass .mark{background:var(--ok);color:#fff;border-color:var(--ok)}
.test.fail .mark{background:var(--err);color:#fff;border-color:var(--err)}
.test code{background:transparent;color:var(--ink)}
.test .exp{font-size:11px;color:var(--ink-3)}
.test.fail{background:color-mix(in srgb,var(--err) 8%,transparent)}
.test.pass{background:color-mix(in srgb,var(--ok) 8%,transparent)}

/* concepts grid */
.concepts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.cc{display:block;padding:18px;border:1px solid var(--rule);border-radius:6px;background:var(--paper-2);text-decoration:none;color:var(--ink);transition:border-color .1s,transform .1s}
.cc:hover{border-color:var(--accent);transform:translateY(-1px)}
.cc .ttl{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:-.2px;margin-bottom:6px}
.cc .sum{color:var(--ink-2);font-size:13.5px;line-height:1.5;margin-bottom:14px;min-height:40px}
.cc .meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--ink-3);padding-top:10px;border-top:1px solid var(--rule)}
.cc .progress{color:var(--accent)}

/* concept page */
.concept-page{display:grid;grid-template-columns:220px minmax(0,1fr) 200px;gap:36px;align-items:start}
@media (max-width:1024px){.concept-page{grid-template-columns:1fr}.concept-page .rail{display:none}}
.rail{position:sticky;top:72px;max-height:calc(100vh - 92px);overflow-y:auto;font-size:13px}
.rail .h{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.rail .lst{display:flex;flex-direction:column;gap:2px}
.rail .i{text-decoration:none;color:var(--ink-2);padding:4px 8px;border-radius:3px;border-left:2px solid transparent;font-size:13px}
.rail .i:hover{color:var(--ink);background:var(--paper-2)}
.rail .i.on{color:var(--accent);border-left-color:var(--accent);font-weight:500}
.concept-main h1{font-family:var(--serif);font-size:40px;font-weight:600;letter-spacing:-.5px;margin:6px 0 2px;line-height:1.1}
.lede{font-family:var(--serif);font-size:18px;color:var(--ink-2);font-style:italic;margin:0 0 18px;line-height:1.5}
.concept-body{font-size:15.5px;line-height:1.7}
.concept-body h2{font-family:var(--serif);font-size:26px;font-weight:600;margin:36px 0 8px;letter-spacing:-.3px;padding-bottom:4px;border-bottom:1px solid var(--rule)}
.concept-body h3{font-family:var(--serif);font-size:20px;font-weight:600;margin:24px 0 6px}
.concept-body p{margin:0 0 14px}
.concept-body ul,.concept-body ol{padding-left:24px}
.concept-body li{margin-bottom:4px}
.concept-body code{background:var(--paper-2);padding:1px 5px;border-radius:3px;font-size:.92em;border:1px solid var(--rule)}
.concept-body pre{background:var(--code-bg);color:var(--code-ink);padding:14px 16px;border-radius:5px;font-size:13px;overflow-x:auto;border:1px solid var(--rule)}
.concept-body pre code{background:transparent;border:0;padding:0}
.concept-body blockquote{margin:16px 0;padding:10px 16px;border-left:3px solid var(--accent);background:var(--paper-2);color:var(--ink-2);font-style:italic}

.concept-problems{display:flex;flex-direction:column;gap:4px;margin-top:10px;border:1px solid var(--rule);border-radius:6px;background:var(--paper-2);overflow:hidden}
.concept-problems .item{display:grid;grid-template-columns:16px 1fr auto auto;gap:12px;align-items:center;padding:9px 14px;text-decoration:none;color:var(--ink);border-bottom:1px solid color-mix(in srgb,var(--rule) 60%,transparent);font-size:13.5px}
.concept-problems .item:last-child{border-bottom:0}
.concept-problems .item:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.concept-problems .item .mark{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--rule-2)}
.concept-problems .item.done .mark{background:var(--ok);border-color:var(--ok)}
.concept-problems .item.done .name{color:var(--ink-3)}
.concept-problems .item .src{font-size:11px;color:var(--ink-3)}
.concept-problems .item .diff{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding:2px 6px;border-radius:3px;background:var(--paper);border:1px solid var(--rule);color:var(--ink-3)}

/* palette */
.palette-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;padding-top:15vh;z-index:100}
.palette-overlay.on{display:flex}
.palette{width:min(620px,92vw);background:var(--paper);border:1px solid var(--rule-2);border-radius:8px;box-shadow:var(--shadow);overflow:hidden}
.palette input{width:100%;border:0;border-bottom:1px solid var(--rule);padding:16px 20px;font-size:16px;background:transparent;color:var(--ink);outline:none;font-family:var(--sans)}
.palette .list{max-height:420px;overflow-y:auto;padding:6px 0}
.palette .row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;padding:9px 20px;cursor:pointer;align-items:center}
.palette .row:hover,.palette .row.on{background:var(--paper-2)}
.palette .row .kind{font-family:var(--mono);font-size:10px;text-transform:uppercase;color:var(--ink-3);letter-spacing:.06em;padding:2px 6px;border:1px solid var(--rule);border-radius:3px;min-width:60px;text-align:center}
.palette .row.conc .kind{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 30%,var(--rule))}
.palette .row .ttl{font-size:14px}
.palette .row .sub{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.palette .ft{padding:8px 20px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:10.5px;color:var(--ink-3);display:flex;gap:14px}