/* Onest (OFL-1.1) — свой сервер, D38/SEC-4 */
@font-face{font-family:"Onest";font-style:normal;font-weight:400;font-display:swap;src:url("/static/fonts/onest-cyrillic-400-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:600;font-display:swap;src:url("/static/fonts/onest-cyrillic-600-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:400;font-display:swap;src:url("/static/fonts/onest-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:600;font-display:swap;src:url("/static/fonts/onest-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}


/* ===== primitives.css (design-system-base v1.1.0), встроен: страница должна работать одним файлом ===== */

/* Регистр — оверлей ролей, примитивы не меняются */
[data-register="editorial"] { --gap-section: var(--space-12); }

/* ---------- Базовая поверхность ---------- */
body { margin: 0; background: var(--surface-base); color: var(--text); font: var(--fs-body)/var(--lh-body) var(--font-body); }
h1, h2, h3 { margin: 0; font-family: var(--font-display); text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.caption, .zone-label { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.prose { max-width: var(--measure); }
.num, .kv dd, .stat b, td.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Stack: вертикальный ритм ---------- */
.stack { display: flex; flex-direction: column; gap: var(--gap-stack); }
.stack > * { margin: 0; }
.stack[data-gap="tight"]   { gap: var(--gap-inline); }
.stack[data-gap="section"] { gap: var(--gap-section); }

/* ---------- Cluster: группа контролов в строку ---------- */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-inline); }
.cluster > * { margin: 0; }
.cluster[data-gap="section"] { gap: var(--gap-section); }
.cluster > [data-separator] { width: 1px; align-self: stretch; background: var(--line); }

/* ---------- Grid: повторяющиеся объекты одной формы ---------- */
.grid { display: grid; gap: var(--gap-stack); grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 16rem), 1fr)); }
.grid > * { margin: 0; min-width: 0; }

/* ---------- Sidebar: две колонки, схлопывание ---------- */
.sidebar { display: grid; grid-template-columns: minmax(var(--sidebar-w, 18rem), 1fr) 3fr; gap: var(--gap-section); align-items: start; }
@media (max-width: 1100px) { .sidebar { grid-template-columns: 1fr; } }

/* ---------- KeyValue: пары label/value как один объект ---------- */
.kv { display: grid; grid-template-columns: max-content 1fr; column-gap: var(--gap-inline); row-gap: var(--space-1); align-items: baseline; margin: 0; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; }

/* ---------- StatRow: серия метрик ---------- */
.stat-row { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); align-items: baseline; }
.stat-row .stat { display: inline-flex; gap: var(--space-1); align-items: baseline; white-space: nowrap; }
.stat-row .stat > span:first-child { color: var(--text-muted); }

/* ---------- Disclosure: уровень дерева/раскрывашки ----------
   Контент уровня наследует левую кромку ТЕКСТА заголовка через одни и те же
   переменные (--level-pad, --marker-w, --gap-inline) — «висящее описание»
   невозможно по построению. Иерархия: level 1 = контейнер, 2+ = без рамки. */
.disclosure { --level-pad: var(--pad-container); }
.disclosure > summary { display: flex; align-items: center; gap: var(--gap-inline); padding: var(--pad-control) var(--level-pad); cursor: pointer; list-style: none; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before { content: "▸"; display: inline-block; width: var(--marker-w); flex: none; color: var(--text-muted); }
.disclosure[open] > summary::before { content: "▾"; }
.disclosure > :not(summary) { padding-inline: calc(var(--level-pad) + var(--marker-w) + var(--gap-inline)) var(--level-pad); }
.disclosure[data-level="1"] { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-container); }
.disclosure[data-level="2"], .disclosure[data-level="3"] { background: transparent; border: 0; }
.disclosure > .body { padding-block: var(--pad-control) var(--pad-container); }

