:root{
  --bg:#f4f6fb; --surface:#ffffff; --surface2:#eef2f8; --text:#16202f; --muted:#5b6678; --border:#d5dce8;
  --accent:#2563eb; --accent-soft:#dbe6ff; --ok:#16a34a; --ok-soft:#dcfce7; --bad:#dc2626; --bad-soft:#fee2e2;
  --warn:#c26a00; --warn-soft:#fff1d6;
  --p1:#c2410c; --p2:#7c3aed; --p3:#0f7f7f;
  --cell:#ffffff; --cell-blank:#f3f5f9;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f1420; --surface:#171e2c; --surface2:#1f2838; --text:#e5eaf3; --muted:#9aa5b8; --border:#2c374b;
    --accent:#5b8cff; --accent-soft:#1d2c52; --ok:#34d27b; --ok-soft:#143322; --bad:#ff6b6b; --bad-soft:#3a1a1d;
    --warn:#ffb340; --warn-soft:#3a2a10;
    --p1:#ff9a5c; --p2:#b597ff; --p3:#3fd0d0;
    --cell:#1c2536; --cell-blank:#151c29;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1420; --surface:#171e2c; --surface2:#1f2838; --text:#e5eaf3; --muted:#9aa5b8; --border:#2c374b;
  --accent:#5b8cff; --accent-soft:#1d2c52; --ok:#34d27b; --ok-soft:#143322; --bad:#ff6b6b; --bad-soft:#3a1a1d;
  --warn:#ffb340; --warn-soft:#3a2a10;
  --p1:#ff9a5c; --p2:#b597ff; --p3:#3fd0d0;
  --cell:#1c2536; --cell-blank:#151c29;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace}
/* шапка */
header.top{display:flex;gap:10px 20px;align-items:center;flex-wrap:wrap;padding:10px 20px;background:var(--surface);border-bottom:1px solid var(--border)}
.brand{display:flex;flex-direction:column}
h1{margin:0;font-size:20px;line-height:1.2}
.brand span{color:var(--muted);font-size:13px}
h3{margin:0 0 8px;font-size:15px}
h4{margin:0 0 6px;font-size:16px}
.hidden{display:none!important}
.grow{flex:1}

.tabs{display:flex;gap:4px;flex-wrap:wrap;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:3px;margin-left:auto}
.tab{border:0;background:transparent;color:var(--muted);padding:7px 14px;border-radius:7px;cursor:pointer;font:600 14px system-ui,sans-serif}
.tab:hover{color:var(--text)}
.tab.on{background:var(--surface);color:var(--accent);box-shadow:0 1px 3px #0002}

/* раскладка: слева «бумага», справа машина */
.layout{display:grid;grid-template-columns:minmax(360px,5fr) minmax(0,7fr);gap:14px;padding:14px 20px;align-items:start}
.paper,.bench{display:flex;flex-direction:column;gap:12px;min-width:0}
@media (min-width:1000px){
  body{height:100vh;display:flex;flex-direction:column;overflow:hidden}
  .layout{flex:1;min-height:0;align-items:stretch}
  .paper{overflow-y:auto;padding-right:4px}
  .bench{min-height:0}
  .info{flex:1;min-height:150px;display:flex;flex-direction:column}
  .info .log-wrap{flex:1;max-height:none;min-height:60px}
}
@media (max-width:999px){.layout{grid-template-columns:1fr}}

.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px}
.panel{display:flex;flex-direction:column;gap:12px}
.slot:empty{display:none}
.row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.row label,.field-label{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:14px}
input[type=text],select{font:inherit;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);color:var(--text)}
input[type=text]:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px}
input.invalid{border-color:var(--bad);background:var(--bad-soft)}
.hint{color:var(--muted);font-size:13px}
.hint.bad{color:var(--bad)}

button.btn{font:inherit;font-weight:600;border:1px solid var(--border);background:var(--surface2);color:var(--text);padding:7px 14px;border-radius:8px;cursor:pointer;white-space:nowrap}
button.btn.small{padding:5px 10px;font-size:13px}
button.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.btn.ghost{background:transparent;font-size:18px;padding:4px 10px}
button.btn:disabled{opacity:.45;cursor:default}
button.btn:not(:disabled):hover{filter:brightness(1.08)}

.picker{display:flex;gap:6px;align-items:center}
.picker label{display:flex;gap:8px;align-items:center;font-weight:600;flex:1;min-width:0}
.picker select{flex:1;min-width:0;font-weight:400}
.picker .hint{white-space:nowrap;margin-left:4px}
.idea{line-height:1.55}

.caption{padding:10px 14px;border-left:4px solid var(--accent);background:var(--accent-soft);border-radius:8px;min-height:46px;line-height:1.5}
.caption.halt{border-color:var(--ok);background:var(--ok-soft)}
.caption.error{border-color:var(--bad);background:var(--bad-soft)}
.caption code,.task code{font-family:ui-monospace,Consolas,monospace;background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:0 5px}

.program{border-top:1px dashed var(--border);padding-top:12px}
.keys{margin-top:8px;font-size:12px;color:var(--muted)}

/* лента */
.tape-viewport{position:relative;height:104px;overflow:hidden;border-radius:8px;background:var(--surface2);user-select:none}
.track{position:absolute;left:0;top:14px;height:90px;will-change:transform}
.cell{position:absolute;top:0;width:46px;height:46px;border:1px solid var(--border);margin-left:-1px;background:var(--cell);
  display:flex;align-items:center;justify-content:center;font:600 20px ui-monospace,Consolas,monospace;cursor:default}
