/*
 * ███╗   ███╗██╗███╗   ██╗███████╗██╗   ██╗██████╗ ███╗   ██╗
 * ████╗ ████║██║████╗  ██║██╔════╝██║   ██║██╔══██╗████╗  ██║
 * ██╔████╔██║██║██╔██╗ ██║█████╗  ██║   ██║██████╔╝██╔██╗ ██║
 * ██║╚██╔╝██║██║██║╚██╗██║██╔══╝  ╚██╗ ██╔╝██╔═══╝ ██║╚██╗██║
 * ██║ ╚═╝ ██║██║██║ ╚████║███████╗ ╚████╔╝ ██║     ██║ ╚████║
 * ╚═╝     ╚═╝╚═╝╚═╝  ╚═══╝╚══════╝  ╚═══╝  ╚═╝     ╚═╝  ╚═══╝
 * ==================================================================
 *             C S S   C O M P O N E N T S   F I L E
 * ==================================================================
 * @category    VPN Subsystem
 * @package     MineVPN\Server
 * @version     5.0.0
 * [WARNING]
 * This source code is strictly proprietary and confidential.
 * Unauthorized reproduction, distribution, or decompilation
 * is strictly prohibited and heavily monitored.
 * @copyright   2026 MineVPN Systems. All rights reserved.
 *
 * MineVPN Server — Components / Библиотека всех переиспользуемых UI-элементов
 *
 * Самый большой CSS-файл проекта (~34 KB). Подключается ПОСЛЕ base.css НО ДО layout.css и pages/*.css.
 * Включает все «reusable» элементы панели — cards, buttons, inputs, badges, modals, toasts и т.д.
 *
 * Структура (в порядке появления в файле):
 *
 * 1. КАРТОЧКИ (.card):
 *    • Базовая .card — surface-1, border-subtle, padding space-7, radius xl
 *    • 9 accent-вариантов (.card--accent-{blue/violet/cyan/emerald/amber/rose/purple/pink/orange}):
 *      4px цветная полоса слева — главный способ визуально разнообразить страницы
 *    • .card--hover — cursor pointer + border-strong при hover
 *    • .card--compact — меньший padding для элементов списка
 *    • .card--flush — padding 0 (для вложенных структур со своим spacing)
 *    • .card-header / .card-title / .card-subtitle — внутренние блоки
 *
 * 2. КНОПКИ (.btn):
 *    • Базовая .btn — padding 12px 20px, font-weight 600, gap space-2 (для иконки+текст)
 *    • .btn--primary  — градиент grad-primary (blue→cyan), базовый CTA
 *    • .btn--success  — grad-success (emerald)
 *    • .btn--danger   — grad-danger (rose)
 *    • .btn--ghost    — прозрачный, hover surface-2
 *    • .btn--sm       — меньший размер (8px 12px)
 *    • :disabled      — opacity 0.5, cursor not-allowed
 *
 * 3. INPUTS (формы):
 *    • .input         — текстовый, surface-2 фон, border-subtle, focus blue
 *    • .input.mono    — mono шрифт (для IP-адресов, ID, etc.)
 *    • .select        — нативный select (заменяется custom-select.js на .mv-select)
 *    • .label         — label для входных полей
 *    • .switch        — toggle checkbox в iOS-стиле (.switch input + .switch-slider)
 *
 * 4. CUSTOM SELECT (.mv-select-*):
 *    Пользовательский dropdown поверх нативного <select> (см. assets/js/lib/custom-select.js).
 *    • .mv-select          — обёртка
 *    • .mv-select-trigger  — видимая «кнопка» (триггер открытия)
 *    • .mv-select-menu     — дропдаун список (.is-open выводит вверх)
 *    • .mv-select-option   — пункты (.is-selected, .is-hover, .is-disabled)
 *    • .mv-select-native   — скрытый нативный <select> (остаётся в DOM)
 *    • .mv-select-arrow    — стрелка вниз/вверх (вращается при открытии)
 *
 * 5. STATUS INDICATORS:
 *    • .status-dot         — кружок 8x8px (в строке с текстом)
 *      — .status-dot--ok    (emerald)
 *      — .status-dot--warn  (amber)
 *      — .status-dot--err   (rose)
 *      — .status-dot--off   (slate, выключен)
 *      — .status-dot--pulse — пульсирует (animation pulse-dot 2s infinite)
 *    • .status-pill        — капсула с status-dot и текстом (.status-pill--ok/err)
 *    • .status-value       — числовое значение (пинг, размер, etc.)
 *
 * 6. BADGES (.badge):
 *    Маленькие ярлычки рядом с текстом. 9 вариантов цвета:
 *    .badge--{blue/violet/cyan/emerald/amber/orange/rose/purple/pink/slate}
 *    • .icon-badge — 36x36 икона-квадратик (для заголовков секций)
 *
 * 7. MODALS (.modal-backdrop / .modal):
 *    • .modal-backdrop  — fixed full-screen, rgba(0,0,0,0.6), z-modal-backdrop
 *    • .modal           — центрированный, surface-1, max-width 480px
 *    • .modal-header / .modal-body / .modal-footer
 *    • .modal-title и .modal-close (кнопка ×)
 *    • .is-open — открывает с fade-in animation
 *    Используется confirm.js и shortcuts.js для help-окна.
 *
 * 8. TOASTS (.toast-container / .toast):
 *    • .toast-container — fixed bottom-right, z-toast, gap space-3
 *    • .toast           — surface-1, max-width 360px, shadow-lg + accent border
 *      — .toast--success (emerald), .toast--error (rose), .toast--warning (amber), .toast--info (cyan)
 *    • .toast-icon / .toast-body / .toast-title / .toast-close
 *    • .toast-action — CTA-кнопка внутри toast (failover тост с «Купить»)
 *    • .is-leaving — анимация исчезновения (slide-right + fade-out)
 *
 * 9. LOADING OVERLAY:
 *    • .loading-overlay — fixed full-screen, rgba(0,0,0,0.8) + blur
 *    • .loading-spinner — круговой спиннер (animation spin)
 *    • .loading-text — большой текст с инфо о текущем действии («Подключение VPN...»)
 *
 * 10. PROGRESS BAR (.progress-bar):
 *     Топ-бар (YouTube/GitHub-style):
 *     • .progress-bar          — fixed top, h: 3px, z-tooltip
 *     • .progress-bar-fill     — градиент blue→cyan
 *     • .is-active — идёт с 0% → 85% за ~5с (CSS animation)
 *     • .is-done   — 100% + fade-out 400ms
 *
 * 11. SKELETON SHIMMER:
 *     • .skeleton — background gradient с animation shimmer 1.5s infinite
 *     • Используется в stats.php placeholder-блоках пока идёт первый fetch
 *
 * 12. EMPTY STATES (.empty-state):
 *     • .empty-state-icon (64px кружок)
 *     • .empty-state-title (text-xl, primary)
 *     • .empty-state-text  (muted)
 *     • .empty-state-action — CTA кнопка внизу
 *
 * 13. KBD TAGS (.kbd):
 *     Клавиатурные подсказки для shortcuts.js help modal (g, o, /, etc.). Mono шрифт, surface-3 фон.
 *
 * 14. RESPONSIVE BREAKPOINTS (внизу файла):
 *     • max-width: 768px — карточки меньше padding, modal full-screen, badges меньше
 *
 * Используется:
 *   • Все страницы панели через cabinet.php
 *   • Все JS-компоненты (toast.js, confirm.js, custom-select.js, progress.js) рассчитывают на эти стили
 *
 * Зависит от:
 *   tokens.css — все var(--*) переменные (цвета, размеры, animation curves)
 *   base.css   — keyframes (fade-in, slide-up, pulse-dot, spin, shimmer)
 */

