/* ═══════════════════════════════════════════════════════════════════════════
   GetNet VPN — личный кабинет
   Mobile: контент + нижний tab-bar.
   Desktop (≥900px): full-width brand сверху, sticky sidebar слева,
                     2-колоночная сетка карточек справа (.card-wide → span 2).
═══════════════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; overscroll-behavior: none;
       background: #000 linear-gradient(61.7deg, #000 0%, #1a1a1a 50%, #333 100%) fixed; }
/* Scrollbar-gutter и форсированный overflow-y: scroll — только для десктопа.
   На iOS Safari overflow-y:scroll на html ломает position:fixed
   (.bottom-nav может пропадать/отрываться при скролле). */
@media (min-width: 900px) {
    html {
        overflow-y: scroll;
        scrollbar-gutter: stable;
    }
}
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       color: #fff; min-height: 100vh; background: transparent;
       overscroll-behavior: none; -webkit-tap-highlight-color: transparent;
       -webkit-touch-callout: none; touch-action: pan-y;
       padding-top: env(safe-area-inset-top);
       padding-bottom: env(safe-area-inset-bottom); }
body.has-bottom-nav { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

/* Full-bleed gradient fallback (shown only when WebGL2 canvas fails). */
body::before { content: ""; position: fixed; top: -50vh; left: -50vw; right: -50vw; bottom: -50vh;
               background: linear-gradient(61.7deg, #000 0%, #1a1a1a 50%, #333 100%);
               z-index: -2; pointer-events: none; }

/* Убрать дефолтный синий focus-ring во всех браузерах. */
:focus { outline: none; }
:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.55);
                 outline-offset: 2px; border-radius: 6px; }
button, input, a { -webkit-tap-highlight-color: transparent; }

/* ─── Brand bar (full-width sticky top) ─── */
.brand { position: sticky; top: 0; left: 0; right: 0; z-index: 30;
         background: var(--glass-bg, rgba(12, 12, 14, 0.55));
         backdrop-filter: blur(36px) saturate(200%);
         -webkit-backdrop-filter: blur(36px) saturate(200%);
         border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.10));
         box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45),
                     inset 0 1px 0 rgba(255, 255, 255, 0.14);
         padding: calc(12px + env(safe-area-inset-top)) 0 12px;
         margin-top: calc(-1 * env(safe-area-inset-top));
         margin-bottom: 16px; }
.brand-inner { max-width: 1600px; margin: 0 auto;
               padding: 0 16px; display: flex; align-items: center; gap: 10px; }
.brand .logo { width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; object-fit: cover;
               box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5),
                           0 0 0 1px rgba(255, 255, 255, 0.08); }
