/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');

/*
 * ============================================================
 * NM HUB — styles.css (single stylesheet)
 * ============================================================
 * Contents (search by section banners):
 *   1. Theme tokens (dark default + light overrides)
 *   2. Base icons / resets / app shell
 *   3. Toolbar, bottom nav, footer
 *   4. Cards, buttons, inputs
 *   5. Auth, account, payment / plans
 *   6. Referral, support, help wizard
 *   7. Modals, traffic dashboard, pay-sheets
 *   8. Shared home-command (PC + mobile colors once)
 *   9. Mobile layout (<=1023) — sizes only
 *  10. Desktop shell (>=1024) — layout only
 *
 * Theme rules:
 *   - Dark is the default (:root)
 *   - Light only via html[data-theme="light"]
 *   - Prefer CSS variables over hardcoded colors
 *   - Do not rename JS-coupled selectors (.page.active, .lk-desktop-shell, .is-*)
 * ============================================================
 */

/* ==================== 1. THEME TOKENS (DARK DEFAULT) ==================== */
:root, html[data-theme="dark"] {
    --bg-color: #060913;
    --card-bg: rgba(16, 22, 45, 0.65);
    --accent-color: #00f0ff;
    --accent-glow: rgba(0, 240, 255, 0.4);
    --green-color: #00ff88;
    --red-color: #ff0055;
    --text-primary: #ffffff;
    --text-secondary: #8ab4f8;
    --separator-color: rgba(0, 240, 255, 0.15);
    --control-bg: rgba(0, 0, 0, 0.4);
    --toolbar-bg: rgba(6, 9, 19, 0.8);
    --toolbar-border: rgba(0, 240, 255, 0.2);
    --toolbar-shadow: 0 0 20px rgba(0, 240, 255, 0.1);

    /* Semantic tokens — shared by PC and mobile */
    --brand-blue: #2563eb;
    --brand-blue-soft: rgba(37, 99, 235, 0.12);
    --brand-cyan: #00f0ff;
    --tg-blue: #2AABEE;
    --tg-bg: linear-gradient(145deg, rgba(42, 171, 238, 0.14) 0%, rgba(0, 0, 0, 0.16) 68%), rgba(0, 0, 0, 0.22);
    --tg-border: rgba(42, 171, 238, 0.3);
    --meter-bg: rgba(0, 0, 0, 0.18);
    --meter-border: rgba(255, 255, 255, 0.08);
    --meter-track: rgba(255, 255, 255, 0.1);
    --meter-fill: linear-gradient(90deg, var(--accent-color), rgba(0, 176, 155, 0.95));
    --chip-bg: linear-gradient(145deg, rgba(0, 240, 255, 0.08) 0%, rgba(0, 0, 0, 0.16) 68%), rgba(0, 0, 0, 0.22);
    --chip-border: rgba(0, 240, 255, 0.2);
    --chip-icon: var(--accent-color);
    --news-bg: rgba(59, 130, 246, 0.1);
    --news-border: rgba(96, 165, 250, 0.18);
    --news-text: #93c5fd;
    --cta-bg: linear-gradient(135deg, rgba(0, 224, 255, 0.95) 0%, rgba(34, 211, 166, 0.95) 100%);
    --cta-color: #041018;
    --cta-shadow: 0 8px 18px rgba(0, 224, 255, 0.2);
    --ring-stroke: var(--accent-color);
    --ring-track: rgba(255, 255, 255, 0.1);
    --slot-empty: rgba(255, 255, 255, 0.12);
    --slot-filled: #34d399;
    --slot-glow: 0 0 10px rgba(52, 211, 153, 0.55);
    --ok-bg: rgba(16, 185, 129, 0.14);
    --ok-text: #6ee7b7;
    --off-bg: rgba(148, 163, 184, 0.16);
    --off-text: var(--text-secondary);
    --warn-color: #d97706;
    --danger-color: #dc2626;
    --surface-soft: rgba(255, 255, 255, 0.04);
    --hover-border: rgba(0, 240, 255, 0.28);
}

/* ==================== 1b. THEME TOKENS (LIGHT) ==================== */
html[data-theme="light"] {
    --bg-color: #c8d4e6;
    --card-bg: rgba(255, 255, 255, 0.78);
    --accent-color: #1a56db;
    --accent-glow: rgba(26, 86, 219, 0.14);
    --green-color: #0f766e;
    --red-color: #be123c;
    --text-primary: #12141a;
    --text-secondary: #5c6573;
    --separator-color: rgba(18, 20, 26, 0.08);
    --control-bg: rgba(255, 255, 255, 0.96);
    --toolbar-bg: rgba(255, 255, 255, 0.78);
    --toolbar-border: rgba(255, 255, 255, 0.95);
    --toolbar-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);

    --brand-blue: #2563eb;
    --brand-blue-soft: rgba(37, 99, 235, 0.08);
    --brand-cyan: #1a56db;
    --tg-blue: #2AABEE;
    --tg-bg: linear-gradient(145deg, rgba(42, 171, 238, 0.12) 0%, rgba(42, 171, 238, 0.04) 100%);
    --tg-border: rgba(42, 171, 238, 0.24);
    --meter-bg: rgba(255, 255, 255, 0.55);
    --meter-border: rgba(15, 23, 42, 0.07);
    --meter-track: rgba(15, 23, 42, 0.08);
    --meter-fill: linear-gradient(90deg, #2563eb, #0ea5e9);
    --chip-bg: rgba(255, 255, 255, 0.7);
    --chip-border: rgba(15, 23, 42, 0.08);
    --chip-icon: #2563eb;
    --news-bg: rgba(37, 99, 235, 0.07);
    --news-border: rgba(37, 99, 235, 0.14);
    --news-text: #1d4ed8;
    --cta-bg: linear-gradient(135deg, #1d4ed8 0%, #2563eb 55%, #0ea5e9 100%);
    --cta-color: #ffffff;
    --cta-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
    --ring-stroke: #2563eb;
    --ring-track: rgba(15, 23, 42, 0.08);
    --slot-empty: rgba(15, 23, 42, 0.1);
    --slot-filled: #10b981;
    --slot-glow: 0 0 8px rgba(16, 185, 129, 0.35);
    --ok-bg: rgba(16, 185, 129, 0.14);
    --ok-text: #047857;
    --off-bg: rgba(239, 68, 68, 0.12);
    --off-text: #b91c1c;
    --warn-color: #d97706;
    --danger-color: #dc2626;
    --surface-soft: rgba(255, 255, 255, 0.55);
    --hover-border: rgba(37, 99, 235, 0.35);
}

/* Unified premium icons */
.ui-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
    color: inherit;
}
.ui-icon-svg {
    width: 1.15em;
    height: 1.15em;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.pay-sheet-hero-icon {
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: -6px;
    color: var(--accent-color);
}
.pay-sheet-hero-icon .ui-icon-svg {
    width: 100%;
    height: 100%;
}
.help-connect-magic-icon.ui-icon,
.help-connect-magic-icon .ui-icon-svg {
    width: 1.6rem;
    height: 1.6rem;
}
.theme-icon.ui-icon .ui-icon-svg {
    width: 1.1rem;
    height: 1.1rem;
}
.desktop-tool-btn .ui-icon .ui-icon-svg,
.desktop-sidebar-logout .ui-icon .ui-icon-svg {
    width: 1.05rem;
    height: 1.05rem;
}
.os-select-icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.35rem;
    vertical-align: -0.15em;
}
.stats-btn .ui-icon,
.pay-btn-main .ui-icon {
    width: 1.05rem;
    height: 1.05rem;
    margin-right: 0.35rem;
}
.pay-btn-main .ui-icon {
    display: inline-flex;
    vertical-align: -0.2em;
}
.home-devices-compact-chevron.ui-icon {
    width: 1.1rem;
    height: 1.1rem;
    opacity: 0.55;
}
.referral-star-icon.ui-icon {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--accent-color);
    margin-right: 0.25rem;
    vertical-align: -0.15em;
}
.ticket-attach-btn .ui-icon,
.ticket-composer-attach-btn .ui-icon {
    width: 1.05rem;
    height: 1.05rem;
}
.ticket-composer-attach-btn .ui-icon {
    margin: 0;
}
.ticket-composer-send-icon.ui-icon .ui-icon-svg,
.ticket-composer-send-icon .ui-icon-svg {
    width: 1.25rem;
    height: 1.25rem;
}
.auth-tg-channel-check-btn__icon.ui-icon .ui-icon-svg {
    width: 1rem;
    height: 1rem;
}
.account-maintenance-theme {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.account-maintenance-theme .ui-icon .ui-icon-svg {
    width: 1rem;
    height: 1rem;
}

*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background-image: 
        radial-gradient(1px 1px at 20px 30px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 40px 70px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 50px 160px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 90px 40px, rgba(0, 240, 255, 0.8), rgba(0,0,0,0)),
        radial-gradient(2px 2px at 130px 80px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 160px 120px, rgba(255, 0, 85, 0.8), rgba(0,0,0,0));
    background-repeat: repeat;
    background-size: 200px 200px;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none;
    min-height: 100vh;
    transition: background-color 0.4s ease, color 0.3s ease;
}

body,
.top-toolbar-inner,
.toolbar-btn,
#bottom-nav,
.info-card,
.account-card,
.notify-card,
.stat-card,
.plan-card,
.auth-card,
.detail-item,
.notifications-panel,
.modal-content {
    transition:
        background-color 0.4s ease,
        color 0.3s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

html[data-theme="light"] body {
    /* Важно: у тёмной темы background-size: 200px + repeat —
       без сброса светлый градиент тайлится в «клетку». */
    background-color: #c8d4e6;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-size: auto !important;
    background-attachment: fixed;
}

/* Подложка под пузырями */
html[data-theme="light"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 60% at 20% 15%, #f4f7fc 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 90% 20%, #a8bdd8 0%, transparent 50%),
        radial-gradient(ellipse 65% 55% at 70% 90%, #8fbfc2 0%, transparent 52%),
        linear-gradient(160deg, #dbe4f2 0%, #b8c8dc 55%, #c5d2e4 100%);
    animation: none;
}

/* Лёгкая вуаль — пузыри хорошо видны */
html[data-theme="light"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(220, 230, 242, 0.04) 45%,
        rgba(200, 214, 232, 0.06) 100%
    );
    backdrop-filter: blur(3px) saturate(1.04);
    -webkit-backdrop-filter: blur(3px) saturate(1.04);
    box-shadow: none;
    opacity: 1;
    mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme="light"] body::before {
        animation: none;
    }
}

/* Анимация: звёзды (dark) / пузыри за стеклом (light) */
.bg-particles-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s ease;
}

html[data-theme="dark"] .bg-particles-canvas {
    opacity: 1;
}

html[data-theme="light"] .bg-particles-canvas {
    opacity: 1;
    visibility: visible;
}

/* Скроллбары */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-color); }
::-webkit-scrollbar-thumb { background: var(--accent-color); border-radius: 10px; }

/* Анимации страниц */
.page { display: none; padding: 0 1rem 1rem 1rem; }
.page.active { display: block; animation: warpJump 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes warpJump {
    0% { opacity: 0; transform: scale(0.95) translateY(20px); filter: blur(5px); }
    100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

/* ==================== ГЛОБАЛЬНОЕ ЦЕНТРИРОВАНИЕ ПРИЛОЖЕНИЯ ==================== */
#app {
    position: relative;
    z-index: 1;
    max-width: 800px; 
    margin: 0 auto; 
    padding-top: 84px; /* Уменьшай, чтобы прижать к тулбару */
    padding-bottom: 100px; 
    width: 100%;
    padding-left: 15px; 
    padding-right: 15px;
    flex: 1 0 auto;
}

/* Экран входа/регистрации: тулбар и док скрыты — убираем «пустые» отступы под них (мобильный Safari) */
#app:has(#auth-page.active) {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: 0;
    padding-top: max(4px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
}

#app:has(#auth-page.active) #auth-page.active {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    justify-content: center;
}

/* ==================== ВЕРХНЯЯ ПАНЕЛЬ (Тулбар) ==================== */
/* Тулбар теперь строго той же ширины, что и контент в #app */
.top-toolbar {
    position: fixed;
    top: 15px; 
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 800px; /* Совпадает с #app */
    padding: 0 15px;  /* Совпадает с #app */
    z-index: 100;
    display: flex;
    pointer-events: none;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.top-toolbar.is-hidden-for-reading {
    transform: translateX(-50%) translateY(calc(-100% - 20px));
    opacity: 0;
}

.top-toolbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; 
    pointer-events: auto;
    background: rgba(10, 14, 28, 0.35); /* Больше прозрачности */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Блик на границе */
    padding: 8px 15px;
    border-radius: 20px;
    backdrop-filter: blur(24px); /* Усиливаем размытие фона */
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Стили для шапки */
.toolbar-brand {
    flex: 1; /* Занимает левую часть и балансирует кнопки справа */
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.toolbar-logo {
    height: 34px; /* Размер логотипа (можешь сделать больше или меньше) */
    width: auto;
    object-fit: contain; /* Чтобы пропорции не искажались */
    border-radius: 8px;
}

html[data-theme="light"] .toolbar-logo { 
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); /* Мягкая тень для светлой темы */
}

.toolbar-actions {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    flex: 1; /* Уравновешивает логотип */
}

.toolbar-btn {
    background: rgba(255, 255, 255, 0.08); /* Делаем кнопки слегка видимыми */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.toolbar-btn:hover {
    background: rgba(0, 240, 255, 0.1);
    border-color: rgba(0, 240, 255, 0.2);
    transform: translateY(-2px);
}

.toolbar-btn--theme {
    overflow: hidden;
}

.toolbar-btn--theme .theme-icon {
    position: absolute;
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 0.35s ease, opacity 0.35s ease;
    pointer-events: none;
}

html[data-theme="dark"] .theme-icon-sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

html[data-theme="dark"] .theme-icon-moon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

html[data-theme="light"] .theme-icon-sun {
    opacity: 1;
    transform: rotate(0) scale(1);
}

html[data-theme="light"] .theme-icon-moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

html[data-theme="light"] .toolbar-btn:hover {
    background: rgba(0, 85, 255, 0.1);
    border-color: rgba(0, 85, 255, 0.2);
}

.toolbar-svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.toolbar-icon.ui-icon .ui-icon-svg {
    width: 22px;
    height: 22px;
}
.notif-dot {
    position: absolute;
    top: 8px; right: 8px;
    width: 10px; height: 10px;
    background: var(--red-color);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--red-color);
}

/* ==================== ФИКС НИЖНЕЙ НАВИГАЦИИ (Док-панель) ==================== */
#bottom-nav {
    background: rgba(10, 14, 28, 0.4);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1); /* Рамка теперь со всех сторон */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); /* Тень равномерная, а не только вверх */
    position: fixed;
    bottom: 15px; 
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    -webkit-transform: translate3d(-50%, 0, 0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    width: calc(100% - 30px); 
    max-width: 770px; 
    display: flex;
    justify-content: space-around;
    z-index: 1000;
    border-radius: 35px; /* Сильное закругление, как у верхней панели */
    padding: 8px 12px; /* Чуть отодвигаем кнопки от краев */
}

html[data-theme="light"] #bottom-nav {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 12px 40px rgba(15, 23, 42, 0.08);
}

/* ==================== НИЖНЯЯ ПАНЕЛЬ САЙТА (контакты и документы) ==================== */
.site-footer {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 15px 16px;
    flex-shrink: 0;
}

body.bottom-nav-active .site-footer {
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
}

.site-footer-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(10, 14, 28, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .site-footer-inner {
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 10px 28px rgba(15, 23, 42, 0.05);
}

.site-footer-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--separator-color);
}

.site-footer-columns {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 16px 28px;
}

.site-footer-col {
    min-width: 0;
}

.site-footer-copyright {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

.site-footer-note-btn {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    font: inherit;
    font-size: 0.68rem;
    line-height: 1.35;
    color: var(--text-secondary);
    opacity: 0.7;
    cursor: pointer;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.site-footer-note-btn:hover,
.site-footer-note-btn:focus-visible {
    color: var(--accent-color);
    opacity: 1;
    outline: none;
}

.site-footer-heading {
    margin: 0 0 8px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.site-footer-text {
    margin: 0 0 6px;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

.site-footer-contact-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.site-footer-link {
    display: block;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer-link--emph {
    font-weight: 600;
    color: var(--text-primary);
}

.site-footer-link:hover,
.site-footer-link:focus-visible {
    color: var(--accent-color);
    outline: none;
}

.site-footer-docs {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.site-footer-doc-link {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    font: inherit;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s ease;
}

.site-footer-doc-link:hover,
.site-footer-doc-link:focus-visible {
    color: var(--text-primary);
    outline: none;
}

@media (max-width: 720px) {
    .site-footer {
        padding: 6px 10px 0;
    }

    body.bottom-nav-active .site-footer {
        padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px));
    }

    .site-footer-inner {
        gap: 10px;
        padding: 12px 14px 10px;
        border-radius: 16px;
        background: rgba(10, 14, 28, 0.22);
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: none;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    html[data-theme="light"] .site-footer-inner {
        background: rgba(255, 255, 255, 0.58);
        border-color: rgba(255, 255, 255, 0.88);
        box-shadow: none;
    }

    .site-footer-meta {
        align-items: center;
        text-align: center;
        gap: 2px;
        padding-bottom: 8px;
    }

    .site-footer-note-btn {
        text-align: center;
        font-size: 0.62rem;
        line-height: 1.3;
        max-width: 280px;
        margin: 0 auto;
    }

    .site-footer-copyright {
        font-size: 0.7rem;
    }

    .site-footer-columns {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        gap: 10px 14px;
        align-items: start;
    }

    .site-footer-text {
        display: block;
        margin-bottom: 4px;
        font-size: 0.64rem;
    }

    .site-footer-heading {
        margin-bottom: 5px;
        font-size: 0.62rem;
        letter-spacing: 0.04em;
    }

    .site-footer-contact-links {
        gap: 1px;
    }

    .site-footer-link,
    .site-footer-link--emph {
        font-size: 0.68rem;
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
        word-break: break-word;
    }

    .site-footer-docs {
        gap: 3px;
    }

    .site-footer-doc-link {
        font-size: 0.66rem;
        line-height: 1.28;
        opacity: 0.9;
    }
}

#app:has(#auth-page.active) ~ .site-footer {
    padding-top: 4px;
}

#app:has(#auth-page.active) ~ .site-footer .site-footer-inner {
    padding: 10px 12px 8px;
    gap: 8px;
}

#app:has(#auth-page.active) ~ .site-footer .site-footer-meta {
    padding-bottom: 6px;
}

@media (min-width: 721px) {
    .site-footer-columns {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    }

    .site-footer-link--emph {
        text-transform: lowercase;
    }
}

.cookie-consent-banner {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 22px;
    width: calc(100% - 30px);
    max-width: 770px;
    z-index: 1200;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--separator-color);
    background: rgba(10, 14, 28, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.cookie-consent-text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text-primary);
}
.cookie-consent-actions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.cookie-consent-btn {
    border-radius: 10px;
    padding: 8px 12px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}
.cookie-consent-btn.secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.15);
}
.cookie-consent-btn.primary {
    background: rgba(0, 240, 255, 0.15);
    color: var(--accent-color);
    border-color: rgba(0, 240, 255, 0.35);
}
html[data-theme="light"] .cookie-consent-banner {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(0, 0, 0, 0.09);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .cookie-consent-btn.secondary {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .cookie-consent-btn.primary {
    background: rgba(0, 85, 255, 0.1);
    border-color: rgba(0, 85, 255, 0.2);
}
@media (max-width: 768px) {
    .cookie-consent-banner {
        bottom: calc(96px + env(safe-area-inset-bottom, 0px));
        padding: 12px;
    }
    .cookie-consent-text {
        font-size: 0.83rem;
    }
    .cookie-consent-actions {
        justify-content: stretch;
    }
    .cookie-consent-btn {
        flex: 1;
    }
}

.home-promo-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    z-index: 1150;
    max-width: 520px;
    margin: 0 auto;
    padding: 14px 16px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(160deg, rgba(34, 36, 44, 0.97) 0%, rgba(22, 24, 30, 0.98) 100%);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateY(calc(100% + 28px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.75s ease, visibility 0.75s ease;
}

.home-promo-banner.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.home-promo-banner-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.home-promo-banner-close:hover {
    background: rgba(255, 255, 255, 0.14);
}

.home-promo-banner-inner {
    padding-right: 28px;
}

.home-promo-banner-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.home-promo-banner-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
    object-fit: cover;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.home-promo-banner-title {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

.home-promo-banner-body {
    font-size: 0.88rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
}

.home-promo-banner-body p {
    margin: 0 0 8px;
}

.home-promo-banner-body ol,
.home-promo-banner-body ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.home-promo-banner-body li {
    margin: 0 0 6px;
}

.home-promo-steps {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.home-promo-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 34px;
}

.home-promo-step-text {
    flex: 1;
    min-width: 0;
}

.home-promo-step-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.home-promo-step-icon--share {
    color: #0a84ff;
    pointer-events: none;
}

.home-promo-step-icon--add {
    color: rgba(255, 255, 255, 0.72);
    pointer-events: none;
}

html[data-theme="light"] .home-promo-step-icon--add {
    color: rgba(55, 65, 81, 0.72);
}

html[data-theme="light"] .home-promo-banner {
    border-color: rgba(0, 0, 0, 0.08);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 247, 252, 0.98) 100%);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .home-promo-banner-title {
    color: #111827;
}

html[data-theme="light"] .home-promo-banner-body {
    color: #4b5563;
}

html[data-theme="light"] .home-promo-banner-close {
    background: rgba(0, 0, 0, 0.06);
    color: #374151;
}

@media (max-width: 768px) {
    .home-promo-banner {
        left: 10px;
        right: 10px;
        bottom: calc(96px + env(safe-area-inset-bottom, 0px));
        padding: 12px 14px 14px;
    }
    .home-promo-banner-title {
        font-size: 0.95rem;
    }
    .home-promo-banner-body {
        font-size: 0.82rem;
    }
}

.nav-btn {
    background: transparent; 
    border: none; 
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    gap: 6px; 
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    padding: 8px 4px;
    flex: 1; 
    transition: all 0.3s ease;
    outline: none;
    border-radius: 25px; /* Делаем саму плашку кнопки круглой */
    margin: 0 2px; /* Добавляем микро-отступ между соседними кнопками */
    position: relative;
}

.nav-icon { 
    font-size: 1.5rem;
    transition: all 0.3s ease;
    width: 1.35em;
    height: 1.35em;
}
.nav-icon.ui-icon,
.nav-icon .ui-icon-svg {
    width: 1.35em;
    height: 1.35em;
}
.nav-label {
    font-size: 0.65rem; 
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 1.1;
}

.nav-btn:hover { color: var(--text-primary); }

.nav-btn[hidden] {
    display: none !important;
}

.nav-btn.active {
    color: var(--accent-color);
    background: rgba(0, 240, 255, 0.12); /* Светящаяся подложка под активной кнопкой */
    box-shadow: inset 0 0 12px rgba(0, 240, 255, 0.05);
}
.nav-btn.active .nav-icon {
    filter: drop-shadow(0 0 8px var(--accent-glow));
    transform: scale(1.2) translateY(-4px);
}
.nav-btn.active .nav-label { text-shadow: 0 0 8px var(--accent-glow); }

html[data-theme="light"] .top-toolbar-inner {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 10px 36px rgba(15, 23, 42, 0.07);
}
html[data-theme="light"] .toolbar-btn {
    background: rgba(18, 20, 26, 0.035);
    border: 1px solid rgba(18, 20, 26, 0.05);
}
html[data-theme="light"] .nav-btn.active { 
    background: rgba(26, 86, 219, 0.09); 
    box-shadow: none;
}
html[data-theme="light"] .nav-btn.active .nav-label {
    text-shadow: none;
}

/* ==================== GLASSMORPHISM КАРТОЧКИ ==================== */
.info-card, .account-card, .notify-card, .email-input-section, .stat-card, .referral-link-section {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 240, 255, 0.15);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(0, 240, 255, 0.05);
    padding: 1.2rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

html[data-theme="light"] .info-card, 
html[data-theme="light"] .account-card, 
html[data-theme="light"] .notify-card, 
html[data-theme="light"] .stat-card, 
html[data-theme="light"] .plan-card,
html[data-theme="light"] .auth-card {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 14px 32px rgba(15, 23, 42, 0.07),
        0 32px 64px rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.88);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--separator-color);
}

.project-name {
    font-family: 'Oswald', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 10px var(--accent-glow);
}

h2, h3 { font-family: 'Oswald', sans-serif; letter-spacing: 1px; text-shadow: 0 0 8px rgba(0, 240, 255, 0.3); }

html[data-theme="light"] .auth-text-logo,
html[data-theme="light"] .project-name,
html[data-theme="light"] h2, 
html[data-theme="light"] h3 {
    color: #0f172a;
    text-shadow: none;
}

/* ==================== ВНУТРЕННИЕ ЭЛЕМЕНТЫ КАРТОЧЕК ==================== */
.detail-label { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.detail-value { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }

.detail-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(0, 240, 255, 0.1);
    border-radius: 14px;
}
.detail-item:last-child { margin-bottom: 0; }
.detail-emoji { font-size: 1.6rem; margin-right: 15px; filter: drop-shadow(0 0 5px rgba(255,255,255,0.3)); }
.detail-info { display: flex; flex-direction: column; gap: 4px; }

html[data-theme="light"] .detail-item,
html[data-theme="light"] .account-inline-form {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(18, 20, 26, 0.05);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

/* Элементы списков */
.list-group {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    border: 1px solid var(--separator-color);
    overflow: hidden;
}
.list-item {
    display: flex; align-items: center; padding: 1rem;
    color: var(--text-primary); border-bottom: 1px solid var(--separator-color);
    transition: background 0.3s; cursor: pointer;
}
.list-item:hover { background: rgba(0, 240, 255, 0.1); }
.list-item:last-child { border-bottom: none; }

/* Статусы */
.status-badge.ok {
    background: rgba(0, 255, 136, 0.1); color: var(--green-color);
    border: 1px solid var(--green-color); box-shadow: 0 0 10px rgba(0, 255, 136, 0.2);
    padding: 2px 8px; border-radius: 8px; font-size: 0.8rem;
}
.status-badge.bad {
    background: rgba(255, 0, 85, 0.1); color: var(--red-color);
    border: 1px solid var(--red-color); box-shadow: 0 0 10px rgba(255, 0, 85, 0.2);
    padding: 2px 8px; border-radius: 8px; font-size: 0.8rem;
}
.sub-remaining-pill {
    background: rgba(0, 240, 255, 0.1); color: var(--accent-color);
    border: 1px solid var(--accent-color); box-shadow: 0 0 10px var(--accent-glow);
    padding: 2px 8px; border-radius: 8px; font-size: 0.8rem;
}
.sub-period {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}
.sub-period-date {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.86rem;
}
.traffic-reset-line,
.traffic-stats-reset-line {
    display: block;
    width: 100%;
    margin-top: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}

.account-summary-card .traffic-reset-line {
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
    line-height: 1.35;
    opacity: 0.9;
}

html[data-theme="light"] .account-summary-card .traffic-reset-line {
    color: #64748b;
    opacity: 1;
}

html[data-theme="light"] .traffic-reset-line,
html[data-theme="light"] .traffic-stats-reset-line {
    color: #64748b;
}

.traffic-usage-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.traffic-usage-text {
    font-size: 0.82rem;
    color: var(--text-primary);
}
.traffic-usage-text strong {
    color: var(--accent-color);
}
.traffic-usage-bar {
    display: block;
    width: min(180px, 100%);
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    background: rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
}
.traffic-usage-bar-fill {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background-image: linear-gradient(
        90deg,
        #00cf7f 0%,
        #00b96f 50%,
        #ffb347 70%,
        #ff7f2a 90%,
        #ff2f2f 100%
    );
    background-size: var(--traffic-bg-size, 100%) 100%;
    background-repeat: no-repeat;
    box-shadow: 0 0 8px rgba(0, 207, 127, 0.35);
    transition: width 0.25s ease;
}
.traffic-buy-btn {
    margin-top: 4px;
    background: linear-gradient(135deg, #0055ff, #00f0ff);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.traffic-buy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.38);
}
html[data-theme="light"] .traffic-usage-bar {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .traffic-usage-bar-fill {
    box-shadow: 0 0 8px rgba(0, 85, 255, 0.16);
}
html[data-theme="light"] .traffic-buy-btn {
    box-shadow: 0 0 10px rgba(0, 85, 255, 0.22);
}
html[data-theme="light"] .traffic-usage-text strong {
    color: #0055ff;
}

/* ==================== КНОПКИ И ИНПУТЫ ==================== */
/* ==================== ОСНОВНЫЕ КНОПКИ ДЕЙСТВИЙ (3D ЭФФЕКТ) ==================== */
.confirm-btn, .copy-btn, .stats-btn {
    position: relative;
    background: linear-gradient(135deg, #0055ff, #00f0ff);
    color: #fff; 
    border: none !important; 
    border-bottom: 4px solid #003bb3 !important; /* Темно-синяя 3D-подошва */
    border-radius: 14px;
    padding: 16px 24px; 
    font-family: 'Oswald', sans-serif;
    font-size: 16px; 
    letter-spacing: 1px; 
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    cursor: pointer;
    overflow: hidden;
}

/* При наведении: кнопка всплывает и светится ярче */
.confirm-btn:hover, .copy-btn:hover, .stats-btn:hover {
    transform: translateY(-2px) scale(1.02); 
    box-shadow: 0 8px 25px rgba(0, 240, 255, 0.5);
    filter: brightness(1.05);
}

/* При клике: кнопка физически проваливается вниз */
.confirm-btn:active, .copy-btn:active, .stats-btn:active {
    transform: translateY(2px) scale(0.98);
    box-shadow: 0 2px 10px rgba(0, 240, 255, 0.3);
}

/* ==================== ГЛАВНАЯ КНОПКА ОПЛАТЫ (3D ЭФФЕКТ) ==================== */
.pay-btn {
    position: relative;
    background: linear-gradient(135deg, #00b09b, #96c93d);
    color: #fff;
    border: none !important;
    border-bottom: 4px solid #008475 !important; 
    border-radius: 16px; 
    padding: 16px 24px; 
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.2rem; /* Добавили крупный размер */
	font-weight: 700;
    letter-spacing: 0,5px; 
    text-transform: uppercase; /* Сделали большими буквами для массивности */
    cursor: pointer;
    width: 100%; 
    max-width: 350px; 
    display: block; 
    margin: 0 auto;
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* При наведении: кнопка всплывает и светится ярче */
.pay-btn:hover { 
    transform: translateY(-2px) scale(1.02); 
    box-shadow: 0 8px 25px rgba(0, 255, 136, 0.5);
    filter: brightness(1.05);
}

/* При клике: эффект физического нажатия */
.pay-btn:active {
    transform: translateY(2px) scale(0.98);
    box-shadow: 0 2px 10px rgba(0, 255, 136, 0.3);
}

@media (max-width: 768px) {
    #pay-button {
        scroll-margin-bottom: calc(124px + env(safe-area-inset-bottom, 0px));
    }
}

.email-input, .compact-input, .ticket-textarea, .referral-link-input, .compact-select {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid var(--separator-color) !important;
    color: var(--text-primary) !important;
    border-radius: 12px; padding: 14px; transition: all 0.3s ease;
}
.email-input:focus, .compact-input:focus, .compact-select:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 15px var(--accent-glow) !important; outline: none;
}

html[data-theme="light"] .email-input, 
html[data-theme="light"] .compact-input, 
html[data-theme="light"] .ticket-textarea, 
html[data-theme="light"] .referral-link-input,
html[data-theme="light"] .compact-select {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: var(--text-primary) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}
html[data-theme="light"] .email-input:focus, 
html[data-theme="light"] .compact-input:focus,
html[data-theme="light"] .compact-select:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(0, 85, 255, 0.15) !important; outline: none;
}

.compact-select option { background-color: #060913; color: #ffffff; font-family: 'Inter', sans-serif; font-weight: 500; }
html[data-theme="light"] .compact-select option { background: #ffffff; color: #1e293b; }

/* ==================== АВТОРИЗАЦИЯ ==================== */
#auth-page.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 20px 16px max(20px, env(safe-area-inset-bottom, 12px));
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

.auth-shell {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

.auth-shell-glow {
    position: absolute;
    inset: -18% -30% auto;
    height: 70%;
    pointer-events: none;
    background:
        radial-gradient(circle at 30% 40%, rgba(37, 99, 235, 0.16), transparent 58%),
        radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.12), transparent 50%);
    filter: blur(2px);
}

html:not([data-theme="light"]) .auth-shell-glow {
    background:
        radial-gradient(circle at 30% 40%, rgba(0, 240, 255, 0.14), transparent 58%),
        radial-gradient(circle at 80% 20%, rgba(52, 211, 153, 0.1), transparent 50%);
}

.auth-brand {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.auth-logo {
    display: block;
    height: 52px;
    width: auto;
    max-width: min(280px, 72vw);
    object-fit: contain;
    filter: drop-shadow(0 10px 24px rgba(15, 23, 42, 0.12));
}

html:not([data-theme="light"]) .auth-logo {
    filter: drop-shadow(0 10px 28px rgba(0, 240, 255, 0.18));
}

.auth-container { display: flex; flex-direction: column; align-items: center; width: 100%; }

.auth-text-logo {
    display: none;
}

.auth-card {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--separator-color);
    box-shadow: 0 0 40px rgba(0,0,0,0.8), inset 0 0 20px rgba(0, 240, 255, 0.05);
    border-radius: 24px;
    padding: 30px 24px 24px;
    width: 100%;
    max-width: 420px;
}

@media (max-width: 480px) {
    .auth-logo {
        height: 42px;
        margin-bottom: 0;
    }
    .auth-brand { margin-bottom: 14px; }
    .auth-segmented { margin-bottom: 14px; }
    .auth-card {
        padding: 20px 16px 18px;
        border-radius: 20px;
    }
    .auth-card .input-group { margin-bottom: 12px; }
    .segmented-control .control-label { padding: 8px 16px; font-size: 0.85rem; }
}



.auth-card::before {
    content: '';
    position: absolute;
    inset: -40% auto auto -30%;
    width: 80%;
    height: 90%;
    pointer-events: none;
    background:
        radial-gradient(circle at 30% 40%, rgba(37, 99, 235, 0.12), transparent 58%),
        radial-gradient(circle at 80% 10%, rgba(16, 185, 129, 0.08), transparent 50%);
}

html:not([data-theme="light"]) .auth-card::before {
    background:
        radial-gradient(circle at 30% 40%, rgba(0, 240, 255, 0.08), transparent 58%),
        radial-gradient(circle at 80% 10%, rgba(52, 211, 153, 0.06), transparent 50%);
}


.auth-tg-channel-gate {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 4px;
}

.auth-tg-channel-gate[hidden] {
    display: none !important;
}

.telegram-mini-app.tg-channel-gate-active #auth-card-details {
    display: none !important;
}

.auth-tg-channel-gate__text {
    margin: 0;
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
    line-height: 1.55;
    font-size: 0.92rem;
    text-align: center;
}

.auth-tg-channel-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

.auth-tg-channel-btn {
    width: 100%;
}

.auth-tg-channel-check-btn {
    appearance: none;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 14px;
    border: 1px solid rgba(34, 197, 94, 0.45);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(16, 185, 129, 0.08));
    color: #bbf7d0;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.auth-tg-channel-check-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(74, 222, 128, 0.75);
    box-shadow: 0 10px 28px rgba(34, 197, 94, 0.18);
}

.auth-tg-channel-check-btn:active {
    transform: translateY(0);
}

.auth-tg-channel-check-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.25);
    color: #86efac;
    font-size: 0.82rem;
    font-weight: 800;
}

html[data-theme="light"] .auth-tg-channel-gate__text {
    color: rgba(20, 24, 32, 0.72);
}

html[data-theme="light"] .auth-tg-channel-check-btn {
    color: #166534;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.14), rgba(255, 255, 255, 0.9));
    border-color: rgba(34, 197, 94, 0.35);
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.1);
}