/* ════════════════════════════════════════════════════════════════════════
   КАРТОЧКИ
   ════════════════════════════════════════════════════════════════════════ */

.card {
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-7);
    transition: border-color var(--dur-fast) var(--ease);
}

.card + .card {
    margin-top: var(--space-5);
}

.card--hover {
    cursor: pointer;
}

.card--hover:hover {
    border-color: var(--border-strong);
}

/* Акцентные карточки — 4px цветная полоса слева. Это главный способ
   сделать страницы визуально разнообразнее. */
.card--accent-blue    { border-left: 4px solid var(--blue); }
.card--accent-violet  { border-left: 4px solid var(--violet); }
.card--accent-cyan    { border-left: 4px solid var(--cyan); }
.card--accent-emerald { border-left: 4px solid var(--emerald); }
.card--accent-amber   { border-left: 4px solid var(--amber); }
.card--accent-rose    { border-left: 4px solid var(--rose); }
.card--accent-purple  { border-left: 4px solid var(--purple); }
.card--accent-pink    { border-left: 4px solid var(--pink); }
.card--accent-orange  { border-left: 4px solid var(--orange); }

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.card-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
    /* margin-bottom — отступ до контента карточки. Раньше это работало только если title лежит
       внутри .card-header (у него есть margin-bottom). Но на многих страницах
       .card-title идёт напрямую в .card — и тогда никакого отступа до формы/input-а нет. */
    margin-bottom: var(--space-5);
}