.brand .name { color: #fff; font-weight: 700; font-size: 18px; letter-spacing: 0.3px; }

.theme-toggle { margin-left: auto; flex-shrink: 0;
                width: 36px; height: 36px; border-radius: 18px;
                display: flex; align-items: center; justify-content: center;
                background: rgba(255, 255, 255, 0.06);
                border: 1px solid rgba(255, 255, 255, 0.14);
                color: #fff; cursor: pointer; padding: 0;
                transition: background 0.15s, border-color 0.15s; }
.theme-toggle:hover { background: rgba(255, 255, 255, 0.12);
                      border-color: rgba(255, 255, 255, 0.28); }
.theme-toggle svg { display: block; }
.theme-toggle .ic-moon, .theme-toggle .ic-sun, .theme-toggle .ic-palette {
    display: none; align-items: center; justify-content: center; }
[data-theme="dark"]   .theme-toggle .ic-moon    { display: flex; }
[data-theme="light"]  .theme-toggle .ic-sun     { display: flex; }
[data-theme="custom"] .theme-toggle .ic-palette { display: flex; }

/* ─── Wrap / content ─── */
.wrap { max-width: 480px; margin: 0 auto; padding: 0 16px 16px; }
.content { display: block; }

a { color: #fff; -webkit-tap-highlight-color: transparent; }

/* ─── Side nav (desktop) — скрыт на мобиле ─── */
.side-nav { display: none; }

/* ─── Bottom tab-bar (mobile/PWA) ─── */
.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 50;
    display: flex; align-items: stretch; justify-content: space-around;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: var(--glass-bg, rgba(12, 12, 14, 0.78));
    backdrop-filter: blur(36px) saturate(200%);
    -webkit-backdrop-filter: blur(36px) saturate(200%);
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.bottom-nav-link {
    position: relative; z-index: 1;
    flex: 1 1 0; min-width: 0;
    height: 54px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px; padding: 0 2px;
    color: #9b9ba2; text-decoration: none;
    font-size: 11px; font-weight: 600;
    line-height: 1.1;
    border-radius: 12px;
    transition: color .28s ease;
    /* iOS Safari тап-фиксы — никаких prevent-default highlight,
       никаких user-select глитчей, мгновенный отклик без 300ms delay. */
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    /* Принудительно никакие transform на :active/:focus/:hover.
       (Браузеры могут применять дефолтные стили или унаследованные.) */
    transform: none !important;
}
.bottom-nav-link.active { color: #111; }
.bottom-nav-link:active, .bottom-nav-link:focus, .bottom-nav-link:hover {
    transform: none !important;
}
.bottom-nav-link.active .bottom-nav-icon { color: #111; }
.bottom-nav-icon { display: flex; align-items: center; justify-content: center;
                   color: inherit; }
.bottom-nav-icon svg { width: 22px; height: 22px;
                       /* Жёстко фиксируем block — иначе SVG inline-baseline
                          даёт ~3-4px люфта снизу и иконки могут «прыгать»
                          между состояниями. */
                       display: block; }
.bottom-nav-label { line-height: 1; letter-spacing: 0.1px; }

/* ─── Magic indicator ───────────────────────────────────────────────────────
   Только transform анимируется — выделение «переезжает» с одной вкладки на
   другую. width/height снапятся мгновенно (CSS не транзитит, JS просто ставит).
   Никакого «растягивания/уменьшения». */
.nav-indicator {
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: translate(0, 0);
    transition: transform .32s cubic-bezier(0.2, 0.7, 0.2, 1),
                opacity .22s ease;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
    opacity: 0;
}
.nav-indicator.no-transition { transition: none !important; }

/* ═════ Glass / cards ═════ */
.glass, .card, .mode-row, .app-link {
    position: relative; isolation: isolate;
}

.card { border-radius: 14px; padding: 16px; margin-bottom: 12px;
        background: var(--glass-bg, rgba(22, 22, 26, 0.42));
        backdrop-filter: blur(32px) saturate(180%);
        -webkit-backdrop-filter: blur(32px) saturate(180%);
        border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.10));
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35),
                    0 2px 8px rgba(0, 0, 0, 0.25),
                    inset 0 1px 0 rgba(255, 255, 255, 0.15),
                    inset 0 -1px 0 rgba(0, 0, 0, 0.25); }
.card::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px;
                background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28) 50%, transparent);
                pointer-events: none; border-radius: 14px; }
.card h3 { font-size: 13px; color: #d8d8d8; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.card .val { font-size: 22px; font-weight: 700; color: #fff; }

/* ─── Mode rows (routing) ─── */
.mode-row { padding: 14px; border-radius: 12px; margin-bottom: 8px;
            background: rgba(22, 22, 26, 0.4);
            backdrop-filter: blur(28px) saturate(180%);
            -webkit-backdrop-filter: blur(28px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.10);
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28),
                        inset 0 1px 0 rgba(255, 255, 255, 0.12);
            transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; }
.mode-row::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px;
                    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22) 50%, transparent);
                    pointer-events: none; }
