/* sekundomer24.ru — прототип 20.09.2026.

   Оформление по присланному образцу (Mintlify): белый холст, чёрный текст,
   зелёный #0c8c5e только на акцентах и активных состояниях, чёрная заливка
   единственной главной кнопки. Скругления 4px у кнопок и полей, 16px
   у карточек, 24px у крупных блоков. Тени еле заметные, вместо них рамка
   в 1px. Тёмная поверхность одна — полоса с заголовком на главной.

   Inter лежит у себя (шрифты взяты с qr-scaner.ru). Пути к шрифтам
   ОТНОСИТЕЛЬНЫЕ: статику отдаёт Django с хэшем в имени файла
   (ManifestStaticFilesStorage), и он переписывает только относительные
   адреса внутри CSS. С «/fonts/…» браузер получал 404. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-cyrillic.4e2553027f1d.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.65850a373e25.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

:root {
  --green: #0c8c5e;
  --green-wash: rgba(12, 140, 94, .06);
  --ink: #08090a;
  --text: #000;
  --muted: rgba(0, 0, 0, .58);
  --white: #fff;
  --page-bg: #fff;
  --mist: #f2f2f2;
  --cloud: #ddd;
  /* Главная кнопка: в светлой теме чёрная, в тёмной наоборот светлая —
     иначе она сливается с фоном. */
  --btn-bg: #08090a;
  --btn-fg: #fff;
  --btn-hover: #1d1f22;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --shadow-btn: rgba(8, 9, 10, .03) 0 2px 4px 0;
  --shadow-card: rgba(8, 9, 10, .05) 0 2px 4px 0;
  --r-btn: 4px;
  --r-card: 16px;
  --r-big: 24px;
}

/* Тёмная тема (20.09.2026, просьба владельца). Отступление от присланного
   образца оформления: там сказано «никаких тёмных поверхностей в блоках
   с содержимым». Палитра целиком в переменных, поэтому тема — это только
   другой набор значений; разметка и правила одни и те же.
   Зелёный взят светлее: #0c8c5e на тёмном фоне читается плохо. */
:root[data-theme="dark"] {
  --green: #3ecf8e;
  --green-wash: rgba(62, 207, 142, .12);
  --ink: #f2f4f7;
  --text: #e4e7eb;
  --muted: rgba(255, 255, 255, .58);
  --white: #161a20;
  --page-bg: #0f1216;
  --mist: #232830;
  --cloud: #39404b;
  --btn-bg: #f2f4f7;
  --btn-fg: #0f1216;
  --btn-hover: #fff;
  --shadow-btn: none;
  --shadow-card: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font: 400 16px/1.5 var(--font);
  letter-spacing: -.16px;
  font-feature-settings: "ss01" on, "cv11" on;
}

a { color: var(--text); }
a:hover { color: var(--green); }

h1, h2, h3 { font-weight: 600; color: var(--ink); }
h1 { font-size: clamp(30px, 5vw, 40px); line-height: 1.15; letter-spacing: -.4px; margin: 0; }
h2 { font-size: 24px; line-height: 1.33; letter-spacing: -.24px; margin: 48px 0 12px; }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.2px; margin: 24px 0 8px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }
/* Контейнер секундомера шире текстового: чем шире карточка, тем крупнее цифры. */
.tool-wrap { max-width: 1280px; margin-bottom: 32px; }

/* ---------------------------------------------------------- навигация */

.site-header { background: var(--white); }
.site-header .wrap {
  display: flex; align-items: center; gap: 10px;
  min-height: 64px; flex-wrap: wrap;
}
.hd-logo {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--ink);
  font-weight: 600; font-size: 18px; letter-spacing: -.2px;
}
.hd-logo:hover { color: var(--ink); }
.hd-logo svg { width: 26px; height: 26px; flex: none; }
.hd-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin-left: auto; }