/* Если title лежит внутри .card-header — не дублируем отступ (у header уже есть margin-bottom). */
.card-header .card-title {
    margin-bottom: 0;
}

.card-subtitle {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* Компактная карточка (для элементов списка) */
.card--compact {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
}

/* Карточка без паддинга (для вложенных структур которые сами контролируют spacing) */
.card--flush {
    padding: 0;
    overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════════════
   КНОПКИ
   ════════════════════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 12px 20px;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    min-height: 44px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
    white-space: nowrap;
    user-select: none;
}

.btn:active:not(:disabled) {
    transform: scale(0.97);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── варианты ──────────────────────────────────────────────────────── */

/* --primary — основное действие, blue→cyan gradient */
.btn--primary {
    background: var(--grad-primary);
    color: #FFFFFF;
    box-shadow: var(--shadow-glow-blue);
}
.btn--primary:hover:not(:disabled) {
    background: var(--grad-primary-hover);
    filter: brightness(1.08);
}

/* --success — для операций VPN "Активировать" (зелёный, как "GO") */
.btn--success {
    background: var(--grad-success);
    color: #FFFFFF;
    box-shadow: var(--shadow-glow-emerald);
}
.btn--success:hover:not(:disabled) {
    background: var(--grad-success-hover);
    filter: brightness(1.08);
}

/* --accent — featured действие, редкое использование (violet gradient) */
.btn--accent {
    background: var(--grad-accent);
    color: #FFFFFF;
    box-shadow: var(--shadow-glow-violet);
}
.btn--accent:hover:not(:disabled) {
    background: var(--grad-accent-hover);
}

/* --brand — цвета логотипа (orange→pink). Для особых моментов. */
.btn--brand {
    background: var(--grad-brand);
    color: #FFFFFF;
}
.btn--brand:hover:not(:disabled) {
    filter: brightness(1.1);
}

.btn--danger {
    background: var(--rose);
    color: #FFFFFF;
    box-shadow: var(--shadow-glow-rose);
}
.btn--danger:hover:not(:disabled) {
    background: var(--rose-hover);
}

.btn--secondary {
    background: var(--surface-2);
    color: var(--text-primary);
    border-color: var(--border-strong);
}
.btn--secondary:hover:not(:disabled) {
    background: var(--surface-3);
    border-color: var(--blue-border);
}

.btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-subtle);
}
.btn--ghost:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.btn--warning {
    background: var(--amber);
    color: #1E2540;
    font-weight: 700;
}
.btn--warning:hover:not(:disabled) {
    background: var(--amber-hover);
}

