:root{
    --bg0:#07080a;
    --bg1:#0a0c10;
    --card:#14161a;
    --card2:#1c1f26;
    --stroke:rgba(255,255,255,.08);
    --text:#ffffff;
    --muted:rgba(255,255,255,.55);
    --muted2:rgba(255,255,255,.38);
    --blue:#0b5cff;
    --blue2:#2b7ff2;
    --green:#31d07f;

    --r-xl:28px;
    --r-lg:22px;
    --r-md:16px;

    --shadow: 0 20px 60px rgba(0,0,0,.55);
    --shadow-soft: 0 10px 30px rgba(0,0,0,.45);
    --blur: blur(12px);

    --gutter: 18px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bot: env(safe-area-inset-bottom, 0px);

    /* фикс: зарезервировать место под нижнюю панель */
    --nav-h: 112px; /* высота navShell + отступы (под твой дизайн) */
}

*{box-sizing:border-box}
html,body{height:100%}

body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
    color:var(--text);
    background:
            radial-gradient(1100px 900px at 70% 10%, rgba(43,127,242,.18) 0%, rgba(43,127,242,0) 55%),
            radial-gradient(900px 700px at 20% 40%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 55%),
            linear-gradient(180deg, var(--bg0), var(--bg1));

    overflow-x:hidden;
    overflow-y:auto;                 /* ✅ скролл */
    -webkit-overflow-scrolling: touch;
}

/* Page frame */
.app{
    min-height:100%;
    display:flex;
    flex-direction:column;
    gap:14px;

    /* ✅ верхний safe-area + боковые отступы */
    padding: calc(var(--safe-top) + 14px) var(--gutter)
        /* ✅ низ: + место под фикс-бар */
    calc(var(--safe-bot) + 14px + var(--nav-h));

    /* чтобы фикс-бар не "прыгал" при появлении скроллбара */
    position:relative;
}

/* ------------------ TOP ROW (твоя .content как header) ------------------ */
.content{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
    user-select:none;
}
.logo img{
    width:44px;height:44px;
    object-fit:contain;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.55));
}

.profilePill{
    display:flex;
    align-items:center;
    gap:10px;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(11,92,255,1), rgba(11,92,255,.82));
    border:1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);
    min-width: 132px;
    justify-content:center;
}
.profilePill .icon{
    width:18px;height:18px;opacity:.92;
}
.profilePill .name{
    font-weight:600;
    letter-spacing:.2px;
}

/* Hero */
.hero{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding: 2px 0 2px;
}
.hero h1{
    margin:0;
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -0.6px;
    font-weight: 750;
    text-shadow: 0 14px 40px rgba(0,0,0,.55);
}
.hero p{
    margin:2px;
    color:var(--muted);
    font-size: 12px;
    letter-spacing:.2px;
}

/* Cards */
.card{
    background: linear-gradient(180deg, rgba(28,31,38,.82), rgba(20,22,26,.72));
    border: 1px solid var(--stroke);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
}
.cardInner{
    padding: 16px;
}

/* Mini LK */
.lk{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 12px;
    align-items:stretch;
}
.lk .left{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding: 14px 14px 14px 16px;
    border-right: 1px solid rgba(255,255,255,.08);
}
.lk .right{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding: 14px 16px 14px 14px;
    align-items:flex-start;
}

.row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.label{color:var(--muted2); font-size:14px}
.value{font-size:18px;font-weight:650}
.chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 7px 10px;
    border-radius: 999px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.92);
    font-size: 14px;
    font-weight: 600;
}
.dot{
    width:8px;height:8px;border-radius:999px;
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(49,208,127,.12);
}
.bigMoney{
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.6px;
    margin-top: -2px;
}
.btn{
    border:none;
    cursor:pointer;
    color:#fff;
    font-weight:700;
    letter-spacing:.2px;
    border-radius: 18px;
    padding: 14px 18px;
    background: rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.10);
    transition: transform .12s ease, filter .12s ease, background .12s ease;
    user-select:none;
}
.btn:active{transform: translateY(1px) scale(.99)}
.btnPrimary{
    background: linear-gradient(180deg, var(--blue), rgba(11,92,255,.78));
    border:1px solid rgba(255,255,255,.12);
    box-shadow: 0 16px 40px rgba(11,92,255,.25);
}
.btnGhost{
    background: rgba(255,255,255,.06);
}
.btnSmall{
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 14px;
}

