/* ===========================================================================
   OptiLab stylesheet
   =========================================================================*/

:root{
  --bg:#0e1117; --bg2:#151b24; --bg3:#1c242f; --line:#2a3441;
  --fg:#e6edf3; --fg2:#9fb0c3; --fg3:#6d7f93;
  --accent:#4dd0c1; --accent2:#7aa2ff; --amber:#f0b429; --red:#ff6b6b; --green:#4ade80;
  --code-bg:#0b1017;
  --radius:12px;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
}
html[data-theme="light"]{
  --bg:#f7f8fa; --bg2:#ffffff; --bg3:#eef1f5; --line:#dde3ea;
  --fg:#17212b; --fg2:#4c5c6d; --fg3:#7b8b9c;
  --accent:#0d9488; --accent2:#3b62d9; --amber:#b45309; --red:#dc2626; --green:#15803d;
  --code-bg:#f2f5f8;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--fg); font-family:var(--sans);
  font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
}
a{color:var(--accent2)}
kbd{
  font-family:var(--mono); font-size:.78em; background:var(--bg3);
  border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:1px 5px;
}

/* ---------- top bar ---------- */
#topbar{
  display:flex; align-items:center; gap:24px; padding:10px 18px;
  background:var(--bg2); border-bottom:1px solid var(--line); flex:0 0 auto; z-index:20;
}
.brand{display:flex; align-items:center; gap:10px}
.logo{font-size:26px; line-height:1}
.brand-name{font-weight:700; font-size:17px; letter-spacing:.4px}
.brand-sub{font-size:11px; color:var(--fg3); letter-spacing:.3px}
.modes{display:flex; gap:6px; margin-left:auto}
.mode-btn{
  background:transparent; border:1px solid transparent; color:var(--fg2);
  padding:7px 14px; border-radius:999px; cursor:pointer; font-size:13.5px;
  font-family:inherit; transition:.15s;
}
.mode-btn:hover{color:var(--fg); background:var(--bg3)}
.mode-btn.active{background:var(--accent); color:#06231f; font-weight:600}
html[data-theme="light"] .mode-btn.active{color:#fff}
.top-right{display:flex; align-items:center; gap:12px; margin-left:auto}
.icon-btn{
  background:var(--bg3); border:1px solid var(--line); color:var(--fg2);
  width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:15px;
}
.py-status{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--fg2);
  background:var(--bg3); border:1px solid var(--line); padding:5px 11px; border-radius:999px}
.py-status .dot{width:8px;height:8px;border-radius:50%;background:var(--amber)}
.py-status.ready .dot{background:var(--green)}
.py-status.error .dot{background:var(--red)}
.py-status.booting .dot{animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}

/* ---------- layout ---------- */
#shell{display:flex; flex:1 1 auto; min-height:0}
#sidebar{
  width:270px; flex:0 0 270px; background:var(--bg2); border-right:1px solid var(--line);
  display:flex; flex-direction:column; overflow-y:auto;
}
.side-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 18px 8px; font-size:11px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--fg3); font-weight:700;
}
.pill{background:var(--bg3); color:var(--accent); border-radius:999px;
  padding:2px 9px; font-size:11px; letter-spacing:0}
