/* Темы сайта из макета «Школа кода — новый дизайн» (итог: шесть тем + живой фон).
   Каждая тема — набор переменных; site.css пользуется ими, здесь — то, что меняется от темы к теме. */

:root, html[data-theme="paper"] {
  --font: "Onest", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-head: var(--font);
  --paper: #F3F5F2; --paper-2: #EDF1EC; --card: #FFFFFF; --surface: #FFFFFF; --glass: rgba(255,255,255,0.84);
  --ink: #17201B; --ink-2: #3F4C44; --muted: #5A6760; --line: #D9E0D8; --line-strong: #D9E0D8; --bw: 1px;
  --accent: #68FAA5; --accent-ink: #10261B; --cta-border: transparent; --accent-2: #F2A65A;
  --acc-text: #0B7A4E; --acc-line: #8FD9B4; --acc-tint: #ECF8F1; --btn-bg: #FFFFFF;
  --blue: #1C5DB5; --blue-soft: #E8EFFA; --link: #1C5DB5;
  --ok: #0B7A4E; --ok-soft: #E3F4EA; --bad: #B3261E; --bad-soft: #FBE7E4; --warn: #875700; --warn-soft: #FFF3D6;
  --code-bg: #17201B; --code-ink: #EEF2EE;
  --radius: 10px; --radius-s: 6px; --shadow-card: none; --shadow-btn: none; --shadow-run: none;
  --head-bg: #FFFFFF; --logo-bg: #68FAA5; --logo-ink: #10261B; --logo-line: #8FD9B4;
  --caps: none; --caps-ls: 0; --label-font: var(--font); --h1-w: 700; --h1-ls: -0.4px;
  --ed-bg: #FCFDFC; --ed-gutter: #F3F5F2; --ed-text: #17201B; --ed-lineno: #7D8A83; --ed-kw: #7A33B0; --ed-fn: #1C5DB5; --ed-num: #965200;
  --ed-str: #2B7A3D; --ed-comment: #6B776F; --ed-active: #F1F5F0; --ed-sel: #D7E6F7; --ed-dbg: #FFF1B8; --ed-err: #FDE2DF; --ed-cursor: #17201B; --ed-bp: #D93025;
  color-scheme: light;
}
html[data-theme="graphite"] {
  --paper: #0E1014; --paper-2: #181B22; --card: #14171D; --surface: #181B22; --glass: rgba(14,16,20,0.76);
  --ink: #E6E8EC; --ink-2: #B5BBC6; --muted: #8A919E; --line: #23272F; --line-strong: #23272F;
  --accent: #68FAA5; --accent-ink: #10261B; --accent-2: #E9C46A;
  --acc-text: #68FAA5; --acc-line: #68FAA5; --acc-tint: rgba(104,250,165,0.08); --btn-bg: transparent;
  --blue: #8EC5FF; --blue-soft: rgba(142,197,255,0.12); --link: #8EC5FF;
  --ok: #68FAA5; --ok-soft: rgba(104,250,165,0.12); --bad: #FF8A80; --bad-soft: rgba(255,138,128,0.14); --warn: #E9C46A; --warn-soft: rgba(233,196,106,0.12);
  --code-bg: #0B0D10; --code-ink: #D6DAE1;
  --radius: 6px; --radius-s: 4px; --head-bg: #0E1014; --logo-bg: transparent; --logo-ink: #68FAA5; --logo-line: #68FAA5; --h1-w: 500; --h1-ls: -0.6px;
  --ed-bg: #0B0D10; --ed-gutter: #0B0D10; --ed-text: #D6DAE1; --ed-lineno: #4B515C; --ed-kw: #68FAA5; --ed-fn: #8EC5FF; --ed-num: #F4C66E;
  --ed-str: #F0A6CA; --ed-comment: #737B88; --ed-active: #14171D; --ed-sel: #26303F; --ed-dbg: #4A3F12; --ed-err: #4D1F1F; --ed-cursor: #E6E8EC; --ed-bp: #FF6B5E;
  color-scheme: dark;
}
html[data-theme="strict"] {
  --paper: #FAFAF7; --paper-2: #F0F0EA; --card: #FAFAF7; --surface: #FFFFFF; --glass: rgba(250,250,247,0.88);
  --ink: #111111; --ink-2: #333333; --muted: #555555; --line: #111111; --line-strong: #111111; --bw: 2px;
  --accent: #111111; --accent-ink: #FAFAF7; --accent-2: #68FAA5;
  --acc-text: #111111; --acc-line: #111111; --acc-tint: #FFFFFF; --btn-bg: #FFFFFF;
  --blue: #111111; --blue-soft: #F0F0EA; --link: #111111;
  --ok: #0B6B44; --ok-soft: #DDF5E7; --bad: #A0221A; --bad-soft: #F8E1DE; --warn: #6E4A00; --warn-soft: #F5EBD0;
  --code-bg: #111111; --code-ink: #EDEDE8;
  --radius: 0; --radius-s: 0; --head-bg: #FAFAF7; --logo-bg: #68FAA5; --logo-ink: #111111; --logo-line: #111111;
  --caps: uppercase; --caps-ls: 0.9px; --label-font: "JetBrains Mono", monospace; --h1-w: 700; --h1-ls: -1px; --shadow-run: inset 0 -4px 0 #68FAA5;
  --ed-bg: #111111; --ed-gutter: #111111; --ed-text: #EDEDE8; --ed-lineno: #6B6B66; --ed-kw: #68FAA5; --ed-fn: #EDEDE8; --ed-num: #EDEDE8;
  --ed-str: #C8F7DC; --ed-comment: #8A8A84; --ed-active: #1C1C1C; --ed-sel: #333333; --ed-dbg: #4A4212; --ed-err: #4D1F1F; --ed-cursor: #EDEDE8; --ed-bp: #FF6B5E;
}
html[data-theme="night"] {
  --paper: #1C2030; --paper-2: #2A3046; --card: #1F2335; --surface: #22273A; --glass: rgba(31,35,53,0.8);
  --ink: #DCE1EC; --ink-2: #B4BCD0; --muted: #8E97B0; --line: #343B55; --line-strong: #343B55;
  --accent: #8FD8B5; --accent-ink: #13261C; --accent-2: #E8C98A;
  --acc-text: #8FD8B5; --acc-line: #4E8C72; --acc-tint: rgba(143,216,181,0.10); --btn-bg: transparent;
  --blue: #8FBFEA; --blue-soft: rgba(143,191,234,0.12); --link: #8FBFEA;
  --ok: #8FD8B5; --ok-soft: rgba(143,216,181,0.12); --bad: #F2A09A; --bad-soft: rgba(242,160,154,0.14); --warn: #E8C98A; --warn-soft: rgba(232,201,138,0.12);
  --code-bg: #191C29; --code-ink: #D3D9E6;
  --radius: 12px; --radius-s: 8px; --head-bg: #1C2030; --logo-bg: transparent; --logo-ink: #8FD8B5; --logo-line: #4E8C72; --h1-w: 600; --h1-ls: -0.3px;
  --ed-bg: #191C29; --ed-gutter: #191C29; --ed-text: #D3D9E6; --ed-lineno: #5C6584; --ed-kw: #C3A6F0; --ed-fn: #8FBFEA; --ed-num: #E8C98A;
  --ed-str: #A6DBB5; --ed-comment: #7A83A0; --ed-active: #20243A; --ed-sel: #33395A; --ed-dbg: #4A4220; --ed-err: #4D2329; --ed-cursor: #DCE1EC; --ed-bp: #FF8A80;
  color-scheme: dark;
}
html[data-theme="blueprint"] {
  --paper: #101319; --paper-2: #181D28; --card: rgba(16,19,25,0.72); --surface: #141821; --glass: rgba(16,19,25,0.76);
  --ink: #E4E7EC; --ink-2: #B9C0CC; --muted: #8A93A5; --line: #2B3140; --line-strong: #2B3140;
  --accent: #68FAA5; --accent-ink: #0E1A13; --accent-2: #F5C451;
  --acc-text: #68FAA5; --acc-line: #68FAA5; --acc-tint: transparent; --btn-bg: transparent;
  --blue: #7CC8FF; --blue-soft: rgba(124,200,255,0.12); --link: #7CC8FF;
  --ok: #68FAA5; --ok-soft: rgba(104,250,165,0.12); --bad: #FF8A80; --bad-soft: rgba(255,138,128,0.14); --warn: #F5C451; --warn-soft: rgba(245,196,81,0.12);
  --code-bg: #0A0C10; --code-ink: #D7DBE3;
  --radius: 0; --radius-s: 0; --head-bg: rgba(16,19,25,0.9); --logo-bg: transparent; --logo-ink: #68FAA5; --logo-line: #68FAA5;
  --caps: uppercase; --caps-ls: 1px; --label-font: "JetBrains Mono", monospace; --h1-w: 700; --h1-ls: -1px; --shadow-run: inset 0 -2px 0 #68FAA5;
  --ed-bg: #0A0C10; --ed-gutter: #0A0C10; --ed-text: #D7DBE3; --ed-lineno: #4B5263; --ed-kw: #68FAA5; --ed-fn: #7CC8FF; --ed-num: #F5C451;
  --ed-str: #F29BC4; --ed-comment: #6F788A; --ed-active: #141821; --ed-sel: #25304A; --ed-dbg: #4A4212; --ed-err: #4D1F1F; --ed-cursor: #E4E7EC; --ed-bp: #FF6B5E;
  color-scheme: dark;
}
html[data-theme="rough"] {
  --paper: #EFECE4; --paper-2: #F6F3EC; --card: #FFFFFF; --surface: #FFFFFF; --glass: rgba(255,255,255,0.9);
  --ink: #1B1B1B; --ink-2: #3A3A3A; --muted: #555555; --line: #1B1B1B; --line-strong: #1B1B1B; --bw: 2px;
  --accent: #68FAA5; --accent-ink: #1B1B1B; --cta-border: #1B1B1B; --accent-2: #F6E3A8;
  --acc-text: #0B6B44; --acc-line: #1B1B1B; --acc-tint: #FFFFFF; --btn-bg: #FFFFFF;
  --blue: #1D4F91; --blue-soft: #DCE7F6; --link: #1B1B1B;
  --ok: #0B6B44; --ok-soft: #D9EDE1; --bad: #A0221A; --bad-soft: #F8DDD8; --warn: #6E4A00; --warn-soft: #F6E3A8;
  --code-bg: #1B1B1B; --code-ink: #EFECE4;
  --radius: 8px; --radius-s: 6px; --head-bg: #EFECE4; --logo-bg: #68FAA5; --logo-ink: #1B1B1B; --logo-line: #1B1B1B; --h1-w: 800; --h1-ls: -1px;
  --shadow-card: 4px 4px 0 #1B1B1B; --shadow-btn: 3px 3px 0 #1B1B1B; --shadow-run: 3px 3px 0 #0B6B44;
  --ed-bg: #1B1B1B; --ed-gutter: #1B1B1B; --ed-text: #EFECE4; --ed-lineno: #77736A; --ed-kw: #68FAA5; --ed-fn: #9CC9F5; --ed-num: #F6E3A8;
  --ed-str: #F2B8A2; --ed-comment: #8F8A80; --ed-active: #262626; --ed-sel: #3A3A3A; --ed-dbg: #4A4212; --ed-err: #4D1F1F; --ed-cursor: #EFECE4; --ed-bp: #FF6B5E;
}