/* ---------- Toolbar: зоны контролов ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-section); }
.toolbar > .zone { display: flex; align-items: center; gap: var(--gap-inline); }
.toolbar > .zone > .zone-label { text-transform: uppercase; letter-spacing: 0.06em; }
.toolbar [data-role="danger"] { border-inline-start: 1px solid var(--line); padding-inline-start: var(--space-4); margin-inline-start: var(--space-1); }

/* ---------- Контролы ---------- */
.btn { padding: var(--pad-control) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-raised); color: var(--text); font: inherit; min-height: 44px; }
.btn[data-role="danger"] { color: var(--danger); border-color: var(--danger); }
/* Иерархия действий (C1 аудита, закон Хика): одна primary на зону */
.btn[data-variant="primary"]   { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn[data-variant="secondary"] { background: var(--surface-raised); }
.btn[data-variant="ghost"]     { background: transparent; border-color: transparent; }
.btn { transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard); }

/* ---------- Field: редактируемая пара label/control/hint/error (C1) ---------- */
.field { display: grid; gap: var(--space-1); }
.field > label { color: var(--text); }
.field > input, .field > select, .field > textarea { min-height: 44px; padding: var(--pad-control) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-raised); color: var(--text); font: inherit; }
.field > .hint { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.field > .error { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--danger); }
.field[data-state="error"] > input, .field[data-state="error"] > select, .field[data-state="error"] > textarea { border-color: var(--danger); }

/* ---------- Table: нативный элемент на ролях (позиция C1: не примитив, а стиль) ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: var(--pad-control) var(--space-3); border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.table th { color: var(--text-muted); font-size: var(--fs-caption); line-height: var(--lh-caption); text-transform: uppercase; letter-spacing: 0.06em; }
.table-wrap { overflow-x: auto; }
.pill { display: inline-flex; align-items: center; padding: 0 var(--space-2); border-radius: var(--radius-pill); font-size: var(--fs-caption); line-height: var(--lh-caption); border: 1px solid var(--line); }
.pill[data-state="ok"]     { color: var(--ok);     border-color: var(--ok); }
.pill[data-state="warn"]   { color: var(--warn);   border-color: var(--warn); }
.pill[data-state="danger"] { color: var(--danger); border-color: var(--danger); }

/* ---------- Исключения (rule of three) ----------
   [data-exception="причина"] — маркер одноразового отступления от системы.
   Стиля не несёт; system-lint считает их и требует причину. */
[data-exception] { }

/* ===== стили проекта ===== */
:root{
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;
  --fs-caption:12px; --lh-caption:16px;
  --fs-sm:14px; --lh-sm:20px;
  --fs-body:16px; --lh-body:24px;
  --fs-h3:20px; --lh-h3:28px;
  --fs-h2:28px; --lh-h2:36px;
  --fs-h1m:36px; --lh-h1m:40px;
  --fs-h1:52px; --lh-h1:56px;
  --gap-inline:var(--space-2); --gap-stack:var(--space-4); --gap-group:var(--space-6); --gap-section:var(--space-12);
  --pad-control:var(--space-3); --pad-container:var(--space-6);
  --radius-control:12px; --radius-container:20px; --radius-panel:28px; --radius-pill:999px;
  --surface-base:#F6F5FA; --surface-raised:#FFFFFF; --surface-sunken:#F1EFF7;
  --text:#16151B; --text-muted:#57546A; --line:#E7E5EF; --line-control:#858299;
  --accent:#16151B; --on-accent:#FFFFFF;
  --ok:#2A7348; --warn:#8F5606; --danger:#B3261E;
  --glow-1:#CDBDFF; --glow-2:#F7CBE6; --glow-3:#AFC0FF;
  --brand-red:#CC2F1C; --logo-ink:#16151B; --logo-w:168px;
  --tint-1:#ECE6FF; --tint-2:#FCE4F1; --tint-3:#E2E8FF;
  --font-body:"Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display:"Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:ui-monospace, "Cascadia Mono", Consolas, monospace;
  --measure:60ch; --lead-measure:44ch;
  --hair:1px; --ring:2px; --dot:8px;
  --control-h:44px; --panel-max:1040px; --content-max:560px;
  --gi-sm:20px; --gi-md:40px; --gi-lg:48px; --gi-xl:72px;
  --glow-size:420px; --glow-blur:80px; --glow-opacity:.55;
  --shadow-card:0 24px 48px -24px rgba(48,36,110,.22), 0 2px 6px rgba(48,36,110,.06);
  --shadow-float:0 8px 24px -8px rgba(48,36,110,.3);
  --track-tight:-0.02em; --track-label:0.06em;
  --duration-fast:120ms; --duration-base:200ms; --easing-standard:cubic-bezier(0.2,0,0,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --surface-base:#121118; --surface-raised:#1B1A22; --surface-sunken:#23212C;
    --text:#F1F0F6; --text-muted:#AAA7BB; --line:#2C2A36; --line-control:#6F6C80;
    --accent:#F1F0F6; --on-accent:#16151B;
    --ok:#7FCF9A; --warn:#E2B25E; --danger:#F08A80;
    --glow-1:#4B3F8F; --glow-2:#6A3A63; --glow-3:#33407F; --glow-opacity:.5;
    --logo-ink:#F3EDE2; --tint-1:#2D2747; --tint-2:#3A2537; --tint-3:#232B4A;
    --shadow-card:0 24px 48px -24px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3);
    --shadow-float:0 8px 24px -8px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --surface-base:#121118; --surface-raised:#1B1A22; --surface-sunken:#23212C;
  --text:#F1F0F6; --text-muted:#AAA7BB; --line:#2C2A36; --line-control:#6F6C80;
  --accent:#F1F0F6; --on-accent:#16151B;
  --ok:#7FCF9A; --warn:#E2B25E; --danger:#F08A80;
  --glow-1:#4B3F8F; --glow-2:#6A3A63; --glow-3:#33407F; --glow-opacity:.5;
  --logo-ink:#F3EDE2; --tint-1:#2D2747; --tint-2:#3A2537; --tint-3:#232B4A;
  --shadow-card:0 24px 48px -24px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3);
  --shadow-float:0 8px 24px -8px rgba(0,0,0,.6);
  color-scheme:dark;
}