/* Кнопки-значки в шапке (полный экран и тема). Оформление общее, а классы
   ролей — разные: theme.js ищет .theme-btn, и с общим классом он цеплялся
   и к кнопке полного экрана, переключая тему заодно с разворотом. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px; border: 1px solid var(--cloud); border-radius: var(--r-btn);
  background: var(--white); color: var(--ink); cursor: pointer;
}
.icon-btn svg { width: 18px; height: 18px; display: block; }
.icon-btn:hover { background: var(--mist); }
/* Иконка полного экрана: одна из двух половин по состоянию. */
.fs-btn { flex: none; }
.fs-close { display: none; }
:root[data-fs="1"] .fs-open { display: none; }
:root[data-fs="1"] .fs-close { display: block; }

.theme-sun { display: none; }
:root[data-theme="dark"] .theme-sun { display: block; }
:root[data-theme="dark"] .theme-moon { display: none; }
.hd-theme { flex: none; }
.ft-theme { margin-left: auto; }

/* Бургер виден только на узком экране, на широком меню стоит строкой. */
.burger {
  display: none; margin-left: auto; padding: 8px; border: 0; border-radius: var(--r-btn);
  background: none; color: var(--ink); cursor: pointer;
}
.burger svg { width: 22px; height: 22px; display: block; }
.burger:hover { background: var(--mist); }
.burger .burger-cross { display: none; }
.site-header.menu-open .burger .burger-lines { display: none; }
.site-header.menu-open .burger .burger-cross { display: block; }
.hd-nav a {
  padding: 6px 9px; border-radius: var(--r-btn);
  font-size: 14px; font-weight: 500; letter-spacing: 0; text-decoration: none;
  color: var(--text);
}
.hd-nav a:hover { background: var(--mist); color: var(--text); }
.hd-nav a.on { color: var(--green); }

/* ---------------------------------------------------- полоса и шапка */

/* Единственная цветная поверхность на сайте. Карточка секундомера заходит
   на её нижний край, поэтому у полосы снизу запас под вынос. */
.hero {
  background: linear-gradient(160deg, #06342a 0%, #0a5c41 55%, #0c8c5e 100%);
  /* Белый тут записан прямо, а не переменной: полоса зелёная в обеих темах,
     и текст на ней всегда светлый. С var(--white) в тёмной теме заголовок
     темнел вместе с карточками и пропадал на зелёном. */
  color: #fff;
  padding: 20px 0 100px;
  text-align: center;
}
.hero h1 { color: #fff; font-size: clamp(32px, 6vw, 57px); line-height: 1.1; letter-spacing: -1.14px; }
.hero p { margin: 16px auto 0; max-width: 620px; font-size: 18px; color: rgba(255, 255, 255, .8); }
.hero + .content .tool-card { margin-top: -104px; }

.page-head { padding: 5px 0 0; }
.page-head p.lead { margin: 12px 0 0; font-size: 18px; color: var(--muted); }

.content { padding: 24px 0 64px; }
.content p { margin: 0 0 12px; }
.content ul { margin: 0 0 12px; padding-left: 20px; }
.content li { margin: 6px 0; }

.eyebrow {
  margin: 0 0 8px; font-size: 13px; font-weight: 500; line-height: 1.5;
  letter-spacing: .65px; text-transform: uppercase; color: var(--green);
}

.site-footer { border-top: 1px solid var(--mist); background: var(--white); }
.site-footer .wrap {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  min-height: 64px; font-size: 13px; letter-spacing: .65px; color: var(--muted);
}
.site-footer a { color: var(--muted); text-decoration: none; }
.ft-terms, .ft-link { font-size: 13px; letter-spacing: 0; }
.site-footer a:hover { color: var(--green); }
/* Ссылки разделов в подвале: они там только на странице «Весь экран»,
   где верхней полосы нет вовсе. */
.ft-nav { display: flex; gap: 16px; flex-wrap: wrap; margin-left: auto;
  letter-spacing: 0; font-size: 14px; }
.ft-nav a[aria-current="page"] { color: var(--green); }

/* ------------------------------------------------------------- кнопки */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border: 1px solid transparent; border-radius: var(--r-btn);
  background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--shadow-btn);
  font: 500 15px/1.2 var(--font); letter-spacing: 0; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--btn-hover); color: var(--btn-fg); }