/* ── основа ── */
body { background-color: var(--paper); color: var(--ink); font-size: 16px; line-height: 1.55; }
a { color: var(--link); }
h1 { font-weight: var(--h1-w); letter-spacing: var(--h1-ls); }
h2, h3 { font-weight: 700; letter-spacing: -0.2px; }
.muted { color: var(--muted); }
pre { background: var(--paper-2); border-radius: var(--radius-s); }
html[data-theme="blueprint"][data-wall="none"] body { background-image: radial-gradient(#232836 1px, transparent 1px); background-size: 20px 20px; }

/* ── шапка ── */
.top { background: var(--head-bg); color: var(--ink); border-bottom: var(--bw) solid var(--line-strong); min-height: 58px; padding: 8px 24px; gap: 22px; position: relative; z-index: 20; }
.top a { color: var(--ink-2); }
.top nav a { opacity: 1; font-size: 15px; } .top nav a:hover { color: var(--ink); text-decoration: underline; }
.brand { font-family: var(--font); font-weight: 700; font-size: 18px; color: var(--ink) !important; }
.brand-text { text-transform: var(--caps); letter-spacing: var(--caps-ls); }
.brand-mark { width: 28px; height: 28px; border-radius: var(--radius-s); background: var(--logo-bg); color: var(--logo-ink); border: var(--bw) solid var(--logo-line); font-size: 12px; font-weight: 600; }
.who { opacity: 1; color: var(--ink-2); }
.who-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2) !important; }
.who-initial { display: none; width: 34px; height: 34px; border-radius: 50%; border: var(--bw) solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; place-items: center; }
.logout-form { display: inline; margin: 0; }
.top .btn-ghost { color: var(--ink); }
@media (max-width: 900px) {
  .top { padding: 8px 12px; gap: 10px; }
  .who.who-link { display: inline-flex; }
  .who-link .who-name { display: none; }
  .who-link .who-initial { display: inline-grid; }
}