#module-list{list-style:none; margin:0; padding:0 10px 10px}
#module-list li{
  display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border-radius:9px;
  cursor:pointer; color:var(--fg2); font-size:13.5px; line-height:1.4; transition:.12s;
}
#module-list li:hover{background:var(--bg3); color:var(--fg)}
#module-list li.active{background:var(--bg3); color:var(--fg); box-shadow:inset 3px 0 0 var(--accent)}
#module-list li.done .num{background:var(--green); color:#04220f; border-color:var(--green)}
.num{
  flex:0 0 22px; width:22px; height:22px; border-radius:6px; border:1px solid var(--line);
  display:grid; place-items:center; font-size:11px; font-weight:700;
  background:var(--bg); color:var(--fg3); margin-top:1px;
}
#module-list li.active .num{border-color:var(--accent); color:var(--accent)}
.mod-tag{display:block; font-size:10.5px; color:var(--fg3); letter-spacing:.4px; text-transform:uppercase}
.side-foot{margin-top:auto; padding:14px 18px; border-top:1px solid var(--line)}
.ghost-btn{
  background:transparent; border:1px solid var(--line); color:var(--fg3);
  padding:5px 10px; border-radius:7px; font-size:12px; cursor:pointer; font-family:inherit;
}
.ghost-btn:hover{color:var(--red); border-color:var(--red)}
.version{font-size:10.5px; color:var(--fg3); margin-top:9px; line-height:1.5}

#main{flex:1 1 auto; overflow-y:auto; min-width:0}
.view{display:none}
.view.active{display:block}
.page{max-width:920px; margin:0 auto; padding:34px 40px 90px}

/* ---------- typography ---------- */
h1{font-size:29px; line-height:1.25; margin:0 0 6px; letter-spacing:-.4px}
h2{font-size:20px; margin:38px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--line)}
h3{font-size:15.5px; margin:22px 0 8px; color:var(--accent)}
p{margin:11px 0}
.lede{color:var(--fg2); font-size:16px}
.eyebrow{font-size:11.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--accent); font-weight:700}
code{font-family:var(--mono); font-size:.87em; background:var(--bg3);
  padding:1.5px 5px; border-radius:5px; color:var(--accent)}
h3 code{background:none; padding:0}
ul,ol{padding-left:22px}
li{margin:5px 0}
ul.tight li{margin:2px 0}
blockquote{margin:14px 0; padding:2px 16px; border-left:3px solid var(--accent2); color:var(--fg2)}
hr{border:0; border-top:1px solid var(--line); margin:30px 0}
table.data{border-collapse:collapse; width:100%; font-size:13.5px; margin:14px 0}
table.data th,table.data td{border:1px solid var(--line); padding:7px 10px; text-align:left}
table.data th{background:var(--bg3); font-weight:600}

/* math block */
.math{
  font-family:var(--serif); font-size:16.5px; text-align:center;
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 20px; margin:16px 0; overflow-x:auto; line-height:1.9;
}
.math .lbl{float:right; color:var(--fg3); font-size:12px; font-family:var(--sans)}
sub,sup{font-size:.72em}

/* cards / callouts */
.card{background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 20px; margin:16px 0}
.card h3{margin-top:0}
.note{border-left:4px solid var(--accent2)}
.warn{border-left:4px solid var(--amber)}
.key{border-left:4px solid var(--accent)}
.callout-title{font-weight:700; font-size:13px; letter-spacing:.6px; text-transform:uppercase;
  color:var(--fg3); margin-bottom:6px}

/* steps */
ol.steps{counter-reset:s; list-style:none; padding-left:0}
ol.steps>li{counter-increment:s; position:relative; padding:8px 0 8px 40px; border-bottom:1px dashed var(--line)}
ol.steps>li:last-child{border-bottom:0}
ol.steps>li::before{
  content:counter(s); position:absolute; left:0; top:8px; width:26px; height:26px;
  border-radius:50%; background:var(--accent2); color:#fff; display:grid; place-items:center;
  font-size:12px; font-weight:700;
}

/* chips */
.chip-row{display:flex; flex-wrap:wrap; gap:8px}
.chip{background:var(--bg3); border:1px solid var(--line); color:var(--fg2);
  border-radius:999px; padding:5px 13px; font-size:12.5px; cursor:pointer; font-family:inherit}
.chip:hover{border-color:var(--accent); color:var(--accent)}

/* ---------- code cell ---------- */
.cell{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  margin:18px 0; background:var(--code-bg)}
.cell-head{display:flex; align-items:center; gap:10px; padding:8px 12px;
  background:var(--bg2); border-bottom:1px solid var(--line); font-size:12px; color:var(--fg3)}