.btn-quiet {
  background: var(--white); color: var(--text); border-color: var(--cloud); box-shadow: none;
}
.btn-quiet:hover { background: var(--mist); color: var(--text); }
.btn-quiet[disabled]:hover { background: var(--white); }
.btn[disabled] { opacity: .4; cursor: default; }
.btn[disabled]:hover { background: var(--btn-bg); }

/* -------------------------------------------------------------- табло */

.tool-card {
  position: relative; background: var(--white); border: 1px solid var(--mist);
  border-radius: var(--r-big); box-shadow: var(--shadow-card); padding: 24px;
}

.sek-screen { text-align: center; padding: 8px 0 4px; }
/* Табличные цифры обязательны: у пропорциональных ширина знака разная,
   и строка дёргается на каждой сотой доле. */
/* Предел 16vw / 216px ПРОВЕРЕН замером самой длинной записи «1:19:27.89»:
   она занимает 5,3 ширины знака, и при большем размере цифры вылезают
   за край карточки, когда отсчёт переваливает за час. */
.sek-time {
  color: var(--ink); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  font-weight: 600; font-size: clamp(48px, 16vw, 216px); line-height: 1.1; letter-spacing: -1.14px;
}

/* Два ряда: главная кнопка по центру, три остальные под ней. */
.sek-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  align-items: center; margin-top: 24px; }
.sek-actions-more { margin-top: 12px; }
#sek-go { min-width: 200px; padding: 16px 32px; font-size: 19px; font-weight: 600; }

/* Поле сигнала читается одной строкой: «Сигнал каждые [30] секунд».
   Широкое поле с подписью сбоку выглядело пустым (замечание владельца
   20.09.2026), поэтому поле узкое и стоит внутри фразы. */
.sek-beep { display: flex; justify-content: center; align-items: center;
  gap: 10px; flex-wrap: wrap; margin: 24px 0 0; }
.sek-beep-text { font-size: 15px; color: var(--muted); }
.sek-beep input {
  width: 76px; padding: 8px 10px; text-align: center;
  border: 1px solid var(--cloud); border-radius: var(--r-btn);
  background: var(--white); color: var(--text);
  font: 500 16px/1.4 var(--font); font-variant-numeric: tabular-nums;
}
.sek-beep input::placeholder { color: var(--cloud); font-weight: 400; }
.sek-beep input:focus { outline: 2px solid var(--green); outline-offset: 1px;
  border-color: var(--green); }

/* Готовый интервал на подстраницах: число стоит строкой, поля нет. */
.sek-beep-fixed b {
  font-size: 20px; font-weight: 600; letter-spacing: -.2px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------ дневник проекта */

/* Лента записей: тонкая линия слева и зелёная точка у каждой. Записи
   лежат в core/dnevnik.py. */

.dn-jump {
  display: flex; align-items: baseline; gap: 8px 14px; flex-wrap: wrap;
  margin: 0 0 32px; font-size: 15px;
}
.dn-jump-label {
  font-size: 13px; font-weight: 500; letter-spacing: .65px;
  text-transform: uppercase; color: var(--green);
}
.dn-jump a { color: var(--text); }

.dn-month {
  margin: 40px 0 20px; padding-bottom: 8px; font-size: 20px;
  border-bottom: 1px solid var(--mist);
}
.dn-month:first-of-type { margin-top: 0; }

/* Лента: тонкая линия слева и точка у каждой записи. */
.dn-list {
  list-style: none; margin: 0; padding: 0 0 0 24px;
  border-left: 1px solid var(--mist);
}
.dn-item { position: relative; padding: 0 0 28px; }
.dn-item::before {
  content: ""; position: absolute; left: -29px; top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green);
}
.dn-item:last-child { padding-bottom: 8px; }

