/* base.css - единая основа UI Controller32: вшитые шрифты, токены :root (дословно из
   design/Controller32.dc.html), ресет, keyframes. Один источник для всех экранов и kitchen-sink. */

/* Шрифты вшиты локально (self-host, без Google Fonts): клиент офлайн. */
@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/onest-cyrillic-400.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('fonts/onest-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215}
@font-face{font-family:'Onest';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/onest-cyrillic-500.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:500;font-display:swap;src:url('fonts/onest-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215}
@font-face{font-family:'Onest';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/onest-cyrillic-600.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('fonts/onest-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215}
@font-face{font-family:'Onest';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/onest-cyrillic-700.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:700;font-display:swap;src:url('fonts/onest-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215}
@font-face{font-family:'Onest';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/onest-cyrillic-800.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:800;font-display:swap;src:url('fonts/onest-latin-800.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jbmono-cyrillic-400.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jbmono-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/jbmono-cyrillic-500.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/jbmono-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/jbmono-cyrillic-600.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/jbmono-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215}

/* Токены дизайна (перенесены дословно из design/Controller32.dc.html :root) */
:root{
  /* поверхности */
  --canvas:#121415; --rail:#17191B; --surface:#1B1E20; --surface-2:#1E2123;
  --surface-3:#212527; --surface-4:#24282A; --terminal:#16191B; --chip:#272B2D;
  --btn:#222629; --btn-2:#191F21; --disabled:#2B2E30; --toggle-off:#3E4245;
  --stripe:#202325; --dots:#262A2C;
  /* границы */
  --line:#2A2E30; --line-soft:#26292B; --line-row:#232628; --line-mid:#2E3234;
  --line-strong:#333739; --line-btn:#383C3F; --line-input:#43474A; --line-hover:#4B4F52;
  --edge:#404447;
  /* текст */
  --text:#ECEEED; --text-2:#D7DAD9; --text-3:#CBCFCE; --text-muted:#ADB2B0;
  --text-dim:#9CA1A0; --text-mono:#949A98; --text-faint:#8A908E; --text-off:#868B89;
  --term-dim:#868D8A;
  /* акцент */
  --accent:#6FB79C; --accent-hover:#82C6AC; --accent-soft:#A3C9B9; --accent-soft-2:#B4D3C7;
  --accent-deep:#4E8871; --accent-num:#8FBCA6; --on-mark:#F2F5F4; --accent-deeper:#33574A; --accent-dim:#7E918A; --on-accent:#0D1714;
  /* ВТОРОЙ АКЦЕНТ. Один акцент на весь продукт делал кабинет монотонным: всё, что не «хорошо»,
     «внимание» или «беда», оставалось серым - заголовки разделов, подписи колонок, вкладки,
     пустые состояния. Цвет в таком интерфейсе значит только тревогу, а спокойных акцентов нет
     вовсе, и экран читается как сплошная серая плита.
     Взят прохладный сине-фиолетовый: он не спорит с зелёным (тот остаётся брендом и «всё
     хорошо») и, главное, НЕ ПУТАЕТСЯ с жёлтым «внимание» и красным «беда». Тёплый второй акцент
     тут был бы невозможен по этой же причине. Он несмысловой намеренно: им подсвечивают
     структуру, а не состояние. */
  --accent2:#8E9BE0; --accent2-soft:#AAB4E9; --accent2-deep:#6470B8; --accent2-dim:#7A83B5;
  --accent2-line:#3B4166; --accent2-ghost:rgba(142,155,224,0.10); --accent2-tint:rgba(142,155,224,0.055);
  --link-hover:#8AEACB; --accent-line:#40564D; --accent-line-2:#37483F;
  --accent-line-dashed:#3C4B45; --accent-line-hover:#4E645C;
  --accent-ghost:rgba(111,183,156,0.10); --accent-ghost-hover:rgba(111,183,156,0.19);
  --nav-active:rgba(111,183,156,0.11);
  /* статусы */
  --ok:#6FB79C; --ok-text:#A3C9B9; --ok-bg:rgba(111,183,156,0.13);
  --ok-tint:rgba(111,183,156,0.06); --ok-icon:rgba(111,183,156,0.15); --ok-line:#37483F;
  --warn:#C2A578; --warn-text:#D2BC98; --warn-bg:rgba(194,165,120,0.14);
  --warn-tint:rgba(194,165,120,0.06); --warn-icon:rgba(194,165,120,0.15); --warn-line:#3A342A;
  --risk:#C9857A; --risk-text:#D9A096; --risk-bg:rgba(201,133,122,0.14);
  --risk-tint:rgba(201,133,122,0.06); --risk-icon:rgba(201,133,122,0.16);
  --risk-ghost:rgba(201,133,122,0.09); --risk-ghost-hover:rgba(201,133,122,0.18);
  --risk-line:#3A302E; --risk-line-strong:#59403C;
  --info:#9BB0C0; --info-text:#9BB0C0; --info-bg:rgba(155,176,192,0.13); --info-line:#3A4548;
  /* слои */
  --overlay:rgba(10,12,13,0.72); --scrim:rgba(18,20,21,0.9);
  --shadow-modal:0 40px 90px rgba(0,0,0,0.6); --shadow-pop:0 22px 48px rgba(0,0,0,0.55);
  --shadow-float:0 10px 26px rgba(0,0,0,0.35); --shadow-toast:0 20px 50px rgba(0,0,0,0.55);
  /* Освещённая верхняя кромка поверхности: тонкая светлая линия, из-за которой карточка читается
     объектом, а не наклейкой. Значение жило литералом в двух правилах ui.css, и каждая новая
     секция копировала его к себе третьим и четвёртым разом. Здесь оно одно на весь продукт. */
  --edge-light:inset 0 1px 0 rgba(255,255,255,0.035);
  /* скругления по ролям */
  --r-key:5px; --r-chip:6px; --r-badge:7px; --r-btn-sm:8px; --r-btn:9px; --r-input:10px;
  --r-plate:11px; --r-plate-lg:12px; --r-card:14px; --r-section:16px; --r-modal:18px; --r-pill:999px;
  /* шкала отступов */
  --s-1:4px; --s-2:6px; --s-3:8px; --s-4:10px; --s-5:12px; --s-6:14px;
  --s-7:16px; --s-8:20px; --s-9:22px; --s-10:26px;
  /* типографика */
  /* ШКАЛА РАЗМЕРОВ ТЕКСТА. Её не было вовсе, и это корень претензии «дизайн не проработан»:
     кегли жили литералами прямо в разметке, 13 разных значений в одном только ui.css, и любой
     новый экран изобретал размер заново, потому что выбирать было не из чего.

     Замер по боевому коду: 12px встречается 143 раза, 12.5px - 132, 11.5px - 113, 11px - 95,
     10.5px - 72, 13px - 66. Шесть почти неразличимых ступеней в диапазоне полутора пикселей -
     это не иерархия, это шум. Шкала ниже сводит их к пяти внятным ролям.

     Названы по НАЗНАЧЕНИЮ, а не по размеру: «подпись» останется подписью, даже если завтра
     решим сделать её на полпикселя крупнее, и переименовывать по всему продукту не придётся. */
  --t-hero:27px;   /* заголовок экрана, один на странице */
  --t-metric:21px; /* число показателя: то, ради чего владелец пришёл */
  --t-title:15px;  /* заголовок карточки или события */
  --t-body:13px;   /* обычный текст, который читают */
  --t-label:12px;  /* подпись под значением, вторичная строка */
  --t-meta:11px;   /* служебное: чипы, счётчики, время */
  --t-caps:10.5px; /* НАДЗАГОЛОВОК капсом с разрядкой */

  --f-ui:'Onest',system-ui,sans-serif; --f-mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--canvas)}
/* Базовый цвет текста ОБЯЗАН стоять на body: всё, что не выставило color само, иначе
   наследует чёрный по умолчанию от браузера и садится чёрным на тёмную поверхность.
   Так пропадал заголовок модалки (.modal__title цвет не задаёт). Правим в корне, а не
   по одному селектору - иначе следующий элемент без color принесёт ту же беду. */
/* Перенос длинных слов ОБЯЗАН стоять в корне: домены, UUID, имена нод, названия регионов -
   единым «словом» без пробелов вылезали за рамку карточек/плашек/тултипов (жалоба «слово
   вылазит за границу, не видно целиком»). overflow-wrap наследуется -> чиним разом везде, а не
   по одному экрану. break-word (а не anywhere) не ломает интринсик кнопок/коротких меток. */
body{font-family:var(--f-ui);-webkit-font-smoothing:antialiased;color:var(--text);overflow-wrap:break-word}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--link-hover)}
input,button,textarea{font-family:inherit}
input::placeholder{color:var(--text-faint)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--canvas)}
::-webkit-scrollbar-thumb{background:var(--line-mid);border-radius:var(--r-btn-sm);border:2px solid var(--canvas)}
::-webkit-scrollbar-thumb:hover{background:var(--info-line)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}}
@keyframes c32rail{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes c32pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes c32in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes c32spin{to{transform:rotate(360deg)}}
@keyframes c32flow{to{stroke-dashoffset:-32}}
@keyframes c32shine{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes c32sheet{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}