.cell-title{font-weight:600; color:var(--fg2)}
.cell-actions{margin-left:auto; display:flex; gap:6px}
.run-btn{background:var(--accent); color:#06231f; border:0; border-radius:7px;
  padding:5px 14px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit}
html[data-theme="light"] .run-btn{color:#fff}
.run-btn:disabled{opacity:.45; cursor:progress}
.mini-btn{background:var(--bg3); border:1px solid var(--line); color:var(--fg2);
  border-radius:7px; padding:5px 10px; font-size:12px; cursor:pointer; font-family:inherit}
.mini-btn:hover{color:var(--fg); border-color:var(--fg3)}

.editor-wrap{position:relative}
.editor-wrap pre.hl, .editor-wrap textarea{
  margin:0; padding:14px 16px; font-family:var(--mono); font-size:13px; line-height:1.6;
  white-space:pre; word-wrap:normal; tab-size:4; border:0; overflow:auto;
}
.editor-wrap pre.hl{
  position:absolute; inset:0; pointer-events:none; color:var(--fg);
  background:var(--code-bg); overflow:hidden;
}
.editor-wrap textarea{
  position:relative; display:block; width:100%; background:transparent;
  color:transparent; caret-color:var(--accent); resize:vertical; outline:none;
  min-height:80px;
}
.editor-wrap textarea::selection{background:rgba(122,162,255,.32)}
/* python highlight tokens */
.t-kw{color:#ff7bd0} .t-str{color:#a5e075} .t-num{color:#f0b429}
.t-com{color:var(--fg3); font-style:italic} .t-fn{color:#7aa2ff} .t-bi{color:#4dd0c1}
html[data-theme="light"] .t-kw{color:#a626a4} html[data-theme="light"] .t-str{color:#177d3a}
html[data-theme="light"] .t-fn{color:#2557c7} html[data-theme="light"] .t-bi{color:#0b7a70}

.cell-out{border-top:1px solid var(--line); background:var(--bg2); display:none}
.cell-out.show{display:block}
.cell-out pre{margin:0; padding:12px 16px; font-family:var(--mono); font-size:12.5px;
  line-height:1.55; white-space:pre-wrap; word-break:break-word; color:var(--fg2)}
.cell-out pre.err{color:var(--red)}
.cell-out img{display:block; max-width:100%; margin:0 auto; padding:12px; background:#fff}

/* ---------- exercises ---------- */
.exercise{background:var(--bg2); border:1px solid var(--line); border-left:4px solid var(--amber);
  border-radius:var(--radius); padding:14px 18px; margin:14px 0}
.exercise .callout-title{color:var(--amber)}
details.reveal{margin-top:8px}
details.reveal summary{cursor:pointer; color:var(--accent2); font-size:13px; user-select:none}
details.reveal[open] summary{margin-bottom:8px}

/* ---------- module footer ---------- */
.mod-foot{display:flex; align-items:center; gap:12px; margin-top:44px;
  padding-top:20px; border-top:1px solid var(--line)}
.mod-foot .spacer{flex:1}
.primary-btn{background:var(--accent2); color:#fff; border:0; border-radius:9px;
  padding:10px 20px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit}
.primary-btn:hover{filter:brightness(1.1)}
.primary-btn.wide{width:100%}
.primary-btn:disabled{opacity:.45; cursor:not-allowed}
.danger-btn{background:var(--red); color:#fff; border:0; border-radius:9px;
  padding:10px 20px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit}

/* ---------- exam ---------- */
.login-card{max-width:480px; margin:8vh auto; background:var(--bg2); border:1px solid var(--line);
  border-radius:16px; padding:32px}
.login-card h2{margin-top:0; border:0}
.field{margin:14px 0}
.field label{display:block; font-size:12.5px; color:var(--fg2); margin-bottom:5px; font-weight:600}
.field input,.field select,.field textarea{
  width:100%; background:var(--bg); border:1px solid var(--line); color:var(--fg);
  border-radius:9px; padding:10px 12px; font-size:14px; font-family:inherit; outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field textarea{font-family:var(--mono); font-size:13px; min-height:110px; resize:vertical}
.err-msg{color:var(--red); font-size:13px; margin-top:10px; min-height:18px}
.ok-msg{color:var(--green); font-size:13px; margin-top:10px}

#exam-bar{position:sticky; top:0; z-index:15; display:flex; align-items:center; gap:16px;
  background:var(--bg2); border-bottom:1px solid var(--line); padding:10px 18px; font-size:13px}
#timer{font-family:var(--mono); font-size:19px; font-weight:700; color:var(--accent)}
#timer.warn{color:var(--amber)} #timer.crit{color:var(--red); animation:pulse 1s infinite}
.qnav{display:flex; flex-wrap:wrap; gap:4px; margin:16px 0 26px}
.qnav button{width:30px; height:30px; border-radius:7px; border:1px solid var(--line);
  background:var(--bg2); color:var(--fg3); font-size:11.5px; cursor:pointer; font-family:inherit}
.qnav button.answered{background:var(--accent); color:#06231f; border-color:var(--accent); font-weight:700}
html[data-theme="light"] .qnav button.answered{color:#fff}
.qnav button.flag{border-color:var(--amber); color:var(--amber)}
.qnav button.cur{outline:2px solid var(--accent2); outline-offset:1px}

.qcard{background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 24px; margin:14px 0}
.qmeta{display:flex; gap:8px; align-items:center; font-size:11px; color:var(--fg3);
  text-transform:uppercase; letter-spacing:1px; margin-bottom:10px}
.badge{background:var(--bg3); border:1px solid var(--line); border-radius:999px; padding:2px 9px}
.qstem{font-size:15.5px; margin-bottom:14px}
.qstem pre{background:var(--code-bg); border:1px solid var(--line); border-radius:9px;
  padding:12px 14px; font-family:var(--mono); font-size:12.5px; overflow-x:auto; white-space:pre}
.opt{display:flex; gap:10px; align-items:flex-start; padding:9px 12px; margin:6px 0;
  border:1px solid var(--line); border-radius:9px; cursor:pointer; background:var(--bg)}
.opt:hover{border-color:var(--accent)}
.opt.sel{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent)}
.opt input{margin-top:3px; accent-color:var(--accent)}
.opt.correct{border-color:var(--green); background:color-mix(in srgb,var(--green) 14%,transparent)}
.opt.wrong{border-color:var(--red); background:color-mix(in srgb,var(--red) 14%,transparent)}
.explain{margin-top:12px; padding:11px 14px; border-radius:9px; background:var(--bg3);
  font-size:13.5px; color:var(--fg2); border-left:3px solid var(--accent2)}
.score-hero{text-align:center; padding:36px 0}
.score-hero .big{font-size:58px; font-weight:800; color:var(--accent); line-height:1}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}

/* toast */
#toast{position:fixed; bottom:22px; left:50%; transform:translate(-50%,90px);
  background:var(--bg3); border:1px solid var(--line); color:var(--fg);
  padding:11px 20px; border-radius:999px; font-size:13.5px; z-index:100;
  transition:transform .25s; box-shadow:0 8px 30px rgba(0,0,0,.35)}
#toast.show{transform:translate(-50%,0)}

/* responsive */
@media (max-width:880px){
  #sidebar{display:none}
  .page{padding:22px 18px 70px}
  .modes{gap:2px} .mode-btn{padding:6px 9px; font-size:12px}
  .brand-sub{display:none} .grid2{grid-template-columns:1fr}
}
@media print{
  #topbar,#sidebar,#exam-bar,.qnav{display:none}
  body{background:#fff;color:#000}
}