.dn-meta {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.dn-meta time { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dn-tag {
  padding: 2px 8px; border-radius: var(--r-btn); background: var(--green-wash);
  color: var(--green); font-size: 12px; font-weight: 500; letter-spacing: .4px;
  text-transform: uppercase;
}
.dn-item h3 { margin: 0 0 6px; font-size: 18px; }
.dn-item p { margin: 0 0 8px; }
.dn-link { font-size: 15px; }
.dn-link a { color: var(--green); }

@media (max-width: 720px) {
  .dn-list { padding-left: 18px; }
  .dn-item::before { left: -23px; }
}

/* Картинка «Метрики» для браузеров без JavaScript. Встроенный style
   запрещён политикой безопасности, поэтому правило здесь. */
.ym-pixel { position: absolute; left: -9999px; }

/* ------------------------------------------------------ форма связи */

.svz-form { margin-top: 24px; }
.svz-field { display: block; margin-bottom: 16px; }
.svz-field span {
  display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500;
  letter-spacing: .65px; text-transform: uppercase; color: var(--green);
}
.svz-field input, .svz-field textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--cloud);
  border-radius: var(--r-btn); background: var(--white); color: var(--text);
  font: 400 16px/1.5 var(--font); resize: vertical;
}
.svz-field input:focus, .svz-field textarea:focus {
  outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green);
}
.svz-actions { justify-content: flex-start; margin-top: 8px; }
.svz-note { margin: 16px 0 0; font-size: 14px; color: var(--muted); }
.svz-ok {
  margin: 0 0 20px; padding: 12px 14px; border-radius: var(--r-btn);
  background: var(--green-wash); color: var(--green); font-weight: 500;
}
.svz-error {
  margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--cloud);
  border-radius: var(--r-btn); background: var(--mist); color: var(--text);
}
/* Ловушка для роботов: человек её не видит и не встретит при переходе
   по Tab, а робот заполняет всё подряд. */
.svz-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Дата обновления над текстом соглашения. */
.terms-date { margin: 0 0 8px; font-size: 14px; color: var(--muted); }

/* Галочка тиканья стоит под карточкой инструмента, а не внутри неё:
   инструмент печатается общим шаблоном, а это надстройка одной страницы. */
.tik-row { margin-top: 16px; }

/* Ряд ссылок между подстраницами сигнала. */
.int-links {
  display: flex; align-items: baseline; justify-content: center; gap: 8px 14px;
  flex-wrap: wrap; margin: 0 0 24px; font-size: 15px;
}
.int-links-label {
  font-size: 13px; font-weight: 500; letter-spacing: .65px;
  text-transform: uppercase; color: var(--green);
}
.int-links a { color: var(--text); }
.int-links b { font-weight: 600; color: var(--ink); }
.int-links-own { color: var(--muted); }

p.sek-error {
  margin: 16px 0 0; padding: 10px 12px; border: 1px solid var(--cloud);
  border-radius: var(--r-btn); font-size: 15px; color: var(--text); background: var(--mist);
}