/* ── размеры ──────────────────────────────────────────────────────── */

.btn--sm {
    padding: 8px 14px;
    font-size: var(--text-xs);
    min-height: 36px;
}

.btn--lg {
    padding: 16px 28px;
    font-size: var(--text-md);
    min-height: 54px;
}

.btn--icon {
    padding: var(--space-2);
    width: 44px;
    height: 44px;
    min-height: 44px;
}

.btn--block {
    width: 100%;
}

/* ── loading state ──────────────────────────────────────────────────── */

.btn--loading {
    pointer-events: none;
    position: relative;
    color: transparent;
}
.btn--loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* ════════════════════════════════════════════════════════════════════════
   FORM INPUTS
   ════════════════════════════════════════════════════════════════════════ */

.input,
.select,
.textarea {
    display: block;
    width: 100%;
    padding: 12px 16px;
    min-height: 48px;
    font-size: var(--text-base);
    color: var(--text-primary);
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-fast) var(--ease),
                background-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}

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

.input:hover:not(:disabled),
.select:hover:not(:disabled),
.textarea:hover:not(:disabled) {
    border-color: var(--border-strong);
}

.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--blue);
    background: var(--bg-base);
    box-shadow: 0 0 0 3px var(--blue-soft);
}

.input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.textarea {
    min-height: 96px;
    resize: vertical;
    line-height: var(--leading-normal);
}

.select {
    appearance: none;
    padding-right: var(--space-10);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2394A3B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    cursor: pointer;
}

/* ==========================================================================
   CUSTOM SELECT (mv-select) — замена нативного <select> через progressive
   enhancement (см assets/js/lib/custom-select.js).

   Нативный <select> остаётся в DOM но скрыт — формы submit работают как раньше.
   Реальный UI рисуется этими стилями — полный control над border-radius, ховером, фокусом.
   ========================================================================== */

/* Нативный select становится невидимым но остаётся в DOM (form submit работает) */
.mv-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    pointer-events: none;
    opacity: 0;
}

.mv-select {
    position: relative;
    display: block;
    width: 100%;
    outline: none;
    user-select: none;
}

/* Триггер — видимая "кнопка" которая выглядит как обычный input */
.mv-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    padding: 12px 16px;
    min-height: 48px;
    font-size: var(--text-base);
    color: var(--text-primary);
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease),
                background-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}

.mv-select:hover .mv-select-trigger {
    border-color: var(--border-strong);
}

.mv-select:focus .mv-select-trigger,
.mv-select.is-open .mv-select-trigger {
    outline: none;
    border-color: var(--blue);
    background: var(--bg-base);
    box-shadow: 0 0 0 3px var(--blue-soft);
}

.mv-select-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mv-select-arrow {
    flex-shrink: 0;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    transition: transform var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}

.mv-select.is-open .mv-select-arrow {
    transform: rotate(180deg);
    color: var(--blue);
}

/* Выпадающее меню */
.mv-select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: var(--z-dropdown, 50);
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    background: var(--surface-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 280px;
    overflow-y: auto;
    /* По умолчанию скрыто */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--dur-fast) var(--ease),
                visibility var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
    pointer-events: none;
}

.mv-select.is-open .mv-select-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Опции */
.mv-select-option {
    padding: 10px 14px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mv-select-option:hover,
.mv-select-option.is-hover {
    background: var(--surface-2);
    color: var(--text-primary);
}

.mv-select-option.is-selected {
    background: var(--blue-soft);
    color: var(--blue);
    font-weight: 600;
}

.mv-select-option.is-selected:hover,
.mv-select-option.is-selected.is-hover {
    background: var(--blue-soft);
    color: var(--blue);
    filter: brightness(1.15);
}

.mv-select-option.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Скроллбар в меню — тонкий в теме */
.mv-select-menu::-webkit-scrollbar {
    width: 8px;
}
.mv-select-menu::-webkit-scrollbar-track {
    background: transparent;
}
.mv-select-menu::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-full);
}

