/* Общий фундамент для обоих концептов. Числа — из HIG (iOS 18): Large Title 34, Title2 22,
   Body 17, Subhead 15, Footnote 13, Caption 11; строка списка не ниже 44; inset grouped —
   радиус 10, боковые поля 16. Один акцент (системный синий), семантика только для статусов. */
:root{
  --font:-apple-system,BlinkMacSystemFont,system-ui,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Фон страницы темнее эталонного iOS #F2F2F7 (владелец, 2026-09-02 — «плашки с текстом чуть
     отличимее на общем фоне»). --card2 (вторичная поверхность внутри карточки: шапка таблицы,
     раскрытая строка) стоит МЕЖДУ фоном и карточкой, три уровня читаются как три. Тот же цвет
     продублирован в index.html (theme-color) и core.js applyTheme (шапка Telegram) — менять все
     три вместе. Оформление 2026-09-21 (владелец выбрал вариант D — почерк B на палитре A) меняет
     оттенок с холодного серого на тёплый песочный. Правка того же дня (владелец: «плашки должны
     отделяться контрастно») потребовала фон ЗАМЕТНО темнее белой карточки — от исходного #EFEDE8
     переноса до #E5E4DF: отношение яркостей белая карточка/фон 1.27:1 (порог владельца — не менее
     1.25:1, формула WCAG как в audit.py; на #EFEDE8 было только 1.17:1). */
  --bg:#E5E4DF; --card:#FFFFFF; --card2:#F7F5F1; --chrome:rgba(252,250,246,.86);
  /* --label2 плотнее системного .6 (визуальный аудит 2026-09-13) — правило контраста прежнее,
     .8 к тёплому фону/карточке держит те же ~4.9:1 / ~5.9:1. --label — тёплый почти-чёрный вместо
     чистого #000 (оформление 2026-09-21): на песочном фоне чистый чёрный выглядит «напечатанным
     сверху». */
  --label:#1A1714; --label2:rgba(66,58,48,.88); --label3:rgba(66,58,48,.32);
  /* Прозрачные двойники фона и карточки: градиент «цвет → прозрачный» строим по ним,
     а не через `transparent` — Safari интерполирует transparent через серый и даёт шов. */
  --bg-0:rgba(229,228,223,0); --card-0:rgba(255,255,255,0);
  --sep:rgba(84,70,50,.34); --fill:rgba(120,105,85,.14); --fill2:rgba(120,105,85,.07);
  /* Акцент — спокойный синий вместо системного #007AFF (владелец, 2026-09-13), правило то же:
     --accent — синий для ТЕКСТА и иконок, --accent-fill — для ЗАЛИВКИ под белой надписью, путать
     нельзя (белый текст — только на --accent-fill). Оформление 2026-09-21 (вариант D) сдвигает сам
     оттенок под тёплую палитру: #2B5FA8 даёт 6.4:1 на белом, 5.4:1 на фоне, белая надпись на
     заливке 6.4:1 — с запасом над порогом 4.5. */
  --accent:#2B5FA8; --accent-fill:#2B5FA8; --accent-soft:rgba(43,95,168,.10);
  /* Пятна фонового слоя (.bgfx, см. app.css): первое — тёплый блик акцентного оттенка, второе
     выключено. Правка 2026-09-21 (владелец: «не вижу градиента фона как в пресетах») ОТМЕНЯЕТ
     прежнее правило «на грани различимости» — альфа поднята с .065. Первая попытка .16 давала на
     деле разницу в 5-9 уровней RGB у центра пятна (проверено побиксельно на кадре merged_preview_
     today_light.png) — глазом на телефоне это не читалось. Поднято до .28: у центра пятна это уже
     ~20-35 уровней разницы по каналам, видно без пригляда, а сам блик всё ещё за карточками (z-index
     слоя -1) и не касается текста. Второе пятно (fx2) не включаем — owner: «второе можно оставить
     выключенным» — одно тёплое пятно читается чище, чем два слабых. */
  --fx1:rgba(196,152,96,.28); --fx2:transparent; --fx3:rgba(255,255,255,.62); --fx4:rgba(43,95,168,.10);
  /* Бегунок полосы прокрутки (app.css «Полоса прокрутки»): тёмно-серый с прозрачностью, второй —
     под курсором. Не акцент: полоса — служебный элемент, спорить с контентом ей нельзя. Оттенок
     сдвинут в тёплый (2026-09-21) вслед за остальной палитрой. */
  --thumb:rgba(80,68,52,.30); --thumb2:rgba(80,68,52,.48);
  /* Тень текста — только у крупных заголовков и больших цифр (.t-large, .t-title, .kpi b,
     .score.lg b), и только в светлой теме: 1 px вниз при 5 % чёрного не читается как эффект, а
     чуть «прижимает» жирные знаки к серому фону, как краска к бумаге. На мелких подписях та же
     тень — шум, там её нет. В тёмной теме тёмная тень на тёмном бессмысленна, а светлое
     свечение читалось бы как эффект — там none. */
  --text-shadow:0 1px 1px rgba(0,0,0,.05);
  /* Зелёный приглушён на шаг от системного #34C759 (владелец, 2026-09-02: оценка «менее неоновая,
     спокойный деловой зелёный»): 3.0:1 к белой карточке вместо 2.2:1 — цифра оценки жирная 15 px,
     для такого текста это порог AA. Токен общий — тем же зелёным красятся точки, полосы и пилюли. */
  --ok:#2BAA4C; --warn:#FF9500; --bad:#FF3B30; --muted:#8E8E93; --violet:#5856D6; --teal:#30B0C7;
  /* Статусы ТЕКСТОМ — отдельные токены, темнее заливок (визуальный аудит 2026-09-13). --ok/--warn/
     --bad хороши как ЗАЛИВКА (полоски, точки, шкалы), но надписью на белой карточке тонут: оранжевый
     #FF9500 давал 2.2:1 (оценки 58–76, «ввести пробег», «Внимание»), зелёный 3.0:1 («норма», «В норме»),
     красный 3.55:1. Темнить сами --ok/--warn/--bad нельзя — полосы и точки стали бы бурыми, поэтому
     текст и пилюли берут эти: на белом 5.05 / 5.17 / 5.48, на своей подложке пилюли ≥4.5. */
  --ok-text:#1F7F3A; --warn-text:#A85800; --bad-text:#C92A20;
  /* Градация цифры оценки 0–100 по самому числу (ui.js::scoreColorVar, владелец 2026-09-02) —
     ОТДЕЛЬНЫЕ токены от --ok/--warn/--bad: те красят дискретные статусы регламента (пилюли,
     полосы .st, сортировку) в трёх состояниях, а тут четыре ступени по числу, и одолжить те же
     цвета значило бы, что смена палитры статусов молча перекрасит и шкалу оценки. Четыре ступени,
     а не три (ok/warn/bad): 85/70 — перенос порога словесной метки SCORE_LABELS, 50 — новая
     граница красного, ниже реального минимума парка на момент проверки (см. комментарий в ui.js).
     --score-fair и --score-warn — разные жёлтый и оранжевый, между --ok и --bad заметно два шага. */
  /* Цифра оценки — это ТЕКСТ (жирный 14–15 px), поэтому в светлой теме на ступень темнее прежних
     #2BAA4C/#B38F00/#FF9500/#FF3B30: аудит 2026-09-13 нашёл оранжевые 58–76 на 2.2:1 и зелёные 85 на
     2.5:1 в списке машин и журнале. Оттенки те же, светлота ниже — шкала по-прежнему читается как
     зелёный → жёлтый → оранжевый → красный. */
  --score-good:#1C7434; --score-fair:#7E6300; --score-warn:#8F4B00; --score-bad:#B72419;
  --r-s:8px; --r-m:12px; --r-l:12px; /* --r-m крупнее радиусов кнопок: оформление 2026-09-21, карточки в варианте D чуть скруглённее прежних */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px;
  --row:44px; --shadow:0 1px 2px rgba(60,45,30,.05),0 6px 20px rgba(60,45,30,.09); /* тень тёплая и заметнее прежней 2026-09-21 — владелец вернул тени поверх границы карточек (правка требований, см. app.css «Оформление 2026-09-21») */
  /* Безопасные поля по бокам. В index.html стоит viewport-fit=cover — страница РИСУЕТСЯ ПОД
     чёлкой/Dynamic Island, и обходить её обязана вёрстка. Неочевидное: в ландшафте вырез уходит
     не вверх, а ВБОК — при повороте влево остров съедает ~59 px слева, при повороте вправо
     столько же справа, и предсказать сторону нельзя, поэтому обе величины нужны всегда.
     Именно это владелец видит как «островок перекрывает меню слева»: рейка .side шириной 76 px
     стоит от x=0, и остров накрывает её иконки. Статическая проверка (playwright, getBoundingClientRect)
     такое не ловит — остров не элемент DOM, а железо, и в эмуляторе insets всегда 0.
     Запасное значение 0px в env() обязательно: без него в браузере, не знающем env(),
     всё правило становится невалидным и padding схлопывается в 0. */
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
  /* Боковое поле экрана: обычные 16 px, но не меньше выреза. max(), а не сумма — на телефоне без
     выреза (и в портрете, где inset слева/справа = 0) поля остаются ровно прежними 16 px. */
  --pad-l:max(var(--sp-4),var(--safe-l)); --pad-r:max(var(--sp-4),var(--safe-r));
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  /* Карточка поднята ещё раз, #242427 → #3A3A3D (владелец, 2026-09-02: «нихуя не видно вообще» —
     11%→15% светлоты хватило для WCAG-числа (1.36:1), но не для факта «плашка видна на чёрном
     фоне» — прошлая правка гналась за контрастом ТЕКСТА внутри карточки, а не карточки к фону.
     Правило осталось и в оформлении 2026-09-21 (вариант D, почерк B на палитре A): тёплый уголь
     #0E0C09 вместо чистого #000. --card светлее первого переноса (#3C3833 давал только 1.68:1) —
     правка того же дня («плашки контрастно») требует не менее 1.9:1, поднято до #45403A → 1.90:1
     (формула WCAG как в audit.py), и это же минимально держит текст --bad-text на карточке ≥4.5:1
     (при более тёмном card он проваливался). --card2 на ту же ступень выше, #4A453E. */
  --bg:#0E0C09; --card:#45403A; --card2:#4A453E; --chrome:rgba(48,44,39,.88);
  --label:#F7F4EF; --label2:rgba(240,234,224,.80); --label3:rgba(240,234,224,.30);
  --bg-0:rgba(14,12,9,0); --card-0:rgba(69,64,58,0);
  --sep:rgba(168,158,144,.72); --fill:rgba(160,148,130,.22); --fill2:rgba(160,148,130,.11);
  /* Тёмная тема: синий для текста, мягкий, без неона — см. историю оттенка в светлом блоке и
     визуальном аудите 2026-09-13. Оформление 2026-09-21 (вариант D) сдвигает его в тон тёплой
     палитры A: #9EB9EA к карточке #45403A, заливка кнопки #3A62A8.
     fx1/fx2 (пятна .bgfx, app.css). РЕШЕНИЕ ИЗМЕНЕНО 2026-09-22 владельцем: «на тёмной теме надо
     на фоне прорисовать элементы, как на светлом, градиенты, чтобы живее всё казалось». Прежнее
     требование («едва заметное тёплое свечение») выполнялось альфой 0.07 — на чёрном фоне это
     почти ноль, и тёмная тема выглядела плоской заливкой. Поднимаем тёплое пятно до 0.17 и
     ВКЛЮЧАЕМ второе — но не серое (именно серое пятно владелец и забраковал в прошлый раз), а
     холодное в тон акценту #9EB9EA: два разных по температуре пятна дают глубину, а не муть.
     Текст это не задевает вовсе: пятна лежат слоем -1, под непрозрачными карточками. */
  --accent:#9EB9EA; --accent-fill:#3A62A8; --accent-soft:rgba(158,185,234,.10);
  --fx1:rgba(214,170,110,.17); --fx2:rgba(122,150,205,.11); --fx3:rgba(255,222,176,.10); --fx4:rgba(110,150,230,.12);
  --thumb:rgba(180,170,155,.45); --thumb2:rgba(180,170,155,.65);
  --text-shadow:none;
  /* Тёмная тема: зелёный тоже на шаг темнее (#30D158 → #2DC553), 6.8:1 к карточке #242427 —
     запас над 4.5:1 большой, темнить сильнее незачем. */
  --ok:#2DC553; --warn:#FF9F0A; --bad:#FF453A; --muted:#8E8E93; --violet:#5E5CE6; --teal:#40C8E0;
  /* Текст статусов в тёмной теме — на ступень светлее заливок: красный «Менять» на своей подложке
     давал 2.99:1. Эти: 4.68 / 4.83 / 4.17 на подложке пилюли, 5.9 / 6.4 / 4.65 на карточке.
     --bad-text поднят ещё раз 2026-09-21 (вариант D, тёплая карточка): #FF8C85 даёт 4.56:1 на
     карточке #45403A — минимум над порогом 4.5:1 из правки требований, прежний #FF8078 после
     осветления карточки под контраст-тест владельца упал бы ниже 4.5. */
  --ok-text:#4CD471; --warn-text:#FFB340; --bad-text:#FF8C85;
  /* Градация цифры оценки (см. светлый блок выше) — жёлтый на тёмном фоне ярче, чем на белой
     карточке, иначе тонет в #242427; контраст к карточке ~11:1, запас больше, чем у --ok, потому
     что это не сплошная заливка пилюли, а сама цифра, ей нужнее выделиться. */
  /* Индекс состояния — ЧИСЛО, то есть текст, а не полоса: в тёмной теме он стоял на
     заливочных #2DC553/#FF9F0A/#FF453A и давал 4.13:1 при норме 4.5 (замер 2026-09-22,
     «Машины» на 1440). Берём те же текстовые варианты, что и --ok-text/--warn-text/--bad-text;
     жёлтый --score-fair и так светлый. Заливочные --ok/--warn/--bad остаются для полос. */
  --score-good:#4CD471; --score-fair:#FFD60A; --score-warn:#FFB340; --score-bad:#FF8C85;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 6px 22px rgba(0,0,0,.40);
}}
:root[data-theme="dark"]{
  /* Карточка поднята ещё раз, #242427 → #3A3A3D (владелец, 2026-09-02: «нихуя не видно вообще» —
     11%→15% светлоты хватило для WCAG-числа (1.36:1), но не для факта «плашка видна на чёрном
     фоне» — прошлая правка гналась за контрастом ТЕКСТА внутри карточки, а не карточки к фону.
     Правило осталось и в оформлении 2026-09-21 (вариант D, почерк B на палитре A): тёплый уголь
     #0E0C09 вместо чистого #000. --card светлее первого переноса (#3C3833 давал только 1.68:1) —
     правка того же дня («плашки контрастно») требует не менее 1.9:1, поднято до #45403A → 1.90:1
     (формула WCAG как в audit.py), и это же минимально держит текст --bad-text на карточке ≥4.5:1
     (при более тёмном card он проваливался). --card2 на ту же ступень выше, #4A453E. */
  --bg:#0E0C09; --card:#45403A; --card2:#4A453E; --chrome:rgba(48,44,39,.88);
  --label:#F7F4EF; --label2:rgba(240,234,224,.80); --label3:rgba(240,234,224,.30);
  --bg-0:rgba(14,12,9,0); --card-0:rgba(69,64,58,0);
  --sep:rgba(168,158,144,.72); --fill:rgba(160,148,130,.22); --fill2:rgba(160,148,130,.11);
  /* Тёмная тема: синий для текста, мягкий, без неона — см. историю оттенка в светлом блоке и
     визуальном аудите 2026-09-13. Оформление 2026-09-21 (вариант D) сдвигает его в тон тёплой
     палитры A: #9EB9EA к карточке #45403A, заливка кнопки #3A62A8.
     fx1/fx2 (пятна .bgfx, app.css). РЕШЕНИЕ ИЗМЕНЕНО 2026-09-22 владельцем: «на тёмной теме надо
     на фоне прорисовать элементы, как на светлом, градиенты, чтобы живее всё казалось». Прежнее
     требование («едва заметное тёплое свечение») выполнялось альфой 0.07 — на чёрном фоне это
     почти ноль, и тёмная тема выглядела плоской заливкой. Поднимаем тёплое пятно до 0.17 и
     ВКЛЮЧАЕМ второе — но не серое (именно серое пятно владелец и забраковал в прошлый раз), а
     холодное в тон акценту #9EB9EA: два разных по температуре пятна дают глубину, а не муть.
     Текст это не задевает вовсе: пятна лежат слоем -1, под непрозрачными карточками. */
  --accent:#9EB9EA; --accent-fill:#3A62A8; --accent-soft:rgba(158,185,234,.10);
  --fx1:rgba(214,170,110,.17); --fx2:rgba(122,150,205,.11); --fx3:rgba(255,222,176,.10); --fx4:rgba(110,150,230,.12);
  --thumb:rgba(180,170,155,.45); --thumb2:rgba(180,170,155,.65);
  --text-shadow:none;
  /* Тёмная тема: зелёный тоже на шаг темнее (#30D158 → #2DC553), 6.8:1 к карточке #242427 —
     запас над 4.5:1 большой, темнить сильнее незачем. */
  --ok:#2DC553; --warn:#FF9F0A; --bad:#FF453A; --muted:#8E8E93; --violet:#5E5CE6; --teal:#40C8E0;
  /* Текст статусов в тёмной теме — на ступень светлее заливок: красный «Менять» на своей подложке
     давал 2.99:1. Эти: 4.68 / 4.83 / 4.17 на подложке пилюли, 5.9 / 6.4 / 4.65 на карточке.
     --bad-text поднят ещё раз 2026-09-21 (вариант D, тёплая карточка): #FF8C85 даёт 4.56:1 на
     карточке #45403A — минимум над порогом 4.5:1 из правки требований, прежний #FF8078 после
     осветления карточки под контраст-тест владельца упал бы ниже 4.5. */
  --ok-text:#4CD471; --warn-text:#FFB340; --bad-text:#FF8C85;
  /* Градация цифры оценки (см. светлый блок выше) — жёлтый на тёмном фоне ярче, чем на белой
     карточке, иначе тонет в #242427; контраст к карточке ~11:1, запас больше, чем у --ok, потому
     что это не сплошная заливка пилюли, а сама цифра, ей нужнее выделиться. */
  /* Индекс состояния — ЧИСЛО, то есть текст, а не полоса: в тёмной теме он стоял на
     заливочных #2DC553/#FF9F0A/#FF453A и давал 4.13:1 при норме 4.5 (замер 2026-09-22,
     «Машины» на 1440). Берём те же текстовые варианты, что и --ok-text/--warn-text/--bad-text;
     жёлтый --score-fair и так светлый. Заливочные --ok/--warn/--bad остаются для полос. */
  --score-good:#4CD471; --score-fair:#FFD60A; --score-warn:#FFB340; --score-bad:#FF8C85;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 6px 22px rgba(0,0,0,.40);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Фон только у html, у body — нет. Фоновый слой .bgfx лежит на z-index:-1, а такой слой рисуется
   ПОСЛЕ фона корневого элемента, но ДО фонов обычных блоков; body с собственным фоном закрыл бы
   его целиком. Фон html растягивается на весь холст, так что визуально ничего не теряется. */
html{background:var(--bg)}
html,body{margin:0;color:var(--label);font-family:var(--font);
  font-size:17px;line-height:1.3;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{min-height:100svh}
h1,h2,h3,p{margin:0}
.t-large{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.08}
.t-title{font-size:22px;font-weight:700;letter-spacing:-.015em;line-height:1.15}
.t-large,.t-title{text-shadow:var(--text-shadow)}
.t-head{font-size:17px;font-weight:600;line-height:1.25}
.t-body{font-size:17px;line-height:1.3}
.t-sub{font-size:15px;line-height:1.3}
.t-foot{font-size:13px;line-height:1.35;color:var(--label2)}
.t-cap{font-size:11px;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;color:var(--label2);font-weight:600}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--label2)}
/* Отклик на нажатие — 85 мс до отпускания, 120 мс на возврат: владелец просил «моментально»,
   поэтому обе фазы вдвое короче прежних (100/220). Характер кривой не меняли — только длительность. */
