/* ============================================================
   M-VPN — личный кабинет, тёмная тема.
   Подключается из _LkLayout с атрибутом media: «(prefers-color-scheme: dark)» в режиме «авто»,
   «all» — если тему выбрали тёмной руками, «not all» — светлой. Так пользовательский выбор из
   Пункта управления не требует дублировать правила: тёмные живут только здесь.
   Порядок: файл идёт после lk.css, поэтому при равной специфичности побеждает.
   ============================================================ */

:root {
    --lk-bg: #000000;
    --lk-desk-bg: #050506;

    --lk-card: rgba(28, 28, 30, .74);
    --lk-card-solid: #1c1c1e;
    --lk-card-press: rgba(44, 44, 46, .82);
    --lk-sheet: rgba(28, 28, 30, .86);

    --lk-ink: #f5f5f7;
    --lk-ink-2: #98989d;
    --lk-ink-3: #636366;

    --lk-line: rgba(255, 255, 255, .10);
    --lk-hairline: rgba(255, 255, 255, .12);

    --lk-fill: rgba(120, 120, 128, .26);
    --lk-fill-press: rgba(120, 120, 128, .36);

    --lk-accent: #0a84ff;
    --lk-accent-press: #2997ff;
    --lk-accent-ring: rgba(10, 132, 255, .28);
    --lk-accent-soft: rgba(10, 132, 255, .18);
    --lk-primary-grad: linear-gradient(180deg, #2b93ff 0%, #0a6fe0 100%);
    --lk-primary-grad-press: linear-gradient(180deg, #1f86f5 0%, #0860c4 100%);
    --lk-primary-shadow: 0 8px 22px -6px rgba(10, 132, 255, .5);

    --lk-ok-soft: rgba(48, 209, 88, .16);
    --lk-switch-on: #30d158;
    --lk-ok-text: #30d158;
    --lk-warn-soft: rgba(255, 159, 10, .18);
    --lk-warn-text: #ffb340;
    --lk-danger: #ff453a;
    --lk-danger-soft: rgba(255, 69, 58, .16);
    --lk-danger-text: #ff6961;

    --lk-card-shadow: 0 12px 32px -16px rgba(0, 0, 0, .65);
    --lk-card-inset: inset 0 1px 0 rgba(255, 255, 255, .06);
    --lk-tabbar-bg: rgba(18, 18, 20, .72);

    --lk-grid: rgba(255, 255, 255, .05);
    --lk-glow-1: rgba(41, 151, 255, .15);
    --lk-glow-2: rgba(27, 100, 255, .14);
}

/* стеклянная капсула «Подробнее» на карточке баланса */
.balance .btn--soft {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .4);
}

/* фирменный знак в режиме auto — тёмный вариант окраски */
.brand-mark--auto .brand-mark__dark { display: inline; }
.brand-mark--auto .brand-mark__light { display: none; }
.brand-mark--auto .brand-mark__glow { opacity: .28; }

/* плитка приложения на экранах входа: на чёрном кант светлый, свечение сильнее */
.auth__appicon {
    box-shadow:
        0 0 0 .5px rgba(255, 255, 255, .10),
        0 16px 34px -14px rgba(0, 0, 0, .55),
        0 0 44px -8px rgba(27, 100, 255, .45);
}

/* переключатели сегментов: выбранный — приподнятая тёмно-серая плашка */
.seg__btn[aria-checked="true"] { box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }

/* Десктоп: телефон на тёмном столе — тень слабее, зато мягкое синее свечение и кромка экрана.
   Условие то же, что у корпуса в lk.css: широкий экран с мышью или сенсорный, но и высокий. */
@media (min-width: 600px) and (hover: hover), (min-width: 600px) and (min-height: 600px) {
    .device::before {
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, .05),
            inset 0 0 0 1px rgba(255, 255, 255, .12),
            0 28px 56px -22px rgba(0, 0, 0, .85),
            0 0 160px -30px rgba(41, 151, 255, .22);
    }
    .app { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }

    html.is-3d .desk-shadow {
        box-shadow:
            0 28px 56px -22px rgba(0, 0, 0, .85),
            0 0 160px -30px rgba(41, 151, 255, .22);
    }
    html.is-3d .device::before {
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, .05),
            inset 0 0 0 1px rgba(255, 255, 255, .12);
    }
    html.is-3d .device__gloss i {
        background: radial-gradient(closest-side, rgba(255, 255, 255, .10), rgba(255, 255, 255, .035) 45%, rgba(255, 255, 255, 0) 100%);
    }

    /* Пункт управления и экран блокировки на чёрном: затемнение подложки мягче, тени глубже */
    .cc__backdrop { background: rgba(0, 0, 0, .45); }
    .cc__panel { box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .08); }
    .lock {
        background:
            radial-gradient(70% 50% at 50% -5%, rgba(41, 151, 255, .28), transparent 70%),
            radial-gradient(60% 45% at 90% 100%, rgba(27, 100, 255, .22), transparent 70%),
            #000;
    }
}