.label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-bottom: var(--space-2);
}

/* Input с иконкой слева */
.input-group {
    position: relative;
}
.input-group .input {
    padding-left: var(--space-12);
}
.input-group-icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════
   SWITCH (toggle)
   ════════════════════════════════════════════════════════════════════════ */

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    flex-shrink: 0;
}

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

.switch-slider {
    position: absolute;
    inset: 0;
    background: var(--surface-3);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease);
}

.switch-slider::before {
    content: '';
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    top: 3px;
    background: var(--text-secondary);
    border-radius: 50%;
    transition: transform var(--dur-fast) var(--ease),
                background-color var(--dur-fast) var(--ease);
}

.switch input:checked + .switch-slider {
    background: var(--blue);
}

.switch input:checked + .switch-slider::before {
    transform: translateX(22px);
    background: #FFFFFF;
}

.switch input:focus-visible + .switch-slider {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════════
   BADGES
   ════════════════════════════════════════════════════════════════════════ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px 10px;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    border: 1px solid transparent;
}

.badge--blue    { background: var(--blue-soft);    color: #93C5FD;  border-color: var(--blue-border); }
.badge--violet  { background: var(--violet-soft);  color: #C4B5FD;  border-color: var(--violet-border); }
.badge--cyan    { background: var(--cyan-soft);    color: #67E8F9;  border-color: var(--cyan-border); }
.badge--emerald { background: var(--emerald-soft); color: #6EE7B7;  border-color: var(--emerald-border); }
.badge--amber   { background: var(--amber-soft);   color: #FCD34D;  border-color: var(--amber-border); }
.badge--rose    { background: var(--rose-soft);    color: #FDA4AF;  border-color: var(--rose-border); }
.badge--pink    { background: var(--pink-soft);    color: #F9A8D4;  border-color: var(--pink-border); }
.badge--purple  { background: var(--purple-soft);  color: #D8B4FE;  border-color: var(--purple-border); }
.badge--orange  { background: var(--orange-soft);  color: #FDBA74;  border-color: var(--orange-border); }
.badge--slate   { background: var(--surface-3);    color: var(--text-secondary); border-color: var(--border-strong); }

/* Icon badge (квадрат с SVG, 40x40) */
.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.icon-badge--blue    { background: var(--blue-soft);    color: var(--blue); }
.icon-badge--violet  { background: var(--violet-soft);  color: var(--violet); }
.icon-badge--cyan    { background: var(--cyan-soft);    color: var(--cyan); }
.icon-badge--emerald { background: var(--emerald-soft); color: var(--emerald); }
.icon-badge--amber   { background: var(--amber-soft);   color: var(--amber); }
.icon-badge--rose    { background: var(--rose-soft);    color: var(--rose); }
.icon-badge--pink    { background: var(--pink-soft);    color: var(--pink); }
.icon-badge--purple  { background: var(--purple-soft);  color: var(--purple); }
.icon-badge--orange  { background: var(--orange-soft);  color: var(--orange); }
.icon-badge--slate   { background: var(--surface-3);    color: var(--text-primary); }

.icon-badge svg {
    width: 20px;
    height: 20px;
}

/* ════════════════════════════════════════════════════════════════════════
   STATUS DOTS
   ════════════════════════════════════════════════════════════════════════ */

.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot--ok {
    background: var(--emerald);
    box-shadow: var(--shadow-glow-emerald);
}
.status-dot--warn {
    background: var(--amber);
}
.status-dot--err {
    background: var(--rose);
    box-shadow: var(--shadow-glow-rose);
}
.status-dot--off {
    background: var(--text-disabled);
}

.status-dot--pulse {
    animation: pulse-dot 2s ease-in-out infinite;
}

/* ════════════════════════════════════════════════════════════════════════
   STATUS PILL (пилюля со статусом)
   ════════════════════════════════════════════════════════════════════════ */

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 14px;
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    white-space: nowrap;
}

.status-pill--ok {
    background: var(--emerald-soft);
    color: #6EE7B7;
    border-color: var(--emerald-border);
}
.status-pill--warn {
    background: var(--amber-soft);
    color: #FCD34D;
    border-color: var(--amber-border);
}
.status-pill--err {
    background: var(--rose-soft);
    color: #FDA4AF;
    border-color: var(--rose-border);
}
.status-pill--info {
    background: var(--blue-soft);
    color: #93C5FD;
    border-color: var(--blue-border);
}

/* ════════════════════════════════════════════════════════════════════════
   MODAL
   ════════════════════════════════════════════════════════════════════════ */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(13, 18, 32, 0.85);
    z-index: var(--z-modal-backdrop);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    animation: fade-in var(--dur-base) var(--ease) both;
}

.modal-backdrop.is-open {
    display: flex;
}

.modal {
    position: relative;
    z-index: var(--z-modal);
    width: 100%;
    max-width: 540px;
    background: var(--surface-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl);
    padding: var(--space-7);
    animation: slide-up var(--dur-base) var(--ease-out) both;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    margin-bottom: var(--space-5);
}

.modal-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
}

.modal-body {
    margin-bottom: var(--space-6);
    color: var(--text-secondary);
}

.modal-footer {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

.modal-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    border-radius: var(--radius-md);
    transition: background-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.modal-close:hover {
    background: var(--surface-2);
    color: var(--text-primary);
}

/* ════════════════════════════════════════════════════════════════════════
   TOAST (сообщение внизу экрана)
   ════════════════════════════════════════════════════════════════════════ */

.toast-container {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 420px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--surface-1);
    border: 1px solid var(--border-strong);
    border-left: 4px solid var(--blue);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    animation: slide-up var(--dur-base) var(--ease-out) both;
    min-width: 300px;
}

.toast--success { border-left-color: var(--emerald); }
.toast--error   { border-left-color: var(--rose); }
.toast--warning { border-left-color: var(--amber); }
.toast--info    { border-left-color: var(--cyan); }

.toast-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 2px;
}

.toast--success .toast-icon { color: var(--emerald); }
.toast--error   .toast-icon { color: var(--rose); }
.toast--warning .toast-icon { color: var(--amber); }
.toast--info    .toast-icon { color: var(--cyan); }

.toast-body {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: var(--leading-snug);
}

.toast-title {
    font-weight: 600;
    margin-bottom: 2px;
}

.toast-close {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--text-muted);
    transition: color var(--dur-fast) var(--ease);
}
.toast-close:hover {
    color: var(--text-primary);
}

/* Action-линк в toast — для брендовых promo-toasts (фейловер + купить резерв).
   Pill с brand-градиентом (orange→pink), компактный, выполнен в стиле .btn--brand. */
.toast-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    padding: 6px 12px;
    font-size: var(--text-xs);
    font-weight: 700;
    color: #FFFFFF;
    background: var(--grad-brand);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: filter var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.toast-action:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}
.toast-action:active {
    transform: translateY(0);
}

.toast.is-leaving {
    animation: slide-up var(--dur-base) var(--ease) reverse both;
}

/* ════════════════════════════════════════════════════════════════════════
   LOADING OVERLAY (full-screen spinner)
   ════════════════════════════════════════════════════════════════════════ */

.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(13, 18, 32, 0.85);
    z-index: var(--z-modal-backdrop);
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--space-4);
    animation: fade-in var(--dur-base) var(--ease) both;
}

.loading-overlay.is-open {
    display: flex;
}

.loading-spinner {
    width: 56px;
    height: 56px;
    border: 4px solid var(--surface-2);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loading-text {
    font-size: var(--text-md);
    color: var(--text-primary);
    font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════════
   SKELETON (shimmer placeholders)
   ════════════════════════════════════════════════════════════════════════ */

.skeleton {
    background: linear-gradient(90deg,
        var(--surface-1) 25%,
        var(--surface-2) 50%,
        var(--surface-1) 75%);
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
    animation: shimmer 1.5s infinite linear;
    color: transparent !important;
    user-select: none;
    pointer-events: none;
}

.skeleton--text     { height: 14px; width: 60%; }
.skeleton--title    { height: 24px; width: 40%; }
.skeleton--card     { height: 120px; border-radius: var(--radius-lg); }

/* ════════════════════════════════════════════════════════════════════════
   TOP PROGRESS BAR (для навигации)
   ════════════════════════════════════════════════════════════════════════ */

.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    z-index: var(--z-toast);
    pointer-events: none;
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--blue);
    box-shadow: 0 0 8px var(--blue);
    transition: width var(--dur-slow) var(--ease-out),
                opacity var(--dur-fast) var(--ease);
}

.progress-bar.is-active .progress-bar-fill {
    width: 85%;
}

.progress-bar.is-done .progress-bar-fill {
    width: 100%;
    opacity: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   DIVIDERS
   ════════════════════════════════════════════════════════════════════════ */

.divider {
    height: 1px;
    background: var(--border-subtle);
    margin: var(--space-5) 0;
    border: none;
}

.divider-vertical {
    width: 1px;
    background: var(--border-subtle);
    align-self: stretch;
}

/* ════════════════════════════════════════════════════════════════════════
   KBD (подсказка горячих клавиш)
   ════════════════════════════════════════════════════════════════════════ */

.kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 3px 8px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    line-height: 1;
}

/* ════════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ════════════════════════════════════════════════════════════════════════ */

.empty-state {
    padding: var(--space-12) var(--space-6);
    text-align: center;
}

.empty-state-icon {
    width: 56px;
    height: 56px;
    color: var(--text-disabled);
    margin: 0 auto var(--space-5);
}

.empty-state-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.empty-state-text {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: var(--leading-normal);
}

/* ════════════════════════════════════════════════════════════════════════
   KEYBOARD SHORTCUTS HELP (вызывается через ? — см shortcuts.js)
   ════════════════════════════════════════════════════════════════════════ */

.shortcut-group {
    margin-bottom: var(--space-5);
}

.shortcut-group:last-child {
    margin-bottom: 0;
}

.shortcut-group-title {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
}

.shortcut-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    gap: var(--space-4);
}