.press{transition:transform .12s cubic-bezier(.22,1,.36,1),background-color .12s;cursor:pointer;user-select:none;touch-action:manipulation}
.press:active{transform:scale(.975);transition-duration:.085s}
@media (prefers-reduced-motion:reduce){.press{transition:none}.press:active{transform:none;opacity:.7}}
/* Inset grouped */
.group{background:var(--card);border-radius:var(--r-m);overflow:hidden}
.row{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--row);padding:0 var(--sp-4);position:relative}
.row+.row::before{content:"";position:absolute;left:var(--sp-4);right:0;top:0;height:1px;background:var(--sep);transform:scaleY(.5);transform-origin:top}
.row .grow{flex:1;min-width:0}
.row .chev{color:var(--label3);flex:none}
.ellip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Статусы */
.dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.bad{background:var(--bad)}.dot.muted{background:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:600;line-height:1;white-space:nowrap}
.pill.ok{background:rgba(52,199,89,.14);color:var(--ok-text)}
.pill.warn{background:rgba(255,149,0,.16);color:var(--warn-text)}
.pill.bad{background:rgba(255,59,48,.14);color:var(--bad-text)}
.pill.muted{background:var(--fill);color:var(--label2)}
.pill.accent{background:var(--accent-soft);color:var(--accent)}
/* Кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:var(--r-s);
  font:600 15px/1 var(--font);border:0;color:var(--accent);background:var(--accent-soft);text-decoration:none}
/* ЗДЕСЬ БЫЛО правило «текст .btn в светлой теме — #0062CC» (2026-09-12), и оно спрятало надписи на
   ВСЕХ основных кнопках светлой темы («+ Данные», «Готово» в формах): :root:not([data-theme="dark"])
   .btn весит больше, чем .btn.primary, поэтому тёмно-синий текст ложился на синюю заливку — контраст
   1.44:1, надписи нет. Нашёл визуальный аудит 2026-09-13 по жалобе владельца «не вижу надписей на
   кнопках». Правило снято целиком: новый --accent (#2E64C2) сам даёт 4.93:1 на подложке вторичной
   кнопки, отдельный тёмный оттенок больше не нужен. Урок — не перекрашивать .btn правилом с более
   тяжёлым селектором, чем у его вариантов: вариант (.primary) обязан побеждать базу.
   text-decoration:none — backBtn («‹ Машины») сделан ссылкой <a class="btn">, и без сброса она
   рисовалась подчёркнутой, как голая веб-ссылка. */
