/* ═══════════════════════════════════════════════════════════════════════════
   GetNet VPN — lk-theme.css
   Слой-ретема НАД lk.css: ЛК / вход / регистрация в стилистике лендинга
   (монохром, Onest, серебряные pill-кнопки, tubelight-навигация, живой фон).
   Грузится ПОСЛЕ lk.css. Структурные правки — на все темы; «лендинговый» фон —
   на dark (light/custom рисуют свой WebGL поверх).
═══════════════════════════════════════════════════════════════════════════ */

:root {
    --t-silver: linear-gradient(180deg, #ffffff 0%, #d6d6db 42%, #707079 100%);
    --t-mono: 'JetBrains Mono', ui-monospace, monospace;
    --t-accent: #4ade80;
    --t-line: rgba(255,255,255,0.09);
    --t-line2: rgba(255,255,255,0.16);
    --t-ease: cubic-bezier(0.22, 0.65, 0.18, 1);
}

/* ─── Шрифт ─── */
body, input, button, textarea, select, a,
.btn, .name, .card h3, .mode-row, .app-link, .tab-btn, .badge, .side-nav-link, .bottom-nav-label, .auth-tab {
    font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ═══ Живой фон «как у лендинга» (DOM .bg в lk_base/base). ═══
   z-index -2: на dark виден; на light/custom его перекрывает WebGL-канвас (-1). */
html { background: #050506 !important; }
html[data-theme="dark"] body::before { display: none !important; }
html[data-theme="dark"] #bg-diamonds { display: none !important; }

.bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
      background: radial-gradient(120% 80% at 50% -8%, #141416 0%, #060607 46%, #000 100%); }
.bg-glow { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.5; }
.bg-glow--top { top: -32vh; left: 50%; transform: translateX(-50%); width: 92vw; height: 72vh;
                background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 60%);
                animation: lk-glow1 24s var(--t-ease) infinite alternate; }
.bg-glow--mid { bottom: -22vh; right: -12vw; width: 62vw; height: 60vh;
                background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 60%);
                animation: lk-glow2 30s var(--t-ease) infinite alternate; }
@keyframes lk-glow1 { from { transform: translateX(-50%) translateY(0); } to { transform: translateX(-46%) translateY(5vh); } }
@keyframes lk-glow2 { from { transform: translate(0,0); } to { transform: translate(-5vw,-4vh); } }
.bg-paths { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; }
.bg-paths path { stroke: rgba(255,255,255,0.10); stroke-width: 1; fill: none; stroke-dasharray: 6 14; animation: lk-flow 16s linear infinite; }
.bg-paths path:nth-child(2n) { animation-duration: 22s; stroke: rgba(255,255,255,0.07); }
.bg-paths path:nth-child(3n) { animation-duration: 28s; }
@keyframes lk-flow { to { stroke-dashoffset: -400; } }
.bg-grain { position: absolute; inset: 0; opacity: 0.035; mix-blend-mode: overlay;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) {
    .bg-glow, .bg-paths path { animation: none !important; }
}

/* ─── Brand bar ─── */
.brand-home { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; transition: opacity .2s; }
.brand-home:hover { opacity: 0.78; }
.brand {
    background: rgba(6,6,7,0.5) !important; border-bottom: 1px solid var(--t-line) !important; box-shadow: none !important;
    backdrop-filter: blur(20px) saturate(160%) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
}
.brand .name { font-weight: 700 !important; letter-spacing: -0.02em !important; }

/* ─── Карточки ─── */
.card {
    background: rgba(255,255,255,0.035) !important; border: 1px solid var(--t-line) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 30px rgba(0,0,0,0.35) !important; border-radius: 16px !important;
}
@media (hover: hover) {
    .card:hover { border-color: var(--t-line2) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 16px 40px rgba(0,0,0,0.45) !important; }
}
.card h3 { font-family: var(--t-mono) !important; font-size: 11px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; }
body:not(.has-bottom-nav) .card h3 {
    font-family: 'Onest', sans-serif !important; font-size: 22px !important; letter-spacing: -0.02em !important; text-transform: none !important;
    background: var(--t-silver); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ─── Кнопки ─── */
.btn { border-radius: 999px !important; background: linear-gradient(180deg, #ffffff, #d7d7dc) !important; color: #0a0a0a !important;
       font-weight: 600 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 8px 22px rgba(0,0,0,0.45) !important; }
.btn-outline { background: rgba(255,255,255,0.05) !important; border: 1px solid var(--t-line2) !important; color: #f4f4f5 !important; box-shadow: none !important; }
.btn-outline:hover { border-color: rgba(255,255,255,0.3) !important; background: rgba(255,255,255,0.09) !important; }
.btn-danger { background: rgba(255,90,90,0.12) !important; color: #ff8a8a !important; border: 1px solid rgba(255,90,90,0.32) !important; box-shadow: none !important; }
.quick-btns button { border-radius: 999px !important; background: rgba(255,255,255,0.05) !important; border: 1px solid var(--t-line) !important; }
.sub-row button { border-radius: 999px !important; background: linear-gradient(180deg,#fff,#d7d7dc) !important; }

/* ─── Mode-rows / app-links ─── */
.mode-row { background: rgba(255,255,255,0.035) !important; border: 1px solid var(--t-line) !important; box-shadow: none !important; border-radius: 14px !important; }
.mode-row.selected { border-color: rgba(74,222,128,0.42) !important; background: linear-gradient(180deg, rgba(74,222,128,0.07), rgba(255,255,255,0.03)) !important; box-shadow: 0 0 0 1px rgba(74,222,128,0.22) !important; }
.app-link { background: rgba(255,255,255,0.035) !important; border: 1px solid var(--t-line) !important; box-shadow: none !important; border-radius: 14px !important; }
.app-link:hover { border-color: var(--t-line2) !important; background: rgba(255,255,255,0.055) !important; }

/* ─── Inputs / tabs / badge ─── */
input[type=number], input[type=text], input[type=password], input[type=email] { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 12px !important; }
input:focus { border-color: rgba(255,255,255,0.34) !important; outline: none !important; }
.tabs { background: rgba(255,255,255,0.03) !important; border: 1px solid var(--t-line) !important; border-radius: 999px !important; }
.tab-btn { border-radius: 999px !important; }
.tab-btn.active { background: rgba(255,255,255,0.1) !important; }
.badge { border-radius: 999px !important; }
.theme-toggle { border-radius: 999px !important; }

/* ═══ Sidebar (desktop) → tubelight ═══ */
.side-nav-items { background: rgba(255,255,255,0.03) !important; border: 1px solid var(--t-line) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important; border-radius: 18px !important; }
.side-nav-link.active, .side-nav-link.active .side-nav-icon { color: #fff !important; }
.side-nav .nav-indicator { background: rgba(255,255,255,0.08) !important; border: 1px solid var(--t-line2) !important; box-shadow: none !important; }
.side-nav .nav-indicator::before {
    content: ""; position: absolute; left: -5px; top: 50%; transform: translateY(-50%);
    width: 4px; height: 52%; border-radius: 999px; background: #fff; box-shadow: 0 0 16px 4px rgba(255,255,255,0.5);
}

/* ═══ Mobile tab-bar → tubelight плавающая пилюля ═══ */
@media (max-width: 899px) {
    /* Почти на всю ширину (минус поля) — иначе длинные подписи («Приложения»)
       обрезаются по краям. Пилюля, но широкая, пункты flex:1 на равную ширину. */
    .bottom-nav {
        left: 12px !important; right: 12px !important; transform: none !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        width: auto !important; max-width: none !important; padding: 6px !important; border-radius: 22px !important;
        background: rgba(10,10,12,0.72) !important; border: 1px solid var(--t-line2) !important;
        box-shadow: 0 12px 34px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08) !important;
        backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; gap: 2px;
    }
    .bottom-nav-link { flex: 1 1 0 !important; min-width: 0 !important; height: 48px !important; border-radius: 16px !important; padding: 0 2px !important; }
    .bottom-nav-label { font-size: 9.5px !important; white-space: nowrap !important; letter-spacing: -0.2px; }
    .bottom-nav .nav-indicator { background: rgba(255,255,255,0.1) !important; border: 1px solid var(--t-line2) !important; box-shadow: none !important; }
    .bottom-nav .nav-indicator::before {
        content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
        width: 52%; height: 4px; border-radius: 999px; background: #fff; box-shadow: 0 0 16px 4px rgba(255,255,255,0.55);
    }
    .bottom-nav-link.active, .bottom-nav-link.active .bottom-nav-icon { color: #fff !important; }
    .pwa-install { bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
}

/* В установленном PWA (standalone) таб-бар нужно ниже: home-indicator inset
   большой, поэтому уменьшаем его вклад. В браузере оставляем 8px+safe (там ок). */
@media (max-width: 899px) and (display-mode: standalone) {
    .bottom-nav { bottom: max(5px, calc(env(safe-area-inset-bottom) - 16px)) !important; }
}

/* ═══ МОБ. FLEX-SHELL — ТОЛЬКО для браузера (display-mode: browser).
   В браузере: корень не скроллится → URL-бар не схлопывается → таб-бар/фон
   стабильны, и скролл во внутреннем .wrap со скрытым скроллбаром (нет iOS-полоски).
   В установленном PWA (standalone) shell НЕ применяем — он давал чёрную полосу
   снизу; там обычный скролл документа, безрамочно (viewport-fit=cover + .bg). ═══ */
@media (max-width: 899px) and (display-mode: browser) {
    html { height: 100%; }
    body {
        height: 100vh; height: 100dvh; min-height: 100dvh;
        overflow: hidden; display: flex; flex-direction: column;
    }
    .brand { position: relative !important; top: auto !important; flex: 0 0 auto; z-index: 5; }
    .wrap {
        flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    body.has-bottom-nav .wrap { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
    body.has-bottom-nav { padding-bottom: 0 !important; }
}

/* ═══ Общие мобильные правки (и браузер, и PWA) ═══ */
@media (max-width: 899px) {
    /* Прячем нативный iOS-индикатор скролла (полоска справа). */
    html, body, .wrap, .content { scrollbar-width: none !important; -ms-overflow-style: none !important; }
    html::-webkit-scrollbar, body::-webkit-scrollbar,
    .wrap::-webkit-scrollbar, .content::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
    /* Отступ первой карточки от плашки с лого. */
    .brand { margin-bottom: 0 !important; }
    .wrap { padding-top: 14px !important; width: 100%; }
    .content { width: 100%; }
    .wrap > .content > .card, .card { width: 100%; }
}

/* ─── PWA install плашка ─── */
.pwa-install-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #fff; }
.pwa-install-icon svg { width: 20px; height: 20px; }
.pwa-install { border-radius: 18px !important; background: rgba(10,10,12,0.85) !important; border: 1px solid var(--t-line2) !important; }
.pwa-install-action { border-radius: 999px !important; background: linear-gradient(180deg,#fff,#d7d7dc) !important; }

/* ─── Inline-иконки вместо эмодзи ─── */
.e-ic { width: 1.05em; height: 1.05em; vertical-align: -0.16em; display: inline-block; flex-shrink: 0; }
.guide-tip { display: flex; align-items: flex-start; gap: 8px; }
.guide-tip .e-ic { margin-top: 0.15em; color: var(--t-accent); }

/* ─── Флаги стран (SVG вместо эмодзи — рендерятся одинаково на всех ОС) ─── */
.flag { display: inline-block; width: 22px; height: 15px; border-radius: 3px; overflow: hidden;
        box-shadow: 0 0 0 1px rgba(255,255,255,0.14); vertical-align: middle; flex-shrink: 0; }
.flag-emoji { width: auto; height: auto; box-shadow: none; font-size: 18px; }
.server-flag { display: inline-flex; align-items: center; }
.server-flag .flag { width: 22px; height: 15px; }

/* ═══ Единая страница входа/регистрации (auth.html) ═══ */
.auth { max-width: 460px; margin: 0 auto; }
.auth-switch { position: relative; display: flex; gap: 4px; padding: 5px; margin-bottom: 16px; border-radius: 999px; border: 1px solid var(--t-line); background: rgba(255,255,255,0.03); }
.auth-tube { position: absolute; top: 5px; left: 0; height: calc(100% - 10px); border-radius: 999px;
    background: rgba(255,255,255,0.09); border: 1px solid var(--t-line2); opacity: 0;
    transition: transform .35s var(--t-ease), width .35s var(--t-ease); pointer-events: none; }
.auth-tube.ready { opacity: 1; }
.auth-tube::before { content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 52%; height: 4px; border-radius: 999px; background: #fff; box-shadow: 0 0 16px 4px rgba(255,255,255,0.5); }
.auth-tab { flex: 1; position: relative; z-index: 1; padding: 11px; border: none; background: transparent; color: #8a8a92; font-weight: 600; font-size: 15px; cursor: pointer; border-radius: 999px; transition: color .25s; }
.auth-tab.active { color: #fff; }
.auth-panel { display: none; }
.auth-panel.active { display: block; }
.auth-hint { color: #a7a7ae; font-size: 13px; margin-bottom: 10px; line-height: 1.5; }
.auth-hint code, .auth code { font-family: var(--t-mono); background: rgba(255,255,255,0.06); padding: 1px 6px; border-radius: 6px; }
.auth-bonus { color: var(--t-accent); font-size: 14px; margin-bottom: 12px; display: flex; align-items: flex-start; gap: 8px; }
.auth-bonus .e-ic { margin-top: 0.15em; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 14px; color: #888; font-size: 13px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.12); }
.auth-tg { color: #cdeaff !important; border-color: rgba(90,170,255,0.34) !important; background: rgba(40,130,220,0.12) !important; }
.auth-tg:hover { border-color: rgba(120,190,255,0.5) !important; background: rgba(45,140,235,0.2) !important; }

/* ═══ DESKTOP — нормальная dashboard-сетка ═══
   Было: узкий 1080px по центру → карточки тонули в пустоте, сайдбар висел в
   воздухе. Стало: широкий контейнер, контент адаптивно заполняет ширину
   (auto-fill колонки), card-wide на всю ширину, sparse-страницы (Пополнить)
   центрируются как фокус-экран. ═══ */
@media (min-width: 900px) {
    .wrap {
        max-width: 1760px !important;
        grid-template-columns: 234px minmax(0, 1fr) !important;
        column-gap: 32px !important;
        padding: 0 clamp(24px, 4vw, 64px) 48px !important;
    }
    .wrap > .content {
        grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)) !important;
        gap: 18px !important;
        grid-auto-flow: row dense !important;
        align-content: start !important;
    }
    .wrap > .content > .card-wide,
    .wrap > .content > .err,
    .wrap > .content > .ok { grid-column: 1 / -1 !important; }

    .card { padding: 22px 24px !important; border-radius: 18px !important; }
    .card h3 { font-size: 11px !important; margin-bottom: 10px !important; }
    .card .val { font-size: 30px !important; font-weight: 800 !important; letter-spacing: -0.03em !important; font-variant-numeric: tabular-nums; }

    .side-nav { top: calc(74px + env(safe-area-inset-top)) !important; }
    /* min-height чуть МЕНЬШЕ доступной высоты — иначе сайдбар выдавливал документ
       и появлялся «чуть-чуть» скролл на страницах, которые и так влезают. */
    .side-nav-items { padding: 8px !important; min-height: calc(100vh - 150px - env(safe-area-inset-top)) !important; }
    .side-nav-link { height: 44px !important; font-size: 14.5px !important; }
    .svc-row { padding: 14px 0 !important; }
    .app-link { padding: 14px !important; }

    /* Sparse-страницы — фокус-колонка по центру контентной зоны, без «дыр». */
    body.page-topup .wrap > .content {
        grid-template-columns: minmax(0, 560px) !important;
        justify-content: center;
    }
    body.page-topup .wrap > .content > .card { grid-column: auto !important; }
}
@media (min-width: 2000px) {
    .wrap > .content { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important; }
}

/* ─── Loader ─── */
html[data-theme="dark"] .loader { background: #050506 !important; }