/*
 * Кабинет ForEasy — стили всех страниц.
 * Источник — утверждённый макет docs/05-frontend/dashboard-redesign/ (v2.css + app.css + стили страниц).
 * Цвета — только токенами ниже (светлая и тёмная темы); тема ставится в theme.js до отрисовки.
 */

/*
 * Основа кабинета: сброс, шапка, меню аккаунта, нижние вкладки, кнопки.
 * Правила: светлая основа, один акцент, красный — только для ошибок, требующих действия;
 * движение рынка не красим; цифры табличные.
 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.5 var(--font, system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
img, svg { display: block; }
h1, h2, h3, p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; border-radius: 6px; }
.i { width: 20px; height: 20px; flex: none; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Колонка контента не растягивается длинным содержимым (иначе горизонтальный скролл на мобильном). */
main:not(.app) { grid-template-columns: minmax(0, 1fr); }

/* --- Шапка: логотип, 2–3 пункта, аккаунт ------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar__in { max-width: var(--page, 1040px); margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 32px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; text-decoration: none; }
.logo__mark { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: 15px; }
.nav { display: flex; gap: 4px; }
.nav a { padding: 8px 14px; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 500; }
.nav a:hover { color: var(--text); background: var(--hover); }
.nav a[aria-current="page"] { color: var(--text); background: var(--chip); }
.topbar__end { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* Меню аккаунта: биржи, тариф, Telegram, настройки, выход — всё, что настраивают редко. */
.account { position: relative; }
.account > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 4px; border-radius: 999px; }
.account > summary::-webkit-details-marker { display: none; }
.account > summary:hover { background: var(--hover); }
.avatar { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; font-weight: 600; }
.avatar[data-alert]::after { content: ""; position: absolute; right: -1px; top: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--err-ink); border: 2px solid var(--bg); }
.account__panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 300px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow, 0 12px 40px rgb(0 0 0 / 0.12));
}
.account__who { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.account__who b { display: block; }
.account__panel a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; }
.account__panel a:hover { background: var(--hover); }
.account__panel a span:last-child { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; }
.account__panel a span.bad:last-child { color: var(--err-ink); font-weight: 600; }
.account__panel hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }

/* --- Нижние вкладки на мобильном, как в Mini App --------------------------------------- */
.tabbar { display: none; }
@media (max-width: 760px) {
  .nav, .account__name { display: none; }
  .topbar__in { height: 56px; padding: 0 16px; }
  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  .tabbar a { display: grid; justify-items: center; gap: 2px; padding: 6px 0; font-size: 11.5px; font-weight: 500; color: var(--muted); text-decoration: none; border-radius: 10px; }
  .tabbar a[aria-current="page"] { color: var(--accent-text); }
  .tabbar .i { width: 22px; height: 22px; }
  body { padding-bottom: 76px; }
}