html[data-theme="light"] .auth-tg-channel-check-btn__icon {
    background: rgba(34, 197, 94, 0.16);
    color: #15803d;
}

.telegram-mini-app #auth-password-group.smooth-hidden,
.telegram-mini-app #auth-password2-group.smooth-hidden {
    max-height: 0 !important;
}

.telegram-mini-app #auth-password2-group.tg-auth-reveal-delay {
    transition-delay: 0.14s;
}

.auth-card-loading {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    background: rgba(8, 12, 18, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

html[data-theme="light"] .auth-card-loading {
    background: rgba(255, 255, 255, 0.82);
}

.auth-card-loading.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.auth-card-loading__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 20px;
    text-align: center;
}

.auth-card-loading__spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid rgba(0, 240, 255, 0.2);
    border-top-color: var(--accent-color);
    animation: authSpin 0.85s linear infinite;
}

html[data-theme="light"] .auth-card-loading__spinner {
    border-color: rgba(0, 85, 255, 0.15);
    border-top-color: var(--accent-color);
}

.auth-card-loading__text {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

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

/* —— Telegram bootstrap splash (slow network / auto-auth) —— */
.tg-bootstrap-splash {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
    background:
        radial-gradient(ellipse 90% 60% at 50% 18%, rgba(42, 171, 238, 0.18), transparent 55%),
        radial-gradient(ellipse 70% 50% at 80% 80%, rgba(37, 99, 235, 0.12), transparent 50%),
        radial-gradient(ellipse 60% 40% at 15% 70%, rgba(16, 185, 129, 0.1), transparent 45%),
        var(--bg-color);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.42s ease, visibility 0.42s ease;
}

.tg-bootstrap-splash[hidden] {
    display: none !important;
}

.tg-bootstrap-splash.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.tg-bootstrap-splash.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

html.tg-bootstrapping .auth-shell,
html.tg-bootstrapping .top-toolbar {
    opacity: 0;
    pointer-events: none;
}

html.tg-bootstrapping .tg-bootstrap-splash:not([hidden]) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.tg-bootstrap-splash__glow {
    position: absolute;
    inset: 10% 5% auto;
    height: 55%;
    pointer-events: none;
    background:
        radial-gradient(circle at 40% 50%, rgba(42, 171, 238, 0.22), transparent 55%),
        radial-gradient(circle at 70% 30%, rgba(0, 240, 255, 0.12), transparent 50%);
    filter: blur(8px);
    animation: tgSplashGlowDrift 6s ease-in-out infinite alternate;
}

.tg-bootstrap-splash__orbs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.tg-bootstrap-splash__float {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
    opacity: 0.55;
    animation: tgSplashFloat 7s ease-in-out infinite;
}

.tg-bootstrap-splash__float--1 {
    width: 14px;
    height: 14px;
    left: 18%;
    top: 28%;
    background: rgba(42, 171, 238, 0.55);
    animation-delay: 0s;
}

.tg-bootstrap-splash__float--2 {
    width: 10px;
    height: 10px;
    right: 20%;
    top: 36%;
    background: rgba(37, 99, 235, 0.45);
    animation-delay: -2.2s;
}

.tg-bootstrap-splash__float--3 {
    width: 12px;
    height: 12px;
    left: 55%;
    bottom: 22%;
    background: rgba(16, 185, 129, 0.4);
    animation-delay: -4s;
}

.tg-bootstrap-splash__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(100%, 340px);
    padding: 36px 28px 32px;
    border-radius: 28px;
    background: var(--card-bg);
    border: 1px solid var(--separator-color);
    box-shadow:
        0 24px 64px rgba(15, 23, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    text-align: center;
    animation: tgSplashPanelIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

html:not([data-theme="light"]) .tg-bootstrap-splash__panel {
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.45),
        inset 0 0 24px rgba(0, 240, 255, 0.04);
}

.tg-bootstrap-splash__orb {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 22px;
}

.tg-bootstrap-splash__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
}

.tg-bootstrap-splash__ring--outer {
    border-color: rgba(42, 171, 238, 0.18);
    animation: tgSplashRingPulse 2.4s ease-in-out infinite;
}

.tg-bootstrap-splash__ring--mid {
    inset: 14px;
    border-color: rgba(37, 99, 235, 0.28);
    border-top-color: var(--tg-blue);
    border-right-color: rgba(42, 171, 238, 0.15);
    animation: tgSplashSpin 2.8s linear infinite;
}

.tg-bootstrap-splash__ring--inner {
    inset: 28px;
    border-color: rgba(16, 185, 129, 0.2);
    border-bottom-color: rgba(16, 185, 129, 0.75);
    animation: tgSplashSpin 1.9s linear infinite reverse;
}

.tg-bootstrap-splash__core {
    position: absolute;
    inset: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(42, 171, 238, 0.95), rgba(37, 99, 235, 0.88));
    box-shadow:
        0 8px 28px rgba(42, 171, 238, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    animation: tgSplashCorePulse 2.2s ease-in-out infinite;
}

.tg-bootstrap-splash__core-glow {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(42, 171, 238, 0.35), transparent 70%);
    animation: tgSplashCorePulse 2.2s ease-in-out infinite;
}

.tg-bootstrap-splash__shield {
    position: relative;
    z-index: 1;
    width: 22px;
    height: 26px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75));
    clip-path: polygon(50% 0%, 100% 18%, 100% 58%, 50% 100%, 0% 58%, 0% 18%);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
}

.tg-bootstrap-splash__logo {
    display: block;
    height: 36px;
    width: auto;
    max-width: min(220px, 70vw);
    object-fit: contain;
    margin-bottom: 16px;
    filter: drop-shadow(0 8px 18px rgba(15, 23, 42, 0.1));
}

html:not([data-theme="light"]) .tg-bootstrap-splash__logo {
    filter: drop-shadow(0 8px 20px rgba(0, 240, 255, 0.16));
}

.tg-bootstrap-splash__text {
    margin: 0;
    min-height: 1.4em;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    transition: opacity 0.25s ease;
}

.tg-bootstrap-splash__text.is-updating {
    opacity: 0.35;
}

.tg-bootstrap-splash__dots {
    display: flex;
    gap: 7px;
    margin-top: 18px;
}

.tg-bootstrap-splash__dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tg-blue);
    opacity: 0.35;
    animation: tgSplashDot 1.2s ease-in-out infinite;
}

.tg-bootstrap-splash__dots span:nth-child(2) { animation-delay: 0.18s; }
.tg-bootstrap-splash__dots span:nth-child(3) { animation-delay: 0.36s; }

html[data-theme="light"] .tg-bootstrap-splash {
    background:
        radial-gradient(ellipse 90% 60% at 50% 18%, rgba(42, 171, 238, 0.2), transparent 55%),
        radial-gradient(ellipse 70% 50% at 82% 78%, rgba(37, 99, 235, 0.1), transparent 50%),
        radial-gradient(ellipse 60% 40% at 12% 72%, rgba(255, 255, 255, 0.55), transparent 45%),
        var(--bg-color);
}

html[data-theme="light"] .tg-bootstrap-splash__panel {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(255, 255, 255, 0.85);
}

@keyframes tgSplashPanelIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

@keyframes tgSplashRingPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.06); opacity: 1; }
}

@keyframes tgSplashCorePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes tgSplashDot {
    0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-4px); }
}

@keyframes tgSplashFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-18px); }
}

@keyframes tgSplashGlowDrift {
    from { transform: translateY(0) scale(1); }
    to { transform: translateY(12px) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
    .tg-bootstrap-splash__ring--mid,
    .tg-bootstrap-splash__ring--inner,
    .tg-bootstrap-splash__ring--outer,
    .tg-bootstrap-splash__core,
    .tg-bootstrap-splash__core-glow,
    .tg-bootstrap-splash__dots span,
    .tg-bootstrap-splash__float,
    .tg-bootstrap-splash__glow,
    .tg-bootstrap-splash__panel {
        animation: none !important;
    }
}

.auth-card.is-loading .card-details,
.auth-card.is-loading .card-header {
    pointer-events: none;
    user-select: none;
}

.auth-submit .auth-submit-spinner {
    display: none;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: middle;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: authSpin 0.75s linear infinite;
}

.auth-submit.is-loading {
    pointer-events: none;
    opacity: 0.92;
}

.auth-submit.is-loading .auth-submit-spinner {
    display: inline-block;
}

.auth-card .card-header {
    position: relative;
    z-index: 1;
    justify-content: center;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 20px;
}
.auth-card .card-header .project-name {
    -webkit-user-select: none;
    user-select: none;
    caret-color: transparent;
    font-size: 1.35rem;
    letter-spacing: 0.08em;
}
.auth-card .card-details {
    position: relative;
    z-index: 1;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0;
}
.auth-card .input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 14px;
}
.auth-card .detail-label {
    margin-bottom: 8px;
    text-align: center;
    width: 100%;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
}
.auth-card .email-input {
    width: 100%;
    max-width: 340px;
    text-align: center;
    font-size: 16px;
    line-height: 1.35;
    border-radius: 14px;
    padding: 15px 16px;
    box-sizing: border-box;
}

.auth-captcha-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 340px;
}
.auth-captcha-row .email-input {
    flex: 1;
    max-width: none;
    min-width: 0;
}
.auth-captcha-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    min-width: 52px;
    border-radius: 14px;
    border: 1px solid var(--separator-color);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.auth-captcha-refresh:hover {
    transform: translateY(-1px);
    border-color: var(--accent-color);
}
.auth-captcha-refresh.is-loading {
    pointer-events: none;
    opacity: 0.7;
}
.auth-captcha-refresh.is-loading .ui-icon,
.auth-captcha-refresh.is-loading .ui-icon-svg {
    animation: authSpin 0.85s linear infinite;
}
.auth-captcha-refresh .ui-icon,
.auth-captcha-refresh .ui-icon-svg {
    width: 1.15rem;
    height: 1.15rem;
}
html[data-theme="light"] .auth-captcha-refresh {
    background: rgba(15, 23, 42, 0.03);
}
.auth-captcha-question {
    margin-top: 10px;
    text-align: center;
    width: 100%;
    max-width: 340px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Password: input centered, actions as a side panel */
.auth-password-field {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 340px;
    border-radius: 14px;
    border: 1px solid var(--separator-color);
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

html[data-theme="light"] .auth-password-field {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.auth-password-field:focus-within {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 15px var(--accent-glow) !important;
}

html[data-theme="light"] .auth-password-field:focus-within {
    box-shadow: 0 0 0 3px rgba(0, 85, 255, 0.15) !important;
}

.auth-password-field > .email-input,
.auth-password-field > .compact-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 15px 14px 15px 18px;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center;
    box-sizing: border-box;
}

.auth-password-field > .email-input:focus,
.auth-password-field > .compact-input:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none;
}

.auth-password-field > .input-field-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex-shrink: 0;
    padding: 4px 6px 4px 4px;
    border-left: 1px solid var(--separator-color);
    background: rgba(255, 255, 255, 0.03);
    z-index: 2;
}

/* Hide side panel when all action buttons are hidden */
.auth-password-field > .input-field-actions:not(:has(> :not([hidden]))) {
    display: none;
}

html[data-theme="light"] .auth-password-field > .input-field-actions {
    background: rgba(15, 23, 42, 0.03);
    border-left-color: rgba(0, 0, 0, 0.08);
}

.input-clear-btn {
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease, background 0.15s ease;
}

.input-clear-btn[hidden] {
    display: none !important;
}

.input-clear-btn:hover {
    color: var(--accent-color);
    background: rgba(0, 240, 255, 0.08);
}

.input-clear-btn:focus {
    outline: none;
}

.input-clear-btn:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.auth-forgot-inline {
    width: 100%;
    max-width: 340px;
    margin-top: 10px;
    text-align: center;
}

.auth-forgot-inline .auth-link {
    font-size: 0.88rem;
    font-weight: 500;
}

.auth-card .detail-label {
    display: none;
}

.auth-password-toggle {
    position: static;
    transform: none;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease, background 0.15s ease;
}

.auth-password-toggle:hover {
    color: var(--accent-color);
    background: rgba(0, 240, 255, 0.08);
}

html[data-theme="light"] .auth-password-toggle:hover {
    background: rgba(0, 85, 255, 0.08);
}

.auth-password-toggle:focus {
    outline: none;
}

.auth-password-toggle:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.auth-password-toggle.is-visible {
    color: var(--accent-color);
}

.auth-password-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.auth-password-toggle-icon[hidden] {
    display: none !important;
}

.auth-password-field input[type="password"]::-ms-reveal,
.auth-password-field input[type="password"]::-ms-clear,
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}
.auth-card .auth-submit {
    width: 100%;
    max-width: 340px;
    margin-top: 10px;
    padding: 16px 22px;
    text-align: center;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    caret-color: transparent;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    border-bottom: none !important;
    border-radius: 14px;
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 48%, #0ea5e9 100%);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.28);
}
html:not([data-theme="light"]) .auth-card .auth-submit {
    background: linear-gradient(135deg, #00e0ff 0%, #22d3a6 100%);
    color: #041018;
    box-shadow: 0 12px 26px rgba(0, 224, 255, 0.24);
}
.auth-card .auth-submit:hover {
    filter: brightness(1.03);
    transform: translateY(-1px);
}
/* Текст кнопки: один <span>, без div — иначе на iOS Safari появляется курсор ввода в «подписи» кнопки */
.auth-card .auth-submit .pay-btn-main {
    display: inline-block;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    caret-color: transparent;
    -webkit-user-modify: read-only;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: none;
}
.auth-card .auth-submit:focus {
    outline: none;
}
.auth-card .auth-submit:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
}
.auth-footer {
    margin-top: 16px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    text-align: center;
    max-width: 90vw;
    -webkit-user-select: none;
    user-select: none;
}
.auth-footer .auth-link {
    touch-action: manipulation;
    -webkit-touch-callout: none;
}

.auth-segmented {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 18px;
}
.auth-segmented .segmented-control {
    width: 100%;
    max-width: 340px;
    border-radius: 999px;
    padding: 4px;
}
.auth-segmented .segmented-control .control-label {
    flex: 1;
    text-align: center;
    border-radius: 999px;
    padding: 10px 18px;
}
.segmented-control {
    display: flex; background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--separator-color); border-radius: 12px; padding: 4px; position: relative;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
/* Визуально скрытые radio: display:none на iOS/WebKit иногда даёт «текстовый» курсор на label */
.segmented-control input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.segmented-control .control-label {
    padding: 10px 24px; cursor: pointer; color: var(--text-secondary);
    border-radius: 8px; font-size: 0.9rem; font-weight: 600; transition: all 0.3s ease; z-index: 1;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    caret-color: transparent;
}
.segmented-control input[type="radio"]:checked + .control-label {
    background: var(--accent-color); color: #000; box-shadow: 0 0 15px var(--accent-glow);
}
html[data-theme="light"] .segmented-control { background: rgba(0, 0, 0, 0.05); border: none; }
html[data-theme="light"] .segmented-control input[type="radio"]:checked + .control-label {
    background: #ffffff; color: var(--accent-color); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ==================== АККАУНТ И УВЕДОМЛЕНИЯ ==================== */
.account-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; }
.account-row-left { display: flex; flex-direction: column; gap: 6px; }
.account-label { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.account-value { font-size: 1rem; font-weight: 500; }
.account-value--mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
}
.account-divider { height: 1px; background: var(--separator-color); margin: 5px 0; }

.icon-btn {
    background: rgba(0, 240, 255, 0.1); border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: 10px; width: 36px; height: 36px; display: flex; align-items: center;
    justify-content: center; color: var(--accent-color); cursor: pointer; transition: all 0.3s ease;
}
.icon-btn:hover { background: rgba(0, 240, 255, 0.2); box-shadow: 0 0 10px var(--accent-glow); }
.icon-pencil.ui-icon .ui-icon-svg {
    width: 1.05rem;
    height: 1.05rem;
}

.account-inline-form {
    display: flex; flex-direction: column; gap: 12px; padding: 15px;
    background: rgba(0, 0, 0, 0.3); border-radius: 14px; margin-top: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.account-actions { display: flex; gap: 10px; }
.account-actions .confirm-btn { flex: 1; padding: 12px; font-size: 14px; }

.secondary-btn { background: rgba(255, 255, 255, 0.1) !important; box-shadow: none !important; color: var(--text-primary) !important; }
.secondary-btn:hover { background: rgba(255, 255, 255, 0.2) !important; }

.switch { position: relative; display: inline-block; width: 54px; height: 30px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0,0,0,0.5); transition: .4s; border-radius: 34px; border: 1px solid var(--separator-color);
}
.switch .slider:before {
    position: absolute; content: ""; height: 22px; width: 22px; left: 3px; bottom: 3px;
    background-color: #fff; transition: .4s; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.switch input:checked + .slider { background-color: var(--green-color); border-color: var(--green-color); box-shadow: 0 0 15px rgba(0, 255, 136, 0.3); }
.switch input:checked + .slider:before { transform: translateX(24px); }

/* АНИМИРОВАННЫЕ КНОПКИ ДНЕЙ */
.days-pills-container { display: flex; gap: 10px; width: 100%; }
.days-pills-container input[type="radio"] { display: none; }
.day-pill {
    flex: 1 1 0px; display: flex; justify-content: center; align-items: center; text-align: center;
    padding: 12px 4px; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--separator-color);
    border-radius: 12px; color: var(--text-secondary); font-size: 0.85rem; font-weight: 600;
    cursor: pointer; transition: all 0.3s ease; white-space: nowrap;
}
.day-pill:hover { background: rgba(0, 240, 255, 0.05); }
.days-pills-container input[type="radio"]:checked + .day-pill {
    background: rgba(0, 240, 255, 0.15); border-color: var(--accent-color);
    color: var(--accent-color); box-shadow: 0 0 15px var(--accent-glow); transform: translateY(-2px);
}
html[data-theme="light"] .day-pill { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.1); color: #64748b; }
html[data-theme="light"] .days-pills-container input[type="radio"]:checked + .day-pill {
    background: #f0f7ff; border-color: var(--accent-color); color: var(--accent-color); box-shadow: 0 2px 8px rgba(0, 85, 255, 0.2);
}

/* ==================== СТРАНИЦА ОПЛАТЫ (Тарифы) - ПРЕМИУМ ДИЗАЙН ==================== */
.payment-plans { display: flex; flex-direction: column; gap: 12px; align-items: stretch; width: 100%; }
.payment-plans h2 { text-align: center; font-size: 1.6rem; margin-bottom: 4px; font-weight: 700; }
.payment-plans .subtitle { text-align: center; color: var(--text-secondary); margin-bottom: 24px; font-size: 0.95rem; line-height: 1.45; max-width: 26rem; }

.payment-page-card {
    padding-top: 18px;
    padding-bottom: 22px;
}
.payment-page-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.payment-page-head-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent-color);
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.18);
}
.payment-page-head-icon .ui-icon-svg {
    width: 1.25rem;
    height: 1.25rem;
}
html[data-theme="light"] .payment-page-head-icon {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.16);
}
.payment-page-head-copy {
    min-width: 0;
    flex: 1;
}
.payment-page-title {
    margin: 0;
    font-size: clamp(0.98rem, 3.8vw, 1.28rem);
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.payment-page-subtitle {
    margin: 0;
}
.plan-card-icon {
    width: 2rem;
    height: 2rem;
    margin-bottom: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent-color);
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.16);
}
.plan-card-icon .ui-icon-svg {
    width: 1.05rem;
    height: 1.05rem;
}
.plan-card.popular .plan-card-icon {
    color: #fbbf24;
    background: rgba(255, 149, 0, 0.12);
    border-color: rgba(255, 149, 0, 0.24);
}
html[data-theme="light"] .plan-card-icon {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.14);
    color: #2563eb;
}

.payment-mode-tabs-wrap {
    display: flex;
    justify-content: center;
    margin: 0 auto 22px;
    width: 100%;
}
.payment-mode-tabs {
    display: inline-grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: min(100%, 460px);
    margin: 0 auto;
    padding: 6px;
    border-radius: 18px;
    border: 1px solid var(--separator-color);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%),
        rgba(0, 0, 0, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 24px rgba(15, 23, 42, 0.06);
    box-sizing: border-box;
}
html[data-theme="light"] .payment-mode-tabs {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 8px 22px rgba(15, 23, 42, 0.06);
}
.payment-mode-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 13px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 650;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.payment-mode-tab .ui-icon .ui-icon-svg {
    width: 1.02rem;
    height: 1.02rem;
}
.payment-mode-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}
.payment-mode-tab.is-active {
    color: var(--text-primary);
    border-color: rgba(0, 240, 255, 0.28);
    background: rgba(0, 240, 255, 0.12);
    box-shadow: 0 4px 14px rgba(0, 240, 255, 0.1);
}
html[data-theme="light"] .payment-mode-tab {
    background: transparent;
}
html[data-theme="light"] .payment-mode-tab:hover {
    background: rgba(37, 99, 235, 0.05);
}
html[data-theme="light"] .payment-mode-tab.is-active {
    background: #2563eb;
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
}
html[data-theme="light"] .payment-mode-tab.is-active .ui-icon {
    color: #fff;
}
.payment-mode-panel[hidden] {
    display: none !important;
}
.payment-extra-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 520px;
    margin: 0 auto;
}
.payment-extra-hero {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.payment-extra-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}
.payment-extra-hint {
    margin: 0;
    max-width: 28rem;
}
.payment-extra-label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-align: center;
}
.payment-extra-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.payment-extra-package-hint {
    margin-top: 10px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.35;
    max-width: 26rem;
}
.payment-extra-price {
    width: 100%;
    border-top: 1px solid var(--separator-color);
    padding-top: 16px;
}
.payment-extra-price .price-row {
    display: flex;
    justify-content: space-between;
    color: var(--text-secondary);
    margin-bottom: 10px;
}
.payment-extra-price .price-row.total {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-top: 8px;
}
.payment-extra-price .price-row.total span:last-child,
.payment-extra-price #page-total-price,
.payment-extra-price #traffic-total-price {
    color: var(--green-color);
}
.payment-extra-card .pay-btn {
    width: 100%;
    margin-top: 4px;
}

.plan-card {
    width: 100%;
    background: linear-gradient(160deg, rgba(16, 22, 45, 0.6) 0%, rgba(10, 14, 28, 0.8) 100%);
    border: 1px solid rgba(0, 240, 255, 0.15);
    border-radius: 24px; /* Более современные, мягкие скругления */
    padding: 24px 20px 20px; /* Увеличили отступы для "воздуха" */
    position: relative;
    overflow: hidden; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    gap: 16px; /* Увеличили расстояние между блоками */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.plan-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 240, 255, 0.4);
    box-shadow: 0 15px 40px rgba(0, 240, 255, 0.15), inset 0 0 20px rgba(0, 240, 255, 0.05);
}

.plan-card.selected {
    border-color: var(--accent-color);
    background: radial-gradient(circle at top right, rgba(0, 240, 255, 0.15) 0%, rgba(16, 22, 45, 0.8) 70%);
    box-shadow: 0 10px 30px rgba(0, 240, 255, 0.2), inset 0 0 0 1px var(--accent-color);
    transform: translateY(-4px);
}
/* Стили для популярного тарифа (POPULAR) */
.plan-card.popular {
    border-color: rgba(255, 149, 0, 0.4);
}

.plan-card.popular:hover,
.plan-card.popular.selected {
    border-color: #ff9500 !important;
    background: radial-gradient(circle at top right, rgba(255, 149, 0, 0.15) 0%, rgba(16, 22, 45, 0.8) 70%);
    box-shadow: 0 15px 40px rgba(255, 149, 0, 0.2), inset 0 0 0 1px #ff9500 !important;
}

.plan-card-head {
    display: flex;
    align-items: center; /* Центрируем по вертикали */
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px; /* Небольшой отступ от верхней плашки */
}

.plan-card-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.plan-card-titles {
    min-width: 0;
}

.plan-card-price-block {
    text-align: right;
}

.plan-card-top {
    display: none;
}
.plan-period-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.plan-period-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.7rem; /* Сделали заметнее */
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    letter-spacing: 0.02em;
}
.plan-period-tagline {
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.plan-breakdown {
    display: none !important; 
}
html[data-theme="light"] .plan-breakdown {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.08);
}
.pb-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px 10px;
    padding: 5px 0;
    font-size: 0.8rem;
}
.pb-row-base { padding-top: 0; }
.pb-label {
    color: var(--text-secondary);
    font-weight: 600;
    line-height: 1.3;
}
.pb-value {
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.pb-row-extra {
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    margin-top: 2px;
    padding-top: 6px;
}
html[data-theme="light"] .pb-row-extra {
    border-top-color: rgba(15, 23, 42, 0.08);
}
.pb-extra-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pb-extra-hint,
.pb-traffic-hint {
    font-size: 0.68rem;
    color: var(--text-secondary);
    line-height: 1.25;
    font-weight: 500;
    opacity: 0.9;
}
.pb-divider,
.pb-row-total,
.plan-description {
    display: none !important;
}
.pb-total-price {
    font-family: 'Oswald', sans-serif;
    font-size: 1.8rem; /* Увеличили цену, теперь это главный якорь */
    font-weight: 700;
    color: var(--green-color);
    line-height: 1;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.25);
}

.monthly-price {
    margin-top: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.plan-badge {
    position: absolute;
    top: 0;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ff3b30, #ff9500);
    color: #fff;
    padding: 6px 14px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 15px rgba(255, 59, 48, 0.4);
    text-transform: uppercase;
    z-index: 2;
}


.plan-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.plan-card-chips[hidden] {
    display: none !important;
}

.savings-badge {
    background: rgba(52, 199, 89, 0.12);
    color: #4ade80;
    padding: 5px 12px;
    border-radius: 8px; /* Сделали более строгими (не круглыми) */
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid rgba(74, 222, 128, 0.25);
    letter-spacing: 0.02em;
}

.plan-features {
    display: flex;
    flex-direction: column; /* Выстраиваем в стильный список сверху вниз */
    gap: 8px;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Легкий разделитель */
    padding-top: 16px;
}

.plan-features span {
    display: flex;
    align-items: center;
    padding: 0;
    background: transparent;
    border: none;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85); /* Мягкий белый текст */
}