p.sek-keys { margin: 16px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
kbd {
  display: inline-block; padding: 1px 6px; border: 1px solid var(--cloud);
  border-radius: var(--r-btn); font: 500 13px/1.6 var(--font); color: var(--text);
}
.sek-keys kbd {
  display: inline-block; padding: 1px 6px; border: 1px solid var(--cloud);
  border-radius: var(--r-btn); font: 500 12px/1.6 var(--font); color: var(--text);
}

/* -------------------------------------------------------------- круги */

.sek-laps { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--mist); }
/* Общего класса .table-wrap нет, у страницы он свой. */
.sek-table-wrap { overflow-x: auto; }
.sek-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sek-table th, .sek-table td {
  padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--mist); white-space: nowrap;
}
.sek-table th { font-size: 13px; font-weight: 500; letter-spacing: .65px; text-transform: uppercase; color: var(--muted); }
.sek-num { font-size: 15px; }
/* Второго цвета в системе нет: лучший круг зелёный, худший — серой подписью. */
.sek-mark { margin-left: 8px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.sek-best { color: var(--green); }
.sek-worst { color: var(--muted); }

.sek-stats { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin-top: 16px; }
.sek-stat { padding: 16px 12px; border-radius: var(--r-card); background: var(--green-wash); text-align: center; }
.sek-stat b {
  display: block; font-size: 20px; font-weight: 600; letter-spacing: -.2px;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.sek-stat span {
  display: block; margin-top: 2px; font-size: 13px; letter-spacing: .65px;
  text-transform: uppercase; color: var(--green);
}

.sek-copy-row { display: flex; justify-content: flex-end; margin-top: 16px; }
/* Поле запасного пути копирования уводится за край, а не прячется:
   спрятанное поле нельзя выделить, и execCommand по нему не сработает. */
.sek-copy-src { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* --------------------------------------------------------- весь экран */

#sek-tool:fullscreen {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 24px; padding: 24px; background: var(--white); border: 0; border-radius: 0;
}
#sek-tool:fullscreen .sek-screen { width: 100%; }
#sek-tool:fullscreen .sek-time { font-size: clamp(64px, 18vw, 220px); }
#sek-tool:fullscreen .sek-beep,
#sek-tool:fullscreen .sek-laps,
#sek-tool:fullscreen .sek-keys { display: none; }

/* Страница «Весь экран»: верхней полосы нет, поэтому заголовку нужен
   отступ сверху. Табло на ней такое же, как на остальных страницах. */
.page-ekran .page-head { padding-top: 48px; }

/* ------------------------------------------------- двойной секундомер */

/* Две панели на одном ядре (js/dvoynoy.js). Цифры мельче одиночных:
   в колонке вдвое меньше места, а длинная запись «1:19:27.89» занимает
   5,3 ширины знака и должна помещаться целиком. */
.dv-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dv-panel { min-width: 0; text-align: center; }
.dv-pair > .dv-panel + .dv-panel { border-left: 1px solid var(--mist); padding-left: 24px; }
.dv-name {
  margin-bottom: 4px; font-size: 13px; font-weight: 500; line-height: 1.5;
  letter-spacing: .65px; text-transform: uppercase; color: var(--green);
}
.dv-time { font-size: clamp(36px, 7vw, 104px); }
.dv-actions { margin-top: 16px; }
.dv-go { min-width: 140px; padding: 12px 24px; font-size: 17px; }
.dv-laps { margin-top: 20px; padding-top: 16px; }

.dv-delta {
  margin: 24px 0 0; text-align: center; font-size: 15px; color: var(--muted);
}
.dv-delta b {
  margin-left: 6px; font-size: 20px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.2px;
}

.dv-common { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--mist); }

/* Полный экран. Фон задавать ОБЯЗАТЕЛЬНО: без него браузер красит
   развёрнутый элемент в чёрный, и в светлой теме тёмные цифры пропадают
   на чёрном (поймано владельцем 20.09.2026). */
#dv-tool:fullscreen {
  display: flex; flex-direction: column; justify-content: center;
  gap: 24px; padding: 24px; background: var(--white);
}
#dv-tool:fullscreen .dv-time { font-size: clamp(44px, 9vw, 150px); }
#dv-tool:fullscreen .dv-laps,
#dv-tool:fullscreen .sek-keys { display: none; }

/* ---------------------------------------------------- табата-таймер */

/* Фазы различаются подписью и заливкой полосы, а не вторым акцентным
   цветом: по образцу оформления зелёный на сайте один и работает как
   отметка «включено», поэтому в зелёный красится только работа. */
/* Главная кнопка таймера такого же размера, как «Старт» у секундомера:
   по ней бьют между подходами, часто не глядя. */
#tb-go { min-width: 200px; padding: 16px 32px; font-size: 19px; font-weight: 600; }

.tb-screen { text-align: center; }
.tb-phase {
  font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: .65px;
  text-transform: uppercase; color: var(--muted);
}
.tb-tool[data-phase="работа"] .tb-phase,
.tb-tool[data-phase="конец"] .tb-phase { color: var(--green); }
.tb-time { font-variant-numeric: tabular-nums; }

