:root { --bg:#fafaf7; --card:#fff; --ink:#1d2124; --mut:#686c70; --line:#dcd8cc; --tape:#f2b705; --ok:#3f8f5a; --err:#b8382a; --blue:#1f6fd1; }
* { box-sizing:border-box }
[hidden] { display:none !important }
html, body { margin:0 }
body { background:var(--bg); color:var(--ink); font:16px/1.45 "Golos Text", system-ui, -apple-system, sans-serif }
.wrap { max-width:760px; margin:0 auto; padding:16px 16px 60px }
h1 { font-size:26px; margin:4px 0 12px }
h2 { font-size:19px; margin:26px 0 10px }
p { margin:0 }
a { color:var(--blue) }
.mut { color:var(--mut); font-size:14px }
.nav { margin:0 0 6px; font-size:15px }
.list { display:grid; gap:8px; margin-bottom:10px }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px }
a.card { color:inherit; text-decoration:none; display:grid; gap:2px }
a.card:hover { border-color:var(--tape) }
.var { display:grid; gap:4px }
.vlink { color:inherit; text-decoration:none; font-size:17px }
.acts { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:4px }
button, .btn { font:600 14px/1.2 "Golos Text", system-ui, sans-serif; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:9px; padding:8px 12px; min-height:40px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center }
.tape { background:var(--tape); border-color:var(--tape) }
.chk { display:inline-flex; gap:6px; align-items:center; font-size:14px; padding:0 6px; min-height:40px; cursor:pointer }
.chk input { width:20px; height:20px }
.stack { display:grid; gap:10px; margin-bottom:10px; justify-items:start }
.stack > label, .stack > textarea, .stack > p, .stack > pre, .stack > div { justify-self:stretch }
details.card summary { font-weight:600; cursor:pointer }
details.card[open] summary { margin-bottom:10px }
label { display:grid; gap:4px; font-size:14px; color:var(--mut) }
input, textarea { font:16px/1.4 "Golos Text", system-ui, sans-serif; border:1px solid var(--line); border-radius:9px; padding:9px 11px; background:#fff; color:var(--ink); width:100% }
input:focus, textarea:focus { outline:2px solid var(--tape); border-color:var(--tape) }
.inl { display:flex; gap:6px } .inl input { flex:1 }
.vhod { display:grid; gap:12px; max-width:360px }
.err { color:var(--err) } .ok { color:var(--ok); font-weight:600 }
.badge { background:var(--tape); color:var(--ink); border-radius:999px; padding:0 8px; font-weight:600 }
.warn { border-color:var(--tape) }
.pz p { margin:4px 0 }
.pz.done p { color:var(--mut) }
.mono, pre { font-family:"JetBrains Mono", ui-monospace, monospace }
pre { white-space:pre-wrap; background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:10px; margin:8px 0; font-size:14px }
.msg { position:sticky; top:0; z-index:5; background:#fdeceb; color:var(--err); border:1px solid var(--err); border-radius:10px; padding:10px 12px; margin-bottom:10px }
button:focus-visible, a:focus-visible { outline:3px solid var(--tape); outline-offset:1px }
.vhod-diz { margin-top:14px }
.kom { border-left:3px solid var(--tape); padding:2px 0 2px 10px; margin:4px 0 0; display:grid; gap:2px }
.kom.zak { border-left-color:var(--blue) }
.kom p { white-space:normal }
.kom-new, .kom-ed { justify-self:start; min-height:32px; padding:4px 10px; font-weight:500; color:var(--blue) }
.komf { margin:6px 0 0 }
.komr { margin:2px 0 }
.komr summary { cursor:pointer; font-weight:600; padding:3px 0; min-height:28px }
.komr p { margin:2px 0 6px 14px }