.plan-features span::before {
    content: '';
    width: 16px;
    height: 16px;
    margin-right: 10px;
    flex-shrink: 0;
    background-color: var(--accent-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.plan-card.popular .plan-features span::before {
    background-color: #fbbf24; /* Золотая галочка для популярного тарифа */
}

/* --- СВЕТЛАЯ ТЕМА --- */
html[data-theme="light"] .plan-card {
    background: linear-gradient(160deg, #ffffff 0%, #f8fafc 100%);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}
html[data-theme="light"] .pb-total-price { text-shadow: none; }
html[data-theme="light"] .plan-card:hover {
    border-color: rgba(37, 99, 235, 0.22);
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .plan-card.selected {
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.08) 0%, #ffffff 70%);
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.12), inset 0 0 0 1px var(--accent-color);
}
html[data-theme="light"] .plan-features { border-top-color: rgba(0, 0, 0, 0.05); }
html[data-theme="light"] .plan-features span { color: #334155; }

.plan-card.popular:hover,
.plan-card.popular.selected {
    border-color: #ff9500 !important;
    background: rgba(255, 149, 0, 0.04);
    box-shadow:
        0 10px 26px rgba(255, 149, 0, 0.16),
        inset 0 0 0 1px rgba(255, 149, 0, 0.2) !important;
}
.plan-card.popular .pb-total-price {
    color: #fbbf24;
    text-shadow: 0 0 20px rgba(255, 149, 0, 0.25);
}

html[data-theme="light"] .plan-card.popular {
    border-color: rgba(255, 149, 0, 0.4);
}
html[data-theme="light"] .plan-card.popular:hover,
html[data-theme="light"] .plan-card.popular.selected {
    background: radial-gradient(circle at top right, rgba(255, 149, 0, 0.08) 0%, #ffffff 70%);
}
html[data-theme="light"] .plan-card.popular .pb-total-price {
    text-shadow: none;
}

@media (max-width: 768px) {
    .plan-card {
        max-width: none;
        padding: 16px 14px 14px; /* Сделали базовый отступ чуть больше */
        border-radius: 20px;
        gap: 12px;
    }

    /* СПАСАЕМ ПЛАШКУ: Увеличиваем отступ сверху ТОЛЬКО для популярных тарифов */
    .plan-card.popular {
        padding-top: 32px; /* Даем плашке достаточно места */
    }

    .plan-card-head {
        margin-top: 6px; /* Немного отодвигаем заголовок от плашки */
        align-items: center; /* Гарантируем, что иконка и текст на одной линии */
    }

    /* Уменьшаем шрифты, чтобы "365 дней" и цена помещались в одну строку */
    .plan-period-title {
        font-size: 1.35rem; 
        white-space: nowrap; /* Запрещаем перенос слова "дней" на новую строку */
    }

    .pb-total-price {
        font-size: 1.45rem; 
    }

    .plan-features span {
        font-size: 0.75rem;
        padding: 2px 0;
    }
}

/* Блок «чек» перед оплатой */
.payment-receipt-card {
    width: 100%;
    max-width: 420px; /* Выравниваем по ширине с карточками тарифов */
    margin: 0 auto 24px;
    background: linear-gradient(160deg, rgba(16, 22, 45, 0.4) 0%, rgba(10, 14, 28, 0.6) 100%);
    border: 1px solid rgba(0, 240, 255, 0.15);
    border-radius: 24px;
    padding: 24px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
}

.payment-receipt-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-color);
    text-align: center;
    margin-bottom: 20px;
    text-shadow: 0 0 10px var(--accent-glow);
}

html[data-theme="light"] .payment-receipt-card {
    background: linear-gradient(160deg, #ffffff 0%, #f8fafc 100%);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

html[data-theme="light"] .payment-receipt-title {
    text-shadow: none;
}

.payment-receipt-body .receipt-line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 0;
    font-size: 0.95rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.15); /* Пунктир, как в настоящем чеке */
}
.payment-receipt-body .receipt-line-extra {
    align-items: flex-start;
}
.payment-receipt-body .receipt-line-extra .receipt-line-label {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-width: 0;
}
html[data-theme="light"] .payment-receipt-body .receipt-line {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .receipt-line-extra .receipt-detail {
    color: rgba(0, 0, 0, 0.4);
}

.payment-receipt-body .receipt-line:last-of-type:not(.receipt-line-total) {
    border-bottom: none;
}
.receipt-line-label {
    display: flex;
    flex-direction: column;
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.4;
    flex: 1;
}
.receipt-line-value {
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}
/* Расшифровка (Доп. устройства / трафик) */
.receipt-line-extra .receipt-detail {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.4);
}
/* ==================== ИТОГО К ОПЛАТЕ ==================== */
.payment-receipt-body .receipt-line-total {
    margin-top: 0;
    padding-top: 24px;
    border: none;
    align-items: center;
}

.payment-receipt-body .receipt-line-total .receipt-line-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.payment-receipt-body .receipt-line-total .receipt-line-value {
    font-family: 'Oswald', sans-serif;
    font-size: 2.2rem; /* Сделали огромной, как в тарифах */
    color: var(--green-color);
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
    line-height: 1;
}


.payment-receipt-promo-wrap {
    margin: 16px 0 0;
    padding: 20px 0;
    border-top: 1px solid rgba(0, 240, 255, 0.15);
    border-bottom: 1px solid rgba(0, 240, 255, 0.15);
}
html[data-theme="light"] .payment-receipt-promo-wrap {
    border-top-color: rgba(0, 0, 0, 0.08);
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .payment-receipt-promo-row .email-input {
    background: #f8fafc !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--text-primary) !important;
}

html[data-theme="light"] .payment-receipt-promo-btn {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.2) !important;
    color: var(--accent-color);
}

html[data-theme="light"] .payment-receipt-body .receipt-line-total .receipt-line-value {
    text-shadow: none;
}

.payment-receipt-promo-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
.payment-receipt-promo-row {
    display: flex;
    gap: 10px;
}
/* Поле ввода промокода */
.payment-receipt-promo-row .email-input {
    flex: 1;
    margin: 0;
	min-width: 0;
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(0, 240, 255, 0.2) !important;
    border-radius: 14px;
    padding: 14px 16px;
    color: #fff !important;
    font-size: 0.95rem;
    transition: all 0.3s ease;
	box-sizing: border-box;
}

.payment-receipt-promo-row .email-input:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.2) !important;
}
/* Кнопка "Применить" */
.payment-receipt-promo-btn {
    flex-shrink: 0;
    padding: 0 20px;
    border-radius: 14px;
    font-size: 0.9rem;
    font-weight: 700;
    background: rgba(0, 240, 255, 0.1);
    color: var(--accent-color);
    border: 1px solid rgba(0, 240, 255, 0.3) !important; /* Убираем тяжелую 3D подошву */
    box-shadow: none;
    transition: all 0.3s ease;
}
.payment-receipt-promo-btn:hover {
    background: rgba(0, 240, 255, 0.2);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
    transform: translateY(-2px);
}

.payment-receipt-promo-active {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: var(--green-color);
}
.payment-receipt-total:empty {
    display: none;
}
.payment-method-group {
    width: 100%;
    max-width: 520px;
    margin: 16px auto 12px;
    padding: 16px;
    border-radius: 18px;
    background: var(--card-bg, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--separator-color);
    box-sizing: border-box;
    container-type: inline-size;
}

.payment-method-heading {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 14px;
    text-align: left;
    letter-spacing: 0.02em;
}

/* Mobile-first: вертикальный список */
.payment-method-tiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.payment-method-tile {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-height: 56px;
    padding: 12px 44px 12px 14px;
    border-radius: 14px;
    border: 2px solid var(--separator-color);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-primary);
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    font: inherit;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    box-sizing: border-box;
}

.payment-method-tile:hover {
    border-color: rgba(52, 199, 89, 0.45);
    background: rgba(52, 199, 89, 0.05);
}

.payment-method-tile:active {
    transform: scale(0.99);
}

.payment-method-tile.is-active {
    border-color: var(--green-color);
    background: rgba(52, 199, 89, 0.1);
    box-shadow: 0 0 0 1px rgba(52, 199, 89, 0.15);
}

.payment-method-tile-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    font-size: 1.35rem;
    line-height: 1;
    flex-shrink: 0;
    overflow: hidden;
    color: var(--accent-color);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}
html:not([data-theme="light"]) .payment-method-tile-icon {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.payment-method-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 5px;
    box-sizing: border-box;
}
.payment-method-logo[data-pay-logo="sbp"] {
    padding: 1px;
}
.payment-method-tile-icon .ui-icon-svg {
    width: 1.25rem;
    height: 1.25rem;
}

.payment-method-tile.is-active .payment-method-tile-icon {
    background: #ffffff;
}
html:not([data-theme="light"]) .payment-method-tile.is-active .payment-method-tile-icon {
    background: rgba(255, 255, 255, 0.16);
}

/* Compact payment methods on payment page */
.payment-method-group--compact {
    max-width: 420px;
    margin: 18px auto 14px;
    padding: 14px 14px 12px;
    border-radius: 20px;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%),
        var(--card-bg, rgba(255, 255, 255, 0.03));
}
html[data-theme="light"] .payment-method-group--compact {
    background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}
.payment-method-group--compact .payment-method-heading {
    text-align: center;
    margin-bottom: 12px;
    font-size: 0.84rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.payment-method-group--compact .payment-method-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.payment-method-group--compact .payment-method-tile {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 78px;
    padding: 12px 8px;
    width: auto;
    border-width: 1.5px;
    border-radius: 16px;
    text-align: center;
}
.payment-method-group--compact .payment-method-tile::after {
    display: none;
}
.payment-method-group--compact .payment-method-tile-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
}
.payment-method-group--compact .payment-method-tile-icon .ui-icon-svg {
    width: 1.05rem;
    height: 1.05rem;
}
.payment-method-group--compact .payment-method-logo {
    padding: 4px;
}
.payment-method-group--compact .payment-method-logo[data-pay-logo="sbp"] {
    padding: 1px;
}
.payment-method-group--compact .payment-method-tile-label {
    flex: none;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.payment-method-group--compact .payment-method-tile.is-active {
    border-color: rgba(37, 99, 235, 0.55);
    background:
        linear-gradient(160deg, rgba(37, 99, 235, 0.12) 0%, rgba(37, 99, 235, 0.04) 100%);
    box-shadow:
        0 0 0 1px rgba(37, 99, 235, 0.12),
        0 8px 18px rgba(37, 99, 235, 0.12);
}
html[data-theme="light"] .payment-method-group--compact .payment-method-tile.is-active {
    border-color: #2563eb;
    background: linear-gradient(160deg, rgba(37, 99, 235, 0.12) 0%, #fff 70%);
}
.payment-method-group--compact .payment-method-tile.is-active .payment-method-tile-icon {
    background: #ffffff;
}
html:not([data-theme="light"]) .payment-method-group--compact .payment-method-tile.is-active .payment-method-tile-icon {
    background: rgba(255, 255, 255, 0.16);
}
.payment-method-group--compact .payment-method-tile:hover {
    border-color: rgba(37, 99, 235, 0.35);
    background: rgba(37, 99, 235, 0.05);
}

#payment-page .payment-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
#payment-page .payment-checking-card {
    order: 1;
}
#payment-page .payment-receipt-card {
    order: 2;
    margin-top: 4px;
}
#payment-page .payment-method-group {
    order: 3;
    margin-top: 8px;
}
#payment-page #pay-button {
    order: 4;
}

.payment-method-tile-label {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.payment-method-tile::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--separator-color);
    background: transparent;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.payment-method-tile.is-active::after {
    border-color: var(--green-color);
    background: var(--green-color);
    box-shadow: inset 0 0 0 3px var(--card-bg, #fff);
}

/* Широкий блок — три карточки в ряд (ПК) */
@container (min-width: 420px) {
    .payment-method-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .payment-method-tile {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 96px;
        padding: 14px 10px;
        text-align: center;
    }

    .payment-method-tile::after {
        display: none;
    }

    .payment-method-tile-icon {
        width: auto;
        height: auto;
        background: transparent;
        font-size: 1.75rem;
        border-radius: 0;
    }

    .payment-method-tile.is-active .payment-method-tile-icon {
        background: transparent;
    }

    .payment-method-tile-label {
        font-size: 0.78rem;
        text-align: center;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        line-height: 1.2;
    }

    .payment-method-tile.is-active {
        box-shadow: 0 0 0 1px rgba(52, 199, 89, 0.2), 0 8px 20px rgba(52, 199, 89, 0.1);
    }
}

.payment-email-block {
    margin-bottom: 18px;
    text-align: center;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}
.payment-email-heading {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--text-primary);
}
#payment-section .user-email-display {
    font-weight: 600;
    color: var(--accent-color);
    font-size: 1.05rem;
    word-break: break-all;
    line-height: 1.4;
}

/* ==================== РЕФЕРАЛЬНАЯ ПРОГРАММА ==================== */
.referral-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; width: 100%; }
.stat-card {
    background: var(--card-bg); border: 1px solid var(--separator-color);
    border-radius: 20px; padding: 20px 10px; text-align: center;
    backdrop-filter: blur(12px); transition: all 0.3s ease;
}
.stat-card:hover { background: rgba(0, 240, 255, 0.05); border-color: rgba(0, 240, 255, 0.3); }
.stat-number {
    font-family: 'Oswald', sans-serif; font-size: 2.8rem; color: var(--accent-color);
    text-shadow: 0 0 15px var(--accent-glow); margin-bottom: 5px; line-height: 1;
}
.stat-label { font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }

.link-container { display: flex; gap: 10px; width: 100%; }
.link-container .referral-link-input { flex: 1; width: auto; }
html[data-theme="light"] .stat-number { text-shadow: none; color: var(--accent-color); }
/* Всплывающие уведомления СВЕРХУ экрана */
.notification {
    position: fixed;
    top: 20px; /* Выезжают сверху */
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: var(--card-bg);
    color: var(--text-primary);
    padding: 12px 20px;
    border-radius: 12px;
    border: 1px solid var(--accent-color);
    box-shadow: 0 5px 25px rgba(0,0,0,0.5);
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    text-align: center;
}
.notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Выпадающая панель колокольчика */
.notifications-panel {
    position: fixed;
    top: 72px;
    right: 15px;
    left: auto;
    width: 320px;
    max-width: calc(100vw - 30px);
    background: var(--card-bg);
    border: 1px solid var(--separator-color);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    backdrop-filter: blur(15px);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid var(--separator-color);
}
.notifications-list {
    max-height: 350px;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.notif-item {
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    border-left: 3px solid var(--accent-color);
}
.notif-item.is-unread {
    border-left-color: var(--red-color);
    box-shadow: 0 0 0 1px rgba(255, 0, 85, 0.14);
}
html[data-theme="light"] 
.notif-item { background: rgba(255, 255, 255, 0.5); }
.notif-item .date { font-size: 0.7rem; color: var(--text-secondary); margin-bottom: 4px; }
/* ==================== ФОРМА ВВОДА EMAIL ==================== */
.email-form-row {
    display: flex;
    gap: 10px;
    width: 100%;
    align-items: center;
}

.email-form-row .email-input {
    flex: 1; /* Инпут занимает всё свободное место */
    margin: 0;
    height: 52px; /* Жестко фиксируем одинаковую высоту */
}

.email-form-row .confirm-btn {
    margin: 0;
    height: 52px; /* Жестко фиксируем одинаковую высоту */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    white-space: nowrap; /* Чтобы текст на кнопке не переносился */
}

/* На мобильных телефонах ставим кнопку ПОД полем ввода */
@media (max-width: 480px) {
    .email-form-row {
        flex-direction: column;
    }
    .email-form-row .confirm-btn {
        width: 100%;
    }
	.payment-mode-tabs {
        display: flex; /* Уходим от grid на flex для максимального контроля */
        justify-content: space-between;
        width: 100%;
        gap: 2px; /* Минимальный зазор */
        padding: 4px;
    }
    
    .payment-mode-tab {
        flex: 1 1 0; /* Заставляем вкладки делиться строго поровну */
        min-width: 0; /* КРИТИЧЕСКИ ВАЖНО: запрещаем кнопке быть шире своей 1/3 части */
        padding: 8px 2px;
        gap: 3px;
        font-size: 0.65rem; /* Делаем шрифт около 10-11px */
        letter-spacing: -0.02em; /* Чуть-чуть сжимаем межбуквенный интервал */
        
        /* Защита текста */
        white-space: nowrap; 
        overflow: hidden;
        text-overflow: ellipsis; 
    }
    
    .payment-mode-tab .ui-icon,
    .payment-mode-tab .ui-icon-svg {
        width: 0.9rem; /* Иконки тоже делаем микроскопически меньше */
        height: 0.9rem;
        flex-shrink: 0; /* Иконка не должна сплющиваться */
    }
	.payment-receipt-card {
        padding: 16px 14px; /* Делаем внутренние отступы карточки меньше */
    }
    
    .payment-receipt-promo-row {
        gap: 6px; /* Чуть сдвигаем инпут и кнопку */
    }

    .payment-receipt-promo-row .email-input {
        padding: 12px 12px; /* Чуть уменьшаем поле ввода */
        font-size: 0.85rem;
    }

    .payment-receipt-promo-btn {
        padding: 0 12px; /* Уменьшаем боковые отступы кнопки */
        font-size: 0.8rem; /* Чуть уменьшаем шрифт на кнопке */
    }
}

/* ==================== АДАПТИВ ДЛЯ ЭКСТРЕМАЛЬНО УЗКИХ ЭКРАНОВ (< 400px) ==================== */
@media (max-width: 400px) {
    .plan-card-head {
        flex-wrap: wrap; /* Позволяем элементам переноситься на новую строку */
        gap: 10px;
    }
    
    .plan-card-identity {
        flex: 0 0 100%; /* Иконка и название тарифа занимают всю ширину */
    }
    
    .plan-card-price-block {
        width: 100%;
        display: flex;
        align-items: baseline;
        justify-content: space-between; /* Разносим итоговую цену и цену "в месяц" по краям */
        text-align: left;
        padding-top: 10px;
        border-top: 1px dashed rgba(255, 255, 255, 0.15); /* Добавляем разделитель в стиле нашего чека */
    }

    /* Адаптация разделителя для светлой темы */
    html[data-theme="light"] .plan-card-price-block {
        border-top-color: rgba(0, 0, 0, 0.1);
    }

    .monthly-price {
        margin-top: 0;
        text-align: right;
        max-width: 55%; /* Чтобы длинный текст переносился, а не сплющивал основную цену */
    }
}

/* Делаем красивый отступ от карточек до поля ввода email и кнопки оплаты */
.email-input-section {
    margin-top: 12.2px;
}
.payment-section {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 6px;
}
.payment-checking-card {
    border: 1px solid var(--separator-color);
    border-radius: 14px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
html[data-theme="light"] .payment-checking-card { background: rgba(0, 0, 0, 0.03); }
.payment-checking-title { font-weight: 700; }
.payment-checking-text { color: var(--text-secondary); font-size: 0.9rem; }
/* ==================== ПОДДЕРЖКА (ТИКЕТЫ) ==================== */
.ticket-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ticket-textarea {
    resize: vertical;
    min-height: 120px;
    font-family: 'Inter', sans-serif;
}
.ticket-attach-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ticket-attach-btn {
    width: auto;
}
.ticket-attach-preview {
    margin-top: -2px;
}
.ticket-attach-preview-card {
    position: relative;
    display: inline-block;
    border: 1px solid var(--separator-color);
    border-radius: 12px;
    padding: 6px;
    background: rgba(0, 0, 0, 0.08);
}
.ticket-attach-preview-image {
    display: block;
    max-width: 180px;
    max-height: 140px;
    border-radius: 8px;
}
.ticket-attach-remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255, 0, 85, 0.9);
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
}
.ticket-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ticket-item {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--separator-color);
    border-radius: 14px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}
html[data-theme="light"] .ticket-item { background: rgba(0,0,0,0.02); }
.ticket-item:hover {
    background: rgba(0, 240, 255, 0.05);
    border-color: var(--accent-color);
    transform: translateY(-2px);
}
.ticket-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.ticket-item-title {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-primary);
}
.ticket-pill {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(0, 255, 136, 0.1);
    color: var(--green-color);
    border: 1px solid var(--green-color);
    font-weight: 600;
    text-transform: uppercase;
}
.ticket-pill.closed {
    background: rgba(255, 0, 85, 0.1);
    color: var(--red-color);
    border: 1px solid var(--red-color);
}
.ticket-pill.new {
    background: rgba(59, 130, 246, 0.16);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.45);
}
.ticket-pill.in-progress {
    background: rgba(245, 158, 11, 0.14);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.42);
}
.ticket-pill.waiting-user {
    background: rgba(168, 85, 247, 0.14);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.42);
}
.ticket-pill.resolved {
    background: rgba(16, 185, 129, 0.14);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.42);
}
.ticket-item-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.ticket-item-unread {
    border-color: rgba(255, 0, 85, 0.35);
    box-shadow: 0 0 0 1px rgba(255, 0, 85, 0.12);
}

html[data-theme="light"] .ticket-item-unread {
    border-color: rgba(229, 57, 53, 0.4);
    box-shadow: 0 2px 10px rgba(229, 57, 53, 0.08);
}

.ticket-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: var(--red-color);
    border-radius: 999px;
    line-height: 1;
    box-shadow: 0 0 10px rgba(255, 0, 85, 0.45);
}

/* Окно чата (внутри тикета) */
.ticket-chat-view {
    display: none;
    flex-direction: column;
    min-height: 0;
    gap: 0;
}

.ticket-chat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding-bottom: 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--separator-color);
}

.ticket-chat-back {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
}

.ticket-chat-title {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 1.05rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 6px;
    color: var(--text-primary);
}

.ticket-chat-close-btn {
    flex-shrink: 0;
    padding: 8px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    border-radius: 10px;
    cursor: pointer;
    color: #fecdd3;
    border: 1px solid rgba(244, 63, 94, 0.55);
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.28), rgba(190, 18, 60, 0.22));
}

html[data-theme="light"] .ticket-chat-close-btn {
    color: #9f1239;
    border-color: rgba(225, 29, 72, 0.45);
    background: linear-gradient(135deg, #fff1f2, #ffe4e6);
}

.ticket-chat-composer {
    flex-shrink: 0;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--separator-color);
}

.ticket-chat-attach-preview {
    flex-shrink: 0;
    margin: 0 0 8px;
}

.ticket-composer-bar {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 6px 8px 6px 6px;
    border-radius: 18px;
    border: 1px solid var(--separator-color);
    background: rgba(0, 0, 0, 0.22);
}

html[data-theme="light"] .ticket-composer-bar {
    background: #f1f5f9;
    border-color: rgba(0, 0, 0, 0.1);
}

.ticket-composer-attach-btn {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    margin-bottom: 1px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-primary);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.ticket-composer-attach-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ticket-composer-input {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    max-height: 120px;
    resize: none;
    margin: 0;
    padding: 10px 4px;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 16px;
    line-height: 1.45;
    font-family: 'Inter', sans-serif;
    color: var(--text-primary) !important;
}

.ticket-composer-input:focus {
    outline: none;
}

.ticket-chat-composer:focus-within .ticket-composer-bar {
    border-color: rgba(0, 240, 255, 0.45);
    box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.12);
}

html[data-theme="light"] .ticket-chat-composer:focus-within .ticket-composer-bar {
    border-color: rgba(0, 85, 255, 0.35);
    box-shadow: 0 0 0 2px rgba(0, 85, 255, 0.1);
}

.ticket-composer-send-btn {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    margin-bottom: 1px;
    border: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, var(--accent-color), #00b4ff);
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.28);
}

.ticket-composer-send-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ticket-composer-send-icon {
    display: block;
    margin-left: 2px;
}

#support-page.support-chat-open > .support-section,
#support-page.support-chat-open .support-footer-hint {
    display: none !important;
}

/* Режим чата: фиксируем высоту, поле ввода не уезжает под нижнюю навигацию */
#app:has(#support-page.active.support-chat-open) {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    padding-bottom: 92px;
    box-sizing: border-box;
    display: block;
}

#support-page.active.support-chat-open {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

#support-page.support-chat-open > .info-card {
    margin-bottom: 0;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#support-page.support-chat-open .ticket-chat-view {
    flex: 1;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
}

#support-page.support-chat-open .ticket-messages-container {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

#support-page.support-chat-open .ticket-chat-composer {
    flex-shrink: 0;
    z-index: 5;
    background: var(--card-bg);
}

.ticket-messages-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 14px;
    border: 1px solid var(--separator-color);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
html[data-theme="light"] .ticket-messages-container { background: rgba(0,0,0,0.02); }

@media (max-width: 900px) {
    #app:has(#support-page.active.support-chat-open) {
        padding-bottom: max(88px, calc(72px + env(safe-area-inset-bottom, 0px)));
    }

    #support-page.support-chat-open .ticket-chat-composer {
        padding-bottom: 4px;
    }

    .ticket-composer-attach-btn,
    .ticket-composer-send-btn {
        width: 40px;
        height: 40px;
    }

    .ticket-composer-input {
        max-height: 28vh;
    }
}

.ticket-msg {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.ticket-msg.me {
    background: rgba(0, 240, 255, 0.15);
    align-self: flex-end;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 4px;
}
html[data-theme="light"] .ticket-msg { background: #ffffff; border: 1px solid rgba(0,0,0,0.05); }
html[data-theme="light"] .ticket-msg.me { background: #e0f2fe; border: 1px solid rgba(0,85,255,0.1); }

.ticket-msg-top {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 500;
}
.ticket-msg-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-primary);
    word-wrap: break-word;
}

.ticket-msg-text .ticket-msg-link {
    color: var(--accent-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
}

.ticket-msg-text .ticket-msg-link:hover {
    filter: brightness(1.15);
}

html[data-theme="light"] .ticket-msg-text .ticket-msg-link {
    color: #0055ff;
}
.ticket-msg-image {
    margin-top: 8px;
    max-width: min(100%, 280px);
    max-height: 280px;
    border-radius: 10px;
    border: 1px solid var(--separator-color);
    object-fit: contain;
    background: rgba(0, 0, 0, 0.08);
    cursor: zoom-in;
}

.ticket-image-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(4, 7, 13, 0.88);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10050;
    padding: 20px;
}

.ticket-image-lightbox.is-open {
    display: flex;
}

.ticket-image-lightbox-image {
    max-width: min(96vw, 1400px);
    max-height: 90vh;
    border-radius: 12px;
    border: 1px solid var(--separator-color);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.ticket-image-lightbox-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}
/* Центрируем переключатель Автоматическая/Ручная на странице Помощи */
.segmented-control-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 25px; /* Заодно добавим аккуратный отступ снизу */
}
/* ==================== МАГИЯ АНИМАЦИЙ НИЖНЕГО МЕНЮ ==================== */

/* 1. Плавное появление всей панели снизу при загрузке/авторизации */
@keyframes navSlideUp {
    0% { 
        opacity: 0; 
        transform: translate3d(-50%, 100px, 0); 
    }
    100% { 
        opacity: 1; 
        transform: translate3d(-50%, 0, 0); 
    }
}

/* 2. Сочный "прыжок" иконки при переключении вкладок */
@keyframes iconPop {
    0% { 
        transform: scale(1) translateY(0); 
        filter: drop-shadow(0 0 0 transparent); 
    }
    40% { 
        transform: scale(0.8) translateY(2px); /* Слегка вдавливается */
    }
    80% { 
        transform: scale(1.3) translateY(-6px); /* Выпрыгивает наверх */
        filter: drop-shadow(0 0 12px var(--accent-glow)); 
    }
    100% { 
        transform: scale(1.2) translateY(-4px); /* Фиксируется в активном состоянии */
        filter: drop-shadow(0 0 8px var(--accent-glow)); 
    }
}