/* Key */
.keyHead{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    margin-bottom: 10px;
}
.title{
    font-size: 24px;
    font-weight: 780;
    letter-spacing:-.3px;
    margin:0;
}
.keyRow{
    display:flex;
    align-items:center;
    gap:10px;
}
.input{
    flex:1;
    padding: 14px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.92);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 15px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    user-select:all;
}
.help{
    margin-top: 10px;
    color: var(--muted2);
    font-size: 13px;
}

/* Subscription section */
.subTitle{
    margin:0 0 4px 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing:-.35px;
}
.subDesc{
    margin:0 0 14px 0;
    color: var(--muted);
    font-size: 15px;
}

.grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
.tile{
    position:relative;
    padding: 14px 12px 12px;
    border-radius: 22px;
    border:1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.05);
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
    cursor:pointer;
    min-height: 98px;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
    overflow:hidden;
}
.tile:hover{border-color: rgba(255,255,255,.14)}
.tile:active{transform: translateY(1px) scale(.99)}
.tileIcon{
    width:46px;height:46px;border-radius:999px;
    display:grid;place-items:center;
    background: rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.10);
    margin-bottom: 10px;
}
.tileIcon svg{width:22px;height:22px;opacity:.95}
.tileName{font-weight:800; font-size:16px}
.tileAction{color:var(--muted2); font-size:13px; margin-top:4px}

/* Platform chips */
.platformRow{
    display:flex;
    align-items:center;
    gap:12px;
    margin: 4px 0 12px;
}
.platformLabel{
    color: var(--muted2);
    font-size: 14px;
    min-width: 92px;
}
.chips{
    flex:1;
    display:flex;
    gap:10px;
    padding: 8px;
    border-radius: 999px;
    border:1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    overflow:hidden;
}
.chipBtn{
    flex:1;
    border:0;
    cursor:pointer;
    background: transparent;
    color: rgba(255,255,255,.60);
    padding: 10px 12px;
    border-radius: 999px;
    font-weight:700;
    transition: background .12s ease, color .12s ease;
}
.chipBtn.active{
    background: rgba(11,92,255,.35);
    color: rgba(255,255,255,.95);
    border:1px solid rgba(255,255,255,.10);
    box-shadow: 0 12px 26px rgba(11,92,255,.18);
}

.cta{
    width:100%;
    padding: 16px 18px;
    border-radius: 22px;
    font-size: 20px;
    font-weight: 850;
}

/* Legal */
.legal{
    text-align:center;
    color: rgba(43,127,242,.90);
    font-weight: 700;
    font-size: 16px;
    padding: 8px 0 2px;
    cursor:pointer;
    user-select:none;
}

/* ------------------ Bottom nav (FIXED, no overlap) ------------------ */
.bottomNav{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    padding: 0 var(--gutter) calc(var(--safe-bot) + 14px);
    z-index: 20;
}

.navShell{
    border-radius: 30px;
    border:1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 22px 60px rgba(0,0,0,.55);
    overflow:hidden;
}

/* ✅ УБИРАЕМ ПОИСК ВООБЩЕ */
.navTop{ display:none !important; }

.navBottom{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 12px 8px 14px;
}

.navItem{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding: 10px 6px;
    border-radius: 18px;
    cursor:pointer;
    color: rgba(255,255,255,.62);
    user-select:none;
    transition: background .12s ease, color .12s ease;
}
.navItem.active{
    color: rgba(255,255,255,.95);
}
.navItem.active .navIcon{
    color: var(--blue2);
    filter: drop-shadow(0 10px 18px rgba(43,127,242,.25));
}
.navIcon{
    width:26px;height:26px;
    color: rgba(255,255,255,.9);
    opacity:.95;
}
.navLabel{
    font-size: 12px;
    font-weight: 750;
}

