:root{
  --paper:#f3f1ea; --panel:#fbfaf6; --ink:#1c1c1a; --mute:#6b6a64; --rule:#d6d3c8;
  --ok:#2e6b34; --bad:#a3271d; --warn:#9a6a00; --accent:#1f4e79; --code:#ecebe4; --term:#151515;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace; --sans:"IBM Plex Sans",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#161614; --panel:#1d1d1a; --ink:#e7e5dc; --mute:#9a988e; --rule:#34332e;
  --ok:#6fae6a; --bad:#e0796d; --warn:#d6a640; --accent:#7fb0dd; --code:#262622;
}}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink);font:15px/1.45 var(--sans)}
a{color:var(--accent)}
button{font:500 13px var(--mono);letter-spacing:.02em;background:var(--panel);color:var(--ink);
  border:1px solid var(--ink);padding:6px 12px;cursor:pointer;border-radius:0}
button:hover{background:var(--ink);color:var(--paper)}
button:disabled{opacity:.4;cursor:default;background:var(--panel);color:var(--ink)}
button.primary{background:var(--ink);color:var(--paper)}
select{font:13px var(--mono);background:var(--panel);color:var(--ink);border:1px solid var(--ink);padding:5px;border-radius:0}
pre,code{font-family:var(--mono);font-size:13px}
pre{background:var(--code);padding:10px 12px;overflow:auto;margin:8px 0;border-left:3px solid var(--rule)}

header.top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 16px;
  border-bottom:2px solid var(--ink);background:var(--panel)}
header .brand{font:600 14px var(--mono);letter-spacing:.06em;text-transform:uppercase}
header .brand small{font-weight:400;color:var(--mute);text-transform:none;letter-spacing:0}
header .spacer{flex:1}
.timer{font:600 20px var(--mono);min-width:90px;text-align:right}
.timer.late{color:var(--bad)}
.score{font:600 14px var(--mono)}
.tag{font:12px var(--mono);border:1px solid var(--mute);color:var(--mute);padding:2px 6px}
.tag.exam{border-color:var(--bad);color:var(--bad)}

main.grid{display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:auto 1fr;height:calc(100vh - 56px)}
.items{grid-row:1/3;border-right:1px solid var(--rule);overflow:auto;background:var(--panel)}
.items .intro{padding:12px 14px;font-size:13px;color:var(--mute);border-bottom:1px solid var(--rule)}
.item{display:grid;grid-template-columns:44px 1fr auto;gap:6px;padding:9px 14px;border-bottom:1px solid var(--rule);cursor:pointer}
.item:hover{background:var(--paper)}
.item.sel{background:var(--paper);box-shadow:inset 3px 0 0 var(--ink)}
.item .id{font:600 13px var(--mono)}
.item .pts{font:12px var(--mono);color:var(--mute)}
.item .st{grid-column:2/4;font:12px var(--mono);color:var(--mute)}
.st.ok{color:var(--ok)} .st.bad{color:var(--bad)}

.detail{padding:14px 18px;overflow:auto;border-bottom:1px solid var(--rule);max-height:46vh}
.detail h2{font:600 17px var(--sans);margin:0 0 6px}
.detail .text{max-width:80ch}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.hint{border:1px solid var(--rule);background:var(--panel);padding:8px 12px;margin:8px 0}
.hint h4{margin:0 0 4px;font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--mute)}
.subs{list-style:none;padding:0;margin:8px 0;font-size:14px}
.subs li{padding:3px 0 3px 22px;position:relative}
.subs li::before{position:absolute;left:0;font:600 13px var(--mono)}
.subs li.ok::before{content:"[+]";color:var(--ok)}
.subs li.bad::before{content:"[–]";color:var(--bad)}
.subs .d{color:var(--mute);font:12px var(--mono);display:block}

.terms{display:flex;flex-direction:column;min-height:0}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--ink);flex-wrap:wrap}
.tabs button{border:0;border-right:1px solid var(--rule);padding:6px 12px;background:transparent}
.tabs button.on{background:var(--ink);color:var(--paper)}
.tabs button.scr{font-style:italic}
.tabs .note{margin-left:auto;padding:6px 12px;font:12px var(--mono);color:var(--mute)}
.tabs .oslab{padding:6px 12px;font:12px var(--mono)}
.tabs .oslab button{border:1px solid var(--rule);padding:2px 8px;margin-left:6px}
.termbox{flex:1;position:relative;background:var(--term);min-height:260px}
.termbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:none}
.termbox iframe.on{display:block}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#ddd;font:14px var(--mono);background:rgba(0,0,0,.75);z-index:2}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:9}
.modal .box{background:var(--panel);border:2px solid var(--ink);padding:18px 20px;width:min(520px,calc(100vw - 32px));max-height:85vh;overflow:auto}
.modal h3{margin:0 0 10px;font:600 16px var(--sans)}
.modal label{display:block;margin:8px 0;font-size:14px}

table.feed{width:100%;border-collapse:collapse;font:12.5px var(--mono)}
table.feed td,table.feed th{padding:3px 8px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
table.feed th{position:sticky;top:0;background:var(--panel);font-weight:600}
table.feed tr.fail td.c{color:var(--bad)}
table.feed tr.sys td{color:var(--accent)}
table.feed td.c{white-space:pre-wrap;word-break:break-all}

@media (max-width:820px){
  main.grid{display:block;height:auto}
  .items{max-height:40vh}
  .detail{max-height:none}
  .termbox{height:60vh}
  header.top{gap:8px}
}

/* ---------- режим «Обучение»: уроки ---------- */
body.learn .detail,.detail:has(.lesson){max-height:62vh}
.lesson{border-top:2px solid var(--ink);margin-top:14px;padding-top:6px;max-width:92ch}
.lesson h2{font:600 16px var(--sans);margin:6px 0 4px}
.lesson section{margin:12px 0}
.lesson h3{font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin:0 0 4px}
.lesson p{margin:4px 0}
.lesson .steps{padding-left:20px;margin:4px 0}
.lesson .steps li{margin:0 0 12px}
.lesson .steps pre{margin:6px 0 4px}
.lesson .why{font-size:14px}
.lesson .why span{font:600 12px var(--mono);color:var(--mute)}
.lesson .mist li{margin:3px 0}
.lesson .mist li::marker{color:var(--bad)}
.quiz{border:1px solid var(--rule);background:var(--panel);padding:6px 10px;margin:6px 0}
.quiz summary{cursor:pointer;font-weight:500}
.quiz summary::after{content:"  · показать ответ";font:12px var(--mono);color:var(--mute)}
.quiz[open] summary::after{content:""}
.item.lessonitem .id{font-size:11px;color:var(--accent);text-transform:uppercase}