/* Применяем анимацию к иконке, когда JS добавляет класс .animate */
.nav-btn.animate .nav-icon {
    animation: iconPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* ==================== ДЕТАЛИ АККАУНТА — компактный список ==================== */
.account-summary-card {
    padding-top: 12px;
    padding-bottom: 12px;
}
.account-summary-card .account-summary-head {
    margin-bottom: 8px;
    padding-bottom: 0;
    border-bottom: none;
}
.account-summary-card .account-summary-head .project-name {
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}
.account-summary-card .account-summary-list,
.account-summary-card .card-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.account-summary-card .detail-item {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 8px 10px;
    margin-bottom: 0;
    gap: 10px;
    border-radius: 12px;
    min-height: 0;
}
.account-summary-card .detail-info {
    gap: 1px;
    align-items: flex-start;
    width: auto;
    flex: 1;
    min-width: 0;
}
.account-summary-card .detail-label {
    font-size: 0.62rem;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.account-summary-card .detail-emoji {
    margin-right: 0;
    margin-bottom: 0;
    font-size: 1.15rem;
    width: 1.5rem;
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
}
.account-summary-card .detail-value {
    font-size: 0.88rem;
    line-height: 1.25;
    font-weight: 600;
}
.account-summary-card .sub-period {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
}
.account-summary-card .sub-period-date {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    color: var(--text-primary);
}
.account-summary-card .sub-remaining-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(0, 176, 155, 0.16);
    color: #5eead4;
    border: 1px solid rgba(52, 211, 153, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.account-summary-card .status-badge {
    font-size: 0.65rem;
    padding: 1px 6px;
}
html[data-theme="light"] .account-summary-card .sub-remaining-pill {
    background: rgba(0, 176, 155, 0.12);
    color: #0f766e;
    border-color: rgba(13, 148, 136, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.account-summary-card .detail-item--period-traffic .sub-period {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.account-summary-card .account-split-cols {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    min-width: 0;
}
.account-summary-card .account-split-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.account-summary-card .account-split-col--left {
    flex: 0 1 48%;
    padding-right: 10px;
}
.account-summary-card .account-split-col--right {
    flex: 1 1 52%;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
html[data-theme="light"] .account-summary-card .account-split-col--right {
    border-left-color: rgba(0, 0, 0, 0.1);
}
.account-summary-card .account-split-col--right .detail-value {
    font-weight: 500;
    width: 100%;
}
.account-summary-card .account-split-col--right .traffic-usage-wrap {
    align-items: flex-start;
    gap: 3px;
    width: 100%;
}
.account-summary-card .account-split-col--right .traffic-usage-text {
    font-size: 0.72rem;
    line-height: 1.2;
    font-weight: 600;
}
.account-summary-card .account-split-col--right .traffic-usage-bar {
    width: 100%;
    max-width: none;
    height: 4px;
    margin-top: 1px;
}
.account-summary-card .account-split-col--right .traffic-reset-line {
    margin-top: 1px;
    font-size: 0.55rem;
    line-height: 1.15;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.account-summary-card .account-split-col--right .traffic-buy-btn {
    display: none;
}
.account-summary-card .detail-item--period-traffic,
.account-summary-card .detail-item--user-devices {
    align-items: center;
}
.account-summary-card .detail-item--period-traffic .detail-label,
.account-summary-card .detail-item--user-devices .detail-label {
    margin-bottom: 1px;
}
.account-summary-card .detail-item--user-devices .home-devices-count,
.account-summary-card .detail-item--user-referral .detail-value {
    font-size: 0.78rem;
    line-height: 1.25;
    font-weight: 600;
}
.account-summary-card .traffic-reset-line {
    margin-top: 2px;
    font-size: 0.6rem;
    line-height: 1.2;
    opacity: 0.85;
}
.account-summary-card .detail-item--traffic,
.account-summary-card .detail-item--user,
.account-summary-card .detail-item--devices,
.account-summary-card .detail-item--period,
.account-summary-card .detail-item--referral {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 0.2s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.account-summary-card .detail-item--user {
    background:
        linear-gradient(145deg, rgba(139, 92, 246, 0.14) 0%, rgba(245, 158, 11, 0.1) 48%, rgba(0, 0, 0, 0.22) 78%),
        rgba(0, 0, 0, 0.25);
    border-color: rgba(167, 139, 250, 0.38);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 10px rgba(139, 92, 246, 0.1);
}

.account-summary-card .detail-item--traffic {
    background:
        linear-gradient(145deg, rgba(0, 240, 255, 0.12) 0%, rgba(0, 0, 0, 0.22) 58%),
        rgba(0, 0, 0, 0.25);
    border-color: rgba(0, 240, 255, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 10px rgba(0, 240, 255, 0.08);
}

.account-summary-card .detail-item--devices {
    background:
        linear-gradient(145deg, rgba(16, 185, 129, 0.14) 0%, rgba(0, 0, 0, 0.22) 58%),
        rgba(0, 0, 0, 0.25);
    border-color: rgba(52, 211, 153, 0.36);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 10px rgba(16, 185, 129, 0.1);
}

.account-summary-card .detail-item--period {
    background:
        linear-gradient(145deg, rgba(0, 176, 155, 0.14) 0%, rgba(0, 240, 255, 0.08) 42%, rgba(0, 0, 0, 0.22) 72%),
        rgba(0, 0, 0, 0.25);
    border-color: rgba(52, 211, 153, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 10px rgba(0, 176, 155, 0.1);
}

.account-summary-card .detail-item--referral {
    background:
        linear-gradient(145deg, rgba(245, 158, 11, 0.16) 0%, rgba(0, 0, 0, 0.22) 58%),
        rgba(0, 0, 0, 0.25);
    border-color: rgba(251, 191, 36, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 10px rgba(245, 158, 11, 0.12);
}

.account-summary-card .home-user-status-wrap {
    display: inline-flex;
    justify-content: flex-start;
    width: auto;
    margin-top: 2px;
}

.account-summary-card .home-user-status-wrap .status-badge {
    font-size: 0.6rem;
    padding: 1px 7px;
}

.account-summary-card .home-user-name {
    display: block;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.account-summary-card .home-devices-count {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.account-summary-card .detail-item--user::after,
.account-summary-card .detail-item--traffic::after,
.account-summary-card .detail-item--devices::after,
.account-summary-card .detail-item--period::after,
.account-summary-card .detail-item--referral::after {
    content: '›';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0.7;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.account-summary-card .detail-item--user::after { color: #c4b5fd; }
.account-summary-card .detail-item--traffic::after { color: var(--accent-color); }
.account-summary-card .detail-item--devices::after { color: #6ee7b7; }
.account-summary-card .detail-item--period::after { color: #86efac; }
.account-summary-card .detail-item--referral::after { color: #fbbf24; }

.account-summary-card .detail-item--user:hover,
.account-summary-card .detail-item--user:focus-visible,
.account-summary-card .detail-item--traffic:hover,
.account-summary-card .detail-item--traffic:focus-visible,
.account-summary-card .detail-item--devices:hover,
.account-summary-card .detail-item--devices:focus-visible,
.account-summary-card .detail-item--period:hover,
.account-summary-card .detail-item--period:focus-visible,
.account-summary-card .detail-item--referral:hover,
.account-summary-card .detail-item--referral:focus-visible {
    transform: translateY(-1px);
    outline: none;
}

.account-summary-card .detail-item--user:hover::after,
.account-summary-card .detail-item--user:focus-visible::after,
.account-summary-card .detail-item--traffic:hover::after,
.account-summary-card .detail-item--traffic:focus-visible::after,
.account-summary-card .detail-item--devices:hover::after,
.account-summary-card .detail-item--devices:focus-visible::after,
.account-summary-card .detail-item--referral:hover::after,
.account-summary-card .detail-item--referral:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(2px);
}

.account-summary-card .detail-item--period::after {
    top: 50%;
    transform: translateY(-50%);
}
.account-summary-card .detail-item--period:hover::after,
.account-summary-card .detail-item--period:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(2px);
}

.account-summary-card .detail-item--user:active,
.account-summary-card .detail-item--traffic:active,
.account-summary-card .detail-item--devices:active,
.account-summary-card .detail-item--period:active,
.account-summary-card .detail-item--referral:active {
    transform: translateY(0) scale(0.99);
}

html[data-theme="light"] .account-summary-card .detail-item--user {
    background:
        linear-gradient(145deg, rgba(99, 102, 241, 0.1) 0%, rgba(245, 158, 11, 0.08) 48%, rgba(255, 255, 255, 0.92) 78%),
        #ffffff;
    border-color: rgba(99, 102, 241, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 2px 8px rgba(99, 102, 241, 0.1);
}

html[data-theme="light"] .account-summary-card .detail-item--traffic {
    background:
        linear-gradient(145deg, rgba(0, 85, 255, 0.09) 0%, rgba(255, 255, 255, 0.92) 62%),
        #ffffff;
    border-color: rgba(0, 85, 255, 0.26);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 2px 8px rgba(0, 85, 255, 0.08);
}

html[data-theme="light"] .account-summary-card .detail-item--devices {
    background:
        linear-gradient(145deg, rgba(16, 185, 129, 0.1) 0%, rgba(255, 255, 255, 0.92) 62%),
        #ffffff;
    border-color: rgba(16, 185, 129, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 2px 8px rgba(16, 185, 129, 0.08);
}

html[data-theme="light"] .account-summary-card .detail-item--period {
    background:
        linear-gradient(145deg, rgba(0, 176, 155, 0.1) 0%, rgba(0, 85, 255, 0.06) 45%, rgba(255, 255, 255, 0.92) 72%),
        #ffffff;
    border-color: rgba(0, 176, 155, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 2px 8px rgba(0, 176, 155, 0.08);
}

html[data-theme="light"] .account-summary-card .detail-item--referral {
    background:
        linear-gradient(145deg, rgba(245, 158, 11, 0.12) 0%, rgba(255, 255, 255, 0.92) 62%),
        #ffffff;
    border-color: rgba(217, 119, 6, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 2px 8px rgba(245, 158, 11, 0.1);
}

html[data-theme="light"] .account-summary-card .detail-item--user::after { color: #6366f1; }
html[data-theme="light"] .account-summary-card .detail-item--traffic::after { color: #2563eb; }
html[data-theme="light"] .account-summary-card .detail-item--devices::after { color: #059669; }
html[data-theme="light"] .account-summary-card .detail-item--period::after { color: #0d9488; }
html[data-theme="light"] .account-summary-card .detail-item--referral::after { color: #d97706; }

.account-summary-card .detail-item--user,
.account-summary-card .detail-item--traffic,
.account-summary-card .detail-item--devices,
.account-summary-card .detail-item--period,
.account-summary-card .detail-item--referral {
    padding-right: 28px;
}

/* ==================== РЕФЕРАЛЬНАЯ СЕТКА ==================== */
.referral-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* На телефоне 2x2 */
    gap: 15px;
    margin-bottom: 20px;
    width: 100%;
}
@media (min-width: 600px) {
    .referral-stats-grid {
        grid-template-columns: repeat(4, 1fr); /* На ПК все 4 в один ряд */
    }
}
@media (max-width: 480px) {
    /* Чтобы кнопка копирования не вылезала за экран на узких телефонах */
    .link-container {
        flex-direction: column;
    }
    .link-container .copy-btn {
        width: 100%;
    }
}
/* ==================== ПЛИТКИ НАСТРОЙКИ (ПОДКЛЮЧЕНИЕ) ==================== */

/* Сетка для плиток: 2 в ряд на телефоне, 2 или 3 на ПК */


@media (min-width: 600px) {
    .apps-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

/* Базовый стиль плитки-ссылки */
/* ==================== КАРТОЧКИ ШАГОВ (НОВЫЙ ДИЗАЙН) ==================== */
.setup-steps-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
    position: relative;
}

.setup-steps-wrapper.is-magic-reveal {
    overflow: hidden;
}

.setup-steps-wrapper.is-magic-reveal::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(0, 240, 255, 0.06) 40%,
        rgba(0, 255, 136, 0.14) 50%,
        rgba(0, 240, 255, 0.06) 60%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 3;
    animation: helpStepsAuraSweep 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.step-card.is-step-magic-in,
.help-download-btn.is-step-magic-in,
#help-connect-btn.is-step-magic-in {
    animation: helpStepMagicIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--step-magic-delay, 0s);
}

@keyframes helpStepsAuraSweep {
    0% { left: -80%; opacity: 0; }
    20% { opacity: 1; }
    100% { left: 130%; opacity: 0; }
}

@keyframes helpStepMagicIn {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.95);
        filter: blur(5px);
    }
    60% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}
.setup-steps-wrapper .step-card {
    margin-bottom: 0;
    padding: 12px 14px;
    gap: 12px;
    border-radius: 12px;
}
.setup-steps-wrapper .step-icon-wrapper {
    width: 34px;
    height: 34px;
}
.setup-steps-wrapper .step-icon-number {
    font-size: 0.875rem;
}
.setup-steps-wrapper .step-title {
    font-size: 0.9375rem;
    margin-bottom: 2px;
}
.setup-steps-wrapper .step-desc {
    font-size: 0.78rem;
    margin-bottom: 8px;
    line-height: 1.35;
}
.setup-steps-wrapper .step-btn {
    padding: 7px 12px;
    font-size: 0.8rem;
    border-radius: 8px;
}
.setup-steps-wrapper #install-app-actions {
    gap: 8px;
}

.step-card {
    display: flex;
    gap: 15px;
    background: rgba(20, 24, 38, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 15px;
    backdrop-filter: blur(10px);
    position: relative;
}
.step-icon-wrapper {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    /* Убрали красные цвета, используем акцентные голубые */
    background: rgba(0, 240, 255, 0.1); 
    border: 1px solid rgba(0, 240, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
}

/* Для светлой темы: */
html[data-theme="light"] .step-icon-wrapper {
    background: rgba(0, 85, 255, 0.08);
    border-color: rgba(0, 85, 255, 0.2);
    color: var(--accent-color);
}
.step-icon-number {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}
.step-content { flex: 1; }
.step-title {
    margin: 0 0 6px 0;
    font-size: 1.05rem;
    font-weight: 600;
}
.step-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 15px 0;
    line-height: 1.4;
}
.step-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
/* Общие стили (для компьютеров и планшетов: кнопки в ряд) */
#install-app-actions {
    display: flex;
    flex-direction: row; 
    gap: 10px;           
}

#install-app-actions .step-btn {             
    width: auto;         
    margin: 0;           
    white-space: nowrap; 
    justify-content: center; 
}

/* Адаптив для мобильных телефонов (экраны уже 600px) */
@media (max-width: 600px) {
    #install-app-actions {
        flex-direction: column; /* Выстраиваем кнопки в столбик */
    }
    
    /* Растягиваем ВСЕ кнопки внутри шагов на телефонах */
    .step-card .step-btn {
        width: 100%; 
        justify-content: center;
    }
}
.step-btn {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}
.step-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}
.step-btn.primary {
    background: rgba(0, 240, 255, 0.1);
    color: var(--accent-color);
    border-color: rgba(0, 240, 255, 0.3);
}
.step-btn.primary:hover {
    background: rgba(0, 240, 255, 0.2);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
}

/* --- Светлая тема --- */
html[data-theme="light"] .step-card {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .step-icon-wrapper {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .step-btn {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}
html[data-theme="light"] .step-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .step-btn.primary {
    background: rgba(0, 85, 255, 0.1);
    border-color: rgba(0, 85, 255, 0.2);
}
@media (max-width: 768px) {
    #install-app-actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        flex-wrap: nowrap;
        gap: 10px;
    }
    #install-app-actions .help-download-btn {
        margin: 0;
    }
    #install-app-actions .help-apk-btn {
        align-self: auto;
        margin-left: auto;
    }
}

.app-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Сине-зеленый градиент (Happ) */
.tile-happ {
    background: linear-gradient(135deg, #00f0ff 0%, #0055ff 100%);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
}

/* Сине-черный градиент (v2RayTun) */
.tile-v2raytun {
    background: linear-gradient(135deg, #0055ff 0%, #001122 100%);
    box-shadow: 0 0 20px rgba(0, 85, 255, 0.2);
}

/* Иконка и текст внутри плитки */
.app-tile .app-icon {
    font-size: 2.2rem;
    margin-bottom: 12px;
}

.app-tile .app-title {
    font-size: 1rem;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}

.app-tile .app-desc {
    font-size: 0.75rem;
    opacity: 0.8;
    display: block;
}

/* Стили для карточки профиля Марзбан */
.profile-card {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 15px;
    padding: 15px;
}
/*styles.css */

/*==================== КАСТОМНЫЙ СТЕКЛЯННЫЙ СЕЛЕКТОР (ПУТЬ ДЖЕДАЯ) ==================== */
.custom-glass-select {
    position: relative;
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 100; /* Чтобы список открывался поверх плиток */
}

/* Сама кнопка */
.custom-glass-select .select-trigger {
    background: rgba(20, 24, 38, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 25px;
    color: #ffffff;
    padding: 6px 35px 6px 15px; /* Справа отступ для стрелки */
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
    user-select: none;
}

/* Кастомная стрелочка */
.custom-glass-select .select-trigger::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
}

/* Анимация при открытии */
.custom-glass-select.open .select-trigger {
    border-color: rgba(0, 240, 255, 0.4);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.1);
}
.custom-glass-select.open .select-trigger::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Выпадающий список (полное стекло!) */
.custom-glass-select .select-options {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    min-width: 130px;
    background: rgba(10, 14, 28, 0.85); /* Полупрозрачный фон */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Стеклянная грань */
    border-radius: 15px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    backdrop-filter: blur(20px); /* Мощное размытие фона */
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

.custom-glass-select.open .select-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Элементы внутри списка */
.custom-glass-select .option {
    padding: 10px 15px;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
}

.custom-glass-select .option:hover {
    background: rgba(0, 240, 255, 0.15);
}

/* --- Светлая тема --- */
html[data-theme="light"] .custom-glass-select .select-trigger {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #000000;
}
html[data-theme="light"] .custom-glass-select .select-trigger::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}
html[data-theme="light"] .custom-glass-select .select-options {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .custom-glass-select .option {
    color: #1e293b;
}
html[data-theme="light"] .custom-glass-select .option:hover {
    background: rgba(0, 85, 255, 0.1);
}

/* ==================== ПОШАГОВОЕ ПОДКЛЮЧЕНИЕ ==================== */
.help-wizard-card {
    position: relative;
    overflow: hidden;
    padding-top: 16px;
    padding-bottom: 16px;
}
.help-wizard-glow {
    position: absolute;
    inset: -30% auto auto -18%;
    width: 70%;
    height: 90%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 30% 35%, rgba(37, 99, 235, 0.16), transparent 58%),
        radial-gradient(circle at 85% 10%, rgba(16, 185, 129, 0.11), transparent 48%);
    opacity: 0.9;
    animation: helpWizardGlowDrift 11s ease-in-out infinite alternate;
    will-change: transform, opacity;
}
html:not([data-theme="light"]) .help-wizard-glow {
    background:
        radial-gradient(circle at 30% 35%, rgba(0, 240, 255, 0.12), transparent 58%),
        radial-gradient(circle at 85% 10%, rgba(52, 211, 153, 0.09), transparent 48%);
}
.help-wizard-aurora {
    position: absolute;
    top: -28%;
    right: -18%;
    width: 58%;
    height: 72%;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 40% 45%, rgba(99, 102, 241, 0.14), transparent 62%),
        radial-gradient(circle at 70% 30%, rgba(14, 165, 233, 0.1), transparent 55%);
    filter: blur(2px);
    opacity: 0.85;
    animation: helpWizardAuroraDrift 14s ease-in-out infinite alternate;
    will-change: transform, opacity;
}
.help-wizard-aurora--alt {
    top: auto;
    right: auto;
    bottom: -36%;
    left: -12%;
    width: 52%;
    height: 58%;
    background:
        radial-gradient(circle at 55% 40%, rgba(34, 211, 166, 0.12), transparent 60%),
        radial-gradient(circle at 20% 70%, rgba(37, 99, 235, 0.08), transparent 55%);
    animation-duration: 16s;
    animation-direction: alternate-reverse;
    opacity: 0.7;
}
html:not([data-theme="light"]) .help-wizard-aurora {
    background:
        radial-gradient(circle at 40% 45%, rgba(167, 139, 250, 0.12), transparent 62%),
        radial-gradient(circle at 70% 30%, rgba(0, 240, 255, 0.1), transparent 55%);
}
html:not([data-theme="light"]) .help-wizard-aurora--alt {
    background:
        radial-gradient(circle at 55% 40%, rgba(34, 211, 166, 0.1), transparent 60%),
        radial-gradient(circle at 20% 70%, rgba(0, 240, 255, 0.07), transparent 55%);
}
@keyframes helpWizardGlowDrift {
    0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.78; }
    50% { transform: translate3d(4%, 3%, 0) scale(1.06); opacity: 1; }
    100% { transform: translate3d(-3%, 5%, 0) scale(1.03); opacity: 0.86; }
}
@keyframes helpWizardAuroraDrift {
    0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); opacity: 0.65; }
    100% { transform: translate3d(-6%, 5%, 0) scale(1.08) rotate(8deg); opacity: 0.95; }
}
.help-wizard-head {
    position: relative;
    z-index: 1;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 0;
    border-bottom: none;
}
.help-wizard-head .project-name {
    font-size: 1.12rem;
    display: block;
}
.help-wizard-eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1d4ed8;
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.14);
}
html:not([data-theme="light"]) .help-wizard-eyebrow {
    color: var(--accent-color);
    background: rgba(0, 240, 255, 0.08);
    border-color: rgba(0, 240, 255, 0.16);
}
.help-wizard-progress {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 16px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(15, 23, 42, 0.06);
}
html:not([data-theme="light"]) .help-wizard-progress {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}
.help-wizard-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 4px 2px;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 12px;
    transition: background 0.18s ease, transform 0.18s ease;
}
.help-wizard-step:hover .help-wizard-dot:not(.is-active) {
    border-color: rgba(37, 99, 235, 0.35);
    color: var(--text-primary);
    transform: scale(1.04);
}
.help-wizard-step:active {
    transform: scale(0.98);
}
.help-wizard-step:focus {
    outline: none;
}
.help-wizard-step:focus-visible {
    outline: 2px solid var(--accent-color, #2563eb);
    outline-offset: 2px;
}
html[data-theme="light"] .help-wizard-step:hover .help-wizard-dot:not(.is-active) {
    border-color: rgba(37, 99, 235, 0.4);
    background: rgba(37, 99, 235, 0.06);
}
.help-wizard-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 13px;
    left: calc(50% + 16px);
    width: calc(100% - 20px);
    height: 2px;
    border-radius: 99px;
    background: rgba(15, 23, 42, 0.08);
    pointer-events: none;
}
html:not([data-theme="light"]) .help-wizard-step:not(:last-child)::after {
    background: rgba(255, 255, 255, 0.08);
}
.help-wizard-step.is-done:not(:last-child)::after,
.help-wizard-step.is-active:not(:last-child)::after {
    background: linear-gradient(90deg, #2563eb, rgba(37, 99, 235, 0.25));
    background-size: 200% 100%;
    animation: helpWizardProgressFlow 2.8s ease-in-out infinite;
}
html:not([data-theme="light"]) .help-wizard-step.is-done:not(:last-child)::after,
html:not([data-theme="light"]) .help-wizard-step.is-active:not(:last-child)::after {
    background: linear-gradient(90deg, var(--accent-color), rgba(0, 240, 255, 0.2));
    background-size: 200% 100%;
}
@keyframes helpWizardProgressFlow {
    0% { background-position: 0% 50%; opacity: 0.75; }
    50% { background-position: 100% 50%; opacity: 1; }
    100% { background-position: 0% 50%; opacity: 0.75; }
}
.help-wizard-step-label {
    font-size: 0.68rem;
    font-weight: 650;
    color: var(--text-secondary);
    line-height: 1.2;
    white-space: normal;
    overflow: hidden;
    text-overflow: unset;
    max-width: 100%;
    text-align: center;
}
.help-wizard-step.is-active .help-wizard-step-label {
    color: var(--text-primary);
}
.help-wizard-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.help-wizard-dot-num {
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}
.help-wizard-dot.is-active {
    background: #2563eb;
    border-color: transparent;
    color: #fff;
    transform: scale(1.06);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16), 0 8px 18px rgba(37, 99, 235, 0.28);
}
.help-wizard-dot.is-done {
    background: #059669;
    border-color: transparent;
    color: #fff;
}
html[data-theme="light"] .help-wizard-dot {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .help-wizard-dot.is-active {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12), 0 8px 16px rgba(37, 99, 235, 0.22);
}
html[data-theme="light"] .help-wizard-dot.is-done {
    background: #059669;
    color: #fff;
}
html:not([data-theme="light"]) .help-wizard-dot.is-active {
    background: var(--accent-color);
    color: #041018;
    box-shadow: 0 0 0 4px rgba(0, 240, 255, 0.14), 0 0 18px var(--accent-glow);
}
/* Тихий idle-пульс кольца вокруг активного шага (не конфликтует с helpWizardDotPulse) */
.help-wizard-step.is-active .help-wizard-dot {
    position: relative;
}
.help-wizard-step.is-active .help-wizard-dot::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1.5px solid rgba(37, 99, 235, 0.35);
    pointer-events: none;
    animation: helpWizardDotRingIdle 2.8s ease-in-out infinite;
}
html:not([data-theme="light"]) .help-wizard-step.is-active .help-wizard-dot::after {
    border-color: rgba(0, 240, 255, 0.4);
}
@keyframes helpWizardDotRingIdle {
    0%, 100% { transform: scale(1); opacity: 0.55; }
    50% { transform: scale(1.18); opacity: 0.15; }
}
.help-wizard-body {
    position: relative;
    min-height: 240px;
    overflow: visible;
}
.help-wizard-body.is-magic-transit {
    overflow: hidden;
}
.help-wizard-body.is-magic-transit::before {
    content: '';
    position: absolute;
    inset: -8% -20%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(0, 240, 255, 0.04) 36%,
        rgba(167, 139, 250, 0.16) 48%,
        rgba(34, 211, 166, 0.14) 54%,
        rgba(0, 240, 255, 0.04) 64%,
        transparent 100%
    );
    filter: blur(8px);
    opacity: 0;
    animation: helpWizardAuraSweep 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
html[data-theme="light"] .help-wizard-body.is-magic-transit::before {
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(37, 99, 235, 0.05) 36%,
        rgba(99, 102, 241, 0.14) 48%,
        rgba(16, 185, 129, 0.12) 54%,
        rgba(37, 99, 235, 0.05) 64%,
        transparent 100%
    );
}
.help-wizard-panel {
    position: relative;
    z-index: 1;
    will-change: transform, opacity, filter;
}
.help-wizard-panel[hidden] {
    display: none !important;
}
.help-wizard-panel.is-leave-forward {
    animation: helpWizardLeaveForward 0.34s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.help-wizard-panel.is-leave-back {
    animation: helpWizardLeaveBack 0.34s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.help-wizard-panel.is-enter-forward {
    animation: helpWizardEnterForward 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.help-wizard-panel.is-enter-back {
    animation: helpWizardEnterBack 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.help-wizard-panel.is-enter-forward .help-wizard-title,
.help-wizard-panel.is-enter-back .help-wizard-title {
    animation: helpWizardItemIn 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.05s;
}
.help-wizard-panel.is-enter-forward .help-wizard-hint,
.help-wizard-panel.is-enter-back .help-wizard-hint {
    animation: helpWizardItemIn 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.1s;
}
.help-wizard-panel.is-enter-forward .help-os-grid,
.help-wizard-panel.is-enter-forward .help-app-picker,
.help-wizard-panel.is-enter-forward .help-download-row,
.help-wizard-panel.is-enter-forward .help-wizard-primary-btn,
.help-wizard-panel.is-enter-forward .help-wizard-secondary-btn,
.help-wizard-panel.is-enter-back .help-os-grid,
.help-wizard-panel.is-enter-back .help-app-picker,
.help-wizard-panel.is-enter-back .help-download-row,
.help-wizard-panel.is-enter-back .help-wizard-primary-btn,
.help-wizard-panel.is-enter-back .help-wizard-secondary-btn {
    animation: helpWizardItemIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.16s;
}
.help-wizard-panel.is-enter-forward .help-os-tile:nth-child(1),
.help-wizard-panel.is-enter-back .help-os-tile:nth-child(1) { animation-delay: 0.14s; }
.help-wizard-panel.is-enter-forward .help-os-tile:nth-child(2),
.help-wizard-panel.is-enter-back .help-os-tile:nth-child(2) { animation-delay: 0.2s; }
.help-wizard-panel.is-enter-forward .help-os-tile:nth-child(3),
.help-wizard-panel.is-enter-back .help-os-tile:nth-child(3) { animation-delay: 0.26s; }
.help-wizard-panel.is-enter-forward .help-os-tile,
.help-wizard-panel.is-enter-back .help-os-tile {
    animation: helpWizardTilePop 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.help-wizard-dot {
    transition: background 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.help-wizard-dot.is-active {
    animation: helpWizardDotPulse 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.help-wizard-nav-btn {
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.help-wizard-nav-btn.is-nav-pop {
    animation: helpWizardNavPop 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes helpWizardAuraSweep {
    0% { transform: translateX(-30%); opacity: 0; }
    25% { opacity: 1; }
    100% { transform: translateX(35%); opacity: 0; }
}
@keyframes helpWizardLeaveForward {
    0% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
    100% { opacity: 0; transform: translateX(-18%) scale(0.96); filter: blur(6px); }
}
@keyframes helpWizardLeaveBack {
    0% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
    100% { opacity: 0; transform: translateX(18%) scale(0.96); filter: blur(6px); }
}
@keyframes helpWizardEnterForward {
    0% { opacity: 0; transform: translateX(22%) scale(0.94); filter: blur(8px); }
    60% { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}
@keyframes helpWizardEnterBack {
    0% { opacity: 0; transform: translateX(-22%) scale(0.94); filter: blur(8px); }
    60% { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}
@keyframes helpWizardItemIn {
    0% { opacity: 0; transform: translateY(12px); filter: blur(4px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes helpWizardTilePop {
    0% { opacity: 0; transform: translateY(16px) scale(0.9); filter: blur(4px); }
    70% { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes helpWizardDotPulse {
    0% { transform: scale(1); }
    45% { transform: scale(1.55); }
    100% { transform: scale(1.15); }
}
@keyframes helpWizardNavPop {
    0% { opacity: 0; transform: translateY(8px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .help-wizard-body.is-magic-transit::before,
    .help-wizard-panel.is-leave-forward,
    .help-wizard-panel.is-leave-back,
    .help-wizard-panel.is-enter-forward,
    .help-wizard-panel.is-enter-back,
    .help-wizard-panel.is-enter-forward .help-wizard-title,
    .help-wizard-panel.is-enter-back .help-wizard-title,
    .help-wizard-panel.is-enter-forward .help-wizard-hint,
    .help-wizard-panel.is-enter-back .help-wizard-hint,
    .help-wizard-panel.is-enter-forward .help-os-grid,
    .help-wizard-panel.is-enter-forward .help-app-picker,
    .help-wizard-panel.is-enter-forward .help-download-row,
    .help-wizard-panel.is-enter-forward .help-wizard-primary-btn,
    .help-wizard-panel.is-enter-forward .help-wizard-secondary-btn,
    .help-wizard-panel.is-enter-back .help-os-grid,
    .help-wizard-panel.is-enter-back .help-app-picker,
    .help-wizard-panel.is-enter-back .help-download-row,
    .help-wizard-panel.is-enter-back .help-wizard-primary-btn,
    .help-wizard-panel.is-enter-back .help-wizard-secondary-btn,
    .help-wizard-panel.is-enter-forward .help-os-tile,
    .help-wizard-panel.is-enter-back .help-os-tile,
    .help-wizard-dot.is-active,
    .help-wizard-step.is-active .help-wizard-dot::after,
    .help-wizard-nav-btn.is-nav-pop {
        animation: none !important;
    }
}

.help-wizard-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}
.help-wizard-hint {
    margin: 0 0 14px;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--text-secondary);
}
.help-os-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.help-os-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 100px;
    padding: 14px 8px 12px;
    border-radius: 16px;
    border: 1px solid rgba(0, 240, 255, 0.14);
    background:
        linear-gradient(160deg, rgba(0, 240, 255, 0.1) 0%, rgba(0, 0, 0, 0.18) 58%),
        rgba(0, 0, 0, 0.22);
    color: var(--text-primary);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.help-os-tile:hover,
.help-os-tile:focus-visible {
    transform: translateY(-2px);
    outline: none;
    border-color: rgba(0, 240, 255, 0.4);
}
.help-os-tile.is-active {
    border-color: rgba(0, 240, 255, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 0 1px rgba(0, 240, 255, 0.16),
        0 10px 24px rgba(0, 240, 255, 0.14);
}
.help-os-icon-well {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.help-os-emoji {
    font-size: 1.6rem;
    line-height: 1;
    width: 1.45rem;
    height: 1.45rem;
    display: inline-flex;
    color: var(--text-primary);
}
.help-os-emoji .ui-icon-svg {
    width: 100%;
    height: 100%;
}
.help-os-name {
    font-size: 0.86rem;
    font-weight: 750;
}
.help-os-desc {
    display: none;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.2;
    text-align: center;
}
.help-os-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    opacity: 0;
    transform: scale(0.7);
    color: #059669;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.help-os-check .ui-icon-svg {
    width: 100%;
    height: 100%;
}
.help-os-tile.is-active .help-os-check {
    opacity: 1;
    transform: scale(1);
}
.help-wizard-lead {
    display: none;
    margin: 6px 0 0;
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--text-secondary);
    font-weight: 500;
}
.help-wizard-head-copy {
    min-width: 0;
    flex: 1;
}
html[data-theme="light"] .help-os-tile {
    background:
        linear-gradient(160deg, rgba(37, 99, 235, 0.07) 0%, rgba(255, 255, 255, 0.98) 62%),
        #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}
html[data-theme="light"] .help-os-icon-well {
    background: rgba(37, 99, 235, 0.06);
    border-color: rgba(37, 99, 235, 0.08);
}
html[data-theme="light"] .help-os-tile.is-active {
    border-color: rgba(37, 99, 235, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 0 0 1px rgba(37, 99, 235, 0.1),
        0 12px 24px rgba(37, 99, 235, 0.12);
}
.help-download-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    width: 100%;
}
.help-wizard-primary-btn,
.help-wizard-secondary-btn {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}
.help-wizard-primary-btn:not(.help-connect-magic-btn) {
    border: 1px solid rgba(0, 240, 255, 0.28);
    color: #041018;
    background: linear-gradient(135deg, #00e0ff 0%, #22d3a6 100%);
    box-shadow: 0 4px 14px rgba(0, 224, 255, 0.2);
}
.help-import-actions {
    display: grid;
    gap: 10px;
}
.help-import-primary,
.help-import-secondary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.help-import-primary .ui-icon,
.help-import-secondary .ui-icon,
.help-import-primary .ui-icon-svg,
.help-import-secondary .ui-icon-svg {
    width: 1.05rem;
    height: 1.05rem;
}
.help-connect-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.help-connect-aside {
    display: none;
}
.help-wizard-link-actions {
    grid-column: 2;
    justify-self: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
}
.help-wizard-link-actions[hidden] {
    display: none !important;
}
.help-connect-copy-btn,
.help-connect-share-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    grid-column: auto;
    justify-self: auto;
    width: auto;
    max-width: min(100%, 280px);
    flex: 0 1 auto;
    margin: 0 !important;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
}
.help-connect-copy-btn[hidden],
.help-connect-share-btn[hidden] {
    display: none !important;
}
.help-connect-copy-btn .ui-icon,
.help-connect-copy-btn .ui-icon-svg,
.help-connect-share-btn .ui-icon,
.help-connect-share-btn .ui-icon-svg {
    width: 1.05rem;
    height: 1.05rem;
}
.help-os-detected {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 650;
    color: #1d4ed8;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.12);
}
html:not([data-theme="light"]) .help-os-detected {
    color: var(--accent-color);
    background: rgba(0, 240, 255, 0.08);
    border-color: rgba(0, 240, 255, 0.16);
}

/* Магическая круглая кнопка «Подключить» */
.help-connect-orbit-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 32px 0 24px;
}
#help-connect-btn.help-connect-magic-btn,
.help-connect-orbit-wrap .help-connect-magic-btn {
    position: relative;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 148px !important;
    width: 148px !important;
    height: 148px !important;
    min-width: 148px !important;
    max-width: 148px !important;
    min-height: 148px !important;
    max-height: 148px !important;
    margin: 0 auto !important;
    padding: 16px !important;
    box-sizing: border-box;
    overflow: visible !important;
    isolation: isolate;
    border: none !important;
    border-radius: 50% !important;
    color: #04131a !important;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.15;
    text-align: center;
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.55) 0%, transparent 42%),
        linear-gradient(145deg, #5cf0ff 0%, #2de0c0 48%, #7c6cff 100%) !important;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.45),
        inset 0 -8px 18px rgba(4, 19, 26, 0.12),
        0 0 0 3px rgba(255, 255, 255, 0.12),
        0 12px 32px rgba(34, 211, 166, 0.32),
        0 6px 18px rgba(124, 108, 255, 0.22) !important;
    transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
#help-connect-btn.help-connect-magic-btn:hover,
#help-connect-btn.help-connect-magic-btn:focus-visible,
.help-connect-orbit-wrap .help-connect-magic-btn:hover,
.help-connect-orbit-wrap .help-connect-magic-btn:focus-visible {
    transform: scale(1.04);
    filter: brightness(1.05);
    outline: none;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.5),
        inset 0 -8px 18px rgba(4, 19, 26, 0.1),
        0 0 0 3px rgba(255, 255, 255, 0.18),
        0 16px 40px rgba(34, 211, 166, 0.4),
        0 8px 22px rgba(124, 108, 255, 0.28) !important;
}
#help-connect-btn.help-connect-magic-btn:active,
.help-connect-orbit-wrap .help-connect-magic-btn:active {
    transform: scale(0.97);
}
.help-connect-orbit {
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(0, 224, 255, 0.95);
    border-right-color: rgba(124, 108, 255, 0.55);
    border-bottom-color: transparent;
    border-left-color: rgba(34, 211, 166, 0.75);
    box-shadow:
        0 0 12px rgba(0, 224, 255, 0.25),
        inset 0 0 12px rgba(124, 108, 255, 0.08);
    animation: helpConnectOrbitSpin 2.4s linear infinite;
    pointer-events: none;
    z-index: 0;
}
.help-connect-orbit::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 8px #5cf0ff,
        0 0 16px rgba(0, 224, 255, 0.8);
}
.help-connect-orbit--slow {
    inset: -24px;
    border-width: 1.5px;
    border-top-color: rgba(124, 108, 255, 0.7);
    border-right-color: transparent;
    border-bottom-color: rgba(0, 224, 255, 0.55);
    border-left-color: rgba(34, 211, 166, 0.35);
    animation-duration: 4.2s;
    animation-direction: reverse;
    opacity: 0.85;
}
.help-connect-orbit--slow::before {
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    top: -3.5px;
    background: #c4b5fd;
    box-shadow:
        0 0 8px #7c6cff,
        0 0 14px rgba(124, 108, 255, 0.7);
}
.help-connect-magic-glow {
    position: absolute;
    inset: -8%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.4) 0%, transparent 58%);
    animation: helpConnectGlowPulse 2.4s ease-in-out infinite;
    pointer-events: none;
}
.help-connect-magic-core {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.35) 0%, transparent 40%);
    pointer-events: none;
}
.help-connect-magic-icon,
.help-connect-magic-label {
    position: relative;
    z-index: 2;
}
.help-connect-magic-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(4, 19, 26, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 2px 8px rgba(4, 19, 26, 0.08);
    font-size: 1.15rem;
    animation: helpConnectIconBob 2s ease-in-out infinite;
}
.help-connect-magic-label {
    max-width: 100px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

html[data-theme="light"] #help-connect-btn.help-connect-magic-btn,
html[data-theme="light"] .help-connect-orbit-wrap .help-connect-magic-btn {
    color: #052029 !important;
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.7) 0%, transparent 42%),
        linear-gradient(145deg, #4ee8ff 0%, #3ad4b0 48%, #8b7cff 100%) !important;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.7),
        inset 0 -8px 18px rgba(4, 19, 26, 0.08),
        0 0 0 3px rgba(255, 255, 255, 0.5),
        0 12px 30px rgba(45, 180, 200, 0.28),
        0 6px 16px rgba(124, 108, 255, 0.16) !important;
}
html[data-theme="light"] .help-connect-orbit {
    border-top-color: #22d3ee;
    border-right-color: rgba(99, 102, 241, 0.55);
    border-left-color: rgba(16, 185, 129, 0.7);
}

@keyframes helpConnectOrbitSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes helpConnectGlowPulse {
    0%, 100% { opacity: 0.55; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.05); }
}
@keyframes helpConnectIconBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
    .help-connect-magic-glow,
    .help-connect-orbit,
    .help-connect-orbit--slow,
    .help-connect-magic-icon {
        animation: none !important;
    }
}
.help-wizard-secondary-btn {
    margin-top: 8px;
    border: 1px solid rgba(0, 240, 255, 0.18);
    color: var(--text-primary);
    background:
        linear-gradient(145deg, rgba(0, 240, 255, 0.08) 0%, rgba(0, 0, 0, 0.18) 62%),
        rgba(0, 0, 0, 0.2);
}
.help-import-actions .help-wizard-secondary-btn {
    margin-top: 0;
}
html[data-theme="light"] .help-wizard-secondary-btn {
    background:
        linear-gradient(145deg, rgba(0, 85, 255, 0.06) 0%, rgba(255, 255, 255, 0.95) 64%),
        #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}
.help-wizard-nav {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
html[data-theme="light"] .help-wizard-nav {
    border-top-color: rgba(0, 0, 0, 0.06);
}
.help-wizard-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}
.help-wizard-nav-btn .ui-icon,
.help-wizard-nav-btn .ui-icon-svg {
    width: 1rem;
    height: 1rem;
}
.help-wizard-nav-btn[hidden] {
    display: none !important;
}
.help-wizard-nav-btn--back {
    justify-self: start;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.18);
    color: var(--text-primary);
}
.help-wizard-nav-btn--next {
    justify-self: end;
    grid-column: 3;
    margin-left: 0;
    border: none;
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #0ea5e9 100%);
    color: #fff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28);
}
html:not([data-theme="light"]) .help-wizard-nav-btn--next {
    background: linear-gradient(135deg, rgba(0, 224, 255, 0.95) 0%, rgba(34, 211, 166, 0.95) 100%);
    color: #041018;
    box-shadow: 0 8px 18px rgba(0, 224, 255, 0.22);
}
html[data-theme="light"] .help-wizard-nav-btn--back {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.08);
}
@media (max-width: 380px) {
    .help-os-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== ВЫБОР ПРИЛОЖЕНИЯ (карточки) ==================== */
.help-app-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 14px 0;
    padding: 0;
    width: 100%;
}
/* Одна карточка (только INCY) — полный featured-блок */
.help-app-picker:has(> .help-app-btn:only-child),
.help-app-picker.is-solo-app {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.help-app-mesh {
    display: none;
}
.help-app-border {
    display: none;
}

/* Idle-магия + новый layout для единственной INCY */
.help-app-picker.is-solo-app .help-app-btn.incy,
.help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    min-height: 132px;
    padding: 22px 22px 22px 20px;
    text-align: left;
    border-radius: 24px;
    border: 1px solid transparent;
    background:
        radial-gradient(ellipse 80% 90% at 12% 50%, rgba(99, 102, 241, 0.28), transparent 55%),
        radial-gradient(ellipse 70% 80% at 92% 20%, rgba(14, 165, 233, 0.18), transparent 50%),
        linear-gradient(135deg, rgba(24, 28, 52, 0.98) 0%, rgba(15, 18, 36, 0.96) 100%);
}
.help-app-picker.is-solo-app .help-app-btn.incy.active,
.help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy.active {
    position: relative;
    animation: helpAppSoloBreath 4.8s ease-in-out infinite;
    box-shadow:
        0 0 0 1px rgba(129, 140, 248, 0.35),
        0 18px 40px rgba(79, 70, 229, 0.22),
        0 8px 20px rgba(0, 0, 0, 0.2);
}
.help-app-picker.is-solo-app .help-app-btn.incy .help-app-mesh,
.help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy .help-app-mesh {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0.45;
    background-image:
        radial-gradient(circle at 18% 30%, rgba(255, 255, 255, 0.35) 0 1px, transparent 1.5px),
        radial-gradient(circle at 72% 22%, rgba(255, 255, 255, 0.28) 0 1px, transparent 1.5px),
        radial-gradient(circle at 88% 68%, rgba(255, 255, 255, 0.22) 0 1px, transparent 1.5px),
        radial-gradient(circle at 40% 78%, rgba(255, 255, 255, 0.2) 0 1px, transparent 1.5px),
        radial-gradient(circle at 58% 48%, rgba(167, 139, 250, 0.45) 0 1.2px, transparent 2px);
    animation: helpAppMeshDrift 12s ease-in-out infinite alternate;
}
.help-app-picker.is-solo-app .help-app-btn.incy .help-app-border,
.help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy .help-app-border {
    display: block;
    position: absolute;
    inset: -1px;
    z-index: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(
        from var(--help-app-angle, 0deg),
        rgba(99, 102, 241, 0.15),
        rgba(14, 165, 233, 0.85),
        rgba(167, 139, 250, 0.95),
        rgba(34, 211, 166, 0.7),
        rgba(99, 102, 241, 0.15)
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: helpAppBorderSpin 5.5s linear infinite;
}
.help-app-picker.is-solo-app .help-app-btn.incy.active::after,
.help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy.active::after {
    content: none;
}
.help-app-picker.is-solo-app .help-app-btn.incy .help-app-copy,
.help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy .help-app-copy {
    align-items: flex-start;
    text-align: left;
    flex: 1;
    min-width: 0;
    z-index: 1;
}
.help-app-picker.is-solo-app .help-app-btn.incy .help-app-name,
.help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy .help-app-name {
    font-size: 1.2rem;
    letter-spacing: 0.08em;
}
.help-app-picker.is-solo-app .help-app-btn.incy .help-app-meta,
.help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy .help-app-meta {
    font-size: 0.8rem;
    color: rgba(196, 181, 253, 0.95);
}
.help-app-picker.is-solo-app .help-app-btn.incy .help-app-logo-wrap,
.help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy .help-app-logo-wrap {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    flex-shrink: 0;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.28), transparent 45%),
        linear-gradient(160deg, rgba(99, 102, 241, 0.35), rgba(15, 23, 42, 0.4));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 12px 28px rgba(99, 102, 241, 0.35);
}
.help-app-picker.is-solo-app .help-app-btn.incy .help-app-logo,
.help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy .help-app-logo {
    width: 44px;
    height: 44px;
}
.help-app-picker.is-solo-app .help-app-btn.incy.active .help-app-glow,
.help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy.active .help-app-glow {
    opacity: 0.9;
    inset: -40% -10% auto -10%;
    height: 120%;
    animation: helpAppSoloGlowPulse 3.6s ease-in-out infinite;
}
.help-app-picker.is-solo-app .help-app-btn.incy.active .help-app-logo-wrap,
.help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy.active .help-app-logo-wrap {
    animation: helpAppSoloLogoPulse 3.2s ease-in-out infinite;
}
.help-app-picker.is-solo-app .help-app-btn.incy.active .help-app-shimmer,
.help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy.active .help-app-shimmer {
    opacity: 1;
}
.help-app-picker.is-solo-app .help-app-btn.incy.active:not(.is-magic-active) .help-app-shimmer::after,
.help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy.active:not(.is-magic-active) .help-app-shimmer::after {
    animation: helpAppIdleShimmer 5.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.help-app-picker.is-solo-app .help-app-btn.incy.active.is-magic-active,
.help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy.active.is-magic-active {
    animation: helpAppMagicPop 0.62s cubic-bezier(0.34, 1.45, 0.64, 1);
}
.help-app-picker.is-solo-app .help-app-btn.incy.active.is-magic-active .help-app-border,
.help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy.active.is-magic-active .help-app-border,
.help-app-picker.is-solo-app .help-app-btn.incy.active.is-magic-active .help-app-glow,
.help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy.active.is-magic-active .help-app-glow,
.help-app-picker.is-solo-app .help-app-btn.incy.active.is-magic-active .help-app-logo-wrap,
.help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy.active.is-magic-active .help-app-logo-wrap,
.help-app-picker.is-solo-app .help-app-btn.incy.active.is-magic-active .help-app-mesh,
.help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy.active.is-magic-active .help-app-mesh {
    animation: none;
}
html[data-theme="light"] .help-app-picker.is-solo-app .help-app-btn.incy,
html[data-theme="light"] .help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy {
    background:
        radial-gradient(ellipse 80% 90% at 10% 50%, rgba(99, 102, 241, 0.16), transparent 55%),
        radial-gradient(ellipse 70% 80% at 95% 15%, rgba(14, 165, 233, 0.12), transparent 50%),
        linear-gradient(145deg, #ffffff 0%, #f5f7ff 55%, #eef6ff 100%);
    box-shadow:
        0 0 0 1px rgba(99, 102, 241, 0.18),
        0 16px 36px rgba(37, 99, 235, 0.12);
}
html[data-theme="light"] .help-app-picker.is-solo-app .help-app-btn.incy .help-app-name,
html[data-theme="light"] .help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy .help-app-name {
    color: #0f172a;
}
html[data-theme="light"] .help-app-picker.is-solo-app .help-app-btn.incy .help-app-meta,
html[data-theme="light"] .help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy .help-app-meta {
    color: #6366f1;
}
html[data-theme="light"] .help-app-picker.is-solo-app .help-app-btn.incy .help-app-logo-wrap,
html[data-theme="light"] .help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy .help-app-logo-wrap {
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.95), transparent 45%),
        linear-gradient(160deg, #eef2ff, #e0e7ff);
    box-shadow:
        0 0 0 1px rgba(99, 102, 241, 0.14),
        0 10px 22px rgba(99, 102, 241, 0.18);
}
html[data-theme="light"] .help-app-picker.is-solo-app .help-app-btn.incy .help-app-mesh,
html[data-theme="light"] .help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy .help-app-mesh {
    opacity: 0.35;
    background-image:
        radial-gradient(circle at 18% 30%, rgba(99, 102, 241, 0.45) 0 1px, transparent 1.5px),
        radial-gradient(circle at 72% 22%, rgba(14, 165, 233, 0.4) 0 1px, transparent 1.5px),
        radial-gradient(circle at 88% 68%, rgba(99, 102, 241, 0.3) 0 1px, transparent 1.5px),
        radial-gradient(circle at 40% 78%, rgba(14, 165, 233, 0.28) 0 1px, transparent 1.5px);
}

@property --help-app-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes helpAppBorderSpin {
    to { --help-app-angle: 360deg; }
}
@keyframes helpAppMeshDrift {
    0% { transform: translate3d(0, 0, 0); opacity: 0.35; }
    100% { transform: translate3d(-2%, 3%, 0); opacity: 0.55; }
}
@keyframes helpAppSoloBreath {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.01); }
}
@keyframes helpAppSoloOrbit {
    0% { transform: rotate(0deg); opacity: 0.45; }
    50% { opacity: 0.8; }
    100% { transform: rotate(360deg); opacity: 0.45; }
}
@keyframes helpAppSoloGlowPulse {
    0%, 100% { opacity: 0.7; transform: scale(1.05); }
    50% { opacity: 0.95; transform: scale(1.14); }
}
@keyframes helpAppSoloLogoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
@keyframes helpAppIdleShimmer {
    0%, 72% { left: -60%; opacity: 0; }
    78% { opacity: 0.9; }
    92% { left: 130%; opacity: 0; }
    100% { left: 130%; opacity: 0; }
}
.help-wizard-card .help-app-picker {
    flex-wrap: unset;
}
.help-wizard-card .help-app-btn {
    flex: unset;
    min-width: 0;
}

.help-app-btn:not(.active) {
    opacity: 1;
    transform: none;
    filter: none;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.help-app-btn:not(.active) .help-app-glow {
    opacity: 0.1;
    transform: scale(0.95);
}

.help-app-btn:not(.active) .help-app-logo-wrap {
    opacity: 0.95;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.help-app-btn:not(.active) .help-app-name {
    color: var(--text-primary);
}
.help-app-btn:not(.active) .help-app-meta {
    color: var(--text-secondary);
}

.help-app-picker.is-switching .help-app-btn:not(.active) {
    opacity: 0.78;
    transform: scale(0.99);
}

.help-app-icon,
.help-app-hint {
    display: none !important;
}

.help-app-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    min-height: 138px;
    padding: 22px 14px 18px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        radial-gradient(ellipse 90% 55% at 50% 0%, rgba(255, 255, 255, 0.1), transparent 58%),
        linear-gradient(180deg, rgba(20, 28, 46, 0.92), rgba(12, 16, 28, 0.88));
    cursor: pointer;
    outline: none;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
        transform 0.28s cubic-bezier(0.34, 1.35, 0.64, 1),
        border-color 0.25s ease,
        box-shadow 0.28s ease,
        opacity 0.25s ease,
        filter 0.25s ease;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.help-app-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 14%;
    right: 14%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    pointer-events: none;
    z-index: 2;
}

.help-app-glow {
    position: absolute;
    inset: -50% -25% auto;
    height: 80%;
    opacity: 0.28;
    filter: blur(26px);
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.help-app-btn.happ .help-app-glow {
    background: radial-gradient(circle at 50% 80%, #00ff88 0%, #00b09b 45%, transparent 72%);
}

.help-app-btn.incy .help-app-glow {
    background: radial-gradient(circle at 50% 80%, #a78bfa 0%, #6366f1 48%, transparent 72%);
}

.help-app-shimmer {
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
}

.help-app-shimmer::after {
    content: '';
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: -60%;
    width: 42%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 35%,
        rgba(255, 255, 255, 0.75) 50%,
        rgba(255, 255, 255, 0.08) 65%,
        transparent 100%
    );
    transform: skewX(-16deg);
}

.help-app-btn.is-magic-active .help-app-shimmer {
    opacity: 1;
}

.help-app-btn.is-magic-active .help-app-shimmer::after {
    animation: helpAppShimmerSweep 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.help-app-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    opacity: 0;
    pointer-events: none;
}

.help-app-btn.is-magic-active .help-app-ring {
    animation: helpAppRingBurst 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.help-app-btn.happ.is-magic-active .help-app-ring {
    border-color: rgba(0, 255, 136, 0.9);
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.6);
}

.help-app-btn.incy.is-magic-active .help-app-ring {
    border-color: rgba(167, 139, 250, 0.95);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.55);
}

.help-app-sparkles {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.help-app-sparkle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
}

.help-app-btn.is-magic-active .help-app-sparkle:nth-child(1) { animation: helpAppSparkleFly1 0.7s ease-out forwards; }
.help-app-btn.is-magic-active .help-app-sparkle:nth-child(2) { animation: helpAppSparkleFly2 0.75s ease-out 0.04s forwards; }
.help-app-btn.is-magic-active .help-app-sparkle:nth-child(3) { animation: helpAppSparkleFly3 0.68s ease-out 0.02s forwards; }
.help-app-btn.is-magic-active .help-app-sparkle:nth-child(4) { animation: helpAppSparkleFly4 0.72s ease-out 0.06s forwards; }
.help-app-btn.is-magic-active .help-app-sparkle:nth-child(5) { animation: helpAppSparkleFly5 0.66s ease-out 0.03s forwards; }
.help-app-btn.is-magic-active .help-app-sparkle:nth-child(6) { animation: helpAppSparkleFly6 0.74s ease-out 0.05s forwards; }

.help-app-btn.is-magic-active {
    animation: helpAppMagicPop 0.62s cubic-bezier(0.34, 1.45, 0.64, 1);
}

@keyframes helpAppShimmerSweep {
    0% { left: -60%; opacity: 0; }
    15% { opacity: 1; }
    100% { left: 130%; opacity: 0; }
}

@keyframes helpAppRingBurst {
    0% { transform: scale(0.4); opacity: 0.95; }
    100% { transform: scale(7); opacity: 0; }
}

@keyframes helpAppMagicPop {
    0% { transform: scale(0.94); filter: brightness(1.35); }
    45% { transform: scale(1.04); filter: brightness(1.15); }
    100% { transform: scale(1); filter: brightness(1); }
}

@keyframes helpAppSparkleFly1 {
    0% { opacity: 0; transform: translate(0, 0) scale(0); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: translate(-22px, -18px) scale(1.2); }
}
@keyframes helpAppSparkleFly2 {
    0% { opacity: 0; transform: translate(0, 0) scale(0); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: translate(24px, -14px) scale(1); }
}
@keyframes helpAppSparkleFly3 {
    0% { opacity: 0; transform: translate(0, 0) scale(0); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: translate(-18px, 16px) scale(0.9); }
}
@keyframes helpAppSparkleFly4 {
    0% { opacity: 0; transform: translate(0, 0) scale(0); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: translate(20px, 18px) scale(1.1); }
}
@keyframes helpAppSparkleFly5 {
    0% { opacity: 0; transform: translate(0, 0) scale(0); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: translate(0, -24px) scale(0.85); }
}
@keyframes helpAppSparkleFly6 {
    0% { opacity: 0; transform: translate(0, 0) scale(0); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: translate(0, 22px) scale(1); }
}

.help-app-logo-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.28s ease;
}

.help-app-logo {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
}

.help-app-btn.happ .help-app-logo { background-image: url('img/happ.png'); }
.help-app-btn.v2r .help-app-logo { background-image: url('img/v2raytun.png'); }
.help-app-btn.incy .help-app-logo { background-image: url('img/incy.svg'); }

.help-app-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    max-width: 100%;
    pointer-events: none;
}

.help-app-name {
    display: block;
    max-width: 100%;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.15;
    color: #f1f5f9;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.help-app-meta {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.95);
    letter-spacing: 0.01em;
}

.help-app-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #052e16;
    background: linear-gradient(135deg, #86efac, #4ade80);
    box-shadow: 0 2px 8px rgba(74, 222, 128, 0.35);
    pointer-events: none;
}

.help-app-check {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--green-color);
    color: #04120c;
    opacity: 0;
    transform: scale(0.4) rotate(-20deg);
    transition: opacity 0.25s ease, transform 0.32s cubic-bezier(0.34, 1.5, 0.64, 1);
    pointer-events: none;
    box-shadow: 0 2px 10px rgba(0, 255, 136, 0.45);
}

.help-app-check svg {
    width: 10px;
    height: 10px;
}

.help-app-btn:hover:not(.active) {
    opacity: 0.58;
    transform: scale(0.99);
    border-color: rgba(255, 255, 255, 0.1);
    filter: saturate(0.5) brightness(0.88);
}

.help-app-btn:active {
    transform: scale(0.98);
}

.help-app-btn.active {
    transform: translateY(-2px) scale(1.01);
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.help-app-btn.happ.active {
    box-shadow:
        0 0 0 1.5px rgba(0, 255, 136, 0.5),
        0 0 20px rgba(0, 255, 136, 0.16),
        0 8px 22px rgba(0, 0, 0, 0.25);
}

.help-app-btn.incy.active {
    box-shadow:
        0 0 0 1.5px rgba(129, 140, 248, 0.55),
        0 0 20px rgba(99, 102, 241, 0.18),
        0 8px 22px rgba(0, 0, 0, 0.25);
}

.help-app-btn.active .help-app-glow {
    opacity: 0.72;
    transform: scale(1.08);
}

.help-app-btn.active .help-app-logo-wrap {
    transform: scale(1.05);
}

.help-app-btn.happ.active .help-app-logo-wrap {
    box-shadow:
        0 0 22px rgba(0, 255, 136, 0.35),
        0 8px 20px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.help-app-btn.incy.active .help-app-logo-wrap {
    box-shadow:
        0 0 22px rgba(129, 140, 248, 0.4),
        0 8px 20px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.help-app-btn.active .help-app-check {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

html[data-theme="light"] .help-app-btn {
    background:
        radial-gradient(ellipse 90% 55% at 50% 0%, rgba(255, 255, 255, 0.98), transparent 58%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .help-app-btn:not(.active) {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
    filter: none;
    opacity: 1;
}

html[data-theme="light"] .help-app-btn:not(.active) .help-app-name {
    color: #0f172a;
}
html[data-theme="light"] .help-app-btn:not(.active) .help-app-meta {
    color: #64748b;
}

html[data-theme="light"] .help-app-btn:not(.active) .help-app-logo-wrap {
    background: #f8fafc;
    opacity: 1;
}

html[data-theme="light"] .help-app-btn::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
}

html[data-theme="light"] .help-app-logo-wrap {
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .help-app-name {
    color: #0f172a;
}

html[data-theme="light"] .help-app-btn.happ.active {
    background:
        radial-gradient(ellipse 90% 55% at 50% 0%, rgba(0, 255, 136, 0.12), transparent 58%),
        #ffffff;
    box-shadow:
        0 0 0 1.5px rgba(0, 168, 89, 0.45),
        0 8px 24px rgba(0, 168, 89, 0.12);
}

html[data-theme="light"] .help-app-btn.incy.active {
    background:
        radial-gradient(ellipse 90% 55% at 50% 0%, rgba(99, 102, 241, 0.12), transparent 58%),
        #ffffff;
    box-shadow:
        0 0 0 1.5px rgba(99, 102, 241, 0.4),
        0 8px 24px rgba(99, 102, 241, 0.12);
}

@media (max-width: 380px) {
    .help-app-picker {
        gap: 8px;
    }
    .help-app-btn {
        min-height: 108px;
        padding: 16px 8px 12px;
        gap: 8px;
    }
    .help-app-logo-wrap {
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }
    .help-app-logo {
        width: 28px;
        height: 28px;
    }
    .help-app-name {
        font-size: 0.82rem;
    }
    .help-app-meta {
        font-size: 0.66rem;
    }
    .help-app-badge {
        top: 8px;
        left: 8px;
        padding: 2px 6px;
        font-size: 0.55rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .setup-steps-wrapper.is-magic-reveal::after,
    .step-card.is-step-magic-in,
    .help-download-btn.is-step-magic-in,
    #help-connect-btn.is-step-magic-in {
        animation: none !important;
    }

    .help-wizard-glow,
    .help-wizard-aurora,
    .help-wizard-aurora--alt,
    .help-wizard-step.is-active .help-wizard-dot::after,
    .help-wizard-step.is-done:not(:last-child)::after,
    .help-wizard-step.is-active:not(:last-child)::after,
    .help-app-picker.is-solo-app .help-app-btn.incy.active,
    .help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy.active,
    .help-app-picker.is-solo-app .help-app-btn.incy .help-app-border,
    .help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy .help-app-border,
    .help-app-picker.is-solo-app .help-app-btn.incy .help-app-mesh,
    .help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy .help-app-mesh,
    .help-app-picker.is-solo-app .help-app-btn.incy.active .help-app-glow,
    .help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy.active .help-app-glow,
    .help-app-picker.is-solo-app .help-app-btn.incy.active .help-app-logo-wrap,
    .help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy.active .help-app-logo-wrap,
    .help-app-picker.is-solo-app .help-app-btn.incy.active:not(.is-magic-active) .help-app-shimmer::after,
    .help-app-picker:has(> .help-app-btn:only-child) .help-app-btn.incy.active:not(.is-magic-active) .help-app-shimmer::after,
    #help-page #install-app-actions .help-download-btn,
    #help-page #install-app-actions .help-download-aura,
    #help-page #install-app-actions .help-download-sheen::after,
    #help-page #install-app-actions .help-download-icon {
        animation: none !important;
    }

    .help-app-btn,
    .help-app-glow,
    .help-app-logo-wrap,
    .help-app-check,
    .help-app-picker.is-switching .help-app-btn:not(.active) {
        transition: none;
        animation: none;
    }

    .help-app-btn:not(.active) {
        opacity: 0.65;
        transform: none;
        filter: grayscale(0.2);
    }

    .help-app-btn.active {
        opacity: 1;
        transform: none;
        filter: none;
    }
    .help-app-btn.is-magic-active,
    .help-app-btn.is-magic-active .help-app-shimmer::after,
    .help-app-btn.is-magic-active .help-app-ring,
    .help-app-btn.is-magic-active .help-app-sparkle {
        animation: none !important;
    }
    .help-app-btn:hover:not(.active),
    .help-app-btn.active {
        transform: none;
    }
}

/* Стили для блока устройств */
.pay-sheet-heading {
    margin: 2px 0 10px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: left;
}

#devices-page .devices-list-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 8px;
}

.devices-page-card {
    padding-top: 18px;
    padding-bottom: 18px;
}
.devices-page-title {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
}
.devices-page-subtitle {
    margin: 0 0 16px;
}

#devices-page .device-row {
    padding: 10px 2px;
    gap: 10px;
}

#devices-page .device-name {
    font-size: 0.92rem;
    font-weight: 600;
}

#devices-page .device-status {
    font-size: 0.75rem;
}

#devices-page .device-emoji {
    font-size: 1.35rem;
}

#devices-page #devices-sheet-add-btn {
    margin-top: 6px !important;
}

/* Hide legacy homepage devices block if somehow left */
#home-page > .devices-card:not(.home-devices-compact),
#home-page #home-devices-section.info-card {
    display: none !important;
}

/* Компактный блок устройств на главной */
.home-devices-compact {
    padding: 12px 14px;
    margin-bottom: 1.25rem;
}
.home-devices-compact-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 2px 10px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
html[data-theme="light"] .home-devices-compact-head {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}
.home-devices-compact-titles {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.home-devices-compact-label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.home-devices-compact-count {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}
.home-devices-compact-chevron {
    color: #6ee7b7;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0.75;
}
.home-devices-compact-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.home-devices-compact .device-row--compact {
    padding: 8px 0;
    gap: 8px;
}
.home-devices-compact .device-emoji {
    font-size: 1.15rem;
    width: 1.5rem;
    text-align: center;
}
.home-devices-compact .device-name {
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
}
.home-devices-compact .device-status {
    font-size: 0.68rem;
    opacity: 0.75;
    line-height: 1.2;
}
.home-devices-compact .delete-device-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.home-devices-empty {
    padding: 10px 0 6px;
    font-size: 0.8rem;
}
.home-devices-more-btn {
    width: 100%;
    margin-top: 4px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(52, 211, 153, 0.28);
    background: rgba(16, 185, 129, 0.08);
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}
.home-devices-compact-add {
    width: 100%;
    margin-top: 8px;
    min-height: 40px;
    border-radius: 11px;
    border: 1px solid rgba(52, 211, 153, 0.32);
    background:
        linear-gradient(145deg, rgba(16, 185, 129, 0.14) 0%, rgba(0, 0, 0, 0.12) 64%),
        rgba(0, 0, 0, 0.15);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}
html[data-theme="light"] .home-devices-compact-add {
    background:
        linear-gradient(145deg, rgba(16, 185, 129, 0.12) 0%, rgba(255, 255, 255, 0.95) 64%),
        #ffffff;
    border-color: rgba(16, 185, 129, 0.28);
}
html[data-theme="light"] .home-devices-more-btn {
    background: rgba(16, 185, 129, 0.08);
}

.devices-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.add-device-btn {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid #00ff88;
    color: #00ff88;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.add-device-btn:hover {
    background: #00ff88;
    color: #000;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
}

.plus-icon {
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
}

.device-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

/* Главная: уведомления + компактная сетка действий */
.home-quick-actions-card {
    margin-bottom: 1.25rem;
    padding-top: 12px;
    padding-bottom: 12px;
}
.home-quick-actions-card .card-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0;
}
.home-notify-shell {
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 240, 255, 0.1);
}
html[data-theme="light"] .home-notify-shell {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.06);
}
.home-notify-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 42px;
    min-height: 42px;
    padding: 0 12px;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    transition: background 0.25s ease;
}
.home-notify-header.is-expanded {
    border-bottom: 1px solid rgba(0, 240, 255, 0.12);
}
html[data-theme="light"] .home-notify-header.is-expanded {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}
.home-notify-title {
    flex: 1;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}
.home-notify-master-switch {
    flex-shrink: 0;
    transform: scale(0.92);
    transform-origin: right center;
}
.home-notify-expand {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-notify-expand.is-open {
    grid-template-rows: 1fr;
}
.home-notify-details {
    overflow: hidden;
    min-height: 0;
    padding: 0 12px;
    transition: padding 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-notify-expand.is-open .home-notify-details {
    padding: 10px 12px 12px;
}
.home-notify-details .account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
}
.home-notify-details .account-label {
    margin: 0;
}
.home-notify-email-section .account-inline-form {
    margin-top: 4px;
}
.home-notify-days-row {
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px;
    padding-top: 0 !important;
}

.home-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.home-action-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 68px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0, 240, 255, 0.18);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.15;
    cursor: pointer;
    overflow: hidden;
    text-align: left;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    background: rgba(0, 0, 0, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.home-action-btn:hover,
.home-action-btn:focus-visible {
    transform: translateY(-1px);
    outline: none;
}
.home-action-btn:active {
    transform: translateY(0) scale(0.98);
}

.btn-renew {
    background:
        linear-gradient(145deg, rgba(0, 176, 155, 0.16) 0%, rgba(0, 0, 0, 0.2) 62%),
        rgba(0, 0, 0, 0.22);
    border-color: rgba(52, 211, 153, 0.32);
}
.btn-device {
    background:
        linear-gradient(145deg, rgba(16, 185, 129, 0.14) 0%, rgba(0, 0, 0, 0.2) 62%),
        rgba(0, 0, 0, 0.22);
    border-color: rgba(52, 211, 153, 0.3);
}
.btn-traffic {
    background:
        linear-gradient(145deg, rgba(245, 158, 11, 0.14) 0%, rgba(0, 0, 0, 0.2) 62%),
        rgba(0, 0, 0, 0.22);
    border-color: rgba(251, 191, 36, 0.34);
}
.btn-news {
    background:
        linear-gradient(145deg, rgba(139, 92, 246, 0.14) 0%, rgba(0, 0, 0, 0.2) 62%),
        rgba(0, 0, 0, 0.22);
    border-color: rgba(167, 139, 250, 0.34);
}

.btn-renew:hover,
.btn-renew:focus-visible {
    border-color: rgba(52, 211, 153, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 4px 12px rgba(0, 176, 155, 0.12);
}
.btn-device:hover,
.btn-device:focus-visible {
    border-color: rgba(52, 211, 153, 0.48);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 4px 12px rgba(16, 185, 129, 0.12);
}
.btn-traffic:hover,
.btn-traffic:focus-visible {
    border-color: rgba(251, 191, 36, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 4px 12px rgba(245, 158, 11, 0.12);
}
.btn-news:hover,
.btn-news:focus-visible {
    border-color: rgba(167, 139, 250, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 4px 12px rgba(139, 92, 246, 0.12);
}

.home-action-btn-label {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    text-align: left;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-primary);
}

.home-news-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.65rem;
    font-weight: 800;
    color: #fff;
    background: #ff3b30;
    border: 2px solid rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.45);
    pointer-events: none;
    z-index: 2;
}

.home-news-badge.is-visible {
    display: inline-flex;
}

.home-news-badge[hidden] {
    display: none !important;
}

.news-item--unread .news-item-title::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 8px;
    border-radius: 50%;
    background: #ff3b30;
    vertical-align: middle;
    box-shadow: 0 0 8px rgba(255, 59, 48, 0.5);
}

.btn-emoji {
    position: relative;
    z-index: 1;
    font-size: 1.05rem;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    backdrop-filter: blur(5px);
    color: var(--text-primary);
}
.btn-emoji .ui-icon-svg,
.btn-emoji.ui-icon .ui-icon-svg {
    width: 1.05rem;
    height: 1.05rem;
}
.btn-renew .btn-emoji {
    background: rgba(0, 176, 155, 0.18);
    box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.28);
}
.btn-device .btn-emoji {
    background: rgba(16, 185, 129, 0.16);
    box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.26);
}
.btn-traffic .btn-emoji {
    background: rgba(245, 158, 11, 0.16);
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.28);
}
.btn-news .btn-emoji {
    background: rgba(139, 92, 246, 0.16);
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.28);
}

html[data-theme="light"] .home-action-btn {
    color: var(--text-primary);
    background: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 2px 8px rgba(0, 0, 0, 0.05);
}
html[data-theme="light"] .btn-renew {
    background:
        linear-gradient(145deg, rgba(0, 176, 155, 0.1) 0%, rgba(255, 255, 255, 0.94) 64%),
        #ffffff;
    border-color: rgba(0, 176, 155, 0.24);
}
html[data-theme="light"] .btn-device {
    background:
        linear-gradient(145deg, rgba(16, 185, 129, 0.1) 0%, rgba(255, 255, 255, 0.94) 64%),
        #ffffff;
    border-color: rgba(16, 185, 129, 0.24);
}
html[data-theme="light"] .btn-traffic {
    background:
        linear-gradient(145deg, rgba(245, 158, 11, 0.12) 0%, rgba(255, 255, 255, 0.94) 64%),
        #ffffff;
    border-color: rgba(217, 119, 6, 0.24);
}
html[data-theme="light"] .btn-news {
    background:
        linear-gradient(145deg, rgba(99, 102, 241, 0.1) 0%, rgba(255, 255, 255, 0.94) 64%),
        #ffffff;
    border-color: rgba(99, 102, 241, 0.24);
}
html[data-theme="light"] .home-action-btn-label {
    color: var(--text-primary);
}
html[data-theme="light"] .btn-renew .btn-emoji {
    background: rgba(0, 176, 155, 0.12);
    box-shadow: inset 0 0 0 1px rgba(0, 176, 155, 0.22);
}
html[data-theme="light"] .btn-device .btn-emoji {
    background: rgba(16, 185, 129, 0.12);
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.2);
}
html[data-theme="light"] .btn-traffic .btn-emoji {
    background: rgba(245, 158, 11, 0.12);
    box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.2);
}
html[data-theme="light"] .btn-news .btn-emoji {
    background: rgba(99, 102, 241, 0.12);
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.2);
}

