:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: рабочее место аналитика - слева дело (главы), в центре допросная (задание + редактор + результаты как в SSMS), справа схема базы. Полицейская лента под шапкой. */
:root {
  --bg: #E9EDF2; --surface: #FFFFFF; --surface-2: #F4F6F9; --ink: #18202B; --muted: #5B6676; --line: #D3DAE3;
  --accent: #2347C7; --accent-soft: #E3E9FB; --tape: #F2C230; --tape-ink: #17191D; --evidence: #B8322A; --evidence-soft: #FBEAE8;
  --ok: #1D7A4C; --ok-soft: #E2F3EA; --null-bg: #FFF6D6;
  --code-bg: #F7F9FC; --k-kw: #2347C7; --k-str: #B5452B; --k-num: #8A5A00; --k-cm: #7C8796; --k-fn: #7A3DB8;
  --f-display: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --f-body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;
  --r: 6px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0D1218; --surface: #141B24; --surface-2: #1A2330; --ink: #E3E8EF; --muted: #8C98A9; --line: #263241;
  --accent: #88A7FF; --accent-soft: #1C2A4A; --tape: #E8BD2A; --tape-ink: #111317; --evidence: #FF8073; --evidence-soft: #3A1B19;
  --ok: #52C48D; --ok-soft: #14301F; --null-bg: #3A3216;
  --code-bg: #0F151D; --k-kw: #88A7FF; --k-str: #F09A7C; --k-num: #E5C26B; --k-cm: #6B7788; --k-fn: #C79BFF; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0D1218; --surface: #141B24; --surface-2: #1A2330; --ink: #E3E8EF; --muted: #8C98A9; --line: #263241;
  --accent: #88A7FF; --accent-soft: #1C2A4A; --tape: #E8BD2A; --tape-ink: #111317; --evidence: #FF8073; --evidence-soft: #3A1B19;
  --ok: #52C48D; --ok-soft: #14301F; --null-bg: #3A3216;
  --code-bg: #0F151D; --k-kw: #88A7FF; --k-str: #F09A7C; --k-num: #E5C26B; --k-cm: #6B7788; --k-fn: #C79BFF; color-scheme: dark; }

* { box-sizing: border-box; }
/* min-height, а не height: иначе body = высота окна, и липкая шапка уезжает, когда страница длиннее экрана */
html, body { min-height: 100%; }
body { background: var(--bg); color: var(--ink); font: 15px/1.55 var(--f-body); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--surface); }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
code { font-family: var(--f-mono); font-size: .86em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 .3em; }
/* JetBrains Mono склеивает <> != >= <= в один значок (лигатура) - новичку не видно, что это два символа. Отключаем везде. */
html, body, code, pre, textarea, input, select, button, table, .ed, .ac, .msgs { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
h1, h2, h3 { text-wrap: balance; }

/* ---------- шапка ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 16px; padding-block: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); flex-wrap: wrap; }
.brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.brand b { font: 600 22px/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; }
.brand span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.rank { display: flex; align-items: center; gap: 12px; margin-left: auto; min-width: 0; }
.rank-txt { text-align: right; line-height: 1.2; }
.rank-txt .r1 { font: 500 15px var(--f-display); letter-spacing: .03em; text-transform: uppercase; }
.rank-txt .r2 { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.xpbar { width: 140px; height: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.xpbar i { display: block; height: 100%; width: 0; background: var(--tape); transition: width .5s; }
.tools { display: flex; gap: 6px; }
.tbtn { border: 1px solid var(--line); background: var(--surface-2); padding: 6px 10px; border-radius: var(--r); font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
.tbtn:hover { border-color: var(--accent); }
.tbtn .cnt { background: var(--evidence); color: #fff; border-radius: 99px; font-size: 11px; padding: 0 6px; font-weight: 600; }
.tape { height: 10px; background: repeating-linear-gradient(-45deg, var(--tape) 0 14px, var(--tape-ink) 14px 28px); }

/* ---------- раскладка ---------- */
.app { display: grid; grid-template-columns: 270px minmax(0, 1fr) 270px; gap: 0; min-height: calc(100vh - 60px); }
.side { border-right: 1px solid var(--line); background: var(--surface); padding: 14px 0 40px; overflow: auto; max-height: calc(100vh - 70px); position: sticky; top: 70px; }
.schema { border-left: 1px solid var(--line); border-right: 0; }
.main { min-width: 0; padding-block: 20px 60px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.main-in { max-width: 920px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

/* ---------- главы ---------- */
.sb-h { font: 500 12px var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 0 16px 8px; }
.sandbox-btn { margin: 0 12px 14px; width: calc(100% - 24px); text-align: left; border: 1px dashed var(--line); background: transparent; border-radius: var(--r); padding: 8px 10px; font-size: 14px; }
.sandbox-btn.on { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.chap { border-top: 1px solid var(--line); }
.chap > button { width: 100%; display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; text-align: left; background: none; border: 0; padding: 10px 14px; }
.chap .num { font: 600 18px var(--f-display); color: var(--muted); }
.chap.done .num { color: var(--ok); }
.chap .ct { font-weight: 600; font-size: 14px; line-height: 1.25; }
.chap .cs { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.chap .cp { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chap ol { list-style: none; margin: 0; padding: 0 0 8px; }
.chap li button { width: 100%; text-align: left; border: 0; background: none; padding: 5px 14px 5px 52px; font-size: 13.5px; display: flex; gap: 8px; align-items: center; color: var(--ink); position: relative; }
.chap li button::before { content: ""; position: absolute; left: 34px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border: 1.5px solid var(--muted); border-radius: 50%; }
.chap li.solved button::before { background: var(--ok); border-color: var(--ok); }
.chap li.locked button { color: var(--muted); cursor: not-allowed; }
.chap li.locked button::before { border-style: dotted; }
.chap li.cur button { background: var(--accent-soft); font-weight: 600; }
.chap li button:hover:not(:disabled) { background: var(--surface-2); }
.unlock { margin: 14px 16px 0; font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; }

/* ---------- карточка задания ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.intro { padding: 16px 20px; border-left: 4px solid var(--tape); background: var(--surface); border-radius: 0 10px 10px 0; border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.intro .ih { font: 500 12px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.intro p { margin: 0; max-width: 68ch; }
.task { padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.eyebrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-family: var(--f-display); }
.stamp { border: 1.5px solid var(--evidence); color: var(--evidence); padding: 1px 7px; border-radius: 3px; transform: rotate(-2deg); display: inline-block; }
.task h2 { font: 600 30px/1.1 var(--f-display); margin: 0; letter-spacing: .01em; }
.story { margin: 0; font-style: italic; color: var(--muted); max-width: 68ch; }
.story b { font-style: normal; color: var(--ink); font-weight: 600; }
details.theory { border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
details.theory summary { cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: 14px; list-style: none; display: flex; justify-content: space-between; }
details.theory summary::-webkit-details-marker { display: none; }
details.theory summary::after { content: "▾"; color: var(--muted); }
details.theory[open] summary::after { content: "▴"; }
.th-body { padding: 2px 18px 18px; line-height: 1.7; }
.th-body p, .th-body ul, .th-body ol { margin: .85em 0; }
.th-body li { margin: .35em 0; }
.th-body .note { font-size: 14px; line-height: 1.65; color: var(--muted); border-left: 3px solid var(--line); padding: 2px 0 2px 12px; margin: 1em 0; }
.th-body h4.th-s { font: 600 16px/1.4 var(--f-body); margin: 1.8em 0 .5em; padding-top: 1.2em; border-top: 1px solid var(--line); }
.th-body .exwrap { margin: 1em 0; }
/* пример кода: рамка на всю ширину, сверху полоска «Пример» - кнопка живёт в ней, код не закрывает */
.exwrap { display: grid; grid-template-columns: minmax(0, 1fr); margin: .6em 0; border: 1px solid var(--line); border-radius: 6px; background: var(--code-bg); overflow: hidden; }
.exwrap::before { content: "Пример"; grid-area: 1 / 1; padding: 6px 12px; font: 500 11px/1.4 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); }
:lang(en) .exwrap::before { content: "Example"; }
.exwrap pre { grid-area: 2 / 1; margin: 0; border: 0; border-radius: 0; background: none; padding: 10px 12px; overflow-x: auto; font: 13px/1.55 var(--f-mono); min-width: 0; }
.exwrap button { grid-area: 1 / 1; justify-self: end; align-self: center; margin-right: 6px; border: 0; background: none; color: var(--muted); font-size: 12.5px; font-weight: 500; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.exwrap button:hover { color: var(--ink); background: var(--surface); }
.goal { border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 12px 14px; }
.goal .gh { font: 500 12px var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
/* «Закрепить»: мини-задачи внутри урока - одна строка кружков, задача показывается по одной */
.prac { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: -4px; }
.prac-h { font: 500 12px var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.pdot { min-width: 30px; height: 30px; padding: 0 9px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--muted); }
.pdot:hover { border-color: var(--accent); color: var(--ink); }
.pdot.ok { color: var(--ok); border-color: var(--ok); }
.pdot.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pdot.ok.on { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.prac-c { font-size: 12.5px; color: var(--muted); margin-left: 4px; }
.goal .why { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.goal .new { margin: 2px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 14px; }
.goal ol { margin: .4em 0 0; padding-left: 1.3em; }
.ssms { font-size: 13.5px; color: var(--muted); display: flex; gap: 10px; }
.ssms b.tag { flex: none; font: 500 11px var(--f-display); letter-spacing: .1em; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; height: fit-content; margin-top: 2px; }

/* ---------- редактор ---------- */
.editor-card { overflow: visible; }
.editor-card .ed-bar { border-radius: 10px 10px 0 0; }
.ed-bar { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--surface-2); flex-wrap: wrap; }
.ed-bar .fname { font: 12px var(--f-mono); color: var(--muted); margin-right: auto; }
.btn { border: 1px solid var(--line); background: var(--surface); padding: 7px 12px; border-radius: var(--r); font-size: 13.5px; font-weight: 500; }
.btn:hover { border-color: var(--accent); }
.btn.run { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 600; }
.btn.run:hover { filter: brightness(1.08); }
:root[data-theme="dark"] .btn.run { color: #0B1A12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.run { color: #0B1A12; } }
.btn:disabled { opacity: .5; cursor: default; }
.ed { position: relative; font: 14px/1.6 var(--f-mono); background: var(--code-bg); }
.ed pre, .ed textarea { margin: 0; padding: 14px 16px; font: inherit; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; tab-size: 4; border: 0; min-height: 170px; }
.ed pre { position: absolute; inset: 0; pointer-events: none; color: var(--ink); overflow: hidden; }
.ed textarea { position: relative; width: 100%; display: block; resize: vertical; background: transparent; color: transparent; caret-color: var(--ink); outline: none; }
.ed textarea::selection { background: rgba(120, 150, 255, .3); color: transparent; }
.ac { position: absolute; z-index: 15; min-width: 260px; max-width: min(460px, calc(100% - 8px)); max-height: 260px; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.18); font: 13px/1.3 var(--f-mono); padding: 3px; }
.ac-it { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 5px 8px; border-radius: 4px; cursor: pointer; }
.ac-it.on { background: var(--accent-soft); }
.ac-t { font-weight: 600; color: var(--ink); }
.ac-k { font: 11px var(--f-body); color: var(--muted); align-self: center; }
.ac-n { grid-column: 1 / -1; font: 11.5px var(--f-body); color: var(--muted); }
.ac-it:not(.on) .ac-n { display: none; }
.ac-help { font-size: 12px; color: var(--muted); padding: 6px 12px; border-top: 1px solid var(--line); background: var(--surface-2); }
.hl-kw { color: var(--k-kw); font-weight: 600; } .hl-fn { color: var(--k-fn); } .hl-str { color: var(--k-str); } .hl-num { color: var(--k-num); } .hl-cm { color: var(--k-cm); font-style: italic; }

/* ---------- результаты ---------- */
.res-tabs { display: flex; border-top: 1px solid var(--line); background: var(--surface-2); }
.res-tabs button { border: 0; background: none; padding: 8px 14px; font-size: 13px; border-bottom: 2px solid transparent; color: var(--muted); }
.res-tabs button.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.res-body { padding: 10px; min-height: 60px; display: grid; gap: 10px; }
.grid-wrap { overflow: auto; max-height: 360px; border: 1px solid var(--line); border-radius: 4px; }
table.grid { border-collapse: collapse; font: 12.5px/1.4 var(--f-mono); width: max-content; min-width: 100%; font-variant-numeric: tabular-nums; }
table.grid th, table.grid td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px 10px; text-align: left; white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
table.grid th { position: sticky; top: 0; background: var(--surface-2); font-weight: 600; font-family: var(--f-body); font-size: 12.5px; }
table.grid td.rn, table.grid th.rn { color: var(--muted); background: var(--surface-2); text-align: left; width: 1%; }
table.grid td.null { background: var(--null-bg); color: var(--muted); }
table.grid td.n { text-align: left; }
.msgs { font: 12.5px/1.6 var(--f-mono); white-space: pre-wrap; margin: 0; }
.msgs .err { color: var(--evidence); }
.empty { color: var(--muted); font-size: 13.5px; padding: 8px 4px; }
.more { font-size: 12px; color: var(--muted); }

/* ---------- вердикт ---------- */
.verdict { border-radius: 10px; padding: 14px 18px; display: grid; gap: 8px; }
.verdict.ok { background: var(--ok-soft); border: 1px solid var(--ok); }
.verdict.bad { background: var(--evidence-soft); border: 1px solid var(--evidence); }
.verdict .vh { font: 600 20px var(--f-display); letter-spacing: .02em; }
.verdict.ok .vh { color: var(--ok); } .verdict.bad .vh { color: var(--evidence); }
#main .verdict.ok .row .btn.run:first-child::after { content: "Ctrl+Space"; margin-left: 10px; font: 600 11px var(--f-mono); border: 1px solid currentColor; border-radius: 4px; padding: 0 5px; opacity: .8; }
.verdict .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hintbox { border: 1px dashed var(--tape); background: var(--surface); border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.hintbox code, .solbox pre { white-space: pre-wrap; }
.solbox pre { margin: 6px 0 0; background: var(--code-bg); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; font: 13px/1.55 var(--f-mono); overflow-x: auto; }

/* ---------- улики ---------- */
.clue { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.clue .tagn { font: 600 12px var(--f-display); letter-spacing: .08em; color: var(--evidence); border: 1.5px solid var(--evidence); border-radius: 3px; padding: 2px 6px; white-space: nowrap; }
.clue.locked { color: var(--muted); border-style: dashed; }
.clue.locked .tagn { border-color: var(--line); color: var(--muted); }

/* ---------- схема ---------- */
.tbl { border-top: 1px solid var(--line); padding: 8px 0; }
.tbl-h { display: flex; align-items: center; gap: 6px; padding: 2px 10px 2px 14px; }
.tbl-h button.tn { border: 0; background: none; font: 600 13.5px var(--f-mono); padding: 2px 0; color: var(--accent); }
.tbl-h .tt { font-size: 12px; color: var(--muted); margin-right: auto; }
.tbl-h .peek { border: 1px solid var(--line); background: var(--surface-2); font-size: 11px; border-radius: 4px; padding: 1px 6px; }
.cols { list-style: none; margin: 4px 10px 0 18px; padding: 0; }
.cols li + li { border-top: 1px solid var(--line); }
.cols li button { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 0 6px; border: 0; background: none; text-align: left; padding: 5px 4px 6px 6px; font: 600 12.5px/1.35 var(--f-mono); border-radius: 4px; }
.cols li button:hover { background: var(--surface-2); }
.cols .ty { color: var(--muted); font-size: 10.5px; font-weight: 400; align-self: center; }
.cols .nt { grid-column: 1 / -1; color: var(--ink); opacity: .72; font: 12px/1.35 var(--f-body); margin-top: 1px; }
.schema-legend { margin: -2px 16px 6px; font-size: 11.5px; line-height: 1.4; color: var(--muted); }

/* ---------- модальные окна ---------- */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(8, 12, 18, .55); display: grid; place-items: center; padding: 16px; }
.modal-in { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; width: min(720px, 100%); max-height: 86vh; overflow: auto; padding: 20px 22px; display: grid; gap: 12px; }
.modal-in h3 { font: 600 24px var(--f-display); margin: 0; letter-spacing: .02em; }
.modal-x { justify-self: end; }
.final { text-align: center; }
.final .big { font: 600 44px/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; }
.loading { padding: 40px; text-align: center; color: var(--muted); }
.mob-only { display: none; }
.cheat table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.cheat td { border-bottom: 1px solid var(--line); padding: 6px 8px; vertical-align: top; }
.cheat td:first-child { white-space: nowrap; font-family: var(--f-mono); font-size: 12.5px; }


/* ---------- чат ---------- */
.ask-fab { position: fixed; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 35; border: 0; background: var(--tape); color: var(--tape-ink); font: 600 15px var(--f-display); letter-spacing: .04em; text-transform: uppercase; padding: 12px 18px; border-radius: 99px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.ask-fab:hover { filter: brightness(1.05); }
body.chat-open .ask-fab { display: none; }
.chat { position: fixed; right: 0; top: 0; bottom: 0; z-index: 45; width: min(440px, 100vw); background: var(--surface); border-left: 1px solid var(--line); box-shadow: -10px 0 30px rgba(0,0,0,.2); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); padding-right: env(safe-area-inset-right, 0px); }
.chat[hidden] { display: none; }
.chat-h { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); border-top: 6px solid var(--tape); }
.chat-h > div { margin-right: auto; display: grid; min-width: 0; }
.chat-h b { font: 600 18px var(--f-display); letter-spacing: .03em; text-transform: uppercase; }
.chat-h span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-log { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.chat-empty { color: var(--muted); font-size: 14px; }
.msg { max-width: 92%; font-size: 14.5px; line-height: 1.55; min-width: 0; }
.msg p { margin: 0 0 .5em; } .msg p:last-child { margin-bottom: 0; }
.msg ul { margin: .3em 0 .6em; padding-left: 1.2em; }
.msg.me { align-self: flex-end; background: var(--accent-soft); border: 1px solid var(--line); border-radius: 12px 12px 2px 12px; padding: 8px 12px; }
.msg.her { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--tape); border-radius: 2px 12px 12px 12px; padding: 10px 12px; }
.msg .who { font: 500 11px var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.msg .thinking { color: var(--muted); font-style: italic; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 14px 0; border-top: 1px solid var(--line); }
.chip { border: 1px solid var(--line); background: var(--surface-2); border-radius: 99px; padding: 4px 10px; font-size: 12.5px; }
.chip:hover { border-color: var(--accent); }
.chat-f { display: flex; gap: 8px; padding: 10px 14px; align-items: flex-end; }
.chat-f textarea { flex: 1; min-width: 0; resize: none; font: 14px/1.45 var(--f-body); color: var(--ink); background: var(--code-bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.chat-note { font-size: 11.5px; color: var(--muted); padding: 0 14px 10px; }
.chat-set { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 0 14px 6px; font-size: 12.5px; color: var(--muted); }
.chat-set select { font: inherit; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 2px 4px; }
.chat-set .len { margin-left: auto; font-variant-numeric: tabular-nums; }
#chatQuota { color: var(--ink); font-weight: 500; }
#chatQuota.over { color: var(--evidence); }
.chip:disabled, .chat-f textarea:disabled { opacity: .5; cursor: not-allowed; }
.reset-zone { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 6px; display: grid; gap: 10px; }
.reset-zone > .btn { justify-self: start; }
.btn.danger { color: var(--evidence); border-color: var(--evidence); }
.reset-confirm { background: var(--evidence-soft); border: 1px solid var(--evidence); border-radius: 8px; padding: 12px 14px; }
.reset-confirm p { margin: 0 0 10px; }
.reset-confirm .row { display: flex; gap: 8px; flex-wrap: wrap; }
.ask-mini { margin-top: 8px; font-size: 13px; border-color: var(--tape); }
.ask-mini[hidden] { display: none; }


/* ---------- комикс (нуар, одна тема намеренно) ---------- */
.modal.comic { background: rgba(0,0,0,.82); align-items: start; overflow: auto; }
.modal.comic .modal-in { width: min(1080px, 100%); max-height: none; overflow: visible; background: #0c0d10; color: #e8e8e6; border-color: #2a2c31; margin-block: 8px; }
.modal.comic .modal-x { background: #1b1d22; color: #e8e8e6; border-color: #3a3e47; }
.comic-head { display: grid; gap: 2px; border-bottom: 4px solid #f2c230; padding-bottom: 10px; }
.comic-head h3 { font: 600 34px/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: #f4f4f2; margin: 0; }
.comic-n { font: 500 12px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: #f2c230; }
.comic-sub { font-size: 13px; color: #9a9ea8; }
.comic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cp { position: relative; container-type: inline-size; border: 3px solid #f4f4f2; background: #000; overflow: hidden; aspect-ratio: 4 / 3; }
.cp.wide { grid-column: 1 / -1; aspect-ratio: 8 / 3; }
.cp svg { display: block; width: 100%; height: 100%; }
.cp.img img.cam { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }
.cp.img.wide { aspect-ratio: 1916 / 821; }
.cp.img .cb, .cp.img .cc { z-index: 1; }
.cc { position: absolute; top: 2.5cqw; left: 2.5cqw; max-width: 80%; background: #f2c230; color: #111; border: 2px solid #111; padding: .35em .6em; font: 600 3.1cqw/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.cc.bot { top: auto; bottom: 2.5cqw; }
.cb { position: absolute; background: #f4f4f2; color: #111; border: 2px solid #111; border-radius: 1.2em; padding: .45em .7em; font: 500 3.2cqw/1.25 var(--f-body); box-shadow: 2px 2px 0 #000; }
.cb b { display: block; font: 600 2.3cqw var(--f-display); text-transform: uppercase; letter-spacing: .08em; color: #555; margin-bottom: .1em; }
.cp.wide .cc { font-size: 1.6cqw; top: 1.3cqw; left: 1.3cqw; max-width: 60%; }
.cp.wide .cc.bot { bottom: 1.3cqw; top: auto; }
.cp.wide .cb { font-size: 1.65cqw; }
.cp.wide .cb b { font-size: 1.2cqw; }
.cb::after { content: ""; position: absolute; width: 0; height: 0; border: .55em solid transparent; }
.cb.t-bl::after { left: 1.4em; bottom: -1.1em; border-top-color: #111; border-left-color: #111; }
.cb.t-br::after { right: 1.4em; bottom: -1.1em; border-top-color: #111; border-right-color: #111; }
.cb.t-b::after { left: calc(50% - .55em); bottom: -1.1em; border-top-color: #111; }
.cb.t-r::after { right: -1.1em; top: calc(50% - .55em); border-left-color: #111; }
.cb.t-l::after { left: -1.1em; top: calc(50% - .55em); border-right-color: #111; }
.comic-foot { display: flex; justify-content: flex-end; }
.issues { display: flex; flex-wrap: wrap; gap: 6px; }
.lang-sw { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface-2); }
.lang-sw button { border: 0; background: none; padding: 6px 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.lang-sw button.on { background: var(--accent); color: #fff; }
:root[data-theme="dark"] .lang-sw button.on { color: #0B1220; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lang-sw button.on { color: #0B1220; } }
.lang-sw button:not(.on):hover { color: var(--ink); }
.lang-sw .lang-l { padding: 0 10px 0 12px; font: 500 12px var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lang-sw.big button { padding: 5px 11px; font-size: 13px; }
.lang-sw.big .lang-l { font-size: 11px; padding: 0 8px 0 10px; }
.home-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.home-top h1 { margin: 0; }
.tq { margin: 2px 0; }
.ck { display: grid; gap: 3px 6px; align-items: baseline; margin: .6em 0 1em; width: max-content; max-width: 100%; }
.ck1 { grid-template-columns: 1.1em auto auto; }
.ck-r { display: contents; }
.ck-r i { font-style: normal; font-weight: 700; text-align: center; }
.ck-r i.y { color: var(--ok); } .ck-r i.n { color: var(--evidence); }
.ck-r .lb { padding: 0 12px 0 4px; }
.ck-r.out .lb, .ck-r.out .rs { color: var(--muted); }
table.ops { border-collapse: collapse; font-size: 14px; line-height: 1.5; margin: 1em 0; }
table.ops th, table.ops td { border-bottom: 1px solid var(--line); padding: 7px 18px 7px 0; text-align: left; vertical-align: top; }
table.ops th { font-size: 12px; color: var(--muted); font-weight: 500; }
.steps { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: flex-start; margin: 1.1em 0; }
.steps > div { flex: 0 1 180px; min-width: 0; }
.st-h { font: 600 14px/1.4 var(--f-body); color: var(--ink); margin-bottom: 2px; }
.st-n { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-top: 8px; }
table.ops.grp { margin: .4em 0; }
table.ops.grp tr.gs td { border-top: 1px solid var(--muted); }
table.ops.grp tr.gs:nth-child(2) td { border-top: 0; }
table.ops.grp td.g { font-weight: 600; vertical-align: middle; }
table.ops.grp td.g1 { color: var(--accent); }
table.ops.grp td.g2 { color: var(--ok); }
table.ops td.mark { color: var(--k-num); font-weight: 600; }
table.ops.grp td.g0 { color: var(--muted); font-weight: 500; }
table.ops td.skip { color: var(--muted); }
table.ops .dir { font: 600 10.5px var(--f-mono); color: var(--k-kw); margin-left: 3px; }
table.ops td:first-child { white-space: nowrap; }
.tq b { font-weight: 600; }
.where { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: 13px; color: var(--muted); }
.tchip { border: 1px solid var(--accent); background: var(--surface); color: var(--ink); border-radius: 99px; padding: 2px 10px; font-size: 13px; }
.tchip code { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 600; }
.tchip:hover { background: var(--accent-soft); }
.tbl.flash { animation: tflash 1.6s ease-out; }
@keyframes tflash { 0%, 30% { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); } 100% { background: transparent; box-shadow: none; } }
.cols .nt { white-space: normal; }
.accuse { gap: 12px; }
.acc-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px; align-items: center; }
.acc-row label { font: 500 14px var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.acc-row select { font: inherit; font-size: 14px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 7px 8px; min-width: 0; width: 100%; }
@media (max-width: 640px) { .acc-row { grid-template-columns: 1fr; gap: 4px; } }
.issue-locked { font-size: 13px; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r); padding: 6px 10px; }
@media (max-width: 640px) {
  .comic-grid { grid-template-columns: 1fr; }
  .cp.wide { aspect-ratio: 16 / 10; }
  .cp.img.wide { aspect-ratio: 16 / 10; }
  .cp.img.wide img.cam { object-fit: contain; }
  .cp.wide .cc { font-size: 2.8cqw; top: 2cqw; left: 2cqw; max-width: 80%; }
  .cp.wide .cc.bot { bottom: 2cqw; }
  .cp.wide .cb { font-size: 2.8cqw; }
  .cp.wide .cb b { font-size: 2cqw; }
  .comic-head h3 { font-size: 26px; }
  .cb { font-size: 3.8cqw; } .cc { font-size: 3.4cqw; }
}


/* ---------- motion-комикс ---------- */
.comic-root { position: fixed; inset: 0; z-index: 70; background: #050506; color: #e8e8e6; overflow: auto; padding: calc(10px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
.mc { max-width: 1000px; min-height: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.mc-top { display: flex; align-items: baseline; gap: 12px; border-bottom: 3px solid #f2c230; padding-bottom: 8px; }
.mc-top b { font: 600 26px/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; margin-right: auto; }
.mc-x { background: none; border: 1px solid #3a3e47; color: #e8e8e6; border-radius: 6px; width: 34px; height: 34px; }
.mc-stage { outline: none; cursor: pointer; display: grid; place-items: center; }
.mc-stage .cp { width: 100%; border-width: 4px; }
.mc-stage .cp:not(.wide) { max-width: min(100%, calc((100vh - 190px) * 4 / 3)); }
.mc-bar { height: 3px; background: #1b1d22; } .mc-bar i { display: block; height: 100%; width: 0; background: #f2c230; }
.mc-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mc-b { background: #15171b; border: 1px solid #3a3e47; color: #e8e8e6; border-radius: 6px; padding: 7px 12px; font-size: 13.5px; }
.mc-b:disabled { opacity: .35; }
.mc-next { background: #f2c230; color: #111; border-color: #f2c230; font-weight: 600; }
.mc-dots { display: flex; gap: 6px; }
.mc-dots span { width: 22px; height: 4px; background: #2a2c31; } .mc-dots span.on { background: #f2c230; }
.mc-stage { cursor: default; position: relative; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.comic-root.held .mc-stage::after { content: attr(data-held); position: absolute; left: 50%; top: 12px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #f2c230; font: 600 13px var(--f-display); letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 99px; pointer-events: none; z-index: 3; }
.comic-root.held .cp .cam, .comic-root.held .cp .fg, .comic-root.held .cp .fb, .comic-root.held .cp .rain { animation-play-state: paused; }
.mc-tip { font-size: 12px; color: #6f7480; margin-left: auto; }
@media (max-width: 640px) { .mc-tip { display: none; } .mc-ctl [data-a=auto] { margin-left: auto; } }
.chap li.scene button { color: var(--accent); }
.chap li.scene button::before { border: 0; content: '▶'; font-size: 9px; width: auto; height: auto; margin-top: -7px; left: 33px; }
.prolog-btn { margin: -6px 12px 14px; width: calc(100% - 24px); text-align: left; border: 0; background: none; color: var(--accent); font-size: 13.5px; padding: 2px 10px; }
.mc-end { text-align: center; padding: 60px 16px; display: grid; gap: 10px; justify-items: center; }
.mc-end h3 { font: 600 40px/1 var(--f-display); text-transform: uppercase; margin: 0; letter-spacing: .04em; }
.mc-end p { color: #9a9ea8; margin: 0 0 10px; }
.mc-end-b { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mc-end .btn { background: #15171b; color: #e8e8e6; border-color: #3a3e47; } .mc-end .btn.run { background: #f2c230; color: #111; border-color: #f2c230; }
body.comic-open, body.home-open { overflow: hidden; }
/* анимации внутри панели */
.cp.enter { animation: cpIn .6s ease-out both; }
@keyframes cpIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.cp .cam { transform-box: view-box; transform-origin: 50% 50%; }
.cp .cam.kb1 { animation: kb1 9s ease-out both; } .cp .cam.kb2 { animation: kb2 9s ease-out both; } .cp .cam.kb3 { animation: kb3 9s ease-out both; }
@keyframes kb1 { from { transform: scale(1.14) translate(-2%, 1%); } to { transform: scale(1.02); } }
@keyframes kb2 { from { transform: scale(1.02); } to { transform: scale(1.12) translate(1.5%, -1%); } }
@keyframes kb3 { from { transform: scale(1.12) translate(2%, 0); } to { transform: scale(1.03) translate(-1%, 0); } }
.cp .fg { animation: figIn .9s cubic-bezier(.2,.7,.3,1) var(--d) both; }
@keyframes figIn { from { opacity: 0; transform: translateX(var(--dx)); } to { opacity: 1; transform: none; } }
.cp .fb { animation: bob 3.2s ease-in-out var(--b) infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes bob { 0%, 100% { transform: none; } 50% { transform: translateY(-1.5px) scaleY(1.008); } }
.cp .rain { animation: rain .45s linear infinite; }
@keyframes rain { from { transform: translateY(0); } to { transform: translateY(44px); } }
.cp .cone { animation: flick 5s steps(1) infinite; }
@keyframes flick { 0%, 100% { opacity: 1; } 41% { opacity: .55; } 42% { opacity: 1; } 44% { opacity: .7; } 45% { opacity: 1; } 78% { opacity: .85; } 79% { opacity: 1; } }
.cp .glow { animation: glow 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes glow { 0%, 100% { opacity: .65; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.12); } }
.cp .ring { animation: ring 1.1s ease-out infinite; animation-delay: calc(var(--r) * 4ms); }
@keyframes ring { 0% { opacity: 0; } 30% { opacity: .9; } 100% { opacity: 0; } }
.cp .noise { animation: noise .25s steps(2) infinite; }
@keyframes noise { 0% { transform: translate(0, 0); } 50% { transform: translate(-7px, 5px); } 100% { transform: translate(4px, -3px); } }
.mc .cc { opacity: 0; transform: translateY(-8px); transition: opacity .4s, transform .4s; }
.mc .cc.on { opacity: 1; transform: none; }
.mc .cb { opacity: 0; transform: scale(.6); transform-origin: 20% 100%; transition: opacity .25s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.mc .cb.on { opacity: 1; transform: none; }
.cb { width: max-content; text-wrap: pretty; }
.cb .gh { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .cp .cam, .cp .fg, .cp .fb, .cp .rain, .cp .cone, .cp .glow, .cp .ring, .cp .noise, .cp.enter { animation: none !important; } }
@media (max-width: 640px) { .mc-top b { font-size: 20px; } .mc-dots span { width: 12px; } .mc-ctl .mc-b { padding: 7px 10px; } }

/* ---------- выбор курса ---------- */
.home { position: fixed; inset: 0; z-index: 65; background: var(--bg); overflow: auto; padding: calc(24px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.home-in { max-width: 920px; margin: 0 auto; display: grid; gap: 22px; }
.home-h .tape { height: 12px; margin-bottom: 18px; }
.home-h h1 { font: 600 44px/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 8px; }
.home-h p { margin: 0; color: var(--muted); max-width: 60ch; }
.courses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.course { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; position: relative; border-top: 6px solid var(--tape); }
.course.locked { border-top-color: var(--line); opacity: .75; }
.course h2 { font: 600 30px/1.05 var(--f-display); text-transform: uppercase; margin: 0; letter-spacing: .02em; }
.course p { margin: 0; color: var(--muted); }
.c-case { font: 500 13px var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--evidence); }
.course.locked .c-case { color: var(--muted); }
.c-badge { align-self: flex-start; font: 600 11px var(--f-display); letter-spacing: .14em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.c-badge.ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.c-meta { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.c-meta li { font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; padding: 2px 10px; }
.c-prog { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.c-prog .xpbar { width: 160px; }
.c-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
@media (max-width: 640px) { .home-h h1 { font-size: 32px; } }

@media (max-width: 1180px) {
  .app { grid-template-columns: 250px minmax(0, 1fr); }
  .schema { display: none; position: fixed; right: 0; top: 0; bottom: 0; width: min(320px, 90vw); max-height: none; z-index: 40; padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-right: env(safe-area-inset-right, 0px); box-shadow: -10px 0 30px rgba(0,0,0,.25); }
  .schema.open { display: block; }
  .mob-schema { display: inline-flex; }
}
@media (min-width: 1181px) { .mob-schema { display: none; } }
@media (max-width: 780px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side:not(.schema) { display: none; position: fixed; left: 0; top: 0; bottom: 0; width: min(320px, 90vw); max-height: none; z-index: 40; padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-left: env(safe-area-inset-left, 0px); box-shadow: 10px 0 30px rgba(0,0,0,.25); }
  .side.open { display: block; }
  .mob-only { display: inline-flex; }
  .xpbar { width: 80px; }
  .brand span { display: none; }
  .task h2 { font-size: 25px; }
  .task { padding: 16px; }
  .main > .top, body > .top { position: static; } /* на телефоне шапка в 3 строки - не держим её на экране, иначе она съедает четверть высоты */
  .rank-txt .r2 { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }