/* RABOT — дизайн-система (R-26): токены и компоненты прототипа владельца rabot-prototype_27.html один в один.
   Источник: прототип Коли 14.10.2026 (<style>: :root, «app shell», «atoms», KPI, tables, score, forms, report,
   modal, tabs, pricing, login), разбор PM — prototip/RAZBOR.md §1. С R-32 — две темы: тёмная «родная» (прототип,
   значения :root не менялись) и светлая (решение PM R-32 §2 п. 2; набор — docs/theme.md). Без выбора работает
   системная (prefers-color-scheme), ручной выбор — атрибут data-theme на <html> из cookie rabot_theme.
   Шрифты — свои файлы static/fonts (в прототипе — Google Fonts; у нас без запросов на чужие домены).
   Сверх прототипа (решение исполнителя): .brand для любой шапки, .notice, мобильная полоса .mbar с бургером
   без JavaScript (чекбокс #nav-toggle + label), боковая панель прилипает к экрану, .modal на <dialog>,
   печать (@media print). Лендинг — свой файл static/landing.css (стили прототипа под .rb-home).
   R-44 (прототип v53, просьба владельца 16.10): светлая тема — тёплая гамма v53 с поправкой контраста; телефон
   до 640 px — списки карточками «в два ряда» (.tbl.cards), поля 16 px, касание 44 px; кабинет как приложение на
   рабочем столе (html.is-app — static/cabinet-app.js). */

/* ── Шрифты ─────────────────────────────────────────────────────────────────────────────────── */
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/unbounded-400.woff2') format('woff2')}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/unbounded-600.woff2') format('woff2')}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/unbounded-700.woff2') format('woff2')}
@font-face{font-family:'Onest';font-style:normal;font-weight:300;font-display:swap;src:url('/static/fonts/onest-300.woff2') format('woff2')}
@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/onest-400.woff2') format('woff2')}
@font-face{font-family:'Onest';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/onest-500.woff2') format('woff2')}
@font-face{font-family:'Onest';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/onest-600.woff2') format('woff2')}

/* ── Токены. Тёмная тема — «родная»: :root прототипа один в один (R-26), сверх прототипа — значения, которые
   раньше были зашиты в правилах (R-32 вынес их в токены, тёмные значения те же; в v53 владелец сделал то же —
   значения тёмной не изменились). Светлая (R-44) — тёплая «бумажная» гамма прототипа v53 (:root[data-theme="light"],
   v53:42–76; соответствие имён — docs/theme.md) с поправкой контраста: --ink-3 #8A8268 → #69634F (3,2 → 4,6:1 к
   --card-2), лайм текстом и шкалами — оливковые --accent-text #546100 / --accent-edge, --accent-fill #6A7A00 (у
   владельца лайм #9FB800 текстом — 1,9:1), статусы на своих подложках — на тон темнее (ok #156B3C → #146639, warn
   #8A5A00 → #7B5000, bad #B23323 → #A22E20); лайм кнопок #9FB800 с тёмным текстом (8,2:1) — как у владельца.
   Два одинаковых блока: [data-theme="light"] (ручной выбор) и медиазапрос без data-theme (системная). Цвет в
   правилах — только var(--…); rgba(var(--…-rgb),a) — полупрозрачные подложки плашек: в тёмной — яркие цвета
   прототипа, в светлой — сами цвета статусов (как chip-*-bg v53), --accent-rgb — лайм / оливковый.
   Проверки — tests/test_theme.py, tests/test_r44_theme.py. ────────────────────────────────────────────────── */
:root{
  --bg:#0A0A0C;
  --surface:#131317;
  --card:#1B1B1F;
  --card-2:#232329;
  --line:#2C2C33;
  --line-soft:#212127;
  --line-strong:#3A3A44;
  --ink:#F2F2F0;
  --ink-2:#A5A5AD;
  --ink-3:#6E6E78;
  --lime:#D7FF00;
  --lime-ink:#0A0A0C;
  --lime-edge:#D7FF00;
  --accent-text:#D7FF00;
  --accent-edge:#D7FF00;
  --accent-fill:#D7FF00;
  --accent-bg:#16180C;
  --accent-line:#3A4310;
  --accent-grad:#1F2405;
  --accent-grad-2:#16190A;
  --score-grad:#141416;
  --cand-bubble:#1C1F08;
  --meter-track:#2A2F10;
  --ok:#63E39A;
  --warn:#FFC24B;
  --warn-solid:#FFC24B;
  --bad:#FF6B5E;
  --info:#7FB2FF;
  --stop-bg:#241010;
  --stop-line:#4A1F1F;
  --qr-bg:#FFFFFF;
  --bg-rgb:10,10,12;
  --accent-rgb:215,255,0;
  --ok-rgb:99,227,154;
  --warn-rgb:255,194,75;
  --bad-rgb:255,107,94;
  --info-rgb:127,178,255;
  --ok-ink:#63E39A;
  --warn-ink:#FFC24B;
  --bad-ink:#FF6B5E;
  --chip-warn-bg:rgba(255,194,75,.12);
  --chip-warn-border:rgba(255,194,75,.25);
  --on-status:#0A0A0C;
  --on-warn:#0A0A0C;
  --plq-pad:0;
  --plq-align:right;
  --plq-ok:transparent;
  --plq-warn:transparent;
  --plq-bad:transparent;
  --plq-ok-ink:var(--ok-ink);
  --plq-warn-ink:var(--warn-ink);
  --plq-bad-ink:var(--bad-ink);
  --plq-hi-ink:var(--accent-text);
  --plq-sub:var(--ink-3);
  --plq-warn-sub:var(--ink-3);
  --bar-hi:var(--accent-fill);
  --mini-accent:var(--accent-text);
  --scrim:rgba(5,5,6,.68);
  --scrim-soft:rgba(5,5,6,.6);
  --shadow-lg:0 20px 60px rgba(0,0,0,.5);
  --r-s:8px; --r-m:14px; --r-l:20px;
  --display:'Unbounded','Trebuchet MS',sans-serif;
  --body:'Onest','Segoe UI',system-ui,sans-serif;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#EFE9DB;
  --surface:#F8F4EA;
  --card:#F9F6EC;
  --card-2:#E9E1CC;
  --line:#D9CFB3;
  --line-soft:#E3DAC0;
  --line-strong:#C2B690;
  --ink:#211D14;
  --ink-2:#5B5440;
  --ink-3:#69634F;
  --lime:#9FB800;
  --lime-ink:#15140A;
  --lime-edge:#9FB800;
  --accent-text:#546100;
  --accent-edge:#6A7A00;
  --accent-fill:#6A7A00;
  --accent-bg:#EDE6C2;
  --accent-line:#C6B96E;
  --accent-grad:#E9E2B3;
  --accent-grad-2:#F2EFD9;
  --score-grad:#F9F6EC;
  --cand-bubble:#F2EFD9;
  --meter-track:#DED1AC;
  --ok:#117A42;
  --warn:#F2C400;
  --warn-solid:#FFC24B;
  --bad:#C92E1C;
  --info:#1A579E;
  --stop-bg:#F6E1DA;
  --stop-line:#DFA996;
  --bg-rgb:239,233,219;
  --accent-rgb:106,122,0;
  --ok-rgb:17,122,66;
  --warn-rgb:242,196,0;
  --bad-rgb:201,46,28;
  --info-rgb:26,87,158;
  --ok-ink:#0E6637;
  --warn-ink:#6B5000;
  --bad-ink:#A82617;
  --chip-warn-bg:rgba(242,196,0,.22);
  --chip-warn-border:rgba(242,196,0,.55);
  --on-status:#FFFFFF;
  --on-warn:#211D14;
  --plq-pad:2px 9px;
  --plq-align:center;
  --plq-ok:var(--ok);
  --plq-warn:var(--warn);
  --plq-bad:var(--bad);
  --plq-ok-ink:var(--on-status);
  --plq-warn-ink:var(--on-warn);
  --plq-bad-ink:var(--on-status);
  --plq-hi-ink:var(--on-status);
  --plq-sub:var(--on-status);
  --plq-warn-sub:var(--on-warn);
  --bar-hi:var(--ok);
  --mini-accent:var(--ink);
  --scrim:rgba(33,29,20,.45);
  --scrim-soft:rgba(33,29,20,.35);
  --shadow-lg:0 20px 60px rgba(33,29,20,.18);
  color-scheme:light;
}
@media (prefers-color-scheme:light){
:root:not([data-theme]){
  --bg:#EFE9DB;
  --surface:#F8F4EA;
  --card:#F9F6EC;
  --card-2:#E9E1CC;
  --line:#D9CFB3;
  --line-soft:#E3DAC0;
  --line-strong:#C2B690;
  --ink:#211D14;
  --ink-2:#5B5440;
  --ink-3:#69634F;
  --lime:#9FB800;
  --lime-ink:#15140A;
  --lime-edge:#9FB800;
  --accent-text:#546100;
  --accent-edge:#6A7A00;
  --accent-fill:#6A7A00;
  --accent-bg:#EDE6C2;
  --accent-line:#C6B96E;
  --accent-grad:#E9E2B3;
  --accent-grad-2:#F2EFD9;
  --score-grad:#F9F6EC;
  --cand-bubble:#F2EFD9;
  --meter-track:#DED1AC;
  --ok:#117A42;
  --warn:#F2C400;
  --warn-solid:#FFC24B;
  --bad:#C92E1C;
  --info:#1A579E;
  --stop-bg:#F6E1DA;
  --stop-line:#DFA996;
  --bg-rgb:239,233,219;
  --accent-rgb:106,122,0;
  --ok-rgb:17,122,66;
  --warn-rgb:242,196,0;
  --bad-rgb:201,46,28;
  --info-rgb:26,87,158;
  --ok-ink:#0E6637;
  --warn-ink:#6B5000;
  --bad-ink:#A82617;
  --chip-warn-bg:rgba(242,196,0,.22);
  --chip-warn-border:rgba(242,196,0,.55);
  --on-status:#FFFFFF;
  --on-warn:#211D14;
  --plq-pad:2px 9px;
  --plq-align:center;
  --plq-ok:var(--ok);
  --plq-warn:var(--warn);
  --plq-bad:var(--bad);
  --plq-ok-ink:var(--on-status);
  --plq-warn-ink:var(--on-warn);
  --plq-bad-ink:var(--on-status);
  --plq-hi-ink:var(--on-status);
  --plq-sub:var(--on-status);
  --plq-warn-sub:var(--on-warn);
  --bar-hi:var(--ok);
  --mini-accent:var(--ink);
  --scrim:rgba(33,29,20,.45);
  --scrim-soft:rgba(33,29,20,.35);
  --shadow-lg:0 20px 60px rgba(33,29,20,.18);
  color-scheme:light;
}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-edge);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Словесный знак: лаймовая плашка «R» + RABOT ────────────────────────────────────────────── */
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.03em;color:var(--ink);text-decoration:none}
.brand .r{width:26px;height:26px;border-radius:50%;background:var(--lime);color:var(--lime-ink);display:grid;place-items:center;font-size:14px;flex:none}

/* ── Переключатель темы (R-32): пара кнопок «солнце / луна» — видна та, что ведёт в другую тему (решает CSS по
   data-theme и медиазапросу, без мигания). Разметка — templates/_theme.html, нажатие — static/theme.js, в админке —
   форма POST /admin/theme. Места: шапка боковой панели справа от знака, полоса телефона, шапка простой страницы,
   карточка входа. ───────────────────────────────────────────────────────────────────────────────────────── */
.theme-tg{display:inline-flex;align-items:center;flex:none;margin:0}
.theme-tg .theme-btn{display:inline-grid;place-items:center;gap:0;width:34px;height:34px;padding:0;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--ink-2);cursor:pointer;flex:none}   /* .theme-tg — сильнее .nav button */
.theme-tg .theme-btn:hover{color:var(--ink);border-color:var(--line-strong);background:transparent}
.theme-tg .theme-btn svg{width:16px;height:16px;display:block}
.theme-tg .theme-btn[data-theme-to="dark"]{display:none}
:root[data-theme="light"] .theme-tg .theme-btn[data-theme-to="light"]{display:none}
:root[data-theme="light"] .theme-tg .theme-btn[data-theme-to="dark"]{display:inline-grid}
@media (prefers-color-scheme:light){
  :root:not([data-theme]) .theme-tg .theme-btn[data-theme-to="light"]{display:none}
  :root:not([data-theme]) .theme-tg .theme-btn[data-theme-to="dark"]{display:inline-grid}
}
.side > .theme-tg{position:absolute;top:16px;right:14px}
.topbar .theme-tg,.rp-topbar .theme-tg{margin:-4px 0}   /* шапка простой страницы не становится выше */
.login .box{position:relative}
.login .box > .theme-tg{position:absolute;top:37px;right:32px}
@media (max-width:900px){.side > .theme-tg{display:none}}
@media (max-width:560px){.login .box > .theme-tg{top:29px;right:18px}}

/* ── Каркас кабинета: shell / side / main ───────────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh;background:linear-gradient(to right,var(--surface) 235px,var(--line) 235px,var(--line) 236px,transparent 236px)}
.side{border-right:1px solid var(--line);background:var(--surface);padding:20px 14px;display:flex;flex-direction:column;gap:22px;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.side .brand{padding:0 8px}
.side .org{padding:0 8px;margin-top:-14px;font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav{display:flex;flex-direction:column;gap:2px}
.nav .cap{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:10px 10px 6px}
.nav a,.nav button{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-s);color:var(--ink-2);text-align:left;text-decoration:none}
.nav a:hover,.nav button:hover{background:var(--card);color:var(--ink)}
.nav a[aria-current="page"],.nav button[aria-current="page"]{background:var(--card-2);color:var(--ink);font-weight:500}
.nav .ic{width:16px;text-align:center;opacity:.8}
.nav .cnt{margin-left:auto;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.balance{margin-top:auto;border:1px solid var(--line);border-radius:var(--r-m);padding:14px;background:var(--card)}
.balance .n{font-family:var(--display);font-size:24px;font-weight:600;line-height:1}
.balance .l{font-size:11.5px;color:var(--ink-3);margin-top:6px}
.balance .bar{height:4px;border-radius:2px;background:var(--line);margin-top:12px;overflow:hidden}
.balance .bar i{display:block;height:100%;background:var(--accent-fill);width:0}
.balance .btn{margin-top:12px;width:100%;justify-content:center;padding:8px;border-radius:var(--r-s);border:1px solid var(--line);font-size:12.5px;color:var(--ink-2);background:transparent}
.balance .btn:hover{border-color:var(--accent-edge);color:var(--accent-text)}
.side-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px;font-size:12px;color:var(--ink-3)}
.side-foot form{margin:0}
.side-foot button{color:var(--ink-3);font-size:12px;padding:4px 6px;border-radius:6px}
.side-foot button:hover{color:var(--ink);background:var(--card)}

.main{padding:26px 34px 60px;max-width:1180px;min-width:0}
.page-head{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.page-head h1{font-size:26px}
.page-head .sub{color:var(--ink-3);font-size:13px;margin-top:6px}
.page-head .act{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.back{display:inline-flex;margin-bottom:10px}

/* Мобильная полоса и бургер (≤ 900 px): панель выезжает слева, закрывается тапом по фону. */
.nav-toggle{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.mbar{display:none}
.burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;cursor:pointer;flex:none;border-radius:var(--r-s)}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.side-backdrop{display:none}

/* ── Атомы ──────────────────────────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--r-s);font-size:13px;font-weight:500;line-height:1.3;
  border:1px solid var(--line);color:var(--ink);background:var(--card);transition:.15s;text-decoration:none;cursor:pointer;font-family:inherit}
.btn:hover{border-color:var(--line-strong)}
.btn.pri{background:var(--lime);color:var(--lime-ink);border-color:var(--lime-edge);font-weight:600}
.btn.pri:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 11px;font-size:12px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn.danger{color:var(--bad-ink);background:transparent;border-color:rgba(var(--bad-rgb),.35)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:500;border:1px solid transparent;white-space:nowrap}
.chip.ok{background:rgba(var(--ok-rgb),.12);color:var(--ok-ink);border-color:rgba(var(--ok-rgb),.25)}
.chip.warn{background:var(--chip-warn-bg);color:var(--warn-ink);border-color:var(--chip-warn-border)}
.chip.bad{background:rgba(var(--bad-rgb),.12);color:var(--bad-ink);border-color:rgba(var(--bad-rgb),.25)}
.chip.info{background:rgba(var(--info-rgb),.12);color:var(--info);border-color:rgba(var(--info-rgb),.25)}
.chip.mute{background:var(--card-2);color:var(--ink-2);border-color:var(--line)}
.chip.lime{background:var(--lime);color:var(--lime-ink)}
.chip.soon{background:transparent;color:var(--ink-3);border-color:var(--line);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-m);padding:18px}
.card.flush{padding:18px 0}
.card.lime{border-color:var(--accent-line);background:var(--accent-bg)}
.card h3{font-size:14px}
.card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 18px 14px}
.card-head h3{font-size:14px}
.card-head .act{margin-left:auto;display:flex;gap:8px}
.grid{display:grid;gap:14px}
.muted{color:var(--ink-3)}
.tnum{font-variant-numeric:tabular-nums}
.lead{color:var(--ink-2);font-size:13px;margin-top:8px}
.empty{padding:18px;color:var(--ink-3);font-size:13px}
.notice{border-radius:var(--r-m);padding:12px 16px;margin-bottom:16px;font-size:13px;border:1px solid var(--line);background:var(--card)}
.notice.ok{background:rgba(var(--ok-rgb),.08);color:var(--ok-ink);border-color:rgba(var(--ok-rgb),.25)}
.notice.warn{background:rgba(var(--warn-rgb),.08);color:var(--warn-ink);border-color:rgba(var(--warn-rgb),.25)}
.notice.bad{background:rgba(var(--bad-rgb),.08);color:var(--bad-ink);border-color:rgba(var(--bad-rgb),.25)}
.notice.info{background:rgba(var(--info-rgb),.08);color:var(--info);border-color:rgba(var(--info-rgb),.25)}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-m);padding:16px 18px}
.kpi .l{font-size:11.5px;color:var(--ink-3);letter-spacing:.03em}
.kpi .v{font-family:var(--display);font-size:30px;font-weight:600;line-height:1.1;margin-top:10px}
.kpi .d{font-size:11.5px;margin-top:8px;color:var(--ink-3)}
.kpi .d b{color:var(--ok-ink);font-weight:500}
.kpi.accent{background:linear-gradient(180deg,var(--accent-grad),var(--accent-grad-2));border-color:var(--accent-line)}
.kpi.accent .v{color:var(--accent-text)}

/* Таблицы */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  padding:0 14px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--card-2)}
.tbl tbody tr[data-href]{cursor:pointer}
.tbl a.row-link{color:var(--ink);text-decoration:none;font-weight:500}
.tbl a.row-link:hover{color:var(--accent-text)}
.tbl .who{display:flex;align-items:center;gap:11px}
.av{width:32px;height:32px;border-radius:50%;background:var(--card-2);border:1px solid var(--line);display:grid;place-items:center;
  font-size:12px;font-weight:600;color:var(--ink-2);flex:none}
.wrap-x{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Балл */
.score{display:inline-flex;align-items:baseline;gap:4px;font-family:var(--display);font-weight:600;font-variant-numeric:tabular-nums}
.score b{font-size:17px}
.score > span{font-size:11px;color:var(--ink-3)}   /* «/100»; число — <b> (в т. ч. с <span data-score> внутри — R-44) */
/* R-67 (чейнджлог 28.10): в светлой теме балл — плашка-пилюля (заливка статусом, белый текст на зелёном и красном,
   тёмный на жёлтом); в тёмной — цветное число как было (токены --plq-*: прозрачная заливка и нулевой отступ). */
.score.s-hi,.score.s-mid,.score.s-lo{border-radius:999px;padding:var(--plq-pad)}
.score.s-hi{background:var(--plq-ok)}
.score.s-mid{background:var(--plq-warn)}
.score.s-lo{background:var(--plq-bad)}
.score.s-hi b{color:var(--plq-ok-ink)}
.score.s-mid b{color:var(--plq-warn-ink)}
.score.s-lo b{color:var(--plq-bad-ink)}
.score.s-hi > span,.score.s-lo > span{color:var(--plq-sub)}
.score.s-mid > span{color:var(--plq-warn-sub)}

/* Формы */
.form{display:grid;gap:18px;max-width:760px}
.fs{border:1px solid var(--line-soft);border-radius:var(--r-m);background:var(--card);padding:20px;margin:0;min-width:0}
.fs > h3{font-size:14px;letter-spacing:0;margin-bottom:4px}
.fs > .fh{font-size:12px;color:var(--ink-3);margin-bottom:16px}
.fs.lime{border-color:var(--accent-line);background:var(--accent-bg)}
.fld{display:grid;gap:6px;margin-bottom:14px;min-width:0;align-content:start}
.fld:last-child{margin-bottom:0}
.fld label{font-size:12.5px;color:var(--ink-2);display:flex;gap:8px;align-items:center}
.fld label .req{color:var(--accent-text);font-size:10px}
.fld .help{font-size:11.5px;color:var(--ink-3)}
.fld .err{font-size:12px;color:var(--bad-ink)}
.fld.has-err .inp{border-color:var(--bad)}
.help{font-size:11.5px;color:var(--ink-3)}
.inp{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px;color:var(--ink);font-family:inherit;font-size:13px;width:100%;min-width:0}
.inp.otp{letter-spacing:6px;font-size:18px;text-align:center;font-weight:600}
.inp:focus{border-color:var(--accent-edge);outline:none}
.inp[readonly]{background:transparent;color:var(--ink-2)}
.inp::placeholder{color:var(--ink-3)}
textarea.inp{min-height:74px;resize:vertical;line-height:1.55}
select.inp{appearance:auto}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.check{display:flex;gap:10px;align-items:center;font-size:13px;cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--lime);flex:none}

/* Отчёт */
.rep{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
.rep-block{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-m);padding:20px;margin-bottom:14px}
.rep-block h3{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-family:var(--body);font-weight:600;margin-bottom:14px}
.sig{border-top:1px solid var(--line-soft);padding:13px 0}
.sig:first-of-type{border-top:0;padding-top:0}
.sig .top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sig .nm{font-weight:500;font-size:13.5px}
.sig .pts{margin-left:auto;font-family:var(--display);font-size:13px;font-variant-numeric:tabular-nums}
.sig .why{font-size:12.5px;color:var(--ink-2);margin-top:7px;max-width:62ch}
.skill-bar{display:flex;align-items:center;gap:10px;margin-top:9px}
.skill-bar .meter{flex:1;margin-top:0}
.meter.sm{height:5px}
.skill-bar b{font-family:var(--display);font-size:12.5px;font-variant-numeric:tabular-nums;min-width:34px;text-align:var(--plq-align);
  border-radius:999px;padding:var(--plq-pad);background:var(--plq-ok);color:var(--plq-hi-ink)}
.skill-bar .meter i{background:var(--bar-hi)}
.skill-bar.bad .meter i{background:var(--bad)}
.skill-bar.bad b{background:var(--plq-bad);color:var(--plq-bad-ink)}
.skill-bar.warn .meter i{background:var(--warn)}
.skill-bar.warn b{background:var(--plq-warn);color:var(--plq-warn-ink)}
.stop-banner{display:flex;gap:12px;align-items:flex-start;background:var(--stop-bg);border:1px solid var(--stop-line);border-radius:var(--r-m);padding:16px 18px;margin-bottom:14px}
.stop-banner .ic{font-size:18px;line-height:1;color:var(--bad-ink)}
.stop-banner h4{font-size:13.5px;color:var(--bad-ink);margin-bottom:5px}
.stop-banner p{font-size:12.5px;color:var(--ink-2);max-width:62ch}
.big-score{background:linear-gradient(160deg,var(--accent-grad),var(--score-grad));border:1px solid var(--accent-line);border-radius:var(--r-m);padding:20px;text-align:center}
.big-score .v{font-family:var(--display);font-size:56px;font-weight:700;line-height:1;color:var(--accent-text)}
.big-score .l{font-size:12px;color:var(--ink-2);margin-top:8px}
.big-score.stop{background:linear-gradient(160deg,var(--stop-bg),var(--score-grad));border-color:var(--stop-line)}
.big-score.stop .v{color:var(--bad-ink)}
.big-score.stop .meter i{background:var(--bad)}
.big-score.mid .v{color:var(--warn-ink)}
.big-score.mid .meter i{background:var(--warn)}
.meter{height:6px;border-radius:3px;background:var(--meter-track);margin-top:16px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent-fill)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line-soft);font-size:12.5px}
.kv:first-of-type{border-top:0}
.kv span{color:var(--ink-3)}
.qa{border-left:2px solid var(--line);padding:2px 0 2px 14px;margin-bottom:14px}
.qa:last-child{margin-bottom:0}
.qa .q{font-size:12.5px;color:var(--ink-3);margin-bottom:5px}
.qa .a{font-size:13px;max-width:64ch}
.bul{display:grid;gap:9px;font-size:13px;max-width:64ch}
.bul div{display:flex;gap:9px}
.bul .m{flex:none;font-weight:600}
.bul .m.p{color:var(--ok-ink)} .bul .m.n{color:var(--bad-ink)}

/* Модальное окно (прототип .modal-overlay/.modal-box) и стенограмма */
.modal-overlay{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:24px;z-index:80}
.modal-overlay.hidden{display:none}
.modal-box{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-m);width:100%;max-width:640px;max-height:84vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);color:var(--ink)}
dialog.modal-box{padding:0;margin:auto}
dialog.modal-box::backdrop{background:var(--scrim,rgba(5,5,6,.68))}   /* старые браузеры не наследуют переменные в ::backdrop */
dialog.modal-box:not([open]){display:none}
dialog.modal-box[open]{display:flex}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line-soft)}
.modal-head h3{font-size:15px}
.modal-close{background:var(--card-2);border:1px solid var(--line);color:var(--ink-2);width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:13px;line-height:1;flex:none}
.modal-close:hover{color:var(--ink)}
.modal-body{padding:20px;overflow-y:auto}
.chat-row{display:flex;margin-bottom:16px}
.chat-row.ai{justify-content:flex-start}
.chat-row.cand{justify-content:flex-end}
.chat-col{max-width:80%}
.chat-row.cand .chat-col{display:flex;flex-direction:column;align-items:flex-end}
.chat-lbl{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.chat-bubble{padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.5}
.chat-row.ai .chat-bubble{background:var(--card-2);border:1px solid var(--line);border-bottom-left-radius:4px}
.chat-row.cand .chat-bubble{background:var(--cand-bubble);border:1px solid var(--accent-line);color:var(--ink);border-bottom-right-radius:4px}
.chat-flag{display:inline-flex;align-items:center;gap:5px;background:var(--stop-bg);border:1px solid var(--stop-line);color:var(--bad-ink);font-size:10.5px;letter-spacing:.03em;padding:3px 9px;border-radius:20px;margin-top:6px}

/* Вкладки */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:20px}
.tabs a,.tabs button{padding:10px 14px;font-size:13px;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none}
.tabs [aria-selected="true"],.tabs [aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent-edge)}

/* Тарифы */
.plans{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.plan{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-m);padding:18px;display:flex;flex-direction:column;gap:10px}
.plan.cur{border-color:var(--accent-edge);background:var(--accent-bg)}
.plan .nm{font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.04em}
.plan .pr{font-family:var(--display);font-size:22px;font-weight:600}
.plan .pr small{font-size:11px;color:var(--ink-3);font-family:var(--body);font-weight:400}
.plan .iv{font-size:12.5px;color:var(--ink-2)}
.plan .fo{font-size:11.5px;color:var(--ink-3);flex:1}
.plan .btn{width:100%;justify-content:center;margin-top:4px}
.plan form{margin:0}

/* Вход и регистрация */
.login{min-height:100vh;display:grid;place-items:center;padding:40px 20px}
.login .box{width:100%;max-width:420px;background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-l);padding:32px}
.login .r{width:44px;height:44px;border-radius:50%;background:var(--lime);color:var(--lime-ink);display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:22px;margin-bottom:20px;text-decoration:none}
.login h1{font-size:22px}
.login .form{margin-top:20px;max-width:none}
.role-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.role-card{border:1px solid var(--line);border-radius:var(--r-m);padding:14px 12px;text-align:left;background:var(--surface);display:flex;flex-direction:column;gap:4px;color:var(--ink);text-decoration:none;cursor:pointer}
.role-card .ic{font-size:20px}
.role-card .t{font-weight:600;font-size:13.5px}
.role-card .d{font-size:11.5px;color:var(--ink-3);line-height:1.4}
.role-card[aria-pressed="true"],.role-card[aria-current="page"],.role-card.on,input:checked + .role-card{border-color:var(--accent-edge);background:var(--accent-bg)}
.role-opt{position:relative;display:block}
.role-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.role-opt input:focus-visible + .role-card{outline:2px solid var(--accent-edge);outline-offset:2px}