body{background:var(--surface-base);color:var(--text);font:var(--fs-body)/var(--lh-body) var(--font-body);padding-inline:var(--space-4);padding-block:var(--space-4) var(--space-16);min-height:100%}
h1,h2,h3{font-family:var(--font-display);letter-spacing:var(--track-tight)}
h1{font-size:var(--fs-h1m);line-height:var(--lh-h1m);font-weight:600}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:600}
@media (min-width:40em){ h1{font-size:var(--fs-h1);line-height:var(--lh-h1)} body{padding-block:var(--space-8) var(--space-16)} }
b,strong{font-weight:600}
.sm{font-size:var(--fs-sm);line-height:var(--lh-sm)}
.muted{color:var(--text-muted)}
a{color:var(--text);text-underline-offset:var(--space-1)}
.sr{position:absolute;width:var(--hair);height:var(--hair);overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[tabindex="-1"]:focus{outline:none}
.stack[data-gap="group"]{gap:var(--gap-group)}
.stack[data-gap="hair"]{gap:var(--space-1)}
.stack[data-gap="wide"]{gap:var(--space-8)}

/* glow-bg */
.glow-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.glow-bg i{position:absolute;width:var(--glow-size);height:var(--glow-size);border-radius:var(--radius-pill);filter:blur(var(--glow-blur));opacity:var(--glow-opacity)}
.glow-bg i:nth-child(1){background:var(--glow-1);left:calc(var(--glow-size) / -3);bottom:calc(var(--glow-size) / -4)}
.glow-bg i:nth-child(2){background:var(--glow-2);right:calc(var(--glow-size) / -3);top:calc(var(--glow-size) / -4)}
.glow-bg i:nth-child(3){background:var(--glow-3);right:calc(var(--glow-size) / -2);bottom:calc(var(--glow-size) / -2)}

/* panel */
.panel{position:relative;max-width:var(--panel-max);margin-inline:auto;background:color-mix(in srgb, var(--surface-raised) 72%, transparent);border:var(--hair) solid var(--line);border-radius:var(--radius-panel);padding:var(--space-8) var(--space-4) var(--space-12);overflow:hidden;backdrop-filter:blur(var(--space-6))}
@media (min-width:40em){ .panel{padding:var(--space-12) var(--space-8)} }
.rays{position:absolute;left:50%;top:0;width:calc(var(--panel-max) * 1.15);height:calc(var(--panel-max) * .96);translate:-50% 0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,var(--text) 0%,transparent 80%);mask-image:linear-gradient(to bottom,var(--text) 0%,transparent 80%)}
.rays .ray-l{fill:none;stroke:var(--line);stroke-width:1}
.rays .ray-w1{fill:var(--tint-1)}
.rays .ray-w2{fill:var(--tint-2)}
@media (max-width:40em){ .rays{width:calc(var(--panel-max) * .9)} }
.inner{position:relative;max-width:var(--content-max);margin-inline:auto}

