/* Финальный слой оформления: единый ритм отступов, типографика и состояния.
   Подключается последним и только уточняет готовую раскладку, не меняя её. */

:root{
 /* Шкала размеров текста. Числовые токены — источник истины: каждый назван
    по своему размеру в пикселях, поэтому значение читается прямо из имени
    и ни один размер при токенизации не изменился. Множитель --font-scale
    применяется на месте использования: calc(var(--text-12) * var(--font-scale)).

    Нижняя граница шкалы — 11px. Токены --text-9 и --text-10 оставлены ради
    совместимости, но ни одно правило их больше не берёт: 9 и 10 пикселей
    читались плохо не из-за цвета (контраст у них был от 3.99 до 11.6), а из-за
    самого размера — подписи вроде «Вид и звук» или времени в сообщении на
    таком кегле разбираются с трудом. Все прежние их употребления переведены
    на --text-11, поэтому новые места берут 11 и ниже не опускаются. */
 --text-9:11px;--text-10:11px;--text-11:11px;--text-12:12px;--text-13:13px;
 --text-14:14px;--text-15:15px;--text-16:16px;--text-17:17px;--text-18:18px;
 --text-19:19px;--text-20:20px;--text-22:22px;--text-23:23px;--text-24:24px;
 --text-25:25px;--text-27:27px;--text-28:28px;--text-29:29px;--text-32:32px;
 /* Семантические псевдонимы для новой разметки: они указывают на числовые
    токены, чтобы шкала не разошлась на две независимые системы. */
 --text-xs:var(--text-11);--text-sm:var(--text-12);--text-md:var(--text-13);
 --text-lg:var(--text-15);--text-xl:var(--text-19);--text-2xl:var(--text-25);
 --radius-sm:8px;--radius-md:12px;--radius-lg:16px;
 --shadow-card:0 1px 2px rgba(20,32,50,.04),0 6px 20px rgba(20,32,50,.05);
 --shadow-card-hover:0 2px 4px rgba(20,32,50,.06),0 12px 32px rgba(20,32,50,.09);
 --shadow-pop:0 16px 44px rgba(12,20,34,.18)}
:root[data-theme="dark"]{
 --shadow-card:0 1px 2px rgba(0,0,0,.26),0 6px 20px rgba(0,0,0,.3);
 --shadow-card-hover:0 2px 6px rgba(0,0,0,.34),0 14px 36px rgba(0,0,0,.42);
 --shadow-pop:0 18px 48px rgba(0,0,0,.55)}

/* --- Типографика: один масштаб вместо точечных размеров --- */
h2{font-size:calc(var(--text-xl) * var(--font-scale));letter-spacing:-.4px;line-height:1.3}
h3{font-size:calc(var(--text-lg) * var(--font-scale));line-height:1.35}
.page-header h1{line-height:1.2}
.page-header p,.section-top .small{max-width:72ch}
p,li{overflow-wrap:break-word}
.field-hint,.muted.small,.chart-caption,.status-meta{line-height:1.55}

/* --- Поверхности: одна глубина у всех карточек --- */
.panel,.stat-card,.seller-widget,.module-card,.seller-row,.seller-metric{
 border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
 transition:box-shadow .18s ease,border-color .18s ease}
.module-card,.stat-card{border:1px solid var(--border)}
@media(hover:hover){
 .module-card:hover,.stat-card:hover,.seller-widget:hover{box-shadow:var(--shadow-card-hover)}
}
.modal{border-radius:var(--radius-lg);box-shadow:var(--shadow-pop)}
.chart-tooltip,.notification-popup{box-shadow:var(--shadow-pop);border-radius:var(--radius-md)}

/* --- Ритм разделов: равные вертикальные промежутки внутри вкладки --- */
.view>*+*{margin-top:var(--space-4)}
.view>.toolbar+*,.view>.section-top+*{margin-top:var(--space-3)}
.view>p.notice{margin-bottom:0}
.section-top{margin-bottom:0}

/* --- Заголовки метрик и статусы --- */
.stat-heading{font-size:calc(var(--text-sm) * var(--font-scale));letter-spacing:.1px}
.stat-card>strong{letter-spacing:-.7px}
.stat-card small,.extra-metric small{font-size:calc(var(--text-xs) * var(--font-scale))}
.status-pill{border:1px solid transparent}
.status-pill.good{border-color:color-mix(in srgb,currentColor 24%,transparent)}
.status-pill.bad{border-color:color-mix(in srgb,currentColor 24%,transparent)}
.status-pill.wait{border-color:color-mix(in srgb,currentColor 24%,transparent)}