/* --- Сообщения: ошибка (действие нужно), предупреждение (скоро понадобится), справка ----- */
.notice { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius, 16px); border: 1px solid transparent; }
.notice .i { margin-top: 2px; }
.notice__body { flex: 1; min-width: 0; }
.notice__body b { display: block; margin-bottom: 2px; }
.notice__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.notice--err { background: var(--err-bg); border-color: var(--err-line); }
.notice--err > .i { color: var(--err-ink); }
.notice--warn { background: var(--warn-bg); border-color: var(--warn-line); }
.notice--warn > .i { color: var(--warn-ink); }
.notice--info { background: var(--info-bg, var(--chip)); border-color: var(--line); }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--hover); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover, var(--accent)); }
.btn--quiet { border-color: transparent; background: transparent; color: var(--accent-text); padding-inline: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/*
 * Токены обеих тем и компоненты кабинета — общие для всех страниц макета.
 * Базовая разметка (сброс, шапка, меню аккаунта, нижние вкладки, кнопки) — в v2.css.
 */
/*
 * E+ v9 — после независимого ревью и четырёх проверок понятности (два новичка, профи, UX-эксперт).
 * Главное на экране — деньги: вложено → стоимость → результат, одним весом и без цвета.
 * Блок «По монетам» (как в v7) — выбранная монета теми же словами, что шапка: вложено → стоит →
 * результат, количество и средняя цена за 1 монету; «Все монеты» — таблица с итогом, равным шапке.
 * «Планы» — только расписание. Без шкалы, справки и прогнозов.
 * Компоновка — две независимые колонки (без пустот), на телефоне одна колонка по важности.
 * Две темы: светлая «бумага» и тёмный тёплый графит. Цвета — только токенами ниже.
 */
:root {
  color-scheme: light;
  --font: 'Golos Text', system-ui, sans-serif;
  --page: 1100px;
  --bg: #F6F6F1; --surface: #FFFFFF; --text: #16181D; --muted: #5C606C;
  --line: #E3E3DA; --chip: #ECECE5; --hover: #F0F0E9;
  --accent: #4B57D1; --accent-hover: #3F4ABF; --accent-text: #4350C8; --on-accent: #FFFFFF;
  --err-bg: #FDEEEC; --err-line: #F2C9C3; --err-ink: #B42318;
  --warn-bg: #FFF5E0; --warn-line: #F0DCA6; --warn-ink: #8A5800;
  --info-bg: #EEF0FC;
  --d0: #E4E4DB; --d1: #B9C0F4; --d2: #6B77E0; --skip: #D08A00;
  --ok: #2E9E6A; --ok-bg: #E3F4EB; --paused: #9A9EA8;
  --on-text: #FFFFFF;                 /* текст на заливке цветом текста (выбранная монета) */
  --tint-err: color-mix(in srgb, var(--err-ink) 8%, var(--surface));
  --tint-warn: color-mix(in srgb, var(--warn-ink) 10%, var(--surface));
  --shadow: 0 12px 40px rgb(0 0 0 / 0.12);
  --radius: 18px;
}
/* Тёмная тема — тёплый графит, а не сине-чёрный «биржевой» фон: та же спокойная бумага, только ночью.
   Карточки светлее фона (в темноте глубину дают оттенки, а не тени), текст не чисто белый — без
   ореолов; акцент и «опасные» цвета светлее, чтобы держать контраст. Контраст (WCAG): текст 14,6:1,
   второстепенный 6,2:1, ссылки 8:1, текст на кнопке 4,8:1, полоса запаса и фокус ≥ 3:1. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121311; --surface: #1B1C1A; --text: #EDEDE7; --muted: #9A9C92;
  --line: #30312D; --chip: #2A2B28; --hover: #232421;
  --accent: #5A65E2; --accent-hover: #6873EA; --accent-text: #A4ACFF; --on-accent: #FFFFFF; --focus: #A4ACFF;
  --err-ink: #FF8A7C; --warn-ink: #E8B24E;
  --err-bg: color-mix(in srgb, #FF8A7C 14%, #1B1C1A);
  --warn-bg: color-mix(in srgb, #E8B24E 15%, #1B1C1A);
  --info-bg: color-mix(in srgb, #5A65E2 24%, #1B1C1A);
  --d0: #2E2F2B; --skip: #E3A13A;
  --ok: #52C28E; --ok-bg: color-mix(in srgb, #52C28E 16%, #1B1C1A); --paused: #7C7E77;
  --on-text: #121311;
  --tint-err: color-mix(in srgb, var(--err-ink) 16%, var(--surface));
  --tint-warn: color-mix(in srgb, var(--warn-ink) 15%, var(--surface));
  --shadow: 0 16px 48px rgb(0 0 0 / 0.55);
}
/* Значки монет пастельные: в темноте чуть приглушаем, чтобы не светились пятнами;
   монеты на паузе — серые (полупрозрачная пастель на тёмном выглядит грязной) */
:root[data-theme="dark"] .coin:not(.coin--more) { filter: brightness(0.9) saturate(0.92); }
:root[data-theme="dark"] .prow[data-paused] .coin { opacity: 0.55; filter: grayscale(1) brightness(0.75); }
/* Светлый текст на тёмном кажется жирнее — крупные цифры и заголовок на ступень легче */
:root[data-theme="dark"] .money > div > b, :root[data-theme="dark"] .start h1 { font-weight: 700; }
/* Выбранная монета: не яркая белая плашка (самое светлое пятно экрана), а приподнятая серая, как в iOS */
:root[data-theme="dark"] .seg button[aria-pressed="true"] { background: #43443F; border-color: #43443F; color: #FFFFFF; }
/* Меню поверх страницы — на ступень светлее карточек: в темноте глубину дают оттенки, а не тени */
:root[data-theme="dark"] .account__panel { background: #232421; border-color: #363732; }
:root[data-theme="dark"] .account__panel a:hover { background: #2E2F2B; }
main { max-width: var(--page); margin: 0 auto; padding: 32px 24px 140px; display: grid; gap: 24px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
h2 { font-size: 17px; font-weight: 700; }
.card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.card__head a { color: var(--accent-text); font-weight: 600; text-decoration: none; font-size: 14.5px; }
.card__head a:hover { text-decoration: underline; }
.card__head > div { min-width: 0; }
.sub { color: var(--muted); font-size: 14px; margin-top: 2px; }

/* Две независимые колонки: пустых «хвостов» под короткими блоками нет. */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
/* minmax(0, 1fr): длинная лента монет в блоке цены прокручивается, а не распирает колонку */
.col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; }
.col > * { min-width: 0; }
/* Порядок блоков (order) — только для телефона; на компьютере колонки идут в порядке разметки и не прыгают */
@media (min-width: 761px) { .col > * { order: 0 !important; } }

/* Скрытые суммы: на месте числа — плашка той же ширины. */
body[data-hide] .sens { color: transparent !important; background: var(--chip); border-radius: 6px; user-select: none; }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn[aria-pressed="true"] { color: var(--accent-text); background: var(--info-bg); }
.topbar__end { gap: 4px; }
.topbar__end .account { margin-left: 8px; }

/* Шапка: вложено → стоимость → результат, одним весом; дни — мелкой строкой */
.hero__since { color: var(--muted); font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.hero__since b { color: var(--text); font-weight: 600; }
.money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px; margin-top: 12px; }
.money > div > span { display: block; font-size: 14px; color: var(--muted); }
.money > div > b { display: block; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; margin-top: 2px; white-space: nowrap; }
.money > div > small { display: block; font-size: 14.5px; color: var(--muted); margin-top: 2px; }
.nowrap { white-space: nowrap; }
.how { margin-top: 8px; font-size: 14.5px; }
.how summary { cursor: pointer; color: var(--accent-text); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.how summary::-webkit-details-marker { display: none; }
.how summary .i { width: 16px; height: 16px; transition: transform .15s; }
.how[open] summary .i { transform: rotate(180deg); }
.how dl { margin: 10px 0 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 6px; }
.how dt { font-weight: 700; }
.how dd { margin: 0 0 6px; color: var(--muted); }
.risk { color: var(--muted); font-size: 13.5px; }
.how .risk { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 2px; }

/* Следующая покупка + дальше по плану + «остановить все» */
.next__label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.next__when { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; margin-top: 4px; }
.next__what { color: var(--muted); margin-top: 2px; }
.next__state { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; flex-wrap: wrap; }
.next__state span:last-child { color: var(--muted); }
.next__sub { font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.next__foot { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.dot--err { background: var(--err-ink); }
.dot--warn { background: var(--skip); }
.dot--paused { background: var(--paused); }

/* «По монетам» (v7 + правки профи): выбранная монета крупно, как шапка (вложено → стоит → результат),
   строка средней цены; «Все монеты» разворачивает таблицу всех монет с итогом, который сходится с шапкой. */
.avg .card__head { align-items: center; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px 6px 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--text); }
.seg button:hover { border-color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--on-text); }
/* Больше 4 монет — не список, а стопка значков: только показать, какие монеты покупаются.
   Выбирать монету — кликом по строке в «Все монеты» (второй список был бы дублем таблицы). */
.avg__stack { display: inline-flex; }
.avg__coin { margin-top: 12px; font-size: 15px; color: var(--muted); }
.avg__coin b { color: var(--text); font-weight: 700; }
/* Подгрид: подписи, цифры и процент трёх колонок в общих строках — цифры на одной линии */
.avg .money { margin-top: 8px; grid-template-rows: auto auto auto; row-gap: 0; }
.avg .money > div { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.avg .money > div > span { align-self: end; }
.avg .money > div > b { font-size: 26px; font-weight: 700; letter-spacing: -0.015em; }
.avg__price { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 2px 16px; }
.avg__price b { color: var(--text); font-weight: 600; }
.avg__all { margin-top: 12px; border-top: 1px solid var(--line); }
.avg__toggle { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 10px 0 2px; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--accent-text); cursor: pointer; }
.avg__toggle .i { width: 16px; height: 16px; transition: transform .15s; }
.avg__toggle[aria-expanded="true"] .i { transform: rotate(180deg); }
/* Таблица всех монет: по убыванию стоимости, внизу «Всего» = цифры шапки */
.ctable-wrap { overflow-x: auto; margin-top: 8px; }
.ctable { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.ctable th { font-size: 13px; font-weight: 500; color: var(--muted); text-align: right; padding: 4px 0 8px 14px; white-space: nowrap; }
.ctable td { text-align: right; padding: 9px 0 9px 14px; border-top: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
.ctable th:first-child, .ctable td:first-child { text-align: left; padding-left: 0; }
.ctable td small { display: block; color: var(--muted); font-size: 13px; }
.ctable tbody tr[aria-current] td { background: var(--hover); }
.ctable tbody tr[aria-current] td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.ctable tfoot td { border-top: 2px solid var(--line); font-weight: 700; }
.ccoin { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0 0 0 8px; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ccoin b { font-weight: 700; }
.ccoin small { display: block; color: var(--muted); font-size: 13px; font-weight: 400; }
.ccoin:hover b { text-decoration: underline; }
.ctable tfoot td:first-child { padding-left: 8px; }

/* Сообщения — как InlineNotice в приложении: тонированная полоса без рамки, заголовок и одна короткая
   фраза, одно текстовое действие справа. Сверху страницы — только то, что остановило покупки
   и требует действия; подробности — на странице действия. Рынок — тихой строкой у результата. */
.notice { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 12px 16px; border: 0; border-radius: 14px; font-size: 15px; line-height: 1.35; }
.notice > .i { width: 20px; height: 20px; align-self: start; margin-top: 1px; }
.notice__body { min-width: 0; }
.notice__body b { display: block; margin: 0; font-weight: 700; }
.notice__body p { margin-top: 2px; font-size: 14.5px; }
.notice__act { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; white-space: nowrap; text-decoration: none; }
.notice__act:hover { text-decoration: underline; }
.notice--err { background: var(--tint-err); }
.notice--err > .i, .notice--err .notice__act { color: var(--err-ink); }
.notice--warn { background: var(--tint-warn); }
.notice--warn > .i, .notice--warn .notice__act { color: var(--warn-ink); }
.hero__market { margin-top: 10px; font-size: 14.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.hero__market .i { width: 16px; height: 16px; }

/* Монеты */
.coin { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #16181D; flex: none; }
.coin--sm { width: 28px; height: 28px; font-size: 13px; }
.coin--xs { width: 20px; height: 20px; font-size: 10.5px; }
.stack { display: inline-flex; flex: none; vertical-align: middle; }
.stack .coin { box-shadow: 0 0 0 2px var(--surface); }
.stack .coin + .coin { margin-left: -8px; }
.coin--more { background: var(--chip); color: var(--muted); font-size: 11px; font-weight: 700; }

/* Планы: одна строка на план, «Показать все» с 6-го, «+ Добавить монету» в конце */
.plans { list-style: none; padding: 0; margin: 10px 0 0; }
.prow { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.prow:first-child { border-top: 0; }
.prow__main { display: grid; gap: 1px; min-width: 0; }
.prow__name { font-weight: 700; text-decoration: none; }
.prow__name:hover { text-decoration: underline; }
.prow__main .muted { font-size: 14px; }
.prow__note { font-size: 13.5px; }
.prow__note--warn { color: var(--warn-ink); }
.prow__note--paused, .prow__note--info { color: var(--muted); }
.prow[data-paused] .coin { opacity: .45; }
.plans__foot { display: grid; gap: 8px; margin-top: 4px; }
.more-btn { justify-self: start; border: 0; background: none; padding: 6px 0; color: var(--accent-text); font-weight: 600; cursor: pointer; }
.more-btn:hover { text-decoration: underline; }
.add-row { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px dashed var(--line); border-radius: 14px; padding: 12px; color: var(--accent-text); font-weight: 600; text-decoration: none; }
.add-row:hover { border-color: var(--accent); background: var(--info-bg); }
.add-row .i { width: 18px; height: 18px; }
.stop-btn { border: 0; background: none; padding: 6px 0; color: var(--muted); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.stop-btn:hover { color: var(--text); }
.stop-btn .i { width: 18px; height: 18px; }
.confirm { margin-top: 6px; padding: 12px 14px; border-radius: 14px; background: var(--hover); display: grid; gap: 10px; font-size: 14px; }
.confirm div { display: flex; gap: 8px; flex-wrap: wrap; }
.confirm .btn { padding: 8px 14px; }

/* Биржи */
.ex { padding: 12px 0; border-top: 1px solid var(--line); }
.ex:first-of-type { border-top: 0; padding-top: 8px; }
.ex__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ex__balance { font-size: 26px; font-weight: 700; margin-top: 4px; }
.ex__row .ex__balance { font-size: 18px; margin: 0; }
.runway { height: 8px; border-radius: 99px; background: var(--d0); margin: 10px 0 8px; overflow: hidden; }
.runway i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.runway--low i { background: var(--skip); }
.ex__warn { color: var(--warn-ink); }
.ex__off { color: var(--muted); margin-top: 4px; }
.ex__off b { color: var(--text); }
.ex__more { margin-top: 4px; }

/* Списки покупок: значок слева, две строки текста */
.events { list-style: none; margin: 8px 0 0; padding: 0; }
.events li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.events li:first-child { border-top: 0; }
.events .what { min-width: 0; }
.events .what small { display: block; color: var(--muted); font-size: 13px; }
.events .soon { color: var(--muted); }
.ev-icon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--chip); color: var(--muted); }
.ev-warn .ev-icon { background: var(--warn-bg); color: var(--warn-ink); }
.ev-icon .i { width: 16px; height: 16px; }

/* Старт */
.start h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.start p { color: var(--muted); margin-top: 8px; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.steps li:first-child { border-top: 0; padding-top: 4px; }
.steps li:last-child { padding-bottom: 4px; }
.steps b { display: block; }
.steps p { font-size: 14.5px; color: var(--muted); margin-top: 2px; }
.steps li > div > p + p, .steps .chips + p { margin-top: 12px; }
.steps li[data-done] b { color: var(--muted); }
.n { width: 30px; height: 30px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; font-weight: 700; }
.n--now { background: var(--accent); color: var(--on-accent); }
.n--done { background: var(--ok-bg); color: var(--ok); }
.n .i { width: 16px; height: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 8px 12px; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.chip:hover { border-color: var(--accent); color: var(--accent-text); }
.chip small { font-weight: 500; color: var(--muted); }
.facts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.facts li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 14.5px; }
.facts .i { color: var(--muted); width: 18px; height: 18px; margin-top: 2px; }
.facts span { color: var(--muted); }
.facts b { color: var(--text); font-weight: 600; }

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 760px) {
  main { padding: 20px 16px 32px; gap: 16px; }
  .layout { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .col { display: contents; }
  .card { padding: 16px 18px; }
  .money { gap: 10px 14px; }
  .money > div > b { font-size: 22px; }
  .money > div > span, .money > div > small { font-size: 13px; }
  .avg .money > div > b { font-size: 19px; }
  .seg button { min-height: 44px; }
  /* В таблице на телефоне — монета, стоимость и результат; вложено и средняя видны у выбранной монеты */
  .ctable .c-inv, .ctable .c-avg { display: none; }
  .hero .money .sep { display: none; }
  .notice { grid-template-columns: 20px minmax(0, 1fr); }
  .notice__act { grid-column: 2; justify-self: start; min-height: 40px; }
  .hero .money .nowrap { display: block; }
  .next__when { font-size: 21px; }
  .ex__balance { font-size: 22px; }
}

/* ======================================================================================
 * Страницы кабинета: общие компоненты (Планы, История, Биржи, Тариф, Настройки, Вход, Ошибки)
 * ====================================================================================== */
:root { --ok-ink: #1C7348; --switch-off: #D6D6CD; --err-solid: #B42318; }
:root[data-theme="dark"] { --ok-ink: #7CD8AA; --switch-off: #42433E; --err-solid: #C93A2E; }

/* Заголовок страницы: название, короткая подпись, главное действие справа */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.page-head h1 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
:root[data-theme="dark"] .page-head h1 { font-weight: 700; }
.page-head p { color: var(--muted); margin-top: 4px; }
.page-head > div { min-width: 0; }
.back { display: inline-flex; align-items: center; gap: 2px; color: var(--accent-text); font-weight: 600; text-decoration: none; font-size: 14.5px; margin: 0 0 6px -4px; padding: 4px; }
.back:hover { text-decoration: underline; }
.back .i { width: 18px; height: 18px; }
/* Узкая колонка для форм и настроек: длинные строки и широкие поля читать тяжело */
.narrow { width: 100%; max-width: 720px; margin: 0 auto; display: grid; gap: 24px; }
.stack-24 { display: grid; gap: 24px; min-width: 0; }

/* Статус плана/ключа/оплаты — точка и слово */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--chip); color: var(--muted); }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.pill--ok { background: var(--ok-bg); color: var(--ok-ink); }
.pill--warn { background: var(--warn-bg); color: var(--warn-ink); }
.pill--err { background: var(--err-bg); color: var(--err-ink); }
.pill--accent { background: var(--info-bg); color: var(--accent-text); }
.pill--plain::before { display: none; }

/* Переключатель «покупки идут»: зелёный — идут, серый — пауза */
.switch { position: relative; width: 46px; height: 28px; flex: none; border-radius: 999px; border: 0; padding: 0; background: var(--switch-off); cursor: pointer; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); transition: transform .15s; }
.switch[aria-checked="true"] { background: var(--ok); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }
.switch:disabled { opacity: .45; cursor: not-allowed; }

/* Списки строк: значок · текст · справа статус или действие */
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li + li { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; color: inherit; text-decoration: none; }
.row__title { font-weight: 700; }
.row__sub { color: var(--muted); font-size: 14px; }
.row__end { display: flex; align-items: center; gap: 12px; justify-self: end; }
a.row:hover .row__title, button.row:hover .row__title { text-decoration: underline; }
button.row { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.row .chev { color: var(--muted); width: 18px; height: 18px; }

/* Сводка цифр: подпись сверху, число крупно */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }
.stats > div { min-width: 0; }
.stats > div > span { display: block; font-size: 13.5px; color: var(--muted); }
.stats > div > b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; margin-top: 2px; }
.stats > div > small { display: block; color: var(--muted); font-size: 13.5px; }

/* Формы */
.field { display: grid; gap: 10px; }
.field__label { font-weight: 700; font-size: 15px; }
.field__label small { font-weight: 400; color: var(--muted); font-size: 14px; }
.hint { color: var(--muted); font-size: 13.5px; }
.hint--warn { color: var(--warn-ink); }
.input { display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); font-size: 18px; font-weight: 600; }
.input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.input input, .input select { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: var(--text); outline: none; padding: 0; }
/* Выпадающий список рисует система: без своего фона пункты в тёмной теме выходят светлым по белому */
.input select option { background: var(--surface); color: var(--text); font-weight: 500; }
/* Выключенная кнопка должна выглядеть выключенной: «Подтвердить» до всех отметок, «Создать план» при сумме меньше минимума */
.btn:disabled, .btn:disabled:hover { opacity: .45; cursor: not-allowed; filter: none; }
.input > span { color: var(--muted); font-weight: 500; }
.input--sm { min-height: 46px; font-size: 15px; font-weight: 500; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; text-align: left; }
.choice:hover { border-color: var(--muted); }
.choice[aria-pressed="true"], .choice[aria-checked="true"] { border-color: var(--accent); background: var(--info-bg); }
.choice small { display: block; font-weight: 500; color: var(--muted); font-size: 12.5px; }
.choice:disabled { opacity: .5; cursor: not-allowed; }
.form-foot { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn--lg { padding: 13px 22px; font-size: 16px; }
.btn--danger { color: var(--err-ink); background: var(--surface); border-color: color-mix(in srgb, var(--err-ink) 35%, var(--line)); }
.btn--danger:hover { background: var(--tint-err); }
.btn--danger-solid { background: var(--err-solid); border-color: var(--err-solid); color: #FFFFFF; }
.btn--danger-solid:hover { background: var(--err-solid); filter: brightness(1.08); }
.btn .i { width: 18px; height: 18px; }
.linkish { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-text); font-weight: 600; cursor: pointer; text-decoration: none; }
.linkish:hover { text-decoration: underline; }

/* Поле «скопировать»: адрес, сумма, реферальная ссылка */
.copy { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 12px; background: var(--hover); border: 1px solid var(--line); }
.copy code { flex: 1; min-width: 0; overflow-wrap: anywhere; font: 500 14.5px/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace; }
.copy .icon-btn { width: 36px; height: 36px; flex: none; }

/* Пустое состояние: картинка, заголовок, одна фраза, действие; шутка — тихой строкой */
.empty { text-align: center; padding: 36px 20px; display: grid; justify-items: center; gap: 10px; }
.empty .art { width: 136px; height: 136px; margin-bottom: 4px; }
.empty h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
:root[data-theme="dark"] .empty h2 { font-weight: 700; }
.empty p { color: var(--muted); max-width: 46ch; }
.empty__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.joke { color: var(--muted); font-size: 14px; }

/* Иллюстрации: линии цветом текста, заливки — токенами (в обеих темах перекрашиваются сами) */
.art { color: var(--muted); overflow: visible; }
.art .st { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.art .ac { fill: none; stroke: var(--accent-text); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.art .bg { fill: var(--chip); }
.art .tint { fill: var(--info-bg); }
.art .gold { fill: #F5B451; }
/* размер глифа монеты — атрибутом font-size у <text> (без inline style) */
.art .ink { fill: #16181D; font-family: var(--font); font-weight: 800; }
:root[data-theme="dark"] .art .gold { fill: #DDA24A; }

/* Строки настроек: название и подпись слева, управление справа */
.set { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: center; padding: 14px 0; }
.set + .set { border-top: 1px solid var(--line); }
.set__title { font-weight: 600; }
.set__sub { color: var(--muted); font-size: 14px; grid-column: 1; }
.set > :last-child:not(:first-child) { grid-column: 2; grid-row: 1 / span 2; }

/* Шкала «использовано из лимита» */
.meter { height: 8px; border-radius: 99px; background: var(--d0); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.meter--full i { background: var(--skip); }

/* Подтверждение в карточке (пауза, удаление, отключение биржи) */
.ask { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: var(--hover); display: grid; gap: 12px; }
.ask--err { background: var(--tint-err); }
.ask b { display: block; }
.ask p { color: var(--muted); font-size: 14.5px; margin-top: 2px; }
.ask > div:last-child { display: flex; gap: 8px; flex-wrap: wrap; }

/* Короткое сообщение внизу экрана */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100vw - 32px); padding: 12px 12px 12px 18px; border-radius: 14px; background: var(--text); color: var(--bg); font-size: 14.5px; box-shadow: var(--shadow); transition: opacity .2s, transform .2s; }
.toast--on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button { border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 6px 8px; border-radius: 8px; white-space: nowrap; }

@media (max-width: 760px) {
  .page-head h1 { font-size: 26px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div > b { font-size: 19px; }
  .toast { bottom: 84px; }
  .empty { padding: 24px 8px; }
  .set { grid-template-columns: minmax(0, 1fr); }
  .set > :last-child:not(:first-child) { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; }
}

/* ======================================================================================
 * Перенос в Django: то, что в макете делал JS-рендер, а здесь — классы и атрибуты
 * ====================================================================================== */
/* [hidden] сильнее display у компонентов (.ask, .confirm, .empty — grid/flex) */
[hidden] { display: none !important; }

/* Цвета значков монет — классами, без inline style (макет: app.js META/EXTRA) */
.coin--btc { background: #F5B451; }
.coin--eth { background: #A9B2F2; }
.coin--sol { background: #C3B1F7; }
.coin--ton { background: #9FD3F5; }
.coin--bnb { background: #F3D77A; }
.coin--xrp { background: #C9CED6; }
.coin--doge { background: #E8D08A; }
.coin--link { background: #A9BCF5; }
.coin--ada { background: #B5D0F0; }
.coin--ltc { background: #D3D7DE; }
.coin--p0 { background: #C9CED6; }
.coin--p1 { background: #B5D0F0; }
.coin--p2 { background: #D9C7F2; }
.coin--p3 { background: #A8DCCB; }
.coin--p4 { background: #EBCFA8; }
.coin--p5 { background: #D3D7DE; }

/* Кнопка темы: в разметке оба значка, видим тот, что переключит */
[data-theme-toggle] .i--sun { display: none; }
:root[data-theme="dark"] [data-theme-toggle] .i--sun { display: block; }
:root[data-theme="dark"] [data-theme-toggle] .i--moon { display: none; }

/* Меню аккаунта: «Выйти» — кнопка формы POST, выглядит как ссылки меню */
.account__panel form { margin: 0; }
.account__panel button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.account__panel button:hover { background: var(--hover); }
:root[data-theme="dark"] .account__panel button:hover { background: #2E2F2B; }
.account__who .muted { display: block; overflow-wrap: anywhere; }

/* Ссылка «к содержимому» для клавиатуры */
.skip { position: absolute; left: 12px; top: -48px; z-index: 40; padding: 8px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* Ширина полос (запас USDT, лимит тарифа) — классами .w-0…w-100 с шагом 5, без inline style */
.w-0 { width: 0%; }
.w-5 { width: 5%; }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }

/* Порядок блоков главной на телефоне (на компьютере — колонки по разметке, см. .col > * order: 0) */
.ord-hero { order: 1; } .ord-avg { order: 2; } .ord-next { order: 3; } .ord-exchange { order: 4; } .ord-plans { order: 5; } .ord-recent { order: 6; } .ord-last { order: 9; }
/* Биржа требует внимания (ключ, мало USDT) — сразу под шапкой */
.layout--attention .ord-exchange { order: 2; } .layout--attention .ord-avg { order: 3; } .layout--attention .ord-next { order: 4; }

/* Кнопка-раскрывашка: текст «Показать все» / «Свернуть» по aria-expanded */
[aria-expanded="false"] .when-open, [aria-expanded="true"] .when-closed { display: none; }
.plans--more { margin-top: 0; }
.plans--more .prow:first-child { border-top: 1px solid var(--line); }

/* ======================================================================================
 * Планы: список, страница плана, новый план (макет plans.html)
 * ====================================================================================== */
  /*
   * «Планы» — расписание покупок и управление им. Цифры результата живут на главной;
   * здесь — что, сколько, как часто, идёт ли, и кнопка «пауза» прямо в строке.
   * Новый план собирается одной фразой: «Покупать $10 в Bitcoin каждый день на Binance».
   */
  .coin--md { width: 40px; height: 40px; font-size: 16px; }
  .coin--lg { width: 56px; height: 56px; font-size: 22px; }

  /* Список планов */
  .plist .row { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 14px 0; }
  .plist .row__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .plist .row__title a { color: inherit; text-decoration: none; }
  .plist .row__title a:hover { text-decoration: underline; }
  .plist .row__title a::after { content: ""; position: absolute; inset: 0; }   /* вся строка кликабельна */
  .plist li { position: relative; }
  .plist .row__end { position: relative; z-index: 1; }                         /* переключатель — поверх ссылки */
  .plist .row__note { font-size: 13.5px; margin-top: 2px; }
  .plist .row__note--warn { color: var(--warn-ink); }
  .plist .row__note--err { color: var(--err-ink); }
  .plist li[data-off] .coin { opacity: .45; }
  :root[data-theme="dark"] .plist li[data-off] .coin { opacity: .55; filter: grayscale(1) brightness(0.75); }
  .list-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
  .filter { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--chip); }
  .filter button { border: 0; background: none; padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
  .filter button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
  .calm { color: var(--muted); font-size: 14px; text-align: center; margin-top: 4px; }

  /* Страница плана */
  .phead { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
  .phead h1 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
  :root[data-theme="dark"] .phead h1 { font-weight: 700; }
  .phead p { color: var(--muted); margin-top: 2px; }
  .phead__ctl { display: flex; align-items: center; gap: 12px; }
  .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .stats-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14.5px; }
  .stats-note b { color: var(--text); font-weight: 600; }
  .mini { list-style: none; margin: 8px 0 0; padding: 0; }
  .mini li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
  .mini li:first-child { border-top: 0; }
  .mini small { display: block; color: var(--muted); font-size: 13px; }
  .mini .end { margin-left: auto; text-align: right; white-space: nowrap; }
  .danger { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
  .danger p { color: var(--muted); font-size: 14.5px; margin-top: 2px; }

  /* Новый план: форма слева, итог фразой справа */
  .form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
  .form { display: grid; gap: 28px; }
  .coins-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .coins-pick .choice { padding: 8px 12px 8px 8px; }
  .coins-pick .choice small { white-space: nowrap; }
  .amount { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .amount .input { width: 180px; }
  .summary { position: sticky; top: 88px; display: grid; gap: 14px; }
  .sentence { font-size: 20px; line-height: 1.55; font-weight: 600; letter-spacing: -0.005em; }
  .sentence mark { background: var(--info-bg); color: var(--accent-text); padding: 1px 8px; border-radius: 8px; white-space: nowrap; font-weight: 700; }
  .summary ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14.5px; }
  .summary li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; color: var(--muted); }
  .summary li b { color: var(--text); font-weight: 600; }
  .summary li .i { width: 18px; height: 18px; margin-top: 2px; }
  .summary .btn { justify-content: center; }

  /* Готово / лимит */
  .result { text-align: center; }
  .result .empty { padding: 28px 12px 20px; }

  @media (max-width: 900px) {
    .form-layout { grid-template-columns: minmax(0, 1fr); }
    .summary { position: static; }
  }
  @media (max-width: 760px) {
    .two { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .plist .row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; }
    .plist .pill { display: none; }                       /* на телефоне статус — строкой под названием */
    .phead { grid-template-columns: 48px minmax(0, 1fr); }
    .phead .coin--lg { width: 48px; height: 48px; font-size: 19px; }
    .phead__ctl { grid-column: 1 / -1; justify-content: space-between; }
    .sentence { font-size: 18px; }
    .page-head .btn { width: 100%; justify-content: center; }
  }

/* Django: фильтр списка — ссылки ?show=; выбор в форме — radio внутри .choice; ошибки полей */
.filter a { padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none; }
.filter a[aria-current="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
label.choice { position: relative; }
label.choice:has(input:checked) { border-color: var(--accent); background: var(--info-bg); }
label.choice:has(input:focus-visible) { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
label.choice:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.errorlist { list-style: none; margin: 0; padding: 0; color: var(--err-ink); font-size: 14px; font-weight: 600; }
.form-errors { padding: 12px 16px; border-radius: 14px; background: var(--tint-err); color: var(--err-ink); font-weight: 600; }
.switch-form { margin: 0; display: inline-flex; }
.sentence__sep { white-space: nowrap; }
.hint[data-min-hint] b { color: var(--text); }
.empty-filter { padding: 24px 0; }
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.btn--center { justify-content: center; }

/* ======================================================================================
 * История: лента по дням, фильтры, итоги по месяцам (макет history.html)
 * ====================================================================================== */
  /*
   * «История» — все покупки по дням, как выписка: что купили, за сколько и по какой цене.
   * Справа — итоги по месяцам (вместо отдельной «Аналитики»: сколько вложили, без графиков доходности).
   * Непрошедшие покупки — в той же ленте, со словами «почему», а не красным крестом.
   */
  .hist { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
  .filters { display: grid; gap: 12px; }
  .hscroll { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 2px 4px; }
  .hscroll::-webkit-scrollbar { display: none; }
  .fchip { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px 6px 8px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer; min-height: 36px; }
  .fchip--text { padding-left: 12px; }
  .fchip:hover { border-color: var(--muted); }
  .fchip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--on-text); }
  :root[data-theme="dark"] .fchip[aria-pressed="true"] { background: #43443F; border-color: #43443F; color: #FFFFFF; }
  .fchip__n { color: inherit; opacity: .75; font-weight: 500; }
  .frow { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
  .period { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--chip); }
  .period button { border: 0; background: none; padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
  .period button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
  .total { color: var(--muted); font-size: 14.5px; }
  .total b { color: var(--text); font-weight: 600; }

  /* Лента по дням */
  .day { margin-top: 6px; }
  .day + .day { margin-top: 18px; }
  .day__head { position: sticky; top: 64px; z-index: 2; display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; background: var(--surface); border-bottom: 1px solid var(--line); font-size: 14px; }
  .day__head b { font-weight: 700; }
  .day__head span { color: var(--muted); }
  .buy { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; font-size: 14.5px; }
  .buy + .buy { border-top: 1px solid var(--line); }
  .buy small { display: block; color: var(--muted); font-size: 13px; }
  .buy__time { color: var(--muted); font-size: 13.5px; text-align: right; white-space: nowrap; }
  .buy--fail .ev-icon { background: var(--warn-bg); color: var(--warn-ink); }
  .buy--err .ev-icon { background: var(--err-bg); color: var(--err-ink); }
  .buy--fail small { color: var(--warn-ink); }
  .buy--err small { color: var(--err-ink); }
  .more { display: flex; justify-content: center; margin-top: 16px; }

  /* Самая первая покупка — в конце ленты */
  .origin { margin-top: 20px; padding: 18px 20px; border-radius: 16px; background: var(--info-bg); display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; }
  .origin b { display: block; }
  .origin p { color: var(--muted); font-size: 14.5px; margin-top: 2px; }
  .origin .coin { width: 44px; height: 44px; font-size: 18px; }

  /* Итоги по месяцам */
  .months { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
  .months li { display: grid; gap: 4px; font-size: 14.5px; }
  .months .top { display: flex; justify-content: space-between; gap: 8px; }
  .months .top span { color: var(--muted); }
  .months .bar { height: 6px; border-radius: 99px; background: var(--d0); overflow: hidden; }
  .months .bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); opacity: .85; }
  .months small { color: var(--muted); font-size: 13px; }
  .side-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }

  @media (max-width: 900px) { .hist { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 760px) {
    .day__head { top: 56px; }
    .period { width: 100%; }
    .period button { flex: 1; padding: 8px 4px; }
  }

/* Django: фильтры — ссылки (?coin=, ?period=, ?failed=1) */
a.fchip, .period a { text-decoration: none; }
a.fchip[aria-current="true"] { background: var(--text); border-color: var(--text); color: var(--on-text); }
:root[data-theme="dark"] a.fchip[aria-current="true"] { background: #43443F; border-color: #43443F; color: #FFFFFF; }
.period a { padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--muted); text-align: center; }
.period a[aria-current="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
@media (max-width: 760px) { .period a { flex: 1; padding: 8px 4px; } }
.feed-empty { padding: 20px 0; text-align: center; }

/* ======================================================================================
 * Биржи: карточки, подключение в 3 шага (макет exchanges.html)
 * ====================================================================================== */
  /*
   * «Биржи» — где идут покупки и хватает ли USDT. Главное — доверие: ключ без права вывода,
   * деньги и монеты всё время на бирже пользователя. Подключение — три шага, по одному на экран.
   */
  .ex-tile { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 18px; background: var(--chip); color: var(--text); flex: none; }
  .exc { display: grid; gap: 18px; }
  .exc__head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
  .exc__head h2 { font-size: 20px; }
  .exc__head p { color: var(--muted); font-size: 14px; }
  .exc__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px 32px; padding-top: 18px; border-top: 1px solid var(--line); }
  .kv > span { display: block; font-size: 13.5px; color: var(--muted); }
  .kv > b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -0.015em; margin-top: 2px; white-space: nowrap; }
  .kv > p { font-size: 14.5px; margin-top: 2px; }
  .kv > p.muted { color: var(--muted); }
  .kv .runway { margin: 10px 0 6px; }
  .perms { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; }
  .perms li { display: flex; align-items: center; gap: 8px; }
  .perms .i { width: 18px; height: 18px; }
  .perms .yes .i { color: var(--ok); }
  .perms .no .i { color: var(--muted); }
  .perms .no { color: var(--muted); }
  .keyline { font: 500 14.5px/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace; }
  .exc__foot { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--line); }
  .exc--bad { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--err-ink) 45%, transparent); }
  .why { background: var(--tint-err); border-radius: 14px; padding: 14px 16px; display: grid; gap: 6px; font-size: 14.5px; }
  .why b { font-weight: 700; }
  .trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .trust div { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 14.5px; }
  .trust .i { color: var(--accent-text); margin-top: 1px; }
  .trust b { display: block; }
  .trust span { color: var(--muted); }

  /* Подключение по шагам */
  .steps-bar { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
  .steps-bar li { flex: 1; display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
  .steps-bar li::before { content: ""; height: 4px; border-radius: 99px; background: var(--d0); }
  .steps-bar li[data-on]::before { background: var(--accent); }
  .steps-bar li[aria-current] { color: var(--text); }
  .pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pick .choice { padding: 12px; gap: 12px; }
  .pick .choice b { display: block; font-size: 16px; }
  .howto { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 12px; }
  .howto li { counter-increment: s; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; font-size: 15px; }
  .howto li::before { content: counter(s); width: 28px; height: 28px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
  .howto b { font-weight: 700; }
  .fields { display: grid; gap: 14px; }
  .input--mono input { font: 500 15px/1 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .02em; }
  .checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .checks li { display: flex; gap: 10px; align-items: center; }
  .checks .i { color: var(--ok); }

  @media (max-width: 760px) {
    .exc__grid { grid-template-columns: minmax(0, 1fr); }
    .exc__head { grid-template-columns: 44px minmax(0, 1fr); }
    .exc__head .pill { grid-column: 2; justify-self: start; }
    .trust { grid-template-columns: minmax(0, 1fr); }
    .pick { grid-template-columns: minmax(0, 1fr); }
    .page-head .btn { width: 100%; justify-content: center; }
  }

/* Отметки-согласия (ключ биржи, условия) — макет consent.html */
  .agree { display: grid; gap: 10px; }
  .agree label { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; font-size: 15px; background: var(--surface); }
  .agree label:hover { border-color: var(--muted); }
  .agree label:has(input:checked) { border-color: var(--accent); background: var(--info-bg); }
  .agree input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
  .agree small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
  .agree a { color: var(--accent-text); font-weight: 600; }
/* Django: отступы вместо inline style макета */
.kv__gap { margin-top: 6px; }
.kv__gap-sm { margin-top: 4px; }
.kv__row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.agree .errorlist { margin: -4px 0 0 34px; }

/* ======================================================================================
 * Тариф и оплата (макет tariff.html)
 * ====================================================================================== */
  /*
   * «Тариф» — что у вас сейчас, сколько занято из лимита и что даст следующий тариф.
   * Цены и лимиты — из каталога (billing init_plans): Free 1/1, Starter 3/10, Pro без ограничений.
   * Оплата — USDT в сети TRC-20 или TON, уникальная сумма с «хвостом», счёт живёт 30 минут.
   */
  .now { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 32px; align-items: start; }
  .now__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .now__title h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.015em; }
  :root[data-theme="dark"] .now__title h2 { font-weight: 700; }
  .now p { color: var(--muted); margin-top: 4px; }
  .usage { display: grid; gap: 14px; }
  .usage > div { display: grid; gap: 6px; font-size: 14.5px; }
  .usage .top { display: flex; justify-content: space-between; gap: 8px; }
  .usage .top span { color: var(--muted); }
  .usage .hint { margin-top: -2px; }

  .tiers-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
  .period { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--chip); }
  .period button { border: 0; background: none; padding: 7px 14px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
  .period button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
  .tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .tier { display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; }
  .tier--current { box-shadow: inset 0 0 0 2px var(--accent); }
  .tier h3 { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  :root[data-theme="dark"] .tier h3 { font-weight: 700; }
  .tier__tag { color: var(--muted); font-size: 14.5px; margin-top: 2px; }
  .price b { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
  :root[data-theme="dark"] .price b { font-weight: 700; }
  .price small { display: block; color: var(--muted); font-size: 13.5px; min-height: 20px; }
  .gift { display: inline-block; margin-left: 4px; }
  .feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; align-content: start; }
  .feats li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; }
  .feats .i { width: 18px; height: 18px; color: var(--ok); margin-top: 1px; }
  .tier .btn { justify-content: center; }
  .tier .is-current { text-align: center; color: var(--muted); font-weight: 600; padding: 10px 0; }

  .faq { display: grid; }
  .faq details { border-top: 1px solid var(--line); }
  .faq details:first-of-type { border-top: 0; }
  .faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; font-weight: 600; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary .i { width: 18px; height: 18px; color: var(--muted); transition: transform .15s; flex: none; }
  .faq details[open] summary .i { transform: rotate(180deg); }
  .faq details p { color: var(--muted); padding: 0 0 14px; max-width: 70ch; }

  /* Оплата */
  .pay { display: grid; gap: 22px; }
  .copy .pay__amount { font: 800 30px/1.25 var(--font); letter-spacing: -0.02em; }
  :root[data-theme="dark"] .copy .pay__amount { font-weight: 700; }
  .pay__amount span { color: var(--accent-text); }
  .addr { display: grid; grid-template-columns: minmax(0, 1fr) 148px; gap: 20px; align-items: start; }
  .qr { width: 148px; height: 148px; padding: 10px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--line); }
  .qr svg { width: 100%; height: 100%; }
  .waiting { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--hover); }
  .spin { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--d0); border-top-color: var(--accent); animation: spin 1s linear infinite; flex: none; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .waiting b { display: block; }
  .waiting span { color: var(--muted); font-size: 14px; }
  .order { display: grid; gap: 8px; font-size: 14.5px; }
  .order div { display: flex; justify-content: space-between; gap: 12px; }
  .order span { color: var(--muted); }
  .tea { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; color: var(--muted); font-size: 14.5px; }
  .tea .art { width: 64px; height: 64px; }

  @media (max-width: 900px) { .tiers { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 760px) {
    .now { grid-template-columns: minmax(0, 1fr); }
    .addr { grid-template-columns: minmax(0, 1fr); }
    .period { width: 100%; }
    .period button { flex: 1; padding: 8px 4px; }
    .copy .pay__amount { font-size: 24px; }
  }

/* Django: период — ссылки, отступы вместо inline style */
.now__foot { margin-top: 14px; }
.faq h2 { margin-bottom: 4px; }
.order .hint { margin-top: 4px; }
.qr img { width: 100%; height: 100%; display: block; }
/* Выпадающий список в поле (.input): своя стрелка */
.select-wrap { position: relative; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer; }
.select-wrap > .i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }

/* ======================================================================================
 * Настройки, профиль, согласие (макеты settings.html, profile.html, consent.html)
 * ====================================================================================== */
  /*
   * «Настройки» — то, что меняют раз в полгода: профиль, тема, Telegram, приглашения, выход и удаление.
   * Одна колонка разделов; опасное — в самом низу и только с подтверждением.
   */
  .me { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
  .me .avatar { width: 56px; height: 56px; font-size: 22px; }
  .me b { display: block; font-size: 18px; }
  .me span { color: var(--muted); font-size: 14.5px; }
  .settings .card h2 { margin-bottom: 2px; }
  .settings .card > .hint { margin-top: 2px; }
  .theme-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  .theme-pick .choice { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; }
  .swatch { height: 54px; border-radius: 8px; border: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
  .swatch i { display: block; }
  .swatch--light { background: #F6F6F1; } .swatch--light i:last-child { margin: 10px 8px 0 0; border-radius: 6px 6px 0 0; background: #FFFFFF; border: 1px solid #E3E3DA; border-bottom: 0; }
  .swatch--dark { background: #121311; } .swatch--dark i:last-child { margin: 10px 8px 0 0; border-radius: 6px 6px 0 0; background: #1B1C1A; border: 1px solid #30312D; border-bottom: 0; }
  .swatch--system { background: linear-gradient(90deg, #F6F6F1 50%, #121311 50%); }
  .theme-pick .choice span { display: flex; align-items: center; gap: 6px; }
  .theme-pick .choice .i { width: 16px; height: 16px; }
  .tg { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 12px; }
  .tg__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--info-bg); color: var(--accent-text); display: grid; place-items: center; }
  .tg b { display: block; }
  .tg span { color: var(--muted); font-size: 14.5px; }
  .ref-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 14px; }
  .ref-stats div > span { display: block; color: var(--muted); font-size: 13.5px; }
  .ref-stats div > b { font-size: 20px; font-weight: 700; }
  .check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; cursor: pointer; }
  .check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--err-solid); flex: none; }
  .bye-line { text-align: center; color: var(--muted); font-size: 14px; }

  @media (max-width: 760px) {
    .me { grid-template-columns: 48px minmax(0, 1fr); }
    .me .avatar { width: 48px; height: 48px; font-size: 19px; }
    .me .pill { grid-column: 2; justify-self: start; }
    .theme-pick .swatch { height: 40px; }
  }

  /*
   * «Профиль» — четвёртая вкладка на телефоне: то же, что меню аккаунта на компьютере
   * (биржи, тариф, Telegram, настройки, выход), только крупными строками под палец.
   */
  .who { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 8px 0 4px; }
  .who .avatar { width: 72px; height: 72px; font-size: 28px; }
  .who b { font-size: 20px; }
  .who span { color: var(--muted); font-size: 14.5px; }
  .menu .row { padding: 12px 0; }
  .menu .ev-icon { width: 36px; height: 36px; }
  .menu .ev-icon .i { width: 18px; height: 18px; }
  .menu .bad { color: var(--err-ink); font-weight: 600; }
  .menu .ev-icon--bad { background: var(--err-bg); color: var(--err-ink); }
  .foot { text-align: center; color: var(--muted); font-size: 13.5px; display: grid; gap: 2px; }
  @media (max-width: 760px) {
  }

  /*
   * Согласие с документами (/legal/consent/, docs/07-security/legal-eligibility.md).
   * Требования: Terms+Privacy и Risk+Refunds — двумя отдельными галочками, третьей — возраст и страна
   * постоянного проживания; страна — из allowlist; новые версии документов — новое согласие.
   * Без шуток: это юридическая страница, тон — спокойный и прямой.
   */
  .docs .row { padding: 12px 0; }
  .docs .row__sub { font-size: 13.5px; }
  .docs .row__end { gap: 10px; }
  .docs .ev-icon { width: 36px; height: 36px; }
  .docs .ev-icon .i { width: 18px; height: 18px; }
  .docs .ver { color: var(--muted); font-size: 13px; white-space: nowrap; }
  .fine { color: var(--muted); font-size: 13.5px; text-align: center; }
  @media (max-width: 760px) {
    .docs .ver { display: none; }
    .form-foot .btn { width: 100%; justify-content: center; }
  }
/* Django: отступы вместо inline style, «Выйти» — кнопка формы в строке */
.set--first { margin-top: 8px; }
.copy--gap { margin-top: 12px; }
.field--gap { margin-top: 12px; }
.rows form { margin: 0; }
.foot a { color: inherit; }
.docs { margin-top: 6px; }
@media (max-width: 760px) { .menu-card { padding: 8px 18px; } }

/* ======================================================================================
 * Вход и ошибки сайта (макеты login.html, error.html)
 * ====================================================================================== */
  /*
   * «Вход» — только Google и Telegram (apps/authentication: social login, без паролей).
   * Слева — зачем всё это, справа — две кнопки. После выхода — напоминание, что покупки идут без вас.
   */
  main.auth { max-width: 1040px; min-height: 100vh; padding: 40px 24px 120px; display: grid; align-content: center; }
  .auth .auth__grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: center; }
  .auth .brand { display: grid; gap: 22px; }
  .auth .brand .logo { font-size: 20px; }
  .auth .brand .logo__mark { width: 34px; height: 34px; font-size: 18px; border-radius: 10px; }
  .auth .brand h1 { font-size: clamp(32px, 4.4vw, 48px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; }
  :root[data-theme="dark"] .auth .brand h1 { font-weight: 700; }
  .auth .brand h1 span { color: var(--accent-text); }
  .auth .brand > p { color: var(--muted); font-size: 17px; max-width: 46ch; }
  .auth .facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  .auth .facts li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
  .auth .facts .i { color: var(--accent-text); margin-top: 1px; }
  .auth .facts b { display: block; }
  .auth .facts span { color: var(--muted); font-size: 14.5px; }
  .auth .signin { display: grid; gap: 14px; padding: 28px; }
  .auth .signin h2 { font-size: 22px; font-weight: 800; }
  :root[data-theme="dark"] .auth .signin h2 { font-weight: 700; }
  .auth .signin > p { color: var(--muted); font-size: 14.5px; }
  .sso { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); font: inherit; font-weight: 700; font-size: 16px; color: var(--text); cursor: pointer; text-decoration: none; }
  .sso:hover { background: var(--hover); }
  .sso--tg { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .sso--tg:hover { background: var(--accent-hover); }
  .g { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--chip); color: var(--text); }
  .auth .legal { color: var(--muted); font-size: 13px; text-align: center; }
  .auth .legal a { color: inherit; }
  .auth .quote { color: var(--muted); font-size: 15px; border-left: 3px solid var(--line); padding-left: 14px; }
  .single { max-width: 480px; margin: 0 auto; width: 100%; }
  @media (max-width: 860px) {
    .auth .auth__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    main.auth { min-height: 0; padding: 28px 16px 40px; align-content: start; }
    .auth .signin { padding: 20px 18px; }
    .auth .brand h1 { font-size: 30px; }
    .auth .brand > p { font-size: 16px; }
  }
  /*
   * Ошибки 404 / 500 / 403 и «обновляемся». Тон — спокойный и с улыбкой: что случилось, что с покупками,
   * куда дальше. Шутка — тихой строкой и никогда вместо объяснения.
   */
  .oops { max-width: 560px; margin: 24px auto 0; width: 100%; }
  .oops .empty { padding: 40px 24px 32px; }
  .oops .art { width: 160px; height: 160px; }
  .code { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
  .ref { font: 500 13px/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace; color: var(--muted); }
  @media (max-width: 760px) {
    .oops { margin-top: 8px; }
    .oops .art { width: 128px; height: 128px; }
  }
/* Django: логотип над карточкой ошибки и «Вы вышли», кнопки входа на всю ширину */
.oops-wrap, .single { display: grid; justify-items: center; gap: 0; }
.oops-wrap > .logo, .single > .logo { margin-top: 8px; }
.single__card { margin-top: 20px; width: 100%; }
.sso--wide { width: 100%; }
.hint--center { text-align: center; margin-top: -6px; }
.tg-widget { display: flex; justify-content: center; min-height: 48px; }

/* --- Последний шаг входа через Google (allauth socialaccount/signup) ----------------------------- */
.signup-form { display: grid; gap: 14px; width: 100%; max-width: 380px; text-align: left; margin-top: 8px; }
.signup-form input:not([type=hidden]) { width: 100%; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; }
.signup-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.signup-form .btn { justify-self: stretch; justify-content: center; }

/* --- Юридические документы (legal/document_page.html): читаемая колонка текста ------------------ */
.doc-main { display: block; }
.doc { max-width: 780px; margin: 0 auto; padding: 24px 20px 64px; display: grid; gap: 20px; }
.doc__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.doc__back { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.doc__back:hover { text-decoration: underline; }
.doc__body { padding: 32px; line-height: 1.65; overflow-wrap: anywhere; }
.doc__body h1 { font-size: clamp(26px, 4vw, 34px); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }
:root[data-theme="dark"] .doc__body h1 { font-weight: 700; }
.doc__body h2 { font-size: 19px; font-weight: 700; margin: 28px 0 8px; }
.doc__body p, .doc__body ul, .doc__body ol { margin: 0 0 12px; }
.doc__body ul, .doc__body ol { padding-left: 22px; }
.doc__body a { color: var(--accent-text); }
.doc__body .meta { color: var(--muted); font-size: 14.5px; }
.doc__body .notice { display: block; padding: 14px 16px; margin: 0 0 16px; border-radius: 14px; background: var(--info-bg); border: 1px solid var(--line); }
.doc__body .notice.blocked { background: var(--err-bg); border-color: var(--err-line); color: var(--text); }
.doc__body dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0; }
.doc__body dt { font-weight: 600; color: var(--muted); }
.doc__body dd { margin: 0; }
.doc__docs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 14.5px; }
.doc__docs a { color: var(--muted); }
@media (max-width: 600px) {
  .doc__body { padding: 22px 18px; }
  .doc__body dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .doc__body dd { margin-bottom: 10px; }
}

/* ======================================================================================
 * Первые шаги: путь новичка План → Биржа → Условия → Ключ → Запуск (макет start.html)
 * Одна сетка на всех шагах: слева шаг, справа «Ваш план»; на телефоне план — строкой над шагом.
 * ====================================================================================== */
.lead { display: grid; gap: 14px; }
.lead .back { justify-self: start; margin-bottom: 0; }
/* Полоса пути: пять отрезков; пройденные шаги — ссылки с галочкой. На телефоне подписи заменяет «Шаг 2 из 5» */
.path { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.path li { flex: 1; min-width: 0; display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.path li::before { content: ""; height: 4px; border-radius: 99px; background: var(--d0); }
.path li[data-on]::before { background: var(--accent); }
.path li[aria-current] { color: var(--text); }
.path a { justify-self: start; display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.path a:hover { color: var(--text); text-decoration: underline; }
.path a .i { width: 15px; height: 15px; color: var(--ok); }
.path__now { display: none; font-size: 13.5px; font-weight: 600; color: var(--muted); margin-top: 8px; }
.path__now b { color: var(--text); font-weight: 600; }

.flow { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.flow__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; }
.flow__side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; position: sticky; top: 88px; }
.flow__side .summary { position: static; }
.flow .fine { text-align: left; }
.flow .form, .flow .form .field { grid-template-columns: minmax(0, 1fr); }   /* поле суммы не распирает карточку */
.flow .form legend { padding: 0; margin-bottom: 10px; }
.flow .coins-pick .choice { min-width: 0; }
.flow .coins-pick .choice > span:last-child { min-width: 0; }
.flow .coins-pick .choice small { overflow: hidden; text-overflow: ellipsis; }
.flow .pick .choice { font-size: 16px; }

.label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.myplan__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.plan-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14.5px; }
.plan-facts li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; color: var(--muted); }
.plan-facts li b { color: var(--text); font-weight: 600; }
.plan-facts li .i { width: 18px; height: 18px; margin-top: 2px; }
.plan-facts li.warn, .plan-facts li.warn .i, .checks li.warn, .checks li.warn .i { color: var(--warn-ink); }
.launch { display: grid; gap: 18px; }
.launch .sentence { font-size: 24px; line-height: 1.5; }
.checks--gap { margin-top: 10px; font-size: 14.5px; }
.checks--gap .i { width: 18px; height: 18px; }
.howto small { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }

/* «Ещё 6 монет», «Другая частота»: раскрываются без JS; раскрытый список заголовок не показывает */
.more-box { margin-top: 8px; }
.more { display: inline-flex; align-items: center; list-style: none; cursor: pointer; padding: 4px 0; font-size: 14.5px; font-weight: 600; color: var(--accent-text); }
.more::-webkit-details-marker { display: none; }
.more:hover { text-decoration: underline; }
.more-box[open] > .more { display: none; }
.steps .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

@media (max-width: 900px) {
  .flow { display: flex; flex-direction: column; align-items: stretch; }
  .flow__main, .flow__side { display: contents; }
  .myplan { order: -1; background: var(--info-bg); border-color: transparent; padding: 10px 16px 12px; gap: 4px; }
  .myplan .sentence { font-size: 15.5px; line-height: 1.45; font-weight: 700; }
  .myplan .sentence mark { background: none; padding: 0; color: inherit; border-radius: 0; }
  .myplan ul { font-size: 13.5px; }
  .myplan li { grid-template-columns: minmax(0, 1fr); }
  .myplan li .i { display: none; }
}
@media (max-width: 760px) {
  .flow { gap: 16px; }
  /* Подписи шагов прячем от глаз, но не от экранного диктора */
  .path li > * { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .path__now { display: block; }
  /* Зоны нажатия — не меньше 44 px */
  .lead .back, .more, .myplan .linkish { min-height: 44px; display: inline-flex; align-items: center; }
  .myplan { padding: 4px 16px 12px; }
  .more-box { margin-top: 0; }
  .flow .coins-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow .amount .input { width: 100%; }
  .flow .amount .choices { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow .amount .choice, .flow .form fieldset .choices .choice { justify-content: center; }
  .flow .form fieldset .choices .choice { flex: 1 1 calc(50% - 4px); }
  .flow .pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .launch .sentence { font-size: 20px; }
  .flow .form-foot .btn { width: 100%; justify-content: center; }
  .steps .acts .btn { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 360px) {
  .flow .pick { grid-template-columns: minmax(0, 1fr); }
}