/* ---------- gi: глиф-иконка. Плитка фиксированного размера, глиф маской с фиксированным полем ---------- */
.gi{position:relative;display:block;flex:none;width:var(--gi-box);height:var(--gi-box);border-radius:var(--radius-pill);background:var(--gi-bg, transparent)}
.gi::after{content:"";position:absolute;inset:var(--gi-pad);background:var(--text);-webkit-mask:var(--u) center/contain no-repeat;mask:var(--u) center/contain no-repeat}
.gi-md{--gi-box:var(--gi-md)} .gi-lg{--gi-box:var(--gi-lg)} .gi-xl{--gi-box:var(--gi-xl)}

/* Lucide (ISC) в пастельных кругах в тон свечению */
.gi-md{--gi-pad:var(--space-2)}
.gi-lg{--gi-pad:var(--space-3)}
.gi-xl{--gi-pad:var(--space-4)}
.gi[data-tone="1"]{--gi-bg:var(--tint-1)}
.gi[data-tone="2"]{--gi-bg:var(--tint-2)}
.gi[data-tone="3"]{--gi-bg:var(--tint-3)}
.gi[data-i="anon"]{--u:url("/static/icons/shield-check.svg")}
.gi[data-i="named"]{--u:url("/static/icons/signature.svg")}
.gi[data-i="personal"]{--u:url("/static/icons/lock-keyhole.svg")}
.gi[data-i="write"]{--u:url("/static/icons/pen-line.svg")}
.gi[data-i="check"]{--u:url("/static/icons/search-check.svg")}
.gi[data-i="answer"]{--u:url("/static/icons/message-square-reply.svg")}
.gi[data-i="done"]{--u:url("/static/icons/circle-check.svg")}


/* hero */
/* ===== айдентика «Рупор» (гайд: design/logo/final/logo_kit.html) ===== */
.logo{display:flex;justify-content:center;text-decoration:none}
.logo svg{display:block;width:var(--logo-w);height:auto}
@media (min-width:40em){ :root{--logo-w:192px} }
.logo .lr{fill:var(--brand-red)}
.logo .li{fill:var(--logo-ink)}
a.logo:focus-visible{outline:var(--ring) solid var(--text);outline-offset:var(--space-2);border-radius:var(--space-1)}
.hero,.hero-text{text-align:center;align-items:center}
.hero p{max-width:var(--lead-measure);text-wrap:balance}
.badge{display:inline-block;max-width:100%;box-sizing:border-box;padding:var(--space-3) var(--space-4);text-wrap:balance;border-radius:var(--radius-pill);background:var(--surface-sunken);font-size:var(--fs-sm);line-height:var(--lh-sm);text-decoration:none}
.badge span{text-decoration:underline;text-underline-offset:var(--space-1)}
.pulse::before{content:"";display:inline-block;vertical-align:middle;margin-inline-end:var(--space-2);width:var(--dot);height:var(--dot);border-radius:var(--radius-pill);background:var(--ok);box-shadow:0 0 0 var(--space-1) color-mix(in srgb, var(--ok) 20%, transparent)}

/* form-card — единственная тень (signature) */
.form-card{background:var(--surface-raised);border:var(--hair) solid var(--line);border-radius:var(--radius-container);padding:var(--pad-container) var(--space-4);box-shadow:var(--shadow-card)}
@media (min-width:40em){ .form-card{padding:var(--space-8)} }

fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0 0 var(--space-2);font-weight:600}

