control.css

/* control.css — стили окна управления.
 *
 * Вынесены из inline-<style> в electron-control.html: 3378 строк CSS внутри
 * HTML-файла делали его нечитаемым и прятали разметку и логику друг от друга.
 * Порядок подключения важен: этот файл идёт ПОСЛЕ design-tokens.css, потому что
 * переопределяет его токены. Внутри порядок сохранён ровно как был — каскад тут
 * значимый (например, статус-плашки и .app-shell.drawer-open зависят от позиции
 * правил).
 *
 * Раньше перед этим файлом подключались ещё styles.css и components.css —
 * остатки первой версии приложения. Панель брала оттуда РОВНО две вещи, обе
 * перенесены сюда (см. ниже); всё прочее было погашено правилами этого файла
 * при равной специфичности, то есть держалось только порядком <link> — и
 * достаточно было переставить строчки в <head>, чтобы вернулась вёрстка 2021
 * года. Оба файла удалены.
 */

/* =============================================
   TimerWidget — Control Panel · VisionOS v2
   Dark glass · tokens from design-tokens.css
   ============================================= */
/* Сброс полей и отступов приехал из styles.css и он ЖИВОЙ: замер (снятие файла
   с diff по computed style) показал 47 затронутых элементов — кнопки транспорта
   получали 1px/6px UA-паддинга, чекбоксы и ползунки — 2-3px UA-полей, пункты
   выпадающих списков — свои. Браузерные умолчания для li/p/h1 панель гасит
   собственными правилами, но новая разметка на это рассчитывать не должна. */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: var(--tw-font-sans);
    color: var(--tw-fg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: transparent;
}

/* Subtle noise texture for glass depth */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.03;
    border-radius: var(--tw-r-2xl);
    clip-path: inset(0 round var(--tw-r-2xl));
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

.control-window {
    background: transparent;
    height: 100vh;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Вторая половина наследства styles.css: центрирование содержимого окна.
       Оно тут единственное, что этот файл НЕ задавал сам, — замер показал
       center → normal по обеим осям при снятии styles.css. Третье свойство
       оттуда, min-height: 100vh, не перенесено намеренно: height уже 100vh и
       безусловна, так что минимум ничего не добавляет. */
    justify-content: center;
    align-items: center;
    color: var(--tw-fg-secondary);
}

/* App shell — single column for the control panel. The drawer is an
   overlay (absolutely positioned), so the panel never gets squished
   on narrow windows. */
.app-shell {
    display: grid;
    /* ДВЕ колонки, вторая — резерв под ящик настроек.
       Раньше колонка была одна, панель стояла по центру окна, а с открытием
       ящика правило переставляло её на justify-self: start. На окне шире
       панели это давало РЫВОК: панель мгновенно перескакивала к левому краю,
       потому что смена justify-self ничем не анимируется и анимироваться не
       может. Теперь место под ящик резервируется колонкой, панель остаётся
       по центру ОСТАВШЕГОСЯ места, а сама колонка меняет ширину плавно и в
       такт с выездом ящика (240ms). Ящик позиционирован абсолютно и в потоке
       сетки не участвует — колонка именно резервирует под него место. */
    grid-template-columns: minmax(0, 1fr) 0px;
    grid-template-rows: 1fr;
    --drawer-width: 336px;
    /* Левый край панели был набран тремя значениями (12 / 14 / 16px) в шести
       правилах: заголовок «НАСТРОЙКИ» и полоса вкладок стояли на 2px правее
       всей панели, футер — на 2px левее. Одна ручка на все шесть. */
    --panel-inset: 14px;
    --control-panel-width: 400px;
    min-height: 100vh;
    width: 100%;
    position: relative;
    overflow: visible;
    padding: 0;
    transition: grid-template-columns 240ms var(--tw-ease-out);
}
.app-shell.drawer-open {
    /* Первая колонка — ФИКСИРОВАННАЯ ширина, которую ведёт JS, а не minmax(0,1fr):
       именно её JS пиннит к ширине окна перед тем, как окно начнёт расти
       (см. пин в electron-control.html).
       Честная атрибуция, установленная мутацией: сам по себе фиксированный трек
       рывок НЕ убирает — с ним, но без фиксации перехода в JS, замер по-прежнему
       давал откат 37px. Несущая часть починки лежит в JS. Фиксированный трек
       нужен, чтобы пину было на что действовать: при minmax(0,1fr) колонка
       считается браузером сама, `--control-panel-width` не управляет ничем, и
       вся связка syncColumn + слушатель resize становится мёртвым кодом.

       Вторая дорожка берётся из --drawer-reserve, а --drawer-width — лишь её
       значение по умолчанию. Резерв нужен отдельной ручкой для ЗАКРЫТИЯ: снятие
       класса возвращает первую дорожку к 1fr, а 1fr считается как «окно минус
       вторая дорожка». Пока резерв схлопывался только вместе с классом, в этот
       кадр первая дорожка получалась не 900, а 771 — панель отскакивала назад на
       64px (замер) и ехала обратно. Схлопываем резерв ЗАРАНЕЕ, при пиннутой
       первой дорожке: к моменту снятия класса 1fr уже равен пину, и снятие
       ничего не двигает. */
    grid-template-columns: var(--control-panel-width) var(--drawer-reserve, var(--drawer-width));
}
.app-shell {
    isolation: isolate;
}
.app-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: var(--tw-r-2xl);
    /* Одна плоская заливка. Два радиальных градиента (фиолетовый и синий) и
       рамка 1px сняты редизайном 2026-08-12: в макете нет ни подцветки, ни
       рамок — поверхности разделяют расстояние и тень. Тень остаётся: она
       единственное, что отделяет панель от рабочего стола. */
    background: var(--tw-bg-surface);
    border: 0;
    box-shadow: var(--tw-shadow-panel);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
}
.control-panel {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: var(--tw-r-2xl);
    border: 0;
    padding: 0;
    box-shadow: none;
    min-width: 0;
    width: 100%;
    /* Колонка контента. 720 — ширина, до которой окно вообще может вырасти без
       ящика (CONTROL_WINDOW_MAX_WIDTH минус поля), поэтому панель на любом
       допустимом размере занимает окно почти целиком. Раньше здесь стояло 560
       при потолке окна 1200: панель тонула в поле шириной 640px, и поле это
       пытались оправдать второй оболочкой — см. удалённый @media ниже. */
    max-width: 720px;
    justify-self: center;
    /* Панель растягивается на ВСЮ высоту окна. Было `height: max-content` +
       `align-self: center`: на окне 1000px высоты панель занимала 678px и
       висела в середине — по 161px мёртвого поля сверху и снизу (замер
       e2e/panel-shell.spec.js). Свободную высоту забирает .hero (flex: 1),
       поэтому растёт блок с цифрами, а список окон и футер остаются прижаты
       книзу. max-height оставлен: панель не должна перерастать окно, внутри
       у неё overflow: hidden. */
    align-self: stretch;
    margin: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: 100vh;
    position: relative;
    z-index: 1;
}
/* When drawer is open, panel docks to the left so the two sit side-by-side.
   Main guarantees the control window is wide enough (~716px) before opening
   the drawer, so the old narrow-mode overlay + backdrop is unreachable. */
.app-shell.drawer-open .control-panel {
    /* По центру своей колонки, а не прижата к краю окна: при ширине окна
       «панель + ящик» это ровно то же место, что и раньше, а на растянутом
       окне панель больше не улетает в левый край. */
    justify-self: center;
    margin: 0;
    /* Панель занимает свою колонку целиком, но не шире колонки контента (640) —
       та же предельная ширина, что и у закрытого ящика, иначе при стыковке она
       растягивалась бы на всю колонку и левый край уезжал.
       Раньше здесь стояло `width: var(--control-panel-width)`, то есть ширина
       панели дублировала ширину колонки отдельным свойством. С фиксированной
       колонкой (см. .drawer-open выше) дубль не нужен и вреден: `width` менялся
       бы мгновенно, пока колонка едет 240ms. При `width: 100%` панель едет
       ВМЕСТЕ с колонкой одним переходом. */
    width: 100%;
    max-width: 640px;
}
/* Граница между панелью и ящиком принадлежит ЯЩИКУ: она проходит по его левому
   краю. Раньше её рисовала панель своим border-right, и при центрированной
   панели линия висела бы посреди пустого места. */
.app-shell.drawer-open .settings-drawer.open {
    border-left: 1px solid var(--tw-divider);
}
/* Здесь стоял @media (min-width: 700px), дословно повторявший ширину из правила
   выше. Дубль был безобиден, пока значения совпадали, — но стоило ограничить
   пристыкованную панель шириной колонки контента, как этот блок (он идёт ниже
   по файлу) молча вернул прежнее `max-width: var(--control-panel-width)`, и
   панель снова растягивалась. Правило одно, и оно выше. */

/* ============ Растянутое окно ============
   Здесь стоял @media (min-width: 620px), который на широком окне выдавал
   .control-panel собственные фон, рамку 1px и тень — «настоящую карточку».
   Замысел был такой: панель нарисована прозрачной, фон и тень окна несёт
   .app-shell::before, и на растянутом окне колонка контента оставалась узкой
   посреди раскрашенного поля — вид, «будто панель забыли доверстать».

   Лекарство оказалось хуже болезни. Оболочек стало ДВЕ, каждая со своим фоном,
   скруглением и тенью, вложенные друг в друга, — и окно читалось как окно
   внутри окна (жалоба пользователя, замер: панель 640×678 с рамкой 1px и тенью
   0 24px 64px посреди окна 1200×1000). Поле при этом никуда не делось.

   Оболочка теперь одна — окно. Исходная болезнь лечится с другого конца: панель
   растягивается на всю высоту окна, колонка контента поднята до 720px, а само
   окно без ящика не может стать шире 760px (CONTROL_WINDOW_MAX_WIDTH), так что
   поля вокруг панели — 20px с каждой стороны, а не 280.

   Инвариант закреплён e2e/panel-shell.spec.js: он меряет вычисленные фон,
   рамку и тень панели на живом окне и проверяет сам себя контрольным образцом
   (.app-shell::before, у которого фон и тень быть ОБЯЗАНЫ). */

/* ============ Settings drawer (slide-out right) ============
   Styled after TimerWidget Design System v2 — sound-tab reference:
   - rgba(22,22,28,0.7) panel, blur(40px) saturate(180%)
   - Inter 600/18px head, 11px uppercase crumb
   - 12–14px radii, 0.055 inner borders, subtle card nesting
   - Tight 8–10px rhythm inside the 336px column */
.settings-drawer {
    position: absolute;
    top: 8px;
    right: 8px;
    bottom: 8px;
    width: 0;
    max-width: 0;
    min-width: 0;
    /* Плотная заливка вместо стекла: блюр снят, а полупрозрачный ящик без него
       показывал бы рабочий стол сквозь настройки. Токен, а не литерал — цвет
       обязан приходить из каскада (docs/lessons.md, «Цвет — это переменная»). */
    background: var(--tw-bg-glass);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid transparent;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateX(8px);
    transition:
        opacity 200ms var(--tw-ease),
        transform 240ms var(--tw-ease-out),
        visibility 0s linear 240ms;
    pointer-events: none;
    overflow: hidden;
    z-index: 50;
}
.settings-drawer.open {
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--drawer-width);
    max-width: var(--drawer-width);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-radius: 0 var(--tw-r-2xl) var(--tw-r-2xl) 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition:
        opacity 200ms var(--tw-ease),
        transform 240ms var(--tw-ease-out);
    pointer-events: auto;
}
.drawer-head {
    /* Геометрия ящика объявлена ЗДЕСЬ и только здесь. Раньше те же три
       свойства переобъявлялись в конце файла без медиазапроса: жили хвостовые
       значения, а правка этих строк не давала ничего — читатель видел тут
       мёртвые 16/18/12px и 17px. */
    padding: 10px 14px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex: 0 0 auto;
}
/* Kit-style breadcrumb: НАСТРОЙКИ / <Tab> */
.drawer-head::before {
    content: "НАСТРОЙКИ /";
    font-size: 10.5px;
    font-weight: 700;
    /* Была литеральная альфа 0.42 — ровно то значение, которое проект отверг
       для --tw-fg-dim как непроходящее AA: на 10.5px выходило 4.05:1. */
    color: var(--tw-fg-dim);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    flex: 0 0 auto;
}
.drawer-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--tw-fg);
    letter-spacing: -0.2px;
    flex: 1 1 auto;
}
.drawer-close {
    width: 26px;
    height: 26px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background var(--tw-dur-fast) var(--tw-ease),
                color var(--tw-dur-fast) var(--tw-ease),
                border-color var(--tw-dur-fast) var(--tw-ease);
}
.drawer-close:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--tw-fg);
}
.drawer-close:focus-visible { outline: none; box-shadow: var(--tw-focus-ring); }
.drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Отступ симметричный: было слева 14px, справа 10px, из-за чего карточки
       стояли не по центру ящика. */
    padding: 10px 12px 12px;
}
.drawer-body::-webkit-scrollbar { width: 6px; }
.drawer-body::-webkit-scrollbar-track { background: transparent; }
.drawer-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}
.drawer-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.22);
}
/* Tab-content inside drawer body — flat single-column list */
.drawer-body .tab-content { display: none; }
.drawer-body .tab-content.active {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: none;
    padding: 0;
    overflow: visible;
}
/* Softer settings-group cards inside drawer */
.drawer-body .settings-group {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 12px;
    margin: 0;
}
.drawer-body .settings-group-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Третий уровень заголовка: подзаголовок ВНУТРИ карточки.
   Был написан тем же классом, что и заголовок самой карточки, а разница
   задавалась инлайновым style="font-size:10px;margin-top:2px" — то есть
   значением, которое бьёт любую тему и переживает любую правку CSS.
   Три уровня выглядели одинаково: капслок 10px --tw-fg-dim, и родитель
   отличался от детей только значком. */
.settings-subtitle {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--tw-fg-dim);
    margin: 6px 0 2px;
}

.drawer-body .toggle-row {
    padding: 6px 2px;
}
.drawer-body .toggle-label {
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
}
/* Segmented control — tighter variant inside drawer */
.drawer-body .segmented {
    border-radius: 10px;
    padding: 2px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.04);
    gap: 0;
}
.drawer-body .segmented button {
    padding: 6px 8px;
    font-size: 11px;
    border-radius: 8px;
}

/* Inline hint card — explains display-only gestures (Alt-drag, Ctrl+wheel)
   to users who are configuring from the control panel. */
.settings-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0;
    padding: 9px 11px;
    background: rgba(10, 132, 255, 0.07);
    border: 1px solid rgba(10, 132, 255, 0.18);
    border-radius: 10px;
    font-size: 11.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
}
/* Значок подсказки — штриховой SVG. Эмодзи 💡 рисовался системным
   emoji-шрифтом: в светлой теме это бледно-жёлтое пятно на белой карточке,
   и покрасить его нельзя ничем. */
.settings-hint .hint-icon {
    flex: 0 0 auto;
    display: inline-flex;
    width: 13px;
    height: 13px;
    opacity: 0.9;
}

.settings-hint .hint-icon svg,
.faq-section-title .icon svg,
.local-bg-action-btn svg {
    width: 100%;
    height: 100%;
    display: block;
}

.faq-section-title .icon {
    display: inline-flex;
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
}

.local-bg-action-btn svg {
    width: 13px;
    height: 13px;
}
.settings-hint .hint-text { flex: 1 1 auto; }
.settings-hint kbd,
.wrow-key kbd {
    display: inline-block;
    padding: 1px 5px;
    margin: 0 1px;
    font-family: var(--tw-font-mono);
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
    /* inline-block с вертикальным паддингом и рамкой делал строки подсказки с
       клавишами выше строк без них: межстрочный шаг скакал внутри одного
       абзаца. */
    line-height: 1;
    padding-block: 1px;
    vertical-align: baseline;
}

/* Custom titlebar — traffic light style */
.custom-titlebar,
.timer-header {
    app-region: drag;
    -webkit-app-region: drag;
    user-select: none;
}
.custom-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--tw-s-3) var(--tw-s-4);
    background: transparent;
    border-radius: var(--tw-r-2xl) var(--tw-r-2xl) 0 0;
    flex-shrink: 0;
    min-height: 40px;
    border-bottom: 1px solid var(--tw-divider);
}
.custom-titlebar .titlebar-right {
    display: flex;
    gap: var(--tw-s-2);
    app-region: no-drag;
    -webkit-app-region: no-drag;
    min-width: 52px;
    justify-content: flex-end;
}

.custom-titlebar .titlebar-help {
    width: 22px;
    height: 22px;
    border: 1px solid var(--tw-border);
    border-radius: 50%;
    background: var(--tw-overlay-light);
    color: var(--tw-fg-muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--tw-dur-base) var(--tw-ease),
                color var(--tw-dur-base) var(--tw-ease);
    padding: 0;
}
.custom-titlebar .titlebar-help:hover {
    background: var(--tw-overlay-medium);
    color: var(--tw-fg);
}
/* Нажатое состояние переключателя темы. Класс и aria-pressed ставит один и тот
   же обработчик — расходиться им нечем. */
.custom-titlebar .titlebar-help.active {
    background: rgba(10, 132, 255, 0.22);
    border-color: rgba(10, 132, 255, 0.55);
    color: var(--tw-fg);
}

/* ============ Светлая тема ============
   Токены задают палитру, но половина заливок и ВЕСЬ декор панели заданы в этом
   файле литералами: сиреневые радиальные градиенты, шумовая текстура, белый
   текст `rgba(255,255,255,0.42–0.95)` у ящика и списка звуков. На тёмном стекле
   это и есть дизайн, на белом фоне — грязь и невидимые подписи. Поэтому светлая
   тема доводится адресно, ровно как это делалось для контрастной.

   Все правила ниже — под [data-theme="light"], поэтому тёмная тема не меняется
   ни на пиксель; это проверяется сверкой снимков.

   Роли ступеней те же, что в тёмной: 1 — крупные блоки, 2 — контролы,
   3 — наведение. На светлом «выше» значит темнее. */
[data-theme="light"] .app-shell::before {
    /* Белый «лист» — это САМО ОКНО, а не панель поверх него. Раньше окно красили
       в --tw-bg-surface-solid (#f2f2f7), а белым был .control-panel — то есть в
       светлой теме двухслойность жила в палитре и не зависела от ширины окна.
       Пока панель занимала окно целиком, разницы не было видно; стоило окну
       стать шире колонки контента — и белый лист со скруглением оказывался
       нарисован внутри серого окна со скруглением. Владелец фона один: окно. */
    background: var(--tw-bg-glass);
    border-color: var(--tw-border);
}
[data-theme="light"] body::after { display: none; }         /* шумовая текстура */
[data-theme="light"] .settings-drawer { background: var(--tw-bg-surface-solid); }
/* Белый «лист», серый ящик с белыми карточками — раскладка светлых системных
   интерфейсов. Обратный порядок (серая панель с ещё более серыми кнопками)
   читался вяло: контрол отличался от подложки на три единицы яркости.
   Лист теперь красит .app-shell::before (см. выше): .control-panel прозрачна в
   ОБЕИХ темах, иначе она вторая оболочка поверх окна. Ящик остаётся
   --tw-bg-surface-solid и по-прежнему отделяется от листа. */
[data-theme="light"] .timer-header {
    background: var(--tw-bg-glass);
}
[data-theme="light"] .timer-display-main,
[data-theme="light"] .timer-display-main.danger,
[data-theme="light"] .timer-display-main.warning {
    /* Тёмная тема кладёт под цифры чёрную тень и неоновое свечение. На белом это
       выглядит замыленным пятном, а контур цифр только теряется. */
    text-shadow: none;
}

/* --- Контейнеры --- */
/* Карточки в ящике — БЕЛЫЕ на сером фоне ящика; внутри них контролы серые.
   Ступень 1 (#f5f5f7) на сером ящике (#f2f2f7) отличалась бы на три единицы
   яркости, то есть карточкой не читалась бы вовсе. */