.device-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.device-emoji {
    font-size: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px;
    border-radius: 12px;
    min-width: 40px;
    min-height: 40px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    box-sizing: border-box;
}
.device-emoji .ui-icon-svg {
    width: 1.25rem;
    height: 1.25rem;
}

.device-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.device-status {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.delete-device-btn {
    background: rgba(255, 68, 68, 0.1);
    border: none;
    padding: 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    color: #ff4444;
}

.delete-device-btn:hover {
    background: rgba(255, 68, 68, 0.25);
    transform: scale(1.05);
}

.trash-icon,
.delete-device-btn .ui-icon,
.delete-device-btn .ui-icon-svg,
.trash-icon .ui-icon-svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    color: #ff4444;
}

/* Адаптивность для маленьких экранов */
@media (max-width: 360px) {
    .device-emoji { display: none; }
}

/* Модальное окно добавление дополнительных устрйоств */
.modal-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 10000;
    padding: max(12px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 16px)) max(14px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
}

/* ==================== МОДАЛЬНЫЕ ОКНА (УНИВЕРСАЛЬНЫЕ) ==================== */
.modal-content {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--separator-color);
    border-radius: 28px;
    width: 100%;
    max-width: 380px;
    padding: 32px 24px 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5), inset 0 0 15px rgba(0, 240, 255, 0.05);
    position: relative;
    margin: 12px auto 28px;
    flex-shrink: 0;
    animation: modalSlide 0.3s ease-out;
    color: var(--text-primary);
}