/* Modal */
.modalBackdrop{
    position:fixed; inset:0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display:none;
    align-items:center;
    justify-content:center;
    padding: 18px;
    z-index: 50;
}
.modalBackdrop.show{display:flex}
.modal{
    width:min(420px, 100%);
    border-radius: 26px;
    border:1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(28,31,38,.92), rgba(20,22,26,.88));
    box-shadow: 0 30px 100px rgba(0,0,0,.65);
    overflow:hidden;
}
.modalHead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 14px 16px;
    border-bottom:1px solid rgba(255,255,255,.06);
}
.modalHead .t{font-weight:850}
.x{
    width:42px;height:42px;border-radius: 16px;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    display:grid;place-items:center;
    cursor:pointer;
    color: rgba(255,255,255,.85);
    font-size: 18px;
    font-weight: 900;
}
.modalBody{
    padding: 16px;
    display:flex;
    flex-direction:column;
    gap: 12px;
    align-items:center;
}
#qrCanvas{
    width: 260px;
    height: 260px;
    border-radius: 18px;
    background: #fff;
    padding: 12px;
}

/* Toast */
.toast{
    position:fixed;
    left:50%;
    transform: translateX(-50%);
    bottom: calc(var(--safe-bot) + 90px); /* ✅ ближе, т.к. search убрали */
    background: rgba(0,0,0,.75);
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
    padding: 10px 14px;
    border-radius: 999px;
    box-shadow: 0 18px 50px rgba(0,0,0,.55);
    font-weight:750;
    display:none;
    z-index: 60;
    max-width: 90vw;
    text-align:center;
}
.toast.show{display:block}

/* Responsive */
@media (max-width: 420px){
    .hero h1{font-size: 25px;}
    .grid{grid-template-columns: repeat(2, 1fr);}
    .tile{min-height: 104px;}
    .bigMoney{font-size: 36px;}
    :root{ --nav-h: 118px; }
}
@media (max-height: 780px){
    .hero h1{font-size: 32px;}
    .tile{min-height: 92px;}
    .cta{font-size: 18px;}
}
.grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

/* ✅ на телефоне — всегда 2×2 */
@media (max-width: 520px){
    .grid{ grid-template-columns: repeat(2, 1fr); }
}
.tile.selected{
    border-color: rgba(43,127,242,.55);
    background: rgba(43,127,242,.12);
    box-shadow: 0 18px 50px rgba(43,127,242,.18);
}

.tile.selected .tileAction{
    color: rgba(255,255,255,.75);
}
.platformRow{
    display:flex;
    align-items:center;
    gap:12px;
    margin: 6px 0 12px;
}

.platformLabel{
    color: var(--muted2);
    font-size: 14px;
    min-width: 92px;
}

.platformIcons{
    flex:1;
    display:flex;
    gap:10px;
    padding: 8px;
    border-radius: 999px;
    border:1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    overflow:hidden;
}

.pIcon{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.85);
    cursor:pointer;
    display:grid;
    place-items:center;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.pIcon:active{ transform: translateY(1px) scale(.99); }

.pIcon.active{
    background: rgba(11,92,255,.30);
    border-color: rgba(255,255,255,.14);
    box-shadow: 0 12px 26px rgba(11,92,255,.18);
}

.pi{
    font-weight: 900;
    font-size: 18px;
    letter-spacing: .2px;
    opacity: .95;
}

/* на очень узких — уменьшаем размеры иконок */
@media (max-width: 380px){
    .pIcon{ width:40px; height:40px; border-radius: 13px; }
    .pi{ font-size: 16px; }
}
.ctaDownload{
    width:100%;
    padding: 14px 18px;
    border-radius: 22px;
    font-size: 16px;
    font-weight: 850;
    margin-bottom: 8px;
}
/* Platform block (title above, icons below) */
.platformBlock{
    margin: 10px 0 12px;
}

.platformTitle{
    margin: 0 0 10px 0;
    color: rgba(255,255,255,.92);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.2px;
}

/* icons container now wraps */
.platformIcons{
    display:flex;
    flex-wrap: wrap;              /* ✅ перенос строк */
    gap:10px;
    padding: 10px;
    border-radius: 18px;
    border:1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
}

/* icon button */
.pIcon{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.85);
    cursor:pointer;
    display:grid;
    place-items:center;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
    flex: 0 0 auto;               /* ✅ не растягиваться */
}

.pIcon:active{ transform: translateY(1px) scale(.99); }

.pIcon.active{
    background: rgba(11,92,255,.30);
    border-color: rgba(255,255,255,.14);
    box-shadow: 0 12px 26px rgba(11,92,255,.18);
}

.pi{
    font-weight: 900;
    font-size: 18px;
    letter-spacing: .2px;
    opacity: .95;
}