.tb-bar {
  display: block; height: 6px; margin: 12px auto 0; max-width: 560px;
  border-radius: 999px; background: var(--mist); overflow: hidden;
}
.tb-progress {
  display: block; height: 100%; width: 0; background: var(--cloud);
  transition: width .1s linear;
}
.tb-tool[data-phase="работа"] .tb-progress,
.tb-tool[data-phase="конец"] .tb-progress { background: var(--green); }

.tb-meta {
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
  margin-top: 12px; font-size: 15px; color: var(--muted);
}

.tb-settings {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 24px auto 0; max-width: 620px;
}
.tb-field { display: block; text-align: center; }
.tb-field span {
  display: block; margin-bottom: 4px; font-size: 13px; color: var(--muted);
}
.tb-field input {
  width: 100%; padding: 8px 10px; text-align: center;
  border: 1px solid var(--cloud); border-radius: var(--r-btn);
  background: var(--white); color: var(--text);
  font: 500 16px/1.4 var(--font); font-variant-numeric: tabular-nums;
}
.tb-field input:focus { outline: 2px solid var(--green); outline-offset: 1px;
  border-color: var(--green); }
.tb-field input:disabled { background: var(--mist); color: var(--muted); }

.tb-row {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  flex-wrap: wrap; margin-top: 16px; font-size: 15px; color: var(--muted);
}
.tb-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.tb-check input { width: 16px; height: 16px; accent-color: var(--green); }
.tb-total b {
  margin-left: 4px; color: var(--ink); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#tb-tool:fullscreen {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 20px; padding: 24px; background: var(--white);
}
#tb-tool:fullscreen .tb-screen { width: 100%; }
#tb-tool:fullscreen .tb-time { font-size: clamp(64px, 22vw, 260px); }
#tb-tool:fullscreen .tb-settings,
#tb-tool:fullscreen .tb-row,
#tb-tool:fullscreen .sek-keys { display: none; }

/* --------------------------------------------- кубик рубика: таймер */

/* Единственное на сайте место со вторым цветом: красный на удержании.
   Заведён по прямой просьбе владельца 20.09.2026 — в таймерах для кубика
   пара «красный, пока рано отпускать» / «зелёный, можно» стоит у всех,
   и спидкубер читает её не думая. За пределы этой страницы цвет
   не выходит, поэтому переменная объявлена здесь, а не в :root. */
.cb-tool { --hold-red: #cc3b30; }
.cb-scramble-row {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap;
}
.cb-scramble {
  flex: 1 1 auto; min-width: 0; text-align: center;
  font: 500 17px/1.5 var(--font); font-variant-numeric: tabular-nums;
  letter-spacing: .02em; color: var(--ink);
}
.cb-new-scramble { flex: none; padding: 8px 14px; font-size: 13px; }

.cb-time {
  margin-top: 20px; text-align: center; cursor: pointer; user-select: none;
  -webkit-user-select: none; touch-action: none;
  border-radius: var(--r-card); padding: 12px; transition: background-color .1s;
}
.cb-time:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.cb-tool[data-phase="держим"] .cb-time {
  background: rgba(204, 59, 48, .07); color: var(--hold-red);
}
.cb-tool[data-phase="готов"] .cb-time { background: var(--green-wash); color: var(--green); }

.cb-hint {
  margin: 12px 0 0; text-align: center; font-size: 14px; color: var(--muted);
  min-height: 20px;
}

.cb-empty {
  margin: 24px 0 0; text-align: center; font-size: 15px; color: var(--muted);
}

.cb-log { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--mist); }