[data-theme="light"] .settings-group {
    background: var(--tw-bg-glass);
    border: 1px solid var(--tw-border);
}
/* Строки звуков и пустой список карточками больше НЕ являются (20.08.2026):
   переопределять в светлой теме нечего, а оставленное правило вернуло бы забор
   ровно в одной теме — самый неприятный вид расхождения. */
/* Подсказка тихая и в светлой теме: голубая заливка с синей кромкой делала её
   самым ярким пятном вкладки, хотя это справка. Нейтральная ступень — та же
   роль, что у тёмной темы, и одинаковый вес в обеих. */
[data-theme="light"] .settings-hint {
    background: var(--tw-level-1);
    border: 0;
    color: var(--tw-fg-dim);
}
[data-theme="light"] .settings-hint kbd,
[data-theme="light"] .wrow-key kbd {
    color: var(--tw-fg);
    background: var(--tw-level-2);
    border: 1px solid var(--tw-border);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.10);
}

/* --- Белый текст, зашитый литералами. На белом фоне он попросту исчезает --- */
[data-theme="light"] .drawer-head::before,
[data-theme="light"] .drawer-body .settings-group-title,
[data-theme="light"] .sound-formats {
    color: var(--tw-fg-dim);
}
/* Крестик в покое — голый символ в ОБЕИХ темах, как кнопка «назад» рядом
   (редизайн шапки ящика ниже по файлу). Здесь до 03.11.2026 стояла ещё и
   плашка с рамкой для светлой темы — остаток прежней шапки: специфичнее
   редизайна, она рисовала кнопку в светлой теме иначе, чем в тёмной.
   Подложка на наведении — в обеих темах (тёмная — в первом правиле файла). */
[data-theme="light"] .drawer-close:hover {
    background: var(--tw-level-3);
    border-color: var(--tw-border-strong);
    color: var(--tw-fg);
}

[data-theme="light"] .drawer-head {
    border-bottom-color: var(--tw-border);
}

[data-theme="light"] .theme-btn.active {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}

/* .sound-check отсюда убран вместе с самим классом: подпись ряда звука теперь
   .sound-name и красится токеном --tw-fg, то есть работает в обеих темах без
   отдельного переопределения. */
[data-theme="light"] .drawer-body .toggle-label {
    color: var(--tw-fg-secondary);
}

/* --- Контролы в покое --- */
[data-theme="light"] .quick-preset,
[data-theme="light"] .manual-time-input,
[data-theme="light"] .sound-item .sound-select,
[data-theme="light"] .main-btn,
[data-theme="light"] .timer-status,
[data-theme="light"] .quick-window-btn {
    background: var(--tw-level-2);
    border: 1px solid var(--tw-border);
    color: var(--tw-fg);
}
[data-theme="light"] .tabs-row,
[data-theme="light"] .segmented {
    background: var(--tw-level-1);
    border: 1px solid var(--tw-border);
}

/* --- Наведение: ступень вниз по светлоте --- */
[data-theme="light"] .quick-preset:hover,
[data-theme="light"] .main-btn:hover:not(:disabled),
[data-theme="light"] .main-btn.reset:hover:not(:disabled),
[data-theme="light"] .quick-window-btn:hover,
[data-theme="light"] .adjust-main-btn.plus:hover,
[data-theme="light"] .adjust-main-btn.minus:hover {
    background: var(--tw-level-3);
    border-color: var(--tw-border-strong);
    color: var(--tw-fg);
}

/* --- Выбранное состояние: заливка акцентом, надпись белая --- */
[data-theme="light"] .quick-preset.active {
    background: var(--tw-ring);
    border-color: transparent;
    color: var(--tw-on-accent);
    box-shadow: 0 2px 8px rgba(0, 83, 174, 0.28);
}
[data-theme="light"] .main-btn.start {
    background: var(--tw-green);
    color: var(--tw-on-accent);
    box-shadow: 0 2px 10px rgba(22, 128, 60, 0.30);
}
[data-theme="light"] .main-btn.start:hover:not(:disabled) {
    background: #14722f;
    box-shadow: 0 4px 14px rgba(22, 128, 60, 0.38);
}
[data-theme="light"] .manual-time-apply {
    background: var(--tw-green);
    border-color: transparent;
    color: var(--tw-on-accent);
}
[data-theme="light"] .manual-time-apply:hover {
    background: #14722f;
    border-color: transparent;
}
/* Вкладки и сегменты: выбранный элемент — БЕЛАЯ приподнятая пилюля на сером
   треке. Инверсия (тёмная заливка), уместная в контрастной теме, на светлом
   выглядит тяжёлой кляксой и спорит с акцентом. */
[data-theme="light"] .tab-btn.active,
[data-theme="light"] .segmented button.active,
[data-theme="light"] .font-option.active {
    background: #ffffff;
    color: var(--tw-fg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
/* Переопределения активной кнопки окна для светлой темы УДАЛЕНЫ, а не
   поправлены. Они заливали кнопку синим, из-за чего зелёная точка «окно
   открыто» ложилась на синее и давала 1.03:1. Общее правило ниже по файлу
   работает в обеих темах через токены лестницы поверхностей — отдельная
   светлая версия ему больше не нужна и была бы вторым владельцем состояния. */

[data-theme="light"] .manual-time-input:focus-visible {
    background: #ffffff;
    border-color: var(--tw-blue);
}

/* --- Переключатели --- */
/* Выключенный переключатель обязан отличаться от включённого не только цветом
   дорожки: белый бегунок на светло-сером — 1.2:1, то есть его почти не видно.
   Дорожке в покое дана рамка, а бегунку — контур и тень. */
[data-theme="light"] .toggle-slider {
    background: var(--tw-level-3);
    border: 1px solid var(--tw-border-strong);
}
[data-theme="light"] input:checked + .toggle-slider {
    background: var(--tw-green);
    border-color: transparent;
}
[data-theme="light"] .toggle-slider:before {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28), 0 0 0 0.5px rgba(0, 0, 0, 0.16);
}

/* --- Мелочи, которые иначе остаются от тёмной темы --- */
/* Переопределения для .sound-item .sound-preview здесь больше нет: кнопка
   стала призрачной и описана токенами (--tw-border, --tw-fg-muted,
   --tw-level-2), которые сами меняются вместе с темой. Заливка акцентом в
   светлой теме вернула бы ровно то, от чего кнопку и уводили. */
/* Зона загрузки в покое нейтральна в ОБЕИХ темах (20.08.2026): акцент
   включается на наведении и когда файл уже над зоной. Переопределений светлой
   темы больше нет — они возвращали бы акцент ровно в одной теме. */
[data-theme="light"] .drawer-body #tab-sound .add-sound-btn:hover {
    background: color-mix(in srgb, var(--tw-blue) 8%, transparent);
}
[data-theme="light"] .custom-titlebar .titlebar-help.active {
    background: var(--tw-blue);
    border-color: transparent;
    color: var(--tw-on-accent);
}
[data-theme="light"] .drawer-body::-webkit-scrollbar-thumb,
[data-theme="light"] .tab-content.active::-webkit-scrollbar-thumb {
    background: var(--tw-border-strong);
}

/* Недоступное состояние. В тёмной теме это `opacity: 0.4` плюс обесцвечивание —
   поверх стекла читается. На светлом сорок процентов от светлой заливки почти
   сливаются с фоном, поэтому недоступность показывается ступенью и рамкой, а
   надпись остаётся читаемой. Идёт ПОСЛЕ правил .start / .active: специфичность
   равная, решает порядок. */
[data-theme="light"] .main-btn:disabled,
[data-theme="light"] .main-btn.start:disabled,
[data-theme="light"] .quick-preset:disabled,
[data-theme="light"] .adjust-main-btn:disabled {
    opacity: 1;
    filter: none;
    background: var(--tw-level-1);
    border: 1px solid var(--tw-divider);
    color: var(--tw-fg-dim);
    box-shadow: none;
}

.custom-titlebar .title-text {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--tw-fg-muted);
    font-size: var(--tw-t-tiny);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    pointer-events: none;
}

.custom-titlebar .title-glyph {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
}
/* Замок (титлбар и полоса): одна иконка, дужку выбирает `data-glyph`,
   который ставит panel-titlebar.js — владелец состояния один. */
.lock-glyph {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}
[data-glyph="unlocked"] .lock-shackle-closed,
[data-glyph="locked"] .lock-shackle-open { display: none; }
.custom-titlebar .window-controls {
    display: flex;
    gap: 7px;
    /* Левый кластер 31px, правый принудительно 52px, а space-between центрирует
       надпись в ОСТАТКЕ — «ТАЙМЕР» стоял на 10.5px левее центральной оси,
       общей со статусом и кнопками транспорта. */
    min-width: 52px;
    app-region: no-drag;
    -webkit-app-region: no-drag;
}
.custom-titlebar .win-btn {
    width: 12px;
    height: 12px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: transparent;
    font-family: -apple-system, 'SF Pro Text', 'Segoe UI', sans-serif;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter var(--tw-dur-fast) var(--tw-ease),
                color var(--tw-dur-fast) var(--tw-ease);
    line-height: 1;
    padding: 0;
    box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18);
}
/* Зона попадания расширяется ПСЕВДОЭЛЕМЕНТОМ, а не габаритом кнопки.
   Вариант с width: 24px + padding + background-clip: content-box рисует
   скруглённые КВАДРАТЫ вместо кружков: border-radius: 50% считается по
   border-боксу 24px, а заливка обрезается по контент-боксу 12×12. Проверено
   на превью, до попадания в код.
   Остаётся расхождение: центры по-прежнему в 19px, то есть исключение SC 2.5.8
   по расстоянию (24px между центрами) не выполнено. Разводить светофор шире не
   стали — у самого macOS 12px при 8px зазора, то есть 20px; это осознанное
   отступление в пользу платформенной привычки. */
.custom-titlebar .win-btn { position: relative; }

.custom-titlebar .win-btn::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
}

.custom-titlebar .win-btn::before {
    content: attr(data-glyph);
    display: block;
    transform: translateY(-0.5px);
}
.custom-titlebar .window-controls:hover .win-btn {
    color: rgba(0, 0, 0, 0.65);
}
.custom-titlebar .win-btn:hover {
    filter: brightness(1.08);
}
.custom-titlebar .win-btn:active {
    filter: brightness(0.92);
}
.custom-titlebar .win-btn.close-btn,
.custom-titlebar .win-btn:nth-child(1) { background: #ff5f57; }
.custom-titlebar .win-btn.minimize-btn,
.custom-titlebar .win-btn:nth-child(2) { background: #febc2e; }
/* Третьей кнопки (зелёной «развернуть») в титлбаре нет — правило для неё удалено. */

/* =======================================================
   Timer hero — VisionOS signature
   ======================================================= */
.timer-header {
    /* Было rgba(255,255,255,0.02) → transparent: 2% белого поверх #1e1e22 даёт
       +4.5/255 в верхней точке и уходит в ноль. Это НИЖЕ порога 8/255, который
       visual-diff.js вообще считает изменением, — правило существовало, эффекта
       не было. Только inset-тень: внешних в этом проекте нет нигде. */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.015) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    padding: 24px 16px 14px;
    text-align: center;
    position: relative;
    flex-shrink: 0;
    border-bottom: 1px solid var(--tw-divider);
}

.timer-header h1 {
    color: var(--tw-fg-dim);
    font-size: var(--tw-t-tiny);
    font-weight: 600;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.timer-display-main {
    font-family: var(--tw-font-display);
    font-weight: 200;
    font-size: var(--tw-t-timer-panel);
    letter-spacing: 0.05em;
    color: var(--tw-fg);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-bottom: var(--tw-s-3);
    transition: color var(--tw-dur-slow) var(--tw-ease),
                text-shadow var(--tw-dur-slow) var(--tw-ease);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5), var(--tw-glow-blue);
}
/* Fixed-width sign slot — keeps digits optically centered whether
   the minus is visible (overtime) or not. The gap is deliberate: with
   the thin display font a minus sitting directly next to a digit looks
   glued — add ~0.25ch of breathing room. */
/* ЦИФРЫ по центру, знак висит слева и в раскладке НЕ участвует.
   Решение переигрывает прежнее («центрируем всю надпись») — по замеру и по жалобе
   пользователя. В перерасходе цифры уезжали от центральной оси на +26px в панели,
   +16px в виджете и +54px на полноэкранном дисплее. Ось панели общая с плашкой
   статуса и кнопками, а в круговом стиле точка отсчёта для глаза — центр кольца,
   поэтому сдвиг читается как поломка.
   Приём: контейнер сжимается по содержимому и центрируется, значит его левый край
   совпадает с левым краем ЦИФР; знак позиционируется абсолютно от этого края
   (`right: 100%`) и ширины не занимает. Никакой арифметики в em — точность
   геометрическая. Замер держит e2e/overtime-centering.spec.js. */
.timer-display-main {
    position: relative;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.timer-display-main .tm-sign {
    position: absolute;
    right: 100%;
    /* По вертикали — по СЕРЕДИНЕ цифр, а не от верхнего края: при уменьшенном
       кегле знак, привязанный к top: 0, выглядит надстрочным. */
    top: 50%;
    transform: translateY(-50%);
    /* Знак мельче цифр и ближе к ним: полноразмерный минус с зазором 0.2em
       висел отдельным пятном и тянул композицию влево. Уменьшённый читается
       как приставленный к числу знак, и свес втрое меньше. */
    font-size: 0.62em;
    margin-right: 0.1em;
}

.timer-display-main.danger {
    color: var(--tw-red);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5), var(--tw-glow-red);
}

.timer-display-main.warning {
    color: var(--tw-yellow);
    /* Жёлтый ореол снят: полосу состояния несёт цвет цифр. Нейтральная тень
       под текстом оставлена — макет её сохраняет. Соседние .danger/.overtime
       гасятся сами: они ходят через --tw-glow-*, а те уже none. */
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Status chip — neutral · success · attention (glyph carried by dot) */
.timer-status {
    display: inline-flex;
    align-items: center;
    gap: var(--tw-s-2);
    padding: 6px 14px;
    background: var(--tw-overlay-medium);
    border-radius: var(--tw-r-pill);
    border: 1px solid transparent;
    color: var(--tw-fg-secondary);
    font-size: var(--tw-t-tiny);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tw-fg-dim);
    flex-shrink: 0;
}

.status-dot.running {
    background: var(--tw-green);
    /* Ореол снят: состояние несут цвет и пульсация, а не свечение. */
    animation: pulse-dot 1.5s infinite;
}

/* Единая палитра статусов на все три окна (см. CLAUDE.md):
   активен — зелёный, пауза — оранжевый, завершён — красный без анимации,
   перерасход — красный С пульсацией. Пульсация здесь и есть то, что
   отличает «идёт перерасход» от «уже завершено» при одном цвете. */
.status-dot.paused {
    background: var(--tw-orange);
}

.status-dot.finished {
    background: var(--tw-red);
}

.status-dot.overtime {
    background: var(--tw-red);
    /* Ореол снят: состояние несут цвет и частота пульсации. */
    animation: pulse-dot 0.6s infinite;
}

/* Плашка статуса красится состоянием — как в полноэкранном окне.
   Панель несла состояние одной 8-пиксельной точкой, тогда как дисплей заливает
   плашку целиком: одно и то же состояние показано в двух окнах принципиально
   по-разному.
   Палитра из CLAUDE.md соблюдена: активен зелёный, пауза оранжевый, завершено
   и перерасход красные. Цвет ТЕКСТА не меняется. Анимацию плашке добавлять
   НЕЛЬЗЯ: пульсация точки — единственное, что отличает «идёт перерасход» от
   «уже завершено» при одном красном. */
.timer-status:has(.status-dot.running) {
    background: rgba(48, 209, 88, 0.16);
    border-color: rgba(48, 209, 88, 0.34);
}

.timer-status:has(.status-dot.paused) {
    background: rgba(255, 159, 10, 0.16);
    border-color: rgba(255, 159, 10, 0.34);
}

.timer-status:has(.status-dot.finished),
.timer-status:has(.status-dot.overtime) {
    background: rgba(255, 69, 58, 0.18);
    border-color: rgba(255, 69, 58, 0.40);
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(1.25); }
}

/* =======================================================
   Transport row — pause · START · reset
   ======================================================= */
.main-controls {
    display: flex;
    justify-content: center;
    gap: var(--tw-s-4);
    padding: var(--tw-s-3) var(--tw-s-4) var(--tw-s-4);
    background: transparent;
    border-bottom: 1px solid var(--tw-divider);
    flex-shrink: 0;
}

.main-btn {
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--tw-dur-base) var(--tw-ease),
                transform var(--tw-dur-fast) var(--tw-ease),
                box-shadow var(--tw-dur-base) var(--tw-ease),
                filter var(--tw-dur-base) var(--tw-ease);
    color: var(--tw-fg);
    background: var(--tw-overlay-medium);
    -webkit-backdrop-filter: var(--tw-blur-xs);
    backdrop-filter: var(--tw-blur-xs);
}

.main-btn.start {
    width: 64px;
    height: 64px;
    font-size: 24px;
    background: var(--tw-green);
    color: var(--tw-fg);
    box-shadow: 0 4px 20px rgba(48, 209, 88, 0.3);
}

.main-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

.main-btn.start:hover:not(:disabled) {
    background: #34d65c;
    box-shadow: 0 6px 24px rgba(48, 209, 88, 0.42);
    transform: translateY(-1px);
}

.main-btn:active:not(:disabled) { transform: scale(0.98); }

.main-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(0.6);
}

/* Пока таймер идёт, кнопка пуска отключена. Общее .main-btn:disabled выше
   даёт opacity .4 + grayscale .6, и зелёный круг превращался в мутно-оливковый:
   он читался как «кнопка сломалась», а не как «пуск сейчас недоступен».
   Специфичность (0,3,0) бьёт .main-btn.start (0,2,0) и .main-btn:disabled
   (0,2,0), но проигрывает светлому правилу (0,3,1) — светлая тема не меняется.
   Общее правило для .pause/.reset не трогаем: там серый и уместен. */
.main-btn.start:disabled {
    opacity: 1;
    filter: none;
    background: var(--tw-overlay-medium);
    color: var(--tw-fg-dim);
    box-shadow: none;
}

.main-btn:focus-visible {
    outline: none;
    box-shadow: var(--tw-focus-ring);
}

.main-btn.pause {
    background: var(--tw-overlay-medium);
    color: var(--tw-fg);
}

.main-btn.reset {
    background: var(--tw-overlay-medium);
    color: var(--tw-fg);
}

.main-btn.reset:hover:not(:disabled) {
    background: rgba(255,255,255,0.18);
}

/* Content section */
.content-section {
    padding: var(--tw-s-3) var(--tw-s-4);
}

/* =======================================================
   Tabs — settings tab strip
   ======================================================= */
/* Заголовок группы, у которого есть оговорка, — строка из двух частей:
   название слева, оговорка справа. `:has()` вместо класса на самом заголовке:
   правило нужно ровно там, где оговорка есть, и появляется вместе с ней. */
.group-title:has(.group-note) {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.group-note {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--tw-fg-dim);
    white-space: nowrap;
}

.group-title {
    font-size: var(--tw-t-tiny);
    font-weight: 600;
    color: var(--tw-fg-dim);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
    margin-top: 4px;
}
.segmented {
    display: inline-flex;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}
.segmented button {
    padding: 6px 14px;
    border-radius: 7px;
    background: transparent;
    border: none;
    color: var(--tw-fg-muted);
    font-family: inherit;
    font-size: var(--tw-t-label);
    font-weight: 500;
    cursor: pointer;
    transition: color 150ms var(--tw-ease), background 150ms var(--tw-ease);
}
.segmented button:hover { color: var(--tw-fg); }
.segmented button.active {
    color: var(--tw-fg);
    background: rgba(255,255,255,0.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}
.segmented button:focus-visible { outline: none; box-shadow: var(--tw-focus-ring); }

/* Список выбора шрифта цифр. Пункт слева — название, справа — образец,
   набранный ЭТИМ шрифтом: выбирать по названию вслепую бессмысленно. */
/* Подпись сверху, список во всю ширину под ней. */
.setting-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0;
}