/* ── Адаптив (прототип: 1080 и 820 px; бургер — с 900 px по брифу) ─────────────────────────── */
@media (max-width:1080px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:repeat(2,1fr)}
  .rep{grid-template-columns:1fr}
}
@media (max-width:900px){
  .shell{grid-template-columns:1fr;grid-template-rows:auto 1fr;background:none}
  .mbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:60;height:56px;padding:0 8px 0 16px;
    background:rgba(var(--bg-rgb),.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .mbar .bal{margin-left:auto;font-size:12px;color:var(--ink-3);white-space:nowrap}
  .mbar .bal b{color:var(--ink);font-family:var(--display);font-weight:600}
  .burger{display:flex}
  .side{position:fixed;top:56px;left:0;bottom:0;width:min(300px,86vw);height:auto;z-index:70;transform:translateX(-102%);transition:transform .25s ease;border-right:1px solid var(--line)}
  .side > .brand{display:none}
  .side-backdrop{position:fixed;inset:56px 0 0 0;background:var(--scrim-soft);z-index:65}
  .nav-toggle:checked ~ .shell .side{transform:none}
  .nav-toggle:checked ~ .shell .side-backdrop{display:block}
  .nav-toggle:checked ~ .shell .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked ~ .shell .burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .shell .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-toggle:focus-visible ~ .shell .burger{outline:2px solid var(--accent-edge);outline-offset:2px}
}
@media (max-width:820px){
  .main{padding:20px 16px 50px}
  .two{grid-template-columns:1fr}
  .page-head .act{margin-left:0}
}
@media (max-width:560px){
  .kpis{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr}
  .role-pick{grid-template-columns:1fr}
  .login .box{padding:24px 18px}
  .kpi .v{font-size:24px}
}

/* ── Телефон до 640 px (R-44): списки карточками «в два ряда», поля ≥ 16 px, касание ≥ 44 px ───────────────────
   Карточки — та же разметка таблицы с классом .tbl.cards (отдельной разметки для телефона нет): шапка скрыта,
   строка <tr> — карточка-флекс. Первый ряд — ячейка .c-main (имя / название, растягивается) и .c-side (балл,
   сумма, кнопка — прижата вправо); второй ряд — прочие ячейки подряд в порядке разметки (статус, дата…), за ними
   .c-tail (вакансия, ссылка — после ключевых полей), .c-grow растягивается, длинный текст — .c-wide на всю ширину;
   ряд действий — .c-act (ссылки и кнопки во всю строку, ссылка — кнопкой). Перенос между рядами — пустой tr::before
   на 100 % ширины; порядок — order (разметка и шапка таблицы на компьютере не меняются).
   Ячейка с data-label="Интервью" показывает подпись перед числом (у числа без шапки нет смысла); .c-hide —
   украшение, которое на телефоне не нужно (шкала категорий). Выше 640 px — прежняя таблица.
   Поля и кнопки: 16 px — iPhone не увеличивает страницу при нажатии на поле (порог 16 px); высота касания 44 px;
   лендинг (body.landing) — свой вид прототипа, его не трогаем. Селекторы с :root body — сильнее .btn.sm,
   .side-foot button и прочих размеров компонентов. */
@media (max-width:640px){
  .tbl.cards,.tbl.cards > tbody{display:block;width:100%}
  .tbl.cards > thead{display:none}
  .tbl.cards > tbody > tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px 16px;
    border-bottom:1px solid var(--line-soft)}
  .tbl.cards > tbody > tr:last-child{border-bottom:0}
  .tbl.cards > tbody > tr::before{content:"";order:3;flex:0 0 100%;height:0;margin-top:-6px}
  .tbl.cards > tbody > tr > td{display:block;order:4;flex:0 1 auto;min-width:0;max-width:100%;padding:0;border:0;
    white-space:normal;overflow-wrap:anywhere}
  .tbl.cards > tbody > tr > td.c-main{order:1;flex:1 1 0;font-weight:500}
  .tbl.cards > tbody > tr > td.c-side{order:2;flex:none;margin-left:auto;text-align:right}
  .tbl.cards > tbody > tr > td.c-tail{order:5}
  .tbl.cards > tbody > tr > td.c-grow{flex:1 1 0}
  .tbl.cards > tbody > tr > td.c-wide{flex:1 1 100%}
  .tbl.cards > tbody > tr > td.c-act{order:6;flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:0}
  .tbl.cards > tbody > tr > td.c-act > *{flex:1 1 auto;justify-content:center;font-size:16px}
  .tbl.cards > tbody > tr > td.c-act > a:not(.btn){display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
    border:1px solid var(--line);border-radius:var(--r-s);text-decoration:none;color:var(--ink)}
  .tbl.cards > tbody > tr > td.c-hide{display:none}
  .tbl.cards > tbody > tr > td[data-label]::before{content:attr(data-label) ": ";color:var(--ink-3);font-weight:400}
  .tbl.cards > tbody > tr > td.c-main .who{gap:10px}

  :root body:not(.landing) :is(input:not([type=checkbox],[type=radio],[type=range]),select,textarea,button,.btn){font-size:16px}
  :root body:not(.landing) :is(input:not([type=checkbox],[type=radio],[type=range],[type=hidden]),select,button,.btn){min-height:44px}
  :root body:not(.landing) :is(.inp.otp,.otp-fld .inp){font-size:20px}
  :root body:not(.landing) .btn{min-width:44px;justify-content:center}
  :root body:not(.landing) .theme-tg .theme-btn{width:44px;height:44px}
  :root body:not(.landing) .modal-close{width:44px;height:44px}
  .check{min-height:44px}
  .seg__item,.tabs a,.tabs button{min-height:44px;display:inline-flex;align-items:center}
}
/* Полоса телефона: колонка каркаса не шире экрана (иначе широкая полоса раздвигает страницу), баланс / статус
   шлюза ужимается многоточием, а не выталкивает переключатель темы и бургер (44 px) за край. Вырез экрана
   (viewport-fit=cover): поля по безопасной зоне — в альбомной ориентации и над полосой «домой». */
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .mbar{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
  .mbar .bal{min-width:0;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:640px){.mbar{gap:8px}}
@media (max-width:820px){
  .main{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));
    padding-bottom:calc(50px + env(safe-area-inset-bottom))}
  .two > .fld{margin-bottom:0}                  /* пара полей в одну колонку: ровный шаг 14 px между всеми полями */
  .two:not(:last-child){margin-bottom:14px}
}