@keyframes modalSlide {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Красивый интерактивный крестик */
.close-modal-icon {
    position: absolute; top: 16px; right: 16px; width: 32px; height: 32px;
    background: rgba(255, 255, 255, 0.1); border: none; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary); transition: all 0.2s; z-index: 10001; padding: 7px;
}
.close-modal-icon:hover { background: rgba(255, 255, 255, 0.2); color: var(--text-primary); transform: rotate(90deg); }
.close-modal-icon svg { width: 100%; height: 100%; }

.modal-header h3 { margin: 0; font-size: 1.3rem; font-weight: 700; color: var(--text-primary); }
.modal-description { color: var(--text-secondary); font-size: 0.95rem; margin: 12px 0 24px; }

.first-login-modal-content .email-input {
    margin-bottom: 10px;
}

.first-login-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

/* Подтверждение email после регистрации */
.verify-email-overlay {
    align-items: center;
    padding-top: max(16px, env(safe-area-inset-top, 0px));
    padding-bottom: max(24px, env(safe-area-inset-bottom, 20px));
}

.verify-email-overlay.is-open {
    display: flex;
}

.verify-email-modal-content {
    width: min(92vw, 440px);
    max-width: none;
    padding: 28px 22px 22px;
    margin: auto;
    animation: verifyEmailModalIn 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes verifyEmailModalIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.verify-email-hero {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.verify-email-icon-ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 176, 155, 0.25), rgba(150, 201, 61, 0.2));
    border: 1px solid rgba(0, 255, 136, 0.35);
    box-shadow: 0 0 24px rgba(0, 255, 136, 0.15);
    animation: verifyEmailPulse 2.4s ease-in-out infinite;
}

@keyframes verifyEmailPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 24px rgba(0, 255, 136, 0.15); }
    50% { transform: scale(1.04); box-shadow: 0 0 32px rgba(0, 255, 136, 0.28); }
}

.verify-email-icon {
    width: 32px;
    height: 32px;
    color: var(--green-color);
}

.verify-email-header {
    text-align: center;
}

.verify-email-header h3 {
    font-size: 1.35rem;
}

.verify-email-desc {
    text-align: center;
    margin: 8px 0 12px;
    line-height: 1.45;
}

.verify-email-email-badge {
    margin: 0 0 18px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(0, 240, 255, 0.08);
    border: 1px solid rgba(0, 240, 255, 0.2);
    color: var(--accent-color);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    word-break: break-all;
}

html[data-theme="light"] .verify-email-email-badge {
    background: rgba(0, 85, 255, 0.06);
    border-color: rgba(0, 85, 255, 0.18);
}

.verify-email-code-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.verify-email-code-input {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: 1.65rem !important;
    font-weight: 700;
    letter-spacing: 0.35em;
    padding: 16px 12px !important;
    border-radius: 16px !important;
    margin-bottom: 14px;
}

.verify-email-resend-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    margin: 4px 0 10px;
}

.verify-email-resend-btn {
    flex: 1 1 auto;
    min-width: 0;
}

.verify-email-resend-timer {
    flex: 1 1 100%;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.verify-email-error {
    min-height: 20px;
    color: var(--red-color);
    font-size: 0.85rem;
    text-align: center;
    margin-bottom: 6px;
}

.verify-email-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.verify-email-confirm-btn {
    width: 100%;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
}

.verify-email-btn-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: authSpin 0.75s linear infinite;
}

.verify-email-modal-content.is-busy .verify-email-confirm-btn .verify-email-btn-spinner {
    display: inline-block;
}

.verify-email-modal-content.is-busy .verify-email-code-input,
.verify-email-modal-content.is-busy .verify-email-resend-btn,
.verify-email-modal-content.is-busy #verify-email-cancel-btn,
.verify-email-modal-content.is-busy #verify-email-close-btn {
    pointer-events: none;
    opacity: 0.65;
}

@media (max-width: 480px) {
    .verify-email-modal-content {
        width: min(94vw, 100%);
        padding: 24px 18px 18px;
        border-radius: 22px;
        margin: auto 0;
    }

    .verify-email-code-input {
        font-size: 1.45rem !important;
        letter-spacing: 0.28em;
        padding: 14px 10px !important;
    }

    .verify-email-resend-row {
        flex-direction: column;
    }

    .verify-email-resend-btn {
        width: 100%;
    }
}

.first-login-error {
    min-height: 18px;
    color: var(--red-color);
    font-size: 0.85rem;
    margin-top: 2px;
    margin-bottom: 6px;
}

.offer-accept-modal-content {
    width: min(92vw, 820px);
    max-height: calc(100dvh - 12px);
    display: flex;
    flex-direction: column;
    padding-top: 22px;
    padding-bottom: 14px;
}

.offer-accept-content {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--separator-color);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.03);
}

.offer-accept-modal-content .modal-description {
    margin: 8px 0 12px;
}

.offer-accept-content .legal-doc-page {
    padding: 0;
    background: transparent;
    max-width: 100%;
}

.offer-accept-content .legal-doc-page h2 {
    font-size: 1.2rem;
    margin-top: 2px;
}

.offer-accept-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 2px 0 4px;
    color: var(--text-primary);
    font-size: 0.88rem;
    line-height: 1.25;
}

.offer-accept-checkbox-row input[type="checkbox"] {
    margin-top: 3px;
}

.offer-accept-modal-content .first-login-actions {
    flex-direction: row;
    margin-top: 6px;
}

.offer-accept-modal-content .first-login-actions .confirm-btn {
    width: 100%;
}

/* В обязательной модалке оставляем только внутренний скролл документа */
#public-offer-accept-modal {
    overflow: hidden;
    align-items: center;
}

@media (max-width: 768px) {
    #public-offer-accept-modal {
        padding: max(8px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 8px)) max(10px, env(safe-area-inset-left, 0px));
    }
    .offer-accept-modal-content {
        margin: 0 auto;
        max-height: calc(100dvh - 8px);
        border-radius: 18px;
        padding-top: 18px;
        padding-bottom: 10px;
    }
}

/* Плюс/Минус */
.quantity-selector { display: flex; justify-content: space-between; background: rgba(0,0,0,0.3); padding: 8px; border-radius: 16px; margin-bottom: 24px; border: 1px solid var(--separator-color); }
.qty-btn { width: 46px; height: 46px; border-radius: 12px; border: none; background: rgba(255,255,255,0.1); color: var(--text-primary); font-size: 20px; font-weight: bold; cursor: pointer; transition: 0.2s; }
.qty-btn:hover { background: rgba(255,255,255,0.2); }
#device-quantity { border: none; background: none; font-size: 1.4rem; font-weight: 700; width: 60px; text-align: center; color: var(--text-primary); }

/* Цена и футер */
.price-info { border-top: 1px solid var(--separator-color); padding-top: 20px; margin-bottom: 24px; }
.price-row { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--text-secondary); }
.total { color: var(--text-primary); font-weight: 700; font-size: 1.1rem; }
.total-val { color: var(--green-color); }

.modal-footer { display: flex; gap: 12px; }
.btn-pay { flex: 2; background: linear-gradient(135deg, #0055ff, #00f0ff); color: #fff; border: none; padding: 16px; border-radius: 16px; font-weight: 600; cursor: pointer; transition: 0.2s; }
.btn-pay:hover { box-shadow: 0 0 15px rgba(0, 240, 255, 0.4); }
.btn-cancel { flex: 1; background: rgba(255,255,255,0.1); color: var(--text-primary); border: none; padding: 16px; border-radius: 16px; cursor: pointer; transition: 0.2s; }
.btn-cancel:hover { background: rgba(255,255,255,0.2); }

/* Мобильная адаптация модалок */
@media (max-width: 480px) {
    .modal-content {
        width: 100%;
        max-width: none;
        padding: 26px 18px 20px;
        border-radius: 20px;
        margin-top: 8px;
        margin-bottom: max(24px, env(safe-area-inset-bottom, 0px));
    }
    .modal-overlay .email-input.compact-input,
    .modal-overlay .compact-input {
        font-size: 16px;
    }
}

/* Светлая тема для модалок */
html[data-theme="light"] .modal-content { background: rgba(255, 255, 255, 0.95); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
html[data-theme="light"] .close-modal-icon { background: #f0f0f2; color: #8e8e93; }
html[data-theme="light"] .close-modal-icon:hover { background: #e5e5ea; color: #000; }
html[data-theme="light"] .quantity-selector { background: #f2f2f7; border: none; }
html[data-theme="light"] .qty-btn { background: #fff; color: #000; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
html[data-theme="light"] .btn-cancel { background: #f2f2f7; color: #666; }
html[data-theme="light"] .btn-cancel:hover { background: #e5e5ea; }


/* ==================== КРАСИВЫЙ СЧЕТЧИК (GLASSMORPHISM) ==================== */
.glass-quantity-selector {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--separator-color);
    border-radius: 20px;
    padding: 6px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

html[data-theme="light"] .glass-quantity-selector {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.03);
}

.glass-qty-btn {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.glass-qty-btn:hover {
    background: rgba(0, 240, 255, 0.15);
    color: var(--accent-color);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

html[data-theme="light"] .glass-qty-btn {
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

html[data-theme="light"] .glass-qty-btn:hover {
    background: rgba(0, 85, 255, 0.05);
    color: var(--accent-color);
}

#page-device-quantity,
#traffic-package-quantity {
    width: 50px;
    text-align: center;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.4rem;
    font-weight: 700;
    outline: none;
    pointer-events: none; 
    
    /* Новые правила для идеальной центровки */
    padding: 0;
    margin: 0;
    height: 44px; /* Высота как у кнопок + и - */
    line-height: 44px; /* Выравнивание по вертикали */
    appearance: textfield; /* Стандартное свойство для совместимости */
    -moz-appearance: textfield; /* Убираем системные стрелки в Firefox */
}

/* Убираем системные стрелки (спиннеры) в Chrome/Safari/Edge */
#page-device-quantity::-webkit-outer-spin-button,
#page-device-quantity::-webkit-inner-spin-button,
#traffic-package-quantity::-webkit-outer-spin-button,
#traffic-package-quantity::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* ==================== УБИВАЕМ СИСТЕМНЫЕ АРТЕФАКТЫ БРАУЗЕРОВ ==================== */
input::-webkit-contacts-auto-fill-button, 
input::-webkit-credentials-auto-fill-button,
input::-webkit-calendar-picker-indicator,
input::-webkit-caps-lock-indicator {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
/* ==================== АНИМАЦИИ РАСКРЫТИЯ (ПЛАВНЫЙ ВЫЕЗД) ==================== */
.smooth-expand {
    overflow: hidden;
    transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    max-height: 350px; /* С запасом для формы пароля */
    opacity: 1;
    transform: translateY(0);
}

.smooth-hidden {
    max-height: 0 !important;
    opacity: 0 !important;
    transform: translateY(-10px) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: none !important;
    pointer-events: none !important;
}

/* Анимация "дыхания" карточки при переключении */
.auth-card {
    transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.auth-card.switching {
    transform: scale(0.97);
}

/* Анимация смены текста на кнопке */
.pay-btn-main { transition: 0.3s; }
.text-switch-out { opacity: 0; transform: translateY(-10px); }
.text-switch-in { opacity: 0; transform: translateY(10px); }



/* Адаптация нижней панели для мобильных экранов */
@media (max-width: 480px) {
    #bottom-nav {
        width: calc(100% - 10px); /* Делаем панель чуть шире, уменьшая отступы от краев экрана */
        padding: 6px 4px; /* Уменьшаем внутренние отступы самой плашки */
    }
    
    .nav-btn {
        padding: 6px 0; /* Убираем лишние боковые отступы у кнопок */
        margin: 0; /* Убираем margin */
    }
    
    .nav-label {
        font-size: 0.55rem; /* Делаем шрифт чуть мельче (около 9px) */
        white-space: normal; /* Разрешаем тексту переноситься на несколько строк */
        word-wrap: break-word; /* Чтобы слова переносились корректно */
        padding: 0 2px; /* Минимальный отступ, чтобы буквы не слипались */
    }
    
    /* Немного уменьшаем иконки, чтобы освободить место тексту */
    .nav-icon {
        font-size: 1.3rem; 
    }
}
/* ==================== РАСШИФРОВКА СТОИМОСТИ (ЧЕК) В ТАРИФАХ ==================== */
.plan-receipt {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 4px 0 8px 0;
}

html[data-theme="light"] .plan-receipt {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.05);
}

.receipt-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.receipt-row:last-child {
    margin-bottom: 0;
}

.receipt-row .label {
    display: flex;
    flex-direction: column;
}

.receipt-row .label-sub {
    font-size: 0.75rem;
    opacity: 0.6;
    margin-top: 2px;
}

.receipt-row .value {
    color: var(--text-primary);
    font-weight: 600;
}

/* Договор оферты / лицензия — читаемо в светлой и тёмной теме */
.legal-doc-page {
    padding: 20px;
    max-width: 100%;
    overflow-y: auto;
    color: var(--text-primary);
}

.legal-doc-page h2 {
    text-align: center;
    margin-bottom: 5px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}
.legal-doc-page h2 .ui-icon .ui-icon-svg {
    width: 1.15rem;
    height: 1.15rem;
    color: var(--accent-color);
}

.legal-doc-subtitle {
    text-align: center;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--text-secondary);
}

.legal-doc-back {
    background: var(--accent-color);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 15px;
    font-size: 14px;
}

.legal-doc-card {
    background: var(--card-bg);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--separator-color);
    color: var(--text-primary);
}

.legal-doc-card h3 {
    color: var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 10px;
    margin-top: 0;
}

.legal-doc-card p,
.legal-doc-card li,
.legal-doc-card ul {
    color: var(--text-primary);
}

.legal-doc-card a,
.legal-doc-inline-link {
    color: var(--accent-color);
    font-weight: 600;
    text-decoration: none;
}

.legal-doc-card a:hover,
.legal-doc-inline-link:hover {
    text-decoration: underline;
}

.legal-doc-footer {
    background: var(--card-bg);
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    border: 2px solid var(--accent-color);
    color: var(--text-primary);
}

.legal-doc-footer p,
.legal-doc-footer h4 {
    color: var(--text-primary);
}

.news-page-title {
    margin: 0 0 6px 0;
}

.news-page-subtitle {
    margin-bottom: 14px;
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.news-item {
    border: 1px solid var(--separator-color);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.18);
    padding: 14px;
}

html[data-theme="light"] .news-item {
    background: rgba(0, 0, 0, 0.02);
}

.news-item-title {
    margin: 0 0 8px 0;
    font-size: 1.02rem;
    color: var(--text-primary);
}

.news-item-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.news-item-body {
    white-space: normal;
    line-height: 1.55;
    color: var(--text-primary);
}

.news-item-body a,
.news-item-link {
    color: var(--accent-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}

.news-item-body a:hover,
.news-item-link:hover {
    opacity: 0.88;
}

.news-item--collapsible {
    padding: 0;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}

.news-item-toggle {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    padding: 14px;
    transition: background 0.25s ease;
}

.news-item-snippet {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.45;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-item-expanded {
    border-top: 1px solid var(--separator-color);
    display: none;
    padding: 12px 14px 14px;
}

.news-item-expanded-inner {
    overflow: visible;
}

.news-item--collapsible .news-item-date {
    margin-bottom: 6px;
}

.news-item--collapsible:hover {
    transform: translateY(-2px);
}

.news-item--collapsible:hover .news-item-toggle {
    background: rgba(255, 255, 255, 0.02);
}

.news-item--collapsible.is-expanded {
    border-color: rgba(0, 240, 255, 0.38);
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.12), 0 10px 26px rgba(0, 240, 255, 0.1);
    background: linear-gradient(180deg, rgba(0, 240, 255, 0.045), rgba(0, 0, 0, 0.16));
}

.news-item--collapsible.is-expanded .news-item-expanded {
    display: block;
    animation: newsReveal 0.35s ease;
}

@keyframes newsReveal {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

html[data-theme="light"] .news-item--collapsible:hover .news-item-toggle {
    background: rgba(0, 0, 0, 0.02);
}

html[data-theme="light"] .news-item--collapsible.is-expanded {
    border-color: rgba(23, 127, 255, 0.35);
    box-shadow: 0 0 0 1px rgba(23, 127, 255, 0.1), 0 10px 24px rgba(23, 127, 255, 0.12);
    background: linear-gradient(180deg, rgba(23, 127, 255, 0.06), rgba(255, 255, 255, 0.9));
}

.news-preview-card {
    border: 1px solid var(--separator-color);
    border-radius: 14px;
    background: var(--card-bg);
    padding: 14px;
}

html[data-theme="light"] .news-preview-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
}

.news-preview-empty {
    color: var(--text-secondary);
}

.news-preview-actions {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

#support-page .support-account-section {
    margin-top: 26px;
}

#support-page .support-account-card {
    margin-top: 10px;
}

#support-page .support-account-card .card-details {
    padding-top: 2px;
}

.news-page-head {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 8px;
}

.news-back-btn {
    width: auto;
    min-width: 120px;
}

.traffic-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 8px;
}

/* ========== Traffic dashboard (stats page) ========== */
.traffic-dashboard-card {
    position: relative;
    overflow: hidden;
    padding: 18px 16px 16px;
    border-radius: 22px;
}

.traffic-dashboard-glow {
    position: absolute;
    inset: -30% auto auto -20%;
    width: 70%;
    height: 100%;
    pointer-events: none;
    background:
        radial-gradient(circle at 30% 30%, rgba(0, 240, 255, 0.1), transparent 55%),
        radial-gradient(circle at 80% 10%, rgba(59, 130, 246, 0.08), transparent 50%);
}
html[data-theme="light"] .traffic-dashboard-glow {
    background:
        radial-gradient(circle at 30% 30%, rgba(37, 99, 235, 0.14), transparent 55%),
        radial-gradient(circle at 80% 10%, rgba(14, 165, 233, 0.1), transparent 50%);
}

.traffic-dashboard-head {
    position: relative;
    z-index: 1;
    margin-bottom: 14px;
}

.traffic-dashboard-kicker {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.traffic-dashboard-title {
    margin: 0 0 4px;
    font-family: 'Oswald', sans-serif;
    font-size: 1.45rem;
    line-height: 1.15;
    letter-spacing: 0.02em;
    color: var(--text-primary);
}

.traffic-dashboard-sub {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

.traffic-dashboard-hero {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 12px;
    margin-bottom: 14px;
    border-radius: 18px;
    border: 1px solid var(--meter-border);
    background: var(--meter-bg);
}

.traffic-gauge-wrap {
    position: relative;
    width: 108px;
    height: 108px;
}

.traffic-gauge {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.traffic-gauge-bg,
.traffic-gauge-fg {
    fill: none;
    stroke-width: 9;
}

.traffic-gauge-bg {
    stroke: var(--ring-track);
}

.traffic-gauge-fg {
    stroke: var(--ring-stroke);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease, stroke 0.25s ease;
}

.traffic-gauge-fg.is-warn { stroke: var(--warn-color); }
.traffic-gauge-fg.is-danger { stroke: var(--danger-color); }

.traffic-gauge-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: none;
}

.traffic-gauge-pct {
    font-size: 1.45rem;
    font-weight: 780;
    line-height: 1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.traffic-gauge-caption {
    font-size: 0.62rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.traffic-hero-copy {
    min-width: 0;
}

.traffic-hero-used {
    font-size: 1.55rem;
    font-weight: 780;
    line-height: 1.1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.traffic-hero-limit {
    margin-top: 4px;
    font-size: 0.88rem;
    font-weight: 650;
    color: var(--text-secondary);
}

.traffic-hero-reset {
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.traffic-chart-panel {
    position: relative;
    z-index: 1;
    margin-bottom: 14px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--meter-border);
    background: var(--meter-bg);
}

.traffic-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.traffic-chart-title {
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.traffic-chart-total {
    font-size: 0.88rem;
    font-weight: 750;
    color: var(--ring-stroke);
    font-variant-numeric: tabular-nums;
}

.traffic-chart-bars {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    align-items: end;
    min-height: 132px;
}

.traffic-chart-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.traffic-chart-col-bar-wrap {
    width: 100%;
    height: 88px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.traffic-chart-col-bar {
    width: 72%;
    max-width: 28px;
    height: var(--h, 8%);
    min-height: 4px;
    border-radius: 6px 6px 3px 3px;
    background: var(--meter-fill);
    box-shadow: 0 4px 12px rgba(0, 240, 255, 0.15);
    transition: height 0.45s ease;
}
html[data-theme="light"] .traffic-chart-col-bar {
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.22);
}

.traffic-chart-col-val {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.traffic-chart-col-label {
    font-size: 0.62rem;
    font-weight: 650;
    color: var(--text-secondary);
    text-transform: capitalize;
}

.traffic-compare-panel {
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
}

.traffic-compare-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.traffic-compare-row {
    display: grid;
    grid-template-columns: minmax(72px, 0.9fr) minmax(0, 1.6fr) auto;
    gap: 8px;
    align-items: center;
}

.traffic-compare-label {
    font-size: 0.72rem;
    font-weight: 650;
    color: var(--text-secondary);
}

.traffic-compare-track {
    height: 8px;
    border-radius: 999px;
    background: var(--meter-track);
    overflow: hidden;
}

.traffic-compare-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22c55e, #0ea5e9, #3b82f6);
    transition: width 0.45s ease;
}

.traffic-compare-value {
    font-size: 0.76rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    white-space: nowrap;
}

.traffic-stats-grid--visual {
    display: none;
}

.traffic-dashboard-buy {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    margin-top: 4px;
    border: none;
    border-radius: 14px;
    font-size: 0.92rem;
    font-weight: 750;
    cursor: pointer;
    touch-action: manipulation;
    color: var(--cta-color);
    background: var(--cta-bg);
    box-shadow: var(--cta-shadow);
}

.traffic-dashboard-buy .ui-icon-svg {
    width: 1.1rem;
    height: 1.1rem;
}

.traffic-stat-box {
    border: 1px solid var(--separator-color);
    border-radius: 14px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.12);
}

.traffic-stat-box--accent {
    border-color: rgba(0, 240, 255, 0.36);
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.14) inset;
}

.traffic-stat-title {
    color: var(--text-secondary);
    font-size: 0.86rem;
    margin-bottom: 6px;
}

.traffic-stat-value {
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
}

.traffic-stats-current {
    margin-top: 12px;
}

.profile-page-card .profile-account-section {
    margin-top: 16px;
}

.profile-page-card .support-account-card {
    margin-top: 10px;
}

.profile-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.profile-info-item {
    border: 1px solid var(--separator-color);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.12);
    padding: 14px;
}

.profile-info-label {
    color: var(--text-secondary);
    font-size: 0.86rem;
    margin-bottom: 6px;
}

.profile-info-value {
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 700;
}

.traffic-stats-current-text {
    margin-bottom: 8px;
}

.traffic-stats-progress {
    position: relative;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.12);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.traffic-stats-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #00d48a 0%, #28c4ff 55%, #3f8bff 100%);
    box-shadow: 0 0 10px rgba(40, 196, 255, 0.35);
    transition: width 0.45s ease;
}

html[data-theme="light"] .traffic-stats-progress {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.1);
}

@media (min-width: 900px) {
    .news-item {
        padding: 18px 20px;
    }
}
/* ========================================================= */
/* Help wizard download CTAs (do not restyle magic connect) */
/* ========================================================= */

#help-page #install-app-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 16px;
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

#help-page #install-app-actions .help-download-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px;
    width: 100% !important;
    max-width: none !important;
    min-height: 72px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 16px 16px 16px 14px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    color: #fff !important;
    background:
        linear-gradient(120deg, #1e3a8a 0%, #2563eb 42%, #0ea5e9 78%, #22d3a6 120%) !important;
    background-size: 180% 180% !important;
    box-shadow:
        0 16px 34px rgba(37, 99, 235, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    animation: helpDownloadBgShift 7s ease-in-out infinite alternate;
}
#help-page #install-app-actions .help-download-btn::after {
    display: none;
}
#help-page #install-app-actions .help-download-aura,
#help-page #install-app-actions .help-download-sheen,
#help-page #install-app-actions .help-download-border {
    position: absolute;
    pointer-events: none;
}
#help-page #install-app-actions .help-download-aura {
    inset: -30% -10% auto;
    height: 90%;
    z-index: 0;
    background: radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.35), transparent 55%);
    filter: blur(18px);
    opacity: 0.55;
    animation: helpDownloadAuraPulse 3.4s ease-in-out infinite;
}
#help-page #install-app-actions .help-download-sheen {
    inset: 0;
    z-index: 1;
    overflow: hidden;
    border-radius: inherit;
}
#help-page #install-app-actions .help-download-sheen::after {
    content: '';
    position: absolute;
    top: -40%;
    bottom: -40%;
    left: -55%;
    width: 42%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 40%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.08) 60%,
        transparent 100%
    );
    transform: skewX(-16deg);
    animation: helpDownloadSheenLoop 4.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