.cell.blank{background:var(--cell-blank);color:var(--muted);font-weight:400;font-size:17px}
.cell .idx{position:absolute;top:-13px;font-size:9px;color:var(--muted);font-weight:400}
.cell.under{outline:3px solid var(--accent);outline-offset:-3px;z-index:1}
.cell.flash{animation:flash .6s ease-out}
@keyframes flash{from{background:var(--warn-soft);color:var(--warn)}}
.editable .cell{cursor:pointer}
.editable .cell:hover{background:var(--accent-soft)}
.head{position:absolute;top:48px;width:46px;margin-left:-1px;display:flex;flex-direction:column;align-items:center;line-height:1;color:var(--accent);pointer-events:none}
.head .arrow{font-size:18px}
.head .hstate{font-weight:700;font-size:15px;margin-top:2px}
.head.halt{color:var(--ok)}
.head.error{color:var(--bad)}
.fade{position:absolute;top:0;bottom:0;width:30px;pointer-events:none}
.fade.left{left:0;background:linear-gradient(90deg,var(--surface2),transparent)}
.fade.right{right:0;background:linear-gradient(-90deg,var(--surface2),transparent)}

.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.speed{display:flex;gap:4px;align-items:center;color:var(--muted);font-size:14px;margin-left:4px}
.speed input{width:90px}
.status{font-weight:600}
.status.halt{color:var(--ok)} .status.error{color:var(--bad)} .status.run{color:var(--accent)}

/* таблица программы */
.table-wrap{overflow-x:auto}
table.prog{border-collapse:collapse;font-family:ui-monospace,Consolas,monospace}
table.prog th,table.prog td{border:1px solid var(--border);padding:0;text-align:center;height:36px;min-width:84px}
table.prog th{background:var(--surface2);font-weight:700;padding:0 10px}
table.prog th.rowh{text-align:left;min-width:0}
table.prog td{padding:0 8px;white-space:nowrap}
table.prog td.empty{background:repeating-linear-gradient(45deg,transparent 0 6px,var(--surface2) 6px 7px)}
table.prog .note{display:block;font:400 11px system-ui,sans-serif;color:var(--muted);max-width:170px;white-space:normal;line-height:1.2;padding-bottom:3px}
table.prog th.hl,table.prog td.hl-row,table.prog td.hl-col{background:var(--accent-soft)}
table.prog td.hl{background:var(--accent);color:#fff;font-weight:700}
table.prog td.hl .w,table.prog td.hl .m,table.prog td.hl .q{color:#fff}
table.prog td.hl.bad{background:var(--bad)}
table.prog .w{color:var(--p1)} table.prog .m{color:var(--p2);font-weight:700} table.prog .q{color:var(--p3)}
table.prog input{width:92px;font:inherit;text-align:center;border:0;background:transparent;color:var(--text);padding:8px 2px}
table.prog input:focus{outline:2px solid var(--accent);border-radius:4px;background:var(--surface)}
table.prog td.err{background:var(--bad-soft)}
table.prog td.hl input{color:#fff}
table.prog.compact th,table.prog.compact td{height:28px;min-width:70px}

.legend{margin-top:10px;font-size:13px;color:var(--muted);line-height:1.6}
.legend i{font-style:normal}
.p1{color:var(--p1)} .p2{color:var(--p2);font-weight:700} .p3{color:var(--p3)}
.cmd-demo{font-family:ui-monospace,Consolas,monospace;background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:0 6px}

/* «что происходит» */
.next{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch;margin-bottom:10px;min-height:58px}
.next .box{border:1px solid var(--border);border-radius:8px;padding:6px 10px;background:var(--surface2);min-width:90px}
.next .box small{display:block;color:var(--muted);font-size:11px}
.next .box b{font-family:ui-monospace,Consolas,monospace;font-size:17px}
.next .arrowsep{align-self:center;color:var(--muted)}
.next .msg{align-self:center;color:var(--muted)}
.stats{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:14px;margin-bottom:10px}
.stats b{font-family:ui-monospace,Consolas,monospace}
.log-wrap{max-height:260px;overflow:auto;border:1px solid var(--border);border-radius:8px}
table.log{border-collapse:collapse;width:100%;font-size:13px}
table.log th{position:sticky;top:0;background:var(--surface2);font:600 12px system-ui,sans-serif;color:var(--muted);text-align:left;padding:4px 8px}
table.log td{padding:3px 8px;border-top:1px solid var(--border)}
table.log tr.last td{background:var(--accent-soft)}
table.log tr.sum td{color:var(--muted);font-style:italic;font-family:system-ui,sans-serif}

/* задачи */
.task{line-height:1.55}
.task h4{margin:0 0 6px;font-size:16px}
.task p{margin:6px 0}
.task .q{font-weight:600}
.task .answer-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.task .answer-row input{width:150px}
.task .answer-row label{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:14px}
.task p:first-of-type{margin-top:0}
.feedback{font-weight:600}
.feedback.ok{color:var(--ok)} .feedback.bad{color:var(--bad)}
.reveal{margin-top:8px;padding:8px 12px;border-radius:8px;background:var(--surface2);border:1px solid var(--border)}
.score{color:var(--muted);font-size:14px}

/* ---------- Школьный режим (?school): полоса с кнопкой «Начать с чистого листа» ---------- */
.school-bar {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  padding: 6px 12px;
  background: #fff4d6;
  color: #5a4300;
  border-bottom: 1px solid #e6c766;
  font-size: 13px;
  line-height: 1.3;
}

.school-reset {
  font: inherit;
  font-weight: 600;
  padding: 4px 12px;
  border: 1px solid #b98a00;
  border-radius: 6px;
  background: #fff;
  color: #5a4300;
  cursor: pointer;
}

.school-reset:hover {
  background: #ffe9a8;
}