/* ============================================================================
   Компоненты, общие для витрины и кабинета. План 19, §19.7.

   Имена классов и повадки взяты из `admin.css`: кнопка называется `btn`,
   карточка — `card`, бейдж — `badge`. Это не экономия на выдумывании имён.
   Пользователь, купивший ключ, ходит из кабинета в документацию и обратно, и
   стык не должен быть виден; а у нас на две поверхности один человек, и две
   расходящиеся системы имён он не удержит.

   Цвет нигде не является единственным носителем смысла: у каждого состояния
   есть текст рядом. Дальтоник и распечатка на чёрно-белом принтере — не
   крайние случаи, а обычные условия чтения.
   ========================================================================= */

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.7rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    /* План 111, §SF-11: заливка через --color-brand-fill, не --color-brand.
       В тёмной теме brand — «текстовый» зелёный (#88d2b0), белый текст на
       нём давал 1.77 (почти не читается). brand-fill держит белый ≥ 4.5
       под обеими темами. То же решение, что в Vue-кабинете (план 113, DC-4). */
    background: var(--color-brand-fill);
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease,
        box-shadow var(--motion-fast) ease;
}

.btn:hover {
    filter: brightness(0.85);
    color: #ffffff;
    text-decoration: none;
}

/* План 111, §SF-11: в тёмной теме hover на --color-brand-fill (#163829) от
   него же почти неотличим. Добавляем рамку --color-brand для читаемого отклика. */
[data-theme="dark"] .btn:hover {
    border-color: var(--color-brand);
    filter: none;
    background: var(--color-surface-hover);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .btn:hover {
        border-color: var(--color-brand);
        filter: none;
        background: var(--color-surface-hover);
    }
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn--ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

.btn--ghost:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
    border-color: var(--color-primary);
}

/* План 111, §SF-11: в тёмной теме фиолетовый primary в hover убираем —
   после SF-1 он на витрине чужой. Меняем на --color-brand. */
[data-theme="dark"] .btn--ghost:hover {
    border-color: var(--color-brand);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .btn--ghost:hover {
        border-color: var(--color-brand);
    }
}

.btn--sm { padding: 0.4rem 0.85rem; font-size: var(--font-sm); }
.btn--lg { padding: 0.9rem 1.6rem; font-size: var(--font-lg); }
.btn--block { width: 100%; }

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

/* План 111, §SF-12: единая карточка витрины — зеркало `StaticCard.vue`
   из Vue-кабинета. Один набор токенов (фон, рамка, --radius-lg,
   --shadow-sm), один padding (--space-6 — то же значение, что в Vue),
   один hover (--shadow-md). Карточки моделей (.model-card), шаги
   «How it works» (.step) и тарифы (.plan) добавляют свои классы
   к .card и не повторяют эти свойства.

   План писал «--space-5 (1.25rem)», но в момент написания --space-5
   уже был 1.5rem, и StaticCard.vue использует --space-6. Держимся
   реального Vue-компонента: открыть витрину и кабинет рядом — карточки
   одного размера. */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

/* План 214, MOB-7.2: на мобильном (≤640px) паддинг карточек с 2rem до 1rem.
   Это покрывает StepCard, PricingPlanCard, ModelCard, ModelCardFeatured
   одной строкой media — все они используют .card или её варианты.
   Без этого на 311px-карточке 64px внутреннего расхода оставляют
   контенту ~247px. */
@media (max-width: 640px) {
    .card { padding: var(--space-4); }
}

.card > :last-child { margin-bottom: 0; }

.card__title { margin: 0 0 var(--space-2); font-size: var(--font-xl); }

.card__sub {
    margin: 0 0 var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-sm);
}

/* Карточка-ссылка: кликается вся, но в разметке остаётся обычный заголовок со
   ссылкой — так её видит и поисковик, и скринридер, и режим чтения. */
.card--link { transition: border-color var(--motion-fast) ease, box-shadow var(--motion-base) ease; }
/* План 111, §SF-12: hover-рамка карточки-ссылки — на бренде, не на
   фиолетовом primary. До этого в светлой теме оставался --color-primary
   от админки, в тёмной SF-11 уже перевёл на бренд. SF-12 закрывает
   светлую сторону и заодно выравнивает обе темы. */
