/* Оформление мини-приложения: тёмная база, фиолетовый акцент — тот же,
 * что у сайта.
 *
 * Цвета приезжают сверху, из генерируемого блока: он собран из той же
 * `tokens.json`, из которой их берёт сайт, и правится не здесь, а в
 * дизайн-системе. Ниже него — рукописный слой: то, чего в палитре нет,
 * потому что оно про раскладку, а не про цвет (градиент главной кнопки,
 * прозрачные поверхности карточек, скругления).
 *
 * Раньше цвета брались из темы Telegram, и у клиента со светлой темой окно
 * было светлым. Здесь тема своя и всегда тёмная — так решено осознанно,
 * поэтому переменные `--tg-theme-*` больше не участвуют. Взамен из JS
 * красится и рамка вокруг окна (header, фон, нижняя полоса) — иначе над
 * тёмной страницей висела бы светлая полоса клиента.
 *
 * Про свечение: оно только на акценте — главной кнопке, бегунке, ключевых
 * числах. Если светится всё, не светится ничто, а текст с ореолом просто
 * перестаёт читаться.
 */

/* >>> BoostX tokens — згенеровано, не правити руками >>> */
/* ═══════════════════════════════════════════════════════════
   BoostX — палітра міні-аплікації, v1.1.0
   СГЕНЕРОВАНО з tokens/tokens.json — руками не правити
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg:           #08080c;
  --card:         #12121a;
  --card-2:       #23232e;
  --line:         #1e1e28;

  --text:         #f4f4f7;
  --muted:        #9aa0ae;

  /* акцент світлий: він і текст, і підкладка під темний текст */
  --accent:       #a78bfa;
  --accent-soft:  rgba(167, 139, 250, 0.13);
  --accent-line:  rgba(167, 139, 250, 0.35);
  --glow:         rgba(167, 139, 250, 0.45);

  --danger:       #f87171;
  --danger-soft:  rgba(248, 113, 113, 0.12);
  --danger-line:  rgba(248, 113, 113, 0.40);

  --radius:       14px;
}
/* <<< BoostX tokens <<< */

/* Рукописный слой: то, что палитра не описывает. Стоит после блока
   токенов — значит, при следующей выгрузке дизайн-системы он уцелеет. */