.cb-table td { vertical-align: middle; }
.cb-time-btn {
  border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.cb-time-btn:hover { color: var(--green); }
.cb-num.cb-plus2 .cb-time-btn { color: var(--green); }
.cb-num.cb-dnf .cb-time-btn { color: var(--muted); text-decoration: line-through; }
.cb-scr {
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font-size: 13px;
}
.cb-del {
  border: 0; background: none; padding: 4px; cursor: pointer; color: var(--muted);
  font-size: 14px; line-height: 1;
}
.cb-del:hover { color: var(--text); }

.cb-stats { grid-template-columns: repeat(5, 1fr); }
.cb-stats .cb-stat b { font-size: 17px; }

/* Полный экран: остаются скрембл, табло и подсказка о готовности, журнал
   сборок убран. Фон обязателен по той же причине, что у двойного. */
#cb-tool:fullscreen {
  display: flex; flex-direction: column; justify-content: center; align-items: stretch;
  gap: 16px; padding: 24px; background: var(--white);
}
#cb-tool:fullscreen .cb-time { font-size: clamp(64px, 18vw, 220px); }
#cb-tool:fullscreen .cb-log,
#cb-tool:fullscreen .cb-empty,
#cb-tool:fullscreen .sek-keys,
#cb-tool:fullscreen .sek-actions { display: none; }

/* ------------------------------------------------- обратный отсчёт */

/* Табло и полосу берём у табаты (.tb-bar, .tb-field, .tb-row), своё здесь —
   строка с часом окончания и ряд готовых промежутков. */
.ot-screen { text-align: center; }
.ot-time { font-variant-numeric: tabular-nums; }
.ot-tool[data-phase="конец"] .ot-time { color: var(--green); }
.ot-tool[data-phase="конец"] .tb-progress { background: var(--green); }

.ot-endtime { margin: 12px 0 0; font-size: 15px; color: var(--muted); }

.ot-fields {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 24px auto 0; max-width: 420px;
}

.ot-presets {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 16px auto 0; max-width: 560px;
}
.ot-preset {
  padding: 7px 14px; border: 1px solid var(--cloud); border-radius: var(--r-btn);
  background: var(--white); color: var(--text); font: 500 14px/1.2 var(--font);
  cursor: pointer;
}
.ot-preset:hover { background: var(--mist); }

#ot-tool:fullscreen {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 20px; padding: 24px; background: var(--white);
}
#ot-tool:fullscreen .ot-screen { width: 100%; }
#ot-tool:fullscreen .ot-time { font-size: clamp(64px, 22vw, 260px); }
#ot-tool:fullscreen .ot-fields,
#ot-tool:fullscreen .ot-presets,
#ot-tool:fullscreen .tb-row,
#ot-tool:fullscreen .sek-keys { display: none; }

/* --------------------------------------------- калькулятор секундомера */

/* Табло тут нет: страница считает числа, а не время, поэтому всё поле
   отдано полям ввода и ответам. */
.kl-block + .kl-block { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--mist); }
.kl-label {
  display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500;
  letter-spacing: .65px; text-transform: uppercase; color: var(--green);
}
.kl-area {
  width: 100%; padding: 12px 14px; border: 1px solid var(--cloud);
  border-radius: var(--r-btn); background: var(--white); color: var(--text);
  font: 400 16px/1.6 var(--font); font-variant-numeric: tabular-nums; resize: vertical;
}
.kl-area:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.kl-note { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.kl-actions { margin-top: 16px; }
.kl-stats { grid-template-columns: repeat(3, 1fr); margin-top: 20px; }
.kl-stats:empty { display: none; }
.kl-skipped { margin: 12px 0 0; font-size: 14px; color: var(--muted); text-align: center; }

.kl-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: end; }
/* Список действий под общий вид полей: своя стрелка вместо системной,
   чтобы поле и выбор стояли в строку одинаково. */
.kl-select {
  width: 100%; padding: 8px 32px 8px 10px; text-align: center;
  border: 1px solid var(--cloud); border-radius: var(--r-btn);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23667085' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--text); font: 500 16px/1.4 var(--font);
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.kl-select:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.kl-convert {
  margin: 16px 0 0; text-align: center; font-size: 15px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.kl-out { margin-top: 16px; }
.kl-out:empty { display: none; }
.kl-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--mist);
}
.kl-row:last-child { border-bottom: 0; }
.kl-row span { color: var(--muted); font-size: 15px; }
.kl-row b {
  font-size: 20px; font-weight: 600; letter-spacing: -.2px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- карточки */

.cards { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); margin: 24px 0 0; }
.card {
  display: block; padding: 24px; background: var(--white); border: 1px solid var(--mist);
  border-radius: var(--r-card); text-decoration: none; color: var(--text);
}
.card:hover { border-color: var(--cloud); color: var(--text); }
.card b { display: block; font-weight: 600; color: var(--ink); }
.card span { display: block; margin-top: 4px; font-size: 15px; color: var(--muted); }
.card .go { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--green); }