.card--link:hover { border-color: var(--color-brand); box-shadow: var(--shadow-md); }

/* План 111, §SF-11: тень в тёмной теме не читается, карточки на
   --color-surface (#151b26) сливаются с фоном --color-bg (#0b0f17).
   Тёмную иерархию держим рамкой: усиливаем border до --color-border-strong
   и добавляем тонкую светлую внутреннюю кромку (inset). */
[data-theme="dark"] .card,
[data-theme="dark"] .step {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .card,
    :root:not([data-theme]) .step {
        border-color: var(--color-border-strong);
        box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }
}
/* Тёмный hover: рамка brand вместо фиолетового primary (SF-1 уже убрал фиолет).
   Шаг «How it works» не кликается, поэтому hover на нём не нужен —
   раньше правило покрывало оба типа карточек, теперь только ссылки. */
[data-theme="dark"] .card--link:hover {
    border-color: var(--color-brand);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .card--link:hover {
        border-color: var(--color-brand);
        box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
}
/* Тёмная featured-карточка тарифа: фиолетовый primary → brand. */
[data-theme="dark"] .plan--featured {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 1px var(--color-brand) inset, var(--shadow-md);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .plan--featured {
        border-color: var(--color-brand);
        box-shadow: 0 0 0 1px var(--color-brand) inset, var(--shadow-md);
    }
}

.stat-card { text-align: left; }
.stat-card__label {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-sm);
}
.stat-card__value {
    margin: var(--space-1) 0;
    font-size: var(--font-3xl);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.stat-card__help { margin: 0; color: var(--color-text-muted); font-size: var(--font-sm); }
.stat-card--success .stat-card__value { color: var(--color-success); }
.stat-card--warning .stat-card__value { color: var(--color-warning); }
.stat-card--danger .stat-card__value { color: var(--color-danger); }

/* ------------------------------------------------------------------ бейджи */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    font-size: var(--font-xs);
    font-weight: 550;
    white-space: nowrap;
}

.badge--success { color: var(--color-success); background: var(--color-success-bg); border-color: var(--color-success-mark); }
.badge--warning { color: var(--color-warning); background: var(--color-warning-bg); border-color: currentColor; }
.badge--danger  { color: var(--color-danger);  background: var(--color-danger-bg);  border-color: currentColor; }
.badge--info    { color: var(--color-info);    background: var(--color-info-bg);    border-color: currentColor; }
/* План 22, §22.4: фиолетовый — только на CTA. Бейджи брендовых фич (tools,
   vision) — на тёмно-зелёном с белым текстом. Контраст белого на
   --color-brand в светлой теме — 9.63, в тёмной переключаемся на
   --color-brand-strong (12.87), иначе белый на тёмном сливается. */
.badge--brand   { color: #ffffff; background: var(--color-brand); border-color: transparent; }
[data-theme="dark"] .badge--brand { color: #ffffff; background: var(--color-brand-strong); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .badge--brand { color: #ffffff; background: var(--color-brand-strong); }
}

.badge__icon { width: 0.9em; height: 0.9em; flex: none; }

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}

.tags li { margin: 0; }

/* ---------------------------------------------------------------- таблицы */

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
}

thead th {
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    font-size: var(--font-sm);
    font-weight: 600;
    text-align: left;
}

th, td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--color-surface-hover); }

/* ------------------------------------------------------------------ формы */

label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--font-sm);
    font-weight: 550;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    transition: border-color var(--motion-fast) ease;
}