/* “TV” чуть компактнее, чтобы влезало */
.tvtxt{
    font-size: 15px;
    letter-spacing: .1px;
    font-weight: 950;
}

/* на очень узких чуть меньше */
@media (max-width: 380px){
    .pIcon{ width:40px; height:40px; border-radius: 13px; }
    .pi{ font-size: 16px; }
    .tvtxt{ font-size: 14px; }
}
/* Mini LK — компактнее и аккуратнее */
.lk{
    display:grid;
    grid-template-columns: 1.25fr .75fr; /* чуть больше места слева, меньше справа */
    gap: 10px;
    align-items:stretch;
}

.lk .left{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding: 12px 12px 12px 14px; /* меньше воздуха */
    border-right: 1px solid rgba(255,255,255,.08);
}

.lk .right{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding: 12px 14px 12px 12px;
    align-items:flex-start;
}

.row{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.label{
    color:var(--muted2);
    font-size:13px;
    line-height:1.1;
}

.value{
    font-size:15px;
    font-weight:650;
    line-height:1.1;
}

/* статус делаем компактнее */
.chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 6px 10px;
    border-radius: 999px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.92);
    font-size: 13px;
    font-weight: 650;
}

.dot{
    width:7px;height:7px;border-radius:999px;
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(49,208,127,.12);
}

/* баланс — меньше и более “премиально” */
.bigMoney{
    font-size: 28px;         /* было 40 */
    font-weight: 820;
    letter-spacing: -0.4px;
    margin-top: -2px;
    line-height: 1.05;
}

/* кнопка пополнить — меньше */
.lk .right .btnPrimary{
    padding: 10px 12px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 14px 34px rgba(11,92,255,.22);
}
.appsTitle{
    margin: 6px 0 10px 0;
    color: rgba(255,255,255,.92);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.2px;
}
.tileIcon img{
    width:22px;
    height:22px;
    object-fit:contain;
    display:block;
    opacity:.95;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}
/* tile */
.tile{
    position:relative;
    padding: 14px 14px;
    border-radius: 22px;
    border:1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.05);
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
    cursor:pointer;
    min-height: 98px;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
    overflow:hidden;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
}

.tile:hover{border-color: rgba(255,255,255,.14)}
.tile:active{transform: translateY(1px) scale(.99)}

.tile.selected{
    border-color: rgba(43,127,242,.55);
    background: rgba(43,127,242,.12);
    box-shadow: 0 18px 50px rgba(43,127,242,.18);
}

/* left text */
.tileText{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:6px;
    max-width: 70%;
}

.tileName{
    font-weight: 850;
    font-size: 16px;
    line-height: 1.1;
}

.tileAction{
    color: var(--muted2);
    font-size: 13px;
}

/* watermark icon (big PNG inside tile) */
.tileWatermark{
    position:absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 78px;
    height: 78px;
    opacity: .50;               /* полупрозрачность */
    filter: saturate(1.05) drop-shadow(0 14px 30px rgba(0,0,0,.35));
    object-fit: contain;
    pointer-events: none;       /* чтобы клик проходил по карточке */
    z-index:1;
}

/* когда выбрано — можно чуть усилить watermark */
.tile.selected .tileWatermark{
    opacity: .28;
}

/* убираем старый круг-иконку полностью */
.tileIcon{ display:none !important; }
.planBig{
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.2px;
    line-height: 1.05;
}

.planHint{
    color: rgba(255,255,255,.55);
    font-size: 13px;
    line-height: 1.25;
}
/* ---------- layout: pages ---------- */
.app{ height:100%; position:relative; overflow:hidden; }
.appContent{
    min-height:100%;
    display:flex;
    flex-direction:column;
    gap:14px;
    padding: calc(var(--safe-top) + 14px) var(--gutter) calc(var(--safe-bot) + var(--nav-h) + 14px);
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
}

.page{ display:none; }
.page.active{ display:block; }

/* ---------- app tiles: big watermark png ---------- */
.tile{
    position:relative;
    overflow:hidden;
}
.tileText{
    position:relative;
    z-index:2;
}
.tileWatermark{
    position:absolute;
    right:-8px;
    top:50%;
    transform: translateY(-50%);
    width: 88px;
    height: 88px;
    object-fit:contain;
    opacity:.26;
    filter: saturate(1.05) contrast(1.05);
    pointer-events:none;
}