/* Внутри блока сегментированный контрол занимает всю ширину, а сегменты
   делят её поровну. В строке (.toggle-row) им доставалась правая половина, и
   пять штук жались до касания краёв — «Аналог» и «Цифры» упирались в рамку.
   Проверяется e2e/segmented-label.spec.js: разброс ширин сегментов не больше
   пикселя. */
.setting-block .segmented { width: 100%; }
.setting-block .segmented button { flex: 1; min-width: 0; }

.font-select {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--tw-level-2);
    border: 1px solid var(--tw-border);
    border-radius: 10px;
    padding: 4px;
    max-height: 190px;
    overflow-y: auto;
    min-width: 190px;
}

.font-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 7px;
    cursor: pointer;
    color: var(--tw-fg-secondary);
    transition: background var(--tw-dur-fast) var(--tw-ease-out);
}

.font-option:hover { background: var(--tw-level-3); color: var(--tw-fg); }
/* Было rgba(10,132,255,0.14) + var(--tw-blue) — блокнот-синий текст на
   голубоватой заливке того же тона систематически даёт низкий контраст
   (измерено реальным пикселем: тёмная 2.46:1, светлая 5.36:1, порог 4.5/7).
   Заменено на тот же приём, что .segmented button.active / .tab-btn.active
   чуть выше в этом файле — нейтральная приподнятая поверхность + --tw-fg,
   а не акцентный текст. Тёмная половина — БУКВАЛЬНО тот же литерал
   rgba(255,255,255,0.1); светлая делит правило с ними же (см. блок
   [data-theme="light"] выше). Измерено тем же методом (скриншот → canvas →
   пиксель): тёмная 7.56:1, светлая 16.83:1 — оба порога с запасом. */
.font-option.active { background: rgba(255,255,255,0.1); color: var(--tw-fg); }
.font-option:focus-visible { outline: none; box-shadow: var(--tw-focus-ring); }

.font-option-name { font-size: 12px; }
.font-option-sample { font-size: 17px; line-height: 1; font-variant-numeric: tabular-nums; }

.footer-hints {
    text-align: center;
    padding: 12px 16px 4px;
    font-size: var(--tw-t-tiny);
    color: var(--tw-fg-dim);
    letter-spacing: 0.2px;
    border-top: 1px solid var(--tw-divider);
    margin-top: 8px;
}

.tabs-row {
    display: flex;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 3px;
    gap: 2px;
    margin-bottom: 16px;
}
.tab-btn {
    flex: 1;
    padding: 9px 4px;
    border-radius: 9px;
    text-align: center;
    font-size: var(--tw-t-label);
    font-weight: 500;
    color: var(--tw-fg-muted);
    cursor: pointer;
    background: transparent;
    border: none;
    font-family: inherit;
    transition: color 150ms var(--tw-ease), background 150ms var(--tw-ease);
}
.tab-btn:hover { color: var(--tw-fg); }
.tab-btn.active {
    color: var(--tw-fg);
    background: rgba(255,255,255,0.1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.07);
}
.tab-btn:focus-visible { outline: none; box-shadow: var(--tw-focus-ring); }

.tab-content { display: none; }

.tab-content.active {
    display: flex;
    flex-direction: column;
    gap: var(--tw-s-3);
    animation: fadeIn var(--tw-dur-slow) var(--tw-ease-out);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    max-height: calc(100vh - 500px);
}

.tab-content.active::-webkit-scrollbar { width: 4px; }
.tab-content.active::-webkit-scrollbar-track { background: transparent; }
.tab-content.active::-webkit-scrollbar-thumb {
    background: var(--tw-overlay-medium);
    border-radius: 2px;
}

.tab-content .settings-group { margin: 0; }

/* Sound tab — single full-width column for library-style layout */
#tab-sound.active {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tw-s-3);
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 500px);
}

#tab-sound .settings-group {
    padding: var(--tw-s-4);
    min-width: 0;
    overflow: hidden;
}

#tab-sound .settings-column {
    min-width: 0;
    overflow: hidden;
}

#tab-sound .settings-group-title {
    margin-bottom: var(--tw-s-3);
}

/* Single-row sound items — one signal per row for dense drawer layout */
.sound-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* СТРОКА, А НЕ КАРТОЧКА. До 20.08.2026 каждый звук был коробкой с заливкой и
   рамкой: четыре подряд читались как забор, а вкладка — как список контейнеров,
   а не как список звуков. Редизайн панели 12.08.2026 уже принял правило «ни
   одной карточки и ни одной рамки: поверхности разделяют расстояние и одна
   заливка», и эта вкладка была последней, где оно не действовало.

   Разделитель — одна линия между строками, у последней её нет: линия нужна как
   граница между соседями, а не как рамка вокруг каждого. */
.sound-item {
    display: flex;
    align-items: center;
    /* 6px, а не 8: три зазора в строке — это 24px, которых не хватало списку.
       Замер: при 8px самый длинный пункт обрезался на 4px. */
    gap: 6px;
    padding: 6px 2px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tw-divider);
    border-radius: 0;
    min-width: 0;
}
.sound-list > .sound-item:last-child { border-bottom: 0; }
/* Ряд звука: переключатель — название — список — «прослушать».
   Здесь стоял .sound-check с нативным чекбоксом 14×14. Смысл у него ровно тот
   же, что у общего выключателя звука в шапке группы, а контрол был другой — и
   вчетверо мельче порога мишени --tw-hit-min (32px).

   Мишень растёт БОКСОМ переключателя, а трек пиннуется полосой внутри него:
   `height: 32px` без пиннинга растянул бы сам трек, ручка 14px вылезла бы
   наружу. Тот же приём уже применён к .timer-mode-row, там же разобрано
   почему. Замеряется e2e/sound-controls.spec.js. */
.sound-item .sound-toggle {
    flex: 0 0 auto;
    width: 34px;
    height: var(--tw-hit-min);
}
.sound-item .sound-toggle .toggle-slider {
    top: 7px;
    bottom: 7px;
    border-radius: 9px;
}
.sound-item .sound-toggle .toggle-slider::before {
    width: 14px;
    height: 14px;
    left: 2px;
    bottom: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.sound-item .sound-toggle input:checked + .toggle-slider::before {
    transform: translateX(16px);
}
.sound-item .sound-name {
    /* Колонка ФИКСИРОВАННАЯ: у событий имена разной длины («Старт» и
       «Перерасход»), и при автоширине четыре списка начинались в четырёх разных
       местах. Ровная вертикаль — половина ощущения «аккуратно». */
    /* 76px — по ЗАМЕРУ: самое длинное имя события «Перерасход» занимает 72px,
       и на 68px оно обрезалось в «Перерасх…». Шире не берём: остальное нужно
       списку, где живут подписи звуков. */
    flex: 0 0 76px;
    min-width: 0;
    font-size: 12px;
    color: var(--tw-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Выключенный ряд гасит и НАЗВАНИЕ: состояние читается по строке целиком, а не
   по одному контролу слева. */
.sound-item:has(.sound-toggle input:not(:checked)) .sound-name {
    color: var(--tw-fg-dim);
}
.sound-item .select-wrap { flex: 1 1 auto; min-width: 0; }
.sound-item .sound-select {
    padding: 7px 22px 7px 9px;
    font-size: 12px;
    border-radius: 9px;
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    color: var(--tw-fg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
    font-weight: 500;
}
.sound-item .sound-select:focus-visible { box-shadow: var(--tw-focus-ring); }
.sound-item .select-wrap::after {
    content: "";
    position: absolute;
    right: 9px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 1.2px solid rgba(255, 255, 255, 0.55);
    border-bottom: 1.2px solid rgba(255, 255, 255, 0.55);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}
/* «Прослушать» — призрачная, а не залитая акцентом. Четыре градиента
   синий→зелёный подряд тянули внимание сильнее, чем настройки, ради которых
   в этот ящик заходят, и спорили с зелёным переключателем в том же ряду.
   Заодно мишень доросла с 30 до --tw-hit-min. Заливка осталась у состояния
   .playing — там она значит «сейчас звучит», а не «здесь кнопка». */
.sound-item .sound-preview {
    width: var(--tw-hit-min);
    height: var(--tw-hit-min);
    font-size: 11px;
    flex: 0 0 auto;
    border: 1px solid var(--tw-border);
    border-radius: 9px;
    background: transparent;
    color: var(--tw-fg-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: transform var(--tw-dur-fast) var(--tw-ease),
                color var(--tw-dur-base) var(--tw-ease),
                background var(--tw-dur-base) var(--tw-ease);
}
.sound-item .sound-preview:hover {
    background: var(--tw-level-2);
    color: var(--tw-fg);
    transform: scale(1.06);
}
.sound-item .sound-preview:focus-visible { outline: none; box-shadow: var(--tw-focus-ring); }
.sound-item .sound-preview.playing {
    background: linear-gradient(135deg, #f5576c, var(--tw-red));
    box-shadow: 0 2px 6px rgba(245, 87, 108, 0.3);
}
.sound-item.disabled { opacity: 0.4; pointer-events: none; }
/* Подстрока перерасхода. Раньше её привязку к строке выше обозначал глиф «↳»
   и произвольный отступ — то есть отношение «это про перерасход» держалось на
   символе, который ничего не значит для скринридера. Теперь подпись говорит
   словом, а вертикаль совпадает с колонкой списков. */
.sound-sub-item {
    background: transparent;
    border: 0;
    border-bottom: 0;
    padding: 2px 2px 8px;
    gap: 6px;
}
.sound-sub-name {
    /* Одна колонка вместо «отступ + ширина»: 118px = тумблер 34 + зазор 8 +
       имя события 76 при зазоре 6, поэтому список подстроки встаёт РОВНО под
       списками строк выше. Прежняя пара «padding-left: 42 + flex 88» давала 33px расхождения —
       замер, а не глаз: на кадре это читалось просто как «съехало». */
    flex: 0 0 116px;
    font-size: 11px;
    color: var(--tw-fg-dim);
    white-space: nowrap;
    padding-left: 0;
    text-align: right;
}
.sound-preview-placeholder {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    pointer-events: none;
    display: inline-block;
}

/* ============ Sound tab inside drawer — compact reflow ============
   Section layout flows naturally in drawer-body (no flex stretching).
   Dropzone is one horizontal row: icon · (title / sub) instead of the
   oversized vertical card used in the legacy 2-column layout. */
.drawer-body #tab-sound.active {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: none;
    overflow: visible;
}
.drawer-body #tab-sound .settings-group { padding: 10px 12px 12px; }
.drawer-body #tab-sound .settings-group-title { margin-bottom: 10px; }

/* Master toggle in "Звуки" header — compact variant.
   Бокс 34×32 при треке 34×18: мишень обязана быть не меньше --tw-hit-min, а
   выглядеть выключатель должен так же компактно, как раньше. Трек пиннуется
   полосой внутри бокса — тот же приём, что у рядов звука и .timer-mode-row.
   Раньше бокс был 32×18, то есть сам контрол и был мишенью. */
.drawer-body #tab-sound .settings-group-title .toggle-switch {
    width: 34px;
    height: var(--tw-hit-min);
}
.drawer-body #tab-sound .settings-group-title .toggle-slider {
    top: 7px;
    bottom: 7px;
    border-radius: 10px;
}
.drawer-body #tab-sound .settings-group-title .toggle-slider::before {
    width: 14px;
    height: 14px;
    left: 2px;
    bottom: 2px;
}
.drawer-body #tab-sound .settings-group-title input:checked + .toggle-slider::before {
    transform: translateX(14px);
}

/* Caption inside the "Ваши звуки" header (mp3 · wav · …) */
.sound-formats {
    /* Не моноширинный и в ОДНУ строку: моноширинный набор переносился посреди
       «до 5 МБ» и читался как ошибка. Это подпись, а не данные. */
    margin-left: auto;
    font-size: 10px;
    font-family: inherit;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    color: var(--tw-fg-dim);
}

/* Empty state for custom sounds list */
/* Пустое состояние — ПОДПИСЬ, а не карточка: коробка вокруг фразы «нет
   добавленных звуков» рисует контейнер для содержимого, которого нет. Цвета
   токенами, а не белыми литералами: литералы жили только в тёмной теме и в
   светлой перекрывались отдельным правилом — двумя местами на один цвет. */
.sound-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 0;
    background: transparent;
    color: var(--tw-fg-dim);
    font-size: 11.5px;
    font-weight: 500;
}
.sound-empty::before {
    content: "♪";
    font-size: 14px;
    color: var(--tw-fg-dim);
    opacity: 0.7;
}

/* Spacing between custom list and dropzone */
.drawer-body #tab-sound .custom-sound-list { margin-bottom: 10px; }
.drawer-body #tab-sound .custom-sound-list:empty { margin-bottom: 0; }

/* Compact horizontal dropzone: icon left, title+sub stacked right */
.drawer-body #tab-sound .add-sound-row { display: block; margin-top: 10px; }
.drawer-body #tab-sound .add-sound-btn {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-auto-rows: auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 1px;
    padding: 10px 12px;
    /* В ПОКОЕ — нейтральная. Синяя пунктирная карточка была самым громким
       пятном вкладки, хотя загрузка файла здесь — второстепенное действие:
       вкладка про звуки событий, а кричала «перетащите файл». Акцент включается
       на наведении и на .drag-over, когда файл уже над зоной, — то есть ровно
       тогда, когда обратная связь нужна. */
    border: 1.5px dashed var(--tw-border-strong);
    background: transparent;
    color: var(--tw-fg);
    border-radius: 11px;
    text-align: left;
    min-height: 0;
}
.drawer-body #tab-sound .add-sound-btn:hover {
    border-color: var(--tw-blue);
    background: rgba(10, 132, 255, 0.1);
}
.drawer-body #tab-sound .add-sound-btn .drop-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--tw-level-2);
    color: var(--tw-fg-muted);
    align-self: center;
}
.drawer-body #tab-sound .add-sound-btn:hover .drop-icon,
.drawer-body #tab-sound .add-sound-btn.drag-over .drop-icon {
    background: color-mix(in srgb, var(--tw-blue) 20%, transparent);
    color: var(--tw-blue);
}

.drawer-body #tab-sound .add-sound-btn .drop-icon svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.2;
}
.drawer-body #tab-sound .add-sound-btn .drop-title {
    grid-column: 2;
    grid-row: 1;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--tw-fg);
}
.drawer-body #tab-sound .add-sound-btn .drop-sub {
    grid-column: 2;
    grid-row: 2;
    font-size: 10px;
    line-height: 1.2;
    color: var(--tw-fg-dim);
    letter-spacing: 0.2px;
}

/* Display tab compact layout */
#tab-display .settings-group { padding: 10px; }
#tab-display .settings-group-title { margin-bottom: 4px; font-size: 10px; }
#tab-display .toggle-row { padding: 4px 0; }
#tab-display .toggle-label { font-size: var(--tw-t-caption); }
#tab-display .settings-column { gap: 6px; }
#tab-display .local-bg-preview { height: 80px; }
/* Компактная раскладка вкладки «Дисплей» распространяется на ОБА
   сегментированных ряда — фон и центральное время. Ряды стоят в одном ящике
   в паре сантиметров друг от друга, и разный кегль у них читается как
   недоделка, а не как иерархия. */
#tab-display .bg-mode-tabs,
#tab-display .hero-mode-tabs { margin-bottom: 6px; }
#tab-display .bg-mode-btn,
#tab-display .hero-mode-btn { padding: 5px 4px; font-size: 10px; }
/* «Сбросить фон по умолчанию» шла во всю ширину карточки — того же веса, что и
   сам контрол фона, который она сбрасывает: в блоке «ФОН» подряд стояли четыре
   полноширинные полосы. Hover красил её в красный, то есть выглядела она
   опаснее, чем есть. */
#tab-display .reset-btn {
    width: auto;
    margin: 4px 0 0 auto;
    padding: 6px 12px;
    font-size: var(--tw-t-tiny);
    color: var(--tw-fg-dim);
    background: transparent;
    border: 1px solid var(--tw-border);
}
#tab-display .reset-btn:hover {
    color: var(--tw-fg);
    background: var(--tw-overlay-light);
    border-color: var(--tw-border-strong);
}
#tab-display .theme-btn { width: 24px; height: 24px; }

.settings-column {
    display: flex;
    flex-direction: column;
    gap: var(--tw-s-2);
    min-width: 0;
}

/* Tab scrollbar */
.tab-content::-webkit-scrollbar { width: 4px; }
.tab-content::-webkit-scrollbar-track { background: transparent; }
.tab-content::-webkit-scrollbar-thumb {
    background: var(--tw-overlay-medium);
    border-radius: 2px;
}
.tab-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.22);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Здесь были правила .time-input, .adjust-btn и .window-btn — три набора для
   классов, которых в разметке нет: она использует .manual-time-input,
   .adjust-main-btn и .quick-window-btn. Удалено при чтении файла глазами
   (проход 6); программные проверки на «мёртвые классы» их не находили, потому
   что имена похожи на живые. */

/* =======================================================
   Settings card (replacement for legacy .settings-group)
   ======================================================= */
.settings-group {
    background: var(--tw-overlay-light);
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-r-lg);
    padding: var(--tw-s-4);
    margin-bottom: var(--tw-s-3);
    min-width: 0;
    overflow: hidden;
}

.settings-group-title {
    font-size: var(--tw-t-caption);
    font-weight: 600;
    color: var(--tw-fg-dim);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: var(--tw-s-3);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Значок группы — штриховой SVG: красится currentColor и живёт в обеих темах.
   Эмодзи не наследовали цвет, не участвовали ни в одной теме и рисовались
   по-разному на трёх платформах; brightness(1.3) поднимал яркость именно им,
   штриху подсветка не нужна. */
.settings-group-title .icon,
.drawer-body .settings-group-title .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    filter: none;
    opacity: 0.75;
}

.settings-group-title .icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.color-picker {
    width: 100%;
    height: 36px;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-r-sm);
    cursor: pointer;
    padding: 2px;
    background: var(--tw-overlay-light);
}

/* Themes — color circle palette */
/* Свотчей девять (восемь тем + пипетка), и при auto-fill они вставали 8 + один
   висящий во второй строке — ряд читался как ошибка вёрстки. Пять колонок дают
   5 + 4: обе строки заполнены, сетка ровная при любой ширине ящика. */
.themes-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    justify-items: center;
}

.theme-btn {
    width: 28px;
    height: 28px;
    border: 2.5px solid var(--tw-border);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform var(--tw-dur-fast) var(--tw-ease),
                border-color var(--tw-dur-base) var(--tw-ease);
    background-clip: padding-box;
}

/* Масштаб активного (1.1) был МЕНЬШЕ масштаба при наведении (1.18):
   наведённый свотч выглядел «выбраннее» выбранного. */
.theme-btn:hover {
    transform: scale(1.08);
    border-color: var(--tw-border-strong);
}

.theme-btn.active {
    border-color: var(--tw-fg);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
    transform: scale(1.1);
}

.theme-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--t1) 0%, var(--t2) 100%);
}

/* Color Picker toggle — Apple-style soft donut with semantic system colors.
   Inner hole (::after) makes it look like a ring rather than a filled
   rainbow disc; softer hues replace raw RGB spectrum. */
.color-picker-toggle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: none;
    background: conic-gradient(
        from 210deg,
        #ff453a 0deg,
        #ff9f0a 60deg,
        #ffd60a 120deg,
        #30d158 180deg,
        #0a84ff 240deg,
        #bf5af2 300deg,
        #ff453a 360deg
    );
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.3);
    opacity: 0.85;
    transition: opacity var(--tw-dur-base) var(--tw-ease),
                transform var(--tw-dur-fast) var(--tw-ease),
                box-shadow var(--tw-dur-base) var(--tw-ease);
}
.color-picker-toggle::after {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--tw-bg-base, #0d0d12);
    box-shadow:
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.12),
        0 0 4px rgba(0, 0, 0, 0.5);
}
.color-picker-toggle:hover {
    opacity: 1;
    transform: scale(1.12);
    /* Синий ореол четвёртым слоем снят; обводка, кольцо и подъём остались —
       наведение обязано читаться формой и подъёмом, а не свечением. */
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.14),
        0 3px 10px rgba(0, 0, 0, 0.45);
}
.color-picker-toggle:focus-visible {
    outline: none;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.4),
        0 0 0 2px rgba(10, 132, 255, 0.5),
        0 2px 6px rgba(0, 0, 0, 0.3);
}
.color-picker-toggle.active {
    opacity: 1;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.4),
        0 0 0 2px rgba(10, 132, 255, 0.55),
        0 3px 10px rgba(0, 0, 0, 0.45);
}

