/* ============================================================
   PSO Trainer — temă caldă închisă (gruvbox-inspired)
   ============================================================ */
:root{
  /* fundaluri (negru → gri-maro cald) */
  --bg:#1a1714;            /* pagina */
  --sidebar:#13110e;       /* bara laterala, mai inchisa */
  --panel:#221e1a;         /* carduri */
  --panel2:#2a2521;        /* carduri hover / tabele */
  --topbar:#1d1916;

  /* text */
  --ink:#ece3d2;           /* text principal (cald, cremos) */
  --ink-soft:#d6cbb6;
  --muted:#a8997f;         /* secundar */
  --line:#352f28;          /* borduri */
  --line2:#403930;

  /* accente (gruvbox) */
  --accent:#e9b143;        /* auriu */
  --accent-2:#d8843f;      /* portocaliu hover */
  --blue:#83a598;
  --green:#b8bb26;
  --red:#fb4934;
  --purple:#d3869b;
  --aqua:#8ec07c;

  /* cod */
  --code-bg:#14110d;
  --code-ink:#ece3d2;

  --sidebar-w:286px;
  --mono:"JetBrains Mono","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* ---------- Temă deschisă (caldă, asortată) ---------- */
html[data-theme="light"]{
  --bg:#f3ecdd;
  --sidebar:#ece2cd;
  --panel:#fbf6ea;
  --panel2:#f1e8d6;
  --topbar:#f7f1e3;
  --ink:#2a2118;
  --ink-soft:#4a3f30;
  --muted:#8a7a5f;
  --line:#ddd0b8;
  --line2:#cdbf9f;
  --accent:#bf8b1d;
  --accent-2:#c46a2a;
  --blue:#076678;
  --green:#79740e;
  --red:#c23a2e;
  --purple:#8f3f71;
  --aqua:#427b58;
  --code-bg:#efe6d2;
  --code-ink:#2a2118;
}
/* suprafețe care în temă închisă erau culori fixe -> echivalent deschis */
html[data-theme="light"] .sidebar::-webkit-scrollbar-thumb,
html[data-theme="light"] pre.code::-webkit-scrollbar-thumb{background:#d8ccb2}
html[data-theme="light"] .nav-cat,
html[data-theme="light"] pre.code[data-lang]::before{color:#9a8a6a}
html[data-theme="light"] .nav-item:hover,
html[data-theme="light"] .nav-subhead:hover{background:#e7ddc8}
html[data-theme="light"] .hero,
html[data-theme="light"] .result-card{background:linear-gradient(135deg,#fbf3e2,#f4ead3)}
html[data-theme="light"] .tile.feat{background:linear-gradient(135deg,#faf2df,#f1e6cf)}
html[data-theme="light"] .tile .cat-tag,
html[data-theme="light"] .tbl th,
html[data-theme="light"] .qtag.an,
html[data-theme="light"] .qtag.multi{background:#f0e6cf}
html[data-theme="light"] .article code,
html[data-theme="light"] .qtext code,
html[data-theme="light"] .model-answer code,
html[data-theme="light"] .explain code,
html[data-theme="light"] .tbl code,
html[data-theme="light"] .qtag{background:#ece1c8}
html[data-theme="light"] .callout,
html[data-theme="light"] .model-answer{background:#f6edd9}
html[data-theme="light"] .tip,
html[data-theme="light"] .explain,
html[data-theme="light"] .opt.correct{background:#eaf0d4}
html[data-theme="light"] .warn,
html[data-theme="light"] .explain.bad,
html[data-theme="light"] .opt.wrong{background:#f7e2da}
html[data-theme="light"] .opt.selected{background:#f6ecca}
/* tokeni cod (gruvbox light) */
html[data-theme="light"] .tok-key{color:#b57614}
html[data-theme="light"] .tok-fn{color:#076678}
html[data-theme="light"] .tok-str{color:#79740e}
html[data-theme="light"] .tok-num{color:#8f3f71}
html[data-theme="light"] .tok-com{color:#928374}
html[data-theme="light"] .tok-pre{color:#427b58}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); color:var(--ink); background:var(--bg);
  line-height:1.65; font-size:15px;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Sidebar fixă ---------- */
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
  background:var(--sidebar); border-right:1px solid var(--line);
  display:flex; flex-direction:column; overflow-y:auto; z-index:50;
}
.sidebar::-webkit-scrollbar{width:9px}
.sidebar::-webkit-scrollbar-thumb{background:#2c2620; border-radius:6px}
.brand{padding:22px 20px 16px; border-bottom:1px solid var(--line)}
.brand h1{font-size:19px; color:var(--ink); letter-spacing:.2px; font-weight:700}
.brand .sub{font-size:12px; color:var(--muted); margin-top:4px}
.brand .pill{display:inline-block; margin-top:10px; font-size:11px; background:var(--accent); color:#1a1714; padding:3px 10px; border-radius:20px; font-weight:600}

.nav-section{padding:10px 8px}
.nav-title{font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); padding:10px 12px 4px; font-weight:600}
.nav-cat{font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:#7a6e5c; padding:12px 14px 3px; font-weight:600}
.nav-item{
  display:flex; align-items:center; gap:10px; padding:8px 13px; margin:1px 4px;
  border-radius:9px; cursor:pointer; font-size:14px; color:var(--ink-soft); transition:.12s;
}
.nav-item:hover{background:#241f1a; color:var(--ink)}
.nav-item.active{background:var(--accent); color:#1a1714; font-weight:600}
.nav-item .ico{width:18px; text-align:center; opacity:.85; font-size:13px}
.nav-sub{font-size:13.5px}

/* ---------- Materii (grupuri pliabile) ---------- */
.nav-subject{padding:2px 8px; border-top:1px solid var(--line)}
.nav-subject:first-of-type{border-top:none}
.nav-subhead{
  display:flex; align-items:center; gap:9px; padding:11px 11px; margin:2px 4px;
  border-radius:9px; cursor:pointer; color:var(--ink); font-weight:600; font-size:14.5px;
  transition:.12s; user-select:none;
}
.nav-subhead:hover{background:#241f1a}
.nav-subhead.active{color:var(--accent)}
.nav-subhead .ico{font-size:15px}
.nav-subhead .nm{flex:1}
.nav-subhead .caret{width:14px; text-align:center; color:var(--muted); font-size:11px; transition:transform .18s}
.nav-subject.expanded .nav-subhead .caret{transform:rotate(90deg); color:var(--accent)}
.nav-children{display:none; padding:2px 0 8px 6px; margin-left:6px; border-left:1px solid var(--line)}
.nav-subject.expanded .nav-children{display:block}

/* ---------- Materie încărcată în iframe (ex. Rețele) ---------- */
.content.embed{max-width:none; padding:0}
.embed-wrap{height:calc(100vh - 66px)}
.embed-frame{width:100%; height:100%; border:0; display:block; background:var(--bg)}

/* ---------- Main ---------- */
.main{margin-left:var(--sidebar-w); min-height:100vh}
.topbar{
  background:var(--topbar); border-bottom:1px solid var(--line); padding:15px 34px;
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
}
.topbar h2{font-size:18px; font-weight:600}
.topbar .crumb{font-size:12px; color:var(--muted); margin-bottom:2px}
.theme-toggle{
  background:var(--panel); border:1px solid var(--line2); color:var(--ink);
  width:42px; height:40px; border-radius:11px; cursor:pointer; font-size:18px;
  display:flex; align-items:center; justify-content:center; transition:.15s; flex-shrink:0;
}
.theme-toggle:hover{border-color:var(--accent); transform:translateY(-1px)}
.content{padding:30px 40px 90px; max-width:940px; margin:0 auto}

/* ---------- Home ---------- */
.hero{background:linear-gradient(135deg,#3a2f1e,#2a2017); border:1px solid var(--line2); color:var(--ink); border-radius:18px; padding:36px; margin-bottom:26px}
.hero h2{font-size:28px; margin-bottom:10px; color:var(--accent)}
.hero p{color:var(--ink-soft); max-width:680px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:15px}
.tile{
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px;
  cursor:pointer; transition:.16s;
}
.tile:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:0 10px 30px rgba(0,0,0,.35)}
.tile.feat{background:linear-gradient(135deg,#33291a,#2a2118); border-color:var(--line2)}
.tile .ico{font-size:26px; margin-bottom:10px}
.tile h3{font-size:16px; margin-bottom:5px; color:var(--ink)}
.tile p{font-size:13px; color:var(--muted)}
.tile .cat-tag{display:inline-block; margin-top:10px; font-size:11px; color:var(--accent); background:#2e2515; padding:2px 9px; border-radius:6px; font-weight:500}

/* ---------- Articol concept ---------- */
.article h2{font-size:22px; margin:30px 0 14px; padding-bottom:8px; border-bottom:2px solid var(--line); color:var(--accent); font-weight:700}
.article h2:first-child{margin-top:0}
.article h3{font-size:17px; margin:20px 0 8px; color:var(--ink)}
.article p{margin:11px 0; color:var(--ink-soft)}
.article ul,.article ol{margin:11px 0 11px 24px}
.article li{margin:5px 0; color:var(--ink-soft)}
.article b{color:var(--ink); font-weight:600}
.article a{color:var(--blue)}
.article code{background:#2c2418; color:var(--accent); padding:1.5px 6px; border-radius:5px; font-size:13px; font-family:var(--mono)}
.muted{color:var(--muted); font-size:13px}

.tbl{width:100%; border-collapse:collapse; margin:16px 0; font-size:14px; background:var(--panel); border-radius:12px; overflow:hidden; border:1px solid var(--line)}
.tbl th{background:#2a2118; text-align:left; padding:10px 13px; font-size:12.5px; color:var(--accent); border-bottom:1px solid var(--line2); font-weight:600; text-transform:uppercase; letter-spacing:.4px}
.tbl td{padding:9px 13px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink-soft)}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--panel2)}
.tbl code{background:#322a1c}

/* ---------- Cod ---------- */
pre.code{
  background:var(--code-bg); color:var(--code-ink); padding:16px 18px; border-radius:12px;
  overflow-x:auto; font-family:var(--mono); font-size:13px; line-height:1.7; margin:14px 0;
  border:1px solid var(--line2); position:relative; tab-size:4;
}
pre.code[data-lang]::before{
  content:attr(data-lang); position:absolute; top:9px; right:14px; font-size:10px;
  color:#7a6e5c; text-transform:uppercase; letter-spacing:1.5px; font-weight:600;
}
pre.code::-webkit-scrollbar{height:9px}
pre.code::-webkit-scrollbar-thumb{background:#2c2620; border-radius:6px}
/* tokens (gruvbox) */
.tok-key{color:#fabd2f; font-weight:500}
.tok-fn{color:#83a598}
.tok-str{color:#b8bb26}
.tok-num{color:#d3869b}
.tok-com{color:#928374; font-style:italic}
.tok-pre{color:#8ec07c}

.callout{background:#241f17; border-left:4px solid var(--accent); padding:14px 18px; border-radius:10px; margin:16px 0; font-size:14px; color:var(--ink-soft)}
.callout ul{margin:7px 0 3px 22px}
.callout b{color:var(--ink)}
.tip{background:#1e2218; border-left:4px solid var(--green); padding:14px 18px; border-radius:10px; margin:16px 0; font-size:14px; color:var(--ink-soft)}
.tip b{color:var(--green)}
.warn{background:#2a1c17; border-left:4px solid var(--red); padding:14px 18px; border-radius:10px; margin:16px 0; font-size:14px; color:var(--ink-soft)}
.warn b{color:var(--red)}

.diagram{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; margin:18px 0; text-align:center}
.diagram svg{max-width:100%; height:auto}
.diagram img{border-radius:8px; background:#f4ecd8; padding:8px}
figure.diagram figcaption{margin-top:10px}

/* ---------- Quiz ---------- */
.quiz-intro{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px; margin-bottom:22px}
.quiz-intro h2{font-size:21px; margin-bottom:8px; color:var(--accent)}
.filters{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0}
.chip{padding:7px 15px; border:1px solid var(--line2); background:var(--panel2); color:var(--ink-soft); border-radius:22px; cursor:pointer; font-size:13px; transition:.12s}
.chip:hover{border-color:var(--accent); color:var(--ink)}
.chip.active{background:var(--accent); color:#1a1714; border-color:var(--accent); font-weight:600}
.chip .muted{color:inherit; opacity:.7}
.btn{background:var(--accent); color:#1a1714; border:none; padding:11px 22px; border-radius:10px; font-size:14px; cursor:pointer; font-weight:600; transition:.12s; font-family:var(--sans)}
.btn:hover{background:var(--accent-2)}
.btn.ghost{background:transparent; color:var(--accent); border:1px solid var(--line2)}
.btn.ghost:hover{background:var(--panel2); border-color:var(--accent)}
.btn:disabled{cursor:default}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}

.qcard{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:24px; margin-bottom:18px}
.qhead{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px}
.qmeta{display:flex; gap:6px; flex-wrap:wrap}
.qtag{font-size:11px; padding:2px 9px; border-radius:6px; background:#2a2418; color:var(--muted); font-weight:500}
.qtag.an{background:#2e2515; color:var(--accent)}
.qtag.multi{background:#2a2117; color:var(--accent-2)}
.qnum{font-size:12px; color:var(--muted)}
.qtext{font-size:15.5px; margin:10px 0 8px; line-height:1.55; color:var(--ink)}
.qtext code{background:#2c2418; color:var(--accent); padding:1.5px 6px; border-radius:5px; font-size:13px; font-family:var(--mono)}
.qcode{margin:12px 0}

.opt{
  display:flex; align-items:flex-start; gap:11px; padding:12px 15px; border:1.5px solid var(--line2);
  border-radius:11px; margin:9px 0; cursor:pointer; transition:.12s; font-size:14.5px; color:var(--ink-soft);
}
.opt:hover{border-color:var(--accent); background:var(--panel2)}
.opt .mark{width:21px; height:21px; border:2px solid var(--line2); border-radius:50%; flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center; font-size:12px; color:#1a1714}
.opt.multi .mark{border-radius:6px}
.opt.selected{border-color:var(--accent); background:#2a2316}
.opt.selected .mark{background:var(--accent); border-color:var(--accent)}
.opt.correct{border-color:var(--green); background:#1f2616}
.opt.correct .mark{background:var(--green); border-color:var(--green)}
.opt.wrong{border-color:var(--red); background:#2a1a16}
.opt.wrong .mark{background:var(--red); border-color:var(--red); color:#fff}
.opt.disabled{cursor:default; pointer-events:none}

.explain{margin-top:13px; padding:14px 17px; background:#1f2616; border-left:4px solid var(--green); border-radius:9px; font-size:14px; display:none; color:var(--ink-soft)}
.explain.show{display:block}
.explain.bad{background:#2a1a16; border-left-color:var(--red)}
.explain b{color:var(--ink)}
.explain code{background:#322a1c; padding:1.5px 5px; border-radius:4px; color:var(--accent)}

.model-answer{padding:16px 18px; background:#241f17; border-left:4px solid var(--accent); border-radius:9px; font-size:14px; margin-top:11px; display:none; color:var(--ink-soft)}
.model-answer.show{display:block}
.model-answer b{color:var(--ink)}
.model-answer code{background:#2c2418; color:var(--accent); padding:1.5px 5px; border-radius:4px; font-family:var(--mono)}

.scorebar{position:fixed; bottom:0; left:var(--sidebar-w); right:0; background:var(--topbar); border-top:1px solid var(--line2); padding:14px 34px; display:flex; justify-content:space-between; align-items:center; gap:16px; z-index:30}
.scorebar .score{font-size:15px; font-weight:600; color:var(--ink)}
.progress{height:9px; background:var(--line); border-radius:20px; overflow:hidden; flex:1; max-width:320px}
.progress .fill{height:100%; background:var(--green); width:0; transition:.3s}

.result-card{background:linear-gradient(135deg,#3a2f1e,#2a2017); border:1px solid var(--line2); color:var(--ink); border-radius:18px; padding:34px; text-align:center; margin-bottom:22px}
.result-card .big{font-size:50px; font-weight:700; color:var(--accent)}
.result-card p{color:var(--ink-soft); margin-top:6px}

@media(max-width:860px){
  .sidebar{position:static; width:100%; height:auto; border-right:none; border-bottom:1px solid var(--line)}
  .main{margin-left:0}
  .scorebar{left:0}
  .content{padding:20px}
}