/* Шапка прячет меню под бургер раньше остальной вёрстки: девять пунктов
   плюс логотип и две кнопки помещаются в строку только шире 1100px.
   Остальные мобильные правила живут в медиазапросе на 720px. */
@media (max-width: 1100px) {
  .site-header .wrap { min-height: 0; padding-top: 10px; padding-bottom: 10px; gap: 8px; }
  /* Первая строка — логотип, тема и бургер; раскрытое меню уходит
     под них целиком (order и flex-basis). */
  .burger { display: inline-flex; order: 3; margin-left: 0; }
  .fs-btn { order: 2; margin-left: auto; }
  .hd-theme { order: 2; }
  .hd-nav { display: none; order: 4; }
  .site-header.menu-open .hd-nav {
    display: flex; flex-direction: column; align-items: stretch;
    flex-basis: 100%; width: 100%; margin: 4px 0 6px; gap: 0;
  }
  .site-header.menu-open .hd-nav a {
    padding: 12px 8px; font-size: 16px; border-top: 1px solid var(--mist);
  }
}

@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .cards { grid-template-columns: 1fr; gap: 12px; }
  .hero { padding: 16px 0 92px; }
  #sek-go { min-width: 0; padding: 15px 24px; font-size: 18px; }
  .sek-stat { padding: 12px 8px; }
  .sek-stat b { font-size: 17px; }
  .sek-stat span { font-size: 12px; letter-spacing: .4px; }
  /* На телефоне главная кнопка занимает строку целиком, «Круг» и «Сброс»
     делят следующую, «На весь экран» идёт отдельной строкой: иначе длинная
     подпись ломает сетку из четырёх кнопок. */
  #sek-go, #sek-full { flex: 1 1 100%; }
  #sek-lap, #sek-reset { flex: 1 1 calc(50% - 6px); }
  .sek-actions-more { margin-top: 12px; }
  /* Двойной секундомер на телефоне: панели друг под другом, разделитель
     переезжает наверх второй. */
  .dv-pair { grid-template-columns: 1fr; gap: 20px; }
  .dv-pair > .dv-panel + .dv-panel {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--mist); padding-top: 20px;
  }
  .dv-time { font-size: clamp(40px, 13vw, 88px); }
  .dv-go { flex: 1 1 100%; }
  /* Табата на телефоне: поля настройки в две колонки. */
  .tb-settings { grid-template-columns: repeat(2, 1fr); }
  #tb-go { min-width: 0; flex: 1 1 100%; padding: 15px 24px; font-size: 18px; }
  .tb-meta { gap: 10px; font-size: 14px; }
  /* Кубик на телефоне: скрембл переносится, статы в две колонки,
     столбец со скремблом в списке прячем — там и так тесно. */
  .cb-scramble-row { flex-direction: column; }
  .cb-stats { grid-template-columns: repeat(2, 1fr); }
  .cb-scr { display: none; }
  /* Обратный отсчёт на телефоне: поля времени остаются в три колонки,
     они узкие, а готовые промежутки переносятся сами. */
  .ot-fields { gap: 8px; }
  /* Калькулятор на телефоне: статистика в две колонки, поля в столбик. */
  .kl-stats { grid-template-columns: repeat(2, 1fr); }
  .kl-fields { grid-template-columns: 1fr; }
  /* На телефоне предел свой: 14vw оставляет место длинной записи с часами. */
  .sek-time { font-size: clamp(44px, 14vw, 96px); }
}