.color-picker-panel {
    display: none;
    margin-top: 8px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    flex-direction: column;
    gap: 8px;
}

.color-picker-panel.open {
    display: flex;
}

.cp-sv-canvas {
    width: 100%;
    height: 120px;
    border-radius: 6px;
    cursor: crosshair;
}

.cp-hue-slider {
    width: 100%;
    height: 16px;
    border-radius: 8px;
    cursor: crosshair;
    background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
}

.cp-hex-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cp-hex-input {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-r-xs);
    background: var(--tw-overlay-light);
    color: var(--tw-fg);
    font-size: var(--tw-t-tiny);
    font-family: var(--tw-font-mono);
    outline: none;
}

.cp-hex-input:focus {
    border-color: rgba(10, 132, 255, 0.5);
}

.cp-preview {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--tw-border-strong);
}

#tab-display .color-picker-toggle {
    width: 22px;
    height: 22px;
}
#tab-display .color-picker-toggle::after {
    width: 7px;
    height: 7px;
}

/* Затемнение выключенной строки живёт на .sound-item.disabled ниже. Правила
   .sound-row / .sound-group.disabled удалены: таких классов в разметке нет. */

/* Select wrapper — gives us space for custom chevron on the right. */
.select-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.select-wrap::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid rgba(255, 255, 255, 0.55);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.55);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.sound-select {
    width: 100%;
    padding: 9px 32px 9px 12px;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-r-xs);
    font-size: var(--tw-t-label);
    min-width: 0;
    background: var(--tw-overlay-light);
    color: var(--tw-fg);
    font-family: inherit;
    font-weight: 500;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
}

.sound-select:focus-visible {
    box-shadow: var(--tw-focus-ring);
}

/* Фон пункта списка берётся из ТОКЕНА ПОВЕРХНОСТИ, а не литералом.
   Литерал #1c1c1e работал только в тёмной теме: цвет текста здесь честный
   токен, и в светлой теме он становится #1d1d1f — почти тем же цветом, что
   и захардкоженный фон. Замер: 17.01:1 в тёмной, 1.01:1 в светлой, то есть
   списка всех восьми <select> панели в светлой теме не существовало.
   На macOS попап рисует система и дефекта не видно; Chromium на Windows и
   Linux применяет правило буквально — а смотрят на эти две ОС только
   поведенческие e2e, кадров оттуда никто не снимает.
   Проверяется tests/contrast.test.js. */
select option,
.sound-select option {
    background: var(--tw-bg-surface-solid);
    color: var(--tw-fg);
}

/* Заголовок группы в списке — та же болезнь, что и у пункта выше, и найден
   он был не глазами, а тестом: --tw-fg-secondary в светлой теме это #313136,
   на захардкоженном фоне даёт 1.05:1. */
select optgroup,
.sound-select optgroup {
    background: var(--tw-bg-surface-solid);
    color: var(--tw-fg-secondary);
}

/* Play button — blue→green gradient chip, 36×36 per kit.
   .playing state swaps to red gradient (toggled by JS). */
.sound-preview {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--tw-r-md);
    background: var(--tw-ring);
    color: var(--tw-fg);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: transform var(--tw-dur-fast) var(--tw-ease),
                filter var(--tw-dur-base) var(--tw-ease),
                background var(--tw-dur-base) var(--tw-ease),
                box-shadow var(--tw-dur-base) var(--tw-ease);
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(10, 132, 255, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sound-preview:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
}

.sound-preview.playing {
    background: linear-gradient(135deg, #f5576c, var(--tw-red));
    box-shadow: 0 3px 10px rgba(245, 87, 108, 0.3);
}

.sound-preview:focus-visible {
    outline: none;
    box-shadow: var(--tw-focus-ring);
}

.custom-sound-list {
    max-height: none;
    overflow-y: visible;
    margin-bottom: var(--tw-s-3);
}

/* Library item — kit .lib-item: icon + meta + actions. */
.custom-sound-item {
    display: flex;
    align-items: center;
    gap: var(--tw-s-2);
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-r-md);
    margin-bottom: 6px;
    font-size: var(--tw-t-label);
    min-width: 0;
    transition: background var(--tw-dur-fast) var(--tw-ease),
                border-color var(--tw-dur-fast) var(--tw-ease);
}

.custom-sound-item:hover {
    background: rgba(0, 0, 0, 0.35);
    border-color: var(--tw-border-strong);
}

.custom-sound-item.selected {
    border-color: rgba(10, 132, 255, 0.5);
    background: rgba(10, 132, 255, 0.08);
}

.custom-sound-item .lib-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--tw-r-sm);
    background: rgba(48, 209, 88, 0.15);
    color: var(--tw-green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.custom-sound-item .lib-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.custom-sound-item .lib-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.custom-sound-item .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tw-fg);
    font-weight: 500;
}

.custom-sound-item .lib-sub {
    font-size: var(--tw-t-caption);
    color: var(--tw-fg-dim);
    font-family: var(--tw-font-mono);
    letter-spacing: 0.3px;
}

.custom-sound-item .btn {
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: var(--tw-r-sm);
    cursor: pointer;
    font-size: var(--tw-t-tiny);
    transition: background var(--tw-dur-fast) var(--tw-ease),
                border-color var(--tw-dur-fast) var(--tw-ease),
                transform var(--tw-dur-fast) var(--tw-ease);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--tw-fg-muted);
}

.custom-sound-item .btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--tw-fg);
}

.custom-sound-item .play-btn {
    background: rgba(10, 132, 255, 0.15);
    color: var(--tw-blue);
}

.custom-sound-item .delete-btn:hover {
    background: rgba(255, 69, 58, 0.12);
    border-color: rgba(255, 69, 58, 0.3);
    color: var(--tw-red);
}

/* Dropzone — kit .drop composite: icon + title + sub. */
.add-sound-row { display: flex; gap: var(--tw-s-2); }

.add-sound-btn {
    flex: 1;
    padding: 18px;
    border: 1.5px dashed rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.015);
    border-radius: var(--tw-r-lg);
    cursor: pointer;
    transition: border-color var(--tw-dur-base) var(--tw-ease),
                background var(--tw-dur-base) var(--tw-ease),
                color var(--tw-dur-base) var(--tw-ease);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    color: var(--tw-fg-secondary);
}

.add-sound-btn:hover {
    border-color: var(--tw-blue);
    background: rgba(10, 132, 255, 0.05);
}

.add-sound-btn .drop-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--tw-r-md);
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    transition: background var(--tw-dur-base) var(--tw-ease),
                color var(--tw-dur-base) var(--tw-ease);
}

.add-sound-btn:hover .drop-icon {
    background: rgba(10, 132, 255, 0.1);
    color: var(--tw-blue);
}

.add-sound-btn .drop-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.add-sound-btn .drop-title {
    font-size: var(--tw-t-label);
    font-weight: 600;
    color: var(--tw-fg);
}

.add-sound-btn .drop-sub {
    font-size: var(--tw-t-caption);
    color: var(--tw-fg-dim);
    font-family: var(--tw-font-mono);
    letter-spacing: 0.3px;
}

/* Error banner — kit .err with round red ! badge. Hidden by default,
   JS flips display via .visible class. */
.sound-err {
    display: none;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 69, 58, 0.1);
    border: 1px solid rgba(255, 69, 58, 0.28);
    border-radius: var(--tw-r-md);
    margin-top: 10px;
}

.sound-err.visible { display: flex; }

.sound-err .err-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--tw-red);
    color: var(--tw-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.sound-err .err-body { flex: 1; }

.sound-err .err-title {
    font-size: var(--tw-t-label);
    font-weight: 600;
    color: #ff7a72;
    margin-bottom: 2px;
}

.sound-err .err-msg {
    font-size: var(--tw-t-caption);
    color: var(--tw-fg-secondary);
    line-height: 1.4;
}

.hidden-file-input { display: none; }

/* Settings rows — divider-style list inside settings card */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--tw-s-3) 0;
    border-bottom: 1px solid var(--tw-divider);
}

.toggle-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.toggle-row:first-child { padding-top: 0; }

.toggle-label {
    font-size: var(--tw-t-label);
    color: var(--tw-fg-secondary);
}

/* Apple-style toggle switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 26px;
    cursor: pointer;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.15);
    transition: background var(--tw-dur-base) var(--tw-ease);
    border-radius: 13px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 2px;
    bottom: 2px;
    background-color: #fff;
    transition: transform var(--tw-dur-base) var(--tw-ease);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--tw-green);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(16px);
}

.toggle-switch input:focus-visible + .toggle-slider {
    box-shadow: var(--tw-focus-ring);
}

/* Background mode tabs */
.bg-mode-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: var(--tw-s-3);
}

.bg-mode-btn,
.hero-mode-btn {
    flex: 1;
    padding: 7px 4px;
    border: 1px solid var(--tw-border);
    background: var(--tw-overlay-light);
    border-radius: var(--tw-r-sm);
    cursor: pointer;
    font-size: var(--tw-t-tiny);
    font-weight: 500;
    color: var(--tw-fg-secondary);
    transition: background var(--tw-dur-base) var(--tw-ease),
                color var(--tw-dur-base) var(--tw-ease),
                border-color var(--tw-dur-base) var(--tw-ease);
}

.bg-mode-btn.active,
.hero-mode-btn.active {
    border-color: rgba(10, 132, 255, 0.4);
    background: rgba(10, 132, 255, 0.12);
    color: var(--tw-blue);
}

/* Режим центрального времени (08.09.2026) — та же механика, что «Фон» выше:
   ряд из четырёх РАВНЫХ кнопок, каждая тянется на свою долю ширины.

   Своего `flex` у кнопки НЕТ: она берёт `flex: 1` (то есть базис 0) из общего
   правила .bg-mode-btn/.hero-mode-btn выше. Стоявший тут `flex: 1 1 auto`
   его перебивал, а базис `auto` — это ширина ПОДПИСИ: «Текущее время»
   выходило заметно шире «Таймера», и обещание равного ряда, записанное
   строкой выше, кодом не выполнялось. */
.hero-mode-tabs { display: flex; flex-wrap: wrap; gap: var(--tw-s-2); margin-bottom: var(--tw-s-3); }

/* Кнопки готовых раскладок дисплея.
   Сетка, а не ряд: раскладок пять, в одну строку они превратились бы в пять
   нечитаемых огрызков при ширине панели 400px (замер: 62px на кнопку при
   длиннейшем имени «Совещание»).
   Состояния «выбрана» у кнопки НЕТ намеренно: раскладка — это действие, и
   отметка врала бы уже после первого перетаскивания блока на дисплее. */
.layout-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    width: 100%;
}
/* Раскладок ПЯТЬ, а колонки две: последняя кнопка висела в неполном ряду и
   читалась как недоделанная сетка. Растягиваем её на обе колонки — ряд закрыт,
   а какая именно кнопка растянута, роли не играет: раскладка это действие. */
.layout-grid > .layout-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }

.layout-btn {
    padding: 7px 6px;
    border: 1px solid var(--tw-border);
    background: var(--tw-overlay-light);
    border-radius: var(--tw-r-sm);
    cursor: pointer;
    font-size: var(--tw-t-tiny);
    font-weight: 500;
    color: var(--tw-fg-secondary);
    transition: background var(--tw-dur-base) var(--tw-ease),
                color var(--tw-dur-base) var(--tw-ease),
                border-color var(--tw-dur-base) var(--tw-ease);
}

.layout-btn:hover {
    color: var(--tw-fg);
    background: var(--tw-overlay-medium);
    border-color: var(--tw-border-strong);
}

.bg-controls { display: none; }
.bg-controls.active { display: block; }

.gradient-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tw-s-3);
}

/* Local background upload */
.local-bg-section { margin-top: var(--tw-s-3); }

.local-bg-preview {
    position: relative;
    width: 100%;
    height: 120px;
    border-radius: var(--tw-r-lg);
    background: rgba(255, 255, 255, 0.015);
    border: 1.5px dashed rgba(255, 255, 255, 0.14);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color var(--tw-dur-base) var(--tw-ease),
                background var(--tw-dur-base) var(--tw-ease);
}

.local-bg-preview:hover {
    border-color: var(--tw-blue);
    background: rgba(10, 132, 255, 0.05);
}

.local-bg-preview.has-image {
    border-style: solid;
    border-color: rgba(10, 132, 255, 0.3);
}

.local-bg-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.local-bg-placeholder {
    text-align: center;
    color: var(--tw-fg-dim);
}

.local-bg-placeholder .icon {
    font-size: 2em;
    display: block;
    margin-bottom: var(--tw-s-2);
}

.local-bg-placeholder .text {
    font-size: var(--tw-t-caption);
    font-weight: 600;
    color: var(--tw-fg);
}

.local-bg-actions {
    position: absolute;
    top: var(--tw-s-2);
    right: var(--tw-s-2);
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity var(--tw-dur-base) var(--tw-ease);
}

.local-bg-preview:hover .local-bg-actions { opacity: 1; }

.local-bg-action-btn {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: var(--tw-r-sm);
    cursor: pointer;
    font-size: var(--tw-t-label);
    transition: transform var(--tw-dur-fast) var(--tw-ease);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: var(--tw-blur-xs);
    -webkit-backdrop-filter: var(--tw-blur-xs);
}

.local-bg-action-btn.change {
    background: rgba(10, 132, 255, 0.8);
    color: var(--tw-fg);
}

.local-bg-action-btn.delete {
    background: rgba(255, 69, 58, 0.8);
    color: var(--tw-fg);
}

.local-bg-action-btn:hover { transform: scale(1.08); }

.bg-fit-options {
    display: flex;
    gap: 6px;
    margin-top: var(--tw-s-3);
}

.bg-fit-btn {
    flex: 1;
    padding: 7px;
    border: 1px solid var(--tw-border);
    background: var(--tw-overlay-light);
    border-radius: var(--tw-r-xs);
    cursor: pointer;
    font-size: var(--tw-t-tiny);
    font-weight: 500;
    color: var(--tw-fg-secondary);
    transition: background var(--tw-dur-base) var(--tw-ease),
                color var(--tw-dur-base) var(--tw-ease),
                border-color var(--tw-dur-base) var(--tw-ease);
}

.bg-fit-btn.active {
    border-color: rgba(10, 132, 255, 0.4);
    background: rgba(10, 132, 255, 0.12);
    color: var(--tw-blue);
}

.bg-overlay-row {
    display: flex;
    align-items: center;
    gap: var(--tw-s-3);
    margin-top: var(--tw-s-3);
}

.bg-overlay-row label {
    font-size: var(--tw-t-caption);
    color: var(--tw-fg-secondary);
    white-space: nowrap;
}

/* Range slider: custom webkit */
.bg-overlay-row input[type="range"] {
    flex: 1;
    height: 4px;
    background: var(--tw-overlay-medium);
    border-radius: 2px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.bg-overlay-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--tw-fg);
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0,0,0,0.1);
}

.bg-overlay-value {
    font-family: var(--tw-font-mono);
    font-size: var(--tw-t-caption);
    color: var(--tw-fg);
    font-weight: 600;
    min-width: 40px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
}

/* Reset button (generic) */
.reset-btn {
    width: 100%;
    padding: var(--tw-s-3);
    border: 1px solid var(--tw-border);
    background: var(--tw-overlay-light);
    border-radius: var(--tw-r-md);
    color: var(--tw-fg-secondary);
    font-weight: 500;
    font-size: var(--tw-t-label);
    cursor: pointer;
    transition: border-color var(--tw-dur-base) var(--tw-ease),
                color var(--tw-dur-base) var(--tw-ease),
                background var(--tw-dur-base) var(--tw-ease);
    margin-top: var(--tw-s-2);
}

.reset-btn:hover {
    border-color: rgba(255, 69, 58, 0.4);
    color: var(--tw-red);
    background: rgba(255, 69, 58, 0.08);
}

/* Control window scrollbar */
.control-window { overflow-y: auto; }
.control-window::-webkit-scrollbar { width: 4px; }
.control-window::-webkit-scrollbar-track { background: transparent; }
.control-window::-webkit-scrollbar-thumb {
    background: var(--tw-overlay-medium);
    border-radius: 2px;
}

/* =======================================================
   Compact section — top stack of cockpit rows
   ======================================================= */
.compact-section {
    padding: var(--tw-s-3) var(--tw-s-4);
    border-bottom: 1px solid var(--tw-divider);
    flex-shrink: 0;
}

.manual-time-hint {
    font-size: var(--tw-t-tiny);
    color: var(--tw-fg-dim);
    white-space: nowrap;
    min-width: 72px;
    text-align: right;
}

.quick-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.quick-preset {
    padding: 10px 4px;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-r-md);
    background: rgba(255, 255, 255, 0.06);
    color: var(--tw-fg-secondary);
    font-weight: 500;
    font-size: var(--tw-t-label);
    cursor: pointer;
    transition: background var(--tw-dur-fast) var(--tw-ease),
                color var(--tw-dur-fast) var(--tw-ease),
                border-color var(--tw-dur-fast) var(--tw-ease);
    white-space: nowrap;
    text-align: center;
}

.quick-preset:hover {
    border-color: rgba(10, 132, 255, 0.3);
    background: rgba(10, 132, 255, 0.15);
    color: var(--tw-blue);
}

.quick-preset.active {
    border-color: transparent;
    background: var(--tw-ring);
    color: var(--tw-fg);
    box-shadow: 0 4px 16px rgba(10, 132, 255, 0.35),
                inset 0 1px 0 rgba(255,255,255,0.2);
}

.quick-preset:focus-visible {
    outline: none;
    box-shadow: var(--tw-focus-ring);
}

.adjust-main-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 3px;
    background: var(--tw-overlay-light);
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-r-md);
}

.adjust-main-btn {
    flex: 1;
    padding: 8px 4px;
    border: none;
    border-radius: var(--tw-r-sm);
    background: transparent;
    font-size: var(--tw-t-caption);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--tw-dur-fast) var(--tw-ease);
    white-space: nowrap;
    color: var(--tw-fg-secondary);
    font-family: inherit;
    text-align: center;
}

/* Шесть равнозначных контролов выглядят равнозначно.
   Минусы были покрашены --tw-red — цветом, которым в этом приложении
   обозначаются перерасход и завершение: уменьшение времени читалось как
   опасное действие. Красить минус нейтральным, а плюс синим — та же ошибка с
   другой стороны: «добавить время» становится действием по умолчанию, хотя
   ничем не важнее. Направление уже несёт знак ±, цвет для этого не нужен.
   Побочно закрывается контраст плюс-кнопок, причём в ОБЕИХ темах сразу:
   --tw-fg-secondary это 0.78 белого в тёмной и #313136 в светлой. Правило,
   скоупнутое на тёмную тему, для этого больше не нужно — а в светлой оно
   увело бы кнопки на 3.24:1, ниже AA.
   Правило светлой темы на :595-596 имеет специфичность (0,4,0) против (0,3,0)
   и продолжает выигрывать — его менять не нужно. */
.adjust-main-btn.minus,
.adjust-main-btn.plus { color: var(--tw-fg-secondary); }

.adjust-main-btn.minus:hover,
.adjust-main-btn.plus:hover {
    background: var(--tw-overlay-medium);
    color: var(--tw-fg);
}

.adjust-main-btn:focus-visible {
    outline: none;
    box-shadow: var(--tw-focus-ring);
}