/* chip-choice */
.chip-choice{display:flex;flex-wrap:wrap;gap:var(--gap-inline)}
@media (max-width:30em){ .chip-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} }
.chip{position:relative;display:grid}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;min-height:var(--control-h);padding:var(--space-2) var(--space-4);border:var(--hair) solid var(--line-control);border-radius:var(--radius-pill);background:var(--surface-raised);font-size:var(--fs-sm);line-height:var(--lh-sm);transition:background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard)}
.chip input:checked + span{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.chip input:focus-visible + span{outline:var(--ring) solid var(--text);outline-offset:var(--ring)}

/* mode-choice */
.mode-choice{display:grid;gap:var(--space-3)}
.mode{position:relative;display:grid;grid-template-columns:auto 1fr auto;column-gap:var(--space-4);align-items:center;min-height:var(--space-16);box-sizing:border-box;padding:var(--space-3);border:var(--hair) solid var(--line-control);border-radius:var(--radius-control);cursor:pointer}
.mode input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.mode:has(input:checked){border-color:var(--text);box-shadow:inset 0 0 0 var(--hair) var(--text);background:var(--surface-sunken)}
.mode:has(input:focus-visible){outline:var(--ring) solid var(--text);outline-offset:var(--ring)}
.mode-text{display:grid;gap:var(--space-1)}
.mode b{font-weight:600}
.mode small{display:none;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text-muted)}
.mode:has(input:checked) small{display:block}
.radio{width:var(--gi-sm);height:var(--gi-sm);border-radius:var(--radius-pill);border:var(--ring) solid var(--line-control);box-sizing:border-box}
.mode:has(input:checked) .radio{border:calc(var(--space-1) + var(--ring)) solid var(--text)}
@media (max-width:22.5em){ .mode{grid-template-columns:1fr auto} .mode .gi{display:none} }
.mode-choice > .field{padding-block:0 var(--space-2)}

/* field */
.field{display:grid;gap:var(--space-2)}
.field > p{margin:0}
.field label,.field-row > label{font-weight:600}
.field > input,.field > select,.field > textarea{min-height:var(--control-h);padding:var(--pad-control);border:var(--hair) solid var(--line-control);border-radius:var(--radius-control);background:var(--surface-raised);color:var(--text);font:inherit}
.field > textarea{min-height:calc(var(--control-h) * 3);resize:vertical}
/* editor: поле с оформлением как в Telegram и MAX */
.lbl{font-weight:600;cursor:default}
.editor-wrap{position:relative}
.editor{box-sizing:border-box;min-height:calc(var(--control-h) * 3);max-height:calc(var(--control-h) * 9);overflow-y:auto;padding:var(--pad-control);border:var(--hair) solid var(--line-control);border-radius:var(--radius-control);background:var(--surface-raised);color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;outline:none}
.editor:focus-visible{outline:var(--ring) solid var(--text);outline-offset:var(--ring)}
.editor:empty::before{content:attr(data-placeholder);color:var(--text-muted);pointer-events:none}
.editor > *{margin:0}
.editor blockquote{padding:var(--space-1) var(--space-3);border-inline-start:var(--space-1) solid var(--glow-1);border-radius:var(--space-1);background:var(--tint-1)}
.editor b,.editor strong{font-weight:600}
.field[data-state="error"] .editor{border-color:var(--danger);box-shadow:inset 0 0 0 var(--hair) var(--danger)}
.fmt{position:absolute;z-index:3;display:flex;gap:var(--space-1);padding:var(--space-1);border-radius:var(--radius-control);background:var(--accent);box-shadow:var(--shadow-card)}
.fmt button{display:grid;place-items:center;min-width:var(--control-h);min-height:var(--control-h);padding:0;border:0;border-radius:var(--space-2);background:transparent;color:var(--on-accent);font:inherit;font-size:var(--fs-body);cursor:pointer}
.fmt button[aria-pressed="true"]{background:color-mix(in srgb, var(--on-accent) 22%, transparent)}
.fmt button:focus-visible{outline:var(--ring) solid var(--on-accent);outline-offset:calc(var(--ring) * -1)}
.fmt svg{width:var(--gi-sm);height:var(--gi-sm)}
.hint,.field > .hint{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text-muted)}
.error,.field > .error{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--danger)}
.field[data-state="error"] > textarea,.field[data-state="error"] > input,.field[data-state="error"] > select{border-color:var(--danger);box-shadow:inset 0 0 0 var(--hair) var(--danger)}
.field-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-1) var(--gap-inline)}
.field-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-1) var(--gap-inline)}
.counter{font-variant-numeric:tabular-nums}
.counter[data-state="warn"]{color:var(--warn)}
.prompt-out:empty{display:none}
.prompt-out{padding:var(--space-2) var(--space-3);border-radius:var(--radius-control);background:var(--surface-sunken);font-size:var(--fs-sm);line-height:var(--lh-sm)}