.mode-row.selected { border-color: rgba(74, 222, 128, 0.55);
                     background: rgba(74, 222, 128, 0.12);
                     box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.30),
                                 0 10px 28px rgba(74, 222, 128, 0.12),
                                 inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.mode-row .mode-label { font-weight: 600; font-size: 16px; color: #fff; }
.mode-row .mode-desc { color: #e0e0e0; font-size: 13px; margin-top: 4px; }
.mode-row .mode-footer { display: flex; justify-content: space-between; align-items: center;
                          margin-top: 10px; gap: 10px; }
.mode-row .mode-status { font-size: 13px; font-weight: 600; color: #4ade80; }
.mode-row .mode-status.off { color: #cfcfcf; }

/* ─── Badges, sub-row, buttons ─── */
.badge { display: inline-block; padding: 3px 10px; border-radius: 8px; font-size: 13px; font-weight: 600;
         border: 1px solid rgba(255, 255, 255, 0.18); }
.badge-on { background: rgba(74, 222, 128, 0.15); color: #4ade80; border-color: rgba(74, 222, 128, 0.4); }
.badge-off { background: rgba(255, 255, 255, 0.04); color: #cfcfcf; }
.sub-row { display: flex; gap: 8px; margin-top: 8px; }
.sub-row input { flex: 1; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255,255,255,0.15);
                  color: #fff; padding: 10px; border-radius: 8px; font-size: 13px; }
.sub-row button { background: #fff; color: #000; border: none; padding: 10px 16px;
                   border-radius: 8px; font-weight: 700; cursor: pointer; white-space: nowrap; }

.btn { display: block; padding: 14px; background: #fff; color: #000; border-radius: 12px;
       font-size: 16px; font-weight: 700; text-align: center; text-decoration: none;
       margin-bottom: 8px; border: none; cursor: pointer; width: 100%; }
.btn-outline { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2);
               color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-outline:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.08); }
.btn-sm { padding: 10px 14px; font-size: 14px; margin-bottom: 6px; }
.btn-danger { background: rgba(255, 100, 100, 0.15); color: #ff8888;
              border: 1px solid rgba(255, 100, 100, 0.3); }

.quick-btns { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.quick-btns button { flex: 1; padding: 10px; background: rgba(255,255,255,0.05);
                      border: 1px solid rgba(255,255,255,0.15);
                      color: #fff; border-radius: 8px; font-size: 15px; font-weight: 600;
                      cursor: pointer; min-width: 60px;
                      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.quick-btns button:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.08); }

input[type=number], input[type=text], input[type=password], input[type=email] {
    width: 100%; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255,255,255,0.15);
    color: #fff; padding: 12px; border-radius: 8px; font-size: 16px; margin: 8px 0;
    font-family: inherit; -webkit-appearance: none; appearance: none;
    box-sizing: border-box; }

.err { background: rgba(255, 100, 100, 0.12); color: #ff8888; padding: 10px; border-radius: 8px;
       margin-bottom: 12px; border: 1px solid rgba(255, 100, 100, 0.3); }
.ok { background: rgba(74, 222, 128, 0.12); color: #4ade80; padding: 10px; border-radius: 8px;
      margin-bottom: 12px; border: 1px solid rgba(74, 222, 128, 0.3); }

.app-link { display: flex; align-items: center; gap: 12px; padding: 12px;
            background: rgba(22, 22, 26, 0.42);
            backdrop-filter: blur(28px) saturate(180%);
            -webkit-backdrop-filter: blur(28px) saturate(180%);
            border: 1px solid rgba(255,255,255,0.10); border-radius: 12px;
            margin-bottom: 8px; text-decoration: none; color: #fff;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25),
                        inset 0 1px 0 rgba(255, 255, 255, 0.12);
            transition: border-color 0.2s, background 0.2s; }
.app-link::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px;
                    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2) 50%, transparent);
                    pointer-events: none; }