.manual-time-row {
    display: flex;
    align-items: center;
    gap: var(--tw-s-2);
    margin-top: var(--tw-s-2);
    padding: var(--tw-s-2) var(--tw-s-1) 0;
    /* border-top снят намеренно: тот же --tw-divider разделял и СЕКЦИИ, и
       строки ВНУТРИ секции, поэтому «Точное время» читалось как отдельный
       раздел. Строки внутри секции разводятся пробелом, линия остаётся
       признаком границы секции.
       Подставлять сюда литерал вроде rgba(255,255,255,0.03) нельзя: в светлой
       теме белое на белом исчезает совсем. */
}
.manual-time-label {
    flex: 0 0 auto;
    font-size: var(--tw-t-label);
    font-weight: 500;
    color: var(--tw-fg-muted);
    letter-spacing: 0.1px;
}
.manual-time-input {
    /* Поле вмещает максимум «99:59:59», а тянулось на всю строку: ~230px при
       окне 400px и ~470px на растянутой карточке — с центрированным «0:00»
       посередине этой пустоты.
       margin-right: auto выталкивает вправо соседа (.manual-time-hint у ряда
       «Стоп на», который носит этот же класс) — то есть ровно туда, где
       подсказка стоит и сейчас. */
    flex: 0 1 160px;
    margin-right: auto;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-r-sm);
    background: var(--tw-overlay-light);
    color: var(--tw-fg);
    font-size: var(--tw-t-body);
    font-family: var(--tw-font-mono);
    font-variant-numeric: tabular-nums;
    text-align: center;
    outline: none;
    transition: border-color var(--tw-dur-base) var(--tw-ease),
                background var(--tw-dur-base) var(--tw-ease);
}

.manual-time-input:focus-visible {
    border-color: rgba(10, 132, 255, 0.5);
    background: rgba(10, 132, 255, 0.08);
}

/* Timer-mode toggle on main screen (shared across all windows) */
.timer-mode-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tw-s-2);
    margin-top: var(--tw-s-2);
    padding: var(--tw-s-2) var(--tw-s-1) 0;
    /* border-top снят по той же причине, что и у .manual-time-row выше. */
}
.timer-mode-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--tw-t-label);
    font-weight: 500;
    color: var(--tw-fg-muted);
    letter-spacing: 0.1px;
}
.timer-mode-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(10, 132, 255, 0.14);
    color: var(--tw-blue);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* ============ Контролы, вынесенные из инлайновых style= ============
   В разметке панели оставалось восемь атрибутов style= с захардкоженным белым
   (`color: rgba(255,255,255,0.7)`, `border: 1px solid rgba(255,255,255,0.2)`).
   Инлайн-стиль бьёт любую тему, поэтому при высоком контрасте эти подписи,
   селекты и поля остались бы полупрозрачно-серыми на чёрном. Значения переведены
   на токены; там, где старая альфа не совпадала с токеном (0.2 против 0.14 у
   рамки селекта, 0.08 против 0.10 у подложки), взят токен — расхождение в один
   шаг альфы намеренное, зато тема теперь достаёт до этих элементов. */
.scale-control {
    display: flex;
    align-items: center;
    gap: 8px;
}
.scale-slider { width: 80px; }

.settings-divider {
    height: 1px;
    background: var(--tw-divider);
    margin: 6px 0;
}

/* Список у панели один — «Монитор». Синий текст модификатора `is-accent`
   давал ~3,5:1 и выдавал его за ссылку среди остальных контролов; надпись —
   основной цвет текста, как у соседних значений. */
.settings-select {
    padding: 6px 10px;
    border-radius: var(--tw-r-sm);
    border: 1px solid var(--tw-border);
    background: var(--tw-overlay-medium);
    color: var(--tw-fg);
    font-family: inherit;
    font-size: 0.85em;
    cursor: pointer;
    max-width: 140px;
}
.settings-select:focus-visible { outline: none; box-shadow: var(--tw-focus-ring); }

.settings-time-input {
    padding: 4px 8px;
    border-radius: var(--tw-r-xs);
    border: 1px solid var(--tw-border-strong);
    background: var(--tw-overlay-light);
    color: var(--tw-fg);
    font-family: inherit;
    font-size: 0.85em;
    cursor: pointer;
}
.settings-time-input:focus-visible { outline: none; box-shadow: var(--tw-focus-ring); }

/* min-width: 40px был, а text-align: right — нет: короткая строка прижималась
   влево внутри переразмеренного бокса и ездила при смене значения. Соседний
   такой же индикатор (.bg-overlay-value) выровнен правильно. */
.scale-value-text {
    text-align: right;
    min-width: 40px;
    font-size: 0.85em;
    color: var(--tw-fg-secondary);
    cursor: pointer;
    user-select: none;
    transition: color var(--tw-dur-fast) var(--tw-ease);
}

.scale-value-text:hover { color: var(--tw-fg); }

.scale-value-input {
    width: 54px;
    padding: 2px 4px;
    border: 1px solid rgba(10, 132, 255, 0.5);
    border-radius: var(--tw-r-xs);
    background: rgba(10, 132, 255, 0.1);
    color: var(--tw-fg);
    font-size: 0.85em;
    text-align: center;
    outline: none;
    font-family: inherit;
}

.manual-time-apply {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(48, 209, 88, 0.3);
    border-radius: var(--tw-r-sm);
    background: rgba(48, 209, 88, 0.15);
    color: var(--tw-green);
    font-size: var(--tw-t-body);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--tw-dur-fast) var(--tw-ease),
                border-color var(--tw-dur-fast) var(--tw-ease);
}

.manual-time-apply:hover {
    background: rgba(48, 209, 88, 0.3);
    border-color: rgba(48, 209, 88, 0.5);
}

.quick-windows {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.quick-window-btn {
    padding: 10px 8px;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-r-lg);
    font-size: var(--tw-t-caption);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background var(--tw-dur-base) var(--tw-ease),
                color var(--tw-dur-base) var(--tw-ease),
                border-color var(--tw-dur-base) var(--tw-ease),
                box-shadow var(--tw-dur-base) var(--tw-ease),
                transform var(--tw-dur-fast) var(--tw-ease);
    white-space: nowrap;
    /* Покой и активность были залиты синим одного семейства, различие несла в
       основном альфа: закрытое окно выглядело открытым. Теперь состояние несут
       только .active и точка-индикатор; синий остаётся у наведения — там он и
       уместен. */
    background: var(--tw-overlay-light);
    color: var(--tw-fg-secondary);
    letter-spacing: 0.1px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    min-width: 0;
    overflow: hidden;
}

.quick-window-btn .qw-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(10, 132, 255, 0.14);
    color: var(--tw-blue);
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
    transition: background var(--tw-dur-base) var(--tw-ease),
                color var(--tw-dur-base) var(--tw-ease),
                transform var(--tw-dur-fast) var(--tw-ease);
}
.quick-window-btn .qw-label {
    font-size: var(--tw-t-caption);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-preset { min-width: 0; }

/* Gradient divider between minus and plus */
/* Синяя вертикальная черта 2px в ряду, стилизованном под поле ввода, читалась
   как текстовая каретка, а не как разделитель групп. */
.adjust-divider {
    width: 1px;
    height: 16px;
    background: var(--tw-border-strong);
    align-self: center;
    margin: 0 4px;
    flex-shrink: 0;
}

.quick-window-btn:hover {
    border-color: rgba(10, 132, 255, 0.35);
    background: linear-gradient(180deg,
        rgba(10, 132, 255, 0.14),
        rgba(10, 132, 255, 0.08));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(10, 132, 255, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.quick-window-btn:hover .qw-icon {
    background: rgba(10, 132, 255, 0.22);
    transform: scale(1.05);
}

/* Открытое окно помечается ФОРМОЙ, а не только цветом: засечка слева плюс
   точка у верхнего края. Раньше состояние несла заливка акцентом, и в
   светлой теме она была синей (--tw-blue), а точка — зелёной (--tw-green):
   оба токена в этой теме тёмные, потому что светлые акценты Apple на белом
   не читаются. Замер точки на заливке: 1.03:1 — индикатора не существовало,
   а tests/contrast.test.js этого не видел, потому что сверял токены между
   собой, а не ПАРУ «цвет × фон, на котором он окажется».
   Заодно с экрана уходит третий акцент: до правки одновременно светились
   зелёный активный пресет, зелёная галочка подтверждения времени и синяя
   заливка этих трёх кнопок. */
.quick-window-btn.active {
    background: var(--tw-level-2);
    border-color: var(--tw-border-strong);
    color: var(--tw-fg);
    box-shadow: inset 2px 0 0 var(--tw-green);
}
.quick-window-btn.active .qw-icon {
    background: transparent;
    color: var(--tw-green);
}
.quick-window-btn { position: relative; }
.quick-window-btn.active::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tw-green);
}

.quick-window-btn.active:hover {
    background: var(--tw-level-3);
}

.quick-window-btn:focus-visible {
    outline: none;
    box-shadow: var(--tw-focus-ring);
}

/* Advanced settings — sized by content; the panel itself can shrink. */
.advanced-settings {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.advanced-settings .content-section {
    padding: var(--tw-s-1) var(--panel-inset) var(--tw-s-3);
    background: transparent;
    border-radius: 0 0 var(--tw-r-2xl) var(--tw-r-2xl);
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* =======================================================
   Exit / FAQ / Reset modals
   ======================================================= */
.exit-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--tw-dur-slow) var(--tw-ease);
}

.exit-modal.show {
    opacity: 1;
    pointer-events: auto;
}

.exit-dialog {
    background: var(--tw-bg-surface);
    backdrop-filter: var(--tw-blur);
    -webkit-backdrop-filter: var(--tw-blur);
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-r-xl);
    padding: var(--tw-s-6) 28px;
    min-width: 280px;
    box-shadow: var(--tw-shadow-panel);
    transform: translateY(20px) scale(0.95);
    transition: transform var(--tw-dur-slow) var(--tw-ease-out);
    text-align: center;
}

.exit-modal.show .exit-dialog { transform: translateY(0) scale(1); }

.exit-dialog h3 {
    margin: 0 0 var(--tw-s-2);
    font-size: var(--tw-t-h2);
    color: var(--tw-fg);
    font-weight: 600;
}

.exit-dialog p {
    margin: 0 0 var(--tw-s-5);
    font-size: var(--tw-t-label);
    color: var(--tw-fg-muted);
}

.exit-dialog-buttons {
    display: flex;
    gap: var(--tw-s-3);
    justify-content: center;
}

.exit-dialog-buttons button {
    padding: var(--tw-s-2) 22px;
    border: none;
    border-radius: var(--tw-r-sm);
    font-size: var(--tw-t-label);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--tw-dur-base) var(--tw-ease),
                filter var(--tw-dur-base) var(--tw-ease);
}

.exit-btn-cancel {
    background: var(--tw-overlay-medium);
    color: var(--tw-fg);
}

.exit-btn-cancel:hover { background: rgba(255, 255, 255, 0.18); }

.exit-btn-confirm {
    background: var(--tw-red);
    /* Цвет ФОНА ОКНА, как у .preset-slot.active: тема меняет его вместе с
       красным, и одна декларация даёт тёмную надпись на ярком красном и белую
       на затемнённом. С --tw-fg было 2,42:1 в светлой теме и 3,41:1 в тёмной
       (tests/contrast.test.js). */
    color: var(--tw-bg-surface);
}

.exit-btn-confirm:hover { filter: brightness(1.15); }

/* FAQ modal */
.faq-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--tw-dur-slow) var(--tw-ease);
}

.faq-modal.show { opacity: 1; pointer-events: auto; }

.faq-content {
    background: var(--tw-bg-surface);
    backdrop-filter: var(--tw-blur);
    -webkit-backdrop-filter: var(--tw-blur);
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-r-2xl);
    width: 95%;
    max-width: 500px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: var(--tw-shadow-panel);
    transform: translateY(20px) scale(0.95);
    transition: transform var(--tw-dur-slow) var(--tw-ease-out);
    display: flex;
    flex-direction: column;
}

.faq-modal.show .faq-content { transform: translateY(0) scale(1); }

.faq-header {
    background: var(--tw-overlay-light);
    border-bottom: 1px solid var(--tw-divider);
    padding: var(--tw-s-4) var(--tw-s-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-header h2 {
    margin: 0;
    color: var(--tw-fg);
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--tw-s-2);
}

.faq-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--tw-overlay-medium);
    color: var(--tw-fg-muted);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--tw-dur-base) var(--tw-ease),
                color var(--tw-dur-base) var(--tw-ease);
}

.faq-close:hover {
    background: rgba(255, 69, 58, 0.3);
    color: var(--tw-red);
}

.faq-body {
    padding: var(--tw-s-4) var(--tw-s-5);
    overflow-y: auto;
    flex: 1;
}

.faq-section { margin-bottom: var(--tw-s-4); }

.faq-section-title {
    color: var(--tw-blue);
    font-size: var(--tw-t-tiny);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--tw-s-3);
    display: flex;
    align-items: center;
    gap: var(--tw-s-2);
}

.faq-item {
    background: var(--tw-overlay-light);
    border-radius: var(--tw-r-md);
    margin-bottom: var(--tw-s-2);
    overflow: hidden;
    border: 1px solid var(--tw-border);
}

/* Вопрос — настоящая <button>: аккордеон обязан открываться и с клавиатуры.
   Раньше это был <div> с обработчиком клика: мышью работало, а Tab проходил
   мимо, Enter не нажимал, и состояние (открыт / закрыт) ассистивным технологиям
   не сообщалось вовсе. */
.faq-question {
    width: 100%;
    background: transparent;
    border: none;
    font-family: inherit;
    text-align: left;
    padding: var(--tw-s-3) var(--tw-s-4);
    color: var(--tw-fg);
    font-size: var(--tw-t-label);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--tw-s-2);
    transition: background var(--tw-dur-base) var(--tw-ease);
}

.faq-question:hover { background: var(--tw-overlay-medium); }
.faq-question:focus-visible { outline: none; box-shadow: var(--tw-focus-ring); }

.faq-question .arrow {
    flex: 0 0 auto;
    font-size: 1em;
    line-height: 1;
    transition: transform var(--tw-dur-slow) var(--tw-ease);
    opacity: 0.45;
}

.faq-item.open .faq-question .arrow { transform: rotate(180deg); }

/* Ответ скрыт через display, а НЕ через max-height: 0.
   Прежняя схема (`max-height: 0` → `max-height: 500px` по классу
   `.faq-item.open`) работала, но лимит в 500px — молчаливая ловушка: ответ
   выше лимита обрезается без всякого признака, а `overflow: hidden` прячет
   и полосу прокрутки. Проверять при каждой правке текста, не вырос ли ответ
   за 500px, никто не будет. display не обрезает по построению. */
.faq-answer {
    display: none;
    padding: 0 var(--tw-s-4) var(--tw-s-4);
    color: var(--tw-fg-muted);
    font-size: var(--tw-t-caption);
    line-height: 1.6;
}

.faq-item.open .faq-answer { display: block; }

.faq-answer ul {
    margin: var(--tw-s-2) 0;
    padding-left: var(--tw-s-5);
    color: var(--tw-fg-muted);
}

.faq-answer ul li {
    margin-bottom: 6px;
    line-height: 1.5;
    color: var(--tw-fg-muted);
}

.faq-answer p {
    margin: var(--tw-s-2) 0;
    line-height: 1.5;
    color: var(--tw-fg-muted);
}

.faq-answer strong { color: var(--tw-fg); }

.faq-shortcuts {
    display: flex;
    flex-direction: column;
    gap: var(--tw-s-2);
}

.shortcut {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.key {
    background: var(--tw-overlay-light);
    border: 1px solid var(--tw-border-strong);
    border-radius: 5px;
    padding: 3px 9px;
    font-family: var(--tw-font-mono);
    font-size: var(--tw-t-tiny);
    color: var(--tw-fg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.shortcut-desc {
    color: var(--tw-fg-secondary);
    margin-left: var(--tw-s-2);
    font-size: var(--tw-t-caption);
}

.faq-footer {
    padding: var(--tw-s-3) var(--tw-s-5);
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid var(--tw-divider);
    text-align: center;
    color: var(--tw-fg-dim);
    font-size: var(--tw-t-tiny);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.faq-footer a { color: var(--tw-blue); text-decoration: none; }
.faq-footer a:hover { text-decoration: underline; }

/* Таб «Полноэкранный» писался, когда настройки лежали внутри 400px-панели, и
   остался мельче остальных табов того же ящика: при переключении прыгала и
   плотность, и правая ось. В ящике теснота больше ничем не оправдана. */
.drawer-body #tab-display .settings-group { padding: 12px; }
.drawer-body #tab-display .toggle-row { padding: 6px 2px; }
.drawer-body #tab-display .settings-group-title { font-size: var(--tw-t-tiny); }

/* Compact reset button inside FAQ footer */
.faq-footer .reset-btn {
    width: auto;
    margin-top: 0;
    padding: 4px var(--tw-s-3);
    border: 1px solid rgba(255, 69, 58, 0.3);
    border-radius: var(--tw-r-xs);
    background: rgba(255, 69, 58, 0.1);
    color: var(--tw-red);
    font-size: 10px;
    cursor: pointer;
    transition: background var(--tw-dur-fast) var(--tw-ease),
                border-color var(--tw-dur-fast) var(--tw-ease);
}

.faq-footer .reset-btn:hover {
    background: rgba(255, 69, 58, 0.25);
    border-color: rgba(255, 69, 58, 0.5);
}

/* Reset confirmation modal */
.reset-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 20000;
    justify-content: center;
    align-items: center;
}

.reset-modal.show { display: flex; }

.reset-dialog {
    background: var(--tw-bg-surface);
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-r-lg);
    padding: var(--tw-s-6);
    max-width: 320px;
    text-align: center;
    backdrop-filter: var(--tw-blur);
    -webkit-backdrop-filter: var(--tw-blur);
}

.reset-dialog h3 {
    margin: 0 0 var(--tw-s-2);
    color: var(--tw-red);
    font-size: 15px;
}

.reset-dialog p {
    margin: 0 0 var(--tw-s-4);
    color: var(--tw-fg-muted);
    font-size: var(--tw-t-caption);
    line-height: 1.4;
}

.reset-dialog-buttons {
    display: flex;
    gap: var(--tw-s-3);
    justify-content: center;
}

.reset-dialog-buttons button {
    padding: var(--tw-s-2) var(--tw-s-5);
    border-radius: var(--tw-r-sm);
    border: none;
    font-size: var(--tw-t-caption);
    cursor: pointer;
    font-weight: 600;
}

.reset-btn-cancel {
    background: var(--tw-overlay-medium);
    color: var(--tw-fg);
}

.reset-btn-cancel:hover { background: rgba(255, 255, 255, 0.18); }

.reset-btn-confirm {
    background: var(--tw-red);
    /* Цвет ФОНА ОКНА, как у .preset-slot.active: тема меняет его вместе с
       красным, и одна декларация даёт тёмную надпись на ярком красном и белую
       на затемнённом. С --tw-fg было 2,42:1 в светлой теме и 3,41:1 в тёмной
       (tests/contrast.test.js). */
    color: var(--tw-bg-surface);
}

.reset-btn-confirm:hover { filter: brightness(1.12); }

/* =======================================================
   Error / loading / toast
   ======================================================= */
.input-error {
    border-color: var(--tw-red) !important;
    background-color: rgba(255, 69, 58, 0.08) !important;
    animation: shake 0.3s;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-5px); }
    75%      { transform: translateX(5px); }
}

