:root { --bg:#fafaf8; --fg:#1d1d1f; --mut:#6e6e73; --line:#e3e3e0; --acc:#2f6fdf; --ok:#1f8f4e; --bad:#c9372c; --card:#fff; }
@media (prefers-color-scheme: dark) { :root { --bg:#1b1b1d; --fg:#e8e8ea; --mut:#9a9aa0; --line:#333336; --card:#242427; --acc:#6b9cff; } }
* { box-sizing: border-box; }
body { margin:0; display:flex; height:100vh; font:15px/1.55 -apple-system, "SF Pro Text", system-ui, sans-serif; background:var(--bg); color:var(--fg); }
#side { width:290px; flex:none; border-right:1px solid var(--line); overflow:auto; padding:14px 12px; }
#side h1 { font-size:16px; margin:2px 6px 12px; }
#side a { display:block; padding:6px 8px; border-radius:7px; cursor:pointer; color:var(--fg); text-decoration:none; }
#side a:hover { background:var(--line); }
#side a.on { background:var(--acc); color:#fff; }
#global { margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.tp { display:flex; flex-direction:column; gap:3px; }
.tp .row { display:flex; justify-content:space-between; gap:6px; }
.tp small { color:var(--mut); font-size:12px; }
a.on small { color:#dfe7ff; }
.bar { height:3px; background:var(--line); border-radius:2px; overflow:hidden; }
.bar i { display:block; height:100%; background:var(--ok); }
main { flex:1; overflow:auto; padding:22px 34px 80px; }
.tabs { display:flex; gap:6px; margin:6px 0 18px; border-bottom:1px solid var(--line); }
.tabs button { border:0; background:none; padding:8px 12px; cursor:pointer; color:var(--mut); font:inherit; border-bottom:2px solid transparent; }
.tabs button.on { color:var(--fg); border-bottom-color:var(--acc); }
.md { max-width:880px; }
.md h3 { margin-top:1.6em; }
.md code { background:var(--line); padding:1px 4px; border-radius:4px; font-size:13px; }
.md pre { background:var(--card); border:1px solid var(--line); padding:10px 12px; border-radius:8px; overflow:auto; }
.md pre code { background:none; padding:0; }
.md table { border-collapse:collapse; } .md td, .md th { border:1px solid var(--line); padding:4px 8px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin:12px 0; max-width:880px; }
.card h4 { margin:0 0 8px; color:var(--mut); font-weight:500; font-size:13px; }
.opt { display:block; padding:8px 10px; border:1px solid var(--line); border-radius:8px; margin:6px 0; cursor:pointer; }
.opt:hover { border-color:var(--acc); }
.opt.sel { border-color:var(--acc); background:color-mix(in srgb, var(--acc) 10%, transparent); }
.opt.right { border-color:var(--ok); background:color-mix(in srgb, var(--ok) 12%, transparent); }
.opt.wrong { border-color:var(--bad); background:color-mix(in srgb, var(--bad) 12%, transparent); }
input[type=text], textarea, select { font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); }
input[type=text] { width:340px; } textarea { width:100%; min-height:120px; }
button.b { font:inherit; padding:7px 14px; border-radius:8px; border:1px solid var(--acc); background:var(--acc); color:#fff; cursor:pointer; margin:8px 8px 0 0; }
button.g { background:none; color:var(--acc); }
button.b:disabled { opacity:.5; cursor:wait; }
.res { margin-top:12px; padding:10px 12px; border-radius:8px; }
.res.ok { background:color-mix(in srgb, var(--ok) 12%, transparent); } .res.bad { background:color-mix(in srgb, var(--bad) 12%, transparent); }
.mut { color:var(--mut); font-size:13px; }
.spin::after { content:" ⏳"; }
#explain-btn { position:fixed; background:var(--acc); color:#fff; padding:4px 10px; border-radius:7px; cursor:pointer; font-size:13px; z-index:9; }
#explain { position:fixed; right:18px; top:18px; bottom:18px; width:460px; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 18px; box-shadow:0 8px 30px #0003; z-index:8; }
.stat { display:grid; grid-template-columns: 1fr repeat(4, 90px); gap:4px 12px; max-width:880px; font-size:14px; }
.stat b { font-weight:600; }
details { margin:8px 0; } summary { cursor:pointer; }
.match td { padding:4px 8px; vertical-align:top; }
.opt p, .res p { margin:0; }  #tsel { max-width:520px; }
/* ---- clarity pass ---- */
.side-h, .nav-h { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--mut); margin:6px 8px 4px; }
.tp small { line-height:1.35; }
h2 .badge { font-size:13px; font-weight:500; color:var(--mut); background:var(--line); padding:3px 8px; border-radius:20px; vertical-align:middle; margin-left:8px; }
.hint { max-width:880px; background:color-mix(in srgb, var(--acc) 8%, transparent); border-left:3px solid var(--acc); padding:8px 12px; border-radius:6px; margin:0 0 16px; font-size:14px; }
.tabs button { font-size:15px; }
.steps { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; max-width:1000px; margin:10px 0; }
.step { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:4px; font-size:14px; }
.step span { color:var(--mut); }
.tbl { border-collapse:collapse; max-width:1000px; width:100%; font-size:14px; }
.tbl th { text-align:left; color:var(--mut); font-weight:500; padding:6px 8px; border-bottom:1px solid var(--line); }
.tbl td { padding:6px 8px; border-bottom:1px solid var(--line); }
.tbl tr.go { cursor:pointer; } .tbl tr.go:hover td { background:var(--line); }
.toc { padding:10px 16px; } .toc summary { margin-bottom:6px; }
.nav-i { display:block; padding:3px 6px; border-radius:6px; cursor:pointer; font-size:14px; }
.nav-i:hover { background:var(--line); } .nav-i small { color:var(--mut); margin-left:6px; }
button.small { font-size:13px; padding:4px 10px; margin:-6px 0 10px; }
.lbl { display:block; font-size:13px; font-weight:600; color:var(--mut); margin:14px 0 6px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; max-width:1100px; }
.chips.secs { max-height:260px; overflow:auto; padding:2px; }
.chip { font:inherit; font-size:14px; text-align:left; border:1px solid var(--line); background:var(--card); color:var(--fg); border-radius:9px; padding:6px 10px; cursor:pointer; display:flex; flex-direction:column; gap:2px; max-width:360px; }
.chip small { color:var(--mut); font-size:12px; }
.chip:hover { border-color:var(--acc); }
.chip.on { border-color:var(--acc); background:color-mix(in srgb, var(--acc) 12%, var(--card)); }
.chip .bar { margin-top:3px; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:14px 0 4px; max-width:1100px; }
.actions button.b { margin:0; } .actions .mut { flex-basis:100%; }
.q-h { display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; }
.q-h .mut { white-space:nowrap; }
.how { margin:6px 0; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
a.b { text-decoration:none; display:inline-block; }
.you { border-color:color-mix(in srgb, var(--acc) 40%, var(--line)); }
.big { font-size:17px; } button.big { padding:10px 20px; }
.result ul { margin:6px 0; }
#fpdf { max-width:520px; }
#side a.tp { display:flex; flex-direction:column; gap:2px; margin-bottom:2px; }
.chips.secs { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); max-height:340px; }
.chips.secs .chip { max-width:none; }
.chips.types { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); } .chips.types .chip { max-width:none; }
/* ---- iPad / touch ---- */
body { height:100vh; height:100dvh; -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; }
#menu-btn, #backdrop { display:none; }
.md table { display:block; max-width:100%; overflow-x:auto; }
input[type=text], select { max-width:100%; }
#explain-btn { user-select:none; -webkit-user-select:none; }
@media (max-width: 1366px) {
  #side { width:250px; }
  main { padding:18px 20px 80px 26px; }
  .split { grid-template-columns:minmax(0, 1fr) 250px; gap:20px; }
}
@media (max-width: 1100px) { .split { grid-template-columns:1fr; } }
@media (max-width: 1024px) {
  body { display:block; }
  main { height:100vh; height:100dvh; padding:68px 20px 80px; }
  #side { position:fixed; left:0; top:0; bottom:0; width:min(320px, 85vw); z-index:20; background:var(--bg); transform:translateX(-105%); transition:transform .22s ease; padding-top:calc(14px + env(safe-area-inset-top)); }
  body.side-open #side { transform:none; box-shadow:0 0 40px #0004; }
  body.side-open #backdrop { display:block; position:fixed; inset:0; background:#0004; z-index:19; }
  #menu-btn { display:flex; align-items:center; justify-content:center; position:fixed; left:14px; top:calc(12px + env(safe-area-inset-top)); z-index:18; width:44px; height:44px; font-size:22px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb, var(--card) 92%, transparent); color:var(--fg); box-shadow:0 2px 10px #0002; cursor:pointer; }
  .steps { grid-template-columns:repeat(2, 1fr); }
  #explain { left:12px; right:12px; width:auto; top:calc(12px + env(safe-area-inset-top)); bottom:12px; }
  .snav { max-height:200px; }
}
@media (pointer: coarse) {
  #side a { padding:10px 10px; }
  .sn { padding:10px 10px; }
  .opt { padding:12px 14px; }
  button.b { min-height:44px; padding:10px 16px; }
  .tabs button { padding:12px 14px; }
  .idk { padding:12px 4px; font-size:14px; }
  summary { padding:6px 0; }
  .chip, .pill { padding:10px 12px; }
  input, textarea, select { font-size:16px; }
  button, a, label, summary, .opt, .sn, .chip { touch-action:manipulation; }
}
@media (hover: none) {
  .opt:hover:not(.sel):not(.right):not(.wrong) { border-color:var(--line); }
  #side a:hover:not(.on), .sn:hover:not(.on) { background:none; }
  .chip:hover:not(.on), .pill:hover:not(.on) { border-color:var(--line); }
  .tbl tr.go:hover td { background:none; }
}
.tsec { content-visibility:auto; contain-intrinsic-size:auto 700px; }
.more { margin:4px 0 18px; } .more > button.b { margin:0; } .more-q .card { margin-top:8px; }
.card.q .review { margin:-4px 0 10px; padding:6px 10px; border-radius:8px; font-size:13px; color:var(--fg); background:color-mix(in srgb, #e9a400 16%, transparent); }
/* ---- ПДР ---- */
.qimg { display:block; max-width:100%; height:auto; max-height:420px; object-fit:contain; object-position:left; border-radius:8px; margin:8px 0 10px; border:1px solid var(--line); }
.opt .n { color:var(--mut); margin-right:6px; }
.login { max-width:380px; margin:12vh auto; }
.login input { width:100%; margin:6px 0; }
.login .err { color:var(--bad); min-height:1.4em; }
#me { margin-top:16px; padding-top:10px; border-top:1px solid var(--line); font-size:13px; color:var(--mut); }
#me button { font:inherit; font-size:13px; background:none; border:0; color:var(--acc); cursor:pointer; padding:2px 4px; }
.exam-bar { position:sticky; top:-22px; z-index:5; background:var(--bg); padding:10px 0; display:flex; gap:16px; align-items:center; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:12px; }
.exam-bar .timer { font-size:22px; font-variant-numeric:tabular-nums; font-weight:600; }
.exam-bar .timer.low { color:var(--bad); }
.qnav { display:flex; flex-wrap:wrap; gap:5px; }
.qnav button { width:34px; height:34px; border-radius:7px; border:1px solid var(--line); background:var(--card); color:var(--fg); cursor:pointer; font:inherit; font-size:13px; }
.qnav button.cur { border-color:var(--acc); border-width:2px; }
.qnav button.ok { background:var(--ok); border-color:var(--ok); color:#fff; }
.qnav button.bad { background:var(--bad); border-color:var(--bad); color:#fff; }
.block-h { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--mut); margin:12px 8px 4px; }
.demo { background:color-mix(in srgb, #e9a400 18%, transparent); padding:8px 12px; border-radius:8px; max-width:880px; margin-bottom:12px; font-size:14px; }
.pdr-list a { display:block; padding:6px 8px; border-radius:7px; cursor:pointer; }
.pdr-list a:hover { background:var(--line); }
.pdr-imgs { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin:18px 0 -4px; }
.pdr-imgs .pdr-pic { height:76px; width:auto; }
.pdr-imgs img[src*="/markings/"] { height:96px; border-radius:6px; }
.sign-ico { height:1.7em; width:auto; vertical-align:middle; margin:0 1px; }
.schemes { display:flex; flex-wrap:wrap; gap:14px; margin:10px 0 18px; }
.schemes figure { margin:0; max-width:300px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.schemes img { max-height:130px; width:auto; max-width:100%; }
.schemes img[src*="/reg-"] { max-height:none; width:300px; border-radius:10px; }
.schemes figcaption { font-size:13px; color:var(--mut); line-height:1.35; }
.pdr-bar { position:sticky; top:-22px; margin-top:-22px; padding-top:12px !important; z-index:5; display:flex; gap:8px; align-items:center; padding:8px 0; background:var(--bg); border-bottom:1px solid var(--line, #ddd); }
.pdr-bar select { flex:1; min-width:0; padding:8px; border-radius:8px; font:inherit; }
.pdr-nav { display:flex; justify-content:space-between; gap:10px; margin:24px 0 8px; flex-wrap:wrap; }
.pdr-nav a { cursor:pointer; max-width:48%; }
@media (max-width: 1024px) { .pdr-bar { top:-68px; margin-top:-56px; padding-left:64px; } }
.md img.ind { height:44px; width:auto; vertical-align:middle; margin-right:8px; border-radius:6px; }
.md img.ind-row { display:block; max-width:min(100%, 400px); height:auto; border-radius:8px; margin:10px 0 4px; }
.why-box { margin-top:10px; }
.why-box blockquote { margin:6px 0; padding:8px 12px; border-left:3px solid var(--acc); background:var(--card); border-radius:0 8px 8px 0; }
.why-h { font-weight:600; margin:10px 0 4px; }
.small { font-size:13px; }
.review .rv-item { border-top:1px solid var(--line); padding:14px 0; }
.review .rv-item:first-of-type { border-top:none; }
.rv-ans { padding:6px 10px; border-radius:8px; margin:6px 0; }
.rv-ans.ok { background:color-mix(in srgb, var(--ok) 12%, transparent); } .rv-ans.bad { background:color-mix(in srgb, var(--bad) 12%, transparent); }
.rv-img { max-height:240px; }
.rv-skip summary { cursor:pointer; padding:10px 0; color:var(--acc); }