.shortcut-row > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

.shortcut-row > span:last-child {
    text-align: right;
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
}

/* ========================================================================
   RESPONSIVE — mobile overrides для компонентов (≤ 640px)
   ========================================================================
   Десктоп padding карточек — space-7 (либеральный). На высоком dpi телефоне
   такой padding забирает ~48px с каждой стороны = 96px из 360-400px экрана — контент
   сжимается. Режем padding до space-5 и уменьшаем border-radius. */
@media (max-width: 640px) {
    .card {
        padding: var(--space-5);
        border-radius: var(--radius-lg);
    }

    .card + .card {
        margin-top: var(--space-4);
    }

    /* Card-header — перенос на 2 строки при вузком экране */
    .card-header {
        gap: var(--space-2);
        margin-bottom: var(--space-4);
    }

    .card-title {
        font-size: var(--text-md);
    }

    /* Empty state — меньше padding */
    .empty-state {
        padding: var(--space-8) var(--space-4);
    }

    .empty-state-icon {
        width: 44px;
        height: 44px;
    }

    /* Modal — на весь экран на мобильном */
    .modal {
        margin: var(--space-3);
        max-height: calc(100vh - var(--space-6));
    }

    /* Badges — немного меньше чтобы не занимали много места */
    .badge {
        font-size: var(--text-xs);
        padding: 2px 8px;
    }
}