:root {
  /* Поверхности сайта прозрачные, а не сплошные: карточка на нём —
     это чуть высветленный тот же фон, и цветные пятна подложки видны
     сквозь неё. Сплошная заливка убила бы всю глубину */
  --elev:        rgba(255, 255, 255, .028);
  --elev-2:      rgba(255, 255, 255, .05);
  --line-2:      rgba(255, 255, 255, .14);

  --blue-500:    #3b82f6;
  --blue-600:    #2563eb;
  --blue-300:    #93c5fd;
  --violet-300:  #c4b5fd;
  --violet-500:  #8b5cf6;
  --violet-600:  #7c3aed;
  --magenta-500: #d946ef;
  --ok:          #22c55e;
  --warn:        #fbbf24;

  --grad: linear-gradient(135deg, #2563eb 0%, #7c3aed 55%, #d946ef 100%);
  --glow-violet: 0 8px 26px -10px rgba(124, 58, 237, .95);

  /* Текст поверх залитого акцента. Фиолетовый — тёмный цвет, и чёрные
     подписи на нём не читаются: там, где акцент стал подложкой, текст белый */
  --on-accent:   #fff;

  --r-pill:      999px;
  --ease:        cubic-bezier(.22, .8, .3, 1);
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  padding: 16px 16px calc(28px + env(safe-area-inset-bottom));
  /* Фон рисует слой .bg, а не сам body: полотно должно оставаться на
     месте, пока страница едет, — иначе сетка и пятна ползут вместе
     с текстом и превращаются в рябь */
  background: transparent;
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- Подложка --- */

/* Три слоя с сайта: сетка, цветные пятна и зерно. Дрейф пятен, который
   есть на сайте, здесь выключен намеренно: окно открывают на телефоне
   и закрывают через минуту, а две анимированные плоскости всё это время
   жгут батарею ради движения, которого никто не разглядывает. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}

/* Сетка гаснет к краям: без маски она читается как миллиметровка */
.bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(90% 60% at 50% 12%, #000 0%, transparent 78%);
          mask-image: radial-gradient(90% 60% at 50% 12%, #000 0%, transparent 78%);
}

/* Обычные радиальные градиенты, без filter: blur — мягкие сами по себе
   и куда дешевле для слабых телефонов */
.bg__blob { position: absolute; }

.bg__blob--1 {
  top: -22vh;
  left: -30vw;
  width: 110vw;
  height: 70vh;
  background: radial-gradient(closest-side, rgba(37, 99, 235, .26), transparent);
}

.bg__blob--2 {
  top: -8vh;
  right: -34vw;
  width: 100vw;
  height: 62vh;
  background: radial-gradient(closest-side, rgba(124, 58, 237, .26), transparent);
}

.bg__grain {
  position: absolute;
  inset: 0;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Собственный display элемента сильнее атрибута hidden, и полоса вкладок с
   `display: flex` оставалась на экране даже там, где её прячут: в окне,
   открытом из мастера задачи «только этот тип». */
[hidden] { display: none !important; }

h1 {
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.2px;
  margin: 0 0 6px;
}

.lead, .hint, .status, .fatal { color: var(--muted); font-size: 13px; }
.lead { margin: 0 0 18px; }
.hint { margin: 10px 0 0; }
.status { margin: 12px 2px 0; min-height: 1.5em; }
.fatal { padding: 28px 8px; text-align: center; white-space: pre-line; }
.muted { color: var(--muted); }

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

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px;
  margin-bottom: 11px;
}

/* Раздача внутри карточки цели. Линия слева, а не своя рамка: рамка в
   рамке читается как отдельная карточка, а раздача — часть цели */
.batch {
  border-left: 2px solid var(--line);
  padding-left: 11px;
  margin-top: 17px;
}

.batch .name { font-size: 14px; }

.row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.name { font-weight: 600; }

output {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
  color: var(--accent);
  text-shadow: 0 0 14px var(--glow);
}

/* --- Разделы экрана настроек --- */

.group {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}

.group h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.group-note {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.badge {
  display: inline-block;
  margin: 12px 0 4px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.badge.live { color: var(--accent); }
.badge.live::before {
  content: "●";
  margin-right: 7px;
  font-size: 10px;
  text-shadow: 0 0 10px var(--glow);
}

.field { margin-top: 18px; }
.field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.field.inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Подпись, поле и единица держатся одной строкой: «Время отдыха 12 мин.
   0 сек.», разъехавшееся на две строки, читается как две настройки */
.field.inline input[type="number"] {
  width: 3.4em;
  padding: 11px 4px;
}

.field.inline .unit { font-size: 13px; }

/* Время сводки. Собственная ширина у time-поля своя в каждом браузере,
   и без неё оно то растягивается на всю строку, то ужимается в точку */
.field.inline input[type="time"] {
  width: 7.5em;
  padding: 11px 8px;
}

.row-input {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.unit { color: var(--muted); font-size: 14px; }

/* Кнопка «?» — объяснение всплывает окошком, а не живёт под полем */
.help {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card-2);
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

/* Поля, которые включает переключатель */
.panel {
  margin-top: 12px;
  padding: 4px 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.panel .field:first-child { margin-top: 14px; }

.panel.off {
  opacity: .4;
  pointer-events: none;
}

/* --- Переключатели --- */

.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.toggle {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-2);
  cursor: pointer;
}

.toggle-text { display: block; }
.toggle .note {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.toggle input { position: absolute; opacity: 0; pointer-events: none; }

.slide {
  flex: none;
  width: 46px;
  height: 27px;
  border-radius: 999px;
  background: var(--card-2);
  position: relative;
  transition: background .15s;
}

.slide::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s;
}

.toggle input:checked + .slide {
  background: var(--accent);
  box-shadow: 0 0 18px -4px var(--glow);
}

.toggle input:checked + .slide::after { transform: translateX(19px); }

/* --- Числовые поля --- */

/* Время сюда же: у поля времени та же роль и та же рамка, а отдельный
   набор правил на одно поле разъехался бы с этим на первой же правке */
input[type="number"], input[type="time"] {
  width: 5.5em;
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 12px 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  color: var(--text);
}

.row-input input[type="number"] { width: 100%; max-width: 220px; }

/* --- Текстовое поле --- */

.field > .note {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

textarea.text {
  display: block;
  width: 100%;
  margin-top: 10px;
  font: inherit;
  line-height: 1.4;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  color: var(--text);
  resize: vertical;
  /* Иначе поле шире карточки: у textarea своя ширина в символах, и
     padding к ней прибавляется сверху */
  box-sizing: border-box;
}

textarea.text::placeholder { color: var(--muted); }

/* --- Пресеты --- */

.saved-presets .note { margin: 6px 0 0; color: var(--muted); font-size: 13px; }

.preset-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Имя и крестик — одна плашка: так видно, что удаляется именно этот */
.preset {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.preset button {
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  padding: 9px 12px;
}

.preset button[data-act="drop"] {
  border-left: 1px solid var(--line);
  color: var(--muted);
  padding: 9px 10px;
}

.preset-save {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.preset-save input {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  color: var(--text);
}

.preset-save button {
  flex: none;
  font: inherit;
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: transparent;
  color: var(--text);
}

/* --- Нажатие видно --- */

/* Кнопки в окне ничем не отвечали на палец: на телефоне это выглядит как
   «не нажалось», и человек жмёт второй раз. Отклик мгновенный и общий для
   всех кнопок разделов — цвет и рамку каждая оставляет свои */
.step-add button,
.preset button,
.preset-save button,
.emoji-row button,
.step-head button {
  transition: transform .08s ease, opacity .08s ease;
}

.step-add button:active,
.preset button:active,
.preset-save button:active,
.emoji-row button:active,
.step-head button:active {
  transform: scale(.96);
  opacity: .75;
}

/* Главное действие карточки, а не «ещё одна строчка»: пунктирная серая
   кнопка рядом с серым пояснением сливалась с текстом, и её не находили */
.step-add button.go {
  border-style: solid;
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  padding: 13px 8px;
}

/* Пока модель пишет: кнопка занята и показывает это сама, а не строкой
   статуса где-то ниже экрана */
.step-add button.busy {
  border-style: solid;
  border-color: var(--accent-line);
  color: var(--accent);
  transform: none;
  opacity: 1;
}

.step-add button.busy::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 9px;
  vertical-align: -1px;
  border: 2px solid var(--accent-line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Уважаем системную настройку: кому анимации мешают, тем достаточно цвета */
@media (prefers-reduced-motion: reduce) {
  .step-add button.busy::before { animation: none; }
  .step-add button:active,
  .preset button:active,
  .preset-save button:active,
  .emoji-row button:active,
  .step-head button:active { transform: none; }
}

/* --- Пример сценки --- */

.preview:not(:empty) {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
}

.preview-step {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.preview-step p { margin: 3px 0 0; }
.preview .note { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.preview-step .unit { margin-left: 6px; }

/* --- Сценарий сценки --- */

.script { margin-top: 12px; }

.step {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: var(--bg);
}

.step-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Номер шага и есть его цвет: по нему видно, чей это голос, не читая
   выпадающий список */
.step-num {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: #08080c;
  background: var(--muted);
}

.step-num[data-role="asker"] { background: var(--blue-300, #93c5fd); }
.step-num[data-role="helper"] { background: var(--accent); }
.step-num[data-role="crowd"] { background: var(--violet-300, #c4b5fd); }

.step-head select { flex: 1; min-width: 0; padding: 9px 30px 9px 12px; }

.step-head button {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
}

.step textarea.text { margin-top: 8px; }

.step-reply {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

.step-reply select { flex: 1; min-width: 0; padding: 9px 30px 9px 12px; font-size: 14px; }

/* Запасная реплика — под основной, и подписана: она нужна не всегда */
.step-spare {
  display: block;
  margin-top: 8px;
}

.step-spare > span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 13px;
}

/* Пауза между репликами — не поле, а напоминание: настраивается она
   в разделе «Темп», а читается здесь */
.step-gap {
  margin: 8px 0;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.emoji-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.emoji-row button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  font-size: 18px;
  line-height: 1;
}

.emoji-row button.on {
  border-color: var(--accent);
  box-shadow: 0 0 14px -4px var(--glow);
}

.step-add {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.step-add button {
  flex: 1;
  padding: 11px 8px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
}

select {
  font: inherit;
  font-weight: 700;
  padding: 12px 34px 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  color: var(--text);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 20px, calc(100% - 14px) 20px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* --- Подсказка --- */

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .6);
  z-index: 10;
}

.modal-box {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
}

.modal-box h3 { margin: 0 24px 10px 0; font-size: 19px; }
.modal-box p { margin: 0; color: var(--muted); }

.modal-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--card-2);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.modal-close {
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.status.bad { color: var(--danger); }

/* --- Выбор одного из вариантов --- */

.segment {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.segment button {
  flex: 1 1 30%;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
  color: var(--muted);
  cursor: pointer;
  transition: color .15s, background .15s;
}

.segment button.on {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-line), 0 0 18px -6px var(--glow);
}

/* --- Минуты и секунды --- */

.duration {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
}

.duration input {
  width: 4.5em;
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
  color: var(--accent);
}

/* --- Набор эмодзи --- */

.emoji {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}

.emoji button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  line-height: 1;
  padding: 14px 0 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  cursor: pointer;
}

/* Отметка под эмодзи, а не подсветка самого эмодзи: сам он должен
   выглядеть одинаково — по нему выбирают */
.emoji button i {
  width: 18px;
  height: 18px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--card-2);
}

.emoji button.on i {
  border-color: transparent;
  background: var(--accent);
  box-shadow: 0 0 14px -4px var(--glow);
  position: relative;
}

.emoji button.on i::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #08080c;
}

/* --- Ползунки --- */

.pair { display: grid; gap: 0; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 30px;
  margin: 6px 0 0;
  background: transparent;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 19px;
  height: 19px;
  margin-top: -7.5px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-soft), 0 0 16px var(--glow);
  cursor: pointer;
}

input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}

input[type="range"]::-moz-range-thumb {
  width: 19px;
  height: 19px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-soft), 0 0 16px var(--glow);
  cursor: pointer;
}

/* --- Кнопки-таблетки --- */

.presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }

.presets button {
  font: inherit;
  font-size: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

/* Второй ряд фильтров — подчинённый: он разбирает выбранный раздел, а не
   стоит с ним наравне, и на глаз это должно быть видно до чтения слов */
.presets.sub { margin-top: 8px; }

.presets.sub button {
  font-size: 13px;
  padding: 6px 13px;
  background: transparent;
}

.presets button.on {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 0 20px -8px var(--glow);
}

/* Необратимое остаётся красным: акцент — это «делай», а не «удали» */
.actions { margin-top: 22px; }

.ghost {
  width: 100%;
  font: inherit;
  padding: 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
  cursor: pointer;
}

.ghost-small {
  flex: 1;
  font: inherit;
  font-size: 13px;
  padding: 9px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--elev-2);
  color: var(--text);
  cursor: pointer;
}

/* Липкая: карточка категорий выталкивала главную кнопку за край экрана
   ровно в тот момент, когда с ней работают. Фон под ней обязателен —
   иначе сквозь неё виден проезжающий список */
.primary {
  position: sticky;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 2;
  width: 100%;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  margin-top: 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--grad);
  color: var(--on-accent);
  cursor: pointer;
  /* Первая тень — не украшение, а подложка: без неё сквозь липкую кнопку
     виден проезжающий под ней список */
  box-shadow: 0 0 0 9px var(--bg), var(--glow-violet);
}

.primary:disabled {
  background: var(--card-2);
  color: var(--muted);
  box-shadow: 0 0 0 9px var(--bg);
}

.warn {
  color: var(--danger);
  font-size: 13px;
  margin: 6px 2px 0;
  min-height: 1.5em;
}

/* --- Поля ввода --- */

/* Поля админки выглядят как поиск: тот же вид, та же ширина. Своего
   оформления они не заслуживают — это те же строки ввода */
.card textarea, .card input[type="text"], .card input[type="url"] {
  width: 100%;
  font: inherit;
  padding: 11px 13px;
  margin-top: 8px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  resize: vertical;
}

.card textarea:focus,
.card input[type="text"]:focus,
.card input[type="url"]:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

input[type="search"], .newcat input {
  width: 100%;
  font: inherit;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
}

input[type="search"] { margin-bottom: 11px; }
input::placeholder { color: var(--muted); }

input[type="search"]:focus, .newcat input:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.newcat { display: flex; gap: 8px; margin-top: 11px; }
.newcat input { flex: 1; min-width: 0; background: var(--bg); }
.newcat button { flex: none; }

/* --- Список аккаунтов --- */

.bulk { display: flex; gap: 8px; margin: 11px 0; }

/* Метка целиком кликабельна: попасть пальцем в маленький квадратик
   на телефоне почти невозможно */
.acc {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.acc:has(input:checked) {
  border-color: var(--accent-line);
  background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--card);
}

.acc input {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--accent);
}

.acc .who { flex: 1; min-width: 0; }
/* Только прямой потомок: правило для заголовка задевало <b> внутри
   показателей, и каждое число становилось отдельной строкой */
.acc .who > b { display: block; font-weight: 600; overflow-wrap: anywhere; }
/* Значок Premium у имени: мельче строки, чтобы не спорить с именем */
.acc .who .prem { font-size: .85em; }
/* Приглушён, но не выключен: такой аккаунт нельзя взять в задачу, зато
   можно отметить — чтобы удалить или разложить по категориям */
.acc.off { opacity: .62; }

/* Мёртвый прокси заметен цветом, но остаётся кликабельным: его как раз
   и отмечают, чтобы удалить */
.acc .dead { color: var(--danger); }

.sub {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.warn-text { color: var(--danger); }

.empty {
  color: var(--muted);
  font-size: 14px;
  padding: 22px 2px;
  text-align: center;
}

/* --- Статистика --- */

.run {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 15px;
  margin-bottom: 10px;
}

.run[open] { border-color: var(--accent-line); }

.run > summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.run > summary::-webkit-details-marker { display: none; }

.run .when { color: var(--muted); font-size: 13px; }

.run .total {
  font-weight: 700;
  white-space: nowrap;
  color: var(--accent);
  text-shadow: 0 0 14px var(--glow);
}

/* --- Задачи --- */

.job.open { border-color: var(--accent-line); }

/* Заголовок карточки — кнопка во всю ширину: попасть по ней пальцем
   должно быть так же легко, как по строке списка */
.job-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Полоса выполнения. Число «12 из 40» отвечает на вопрос точно, полоса —
   мгновенно: видно, задача только началась или почти закончилась */
.bar {
  height: 4px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
  margin: 10px 0 5px;
}

.bar > i {
  display: block;
  height: 100%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--glow);
  transition: width 0.4s ease;
}

/* Подпись под полосой и повтор — в одну строку. Кнопка встаёт в пустое
   место справа от счёта: карточка не становится выше, а действие видно
   не разворачивая задачу */
.job-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
}

/* «Запустить снова» — не серая кнопка управления, а предложение: тон
   акцента и мягкая подложка, чтобы её замечали, но она не спорила с
   главными кнопками экрана */
.again {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  padding: 8px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.1s ease;
}

.again:hover { box-shadow: 0 0 16px -4px var(--glow); }
.again:active { transform: translateY(1px); }

.job .sum {
  font-size: 14px;
  line-height: 1.6;
  margin: 12px 0 0;
}

/* Лог — моноширинный и с прокруткой: строки разной длины иначе прыгают,
   а сорок строк подряд выталкивают кнопки управления за край экрана */
.log {
  margin-top: 12px;
  max-height: 300px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
}

.log-line {
  display: flex;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.log-line:last-child { border-bottom: 0; }
.log-line .when { white-space: nowrap; }
.log-line.bad { color: var(--danger); }

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  margin-top: 14px;
  table-layout: fixed;
}

th, td {
  text-align: left;
  padding: 9px 8px 9px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

tr:last-child td { border-bottom: 0; }
th { color: var(--muted); font-weight: 600; }

/* Имя аккаунта и канал переносим, а не расширяем таблицу: горизонтальная
   прокрутка уносила бы причину за край экрана */
td:first-child { overflow-wrap: anywhere; }

th.num, td.num {
  text-align: right;
  white-space: nowrap;
  width: 5.5em;
  font-variant-numeric: tabular-nums;
}

.up { color: var(--accent); font-weight: 600; }
.down { color: var(--danger); font-weight: 600; }

td a { color: var(--accent); text-decoration: none; }

/* Ссылки внутри карточек — акцентом, а не браузерным синим: на тёмном
   фоне чужой синий с подчёркиванием выглядит как чужеродная вставка */
.card .hint a { color: var(--accent); text-decoration: none; }
.card .hint a:hover { text-decoration: underline; }

.danger-small {
  border-color: var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
}

/* Показатели работы аккаунта — своей строкой, моноширинными цифрами:
   так столбики читаются даже без выравнивания в таблицу */
.deeds {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.deeds b { color: var(--text); font-weight: 600; }

/* Ссылка на профиль — отдельная зона нажатия, не задевающая флажок */
.acc .open {
  flex: none;
  padding: 6px 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--accent);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

/* Без юзернейма — та же кнопка, но приглушённая: место не пустует,
   и по нажатию видно, почему профиль не открыть */
.acc .open.off {
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  opacity: .55;
}

/* Переключатель: метка целиком нажимается, флажок справа */
.switch { cursor: pointer; align-items: center; }

.switch input {
  width: 22px;
  height: 22px;
  flex: none;
  accent-color: var(--accent);
}

/* Кнопки типов задач стоят плотнее обычных таблеток: их много */
#task-types { margin: 0 0 14px; }
#task-types button { font-size: 13px; padding: 7px 13px; }

/* Запасной путь для копирования: буфер обмена доступен не во всех
   обёртках, и без этого поля человек остался бы вообще без списка */
.copy-out {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  padding: 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Название чата — ссылка: тап по ней открывает чат, а не ставит галочку.
   Без этого браузер красит её своим синим с подчёркиванием, и строка
   выглядит вставленной из другого приложения */
.acc .who a {
  color: var(--accent);
  text-decoration: none;
}


/* --- Главный экран --- */

/* Разделов девять, и полосой вкладок они больше не помещаются: на 375 px
   шесть уже переносились в три ряда и съедали пол-экрана. Теперь окно
   открывается либо здесь, либо сразу на нужном разделе — из той кнопки
   бота, за которой человек и пришёл. */

.hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 14px;
}

.hdr .mark { flex: none; border-radius: 9px; }

.brand {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* Фиолетовым — только вторая половина знака: так он читается как имя,
   а не как два одинаково громких слова */
.brand span {
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.chip {
  flex: none;
  font: inherit;
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--elev);
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
}

.chip.ok { color: var(--ok); border-color: rgba(34, 197, 94, .35); }
.chip.bad { color: var(--danger); border-color: var(--danger-line); }

.menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Разделов нечётное число, и последний остаётся один в ряду: половина
   строки пустует, а карточка выглядит недоделанной. Растягиваем — так же,
   как широкая карточка на сайте */
.menu .mcard:last-child:nth-child(odd) { grid-column: 1 / -1; }

.mcard {
  display: block;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--elev);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease),
              transform .12s var(--ease);
}

.mcard:active {
  transform: scale(.98);
  border-color: var(--accent-line);
  background: var(--elev-2);
}

.ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: linear-gradient(150deg,
    rgba(59, 130, 246, .18), rgba(124, 58, 237, .16));
  font-size: 19px;
  line-height: 1;
  /* Обводка значка идёт цветом текста — одна иконка годится и здесь,
     и в строках «Управления» */
  color: var(--violet-300);
}

.mcard b { display: block; font-weight: 600; }

/* Запасная кнопка «назад». Обычно её нет: возврат берёт на себя сам
   Telegram своей стрелкой в шапке. Но метод BackButton появился не в
   первой версии Bot API, и на клиенте постарше человек остался бы
   в разделе без выхода — вот тогда кнопка и показывается. */
.backbar {
  margin: 0 0 14px;
  padding: 8px 15px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--elev-2);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

/* --- Главная кнопка карточки --- */

/* Форма пришла из дизайн-системы (BoostX CTA Button, вариант «поверхность
   со свечением»), цвета — наши: вторую палитру в окно не тащим, иначе одна
   кнопка будет из другого продукта.
   
   Что она чинит: раньше здесь была `.ghost-small` со ссылкой внутри, то
   есть подчёркнутый синий текст, прижатый влево в пустой капсуле, — это
   читается как сломанный <a>, а не как действие. Теперь поверхность
   заполнена, акцент живёт в иконке и кромке, а стрелка справа говорит,
   что нажатие уводит из окна. */
.cta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  margin-top: 14px;
  padding: 0 16px;
  border: 1px solid var(--accent-line);
  border-radius: 14px;
  background: var(--card-2);
  /* Тонкое кольцо акцента поверх обычной тени: приподнимает кнопку,
     не заливая её цветом */
  box-shadow: 0 0 0 1px rgba(139, 92, 246, .10), 0 6px 18px rgba(0, 0, 0, .55);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              transform .12s var(--ease);
}

.cta:active {
  transform: scale(.985);
  background: var(--accent-soft);
  border-color: var(--accent);
}

.cta svg { display: block; flex: none; }
.cta .plane { color: var(--accent); }

/* Стрелка «уходим отсюда» — справа и приглушённая: это не второе действие,
   а пометка о том, куда ведёт первое */
.cta .out { margin-left: auto; color: var(--muted); }

/* Флаг страны: отступ задаём полем, а не пробелом в тексте — рядом
   с эмодзи обычный пробел почти не виден */
.fl { margin-right: 6px; }

/* --- Категории --- */

/* Строка категории — та же карточка списка, что у аккаунтов: имя, сколько
   внутри и два действия. Отмечают их только ради объединения, поэтому
   флажок стоит слева, как везде в окне */
.cat .who b { display: block; font-weight: 600; overflow-wrap: anywhere; }

.cat .acts { display: flex; flex: none; gap: 6px; }

/* Правка имени прямо в строке: поле занимает место названия, а не
   выталкивает кнопки за край */
.cat input.edit {
  width: 100%;
  font: inherit;
  font-weight: 600;
  padding: 8px 10px;
  border: 1px solid var(--accent-line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
}

.cat .acts button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card-2);
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

/* --- Здоровье --- */

/* Разрез — таблица под своим заголовком. Заголовок обязателен: пять
   таблиц подряд без подписей читаются как одна длинная и бессмысленная */
.cut { margin-top: 22px; }

.cut h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.cut .hint { margin: 5px 0 0; }

/* Доля сгоревших — единственное место, где цвет говорит сам: строка
   «12 из 20» и строка «1 из 20» иначе выглядят одинаково */
.rate.hot { color: var(--danger); font-weight: 600; }
.rate.warm { color: var(--warn); font-weight: 600; }


/* --- Заставка --- */

/* Приезжает из дизайн-системы готовым куском (BoostX animated splash
   screen): фирменный знак, кольца, полоса прогресса. Правится не здесь,
   а там, поэтому вставлено как есть — переменные у него свои, с приставкой
   --bx-, и с нашими они не сталкиваются.

   Показывается только в клиентском окне: админку открывает один человек
   по десять раз в день, и заставка там — не бренд, а задержка. */

:root{
  --bx-bg:#08080c; --bx-text:#f4f4f7; --bx-muted:#9aa0ae; --bx-dim:#6b7280;
  --bx-blue:#3b82f6; --bx-blue-600:#2563eb; --bx-violet:#7c3aed; --bx-violet-400:#a78bfa; --bx-magenta:#d946ef;
  --bx-ease:cubic-bezier(.22,.8,.3,1);
  --bx-loop:3.6s;
}
#bx-splash{position:fixed;inset:0;z-index:9999;overflow:hidden;background:var(--bx-bg);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--bx-text);
  isolation:isolate;transition:opacity .42s var(--bx-ease);
  /* Поток вместо процентов: блоки расталкивают друг друга сами, и на
     любой высоте экрана наложиться им уже нечем */
  /* Метка с подписью — по центру потоком, загрузчик с тегом остаются
     внизу. Наложиться им нечем: контейнер держит под низ отступ, и
     центральная часть в него просто не заходит. Прежняя раскладка
     считала проценты от высоты и на живом экране сошлась друг на друге */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 0 calc(150px + env(safe-area-inset-bottom));
  gap:clamp(12px,3vh,28px)}
#bx-splash[hidden]{display:none}
#bx-splash.bx-out{opacity:0;pointer-events:none}
.bx-bloom{position:absolute;border-radius:999px;filter:blur(26px);will-change:transform}
.bx-bloom.b1{width:114vw;height:114vw;left:-32vw;top:-18vw;background:radial-gradient(closest-side,rgba(37,99,235,.34),transparent 70%);animation:bxDriftA 17s var(--bx-ease) infinite}
.bx-bloom.b2{width:106vw;height:106vw;right:-36vw;top:17vh;background:radial-gradient(closest-side,rgba(124,58,237,.36),transparent 70%);animation:bxDriftB 21s var(--bx-ease) infinite}
.bx-bloom.b3{width:78vw;height:78vw;right:-22vw;bottom:-9vh;background:radial-gradient(closest-side,rgba(217,70,239,.2),transparent 70%);animation:bxDriftA 25s var(--bx-ease) infinite}
.bx-bloom.b4{width:72vw;height:72vw;left:-25vw;bottom:6vh;background:radial-gradient(closest-side,rgba(59,130,246,.16),transparent 70%);animation:bxDriftB 19s var(--bx-ease) infinite}
.bx-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:76px 76px;
  -webkit-mask:radial-gradient(closest-side at 50% 38%,#000,transparent 78%);mask:radial-gradient(closest-side at 50% 38%,#000,transparent 78%)}
.bx-vignette{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 40%,transparent 30%,rgba(8,8,12,.55) 75%,rgba(8,8,12,.9) 100%)}
.bx-mark{position:relative;width:min(58vw,42vh,420px);aspect-ratio:1;display:grid;place-items:center;
  flex:none;animation:bxEnterFlow .8s var(--bx-ease) both}
.bx-halo{position:absolute;width:102%;aspect-ratio:1;border-radius:999px;background:radial-gradient(closest-side,rgba(124,58,237,.55),transparent 72%);filter:blur(10px);animation:bxHalo 4.4s var(--bx-ease) infinite}
.bx-ring{position:absolute;border-radius:999px}
.bx-ring.r1{width:84%;aspect-ratio:1;background:conic-gradient(from 0deg,rgba(37,99,235,0) 0deg,rgba(37,99,235,0) 150deg,rgba(37,99,235,.9) 240deg,var(--bx-violet) 300deg,var(--bx-magenta) 344deg,rgba(217,70,239,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  filter:drop-shadow(0 0 12px rgba(124,58,237,.85));animation:bxSpin 3.4s linear infinite}
.bx-ring.r2{width:89%;aspect-ratio:1;background:conic-gradient(from 0deg,rgba(148,163,255,0) 0deg,rgba(148,163,255,0) 250deg,rgba(59,130,246,.55) 320deg,rgba(167,139,250,.75) 355deg,rgba(167,139,250,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.5px));
  opacity:.75;animation:bxSpinRev 7.2s linear infinite}
.bx-ring.r3{width:95%;aspect-ratio:1;border:1px solid rgba(255,255,255,.05)}
.bx-badge{position:relative;width:76%;aspect-ratio:1;border-radius:999px;
  box-shadow:0 12px 32px -8px rgba(124,58,237,.95),0 30px 70px -30px rgba(0,0,0,.9);
  animation:bxBreathe 5.2s var(--bx-ease) infinite}
.bx-copy{position:relative;padding:0 32px;flex:none;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.bx-title{font-size:clamp(24px,4.7vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.15;text-wrap:pretty;animation:bxRise .5s var(--bx-ease) .34s both}
.bx-sub{font-size:clamp(14px,2.4vw,17px);line-height:1.5;color:var(--bx-muted);text-wrap:pretty;animation:bxRise .5s var(--bx-ease) .41s both}
.bx-loader{position:absolute;left:0;right:0;bottom:calc(80px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:18px;animation:bxFade .6s var(--bx-ease) .58s both}
.bx-track{position:relative;width:min(240px,62vw);height:4px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.bx-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:linear-gradient(90deg,var(--bx-blue-600),var(--bx-violet) 55%,var(--bx-magenta));box-shadow:0 0 16px rgba(124,58,237,.9)}
.bx-sweep{position:absolute;top:0;bottom:0;width:64px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:bxSweep 1.9s var(--bx-ease) infinite}
.bx-status{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bx-dim)}
.bx-dot{width:5px;height:5px;border-radius:999px;background:var(--bx-violet-400);box-shadow:0 0 8px rgba(167,139,250,.9);animation:bxSpark 1.4s var(--bx-ease) infinite}
.bx-pct{color:var(--bx-muted);font-variant-numeric:tabular-nums}
.bx-tag{position:absolute;left:0;right:0;bottom:calc(40px + env(safe-area-inset-bottom));text-align:center;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#3b3d4a;animation:bxFade .6s var(--bx-ease) .7s both}
@keyframes bxSpin{to{transform:rotate(360deg)}}
@keyframes bxSpinRev{to{transform:rotate(-360deg)}}
@keyframes bxBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}
@keyframes bxHalo{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.06)}}
@keyframes bxDriftA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(38px,-26px,0) scale(1.08)}}
@keyframes bxDriftB{0%,100%{transform:translate3d(0,0,0) scale(1.04)}50%{transform:translate3d(-32px,30px,0) scale(1)}}
@keyframes bxRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes bxEnterFlow{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes bxFade{from{opacity:0}to{opacity:1}}
@keyframes bxSweep{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@keyframes bxSpark{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){#bx-splash *{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* --- Главный экран: «Сейчас», группы и строки ---------------------------

   Разделов десять, и плоским списком карточек они читались как склад:
   всё одного размера, и непонятно, с чего начинать. Теперь сверху один
   блок про «что происходит прямо сейчас» с главной кнопкой, ниже —
   группы по смыслу.

   Цвета — из токенов выше, а не своими числами: макет собран из той же
   системы, и вторая палитра разошлась бы с ней на первой же выемке. */

.hdr .brand em {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 500;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--muted);
}

.hdr .brand { line-height: 1.15; }

.now {
  display: block;
  padding: 14px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(26, 25, 44, .92), rgba(14, 14, 21, .94));
  border: 1px solid var(--line-2);
}

.now .head { display: flex; align-items: center; gap: 8px; }

.now .head b {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.now .head span {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted);
}

.now .dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: #64748b;
}
/* Работающая задача — это единственное состояние, ради которого сюда
   заглядывают на ходу, поэтому точка живая */
.now .dot.live { background: var(--ok); animation: bxPulse 1.8s infinite; }

@keyframes bxPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.8); }
}

.now h2 {
  margin: 7px 0 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.025em;
}

.now .nums { display: flex; margin-top: 13px; }

.now .nums span {
  flex: 1;
  padding-left: 14px;
  border-left: 1px solid var(--line-2);
}
.now .nums span:first-child { padding: 0 12px 0 0; border-left: 0; }

.now .nums b {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.now .nums i { display: block; margin-top: 3px; font-size: 12px; font-style: normal; color: var(--muted); }
.now .nums b.bad { color: var(--danger); }


.group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 6px 10px;
}
.group-title span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .75;
}
.group-title i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }

.rows {
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
}

.rows button {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 14px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font: 600 15.5px/1.2 inherit;
  letter-spacing: -.01em;
  text-align: left;
  cursor: pointer;
}
.rows button:first-child { border-top: 0; }
.rows button:active { background: var(--elev-2); }
.rows b { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows i { flex: none; font-size: 13px; font-style: normal; color: var(--muted); }
.rows i.bad { color: var(--danger); }

#home-status:empty { display: none; }

.foot {
  padding: 16px 0 4px;
  text-align: center;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--muted);
  opacity: .55;
}

/* Экран «нужна подписка»: не ошибка, а ответ, поэтому обычная карточка
   по центру, а не красная плашка */
.card.locked { margin-top: 22vh; text-align: center; }
.card.locked h1 { margin: 0 0 10px; }
.card.locked .primary { margin-top: 18px; }