#help-page #install-app-actions .help-download-border {
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
#help-page #install-app-actions .help-download-btn > *:not(.help-download-aura):not(.help-download-sheen):not(.help-download-border) {
    position: relative;
    z-index: 2;
}

#help-page #install-app-actions .help-download-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow:
        0 20px 40px rgba(37, 99, 235, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}
#help-page #install-app-actions .help-download-btn:active {
    transform: scale(0.985) translateY(0);
    filter: brightness(0.98);
}
@keyframes helpDownloadBgShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
@keyframes helpDownloadAuraPulse {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.08); }
}
@keyframes helpDownloadSheenLoop {
    0%, 55% { left: -55%; opacity: 0; }
    62% { opacity: 1; }
    78% { left: 130%; opacity: 0; }
    100% { left: 130%; opacity: 0; }
}

html:not([data-theme="light"]) #help-page #install-app-actions .help-download-btn {
    color: #041018 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    background:
        linear-gradient(120deg, #00e0ff 0%, #22d3a6 45%, #67e8f9 85%, #a78bfa 130%) !important;
    background-size: 180% 180% !important;
    box-shadow:
        0 14px 30px rgba(0, 224, 255, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

#help-page #install-app-actions .help-download-icon,
#help-page #install-app-actions .help-download-icon .ui-icon-svg {
    width: 1.3rem !important;
    height: 1.3rem !important;
    flex-shrink: 0;
}

#help-page #install-app-actions .help-download-icon {
    width: 2.7rem !important;
    height: 2.7rem !important;
    border-radius: 14px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 6px 14px rgba(0, 0, 0, 0.12);
    animation: helpDownloadIconBob 2.8s ease-in-out infinite;
}
@keyframes helpDownloadIconBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

#help-page #install-app-actions .help-download-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
    flex: 1;
    text-align: left;
}

#help-page #install-app-actions .help-download-title {
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

#help-page #install-app-actions .help-download-meta {
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.84;
}

#help-page #install-app-actions .help-download-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    flex-shrink: 0;
    margin-left: auto;
    transition: transform 0.2s ease, background 0.2s ease;
}
#help-page #install-app-actions .help-download-btn:hover .help-download-go {
    transform: translateX(3px);
    background: rgba(255, 255, 255, 0.24);
}

#help-page #install-app-actions .help-download-chevron,
#help-page #install-app-actions .help-download-chevron .ui-icon-svg {
    width: 1.05rem;
    height: 1.05rem;
    opacity: 0.95;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    #help-page #install-app-actions .help-download-btn {
        max-width: 100% !important;
    }
}

/* —— Account maintenance / blocked stub —— */
.account-maintenance {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--bg-color);
    overflow: auto;
}

.account-maintenance[hidden] {
    display: none !important;
}

body.account-maintenance-active .top-toolbar,
body.account-maintenance-active #app,
body.account-maintenance-active #bottom-nav,
body.account-maintenance-active #cookie-consent-banner,
body.account-maintenance-active .bg-particles-canvas {
    visibility: hidden !important;
    pointer-events: none !important;
}

.account-maintenance-inner {
    width: min(440px, 100%);
    text-align: center;
}

.account-maintenance-brand {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: 0.12em;
    color: var(--accent-color);
    margin-bottom: 18px;
    text-shadow: 0 0 24px var(--accent-glow);
}

/* —— Account maintenance builders scene —— */
.account-maintenance-scene {
    position: relative;
    height: 230px;
    margin: 0 auto 22px;
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    color: var(--accent-color);
    background:
        radial-gradient(90% 70% at 50% -10%, color-mix(in srgb, var(--accent-color) 18%, transparent), transparent 58%),
        linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 85%, transparent), color-mix(in srgb, var(--bg-color) 65%, transparent));
    border: 1px solid var(--separator-color);
    box-shadow: var(--toolbar-shadow), inset 0 0 36px color-mix(in srgb, var(--accent-color) 8%, transparent);
}

html[data-theme="light"] .account-maintenance-scene {
    background:
        radial-gradient(90% 70% at 50% -10%, rgba(0, 85, 255, 0.12), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,0.92), rgba(243,246,249,0.75));
}

html[data-theme="dark"] .account-maintenance-scene stop[offset="0%"] {
    stop-color: #1e293b;
}
html[data-theme="dark"] .account-maintenance-scene stop[offset="100%"] {
    stop-color: #0f172a;
}

.ams-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.45;
    background-image:
        radial-gradient(1.5px 1.5px at 18% 24%, currentColor, transparent),
        radial-gradient(1.5px 1.5px at 72% 18%, currentColor, transparent),
        radial-gradient(2px 2px at 40% 42%, currentColor, transparent),
        radial-gradient(1.5px 1.5px at 86% 48%, currentColor, transparent),
        radial-gradient(1px 1px at 28% 68%, currentColor, transparent);
    animation: amsTwinkle 2.8s ease-in-out infinite alternate;
}

.ams-svg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.ams-bob {
    animation: amsConeBob 1.7s ease-in-out infinite;
}
.ams-bob--delay {
    animation-delay: 0.35s;
}

.ams-crane-arm {
    animation: amsCraneSwing 3.8s ease-in-out infinite;
}

.ams-crane-load {
    animation: amsLoadBob 3.8s ease-in-out infinite;
}

.ams-rising {
    animation: amsBrickDrop 3.8s ease-in-out infinite;
}

.ams-win {
    animation: amsWindowBlink 2.4s ease-in-out infinite;
}
.ams-win--2 { animation-delay: 0.2s; }
.ams-win--3 { animation-delay: 0.4s; }
.ams-win--4 { animation-delay: 0.55s; }
.ams-win--5 { animation-delay: 0.7s; }
.ams-win--6 { animation-delay: 0.9s; }

.ams-w-body {
    animation: amsWorkerTap 0.55s ease-in-out infinite;
}

.ams-arm-swing {
    animation: amsHammerArm 0.55s ease-in-out infinite;
}

.ams-hammer {
    animation: amsHammerHead 0.55s ease-in-out infinite;
}

.ams-impact {
    animation: amsImpactFlash 0.55s ease-out infinite;
}

.ams-weld-move {
    animation: amsWelderSway 2.6s ease-in-out infinite;
}

.ams-weld-arm {
    animation: amsWeldAim 1.4s ease-in-out infinite;
}

.ams-weld-tip {
    animation: amsWeldGlow 0.45s ease-in-out infinite alternate;
}

.ams-sp {
    animation: amsSparkFly 0.9s ease-out infinite;
}
.ams-sp--2 { animation-delay: 0.15s; }
.ams-sp--3 { animation-delay: 0.3s; }
.ams-sp--4 { animation-delay: 0.45s; }

.ams-barrel {
    animation: amsBarrelRoll 4.8s ease-in-out infinite;
}

.ams-d { animation: amsDust 2.2s ease-out infinite; }
.ams-d--2 { animation-delay: 0.35s; }
.ams-d--3 { animation-delay: 0.7s; }
.ams-d--4 { animation-delay: 1s; }
.ams-d--5 { animation-delay: 1.35s; }

.account-maintenance-title {
    margin: 0 0 10px;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
}

.account-maintenance-text {
    margin: 0 auto 18px;
    max-width: 34ch;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.account-maintenance-dots {
    display: inline-flex;
    gap: 8px;
    margin-bottom: 20px;
}

.account-maintenance-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
    opacity: 0.35;
    animation: amDot 1.2s ease-in-out infinite;
}

.account-maintenance-dots span:nth-child(2) { animation-delay: 0.2s; }
.account-maintenance-dots span:nth-child(3) { animation-delay: 0.4s; }

.account-maintenance-theme {
    appearance: none;
    border: 1px solid var(--toolbar-border);
    background: var(--control-bg);
    color: var(--text-primary);
    border-radius: 999px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 0.85rem;
    box-shadow: var(--toolbar-shadow);
}

.account-maintenance-theme:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

@keyframes amDot {
    0%, 100% { opacity: 0.25; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-3px); }
}

@keyframes amsTwinkle {
    from { opacity: 0.25; }
    to { opacity: 0.55; }
}

@keyframes amsCraneSwing {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(7deg); }
}

@keyframes amsLoadBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(14px); }
}

@keyframes amsBrickDrop {
    0% { transform: translateY(-18px); opacity: 0.2; }
    35% { transform: translateY(0); opacity: 0.85; }
    70% { transform: translateY(0); opacity: 0.85; }
    100% { transform: translateY(8px); opacity: 0.15; }
}

@keyframes amsWindowBlink {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.95; }
}

@keyframes amsConeBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes amsWorkerTap {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(2deg); }
}

@keyframes amsHammerArm {
    0%, 100% { transform: rotate(-28deg); }
    50% { transform: rotate(42deg); }
}

@keyframes amsHammerHead {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(25deg); }
}

@keyframes amsImpactFlash {
    0%, 55% { opacity: 0; transform: scale(0.6); }
    65% { opacity: 1; transform: scale(1.15); }
    100% { opacity: 0; transform: scale(1.4); }
}

@keyframes amsWelderSway {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-8px); }
}

@keyframes amsWeldAim {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(12deg); }
}

@keyframes amsWeldGlow {
    from { opacity: 0.45; }
    to { opacity: 1; }
}

@keyframes amsSparkFly {
    0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
    25% { opacity: 1; }
    100% { opacity: 0; transform: translate(10px, -16px) scale(1.2); }
}

@keyframes amsBarrelRoll {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    50% { transform: translateX(18px) rotate(18deg); }
}

@keyframes amsDust {
    0% { opacity: 0; transform: translateY(0) scale(0.7); }
    20% { opacity: 0.55; }
    100% { opacity: 0; transform: translateY(-34px) scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
    .account-maintenance-scene *,
    .account-maintenance-dots span {
        animation: none !important;
    }
}

/* ===== Payment / device / traffic bottom sheets ===== */
.page.pay-sheet {
    display: flex !important;
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    padding: 0 !important;
    margin: 0;
    width: 100%;
    max-width: none;
    background: transparent;
    animation: none !important;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    visibility: hidden;
    pointer-events: none;
}

.page.pay-sheet.active,
.page.pay-sheet.is-open,
.page.pay-sheet.is-closing {
    visibility: visible;
    pointer-events: auto;
}

.pay-sheet-scrim {
    position: absolute;
    inset: 0;
    border: none;
    padding: 0;
    margin: 0;
    background: rgba(5, 8, 16, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.page.pay-sheet.is-open .pay-sheet-scrim { opacity: 1; }
.page.pay-sheet.is-closing .pay-sheet-scrim {
    opacity: 0;
    transition-duration: 0.28s;
}

.pay-sheet-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    max-height: min(78vh, 680px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: var(--card-bg, rgba(18, 24, 38, 0.99));
    border: 1px solid var(--separator-color);
    border-bottom: none;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -20px 56px rgba(0, 0, 0, 0.42);
    padding: 4px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    transform: translate3d(0, 108%, 0);
    transition: transform 0.44s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.page.pay-sheet.is-open .pay-sheet-panel { transform: translate3d(0, 0, 0); }
.page.pay-sheet.is-closing .pay-sheet-panel {
    transform: translate3d(0, 108%, 0);
    transition-duration: 0.34s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.7, 0.2);
}

.pay-sheet-chrome {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 20px;
    margin-bottom: 0;
    padding-top: 2px;
    background: inherit;
}

.pay-sheet-grab {
    position: absolute;
    left: 50%;
    top: 4px;
    transform: translateX(-50%);
    width: 36px;
    height: 3px;
    border-radius: 999px;
    background: var(--separator-color);
    opacity: 0.95;
}

.pay-sheet-close {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font: 600 0.82rem Inter, system-ui, sans-serif;
    cursor: pointer;
    padding: 4px 2px;
    margin-top: 4px;
}
.pay-sheet-close:hover { color: var(--text-primary); }

/* (scroll lives on .pay-sheet-panel) */

.pay-sheet .payment-plans { align-items: stretch; gap: 8px; padding-bottom: 2px; }
.pay-sheet .payment-plans h2 {
    font-size: 1.05rem;
    margin: 0 0 8px;
    text-align: left;
    font-weight: 700;
}

/* Compact tariff cards: title + breakdown left, total right, ₽/мес bottom-left */
.pay-sheet .plan-card {
    width: 100%;
    max-width: none;
    border-radius: 14px;
    padding: 11px 12px 10px;
    gap: 0;
    border-width: 1.5px;
    box-shadow: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 3px;
    align-items: start;
}
.pay-sheet .plan-card:hover,
.pay-sheet .plan-card.selected { transform: none; }
.pay-sheet .plan-card.selected {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-color) 40%, transparent);
}

.pay-sheet .plan-badge {
    display: none !important;
}
.pay-sheet .plan-card.popular {
    padding-top: 11px;
}
.pay-sheet .plan-card.popular .plan-badge {
    display: none !important;
}

.pay-sheet .plan-card-top {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    padding: 0;
    border: none;
    display: block;
    justify-self: end;
}

.pay-sheet .plan-period-title {
    font-size: 0.95rem;
    font-family: Inter, system-ui, sans-serif;
    font-weight: 700;
    display: block;
    line-height: 1.2;
    white-space: nowrap;
}

.pay-sheet .plan-period-tagline {
    display: block;
    font-size: 0.68rem;
    margin-top: 2px;
    font-weight: 500;
    opacity: 0.9;
}

.pay-sheet .plan-breakdown {
    display: contents;
}

.pay-sheet .pb-row-base {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
}
.pay-sheet .pb-row-extra:not(.pb-row-traffic) {
    grid-column: 1;
    grid-row: 2;
}
.pay-sheet .pb-row-traffic {
    grid-column: 1;
    grid-row: 3;
}
.pay-sheet .pb-divider {
    display: none !important;
}

.pay-sheet .pb-row-base,
.pay-sheet .pb-row-extra {
    display: flex !important;
    align-items: baseline;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    font-size: 0.72rem;
    line-height: 1.3;
    background: transparent !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.pay-sheet .pb-row-extra[hidden],
.pay-sheet .pb-row-traffic[hidden] {
    display: flex !important;
}
.pay-sheet .pb-extra-text {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    flex: 0 1 auto;
}
.pay-sheet .pb-extra-hint,
.pay-sheet .pb-traffic-hint {
    display: none !important;
}
.pay-sheet .pb-label {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.72rem;
    flex: 0 0 auto;
}
.pay-sheet .pb-value {
    font-weight: 700;
    font-size: 0.72rem;
    color: var(--text-primary);
    white-space: nowrap;
    margin-left: 0;
    margin-right: auto;
}

.pay-sheet .pb-row-total {
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: center;
    justify-self: end;
    padding: 0 !important;
    margin: 0;
    border: none !important;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}
.pay-sheet .pb-row-total .pb-label {
    display: none;
}
.pay-sheet .pb-total-price {
    font-size: 1.18rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.pay-sheet .plan-description {
    grid-column: 1 / -1;
    grid-row: 4;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0 0;
    padding-top: 4px;
    border-top: 1px solid var(--separator-color);
}
.pay-sheet .monthly-price {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin: 0;
}
.pay-sheet .savings-badge {
    font-size: 0.65rem;
    padding: 2px 7px;
    border-radius: 999px;
}
.pay-sheet .plan-features { display: none !important; }

.pay-sheet .payment-section {
    margin-top: 8px !important;
    max-width: none;
    padding: 0 !important;
    gap: 8px;
}
.pay-sheet .payment-receipt-card { display: none; }
.pay-sheet .payment-method-heading,
.pay-sheet .payment-email-heading {
    font-size: 0.72rem;
    margin-bottom: 4px;
    text-align: left;
    width: 100%;
}
.pay-sheet .payment-method-group { width: 100%; }
.pay-sheet .payment-method-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}
.pay-sheet .payment-method-tile {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 0;
    padding: 7px 4px;
    border-radius: 10px;
    text-align: center;
}
.pay-sheet .payment-method-tile::after { display: none; }
.pay-sheet .payment-method-tile-icon {
    width: 18px;
    height: 18px;
    font-size: 0.9rem;
    margin: 0;
}
.pay-sheet .payment-method-tile-label {
    font-size: 0.66rem;
    line-height: 1.15;
    font-weight: 600;
}
.pay-sheet .payment-email-block { margin-top: 0; display: none; }
.pay-sheet .user-email-display {
    font-size: 0.82rem;
    padding: 6px 8px;
    border-radius: 10px;
}

/* Sticky pay CTA — always visible above dock area */
.pay-sheet .pay-btn,
.pay-sheet #page-pay-btn,
.pay-sheet #traffic-pay-btn,
.pay-sheet #pay-button {
    position: sticky;
    bottom: 0;
    z-index: 8;
    width: 100% !important;
    max-width: none !important;
    margin: 8px 0 0 !important;
    border-radius: 14px !important;
    min-height: 46px;
    flex-shrink: 0;
    box-shadow: 0 -12px 24px color-mix(in srgb, var(--card-bg, #fff) 92%, transparent);
}

.pay-sheet-card,
.pay-sheet .info-card.pay-sheet-card {
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
}
.pay-sheet .info-card { margin-bottom: 0; }
.pay-sheet .card-details {
    gap: 8px !important;
    margin-top: 0 !important;
}
.pay-sheet .card-details > div[style*="font-size: 2.4rem"],
.pay-sheet .card-details > div[style*="font-size: 3rem"],
.pay-sheet .card-details > div[style*="font-size: 1.6rem"] {
    display: none !important;
}
.pay-sheet #add-device-title,
.pay-sheet #add-traffic-title {
    font-size: 1.05rem !important;
    margin: 0 !important;
}
.pay-sheet .glass-quantity-selector {
    transform: scale(0.88);
    transform-origin: center;
    margin: 0 auto;
}
.pay-sheet .price-info { padding-top: 8px !important; margin-top: 0 !important; }
.pay-sheet .price-row { margin-bottom: 4px !important; font-size: 0.84rem; }
.pay-sheet .price-row.total { margin-top: 4px !important; font-size: 0.95rem !important; }
.pay-sheet #add-traffic-package-hint {
    font-size: 0.7rem !important;
    line-height: 1.3;
    max-width: 34ch;
    margin-top: 4px !important;
}
.pay-sheet #add-device-count-label,
.pay-sheet #add-traffic-packages-label {
    font-size: 0.8rem !important;
    margin-bottom: 4px !important;
}

/* Dock fully removed while sheet open */
body.pay-sheet-open {
    overflow: hidden !important;
}
body.pay-sheet-open #bottom-nav {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(-50%, 200%, 0) !important;
}
body.pay-sheet-open .site-footer {
    z-index: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html[data-theme="light"] .pay-sheet-scrim { background: rgba(15, 18, 28, 0.38); }
html[data-theme="light"] .pay-sheet-panel {
    background: rgba(255, 255, 255, 0.99);
    box-shadow: 0 -16px 44px rgba(15, 18, 28, 0.16);
}
html[data-theme="light"] .pay-sheet .pay-btn,
html[data-theme="light"] .pay-sheet #page-pay-btn,
html[data-theme="light"] .pay-sheet #traffic-pay-btn,
html[data-theme="light"] .pay-sheet #pay-button {
    box-shadow: 0 -10px 20px rgba(255, 255, 255, 0.92);
}

@media (prefers-reduced-motion: reduce) {
    .pay-sheet-scrim,
    .pay-sheet-panel { transition: none !important; }
    .page.pay-sheet.is-open .pay-sheet-panel,
    .page.pay-sheet.is-closing .pay-sheet-panel { transform: none; }
}

/* ==================== DESKTOP SIDEBAR SHELL (≥1024px) ==================== */
.desktop-sidebar,
.desktop-servers {
    display: none;
}


/* ==================== 8. SHARED HOME-COMMAND (PC + MOBILE) ==================== */
/*
 * Canonical colors/typography for the home dashboard.
 * Media queries below only change layout/size — never redeclare text colors.
 */
.home-desktop-dashboard {
    display: none;
}

.home-command {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    color: var(--text-primary);
}

.home-command-glow {
    position: absolute;
    /* Убираем жесткий сдвиг слева или растягиваем блок на весь экран */
    inset: -30% 0 0 0; 
    width: 100%; 
    height: 100%;
    background:
        radial-gradient(circle at 30% 40%, rgba(37, 99, 235, 0.14), transparent 58%),
        radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.1), transparent 50%);
    pointer-events: none;
}
html[data-theme="light"] .home-command-glow {
    background:
        radial-gradient(circle at 30% 40%, rgba(37, 99, 235, 0.14), transparent 58%),
        radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.1), transparent 50%);
}

.home-command-main { position: relative; z-index: 1; min-width: 0; }
.home-command-status,
.home-command-status-copy,
.home-command-hero-text { min-width: 0; }

.home-command-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.home-command-ring-bg,
.home-command-ring-fg { fill: none; }
.home-command-ring-bg { stroke: var(--ring-track); }
.home-command-ring-fg {
    stroke: var(--ring-stroke);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.45s ease, stroke 0.25s ease;
}
.home-command-ring-fg.is-warn { stroke: var(--warn-color); }
.home-command-ring-fg.is-danger { stroke: var(--danger-color); }
.home-command-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    pointer-events: none;
}
.home-command-ring-value {
    font-weight: 760;
    line-height: 1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.home-command-ring-unit {
    font-weight: 650;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.home-command-kicker-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.home-command-kicker {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.home-command-badge {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    border-radius: 999px;
    background: var(--off-bg);
    color: var(--off-text);
}
.home-command-badge.is-on {
    background: var(--ok-bg);
    color: var(--ok-text);
}
.home-command-badge.is-off {
    background: var(--off-bg);
    color: var(--off-text);
}

.home-command-title {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}
.home-command-title #home-command-title-prefix {
    color: var(--text-secondary);
}
.home-command-title #home-dash-period-date {
    color: var(--ring-stroke);
}
.home-command-sub {
    color: var(--text-secondary);
}

.home-command-meter {
    display: flex;
    flex-direction: column;
    text-align: left;
    cursor: pointer;
    font: inherit;
    /* Reset UA button paint — otherwise child text can stay ButtonText (near-black) */
    appearance: none;
    -webkit-appearance: none;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    background: var(--meter-bg);
    border: 1px solid var(--meter-border);
    border-radius: 12px;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.home-command-meter:hover {
    border-color: var(--hover-border);
    transform: translateY(-1px);
}
.home-command-meter-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.home-command-meter-label {
    font-weight: 700;
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.home-command-meter-pct,
#home-dash-traffic-pct,
#home-dash-devices-count {
    font-weight: 750;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-variant-numeric: tabular-nums;
}
.home-command-meter-track {
    border-radius: 999px;
    background: var(--meter-track);
    overflow: hidden;
}
.home-command-meter-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--meter-fill);
    transition: width 0.4s ease;
}
.home-command-meter-value {
    font-weight: 650;
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
    line-height: 1.2;
}

.home-command-slots {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    width: 100%;
}
.home-command-slot {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 999px;
    background: var(--slot-empty);
}
.home-command-slot.is-filled {
    background: var(--slot-filled);
    box-shadow: var(--slot-glow);
}
.home-command-slot-more {
    font-weight: 700;
    color: var(--text-secondary);
}

.home-command-cta {
    display: flex;
    align-items: center;
    width: 100%;
    border: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
    background: var(--cta-bg);
    color: var(--cta-color);
    box-shadow: var(--cta-shadow);
    transition: transform 0.18s ease, filter 0.18s ease;
}
.home-command-cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
}
.home-command-cta .ui-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.18);
}
.home-command-cta-copy { flex: 1; min-width: 0; text-align: left; }
.home-command-cta-label { display: block; font-weight: 750; line-height: 1.2; }
.home-command-cta-hint { display: block; opacity: 0.85; line-height: 1.2; }
.home-command-cta-chevron { opacity: 0.85; flex-shrink: 0; }

.home-command-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    appearance: none;
    -webkit-appearance: none;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    background: var(--chip-bg);
    border: 1px solid var(--chip-border);
    border-radius: 12px;
    transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.home-command-chip:hover {
    transform: translateY(-1px);
    border-color: var(--hover-border);
}
.home-command-chip .ui-icon-svg {
    color: var(--chip-icon);
}
#home-command-payment-extra-btn {
    border-color: rgba(251, 191, 36, 0.32);
}
#home-command-payment-extra-btn .ui-icon-svg { color: #fbbf24; }
#home-command-devices-buy-btn {
    border-color: rgba(52, 211, 153, 0.32);
}
#home-command-devices-buy-btn .ui-icon-svg { color: #34d399; }
html[data-theme="light"] #home-command-payment-extra-btn .ui-icon-svg { color: #d97706; }
html[data-theme="light"] #home-command-devices-buy-btn .ui-icon-svg { color: #059669; }

.home-command-news {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
    position: relative;
    text-align: left;
    font-weight: 650;
    appearance: none;
    -webkit-appearance: none;
    color: var(--news-text);
    -webkit-text-fill-color: var(--news-text);
    background: var(--news-bg);
    border: 1px solid var(--news-border);
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.home-command-news:hover {
    transform: translateY(-1px);
    border-color: var(--hover-border);
}
.home-command-news-icon .ui-icon-svg,
.home-command-news-chevron .ui-icon-svg {
    color: var(--news-text);
}
.home-command-news-chevron { margin-left: auto; opacity: 0.55; }
.home-command-news-dot {
    position: absolute;
    width: 9px;
    height: 9px;
    background: var(--red-color);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 59, 48, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.92);
    pointer-events: none;
}

.home-command-tg {
    display: none;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
    color: var(--text-primary);
    background: var(--tg-bg);
    border: 1px solid var(--tg-border);
    border-radius: 12px;
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.home-command-tg:hover {
    transform: translateY(-1px);
    border-color: rgba(42, 171, 238, 0.45);
}
.home-command-tg-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.home-command-tg-label {
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.home-command-tg-icon .ui-icon-svg { color: var(--tg-blue); }
.home-command-tg-meta {
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.home-command-usage {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--separator-color);
}
.home-command-usage-title {
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-primary);
}
.home-command-usage-sub { color: var(--text-secondary); }
.home-command-usage-more {
    border: none;
    background: transparent;
    color: var(--ring-stroke);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

/* ========== 9. MOBILE HOME — layout only (<=1023px) ========== */
@media (max-width: 1023px) {
    body.lk-desktop-shell #home-page.active .home-desktop-dashboard {
        display: block;
        margin-bottom: 10px;
    }

    body.lk-desktop-shell #home-page .account-summary-card,
    body.lk-desktop-shell #home-page .home-actions-grid {
        display: none !important;
    }

    body.lk-desktop-shell #home-page .home-quick-actions-card {
        margin-bottom: 10px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    body.lk-desktop-shell #home-page .home-devices-compact {
        margin-bottom: 10px;
    }

    body.lk-desktop-shell #home-page .home-command {
        padding: 14px 14px 12px;
        border-radius: 20px;
    }

    body.lk-desktop-shell #home-page .home-command-main {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    body.lk-desktop-shell #home-page .home-command-hero {
        display: grid;
        grid-template-columns: 72px auto minmax(0, 1fr);
        gap: 8px;
        align-items: center;
    }

    body.lk-desktop-shell #home-page .home-command-hero-text {
        min-width: min-content;
        flex-shrink: 0;
    }

    body.lk-desktop-shell #home-page .home-command-tg {
        display: flex;
        align-self: stretch;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        padding: 8px 9px;
        gap: 5px;
    }

    body.lk-desktop-shell #home-page .home-command-tg-top {
        min-width: 0;
        gap: 4px;
    }

    body.lk-desktop-shell #home-page .home-command-tg-label {
        font-size: 0.68rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.lk-desktop-shell #home-page .home-command-tg-meta {
        font-size: 0.6rem;
        min-width: 0;
    }
    body.lk-desktop-shell #home-page .home-command-tg-icon {
        flex-shrink: 0;
    }
    body.lk-desktop-shell #home-page .home-command-tg-icon .ui-icon-svg {
        width: 0.95rem;
        height: 0.95rem;
    }

    body.lk-desktop-shell #home-page .home-command-ring-wrap {
        position: relative;
        width: 72px;
        height: 72px;
        flex-shrink: 0;
    }
    body.lk-desktop-shell #home-page .home-command-ring-bg,
    body.lk-desktop-shell #home-page .home-command-ring-fg { stroke-width: 8; }
    body.lk-desktop-shell #home-page .home-command-ring-value { font-size: 1.15rem; }
    body.lk-desktop-shell #home-page .home-command-ring-unit { font-size: 0.62rem; }

    body.lk-desktop-shell #home-page .home-command-kicker-row { margin-bottom: 4px; }
    body.lk-desktop-shell #home-page .home-command-kicker { font-size: 0.68rem; }
    body.lk-desktop-shell #home-page .home-command-badge {
        font-size: 0.62rem;
        padding: 3px 8px;
    }

    body.lk-desktop-shell #home-page .home-command-title {
        font-size: 0.95rem;
        line-height: 1.25;
        white-space: nowrap;
    }
    body.lk-desktop-shell #home-page .home-command-title #home-command-title-prefix {
        display: block;
        font-size: 0.72rem;
        font-weight: 600;
        font-family: inherit;
        margin-bottom: 2px;
        white-space: nowrap;
    }
    body.lk-desktop-shell #home-page .home-command-title #home-dash-period-date {
        display: block;
        font-size: 1.08rem;
        line-height: 1.15;
        white-space: nowrap;
    }

    body.lk-desktop-shell #home-page .home-command-sub { display: none; }

    body.lk-desktop-shell #home-page .home-command-meters {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 8px;
    }
    body.lk-desktop-shell #home-page .home-command-meter {
        gap: 5px;
        padding: 8px 9px;
        touch-action: manipulation;
    }
    body.lk-desktop-shell #home-page .home-command-meter-label { font-size: 0.68rem; }
    body.lk-desktop-shell #home-page .home-command-meter-pct { font-size: 0.72rem; }
    body.lk-desktop-shell #home-page .home-command-meter-track { height: 5px; }
    body.lk-desktop-shell #home-page .home-command-meter-value { font-size: 0.72rem; }
    body.lk-desktop-shell #home-page .home-command-slot {
        height: 7px;
    }
    body.lk-desktop-shell #home-page .home-command-slot-more { font-size: 0.62rem; }

    body.lk-desktop-shell #home-page .home-command-usage { display: none !important; }

    body.lk-desktop-shell #home-page .home-command-aside {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    body.lk-desktop-shell #home-page .home-command-cta {
        gap: 10px;
        min-height: 48px;
        padding: 10px 12px;
        border-radius: 14px;
        touch-action: manipulation;
    }
    body.lk-desktop-shell #home-page .home-command-cta .ui-icon {
        width: 2rem;
        height: 2rem;
        border-radius: 10px;
    }
    body.lk-desktop-shell #home-page .home-command-cta-label { font-size: 0.92rem; }
    body.lk-desktop-shell #home-page .home-command-cta-hint { font-size: 0.72rem; }

    body.lk-desktop-shell #home-page .home-command-quick {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }
    body.lk-desktop-shell #home-page .home-command-chip {
        gap: 4px;
        min-height: 54px;
        padding: 6px 4px;
        font-size: 0.68rem;
        line-height: 1.15;
        touch-action: manipulation;
    }
    body.lk-desktop-shell #home-page .home-command-chip .ui-icon-svg {
        width: 1.1rem;
        height: 1.1rem;
    }

    body.lk-desktop-shell #home-page .home-command-news {
        gap: 8px;
        padding: 7px 10px;
        border-radius: 10px;
        font-size: 0.72rem;
    }
    body.lk-desktop-shell #home-page .home-command-news-icon .ui-icon-svg {
        width: 1rem;
        height: 1rem;
    }
    body.lk-desktop-shell #home-page .home-command-news-chevron .ui-icon-svg {
        width: 0.95rem;
        height: 0.95rem;
    }
    body.lk-desktop-shell #home-page .home-command-news-dot {
        top: 5px;
        right: 28px;
    }
}