.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: var(--tw-blur-xs);
    -webkit-backdrop-filter: var(--tw-blur-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Колонка «спиннер + подпись». Была style="text-align: center" в шаблоне
   ui-feedback.js — строгая CSP такой атрибут в innerHTML не применяет. */
.loading-box {
    text-align: center;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top: 3px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loading-text {
    color: var(--tw-fg-muted);
    margin-top: 15px;
    font-size: var(--tw-t-label);
    text-align: center;
}

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.inline-loader {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(48, 209, 88, 0.2);
    border-top: 2px solid var(--tw-green);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-left: var(--tw-s-2);
    vertical-align: middle;
}

.loading-button {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}

/* Toast notifications */
.toast-container {
    position: fixed;
    /* ВНИЗУ, а не сверху. При `top: 40px` контейнер стоял ровно на цифрах
       героя: замер в живом окне давал тост 40…98 при цифрах 87…145 —
       перекрытие 11px. И это не только подсказка первого запуска: тем же
       путём приходят сообщение о восстановлении после падения и ошибки
       загрузки звука, то есть сообщение закрывало главное, что есть в окне.
       Замеряется e2e/toast-placement.spec.js. */
    bottom: var(--tw-s-10);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    display: flex;
    /* Новый тост появляется ближе к нижнему краю и отталкивает предыдущие
       вверх, а не наоборот. */
    flex-direction: column-reverse;
    align-items: center;
    gap: var(--tw-s-2);
    pointer-events: none;
}
.toast {
    background: var(--tw-bg-surface);
    backdrop-filter: var(--tw-blur);
    -webkit-backdrop-filter: var(--tw-blur);
    color: var(--tw-fg);
    padding: var(--tw-s-3) var(--tw-s-5);
    border-radius: var(--tw-r-md);
    border: 1px solid var(--tw-border);
    font-size: var(--tw-t-label);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    opacity: 0;
    /* Выезд СНИЗУ вверх — контейнер теперь у нижнего края. */
    transform: translateY(10px);
    transition: opacity var(--tw-dur-slow) var(--tw-ease),
                transform var(--tw-dur-slow) var(--tw-ease);
    pointer-events: auto;
    max-width: 340px;
    text-align: center;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error   { background: rgba(255, 69, 58, 0.9);  border-color: rgba(255, 69, 58, 0.3); }
.toast.warning { background: rgba(255, 159, 10, 0.9); border-color: rgba(255, 159, 10, 0.3); }
.toast.success { background: rgba(48, 209, 88, 0.9);  border-color: rgba(48, 209, 88, 0.3); }

    .compact-section .group-title { margin-bottom: 6px; }
    .main-controls { padding: var(--tw-s-2) var(--tw-s-4) var(--tw-s-3); }
}

@media (max-width: 380px) {
    .app-shell { padding: 0; }
    .control-panel { width: 100%; margin: 0 auto; }
    .timer-header h1 { font-size: 10px; }
    .quick-preset { padding: 4px 6px; font-size: 10px; }
    .quick-window-btn { font-size: var(--tw-t-tiny); padding: 6px; }
    .tab-btn { font-size: 10px; }
    .settings-group { padding: var(--tw-s-2); }
}

/* Scrollbar for advanced settings */
.advanced-settings .content-section::-webkit-scrollbar,
.advanced-settings::-webkit-scrollbar { width: 4px; }
.advanced-settings .content-section::-webkit-scrollbar-track,
.advanced-settings::-webkit-scrollbar-track { background: transparent; }
.advanced-settings .content-section::-webkit-scrollbar-thumb,
.advanced-settings::-webkit-scrollbar-thumb {
    background: var(--tw-overlay-medium);
    border-radius: 2px;
}
.advanced-settings .content-section::-webkit-scrollbar-thumb:hover,
.advanced-settings::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* Large-screen adaptations */
@media (min-height: 900px) {
    .timer-display-main { font-size: 72px; }
    .main-btn { width: 60px; height: 60px; }
    .main-btn.start { width: 68px; height: 68px; }
}

@media (min-width: 500px) {
    .control-panel { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Global focus-visible fallback — token-based ring */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--tw-focus-ring);
}

/* ============================================================
   Compact panel — settings live in the drawer now, so the main
   panel only carries timer + transport + presets + adjust + windows.
   Tightened to fit ~480×600 minimum and scale up cleanly.
   ============================================================ */
.custom-titlebar { padding: 5px var(--panel-inset); min-height: 30px; }

.timer-header { padding: 10px var(--panel-inset) 8px; }
.timer-header h1 { margin: 0 0 6px 0; font-size: 11px; letter-spacing: 1.6px; color: var(--tw-fg-muted); }
.timer-display-main {
    font-size: 58px;
    margin-bottom: 6px;
}
.timer-status { padding: 3px 10px; font-size: 10px; letter-spacing: 0.6px; }

.main-controls { padding: 6px var(--panel-inset) 8px; gap: 12px; }
.main-btn { width: 40px; height: 40px; font-size: 15px; }
.main-btn.start { width: 48px; height: 48px; font-size: 18px; }

.compact-section { padding: 8px var(--panel-inset); }
.compact-section + .compact-section { padding-top: 4px; }
.group-title { margin: 4px 0 6px; font-size: 10px; letter-spacing: 1px; font-weight: 700; color: var(--tw-fg-dim); }

.quick-presets { gap: 6px; }
.quick-preset { padding: 7px 4px !important; font-size: 12px !important; min-height: var(--tw-hit-min); }

.adjust-main-row { padding: 4px; gap: 4px; }
.adjust-main-btn { padding: 5px 4px !important; font-size: 12px !important; min-height: var(--tw-hit-min); }
.adjust-divider { margin: 0 6px; }

.manual-time-row { padding: 6px 4px 2px; gap: 6px; margin-top: 2px; }
.manual-time-input { padding: 5px 8px !important; font-size: 13px !important; height: var(--tw-hit-min); }
.manual-time-apply { padding: 5px 10px !important; height: var(--tw-hit-min); min-width: 36px; }
.manual-time-label { font-size: 11px; }

.timer-mode-row { padding: 6px 4px 2px; margin-top: 2px; }
.timer-mode-label { font-size: 12px; }
/* Мишень 36×32 при НЕТРОНУТОМ треке 36×20. Писать `inset: 6px 0` нельзя:
   slider лежит внутри бокса 36×20, трек схлопнется до 8px, а ручка 16px
   вылезет наружу — это видно на превью. Растим бокс, трек пиннуем полосой. */
.timer-mode-row .toggle-switch { width: 36px; height: 32px; }
.timer-mode-row .toggle-slider { top: 6px; bottom: 6px; border-radius: 10px; }
.timer-mode-row .toggle-slider::before { width: 16px; height: 16px; left: 2px; bottom: 2px; }
.timer-mode-row input:checked + .toggle-slider::before { transform: translateX(16px); }

.quick-windows { gap: 6px; }
.quick-window-btn {
    flex-direction: row;
    justify-content: center;
    padding: 7px 6px;
    gap: 5px;
    font-size: 11px;
    min-height: 0;
}
.quick-window-btn .qw-icon { font-size: 1em; width: 18px; height: 18px; }
.quick-window-btn .qw-label { font-weight: 500; }

.tab-btn { padding: 7px 6px; font-size: 11px; min-height: var(--tw-hit-min); }

.footer-hints { padding: 6px var(--panel-inset) 9px; margin-top: 2px; font-size: 10px; line-height: 1.2; flex-shrink: 0; }

/* ============ Низкое окно ============
   Блок стоит В КОНЦЕ файла осознанно. Первая версия лежала выше «Compact
   panel», и она не действовала ВООБЩЕ: медиа-запрос не добавляет
   специфичности, а `.compact-section { padding: 8px … }` из compact-panel идёт
   ниже по файлу и побеждает при равной специфичности. Замер это и показал —
   правило применилось (matchMedia дал true, computed padding сменился), а
   высоты секций не изменились ни на пиксель.

   Порог 680px, а не 600. Прежний блок был заведён на `max-height: 600px` —
   НИЖЕ собственного минимума окна управления (CONFIG.CONTROL_WINDOW_MIN_HEIGHT
   = 660), то есть не срабатывал ни при каком размере, до которого окно можно
   довести. Роль «ужать панель на низком окне» вместо него исполнял flex, и
   ужимал он единственный элемент с `flex: 0 1 auto` — секцию настроек.

   Замер на 380×660 (объявленный минимум) ДО правки:

       .content-section секции настроек   70px при содержимом 94px
       ряд вкладок .tabs-row              низ 626 при низе секции 630

   То есть на минимуме окна 24px секции уже уезжали в прокрутку, а входу во все
   настройки приложения оставалось 4px запаса. Ещё ниже — и от кнопок видно две
   трети: именно это попало на кадр control-minsize.png, который стенд снимал
   при 360×640, ниже разрешённого минимума.

   Ужимаются ОТСТУПЫ, а не кегли: панель остаётся похожей на себя. Прежний
   вариант блока трогал кегль героя (40px !important) и размер кнопок — при
   660…680 это выглядело бы поломкой, а не адаптацией.

   Порог 680 выбран так, чтобы блок не срабатывал на каноническом размере
   съёмки (400×700) и на размере по умолчанию (400×740): иначе он менял бы все
   эталонные кадры, а не один минимальный.

   Замеряется e2e/min-size-layout.spec.js, порог проверяется
   tests/visual-source.test.js. */
@media (max-height: 680px) {
    .compact-section { padding-top: 4px; padding-bottom: 4px; }
    .compact-section + .compact-section { padding-top: 4px; }
    .group-title { margin: 2px 0 4px; }
    .main-controls { padding: 4px var(--panel-inset) 6px; }
    .footer-hints { padding: 4px var(--panel-inset) 6px; }
}

/* ============ Режим «полоса» ============
   Полоса — второе состояние ОКНА, а не отдельное окно: `body.collapsed`
   прячет всё, кроме неё. Прятать секции инлайновым стилем нельзя — тогда
   состояние окажется в двух местах сразу (класс и атрибут), поэтому правит
   один селектор.

   Блок стоит в КОНЦЕ файла: он перекрывает безусловные правила «Compact
   panel», а при равной специфичности выигрывает то, что ниже. Первая версия
   блока про низкое окно лежала выше и не действовала вообще — тот же файл,
   та же ошибка, разбор в docs/lessons.md.

   Размер окна меняет главный процесс (канал control-collapse): пол
   minHeight: 660 снимается только там. Замеряется e2e/mini-bar.spec.js. */
.mini-bar { display: none; }

body.collapsed .control-panel > *:not(.mini-bar) { display: none; }
body.collapsed .settings-drawer { display: none; }
body.collapsed .app-shell,
body.collapsed .control-panel {
    height: 100vh;
    max-height: 100vh;
}
/* Подложка окна в свёрнутом виде — ровная. Два радиальных градиента
   («ellipse at 30% 20%» и «at 70% 80%») рассчитаны на панель в 700px: на
   высоте 52px эллипсы сжимаются в поперечные полосы и красят почти всю
   поверхность. Замер разницы «плоская подложка против исходной» на живом
   окне: 64,7% пикселей расходятся сильнее порога 8/255, максимум 58 —
   то есть правило не косметическое, эффект больше, чем визуальная сверка
   вообще считает изменением. Радиус уменьшен по той же причине: 20px на
   52px высоты съедают углы почти до овала. */
body.collapsed .app-shell::before {
    /* Токен без суффикса -solid: полоса — то же окно, и подложка у неё та же,
       что у развёрнутой панели. В тёмной теме значения совпадают (#1e1e22), в
       светлой развёрнутое окно стало белым — полоса обязана стать белой вместе
       с ним, иначе одно окно меняет цвет от того, свёрнуто оно или нет. */
    background: var(--tw-bg-surface);
    border-radius: var(--tw-r-lg);
}

body.collapsed .mini-bar {
    display: flex;
    align-items: center;
    /* Зазор меньше панельного: в полосе теперь девять элементов (точка, время,
       четыре ячейки вида, замок, действие, сброс, разворот), и 8px между ними
       съедали бы ширину, которой нет: восемь зазоров — это 24px разницы. Что
       всё это ПОМЕЩАЕТСЯ — не мнение: ширину меряет e2e/mini-bar.spec.js на
       живом окне и печатает запас. */
    gap: 5px;
    height: 52px;
    padding: 0 var(--panel-inset);
    /* Полоса сама себе титлбар: её тянут за неё саму. Кнопки внутри —
       no-drag, иначе клик по ним превратится в перетаскивание окна. */
    app-region: drag;
    -webkit-app-region: drag;
    user-select: none;
}
body.collapsed .mini-bar button {
    app-region: no-drag;
    -webkit-app-region: no-drag;
}

.mini-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    /* Полосу состояния ставит JS классом, а значение берётся из тех же
       токенов, что у виджета и дисплея: палитра статусов одна на все окна. */
    background: var(--tw-fg-dim);
}
.mini-dot.ok      { background: var(--tw-green); }
.mini-dot.warning { background: var(--tw-yellow); }
.mini-dot.danger  { background: var(--tw-red); }

.mini-time {
    font-family: var(--tw-font-display);
    font-size: 24px;
    font-variant-numeric: tabular-nums;
    color: var(--tw-fg);
    line-height: 1;
}
.mini-spacer { flex: 1 1 auto; }
.mini-divider {
    width: 1px;
    height: 20px;
    background: var(--tw-divider);
    flex: 0 0 auto;
}
.mini-btn {
    width: var(--tw-hit-min);
    height: var(--tw-hit-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tw-border);
    border-radius: 9px;
    background: transparent;
    color: var(--tw-fg-muted);
    cursor: pointer;
    font-size: 13px;
}
.mini-btn:hover { background: var(--tw-level-2); color: var(--tw-fg); }
/* Запертый замок в полосе — тем же языком, что и применённая ячейка вида:
   примесь акцента в подложке и акцентная кромка. Ниже :hover намеренно —
   специфичность равная, и состояние обязано быть видно под курсором тоже.
   Одного глифа мало: закрытая дужка отличается от откинутой деталью в пару пикселей. */
.mini-btn.active {
    background: color-mix(in srgb, var(--tw-blue) 18%, var(--tw-level-2));
    border-color: var(--tw-blue);
    color: var(--tw-fg);
}
.mini-btn:focus-visible { outline: none; box-shadow: var(--tw-focus-ring); }
.mini-start { color: var(--tw-green); border-color: var(--tw-green); }

/* Сообщения в свёрнутом состоянии.
   Контейнер тостов прибит к нижнему краю окна (bottom: --tw-s-10 = 40px) —
   это правка прохода по дефектам, там тост ложился на герой-время. В окне
   высотой 52px тот же отступ выносит тост ЗА верхний край: замер дал верх
   тоста на отметке -46, то есть сообщение читать нечем.

   Здесь тост встаёт по центру полосы и на её время подменяет собой её
   содержимое: терять сообщение нельзя (так приходит и уведомление о
   восстановлении после сбоя), а разворачивать окно ради него — значит менять
   режим, который выбрал пользователь. Через 3.5 секунды полоса возвращается.
   Замеряется e2e/mini-bar.spec.js. */
body.collapsed .toast-container {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
}
body.collapsed .toast {
    max-width: calc(100% - 2 * var(--panel-inset));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================================
   РЕДИЗАЙН 2026-08-12 · ТЕЛО ПАНЕЛИ
   ----------------------------------------------------------------------------
   Числа взяты из макета «Редизайн — все окна», не выдуманы. Ни одной карточки
   и ни одной рамки: поверхности разделяют расстояние и одна заливка.

   Блок стоит В КОНЦЕ файла намеренно — control.css подключается последним из
   трёх таблиц окна, а внутри него последним идёт этот блок. Так новая вёрстка
   перекрывает старые правила, не требуя их удаления построчно.
   ========================================================================== */

/* Палитра тела панели. Значения макета, объявленные ОДИН раз: цвет обязан
   приходить из каскада, а не из литерала в каждом правиле. Здесь — тёмная
   тема (она же общий :root), ниже — светлая. */
.control-panel {
    --p-fill:        rgba(255, 255, 255, 0.08);
    --p-fill-weak:   rgba(255, 255, 255, 0.05);
    --p-row-active:  rgba(255, 255, 255, 0.05);
    --p-icon-off:    rgba(255, 255, 255, 0.08);
    --p-track-off:   rgba(255, 255, 255, 0.14);
    --p-track-on:    #30d158;
    --p-knob:        #ffffff;
    --p-progress-tr: rgba(255, 255, 255, 0.10);
}
[data-theme="light"] .control-panel {
    /* Макет рисует заливку контролов как #f5f5f7. Взят токен --tw-level-2
       (#ebebf1): сумма каналов у макетного значения 737, а e2e/ui-theme.spec.js
       требует < 720 — иначе кнопка на белой панели перестаёт читаться как
       кнопка. Разница на глаз неразличима, порог же стоит именно потому, что
       почти-белые контролы пропадают. Заодно уходит литерал: цвет обязан
       приходить из каскада. */
    --p-fill:        var(--tw-level-2);
    --p-fill-weak:   var(--tw-level-2);
    --p-row-active:  var(--tw-level-1);
    --p-icon-off:    var(--tw-level-2);
    --p-track-off:   #e4e4e9;
    --p-progress-tr: var(--tw-level-2);
}

/* ---------- ГЕРОЙ ---------- */
.hero {
    padding: 14px 24px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    /* Свободную высоту окна забирает ГЕРОЙ, а не список окон и не футер: панель
       растянута на всё окно (см. .control-panel выше), и без этого правила
       содержимое встало бы встык сверху, а внизу осталась бы дыра. Цифры при
       этом центрируются в своей зоне — на окне минимальной высоты (660) зона
       равна прежней и не меняется НИЧЕГО. */
    flex: 1 1 auto;
    justify-content: center;
    min-height: 0;
}
.hero-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--tw-fg-dim);
}
/* Точка состояния: 7px, и её НЕТ в покое — там нечему пульсировать. */
.hero-label .status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: none;
}
body.state-running .hero-label .status-dot,
body.state-overtime .hero-label .status-dot { display: block; }
body.state-running  .hero-label { color: var(--tw-green); }
body.state-overtime .hero-label { color: var(--tw-red); }
body.state-input    .hero-label { color: var(--tw-blue); }

.control-panel .timer-display-main {
    font-size: 76px;
    font-weight: 200;
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--tw-fg);
    cursor: pointer;
    /* Знак выносится абсолютом, поэтому у надписи собственная ширина: иначе
       минус сдвинул бы ЦИФРЫ, а центрируются именно они. */
    position: relative;
    width: fit-content;
}
.control-panel .timer-display-main .tm-sign {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.62em;
    margin-right: 0.1em;
}
body.state-overtime .control-panel .timer-display-main,
body.state-overtime .timer-display-main { color: var(--tw-red); }

/* ---------- ВВОД ВРЕМЕНИ: ДВА ПОЛЯ ----------
   Занимает МЕСТО цифр, чтобы «нажал на время и печатаешь» читалось как одно
   движение. Полей два: слепленная строка «5:30» требовала помнить формат и
   попадать курсором в нужную позицию, а два поля сами говорят, что куда. */
.time-entry {
    display: none;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    width: 100%;
}
body.state-input .time-entry { display: flex; }

.time-field {
    /* Три поля, два разделителя и отступы обязаны уместиться в 380 px минимума
       окна: 3×96 + 2×14 + 4×8 = 348. Поэтому flex-basis, а не фиксированная
       ширина, — на широком окне поля растут вместе с панелью. */
    flex: 1 1 96px;
    max-width: 112px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: text;
}
.time-field input {
    width: 100%;
    height: 88px;
    border: 0;
    outline: 0;
    border-radius: 14px;
    background: var(--p-fill);
    color: var(--tw-fg);
    font-family: inherit;
    font-size: 44px;
    font-weight: 200;
    letter-spacing: -0.02em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    caret-color: var(--tw-blue);
    padding: 0;
    /* Обводка — ВНУТРЕННЯЯ тень, а не border: рамка меняла бы размер поля при
       фокусе и толкала соседнее. */
    box-shadow: inset 0 0 0 0 var(--tw-blue);
    transition: box-shadow var(--tw-dur-fast) var(--tw-ease);
}
.time-field input::placeholder { color: var(--tw-fg-dim); opacity: 1; }
.time-field input:focus { box-shadow: inset 0 0 0 2px var(--tw-blue); }

.time-field-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--tw-fg-dim);
}
/* Двоеточие стоит по центру ПОЛЕЙ, а не всего блока: под полями ещё подписи,
   и центр блока уехал бы вниз. 96px — высота поля. */
.time-entry-sep {
    flex: 0 0 auto;
    height: 88px;
    display: flex;
    align-items: center;
    font-size: 32px;
    font-weight: 200;
    color: var(--tw-fg-dim);
}

/* Поле с недопустимым значением. Класс тот же, что у прежнего ввода. */
.time-field input.input-error { box-shadow: inset 0 0 0 2px var(--tw-red); }