.app-link:hover { border-color: rgba(255,255,255,0.28); background: rgba(30, 30, 34, 0.5); }
.app-link .name { font-weight: 600; font-size: 15px; color: #fff; }
.app-link .desc { font-size: 12px; color: #d8d8d8; }

/* ─── Service rows (внутри карточки «Услуги») ─── */
.svc-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0;
           border-bottom: 1px solid rgba(255,255,255,0.1); }
.svc-row:last-child { border-bottom: none; }
.svc-info .svc-name { font-weight: 600; font-size: 15px; color: #fff; }
.svc-info .svc-price { font-size: 13px; color: #d8d8d8; margin-top: 2px; }
.svc-action a, .svc-action button { padding: 8px 16px; border-radius: 8px; font-size: 13px;
           font-weight: 600; text-decoration: none; border: none; cursor: pointer; }

/* ─── Guides (collapsible) ─── */
.guide { border-top: 1px solid rgba(255,255,255,0.08); margin: 0 -4px; }
.guide:first-of-type { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 8px; }
.guide summary { list-style: none; cursor: pointer; padding: 14px 4px;
                 display: flex; align-items: center; justify-content: space-between;
                 gap: 12px; transition: color .15s; }
.guide summary::-webkit-details-marker { display: none; }
.guide summary:hover { color: #fff; }
.guide-title { font-size: 14px; font-weight: 600; color: #fff; }
.guide-arrow { color: #cfcfcf; transition: transform .2s; flex-shrink: 0; }
.guide[open] .guide-arrow { transform: rotate(180deg); color: #fff; }
.guide-body { padding: 4px 4px 16px; color: #d8d8d8; font-size: 13px; line-height: 1.55; }
.guide-body p { margin-bottom: 8px; }
.guide-body ol, .guide-body ul { margin: 6px 0 10px 22px; }
.guide-body li { margin-bottom: 4px; }
.guide-body b { color: #fff; }
.guide-body i { color: #e0e0e0; font-style: normal; font-weight: 600; }
.guide-tip { margin-top: 10px; padding: 8px 10px; border-radius: 8px;
             background: rgba(74, 222, 128, 0.08);
             border: 1px solid rgba(74, 222, 128, 0.20);
             color: #c8e8c8; font-size: 12.5px; }

/* ─── Tabs ─── */
.tabs { display: flex; gap: 6px; margin-bottom: 14px;
        background: rgba(0,0,0,0.3); padding: 4px; border-radius: 10px;
        border: 1px solid rgba(255,255,255,0.08); }
.tab-btn { flex: 1; padding: 10px 12px; background: transparent; border: none;
           color: #d8d8d8; font-size: 14px; font-weight: 600; border-radius: 8px;
           cursor: pointer; font-family: inherit; }
.tab-btn.active { background: rgba(255,255,255,0.12); color: #fff; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

#bg-gl { position: fixed; top: 0; left: 0; z-index: -1;
         pointer-events: none; display: block; }

/* Diamond pattern (desktop only) — JS добавляет canvas. */
#bg-diamonds { position: fixed; inset: 0; z-index: -1;
               pointer-events: none; display: none; }

/* Hide WebGL canvas in dark theme — body::before gradient shows instead. */
[data-theme="dark"] #bg-gl { display: none; }

/* Custom theme: bump saturate чтобы цвета орбов/паттерна были видны через
   backdrop-filter карточек. */
[data-theme="custom"] .card,
[data-theme="custom"] .brand,
[data-theme="custom"] .mode-row,
[data-theme="custom"] .app-link,
[data-theme="custom"] .side-nav-items,
[data-theme="custom"] .bottom-nav {
    backdrop-filter: blur(24px) saturate(220%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(220%) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS — liquid-glass отклик: fade-in карточек, shimmer на hover,
   ripple на click, page-transitions, loader.
═══════════════════════════════════════════════════════════════════════════ */

@keyframes card-in {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes shimmer-sweep {
    from { transform: translateX(-130%) skewX(-12deg); }
    to   { transform: translateX(230%) skewX(-12deg); }
}
@keyframes ripple-grow {
    from { transform: scale(0); opacity: 0.55; }
    to   { transform: scale(1); opacity: 0; }
}
@keyframes loader-orbit {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Ромбы сходятся в центр и расходятся обратно (alternate). */
@keyframes loader-merge {
    0%   { transform: translate(var(--lx,0), var(--ly,0)) rotate(45deg) scale(1); opacity: 0.95; }
    50%  { transform: translate(0, 0) rotate(45deg) scale(0.55); opacity: 1; }
    100% { transform: translate(var(--lx,0), var(--ly,0)) rotate(45deg) scale(1); opacity: 0.95; }
}
@keyframes page-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes page-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ─── Page transitions (SPA) ─── */
.wrap > .content { animation: page-fade-in 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@media (prefers-reduced-motion: reduce) {
    .wrap > .content, .card, .nav-indicator { animation: none !important;
                                              transition: none !important; }
}

/* ─── Card stagger entrance — только при первой загрузке сайта.
       На SPA-переходах его не нужно, потому что страница не перезагружается
       и stagger смотрелся бы как лишнее «дёрганье». */
body.first-load .wrap > .content > .card,
body.first-load .wrap > .content > .err,
body.first-load .wrap > .content > .ok {
    animation: card-in 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
body.first-load .wrap > .content > *:nth-child(1) { animation-delay:  20ms; }
body.first-load .wrap > .content > *:nth-child(2) { animation-delay:  60ms; }
body.first-load .wrap > .content > *:nth-child(3) { animation-delay: 100ms; }
body.first-load .wrap > .content > *:nth-child(4) { animation-delay: 140ms; }
body.first-load .wrap > .content > *:nth-child(5) { animation-delay: 180ms; }
body.first-load .wrap > .content > *:nth-child(6) { animation-delay: 220ms; }
body.first-load .wrap > .content > *:nth-child(7) { animation-delay: 260ms; }
body.first-load .wrap > .content > *:nth-child(8) { animation-delay: 300ms; }
body.first-load .wrap > .content > *:nth-child(9) { animation-delay: 340ms; }
body.first-load .wrap > .content > *:nth-child(n+10) { animation-delay: 380ms; }

/* ─── Card hover (subtle lift + brighter border) ─── */
.card { transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
                    border-color 0.25s ease,
                    box-shadow 0.25s ease; }
@media (hover: hover) {
    .card:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.18);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.40),
                    0 4px 12px rgba(0, 0, 0, 0.30),
                    inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }
}

/* ─── Shimmer на hover — ТОЛЬКО для desktop с настоящей мышью.
   На мобиле iOS Safari «застревает» :hover после тапа и shimmer триггерится
   при выборе вкладки → отключаем для touch-устройств целиком. */
.btn, .bottom-nav-link, .side-nav-link, .app-link,
.svc-action button, .ts-actions .btn {
    position: relative;
    overflow: hidden;
}
.svc-action a {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
}

/* Принудительно вырубаем pseudo-блики на touch-девайсах. */
@media (hover: none), (pointer: coarse) {
    .btn::before, .bottom-nav-link::after, .side-nav-link::after,
    .app-link::after, .ts-actions .btn::before,
    .svc-action button::after, .svc-action a::after {
        display: none !important;
        content: none !important;
        animation: none !important;
        background: none !important;
    }
}

@media (hover: hover) and (pointer: fine) {
    .btn::before, .bottom-nav-link::after, .side-nav-link::after,
    .app-link::after, .ts-actions .btn::before,
    .svc-action button::after, .svc-action a::after {
        content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%;
        background: linear-gradient(105deg, transparent 30%,
                                    rgba(255, 255, 255, 0.18) 50%,
                                    transparent 70%);
        transform: translateX(-130%) skewX(-12deg);
        pointer-events: none;
    }
    .btn:hover::before,
    .bottom-nav-link:hover::after,
    .side-nav-link:hover::after,
    .app-link:hover::after,
    .ts-actions .btn:hover::before,
    .svc-action button:hover::after,
    .svc-action a:hover::after {
        animation: shimmer-sweep 0.9s ease;
    }
    /* Тёмный shimmer для светлых кнопок (только desktop). */
    .btn:not(.btn-outline):not(.btn-danger)::before,
    .ts-actions .btn:not(.btn-outline)::before {
        background: linear-gradient(105deg, transparent 30%,
                                    rgba(0, 0, 0, 0.10) 50%,
                                    transparent 70%);
    }
}

/* ─── Click ripple ─── */
.ripple {
    position: absolute; border-radius: 50%; pointer-events: none;
    background: rgba(255, 255, 255, 0.45);
    transform: scale(0);
    animation: ripple-grow 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    z-index: 0;
}
.ripple.ripple-dark { background: rgba(0, 0, 0, 0.20); }

/* ─── Press-down: только цвет/border, без transform-scale (чтобы кнопки
       не «пружинили» на тапе). Отклик на нажатие — ripple-волна. */
.btn, .quick-btns button, .svc-action button, .svc-action a, .ts-actions .btn {
    transition: background 0.18s ease,
                border-color 0.18s ease,
                box-shadow 0.18s ease;
}

/* Чтобы pseudo-элементы не перекрывали текст. */
.btn > *, .bottom-nav-link > *, .side-nav-link > *,
.app-link > * { position: relative; z-index: 1; }

/* ─── Loader screen ─── */
.loader {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: #000;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
body:not(.loading) .loader {
    opacity: 0; visibility: hidden; pointer-events: none;
}
.loader-rhombi {
    position: relative;
    width: 80px; height: 80px;
    animation: loader-orbit 3.6s linear infinite;
}
.loader-rhombus {
    position: absolute;
    width: 22px; height: 22px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.45);
    top: 50%; left: 50%;
    margin: -11px 0 0 -11px;
    animation: loader-merge 1.6s cubic-bezier(0.55, 0, 0.45, 1) infinite;
}
/* Каждый ромб «висит» в одной из 4 сторон, конвергится к центру и обратно. */
.loader-rhombus-1 { --lx:   0px; --ly: -28px; }
.loader-rhombus-2 { --lx:  28px; --ly:   0px; animation-delay: 0.05s; }
.loader-rhombus-3 { --lx:   0px; --ly:  28px; animation-delay: 0.10s; }
.loader-rhombus-4 { --lx: -28px; --ly:   0px; animation-delay: 0.15s; }

/* ─── Theme settings modal ─── */
.ts-backdrop { position: fixed; inset: 0; z-index: 200;
               background: rgba(0,0,0,0.55);
               backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
               animation: ts-fadein .18s ease; }
.ts-modal { position: fixed; z-index: 201;
            left: 50%; top: 50%; transform: translate(-50%, -50%);
            width: min(540px, calc(100vw - 32px));
            max-height: calc(100vh - 80px);
            display: flex; flex-direction: column;
            border-radius: 16px;
            background: rgba(22, 22, 26, 0.92);
            backdrop-filter: blur(40px) saturate(180%);
            -webkit-backdrop-filter: blur(40px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55),
                        inset 0 1px 0 rgba(255, 255, 255, 0.14);
            animation: ts-zoomin .18s ease; }
@keyframes ts-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes ts-zoomin { from { transform: translate(-50%, -50%) scale(0.96); opacity: 0; }
                      to   { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.ts-modal-head { display: flex; align-items: center; justify-content: space-between;
                 padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.10); }
.ts-modal-head h3 { font-size: 16px; color: #fff; margin: 0;
                    text-transform: none; letter-spacing: 0; }
.ts-close { width: 32px; height: 32px; border-radius: 16px; border: none;
            background: rgba(255,255,255,0.06); color: #fff;
            font-size: 22px; line-height: 1; cursor: pointer;
            display: flex; align-items: center; justify-content: center; }
.ts-close:hover { background: rgba(255,255,255,0.14); }
.ts-modal-body { padding: 16px 18px 18px; overflow-y: auto; }
.ts-hint { color: #cfcfcf; font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
.ts-hint b { color: #fff; }
.ts-section { margin-bottom: 18px; padding-bottom: 14px;
              border-bottom: 1px solid rgba(255,255,255,0.06); }
.ts-section:last-of-type { border-bottom: none; padding-bottom: 0; }
.ts-section h4 { color: #d8d8d8; font-size: 13px; font-weight: 600;
                 text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.ts-row { display: flex; align-items: center; gap: 12px; padding: 6px 0;
          color: #e0e0e0; font-size: 14px; }
.ts-row > span:first-child { flex: 1; min-width: 0; }
.ts-row input[type=range] { flex: 1.5; min-width: 100px; accent-color: #fff; }
.ts-row input[type=color] { width: 38px; height: 32px; border-radius: 8px;
                             border: 1px solid rgba(255,255,255,0.18);
                             background: transparent; cursor: pointer; padding: 2px; }
.ts-val { font-size: 13px; font-weight: 600; color: #fff; min-width: 40px; text-align: right; }
.ts-checkrow { gap: 10px; }
.ts-checkrow input[type=checkbox] { width: 18px; height: 18px; accent-color: #fff; cursor: pointer; }
.ts-radio-group { display: flex; flex-direction: column; gap: 6px; }
.ts-radio-group label { display: flex; align-items: center; gap: 10px;
                         padding: 8px 10px; border-radius: 8px;
                         color: #e0e0e0; font-size: 14px; cursor: pointer;
                         transition: background .12s; }
.ts-radio-group label:hover { background: rgba(255,255,255,0.04); }
.ts-radio-group input[type=radio] { accent-color: #fff; cursor: pointer; }
.ts-color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
                 gap: 8px; }
.ts-color-row { display: flex; align-items: center; justify-content: space-between;
                gap: 8px; padding: 6px 8px; background: rgba(255,255,255,0.04);
                border-radius: 8px; color: #d8d8d8; font-size: 13px; }
.ts-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.ts-actions .btn { display: inline-block; width: auto; padding: 10px 18px; margin: 0; }

/* ─── PWA install prompt ─── */
.pwa-install { position: fixed; left: 12px; right: 12px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    z-index: 9999; display: flex; gap: 12px; align-items: center;
    padding: 14px 14px 14px 16px; border-radius: 16px;
    background: rgba(22, 22, 26, 0.78);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.14);
    max-width: 560px; margin: 0 auto;
    animation: pwa-slideup 0.28s ease; }
@keyframes pwa-slideup {
    from { transform: translateY(140%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.pwa-install[hidden] { display: none; }
body.with-pwa-install .wrap { padding-bottom: 110px; }
.pwa-install-icon { font-size: 28px; line-height: 1; flex-shrink: 0; }
.pwa-install-content { flex: 1; min-width: 0; }
.pwa-install-title { font-weight: 700; font-size: 15px; color: #fff; }
.pwa-install-text { color: #d8d8d8; font-size: 13px; margin-top: 4px; line-height: 1.45; }
.pwa-install-text b { color: #fff; font-weight: 600; }
.pwa-install-action { background: #fff; color: #000; border: none;
    padding: 9px 14px; border-radius: 10px; font-weight: 700; font-size: 14px;
    cursor: pointer; flex-shrink: 0; }
.pwa-install-action[hidden] { display: none; }
.pwa-install-close { background: transparent; color: #aaa; border: none;
    font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 6px;
    flex-shrink: 0; align-self: flex-start; }
.pwa-install-close:hover { color: #fff; }
@media (max-width: 420px) {
    .pwa-install { padding: 12px; gap: 10px; }
    .pwa-install-icon { font-size: 24px; }
    .pwa-install-title { font-size: 14px; }
    .pwa-install-text { font-size: 12px; }
    .pwa-install-action { padding: 8px 12px; font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP (≥ 900px). Bottom-bar скрыт. Sidebar слева, контент справа в 2 колонки.
═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
    body.has-bottom-nav { padding-bottom: 0; }
    .bottom-nav { display: none; }

    .brand-inner { padding: 0 28px; }
    .brand .name { font-size: 20px; }

    .wrap {
        max-width: 1280px;
        padding: 0 28px 28px;
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        column-gap: 24px;
        align-items: start;
    }
    .wrap > .side-nav {
        display: block;
        grid-column: 1;
        align-self: start;
        position: sticky;
        top: calc(70px + env(safe-area-inset-top));
        margin-bottom: 0;
        width: 100%;
    }
    /* Контент: CSS Grid, 2 колонки, grid-auto-flow: dense чтобы card-wide
       не оставляли дыр. Карточки в одной строке выравниваются по высоте. */
    .wrap > .content {
        grid-column: 2;
        min-width: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: dense;
        gap: 16px;
        align-items: stretch;
    }
    .wrap > .content > .card,
    .wrap > .content > .err,
    .wrap > .content > .ok { margin-bottom: 0; }
    .wrap > .content > .card-wide,
    .wrap > .content > .err,
    .wrap > .content > .ok { grid-column: 1 / -1; }

    .side-nav-items {
        position: relative;
        display: flex; flex-direction: column;
        gap: 4px; padding: 8px;
        /* Sidebar занимает полную высоту вьюпорта — выглядит как
           полноценная навигационная панель, а не короткий обрезок. */
        min-height: calc(100vh - 90px - env(safe-area-inset-top));
        border-radius: 14px;
        background: rgba(22, 22, 26, 0.42);
        backdrop-filter: blur(32px) saturate(180%);
        -webkit-backdrop-filter: blur(32px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.10);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35),
                    inset 0 1px 0 rgba(255, 255, 255, 0.14);
    }
    .side-nav-link {
        position: relative; z-index: 1;
        display: flex; align-items: center; gap: 12px;
        /* Фиксированная высота — чтобы font-weight на active не двигал layout. */
        height: 42px; padding: 0 14px;
        color: #cfcfcf; text-decoration: none;
        font-size: 14px; font-weight: 600;
        line-height: 1;
        border-radius: 10px;
        transition: color .25s ease;
    }
    .side-nav-link:hover { color: #fff; }
    .side-nav-link.active { color: #111; }
    .side-nav-icon { display: flex; align-items: center; justify-content: center;
                     width: 22px; height: 22px; flex-shrink: 0; }
    .side-nav-icon svg { width: 18px; height: 18px; }
    /* Indicator inside side-nav: sized to .side-nav-link cells. */
    .side-nav-items > .nav-indicator {
        border-radius: 10px;
    }

    .card { padding: 20px 22px; }
    .card h3 { font-size: 14px; }

    .card form input[type=number],
    .card form input[type=text],
    .card form input[type=password],
    .card form input[type=email] { max-width: 100%; }
    .card .btn { max-width: 100%; }

    /* Diamond pattern enabled on desktop only. */
    #bg-diamonds { display: block; }
}

/* Wide desktop / 2K (≥ 1400px) — bigger sidebar + typography. */
@media (min-width: 1400px) {
    .wrap {
        max-width: 1400px;
        column-gap: 28px;
        grid-template-columns: 240px minmax(0, 1fr);
    }
    .wrap > .content { gap: 20px; }
    .card { padding: 22px 24px; }
    .card .val { font-size: 26px; }
    .side-nav-link { padding: 12px 16px; font-size: 15px; }
    .side-nav-icon svg { width: 20px; height: 20px; }
    .brand .name { font-size: 22px; }
    .brand .logo { width: 38px; height: 38px; }
}

/* Ultra-wide (≥ 1900px) — содержимое остаётся в 2 колонках,
   max-width умеренный чтобы не размазывать карточки. */
@media (min-width: 1900px) {
    .wrap {
        max-width: 1500px;
    }
    .card .val { font-size: 28px; }
}

/* ─── Nav-less страницы (login, register, blocked) ─── */
@media (min-width: 900px) {
    body:not(.has-bottom-nav) .wrap {
        max-width: 720px;
        display: block;
        padding: 0 28px 28px;
    }
    body:not(.has-bottom-nav) .wrap > .content {
        display: block;
    }
}

/* === Серверы (профиль ЛК): живой список с нагрузкой === */
.server-list { list-style: none; margin: 0; padding: 0; }
.server-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 14px; color: #fff;
}
.server-row:last-child { border-bottom: none; }
.server-row-empty { color: #cfcfcf; justify-content: center; }
.server-flag { font-size: 18px; line-height: 1; flex-shrink: 0; }
.server-name { flex: 1; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.server-indicator {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    box-shadow: 0 0 4px currentColor;
}
.server-indicator.online {
    background: #4ade80;
    color: #4ade80;
    animation: server-blink 1.4s ease-in-out infinite;
}
.server-indicator.offline {
    background: #ef4444;
    color: #ef4444;
}
.server-load {
    width: 56px; text-align: right;
    font-variant-numeric: tabular-nums;
    color: #d8d8d8;
    font-size: 13px;
    flex-shrink: 0;
}
@keyframes server-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}