@media (min-width: 1024px) {
    body.lk-desktop-shell {
        --desk-side: 300px;
        --desk-servers: 248px;
        --desk-gap: 20px;
        --desk-content: 960px;
        --desk-shell: calc(var(--desk-side) + var(--desk-gap) + var(--desk-content) + var(--desk-gap) + var(--desk-servers));
        --desk-side-left: max(16px, calc(50% - var(--desk-shell) / 2));
        --desk-content-left: calc(var(--desk-side-left) + var(--desk-side) + var(--desk-gap));
        --desk-servers-left: calc(var(--desk-content-left) + var(--desk-content) + var(--desk-gap));
    }

    body.lk-desktop-shell .desktop-sidebar {
        display: flex;
        position: fixed;
        top: 40px;
        left: var(--desk-side-left);
        bottom: auto;
        height: auto;
        max-height: calc(100vh - 56px);
        width: var(--desk-side);
        z-index: 80;
        pointer-events: none;
    }

    body.lk-desktop-shell .desktop-servers {
        display: flex;
        position: fixed;
        top: 40px;
        left: var(--desk-servers-left);
        bottom: auto;
        height: auto;
        max-height: calc(100vh - 56px);
        width: var(--desk-servers);
        z-index: 80;
        pointer-events: none;
    }

    body.lk-desktop-shell .desktop-sidebar[hidden],
    body.lk-desktop-shell .desktop-servers[hidden] {
        display: none !important;
    }

    .desktop-servers-stack {
        pointer-events: auto;
        display: flex;
        flex-direction: column;
        gap: 14px;
        width: 100%;
        max-height: calc(100vh - 56px);
        overflow: auto;
    }

    .desktop-sidebar-inner {
        pointer-events: auto;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        max-height: calc(100vh - 56px);
        padding: 18px 16px 16px;
        border-radius: 22px;
        background: var(--card-bg);
        border: 1px solid var(--separator-color);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
        overflow: auto;
    }

    .desktop-servers-inner {
        pointer-events: auto;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        max-height: none;
        padding: 18px 14px 16px;
        border-radius: 22px;
        background: var(--card-bg);
        border: 1px solid var(--separator-color);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
        overflow: visible;
        box-sizing: border-box;
        margin: 0;
        flex-shrink: 0;
    }

    .desktop-tg-card {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        padding: 16px 14px 14px;
        border-radius: 22px;
        background: var(--card-bg);
        border: 1px solid var(--separator-color);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
        box-sizing: border-box;
        flex-shrink: 0;
    }

    html[data-theme="light"] .desktop-sidebar-inner,
    html[data-theme="light"] .desktop-servers-inner,
    html[data-theme="light"] .desktop-tg-card {
        background: rgba(255, 255, 255, 0.78);
        border-color: rgba(255, 255, 255, 0.9);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.95) inset,
            0 16px 40px rgba(15, 23, 42, 0.08);
    }

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

    .desktop-tg-head-icon,
    .desktop-tg-head-icon .ui-icon-svg {
        width: 1.05rem;
        height: 1.05rem;
        color: #2AABEE;
        flex-shrink: 0;
    }

    .desktop-tg-title {
        font-family: 'Oswald', sans-serif;
        font-size: 1.05rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-primary);
    }

    .desktop-tg-lead {
        margin: 0;
        font-size: 0.78rem;
        line-height: 1.35;
        color: var(--text-secondary);
    }

    .desktop-tg-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 2px;
    }

    .desktop-tg-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 11px 12px;
        border-radius: 14px;
        border: 1px solid rgba(42, 171, 238, 0.22);
        background:
            linear-gradient(145deg, rgba(42, 171, 238, 0.14) 0%, rgba(42, 171, 238, 0.05) 100%);
        color: var(--text-primary);
        text-decoration: none;
        transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
        box-sizing: border-box;
    }

    .desktop-tg-btn:hover {
        transform: translateY(-1px);
        border-color: rgba(42, 171, 238, 0.45);
        box-shadow: 0 10px 20px rgba(42, 171, 238, 0.16);
        filter: brightness(1.02);
    }

    .desktop-tg-btn .ui-icon,
    .desktop-tg-btn .ui-icon-svg {
        width: 1.1rem;
        height: 1.1rem;
        color: #2AABEE;
        flex-shrink: 0;
    }

    .desktop-tg-btn-copy {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
        text-align: left;
    }

    .desktop-tg-btn-label {
        font-size: 0.86rem;
        font-weight: 750;
        line-height: 1.2;
    }

    .desktop-tg-btn-meta {
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .desktop-tg-btn--channel {
        border-color: rgba(34, 197, 94, 0.2);
        background:
            linear-gradient(145deg, rgba(34, 197, 94, 0.12) 0%, rgba(34, 197, 94, 0.04) 100%);
    }

    .desktop-tg-btn--channel:hover {
        border-color: rgba(34, 197, 94, 0.4);
        box-shadow: 0 10px 20px rgba(34, 197, 94, 0.12);
    }

    .desktop-tg-btn--channel .ui-icon,
    .desktop-tg-btn--channel .ui-icon-svg {
        color: #16a34a;
    }

    .desktop-sidebar-brand {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        padding: 0 4px;
    }

    .desktop-sidebar-logo {
        height: 28px;
        width: auto;
        max-width: 140px;
        object-fit: contain;
    }

    .desktop-sidebar-user {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        text-align: left;
        padding: 12px;
        margin-bottom: 14px;
        border-radius: 16px;
        border: 1px solid var(--separator-color);
        background: rgba(255, 255, 255, 0.04);
        color: var(--text-primary);
        cursor: pointer;
        transition: background 0.2s ease, border-color 0.2s ease;
    }

    html[data-theme="light"] .desktop-sidebar-user {
        background: rgba(255, 255, 255, 0.65);
        border-color: rgba(18, 20, 26, 0.06);
    }

    .desktop-sidebar-user:hover {
        border-color: var(--accent-color);
    }

    .desktop-sidebar-avatar {
        flex-shrink: 0;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-weight: 700;
        font-size: 0.95rem;
        color: #fff;
        background: linear-gradient(145deg, var(--accent-color), #3b82f6);
        text-transform: uppercase;
    }

    .desktop-sidebar-user-meta {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .desktop-sidebar-user-name {
        font-weight: 650;
        font-size: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .desktop-sidebar-user-email,
    .desktop-sidebar-user-tg {
        font-size: 0.72rem;
        color: var(--text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .desktop-sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1 1 auto;
        min-height: 0;
    }

    .desktop-nav-btn {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 11px 12px;
        border: none;
        border-radius: 14px;
        background: transparent;
        color: var(--text-secondary);
        font: inherit;
        font-size: 0.92rem;
        font-weight: 550;
        cursor: pointer;
        text-align: left;
        transition: background 0.18s ease, color 0.18s ease;
    }

    .desktop-nav-btn:hover {
        background: rgba(0, 240, 255, 0.08);
        color: var(--text-primary);
    }

    html[data-theme="light"] .desktop-nav-btn:hover {
        background: rgba(26, 86, 219, 0.08);
    }

    .desktop-nav-btn.active {
        background: rgba(0, 240, 255, 0.14);
        color: var(--accent-color);
    }

    html[data-theme="light"] .desktop-nav-btn.active {
        background: rgba(26, 86, 219, 0.1);
        color: var(--accent-color);
    }

    .desktop-nav-icon {
        width: 1.2rem;
        height: 1.2rem;
        text-align: center;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .desktop-nav-icon .ui-icon-svg {
        width: 100%;
        height: 100%;
    }

    .desktop-nav-badge {
        margin-left: auto;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--red-color);
        color: #fff;
        font-size: 0.68rem;
        font-weight: 700;
        display: none;
        align-items: center;
        justify-content: center;
    }
    .desktop-nav-badge.is-visible {
        display: inline-flex;
    }
    .desktop-nav-badge[hidden] {
        display: none !important;
    }

    .desktop-sidebar-tools {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        margin-top: auto;
        padding-top: 12px;
        border-top: 1px solid var(--separator-color);
        flex-shrink: 0;
    }

    .desktop-tool-btn {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 10px 12px;
        border-radius: 12px;
        border: 1px solid var(--separator-color);
        background: rgba(255, 255, 255, 0.03);
        color: var(--text-primary);
        font: inherit;
        font-size: 0.86rem;
        cursor: pointer;
    }

    html[data-theme="light"] .desktop-tool-btn {
        background: rgba(255, 255, 255, 0.7);
    }

    .desktop-tool-btn .theme-icon-sun,
    .desktop-tool-btn .theme-icon-moon {
        display: none;
    }

    html[data-theme="light"] .desktop-tool-btn .theme-icon-sun { display: inline; }
    html[data-theme="dark"] .desktop-tool-btn .theme-icon-moon { display: inline; }
    html:not([data-theme="light"]) .desktop-tool-btn .theme-icon-moon { display: inline; }
    html[data-theme="light"] .desktop-tool-btn .theme-icon-moon { display: none; }
    html[data-theme="dark"] .desktop-tool-btn .theme-icon-sun { display: none; }

    .desktop-notif-dot {
        position: absolute;
        top: 8px;
        right: 10px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--red-color);
    }

    .desktop-sidebar-logout {
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 11px 12px;
        border-radius: 12px;
        border: 1px solid rgba(255, 0, 85, 0.28);
        background: rgba(255, 0, 85, 0.08);
        color: var(--red-color);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }

    body.lk-desktop-shell .top-toolbar {
        display: none !important;
    }

    body.lk-desktop-shell #bottom-nav {
        display: none !important;
    }

    body.lk-desktop-shell #app {
        max-width: var(--desk-content);
        margin-left: var(--desk-content-left);
        margin-right: auto;
        padding-top: 40px;
        padding-bottom: 40px;
        width: var(--desk-content);
        box-sizing: border-box;
    }

    body.lk-desktop-shell.bottom-nav-active #app {
        padding-bottom: 40px;
    }

    body.lk-desktop-shell #site-footer {
        max-width: var(--desk-content);
        margin-left: var(--desk-content-left);
        margin-right: auto;
        width: var(--desk-content);
        box-sizing: border-box;
    }

    body.lk-desktop-shell.bottom-nav-active .site-footer {
        padding-bottom: 20px;
    }

    body.lk-desktop-shell .notifications-panel {
        top: 24px;
        right: max(24px, calc(50% - var(--desk-shell) / 2));
        left: auto;
    }

    /* Auth — centered stage on desktop */
    body.lk-desktop-shell #app:has(#auth-page.active) {
        max-width: none;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-top: max(4px, env(safe-area-inset-top, 0px)) !important;
        padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: calc(100dvh - 110px);
        justify-content: center;
        align-items: center;
    }

    body.lk-desktop-shell #app:has(#auth-page.active) #auth-page.active {
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
        justify-content: center;
        align-items: center;
        padding: 32px 24px;
    }

    body.lk-desktop-shell #auth-page .auth-shell {
        max-width: 460px;
    }

    body.lk-desktop-shell #auth-page .auth-logo {
        height: 64px;
        max-width: 320px;
    }

    body.lk-desktop-shell #auth-page .auth-brand {
        margin-bottom: 22px;
    }

    body.lk-desktop-shell #auth-page .auth-segmented {
        margin-bottom: 20px;
    }

    body.lk-desktop-shell #auth-page .auth-card {
        width: 420px;
        max-width: 100%;
        padding: 32px 28px 26px;
        border-radius: 26px;
    }

    body.lk-desktop-shell #auth-page .auth-card .card-header .project-name {
        font-size: 1.5rem;
    }

    body.lk-desktop-shell #auth-page .auth-card .email-input,
    body.lk-desktop-shell #auth-page .auth-password-field,
    body.lk-desktop-shell #auth-page .auth-captcha-row,
    body.lk-desktop-shell #auth-page .auth-card .auth-submit {
        max-width: 360px;
    }

    body.lk-desktop-shell:has(#auth-page.active) .desktop-sidebar,
    body.lk-desktop-shell:has(#auth-page.active) .desktop-servers {
        display: none !important;
    }

    body.lk-desktop-shell:has(#auth-page.active) #site-footer {
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Home desktop dashboard — full width of content column */
    body.lk-desktop-shell #home-page.active .home-desktop-dashboard {
        display: block;
        margin-bottom: 1.25rem;
    }

        /* Home command center — layout deltas only (colors from shared section 8) */
    body.lk-desktop-shell #home-page .home-dash-hero { display: none; }

    .home-command {
        padding: 26px 26px 22px;
        border-radius: 26px;
    }
    .home-command-glow {
    inset: -40% auto auto -20%;
    width: 120%; /* Увеличили с 70% до 120%, чтобы компенсировать сдвиг влево */
    height: 120%;
}
    .home-command-main {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.85fr);
        gap: 22px;
        align-items: stretch;
    }
    .home-command-hero {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 20px;
        align-items: center;
    }
    .home-command-tg { display: none; }
    .home-command-ring-wrap {
        position: relative;
        width: 132px;
        height: 132px;
        flex-shrink: 0;
    }
    .home-command-ring-bg,
    .home-command-ring-fg { stroke-width: 9; }
    .home-command-ring-value { font-size: 1.85rem; }
    .home-command-ring-unit { font-size: 0.72rem; }
    .home-command-kicker-row { margin-bottom: 8px; gap: 10px; }
    .home-command-kicker { font-size: 0.74rem; letter-spacing: 0.08em; }
    .home-command-badge {
        min-height: 22px;
        padding: 0 9px;
        font-size: 0.72rem;
    }
    .home-command-title {
        margin: 0 0 6px;
        font-size: 1.55rem;
        font-weight: 750;
        line-height: 1.2;
        letter-spacing: -0.02em;
    }
    .home-command-sub {
        margin: 0 0 16px;
        font-size: 0.92rem;
        line-height: 1.4;
        max-width: 34rem;
    }
    .home-command-meters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .home-command-meter {
        gap: 8px;
        padding: 12px 12px 11px;
        border-radius: 16px;
    }
    .home-command-meter-label { font-size: 0.75rem; }
    .home-command-meter-pct { font-size: 0.82rem; }
    .home-command-meter-track { height: 7px; }
    .home-command-meter-value {
        font-size: 0.86rem;
        color: var(--text-primary);
    }
    .home-command-slot {
        height: 7px;
    }
    .home-command-slot-more { font-size: 0.68rem; }
    .home-command-aside {
        display: flex;
        flex-direction: column;
        gap: 12px;
        justify-content: center;
        padding: 4px 0;
    }
    .home-command-cta {
        gap: 12px;
        padding: 16px 16px 16px 14px;
        border-radius: 18px;
    }
    .home-command-cta .ui-icon {
        width: 2rem;
        height: 2rem;
        border-radius: 12px;
    }
    .home-command-cta .ui-icon-svg {
        width: 1.1rem;
        height: 1.1rem;
    }
    .home-command-cta-label { font-size: 1rem; }
    .home-command-cta-hint { font-size: 0.78rem; }
    .home-command-cta-chevron {
        width: 1rem !important;
        height: 1rem !important;
        background: transparent !important;
    }
    .home-command-quick {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    .home-command-chip {
        gap: 6px;
        min-height: 74px;
        padding: 10px 8px;
        border-radius: 14px;
        font-size: 0.74rem;
    }
    .home-command-chip .ui-icon-svg {
        width: 1.05rem;
        height: 1.05rem;
    }
    .home-command-news {
        gap: 8px;
        margin-top: 2px;
        padding: 9px 12px;
        border-radius: 999px;
        font-size: 0.78rem;
    }
    .home-command-news-icon .ui-icon-svg {
        width: 1.05rem;
        height: 1.05rem;
    }
    .home-command-news-chevron .ui-icon-svg {
        width: 1rem;
        height: 1rem;
    }
    .home-command-news-dot {
        top: 6px;
        right: 34px;
    }

    .home-command-usage {
        margin-top: 20px;
        padding-top: 18px;
    }
    .home-command-usage-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }
    .home-command-usage-title { font-size: 1.05rem; }
    .home-command-usage-sub {
        margin: 4px 0 0;
        font-size: 0.82rem;
    }
    .home-command-usage-more {
        font-size: 0.85rem;
        padding: 4px 0;
    }

    .home-traffic-dashboard {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: 14px;
        align-items: start;
    }
    .home-command-usage--dashboard .traffic-chart-panel,
    .home-command-usage--dashboard .traffic-compare-panel {
        margin-bottom: 0;
        height: 100%;
    }
    .home-command-usage--dashboard .traffic-chart-panel { padding: 14px; }
    .home-command-usage--dashboard .traffic-compare-panel {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 14px;
        border-radius: 16px;
        border: 1px solid var(--meter-border);
        background: var(--surface-soft);
    }
    .home-command-usage--dashboard .traffic-compare-bars {
        margin-bottom: 0;
        gap: 10px;
    }
    html[data-theme="light"] .home-command-usage {
        border-top-color: var(--separator-color);
    }
    @media (max-width: 1180px) {
        .home-command-main { grid-template-columns: 1fr; }
        .home-command-aside { max-width: 420px; }
        .home-traffic-dashboard { grid-template-columns: 1fr; }
    }


    body.lk-desktop-shell #home-page .account-summary-card,
    body.lk-desktop-shell #home-page .home-quick-actions-card {
        display: none !important;
    }

    body.lk-desktop-shell #home-page .home-devices-compact {
        margin-bottom: 1.25rem;
    }

    .home-servers-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 14px;
        flex-shrink: 0;
    }

    .home-servers-title {
        font-family: 'Oswald', sans-serif;
        font-size: 1.05rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-primary);
    }

    .home-servers-status-hint {
        font-size: 0.72rem;
        font-weight: 650;
        color: var(--green-color);
        letter-spacing: 0.02em;
    }

    .home-servers-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1 1 auto;
    }

    .home-servers-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 12px;
        border-radius: 14px;
        border: 1px solid var(--separator-color);
        background: rgba(255, 255, 255, 0.04);
    }

    html[data-theme="light"] .home-servers-item {
        background: rgba(255, 255, 255, 0.72);
    }

    .home-servers-flag {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        flex-shrink: 0;
        box-shadow:
            inset 0 0 0 1px rgba(0, 0, 0, 0.08),
            0 1px 4px rgba(15, 23, 42, 0.12);
        background-size: cover;
        background-position: center;
        position: relative;
        overflow: hidden;
    }
    .home-servers-flag--us {
        background-image:
            linear-gradient(
                to bottom,
                #b22234 0%, #b22234 7.69%,
                #fff 7.69%, #fff 15.38%,
                #b22234 15.38%, #b22234 23.07%,
                #fff 23.07%, #fff 30.76%,
                #b22234 30.76%, #b22234 38.45%,
                #fff 38.45%, #fff 46.14%,
                #b22234 46.14%, #b22234 53.83%,
                #fff 53.83%, #fff 61.52%,
                #b22234 61.52%, #b22234 69.21%,
                #fff 69.21%, #fff 76.9%,
                #b22234 76.9%, #b22234 84.59%,
                #fff 84.59%, #fff 92.28%,
                #b22234 92.28%, #b22234 100%
            );
    }
    .home-servers-flag--us::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 48%;
        height: 50%;
        background: #3c3b6e;
    }
    .home-servers-flag--de {
        background-image: linear-gradient(
            to bottom,
            #000 0%, #000 33.33%,
            #dd0000 33.33%, #dd0000 66.66%,
            #ffce00 66.66%, #ffce00 100%
        );
    }
    .home-servers-flag--fi {
        background-color: #fff;
        background-image:
            linear-gradient(#002f6c, #002f6c),
            linear-gradient(#002f6c, #002f6c);
        background-size: 100% 22%, 22% 100%;
        background-position: center, center;
        background-repeat: no-repeat;
    }
	
	.home-servers-flag--nl {
    background-color: #fff;
    background-image:
        linear-gradient(
            to bottom,
            #D52B1E 0%,      
            #D52B1E 33.33%,
            #FFFFFF 33.33%,  
            #FFFFFF 66.66%,
            #21468B 66.66%,  
            #21468B 100%
        );
	background-position: center, center;
    background-repeat: no-repeat;	
}

    .home-servers-status {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        flex-shrink: 0;
    }

    .home-servers-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #22c55e;
        flex-shrink: 0;
        animation: homeServerBlink 1.4s ease-in-out infinite;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
    }

    @keyframes homeServerBlink {
        0%, 100% {
            opacity: 1;
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5), 0 0 8px rgba(34, 197, 94, 0.55);
        }
        50% {
            opacity: 0.35;
            transform: scale(0.78);
            box-shadow: 0 0 0 6px rgba(34, 197, 94, 0), 0 0 14px rgba(34, 197, 94, 0.75);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .home-servers-dot { animation: none; opacity: 1; }
    }

    .home-servers-name {
        flex: 1;
        font-weight: 650;
        font-size: 0.92rem;
        color: var(--text-primary);
        min-width: 0;
    }

    .home-servers-online {
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #16a34a;
    }

    .desktop-servers-footnote {
        margin: auto 4px 0;
        padding-top: 16px;
        font-size: 0.72rem;
        line-height: 1.35;
        color: var(--text-secondary);
        flex-shrink: 0;
    }

    body.lk-desktop-shell #help-page .help-wizard-card {
        padding: 28px 32px 24px;
        min-height: min(72vh, 680px);
        display: flex;
        flex-direction: column;
        border-radius: 26px;
    }
    body.lk-desktop-shell #help-page .help-wizard-glow {
        inset: -35% auto auto -12%;
        width: 62%;
        height: 110%;
    }
    body.lk-desktop-shell #help-page .help-wizard-head {
        margin-bottom: 14px;
        padding-bottom: 0;
        border-bottom: none;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    body.lk-desktop-shell #help-page .help-wizard-head-copy {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    body.lk-desktop-shell #help-page .help-wizard-head .project-name {
        font-size: 1.55rem;
        letter-spacing: 0.02em;
    }
    body.lk-desktop-shell #help-page .help-wizard-lead {
        display: block;
        max-width: 36rem;
        font-size: 0.95rem;
        text-align: center;
    }
    body.lk-desktop-shell #help-page .help-wizard-eyebrow {
        margin-bottom: 10px;
        font-size: 0.74rem;
    }
    body.lk-desktop-shell #help-page .help-wizard-progress {
        margin: 0 auto 22px;
        padding: 14px 18px;
        gap: 12px;
        border-radius: 18px;
        max-width: 420px;
        width: 100%;
    }
    body.lk-desktop-shell #help-page .help-wizard-dot {
        width: 34px;
        height: 34px;
    }
    body.lk-desktop-shell #help-page .help-wizard-dot-num {
        font-size: 0.8rem;
    }
    body.lk-desktop-shell #help-page .help-wizard-step:not(:last-child)::after {
        top: 16px;
        left: calc(50% + 20px);
        width: calc(100% - 24px);
    }
    body.lk-desktop-shell #help-page .help-wizard-step-label {
        font-size: 0.78rem;
    }
    body.lk-desktop-shell #help-page .help-wizard-body {
        position: relative;
        z-index: 1;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 8px 0 12px;
        text-align: center;
    }
    body.lk-desktop-shell #help-page .help-wizard-panel {
        width: 100%;
        max-width: 720px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    body.lk-desktop-shell #help-page .help-wizard-title {
        font-size: 1.3rem;
        margin-bottom: 8px;
        text-align: center;
    }
    body.lk-desktop-shell #help-page .help-wizard-hint {
        font-size: 0.98rem;
        margin: 0 auto 22px;
        max-width: 34rem;
        text-align: center;
    }
    body.lk-desktop-shell #help-page .help-os-grid {
        gap: 14px;
        width: 100%;
        max-width: 720px;
        margin: 0 auto;
    }
    body.lk-desktop-shell #help-page .help-os-tile {
        min-height: 168px;
        padding: 26px 16px 20px;
        border-radius: 20px;
        gap: 12px;
    }
    body.lk-desktop-shell #help-page .help-os-icon-well {
        width: 58px;
        height: 58px;
        border-radius: 16px;
    }
    body.lk-desktop-shell #help-page .help-os-emoji,
    body.lk-desktop-shell #help-page .help-os-emoji .ui-icon-svg {
        width: 1.7rem;
        height: 1.7rem;
    }
    body.lk-desktop-shell #help-page .help-os-name {
        font-size: 1.05rem;
    }
    body.lk-desktop-shell #help-page .help-os-desc {
        display: block;
        font-size: 0.82rem;
        max-width: 9.5rem;
    }
    body.lk-desktop-shell #help-page .help-os-check {
        width: 22px;
        height: 22px;
        top: 12px;
        right: 12px;
    }
    body.lk-desktop-shell #help-page .help-os-tile:hover {
        transform: translateY(-4px);
    }
    body.lk-desktop-shell #help-page .help-app-picker {
        width: 100%;
        max-width: 520px;
        margin: 0 auto 8px;
        gap: 16px;
    }
    body.lk-desktop-shell #help-page .help-app-btn {
        min-height: 168px;
        border-radius: 22px;
        padding: 30px 18px 22px;
        gap: 14px;
    }
    body.lk-desktop-shell #help-page .help-os-detected {
        margin: -6px auto 18px;
        font-size: 0.84rem;
    }
    body.lk-desktop-shell #help-page .help-connect-copy-btn,
    body.lk-desktop-shell #help-page .help-connect-share-btn {
        max-width: 280px;
        min-height: 50px;
        border-radius: 14px;
        font-size: 0.92rem;
        padding: 0 20px;
    }
    body.lk-desktop-shell #help-page .help-wizard-link-actions {
        gap: 10px;
    }
    body.lk-desktop-shell #help-page .help-connect-orbit-wrap {
        padding: 12px 0 0;
    }
    body.lk-desktop-shell #help-page .help-connect-aside {
        display: none;
    }
    body.lk-desktop-shell #help-page .help-import-actions {
        display: none;
    }
    body.lk-desktop-shell #help-page .help-app-logo-wrap {
        width: 58px;
        height: 58px;
        border-radius: 18px;
    }
    body.lk-desktop-shell #help-page .help-app-logo {
        width: 38px;
        height: 38px;
    }
    body.lk-desktop-shell #help-page .help-app-name {
        font-size: 1.05rem;
    }
    body.lk-desktop-shell #help-page .help-download-row {
        width: 100%;
        max-width: 560px;
        margin: 12px auto 0;
        flex-direction: column;
        gap: 10px;
    }
    body.lk-desktop-shell #help-page #install-app-actions .help-download-btn {
        max-width: 520px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        min-height: 68px !important;
        border-radius: 18px !important;
    }
    body.lk-desktop-shell #help-page .help-wizard-nav {
        margin-top: auto;
        padding-top: 20px;
        gap: 12px;
        width: 100%;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
    body.lk-desktop-shell #help-page .help-wizard-nav-btn {
        min-height: 50px;
        padding: 0 22px;
        border-radius: 14px;
        font-size: 0.95rem;
    }
    body.lk-desktop-shell #help-page .help-wizard-primary-btn,
    body.lk-desktop-shell #help-page .help-wizard-secondary-btn {
        max-width: 420px;
        min-height: 52px;
        border-radius: 14px;
        font-size: 1rem;
        margin-left: auto;
        margin-right: auto;
    }

    /* Devices — full page */
    body.lk-desktop-shell #devices-page .devices-page-card {
        padding: 28px 32px;
        min-height: min(68vh, 580px);
    }
    body.lk-desktop-shell #devices-page .devices-page-title {
        font-size: 1.45rem;
    }
    body.lk-desktop-shell #devices-page .device-row {
        padding: 14px 4px;
    }
    body.lk-desktop-shell #devices-page #devices-sheet-add-btn {
        margin-top: 18px;
        max-width: 320px;
    }

    body.lk-desktop-shell #payment-page .payment-page-card {
        padding: 28px 28px 30px;
    }
    body.lk-desktop-shell #payment-page .payment-page-title {
        font-size: 1.45rem;
    }
    body.lk-desktop-shell #payment-page .payment-plans {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        align-items: stretch;
    }
    body.lk-desktop-shell #payment-page .plan-card {
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
    }
    body.lk-desktop-shell #payment-page .payment-section {
        margin-top: 22px;
        max-width: 640px;
    }
    body.lk-desktop-shell #payment-page .payment-method-group--compact {
        max-width: 380px;
    }
    body.lk-desktop-shell #payment-page .payment-method-group--compact .payment-method-tile {
        min-height: 86px;
    }
    body.lk-desktop-shell #payment-page .payment-mode-tabs-wrap {
        margin-bottom: 26px;
    }
    body.lk-desktop-shell #payment-page .payment-mode-tabs {
        width: min(100%, 480px);
        gap: 8px;
        padding: 7px;
    }
    body.lk-desktop-shell #payment-page .payment-mode-tab {
        min-height: 46px;
        font-size: 0.9rem;
        padding: 10px 14px;
    }
    body.lk-desktop-shell #payment-page .payment-extra-card {
        max-width: 560px;
        padding: 8px 4px 4px;
    }

    body.lk-desktop-shell #profile-page .profile-page-card,
    body.lk-desktop-shell #news-page .news-page-card {
        padding-top: 28px;
    }
}

@media (min-width: 1280px) {
    body.lk-desktop-shell {
        --desk-content: 1040px;
    }
}

@media (min-width: 1440px) {
    body.lk-desktop-shell {
        --desk-content: 1100px;
        --desk-servers: 260px;
    }
}

/* ========== Dark theme: interactive contrast (shared tokens cover most) ========== */
html:not([data-theme="light"]) .desktop-tool-btn:hover {
    background: rgba(0, 240, 255, 0.08);
    border-color: rgba(0, 240, 255, 0.24);
}

html:not([data-theme="light"]) .home-devices-compact .device-row--compact + .device-row--compact,
html:not([data-theme="light"]) #devices-page .device-row + .device-row {
    border-top: 1px solid rgba(0, 240, 255, 0.08);
}

html:not([data-theme="light"]) .secondary-btn {
    border: 1px solid rgba(0, 240, 255, 0.16) !important;
}

html:not([data-theme="light"]) .help-wizard-nav-btn--back {
    border-color: rgba(0, 240, 255, 0.18);
    color: var(--text-primary);
}

html:not([data-theme="light"]) .toolbar-btn {
    border-color: rgba(0, 240, 255, 0.14);
}

html:not([data-theme="light"]) .toolbar-btn:hover {
    background: rgba(0, 240, 255, 0.12);
    border-color: rgba(0, 240, 255, 0.28);
}