.hero-input {
    display: none;
    width: 100%;
    text-align: center;
    background: transparent;
    border: 0;
    outline: none;
    padding: 0;
    font-family: inherit;
    font-size: 76px;
    font-weight: 200;
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--tw-fg);
    caret-color: var(--tw-blue);
}
body.state-input .hero-input { display: block; }
body.state-input .timer-display-main { display: none; }

.hero-hint {
    font-size: 11.5px;
    color: var(--tw-fg-dim);
    text-align: center;
}

/* ---------- ПОЛОСА ПРОГРЕССА ---------- */
.panel-progress {
    height: 3px;
    margin-top: 20px;
    background: var(--p-progress-tr);
    display: none;
}
body.state-running .panel-progress,
body.state-overtime .panel-progress { display: block; }
.panel-progress-fill {
    display: block;
    height: 3px;
    /* Долю пишет panel-state.js переменной, а не шириной: инлайн-ширина
       перебила бы `width: 100%` перерасхода ниже. */
    width: calc(var(--progress, 0) * 100%);
    background: var(--tw-green);
    transition: width var(--tw-dur-base) var(--tw-ease);
}
body.state-overtime .panel-progress    { background: rgba(255, 69, 58, 0.22); }
body.state-overtime .panel-progress-fill { background: var(--tw-red); width: 100%; }

/* ---------- ПРЕСЕТЫ ---------- */
.presets {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 22px 20px 0;
}
body:not(.state-idle) .presets { display: none; }
.preset {
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: var(--p-fill);
    color: var(--tw-fg);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--tw-dur-fast) var(--tw-ease);
}
.preset:hover { background: var(--tw-level-3); }
.preset.active {
    background: var(--tw-blue);
    /* Цвет фона окна, как у кнопок транспорта: белый давал 3,65:1 в тёмной. */
    color: var(--tw-bg-surface);
    font-weight: 600;
}
.preset-custom {
    font-size: 12px;
    color: var(--tw-fg-muted);
}

/* ---------- ТРАНСПОРТ ---------- */
.transport {
    display: flex;
    gap: 8px;
    padding: 14px 20px 0;
}
.transport-main {
    flex: 1;
    height: 48px;
    border: 0;
    border-radius: 12px;
    background: var(--p-fill);
    color: var(--tw-fg);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
}
.transport-key {
    font-family: var(--tw-font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--tw-fg-dim);
}
/* Покой и ввод ведёт синяя кнопка, отсчёт — нейтральная, перерасход — красная.
   Надпись на заливке — цвет ФОНА ОКНА, как у модалок и .preset-slot.active:
   тема меняет его вместе с акцентом. Белая (--tw-on-accent) в тёмной теме
   давала 3,65:1 на синем и 3,41:1 на красном, а подсказка клавиши под
   прозрачностью 0.72 — 2,58:1 (tests/contrast.test.js). Подсказка берёт тот
   же цвет без прозрачности: от слова её отличает моноширинный кегль 11px. */
body.state-idle  #startBtn,
body.state-input #startBtn { display: inline-flex; background: var(--tw-blue); color: var(--tw-bg-surface); }
body.state-idle  #startBtn .transport-key,
body.state-input #startBtn .transport-key { color: currentColor; }
body.state-running  #pauseBtn { display: inline-flex; }
body.state-overtime #pauseBtn { display: inline-flex; background: var(--tw-red); color: var(--tw-bg-surface); }
body.state-overtime #pauseBtn .transport-key { color: currentColor; }

/* Пауза — модификатор, а не пятое состояние: раскладка остаётся от отсчёта,
   меняется ТОЛЬКО предлагаемое действие. Кнопка «Пауза» в паузе не делает
   ничего, и пока она стояла на экране, возобновить таймер мышью было нечем —
   ни здесь, ни в свёрнутой полосе.

   Блок обязан идти НИЖЕ правил выше: специфичность у них одинаковая
   (`body.state-running #pauseBtn` против `body.paused #pauseBtn` — по одному
   идентификатору и по одному классу), и при равенстве выигрывает то, что
   ниже. Это же правило в проекте уже стоило отдельного разбора про
   тематический блок и про «Режим полосы» в конце файла. */
/* Слово «Пауза» в общей палитре статусов — ОРАНЖЕВОЕ (активен зелёный, пауза
   оранжевая, красное — завершение и перерасход). Пока пауза жила внутри
   `state-running`, подпись красилась зелёным «идёт», а точка рядом с ней —
   оранжевым: два разных ответа на один вопрос в одной строке. Оба значения
   токена проверены на контраст в обеих темах (tests/contrast.test.js). */
body.paused .hero-label { color: var(--tw-orange); }

body.paused #pauseBtn { display: none; }
body.paused #startBtn { display: inline-flex; background: var(--tw-blue); color: var(--tw-bg-surface); }
body.paused #startBtn .transport-key { color: currentColor; }
/* Пауза, наступившая в перерасходе, остаётся красной темой экрана: синяя
   кнопка посреди красного означала бы, что состояние сменилось. */
body.state-overtime.paused #startBtn { background: var(--tw-red); }

.transport-reset {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 12px;
    background: var(--p-fill);
    color: var(--tw-fg-muted);
    font-size: 16px;
    cursor: pointer;
}
.transport-cancel {
    width: 88px;
    height: 48px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 12px;
    background: var(--p-fill);
    color: var(--tw-fg-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    display: none;
    cursor: pointer;
}
body.state-input .transport-cancel { display: block; }
body.state-input .transport-reset  { display: none; }

/* ---------- РЯД ± ---------- */
.adjust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 10px 20px 0;
}
body.state-idle .adjust,
body.state-overtime .adjust { display: none; }
.adjust-btn {
    height: 32px;
    /* Залитая и БЕЗ рамки. Макет рисует этот ряд двумя разными способами —
       белым с рамкой в кадре отсчёта и залитым в кадре ввода. При манифесте
       «ни одной карточки и рамки» верен залитый. */
    border: 0;
    border-radius: 10px;
    background: var(--p-fill-weak);
    color: var(--tw-fg-muted);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}
.adjust-btn:hover { background: var(--tw-level-3); }

/* ---------- ДВЕ НАСТРОЙКИ ОТСЧЁТА (только при вводе) ---------- */
/* Две настройки отсчёта видны в ПОКОЕ и при вводе — везде, где решают, каким
   будет таймер. Макет рисует их только в кадре ввода, и первая версия так и
   сделала: получилось, что включить «ниже нуля» посреди доклада, когда стало
   ясно, что не укладываешься, уже нельзя — а это ровно тот момент, когда она
   и нужна. Во время отсчёта их прячет не отсутствие, а невозможность войти в
   ввод; здесь же они доступны заранее. */
/* Отступ 10, а не 24: на минимуме окна 380×660 панель с этими рядами давала
   674 px содержимого при 660 доступных — ровно 14 px. Забраны здесь и в
   строке ниже, потому что это воздух, а не несущий отступ; замер после
   правки держит e2e/min-size-layout.spec.js. */
.input-extras { display: none; padding: 10px 20px 0; }
body.state-idle .input-extras,
body.state-input .input-extras { display: block; }
.srow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 10px;
}
.srow-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.srow-name { font-size: 14px; font-weight: 500; color: var(--tw-fg); }
.srow-sub  { font-size: 11.5px; color: var(--tw-fg-dim); }
.srow-input {
    width: 96px;
    height: 36px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 10px;
    background: var(--p-fill);
    color: var(--tw-fg-dim);
    font-family: inherit;
    font-size: 14px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ---------- ТУМБЛЕР ---------- */
.switch { position: relative; display: block; width: 42px; height: 25px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-track {
    position: absolute;
    inset: 0;
    border-radius: 13px;
    background: var(--p-track-off);
    pointer-events: none;
    transition: background var(--tw-dur-fast) var(--tw-ease);
}
.switch-track::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--p-knob, #fff);
    /* Подъём ручки макет СОХРАНЯЕТ — это тень, а не ореол. */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform var(--tw-dur-fast) var(--tw-ease);
}
.switch input:checked + .switch-track { background: var(--p-track-on); }
.switch input:checked + .switch-track::after { transform: translateX(17px); }

/* ---------- СТРОКИ ОКОН ---------- */
.control-panel .group-title {
    padding: 26px 20px 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--tw-fg-dim);
    text-align: left;
}
.wrows { display: flex; flex-direction: column; padding: 6px 12px 0; }
.wrow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 12px;
}
.wrow:has(.wrow-toggle.active),
.wrow:has(.wrow-toggle[aria-checked="true"]) { background: var(--p-row-active); }

.wrow-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 9px;
    background: var(--p-icon-off);
    color: var(--tw-fg-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wrow-icon svg { width: 15px; height: 15px; }
.wrow:has(.wrow-toggle.active) .wrow-icon,
.wrow:has(.wrow-toggle[aria-checked="true"]) .wrow-icon {
    background: var(--tw-blue);
    color: var(--tw-on-accent);
}

.wrow-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Имя строки и её клавиша — ОДНА строка, и это не украшение, а бюджет высоты:
   содержимое панели ровно равно её окну (замер 24.08.2026: 740 при окне 740),
   и третья строка в каждой из трёх строк окон (+45px) увела бы панель в
   компактный режим на любом окне по умолчанию. Клавиша встаёт справа от
   короткого имени, в место, которое и так пустовало (замер: имя ~50px,
   подсказка 125px, колонка 238px). */
.wrow-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.wrow-name { font-size: 14px; font-weight: 500; color: var(--tw-fg); }
.wrow-key {
    font-size: 11px;
    color: var(--tw-fg-dim);
    white-space: nowrap;
    /* Ужимается первой: на узкой панели важнее имя окна, чем подсказка. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wrow-sub  { font-size: 11.5px; color: var(--tw-fg-dim); }
/* Включённая строка говорит СОСТОЯНИЕ, а не описание, и говорит его цветом
   полосы: зелёным в норме, красным в перерасходе. */
.wrow:has(.wrow-toggle.active) .wrow-sub,
.wrow:has(.wrow-toggle[aria-checked="true"]) .wrow-sub { color: var(--tw-green); }
body.state-overtime .wrow:has(.wrow-toggle.active) .wrow-sub { color: var(--tw-red); }

.wrow-chevron {
    flex: 0 0 auto;
    border: 0;
    background: none;
    padding: 0 4px;
    font-size: 16px;
    line-height: 1;
    color: var(--tw-fg-dim);
    cursor: pointer;
}
.wrow-chevron:hover { color: var(--tw-fg); }

/* Тумблер строки — это КНОПКА (за ней висит открытие окна), поэтому у неё нет
   input, а состояние читается из .active, которое ставит обработчик окна. */
.wrow-toggle {
    position: relative;
    width: 42px;
    height: 25px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 13px;
    background: var(--p-track-off);
    cursor: pointer;
    transition: background var(--tw-dur-fast) var(--tw-ease);
}
.wrow-toggle.active,
.wrow-toggle[aria-checked="true"] { background: var(--p-track-on); }
.wrow-knob {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform var(--tw-dur-fast) var(--tw-ease);
}
.wrow-toggle.active .wrow-knob,
.wrow-toggle[aria-checked="true"] .wrow-knob { transform: translateX(17px); }

/* ---------- ФУТЕР ---------- */
/* ============================================================
   ПРЕСЕТЫ ВИДА — четыре ячейки над подсказкой клавиш
   ============================================================
   Ячейка показывает СОСТОЯНИЕ формой и цветом сразу: пустая — контур,
   записанная — заливка акцентом. Индикатор, отличимый только цветом, в этом
   проекте уже был отдельным дефектом контраста. */
.preset-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 20px 0;
}
/* Подсказка ВИДНА, а не спрятана в подсказку по наведению: правило «клик по
   пустой ячейке записывает» невозможно угадать, а курсор на проекторе никто не
   держит. Занимает всю ширину ряда и переносится на свою строку. */
.preset-hint {
    flex-basis: 100%;
    font-size: 10px;
    line-height: 1.4;
    color: var(--tw-fg-dim);
    margin-top: 2px;
}
.preset-caption {
    /* Подпись стала ОТЧЁТОМ («Вид · 2» / «Вид · свой»), то есть длиннее, чем
       было. В ряду стоит flex-wrap (он нужен подсказке внизу), и на Linux, где
       шрифт шире, удлинившаяся подпись сталкивала четвёртую ячейку на вторую
       строку: +30px к высоте панели и залипание в компактном режиме. Подпись
       не растягивается и не переносится, ячейки ужимаются — переносить в этом
       ряду разрешено ТОЛЬКО подсказке. */
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--tw-fg-dim);
    margin-right: 2px;
}
/* СОСТОЯНИЙ ТРИ, И ОНИ РАЗНЫЕ. До 20.08.2026 их было два — «пусто» и
   «записан», — а третьего, «этот вид сейчас на экране», не было вовсе:
   жалоба звучала как «не понятно, какой активный». Различаются они ЗАЛИВКОЙ,
   а не оттенком рамки:

     пусто     — ПУНКТИРНЫЙ контур, приглушённая цифра;
     записан   — СПЛОШНОЙ контур, приподнятая заливка, полужирная цифра;
     применён  — ЗАЛИТА акцентом, цифра обратная (цвета фона окна).

   Первая версия правки (20.08.2026) отличала применённую кольцом и
   подчёркиванием, оставляя цифру нейтральной, — и жалоба повторилась слово в
   слово. Урок записан в разборе: «выбран один из нескольких» — это ЗАЛИВКА;
   рамка отвечает на другой вопрос — «есть ли тут что применять».

   Ловушку «акцент на акценте» это не воскрешает: цифра не синяя, а цвета фона
   окна, и пара посчитана в обеих темах (см. правило .preset-slot.active). */
.preset-slot {
    position: relative;   /* под мишень-псевдоэлемент ячейки в полосе */
    flex: 1 1 0;
    min-width: 0;
    height: 30px;
    border: 1px dashed var(--tw-border);
    border-radius: var(--tw-r-md);
    background: transparent;
    color: var(--tw-fg-muted);
    font-family: var(--tw-font-mono);
    font-size: 13px;
    cursor: pointer;
    transition: background var(--tw-dur-base) var(--tw-ease),
                color var(--tw-dur-base) var(--tw-ease),
                border-color var(--tw-dur-base) var(--tw-ease);
}
.preset-slot:hover { border-color: var(--tw-blue); color: var(--tw-fg); }
/* Записанная ячейка: контур становится сплошным, поверхность — видимой. */
.preset-slot.filled {
    border-style: solid;
    border-color: var(--tw-border-strong);
    background: var(--tw-level-1);
    color: var(--tw-fg);
    font-weight: 600;
}
/* Применённая — ЗАЛИТАЯ ячейка с обратной цифрой. Первая версия отличала её
   кольцом и подчёркиванием: на кнопке 60px этого не хватило («не понятно,
   какой профиль сейчас выбран»), и разница между «записан» и «применён»
   читалась как оттенок рамки. Выбранный из нескольких — это заливка, а не
   рамка.

   Цвет цифры — `--tw-bg-surface`, то есть ФОН ОКНА: тема переопределяет его
   вместе с акцентом, и одна декларация даёт верную пару в обеих. Посчитано:
   тёмная #1e1e22 на #0a84ff — 4.55:1 (белым было бы 3.65:1, то есть провал
   AA), светлая #ffffff на #0053ae — 7.37:1 (чёрным 2.85:1). Закреплено
   tests/contrast.test.js, который читает ЭТО правило, а не копию литералов. */
.preset-slot.active {
    background: var(--tw-blue);
    border-color: var(--tw-blue);
    color: var(--tw-bg-surface);
    font-weight: 700;
}
/* Фокус НИЖЕ состояний: он обязан быть виден и на залитой ячейке. */
.preset-slot:focus-visible { outline: none; box-shadow: var(--tw-focus-ring); }
body.state-input .preset-row { display: none; }

/* ---------- ТЕ ЖЕ ЯЧЕЙКИ В ПОЛОСЕ ----------
   Кнопки полосы — те же .preset-slot (класс, привязка и состояния общие),
   меняется только посадка: в 52px полосе им отведён квадрат 24×24.

   Блок стоит ПОСЛЕ правил .preset-slot намеренно: специфичность равная
   (0,1,0), и решает порядок — тот же капкан, что описан у блока «Режим
   полоса» выше по файлу. */
.mini-presets {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}
.mini-preset {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 11px;
    border-radius: 7px;
    line-height: 1;
}
/* Мишень растёт ПСЕВДОЭЛЕМЕНТОМ, а не боксом: 24px по горизонтали держат
   четыре ячейки в ряд, а по вертикали в полосе есть место — мишень становится
   40px высотой. По горизонтали запас всего 1px с каждой стороны, чтобы мишени
   соседних ячеек не наезжали друг на друга (зазор между ними 4px). */
.mini-preset::before {
    content: '';
    position: absolute;
    inset: -8px -1px;
}

.panel-footer {
    padding: 20px 20px 18px;
    text-align: center;
    font-family: var(--tw-font-mono);
    font-size: 11px;
    color: var(--tw-fg-dim);
}
body.state-input .panel-footer { display: none; }

/* Поле ввода времени не рисует рамку НИ В ОДНОМ состоянии, включая фокус:
   в макете на месте цифр только цифры и каретка. Правило идёт последним и
   перечисляет :focus/:focus-visible явно — иначе общие правила для input в
   этом файле возвращают коробку именно в фокусе, а поле в этом режиме
   сфокусировано всегда. */
.hero-input,
.hero-input:hover,
.hero-input:focus,
.hero-input:focus-visible {
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
}

/* ============================================================================
   РЕДИЗАЙН 2026-08-12 · ЯЩИК НАСТРОЕК
   ----------------------------------------------------------------------------
   Мок рисует ящик так же плоско, как панель: ни карточек, ни рамок вокруг
   групп. Разделяют заголовок группы и расстояние.
   ========================================================================== */

/* Крошка «НАСТРОЙКИ /» снята: заголовок ящика называет ОДНО окно, а путь к
   нему виден в самой панели — это строка, из которой ящик открыли. Селектор
   именно .drawer-head::before: крошку рисует шапка, а не заголовок. */
.drawer-head::before { content: none; }

.settings-drawer.open { background: var(--tw-bg-glass); }
[data-theme="light"] .settings-drawer.open { background: #fbfbfc; }

.drawer-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px 12px;
}
.drawer-back,
.drawer-close {
    flex: 0 0 auto;
    border: 0;
    background: none;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    color: var(--tw-fg-dim);
    cursor: pointer;
}
.drawer-back:hover,
.drawer-close:hover { color: var(--tw-fg); }
.drawer-title {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--tw-fg);
    letter-spacing: 0;
    text-transform: none;
}

/* Группа — не карточка. Она была рамкой с фоном и радиусом; макет оставляет
   от неё только заголовок и воздух.
   Селектор двойной намеренно: карточку задают .drawer-body .settings-group и
   [data-theme="light"] .settings-group, обе специфичнее одиночного класса, и
   правило «последний выигрывает» тут не работает — выигрывает специфичность. */
.drawer-body .settings-group,
[data-theme="light"] .settings-group,
[data-theme="light"] .drawer-body .settings-group {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 18px;
    margin: 0 0 20px;
}
.drawer-body .settings-group-title,
[data-theme="light"] .drawer-body .settings-group-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--tw-fg-dim);
    padding: 0 0 8px;
    background: none;
    border: 0;
}
/* Иконки у заголовков групп сняты: в макете заголовок — это слово, и только.
   Ряд из пяти значков соревновался за внимание с самими настройками. */
.settings-group-title .icon { display: none; }

/* Подсказка вверху таба — та же плоская строка, а не карточка в рамке.
   И она ТИШЕ содержимого: до 20.08.2026 подсказка была самым громким пятном
   вкладки (голубая заливка, 13px), а на «Дисплее» занимала 180px из 685 —
   четверть высоты вкладки под инструкцию, которую читают один раз. Вес
   перевёрнутый: инструкция кричала громче настроек. */