.btn.primary{background:var(--accent-fill);color:#fff}
.btn.plain{background:transparent}
.icon-btn{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--fill);color:var(--accent);border:0}
/* Высота ОРГАНОВ УПРАВЛЕНИЯ на пальцевом экране — 44 px, и это height, а не min-height: у .btn
   высота задана фиксированно (36), и min-height её не поднимал — на карточке машины кнопки
   оставались 36, а на «Сегодня» 44, то есть на соседних экранах разные (владелец, 2026-09-22:
   «поля, кнопки почему по высоте отличаются»). */
@media (pointer:coarse){.btn,.icon-btn{height:44px;min-height:44px}.icon-btn{width:44px}}
/* Сегмент */
.seg{display:flex;background:var(--fill);border-radius:9px;padding:2px;gap:2px}
.seg>span{flex:1;text-align:center;font-size:13px;font-weight:600;padding:6px 0;border-radius:7px;color:var(--label);opacity:.7;white-space:nowrap}
.seg>span.on{background:var(--card);opacity:1;box-shadow:0 1px 3px rgba(0,0,0,.12)}
/* Поле поиска */
.search{display:flex;align-items:center;gap:8px;height:36px;background:var(--fill);border-radius:10px;padding:0 10px;color:var(--label2);font-size:17px}
/* Иконки */
svg.i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Полоса ресурса */
.bar{height:4px;border-radius:4px;background:var(--fill);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:4px;background:var(--ok)}
.bar>i.warn{background:var(--warn)}.bar>i.bad{background:var(--bad)}
/* Материал шапки/таббара */
.material{background:var(--chrome);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
@media (prefers-reduced-transparency:reduce){.material{background:var(--card);backdrop-filter:none}}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}