/* Кольцо фокуса сделано через box-shadow, а не только через смену цвета
   рамки: у поля без нашей рамки или в момент подмены шрифта оно остаётся
   заметным для клавиатурного пользователя. `:focus-visible` — мышь кольца
   не получает. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px var(--color-brand-soft);
    outline: none;
}

.field { margin-bottom: var(--space-4); }
.field__help { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--font-sm); }

/* Кнопка «показать/скрыть пароль». Прогрессивное улучшение: в разметке
   помечена hidden, скрипт auth.js снимает hidden. Кнопка — absolute поверх
   правого края инпута, а не в flex-строке: инпут сохраняет ту же ширину, что
   и соседнее поле email, и макет не прыгает при появлении кнопки. Обёртка
   .input-row — только вокруг инпута, .field__help под полем лежит снаружи и
   кнопки не касается. Текст — через data-lang-* в шаблоне. */
.field--reveal .input-row { position: relative; }
.field--reveal .input-row input { padding-right: 4.5rem; }
.field__reveal {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    padding: 0.25rem 0.5rem;
    border: 0;
    background: none;
    color: var(--color-text-muted);
    font: inherit;
    font-size: var(--font-xs);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color var(--motion-fast) ease;
}
.field__reveal:hover { color: var(--color-text); }
.field__reveal[aria-pressed="true"] { color: var(--color-primary); }

/* ------------------------------------------------------- сообщения и пустота */

.flash {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    margin-bottom: var(--space-4);
}

.flash--success { border-left-color: var(--color-success); background: var(--color-success-bg); color: var(--color-success); }
.flash--warning { border-left-color: var(--color-warning); background: var(--color-warning-bg); color: var(--color-warning); }
.flash--error   { border-left-color: var(--color-danger);  background: var(--color-danger-bg);  color: var(--color-danger); }

.empty-state {
    padding: var(--space-7) var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
}

/* ------------------------------------------------------- раскрывающиеся блоки

   `<details>` вместо самодельного аккордеона на скриптах: раскрывается
   браузером, содержимое присутствует в разметке всегда — то есть видно
   поисковику, режиму чтения и поиску по странице (Ctrl+F находит текст
   внутри закрытого блока). Ни одна библиотека этого не даёт. */

details.disclosure {
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4) 0;
}

details.disclosure > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: var(--font-lg);
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    align-items: center;
}

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

details.disclosure > summary::after {
    content: "+";
    color: var(--color-text-muted);
    font-size: var(--font-xl);
    line-height: 1;
    flex: none;
}

details.disclosure[open] > summary::after { content: "–"; }
details.disclosure > summary + * { margin-top: var(--space-3); }

/* ------------------------------------------------------------ блок с кодом

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

.code-block { position: relative; }

.code-block__copy {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font: inherit;
    font-size: var(--font-xs);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--motion-base) ease, color var(--motion-fast) ease;
}

.code-block:hover .code-block__copy,
.code-block__copy:focus-visible { opacity: 1; }
.code-block__copy:hover { color: var(--color-text); }

@media (hover: none) {
    /* На тач-экране наведения не бывает, и кнопка иначе не появилась бы
       никогда. */
    .code-block__copy { opacity: 1; }
}

/* Счета и пополнение (`account/topup.html`, `account/payment.html`).
   Эти две страницы остались на Jinja после VC-13 (VC-8: оплата — отдельное
   решение владельца). Правила переехали из удалённого `cabinet.css` целиком,
   без правок. */
.invoice {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.invoice__amount { font-size: var(--font-2xl); font-weight: 700; margin: 0; }
.invoice__timer { color: var(--color-warning); font-size: var(--font-sm); margin: 0; }

/* Реквизиты перевода. Плашка сети — крупная и над адресом намеренно: перевод
   в другой сети уходит безвозвратно, и это единственное место на всём сайте,
   где ошибка чтения стоит клиенту денег. */
.deposit__network {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    background: var(--color-warning-bg);
    color: var(--color-warning);
    font-weight: 650;
}

.deposit__address {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    font-family: var(--font-mono);
    font-size: var(--font-lg);
    word-break: break-all;
}

.deposit__qr {
    width: 10rem;
    height: 10rem;
    /* Белая подложка под QR обязательна в любой теме: сканеры ищут тёмный код
       на светлом фоне, а инвертированный читается далеко не всеми. */
    background: #ffffff;
    padding: var(--space-2);
    border-radius: var(--radius-md);
}

.topup__methods {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}