.settings-hint {
    background: var(--tw-level-1);
    border: 0;
    border-radius: 10px;
    box-shadow: none;
    font-size: 11px;
    line-height: 1.45;
    color: var(--tw-fg-dim);
    padding: 8px 10px;
    margin-bottom: 12px;
}
.settings-hint kbd { font-size: 10px; padding: 0 4px; }
/* Сочетание не рвётся на строки: «Ctrl» в конце одной строки и «+колесо» в
   начале следующей, «(» отдельно от «Esc» — так подсказка читалась на кадре
   ящика (аудит 03.11.2026). Между <kbd>-блоками браузер переносит строку. */
.kbd-combo { white-space: nowrap; }
.settings-hint .hint-icon { opacity: 0.6; }

/* Строка настройки: имя, пояснение, контрол справа. Числа из мока. */
.toggle-row { padding: 0 0 16px; }
.toggle-label { font-size: 13.5px; font-weight: 500; color: var(--tw-fg); }
.toggle-hint  { font-size: 11px; color: var(--tw-fg-dim); }

/* Иконка перед заголовком группы. Правило одиночным классом проигрывало
   `.drawer-body .settings-group-title .icon`; повторяем ту же глубину. */
.drawer-body .settings-group-title .icon,
[data-theme="light"] .drawer-body .settings-group-title .icon { display: none; }

/* Тумблер строки — это КНОПКА окна (id и обработчики сохранены), поэтому на
   неё продолжают действовать правила прежней плитки: заливка, рамка, отступы
   и «галочка» ::after, которой в макете нет. Снимаем их разом.
   Селектор двойной: .quick-window-btn.active::after и цветные правила светлой
   темы объявлены с той же или большей глубиной. */
.wrow-toggle.quick-window-btn,
[data-theme="light"] .wrow-toggle.quick-window-btn {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: var(--p-track-off);
    font-size: 0;
    min-width: 0;
    gap: 0;
}
.wrow-toggle.quick-window-btn.active,
[data-theme="light"] .wrow-toggle.quick-window-btn.active {
    background: var(--p-track-on);
    border: 0;
    box-shadow: none;
}
.wrow-toggle.quick-window-btn::after,
.wrow-toggle.quick-window-btn.active::after { content: none; }
.wrow-toggle.quick-window-btn:hover,
[data-theme="light"] .wrow-toggle.quick-window-btn:hover { transform: none; }

/* Зона перетаскивания подсвечивается, пока файл над ней: без обратной связи
   пользователь не знает, попал он или нет. */
.add-sound-btn.drag-over {
    border-color: var(--tw-blue);
    background: var(--tw-level-1);
}

/* ---------- ПОЛОСА: действие словом ---------- */
.mini-action {
    flex: 0 0 auto;
    border: 0;
    border-radius: 8px;
    padding: 4px 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: none;
    /* Чип, а не залитая кнопка: в полосе он стоит рядом со временем, и полная
       заливка перетягивала бы на себя внимание с самого времени. */
    background: color-mix(in srgb, var(--tw-blue) 16%, transparent);
    color: var(--tw-blue);
}
[data-theme="light"] .mini-action { background: #f0f6ff; }
body.state-idle  #miniBarStart,
body.state-input #miniBarStart { display: block; }
body.state-running  #miniBarPause,
body.state-overtime #miniBarPause { display: block; }
body.state-overtime #miniBarPause {
    background: color-mix(in srgb, var(--tw-red) 16%, transparent);
    color: var(--tw-red);
}
/* Пауза: в полосе тот же обмен, что и в панели. Ниже правил выше по той же
   причине — специфичность равная, решает порядок. Слово на кнопке ставит сам
   модуль полосы (mini-bar.js): панель отдаёт ему признак, а не разметку. */
body.paused #miniBarPause { display: none; }
body.paused #miniBarStart { display: block; }

/* ===========================================================================
   Ряд «Фон» — цвет подложки виджета и часов (см. panel-colors.js).
   Разметку строит модуль, здесь только оформление. Цвет свотча приходит
   переменной --surface-swatch: инлайновый background означал бы второго
   владельца значения, а состояние «фон не задан» — класс .is-empty.
   =========================================================================== */
.surface-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--tw-divider);
}

.surface-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.surface-label {
    font-size: var(--tw-t-tiny);
    color: var(--tw-fg-secondary);
    min-width: 92px;
}

.surface-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid var(--tw-border-strong);
    background: var(--surface-swatch, transparent);
    transition: box-shadow var(--tw-dur-base) var(--tw-ease);
}

/* Шахматка — «фона нет», а не «фон прозрачный»: два разных состояния, и
   различать их по одной лишь пустоте нельзя. */
.surface-swatch.is-empty {
    background-image:
        linear-gradient(45deg, var(--tw-divider) 25%, transparent 25%),
        linear-gradient(-45deg, var(--tw-divider) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--tw-divider) 75%),
        linear-gradient(-45deg, transparent 75%, var(--tw-divider) 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}

.surface-swatch:focus-visible,
.surface-reset:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.55);
}

.surface-swatch.active {
    box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.55);
}

.surface-reset {
    margin-left: auto;
    padding: 3px 10px;
    font-size: var(--tw-t-tiny);
    color: var(--tw-fg-secondary);
    background: var(--tw-overlay-light);
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-r-xs);
    cursor: pointer;
}

.surface-reset:hover:not(:disabled) {
    color: var(--tw-fg);
    background: var(--tw-overlay-medium);
}

.surface-reset:disabled,
.surface-alpha:disabled {
    opacity: 0.4;
    cursor: default;
}

.surface-alpha {
    flex: 1;
    accent-color: var(--tw-blue);
}

.surface-alpha-value {
    font-size: var(--tw-t-tiny);
    color: var(--tw-fg-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 38px;
    text-align: right;
}

/* Кнопка «Сбросить всё» — своя строка под цветами (см. panel-reset.js).
   Подпись рядом обязательна: кнопка сброса без границы действия читается как
   «сотрёт вообще всё», включая положение окна, которого она не трогает. */
.reset-line {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--tw-divider);
}

.reset-hint {
    min-width: 0;
    flex: 1;
}

/* «Сбросить всё» — действие необратимое, поэтому набрано красным. Но красной
   КРОМКИ у него больше нет: на вкладке это была самая большая цветная площадь,
   и кнопка сброса перетягивала внимание с самих настроек. Сигнал несёт СЛОВО и
   его цвет (светлая 5.38:1, тёмная 4.88:1 — обе выше порога AA), а не заливка
   с рамкой. Кромка краснеет на наведении, когда действие уже выбирают. */
.surface-reset.reset-all {
    color: var(--tw-red);
    border-color: var(--tw-border);
}

.surface-reset.reset-all:hover:not(:disabled) {
    color: var(--tw-red);
    border-color: color-mix(in srgb, var(--tw-red) 45%, transparent);
    background: color-mix(in srgb, var(--tw-red) 12%, transparent);
}

/* ============================================================
   УЗКОЕ ОКНО: ящик настроек НАКРЫВАЕТ панель, а не делит с ней место
   ============================================================
   Жалоба 19.08.2026: «когда уменьшаю окно настроек, всё съезжается и налезает
   друг на друга». Так и было. Раскладка «панель слева, ящик справа» верна
   только пока окно шире их суммы: панель минимум 380px плюс ящик 336px плюс
   поля — около 720px. Комментарий выше утверждал, что узкий режим недостижим,
   потому что «main делает окно достаточно широким ПЕРЕД открытием ящика», — и
   это правда ровно до первого перетаскивания рамки окна. Пользователь может
   уменьшить окно ПОСЛЕ, а на маленьком экране (раннеры CI — 1024×720) главный
   процесс и сам не может дать 1096px.

   Замер до правки, ящик открыт: при 700×700 прямоугольники ящика и панели
   пересекались, содержимое вкладки ложилось на список окон, ряд пресетов и
   подвал; при 560×660 — на всё сразу, включая блок с цифрами.

   Ответ: ниже порога ящик перестаёт быть колонкой и становится НАКЛАДКОЙ во всю
   ширину. Панель под ним цела и возвращается, как только ящик закрыт или окно
   снова стало шире — состояние одно (класс `drawer-open`), меняется только
   способ его показать.

   Блок стоит В КОНЦЕ файла намеренно: он перекрывает и раскладку колонок
   (.app-shell.drawer-open), и геометрию ящика (.settings-drawer.open), и его
   фон (правила светлой темы ниже по файлу) — специфичность у них равная, и
   решает порядок. */
/* Порог — СУММА минимумов, а не круглое число: панель не уже
   CONTROL_WINDOW_MIN_WIDTH (380) плюс ящик 336 = 716. При 719px места хватает
   (панель 383), и накладка там не нужна — а первая версия ставила порог 719 и
   ловила ровно этот случай: пользователь с окном 383 открывал ящик, главный
   процесс расширял окно до 383+336=719, и панель пропадала под накладкой. */
@media (max-width: 715px) {
    .app-shell.drawer-open {
        /* Колонки больше нет: панель занимает окно целиком, ящик ложится
           поверх. Иначе панель осталась бы шириной 380px в левой дорожке, а
           накладка стояла бы поверх пустого места справа. */
        grid-template-columns: 1fr;
    }

    .app-shell.drawer-open .control-panel {
        max-width: 100%;
    }

    .settings-drawer.open {
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        border-left: 0;
        border-radius: var(--tw-r-2xl);
        /* Накладка обязана быть НЕПРОЗРАЧНОЙ: сквозь полупрозрачный ящик
           просвечивала бы панель, и «налезает друг на друга» вернулось бы —
           только теперь глазами, а не прямоугольниками. */
        background: var(--tw-bg-surface-solid);
    }

    /* Граница-разделитель между панелью и ящиком в этом режиме не нужна:
       делить нечего, ящик занимает всё окно. */
    .app-shell.drawer-open .settings-drawer.open {
        border-left: 0;
    }
}

/* ============================================================
   НИЗКОЕ ОКНО: панель ПРОКРУЧИВАЕТСЯ, а не теряет низ молча
   ============================================================
   Вторая половина той же жалобы 19.08.2026. У панели стоит `overflow: hidden`
   — «панель не должна перерастать окно». Это верно, но неполно: когда окно
   ниже содержимого, скрытым оказывается не «лишнее поле», а ряд пресетов,
   список окон и подвал (замер: при окне 520px содержимое 606px, за краем ряд
   «Вид» 482…554 и подвал 554…606). Пользователь при этом видит не «здесь
   ничего нет», а «часть интерфейса пропала».

   Прокрутка появляется РОВНО когда не помещается: на 660 и выше содержимое
   умещается целиком и полосы прокрутки нет вовсе. Обычный размер окна не
   задет — его считает главный процесс по содержимому (740).

   Правило стоит в конце файла и перекрывает `overflow: hidden` выше по тому
   же селектору: специфичность равная, решает порядок. */
.control-panel {
    overflow-y: auto;
    overflow-x: hidden;
}

/* ============================================================
   НИЗКОЕ ОКНО: герой не сжимается ниже своих цифр
   ============================================================
   Продолжение той же жалобы 19.08.2026, вторая её половина: «всё съезжается и
   налезает друг на друга». У героя стоит `flex: 1 1 auto; min-height: 0` —
   он ЗАБИРАЕТ свободную высоту, и это правильно. Неправильно то, что он и
   ОТДАЁТ её ниже своего содержимого: кегль цифр остаётся 76px, коробка
   сжимается, и глифы ложатся на ряд пресетов.

   Замер до правки (текст против ряда «5 15 25 45»): окно 700 — наезд 3px, 660
   — 19px, 650 — 24px, 600 — 43px, причём на 600 верх цифр уходил ЗА окно
   (−2px). Прямоугольники секций при этом не пересекались вовсе: наезжал
   ТЕКСТ, вылезший из сжатой коробки, — поэтому и замер тут по тексту.

   `min-height: min-content` оставляет герою способность расти и отнимает
   способность схлопываться. Когда высоты не хватает даже так, панель
   прокручивается (правило выше) — содержимое не теряется.

   Кегль цифр на низком окне уменьшается: 76px в окне 660 занимают четверть
   высоты панели, и всё остальное лезет друг на друга ещё до прокрутки. 56px —
   это ровно тот кегль, при котором на 660 содержимое умещается целиком и
   прокрутка не нужна (замер: 606px содержимого при 660 окна). */
.hero {
    min-height: min-content;
}

/* ============================================================
   КОМПАКТНЫЙ РЕЖИМ ПАНЕЛИ
   ============================================================
   Признак компактности — КЛАСС, который ставит ЗАМЕР (panel-compact.js), а не
   медиазапрос по высоте. Высота — не тот вопрос: помещается содержимое или
   нет, зависит ещё и от ширины (перенос подсказок), от языка и от того, какие
   строки сейчас показаны. Жалоба 19.08.2026 с кадром — окно 761×737: в порог
   `max-height: 700px` оно не попадало, а содержимое в него не влезало, и
   нижняя подсказка была обрезана наполовину.

   Сжимается ВОЗДУХ, а не текст: обе нижние подсказки остаются на месте —
   первая версия правки прятала подсказку под ячейками «Вид», то есть
   экономила ровно на том, ради чего её и добавили.

   Селектор кегля — ТОТ ЖЕ, что у основного правила (`.control-panel
   .timer-display-main`, 76px), плюс класс: правило слабее просто не
   сработало бы, и замер это уже показывал (кегль оставался 76px). */
body.compact-panel .control-panel .timer-display-main {
    font-size: 56px;
}

body.compact-panel .hero {
    padding-top: 8px;
    gap: 4px;
}

body.compact-panel .panel-footer {
    padding: 10px 20px;
}

body.compact-panel .preset-row {
    padding-top: 2px;
}

/* Подпись раздела: 40px высоты на девять букв. */
body.compact-panel .group-title {
    margin: 2px 0 4px;
}

/* Ряды окон: четыре строки — самый крупный блок панели. Минус два пикселя на
   строку дают восемь, и на глаз ряд остаётся тем же. */
body.compact-panel .wrow {
    padding: 8px;
}

/* Кнопки длительностей: воздух сверху отделяет их от цифр, а в компактном
   режиме цифры и так ближе. */
body.compact-panel .presets {
    padding-top: 14px;
}

/* Вторая ступень сжатия: включается, когда первой не хватило (например,
   «Считать ниже нуля» показывает ещё две строки настроек — замер 19.08.2026:
   содержимое 700px при окне 660). Убирается то, без чего интерфейс остаётся
   понятным: подсказка под цифрами (по цифрам и так кликают), ещё немного кегля
   и высоты транспорта. Подсказки ВНИЗУ не трогаются ни на одной ступени. */
body.compact-panel-2 .control-panel .timer-display-main {
    font-size: 44px;
}

body.compact-panel-2 .hero-hint {
    display: none;
}

body.compact-panel-2 .transport-row {
    padding-top: 6px;
    padding-bottom: 6px;
}

body.compact-panel-2 .presets {
    padding-top: 10px;
}

body.compact-panel-2 .wrow {
    padding: 6px 8px;
}

body.compact-panel-2 .group-title {
    margin: 0 0 3px;
}

/* ЗАПАС ВЫСОТЫ на самой мелкой ступени.
   На минимуме 383×660 со строкой лимита панель помещалась ровно в ноль
   пикселей: `natural == client`. Ноль запаса означает, что панель ломает любая
   разница метрик шрифта — и она её сломала: на Linux содержимое вышло 675 при
   660, панель залипла в компактном режиме, а CI покраснел, хотя на macOS всё
   сходилось. Поэтому здесь не «подгонка под макет», а именно запас: ужимаются
   отступы, но ни один элемент не прячется — правило «подсказка ВИДНА»
   действует и тут (её целостность сторожит e2e/panel-shell.spec.js). */
body.compact-panel-2 .preset-row {
    padding-top: 0;
}
body.compact-panel-2 .preset-hint {
    font-size: 9.5px;
    line-height: 1.3;
}
body.compact-panel-2 .panel-footer {
    padding: 6px 20px;
}
body.compact-panel-2 .wrow {
    padding: 5px 8px;
}


body.compact-panel-2 .main-btn,
body.compact-panel-2 .transport-main {
    height: 46px;
}

/* Скрытый режим «47-й этаж»: команды мероприятия.
   Кнопки стоят СТОЛБИКОМ, а не рядом: у каждой своя подпись, а подпись под
   кнопкой шириной в половину колонки переносится в три строки. Пока кнопки
   были одинаковыми соседями, разница между «заморозить итог» и «стереть его»
   открывалась только в модалке — то есть уже после нажатия. */
.floor47-actions {
    display: flex;
    flex-direction: column;
    gap: var(--tw-s-3);
}

/* Глубина селектора здесь НЕСУЩАЯ, а не стилистическая.
   Секция живёт внутри `#tab-display`, где для кнопки «Сбросить фон» объявлено
   `#tab-display .reset-btn { width: auto; margin-left: auto; color: dim }`.
   Одиночным классом это правило не перебить: команды мероприятия съезжали
   вправо по ширине своего текста и красились в цвет второстепенной кнопки.
   Замер поймал их разной ширины — 128 против 153 px. Повторяем ту же глубину. */
#tab-display .floor47-action .reset-btn {
    width: 100%;
    margin: 0;
    padding: var(--tw-s-3);
    font-size: var(--tw-t-label);
    color: var(--tw-fg-secondary);
    background: var(--tw-overlay-light);
}
.floor47-action .toggle-hint { margin-top: 4px; }

/* Кнопка «Завершить» на уже завершённом мероприятии: завершать нечего.
   Гашение видно и без цвета — курсор говорит то же самое. */
#tab-display .floor47-action .reset-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
#tab-display .floor47-action .reset-btn:disabled:hover {
    border-color: var(--tw-border);
    color: var(--tw-fg-secondary);
    background: var(--tw-overlay-light);
}

/* Разрушающая команда выглядит разрушающей ещё до нажатия. Цвет здесь —
   УСИЛЕНИЕ, а не носитель смысла: смысл несёт слово «обнулится, стёрто
   насовсем» в подписи под кнопкой. Пара «--tw-red на поверхности панели» уже
   в ходу (`.reset-btn:hover`) и в обеих темах: в светлой токен темнеет. */
#tab-display .floor47-action .reset-btn-danger {
    border-color: rgba(255, 69, 58, 0.32);
    color: var(--tw-red);
}
#tab-display .floor47-action .reset-btn-danger:hover {
    border-color: rgba(255, 69, 58, 0.55);
    background: rgba(255, 69, 58, 0.12);
}

/* Строка настройки с пояснением: имя и подпись столбиком слева, контрол
   справа. `.toggle-row` — flex со space-between, и без обёртки подпись стала
   бы третьим элементом ряда и уехала бы под тумблер. */
.toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-right: var(--tw-s-3);
}

/* Отчёт о мероприятии: идёт оно или заморожено и на какой сумме.
   Состояние помечено ФОРМОЙ точки, а не только цветом: у идущего она залита,
   у завершённого — кольцо. Слово в самой строке говорит то же самое. */
.event-status {
    display: flex;
    align-items: center;
    gap: var(--tw-s-2);
    font-size: 12px;
    color: var(--tw-fg-secondary);
    padding: 0 0 var(--tw-s-3);
}

.event-status::before {
    content: '';
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tw-green);
}

.event-status.is-finished { color: var(--tw-fg-dim); }
.event-status.is-finished::before {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--tw-fg-dim);
}

/* ---- Бывшие style="…" разметки (CSP `style-src 'self'`, 25.09.2026) ----
   Строгая политика не применяет атрибут style, поэтому начальное «скрыто»
   живёт здесь. Показывают и прячут эти ряды скрипты (panel-state.js,
   control-app.js, local-background.js) инлайном через CSSOM —
   el.style.display = 'flex' | 'block' | 'none', — который политика не трогает
   и который выигрывает у этого правила. */
#widgetDigitsFontRow,
#clockDigitsFontRow,
#displayDigitsFontRow,
#clockAnalogNumbersRow,
#localBgImage,
#bgFitOptions,
#bgOverlayRow {
    display: none;
}

/* Мастер-тумблер «Звуки» прижат к правому краю заголовка группы. */
.settings-group-title > .toggle-switch {
    margin-left: auto;
}