/* ── Кабинет как приложение (R-44): static/cabinet-app.js ставит html.is-app, когда страница открыта значком с
   рабочего стола (display-mode: standalone; на iPhone — navigator.standalone). Тогда же запрещено масштабирование
   пальцами (мета viewport — тот же скрипт; touch-action — для Safari, который user-scalable=no не слушает) и нет
   выделения текста долгим нажатием на кнопках и пунктах меню, как у приложений. В обычной вкладке браузера —
   ничего из этого. ─────────────────────────────────────────────────────────────────────────────────────────── */
html.is-app{touch-action:pan-x pan-y;-webkit-tap-highlight-color:transparent}
html.is-app :is(.btn,button,.nav a,.mbar,.burger){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* ── Печать (отчёт «Скачать PDF» = window.print) ────────────────────────────────────────────── */
@media print{
  :root,:root[data-theme],:root:not([data-theme]){   /* сильнее обоих светлых блоков: бумага одна при любой теме */
    --bg:#FFFFFF;--surface:#FFFFFF;--card:#FFFFFF;--card-2:#F3F3F3;--line:#D6D6D6;--line-soft:#E4E4E4;--ink:#111111;--ink-2:#333333;
    --ink-3:#666666;--lime:#5B6B00;--lime-ink:#FFFFFF;--lime-edge:#5B6B00;--accent-text:#5B6B00;--accent-edge:#5B6B00;--accent-fill:#5B6B00;
    --accent-bg:#FFFFFF;--accent-line:#D6D6D6;--accent-grad:#FFFFFF;--accent-grad-2:#FFFFFF;--score-grad:#FFFFFF;--cand-bubble:#F8FAEA;
    --meter-track:#E4E4E4;--stop-bg:#FFFFFF;--stop-line:#D6D6D6;--ok:#13733F;--warn:#8A5A00;--bad:#B82D22;--info:#245FBE;
    --bg-rgb:255,255,255;--accent-rgb:91,107,0;
    --ok-ink:#13733F;--warn-ink:#8A5A00;--bad-ink:#B82D22;--chip-warn-bg:#FFFFFF;--chip-warn-border:#D6D6D6;--on-status:#FFFFFF;
    --on-warn:#111111;--plq-pad:0;--plq-align:right;--plq-ok:transparent;--plq-warn:transparent;--plq-bad:transparent;
    --plq-ok-ink:var(--ok-ink);--plq-warn-ink:var(--warn-ink);--plq-bad-ink:var(--bad-ink);--plq-hi-ink:var(--accent-text);
    --plq-sub:var(--ink-3);--plq-warn-sub:var(--ink-3);--bar-hi:var(--accent-fill);--mini-accent:var(--ink);
    color-scheme:light;
  }
  body{font-size:12px}
  .side,.mbar,.side-backdrop,.no-print,.page-head .act,.modal-overlay,dialog{display:none!important}
  .shell{display:block;background:none}
  .rep{display:flex;flex-direction:column;align-items:stretch}
  .rep > :last-child{order:-1}
  .main{padding:0;max-width:none}
  .card,.rep-block,.kpi,.big-score{box-shadow:none;break-inside:avoid;background:var(--card)}
  .big-score .v{color:var(--ink)}
  a{text-decoration:none}
}
.balance .warn-text{color:var(--warn-ink)}
.grid > *{min-width:0}