/* убираем “кружок под иконку” (если остался в css) */
.tileIcon{ display:none !important; }

/* grid: телефон 2×2 */
@media (max-width: 520px){
    .grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- settings ---------- */
.settingsTop{
    margin-top: 2px;
    margin-bottom: 2px;
}
.settingsTitle{
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -.4px;
}
.settingsSub{
    margin-top: 6px;
    color: var(--muted);
    font-size: 14px;
}

.setRow{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}
.setStatusChip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 8px 10px;
    border-radius: 999px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    font-weight: 750;
    font-size: 13px;
    white-space:nowrap;
}
.sDot{
    width:8px;height:8px;border-radius:99px;
    background: rgba(255,255,255,.28);
    box-shadow: 0 0 0 4px rgba(255,255,255,.08);
}

.setGrid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 12px;
}
.setBox{
    border:1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 18px;
    padding: 12px;
}
.setLabel{
    color: var(--muted2);
    font-size: 12px;
}
.setValue{
    font-weight: 850;
    margin-top: 4px;
}
.setValueBig{
    font-size: 18px;
    font-weight: 900;
    margin-top: 4px;
}

/* ---------- tariffs list ---------- */
.planList{
    display:flex;
    flex-direction:column;
    gap: 10px;
}

.planCard{
    border-radius: 20px;
    border:1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    padding: 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
}
.planLeft{
    display:flex;
    flex-direction:column;
    gap: 3px;
}
.planName{
    font-weight: 950;
    font-size: 16px;
}
.planSub{
    color: var(--muted);
    font-size: 13px;
}
.planBadges{
    display:flex;
    gap: 8px;
    align-items:center;
    flex-wrap:wrap;
}
.badge{
    font-size: 12px;
    font-weight: 850;
    padding: 6px 10px;
    border-radius: 999px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.88);
}
.badgeActive{
    border-color: rgba(49,208,127,.25);
    background: rgba(49,208,127,.10);
}
.badgeSoon{
    border-color: rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.60);
}

.planActions{
    display:flex;
    flex-direction:column;
    gap: 8px;
    min-width: 140px;
}
.planBtn{
    padding: 10px 12px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 900;
}
.planBtn:disabled{
    opacity:.55;
    cursor:not-allowed;
}

.payHint{
    margin-top: 10px;
    color: var(--muted2);
    font-size: 12px;
    line-height: 1.3;
}
/* Отступ между LK (тариф/баланс) и блоком выбора приложений */
#page-home > .card + .card {
    margin-top: 14px; /* можешь поставить 16-18 если хочешь больше */
}

/* На маленьких экранах чуть больше воздуха */
@media (max-width: 420px){
    #page-home > .card + .card {
        margin-top: 16px;
    }
}
/* Red "glass" cancel button */
.btnDanger{
    background: rgba(255, 59, 48, .14);
    border: 1px solid rgba(255, 59, 48, .28);
    color: rgba(255,255,255,.92);
    box-shadow: 0 16px 40px rgba(255, 59, 48, .10);
}

.btnDanger:hover{
    background: rgba(255, 59, 48, .18);
    border-color: rgba(255, 59, 48, .34);
}

.btnDanger:disabled{
    opacity: .45;
    filter: saturate(.8);
}
/* баланс + кнопка */
.balanceHead{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.btnPlus{
  padding: 10px 12px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

/* topup modal */
.topUpDetails{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  padding: 10px 12px;
}
.topUpSummary{
  cursor:pointer;
  font-weight: 850;
  color: rgba(255,255,255,.92);
}
.topUpGrid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
@media (max-width: 420px){
  .topUpGrid{ grid-template-columns: repeat(2, 1fr); }
}
.topUpAmt{
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  cursor:pointer;
}
.topUpAmt.active{
  background: rgba(11,92,255,.22);
  border-color: rgba(43,127,242,.35);
}
.topUpRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  padding: 10px 12px;
}
.topUpLabel{
  color: rgba(255,255,255,.70);
  font-size: 13px;
  font-weight: 800;
}
.topUpInput{
  width: 140px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-weight: 850;
  outline: none;
}
.topUpHint{
  color: rgba(255,255,255,.55);
  font-size: 12px;
  line-height: 1.3;
}