/* --- Таблицы: выравнивание чисел и спокойные разделители --- */
/* Шапка отличается цветом, а не капсом: заголовки столбцов — подписи, и в
   верхнем регистре с разрядкой они читались медленнее самих данных. */
th{letter-spacing:0;text-transform:none;color:var(--muted)}
td .cell-value,td .mono,.table-pagination span{font-variant-numeric:tabular-nums}
.table-scroll{border-radius:inherit}

/* --- Состояния доступности: видимый фокус на всех управляющих элементах --- */
:is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{
 outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}
summary{cursor:pointer}

/* --- Пустые состояния: мягче и компактнее --- */
.empty-state{padding:var(--space-4) var(--space-3);gap:var(--space-2)}
.empty-state h3{margin-bottom:0}
.empty-state p{line-height:1.6}
.empty-icon{margin-bottom:var(--space-2)}

/* --- Кнопки состояния: кружок и градиент по текущему состоянию --- */
/* Включено — зеленоватый градиент, выключено — красноватый. Иконка кружка
   приходит из набора эмодзи (power_on / power_off), поэтому CSS задаёт только фон. */
.button.state-on,.button.state-off{border-width:1px;border-style:solid;font-weight:500}
/* Включено и выключено — смысловые цвета, поэтому они плоские и приглушённые:
   градиент на кнопке состояния читался как оформление, а не как состояние. */
.button.state-on,.icon-button.state-on{background:#e9f6f0;border-color:#a9dcc6;color:#166b50}
.button.state-on:hover:not(:disabled),.icon-button.state-on:hover:not(:disabled){background:#ddefe6}
.button.state-off,.icon-button.state-off{background:#fbeef0;border-color:#e8b4bc;color:#9a3745}
.button.state-off:hover:not(:disabled),.icon-button.state-off:hover:not(:disabled){background:#f4e2e5}
:root[data-theme="dark"] .button.state-on,:root[data-theme="dark"] .icon-button.state-on{background:#17382e;border-color:#2b5f4d;color:#8fe4c3}
:root[data-theme="dark"] .button.state-off,:root[data-theme="dark"] .icon-button.state-off{background:#3d2130;border-color:#6b3a47;color:#ffb3bf}
:root[data-theme="dark"] .button.state-on:hover:not(:disabled),:root[data-theme="dark"] .icon-button.state-on:hover:not(:disabled){background:#1d4639}
:root[data-theme="dark"] .button.state-off:hover:not(:disabled),:root[data-theme="dark"] .icon-button.state-off:hover:not(:disabled){background:#4a2a3a}
/* Кружок рядом с подписью переключателя повторяет состояние чекбокса. */
.state-mark{display:inline-flex;align-items:center;gap:7px}
.state-mark>.dot{background:#db5767}
.switch-row:has(input:checked) .state-mark>.dot{background:#2ac59a}
/* Состояние бота берёт смысловые токены темы, а не собственные цифры: на
   тёмной поверхности #b35663 давал 3.37, а зелёный из styles.css — 3.71.
   Светлая тема переопределяет их ниже по стопке своими значениями. */
.bot-label{color:var(--ink-secondary,var(--muted))}
.bot-label.on{color:var(--good-ink)}
.bot-label.off{color:var(--bad-ink)}

/* --- Уведомления и подсказки --- */
.notice{border-radius:var(--radius-md);line-height:1.55}
.notice.info{background:var(--info-bg,var(--accent-soft));color:var(--info-ink,var(--accent-ink))}

/* --- Формы: одинаковая высота и радиус полей --- */
input:not([type=checkbox]):not([type=range]):not([type=color]),select,textarea{
 border-radius:var(--radius-sm);min-height:var(--action-height)}
textarea{min-height:88px;line-height:1.5}
label{line-height:1.45}

/* --- Мелкие правки на узких экранах --- */
@media(max-width:640px){
 .view>*+*{margin-top:var(--space-3)}
 .panel,.stat-card,.module-card{border-radius:var(--radius-md)}
 th{letter-spacing:.3px}
}
@media(prefers-reduced-motion:reduce){
 .panel,.stat-card,.module-card,.seller-widget,tbody tr{transition:none}
}