.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:var(--gap-inline);min-height:var(--control-h);padding:var(--pad-control) var(--space-6);border-radius:var(--radius-pill);border:var(--hair) solid var(--line-control);background:var(--surface-raised);color:var(--text);font:inherit;font-weight:600;cursor:pointer}
.btn[data-variant="primary"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);width:100%}
.btn[data-variant="ghost"]{background:transparent;border-color:transparent;padding-inline:var(--space-2);font-size:var(--fs-sm);line-height:var(--lh-sm)}
.field-row .btn[data-variant="ghost"]{min-height:auto;padding-block:var(--space-1)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn svg{width:var(--gi-sm);height:var(--gi-sm)}

.notice:empty{display:none}
.notice{display:grid;gap:var(--space-1);padding:var(--pad-control);border-radius:var(--radius-control);background:var(--surface-sunken);font-size:var(--fs-sm);line-height:var(--lh-sm)}
.notice[data-state="warn"] b{color:var(--warn)}
.notice[data-state="danger"] b{color:var(--danger)}

/* how */
.steps{display:grid;gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));list-style:none;padding:0;margin:0}
.steps li{display:grid;gap:var(--space-3);justify-items:center;align-content:start;text-align:center}
.steps .n{font-size:var(--fs-caption);line-height:var(--lh-caption);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted);font-weight:600}
.steps p{max-width:24ch}
.center{display:flex;justify-content:center}
.link-btn{display:inline-flex;align-items:center;min-height:var(--control-h);font-size:var(--fs-sm);line-height:var(--lh-sm)}

/* sent */
.sent{text-align:center;gap:var(--space-8)}
.sent-head{align-items:center}
.sent-head p{max-width:var(--lead-measure);text-wrap:balance}
.copied:empty{display:none}
.ticket{box-sizing:border-box;display:grid;gap:var(--space-2);justify-items:center;padding:var(--pad-container);border:var(--hair) dashed var(--line-control);border-radius:var(--radius-container);background:var(--surface-sunken)}
.ticket .code{font-family:var(--font-mono);font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:600;letter-spacing:var(--track-label);font-variant-numeric:tabular-nums;user-select:all}
.next{display:grid;grid-template-columns:max-content 1fr;column-gap:var(--space-4);row-gap:var(--space-3);text-align:start;margin:0}
.next dt{color:var(--text-muted)}
.next dd{margin:0}
@media (max-width:30em){ .next{grid-template-columns:1fr;row-gap:0} .next dd{padding-block-end:var(--space-3)} }

.foot{display:grid;justify-items:center;gap:var(--space-1);text-align:center;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text-muted)}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--space-4)}
.foot a{display:inline-flex;align-items:center;min-height:var(--control-h)}
.foot p{max-width:var(--lead-measure);text-wrap:balance}


[hidden]{display:none !important}
@media (prefers-reduced-motion: reduce){ *{transition:none !important} }

/* переключатель темы (общий) */
:root[data-theme="light"]{color-scheme:light}
.thm{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1);border:var(--hair) solid var(--line-control);border-radius:var(--radius-pill);background:var(--surface-raised)}
.thm button{display:inline-grid;place-items:center;width:var(--space-8);height:var(--space-8);padding:0;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text-muted);cursor:pointer}
.thm button[aria-pressed="true"]{background:var(--surface-sunken);color:var(--text)}
.thm i{display:block;width:var(--space-4);height:var(--space-4);background:currentColor;-webkit-mask:var(--u) center/contain no-repeat;mask:var(--u) center/contain no-repeat}
.thm [data-t="auto"] i{--u:url("/static/icons/monitor.svg")}
.thm [data-t="light"] i{--u:url("/static/icons/sun.svg")}
.thm [data-t="dark"] i{--u:url("/static/icons/moon.svg")}
@media (pointer:coarse){ .thm button{width:var(--control-h);height:var(--control-h)} }