/* выбор темы и фона */
.look { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.look-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: 14px var(--font); cursor: pointer; box-shadow: var(--shadow-btn); }
.look-next { width: 40px; padding: 0; justify-content: center; }
.look-btn b { font-weight: 600; }
.look-dot { color: var(--muted); margin: 0 2px; }
.look-short { display: none; }
@media (max-width: 1180px) { .look-label { display: none; } .look-short { display: inline; } }
.look-menu { position: absolute; right: 0; top: 50px; z-index: 60; width: min(420px, calc(100vw - 24px)); padding: 16px; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: var(--card); color: var(--ink); box-shadow: 0 18px 40px rgba(0,0,0,0.28); display: flex; flex-direction: column; gap: 12px; }
html[data-theme="blueprint"] .look-menu { background: #141821; }
.look-cap, .look-note { font-size: 12.5px; color: var(--muted); text-transform: var(--caps); letter-spacing: var(--caps-ls); }
.look-note { text-transform: none; letter-spacing: 0; }
.look-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.look-theme { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 2px solid transparent; border-radius: 10px; background: transparent; color: var(--ink); font: 600 13px var(--font); cursor: pointer; text-align: left; }
.look-theme[aria-pressed="true"] { border-color: var(--acc-text); }
.look-theme:hover { border-color: var(--line); }
.look-swatch { display: flex; height: 40px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(127,127,127,0.3); }
.look-swatch i:nth-child(1) { flex: 2; } .look-swatch i:nth-child(2) { flex: 1; } .look-swatch i:nth-child(3) { width: 10px; }
.sw-paper i:nth-child(1) { background: #F3F5F2; } .sw-paper i:nth-child(2) { background: #EDF1EC; } .sw-paper i:nth-child(3) { background: #68FAA5; }
.sw-graphite i:nth-child(1) { background: #0E1014; } .sw-graphite i:nth-child(2) { background: #181B22; } .sw-graphite i:nth-child(3) { background: #68FAA5; }
.sw-strict i:nth-child(1) { background: #FAFAF7; } .sw-strict i:nth-child(2) { background: #FFFFFF; } .sw-strict i:nth-child(3) { background: #68FAA5; }
.sw-night i:nth-child(1) { background: #1C2030; } .sw-night i:nth-child(2) { background: #2A3046; } .sw-night i:nth-child(3) { background: #8FD8B5; }
.sw-blueprint i:nth-child(1) { background: #101319; } .sw-blueprint i:nth-child(2) { background: #181D28; } .sw-blueprint i:nth-child(3) { background: #68FAA5; }
.sw-rough i:nth-child(1) { background: #EFECE4; } .sw-rough i:nth-child(2) { background: #FFFFFF; } .sw-rough i:nth-child(3) { background: #68FAA5; }
.look-walls { display: flex; gap: 6px; flex-wrap: wrap; }
.look-wall { height: 34px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 13px var(--font); cursor: pointer; }
.look-wall[aria-pressed="true"] { border-color: var(--acc-text); background: var(--acc-tint); color: var(--acc-text); font-weight: 600; }

/* ── кнопки ── */
.btn { background: var(--accent); color: var(--accent-ink); border: var(--bw) solid var(--cta-border); border-radius: var(--radius); box-shadow: var(--shadow-btn); font: 700 15px var(--font); padding: 9px 16px; }
.btn-blue { background: var(--acc-tint); color: var(--acc-text); border-color: var(--acc-line); box-shadow: var(--shadow-run); }
.btn-dark, .btn-ghost { background: var(--btn-bg); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-btn); }
.btn-ok { background: var(--ok); color: var(--surface); }
.btn-small { font-size: 13.5px; padding: 6px 10px; border-radius: var(--radius-s); }
.btn-note { color: inherit; opacity: .7; font-weight: 500; }
.btn kbd { background: rgba(127,127,127,.18); }
html[data-theme="strict"] .btn, html[data-theme="blueprint"] .btn { text-transform: uppercase; letter-spacing: .6px; font-size: 13.5px; }
#btn-hint:disabled { background: var(--paper-2); color: var(--ink-2); box-shadow: none; border-color: var(--line); }

/* ── карточки и поверхности ── */
.card, .step, .task-row, .task-left, .panel, table.board { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.tag { border-radius: var(--radius-s); background: var(--paper-2); color: var(--ink-2); text-transform: var(--caps); letter-spacing: var(--caps-ls); font-family: var(--label-font); font-weight: 600; }
.d1 { background: var(--ok-soft); color: var(--ok); } .d2 { background: var(--warn-soft); color: var(--warn); } .d3 { background: var(--bad-soft); color: var(--bad); }
.lbl, table.board th, table.judge-table th { font-family: var(--label-font); text-transform: var(--caps); letter-spacing: var(--caps-ls); }
.step-num { border-radius: var(--radius-s); font-family: var(--font); }
.step.current { border-color: var(--acc-text); box-shadow: var(--shadow-card); }
.step.current .step-num { background: var(--accent); color: var(--accent-ink); }
.step.done .step-num { background: var(--ok); color: var(--surface); }
.bar { background: var(--paper-2); } .bar > i { background: var(--ok); }
.messages li { background: var(--blue-soft); color: var(--ink); border-radius: var(--radius-s); }
.messages li.success { background: var(--ok-soft); }
.live-banner { background: var(--accent); color: var(--accent-ink); }
.login input, .field input, .field select, textarea.names, .pet-name-row input { background: var(--surface); color: var(--ink); border-color: var(--line); border-radius: var(--radius-s); }
.test-card, .err pre, .err-where code, .err-raw code, table.judge-table, .pet-option, .invite-code, .io-grid textarea { background: var(--surface); color: var(--ink); }
.err { color: var(--bad); } .err p { color: var(--ink); }
.panel-tab { color: var(--ink-2); font-family: var(--font); }
.panel-tab.active { background: var(--paper-2); color: var(--ink); box-shadow: inset 0 -3px 0 var(--acc-text); }
.toast { background: var(--ink); color: var(--paper); }
.cell { background: var(--paper-2); border: 1px solid var(--line); }
.cell.open { background: var(--blue-soft); }
.dot { background: var(--muted); }
tr.changed td { background: var(--warn-soft); } tr.new td { background: var(--blue-soft); }
.pet-option:has(input:checked) { background: var(--acc-tint); border-color: var(--acc-text); box-shadow: none; }
.theory pre { background: var(--code-bg); color: var(--code-ink); }
.theory code { background: var(--paper-2); }
.site-foot a { color: var(--muted); }
.flag-hard, .flag-slow { background: var(--bad-soft); color: var(--bad); }
.flag-easy { background: var(--ok-soft); color: var(--ok); }
.flag-hints, .flag-unclear, .flag-disliked { background: var(--blue-soft); color: var(--blue); }
.verdict-pill.running { color: var(--blue); }
.check-mode { margin-bottom: 18px; }
.sample { border: var(--bw) solid var(--line); border-radius: var(--radius); }
.task-meta a { color: var(--link); }
.check-options { display: grid; gap: 6px; margin: 6px 0 8px; }
.check-option { display: flex; gap: 8px; align-items: center; cursor: pointer; }

/* ── редактор кода: цвета от темы (html[data-theme] — чтобы перебить codemirror.css, он грузится позже) ── */
html[data-theme] .editor-box { background: var(--ed-bg); border: var(--bw) solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); }
html[data-theme] .CodeMirror { background: var(--ed-bg); color: var(--ed-text); }
html[data-theme] .CodeMirror-gutters { background: var(--ed-gutter); border-right: 1px solid var(--line); }
html[data-theme="strict"] .CodeMirror-gutters, html[data-theme="rough"] .CodeMirror-gutters { border-right-color: #333; }
html[data-theme] .CodeMirror-linenumber { color: var(--ed-lineno); }
html[data-theme] .CodeMirror-cursor { border-left-color: var(--ed-cursor); }
html[data-theme] .CodeMirror-activeline-background { background: var(--ed-active); }
html[data-theme] .CodeMirror-selected, html[data-theme] .CodeMirror-focused .CodeMirror-selected { background: var(--ed-sel); }
html[data-theme] .cm-s-default .cm-keyword { color: var(--ed-kw); }
html[data-theme] .cm-s-default .cm-builtin, html[data-theme] .cm-s-default .cm-def { color: var(--ed-fn); }
html[data-theme] .cm-s-default .cm-number, html[data-theme] .cm-s-default .cm-atom { color: var(--ed-num); }
html[data-theme] .cm-s-default .cm-string { color: var(--ed-str); }
html[data-theme] .cm-s-default .cm-comment { color: var(--ed-comment); font-style: italic; }
html[data-theme] .cm-s-default .cm-variable, html[data-theme] .cm-s-default .cm-variable-2, html[data-theme] .cm-s-default .cm-variable-3,
html[data-theme] .cm-s-default .cm-property, html[data-theme] .cm-s-default .cm-operator, html[data-theme] .cm-s-default .cm-meta { color: var(--ed-text); }
html[data-theme] .CodeMirror-matchingbracket { color: var(--ed-text) !important; background: var(--ed-sel); }
html[data-theme] .cm-dbg-line { background: var(--ed-dbg) !important; }
html[data-theme] .cm-error-line { background: var(--ed-err) !important; }
html[data-theme] .bp { color: var(--ed-bp); }
html[data-theme] .code-view .CodeMirror { border-color: var(--line); }
html[data-theme] .CodeMirror-hints { background: var(--card); border-color: var(--line); color: var(--ink); }
html[data-theme] .CodeMirror-hint { color: var(--ink); }
html[data-theme] li.CodeMirror-hint-active { background: var(--acc-tint); color: var(--acc-text); }

/* ── черепашка: сервер проверяет ── */
.turtle-wait { display: flex; flex-direction: column; gap: 10px; }
.turtle-track { position: relative; height: 8px; border-radius: 99px; background: var(--paper-2); margin-top: 14px; color: var(--acc-text); }
.turtle { position: absolute; top: -14px; left: 0; animation: crawl 6s ease-in-out infinite alternate; }
.turtle svg { display: block; animation: legs .35s ease-in-out infinite; }
@keyframes crawl { from { left: 0; } to { left: calc(100% - 34px); } }
@keyframes legs { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* ── живой фон ── */
.walls { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.wall-art { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
html[data-wall="camp"] .wall-art[data-art="camp"], html[data-wall="river"] .wall-art[data-art="river"],
html[data-wall="kite"] .wall-art[data-art="kite"], html[data-wall="anime"] .wall-art[data-art="anime"] { display: block; }
html[data-wall="camp"] body, html[data-wall="river"] body, html[data-wall="kite"] body, html[data-wall="anime"] body { background: transparent; }
html[data-wall="camp"], html[data-wall="river"], html[data-wall="kite"], html[data-wall="anime"] { background: var(--paper); }
/* поверх картинки — «стекло» с размытием, чтобы текст читался:
   страницы-списки лежат на одной стеклянной панели, у задачи стеклянные обе половины */
html:not([data-wall="none"]) .top, html:not([data-wall="none"]) .task-left, html:not([data-wall="none"]) .panel,
html:not([data-wall="none"]) main.wrap, html:not([data-wall="none"]) .site-foot, html:not([data-wall="none"]) .toolbar {
  background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html:not([data-wall="none"]) main.wrap { border-radius: var(--radius); margin-top: 18px; margin-bottom: 18px; border: var(--bw) solid var(--line); }
html:not([data-wall="none"]) main.wrap.wide { margin: 14px; }
html:not([data-wall="none"]) .site-foot { border-radius: var(--radius); padding: 10px 18px; margin-bottom: 20px; width: fit-content; }
html:not([data-wall="none"]) .toolbar { border-radius: var(--radius); padding: 8px 10px; }
html:not([data-wall="none"]) .task-layout { padding: 14px 18px; }
@media (max-width: 1220px) { html:not([data-wall="none"]) main.wrap { margin-left: 10px; margin-right: 10px; } }

/* узкий экран: пункты меню переносятся, ничего не вылезает за край */
@media (max-width: 640px) {
  .top { flex-wrap: wrap; }
  .top nav { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 8px 12px; font-size: 14px; }
  .top nav a { white-space: nowrap; }
  .look { margin-left: auto; }
  .look-menu { right: auto; left: 50%; transform: translateX(-50%); position: fixed; top: 110px; }
  .look-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.twinkle { animation: twinkle 3.2s ease-in-out infinite; }
.flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker .9s ease-in-out infinite; }
.glow { animation: glow 1.8s ease-in-out infinite; }
.sway { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 6s ease-in-out infinite; }
.tail { transform-box: fill-box; transform-origin: 50% 0; animation: tail 2.4s ease-in-out infinite; }
.petal { animation: drift 26s linear infinite; }
.sun { animation: sunset 120s ease-in-out infinite alternate; }
.ripple { animation: ripple 7s ease-in-out infinite; }
.spark { animation: spark 4s ease-out infinite; }
.mist { animation: mist 26s ease-in-out infinite; }
.shimmer { animation: shimmer 5s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes flicker { 0%, 100% { transform: scaleY(1) scaleX(1); } 25% { transform: scaleY(1.12) scaleX(.94); } 50% { transform: scaleY(.92) scaleX(1.05); } 75% { transform: scaleY(1.06) scaleX(.97); } }
@keyframes glow { 0%, 100% { opacity: .55; } 50% { opacity: .8; } }
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes tail { 0%, 100% { transform: skewX(0); } 50% { transform: skewX(8deg); } }
@keyframes drift { 0% { transform: translate(0, 0) rotate(0); } 100% { transform: translate(-1500px, 420px) rotate(540deg); } }
@keyframes sunset { 0% { transform: translateY(0); } 100% { transform: translateY(60px); } }
@keyframes ripple { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-24px); } }
@keyframes spark { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(14px, -120px); opacity: 0; } }
@keyframes mist { 0%, 100% { transform: translateX(-40px); } 50% { transform: translateX(60px); } }
@keyframes shimmer { 0%, 100% { opacity: .15; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .spark, .mist, .shimmer, .twinkle, .flame, .glow, .sway, .tail, .petal, .sun, .ripple, .turtle, .turtle svg { animation: none; }
}
@media print { .walls { display: none; } body { background: #fff !important; color: #000; } }

/* журнал безопасности */
.sec-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sec-filter select, .sec-filter input { font: 14px var(--font); padding: 6px 8px; border-radius: var(--radius-s); border: var(--bw) solid var(--line); background: var(--surface); color: var(--ink); }
.sec-counts { display: flex; gap: 6px; flex-wrap: wrap; }
.sec-counts .tag { text-decoration: none; }
.tag.sec-alert { background: var(--bad-soft); color: var(--bad); }
tr.sec-row-alert td:nth-child(2) { color: var(--bad); font-weight: 700; }
.sec-detail pre { margin: 0 0 2px; padding: 4px 8px; font-size: 12.5px; max-width: 560px; white-space: pre-wrap; word-break: break-word; }
.nowrap { white-space: nowrap; }

/* Плашка тестового сайта: заметная, но не мешает */
.staging-bar { background: repeating-linear-gradient(45deg, #ffd84d 0 14px, #ffe98a 14px 28px); color: #3a2a00; text-align: center; font: 600 14px/1.4 var(--font, system-ui), sans-serif; padding: 6px 12px; position: relative; z-index: 30; }