/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg-0: #04070F;
    --bg-1: #080D1A;
    --bg-2: #0C1220;
    --bg-card: rgba(14, 22, 45, 0.65);
    --bg-card-h: rgba(18, 28, 55, 0.85);
    --border: rgba(65, 105, 200, 0.12);
    --border-h: rgba(79, 195, 247, 0.28);
    --border-accent: rgba(79, 195, 247, 0.35);

    --blue-1: #4FC3F7;
    --blue-2: #1E88E5;
    --blue-3: #1565C0;
    --blue-4: #0D47A1;
    --gold: #FFD54F;
    --green: #4CAF50;
    --orange: #FF8F00;
    --red: #EF5350;

    --grad-main: linear-gradient(135deg, #4FC3F7 0%, #1565C0 100%);
    --grad-gold: linear-gradient(135deg, #FFD54F 0%, #FF8F00 100%);

    --txt-1: #E3EEFF;
    --txt-2: #8BA4CC;
    --txt-3: #4A6280;

    --fs-display: clamp(1.42rem, 5vw, 1.78rem);
    --fs-title: clamp(1.14rem, 4.1vw, 1.36rem);
    --fs-card-title: 0.98rem;
    --fs-body: 0.86rem;
    --fs-body-sm: 0.74rem;
    --fs-caption: 0.64rem;
    --fs-micro: 0.58rem;
    --lh-tight: 1.12;
    --lh-body: 1.45;

    --nav-h: 92px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 24px;
    --r-full: 9999px;

    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.2, 0, 0, 1);
    --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-fast: 140ms;
    --motion-base: 220ms;
    --motion-slow: 360ms;
}

html {
    font-size: 16px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    overscroll-behavior-y: none;
    background: var(--bg-0);
}
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-0);
    color: var(--txt-1);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    height: 100dvh;
    width: 100vw;
    position: fixed;
    inset: 0;
    overscroll-behavior: none;
    overscroll-behavior-y: none;
    touch-action: manipulation;
}

/* ===== APP ===== */
.app {
    position: relative;
    width: 100%; max-width: 430px;
    height: var(--tg-viewport-stable-height, 100dvh);
    min-height: 100dvh;
    max-height: var(--tg-viewport-stable-height, 100dvh);
    margin: 0 auto;
    overflow: hidden;
    overscroll-behavior: none;
    overscroll-behavior-y: none;
    isolation: isolate;
    contain: layout paint size;
    background: var(--bg-1);
    background-image:
        radial-gradient(ellipse 70% 50% at 15% 0%, rgba(21,101,192,0.22) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 85% 100%, rgba(79,195,247,0.06) 0%, transparent 70%);
}
.app::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(4,7,15,0.08), rgba(4,7,15,0.34) 72%, rgba(4,7,15,0.68)),
        radial-gradient(circle at 50% 8%, rgba(82, 225, 255, 0.08), transparent 38%);
}

.flux-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    background: #04070f;
}
.flux-bg::before {
    content: '';
    position: absolute;
    inset: -7%;
    background-image: url('fluxvpn-ocean-bg.svg');
    background-size: cover;
    background-position: 50% 50%;
    opacity: .62;
    filter: saturate(1.12) contrast(1.05);
    transform-origin: 50% 50%;
    animation: flux-ocean-drift 30s ease-in-out infinite alternate;
}
.flux-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 4%, rgba(72, 211, 255, .12), transparent 30%),
        linear-gradient(180deg, rgba(4,7,15,.34) 0%, rgba(4,7,15,.70) 48%, rgba(4,7,15,.92) 100%),
        linear-gradient(90deg, rgba(4,7,15,.78), rgba(4,7,15,.18) 48%, rgba(4,7,15,.76));
}
@keyframes flux-ocean-drift {
    0% { transform: translate3d(-3%, -2%, 0) scale(1.06); background-position: 50% 42%; }
    50% { transform: translate3d(2%, 1.5%, 0) scale(1.1); background-position: 56% 50%; }
    100% { transform: translate3d(-1%, 3%, 0) scale(1.08); background-position: 46% 58%; }
}
.flux-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(20px);
    transform: translateZ(0);
    mix-blend-mode: screen;
}
.flux-orb-a {
    width: 220px; height: 220px;
    left: -72px; top: 80px;
    background: radial-gradient(circle, rgba(79, 224, 255, .42), rgba(21, 101, 192, .12) 48%, transparent 72%);
    animation: flux-orbit-a 12s ease-in-out infinite;
}
.flux-orb-b {
    width: 260px; height: 260px;
    right: -120px; top: 210px;
    background: radial-gradient(circle, rgba(37, 99, 235, .38), rgba(79, 195, 247, .10) 52%, transparent 74%);
    animation: flux-orbit-b 15s ease-in-out infinite;
}
.flux-orb-c {
    width: 240px; height: 240px;
    left: 42%; bottom: -90px;
    background: radial-gradient(circle, rgba(98, 235, 255, .22), rgba(13, 71, 161, .12) 50%, transparent 76%);
    animation: flux-orbit-c 18s ease-in-out infinite;
}
.flux-waves {
    position: absolute;
    inset: -8% -18%;
    width: 136%;
    height: 116%;
    fill: none;
    stroke-linecap: round;
    filter: drop-shadow(0 0 14px rgba(79, 219, 255, .26));
    opacity: .22;
    mix-blend-mode: screen;
}
.flux-waves path {
    stroke: rgba(92, 226, 255, .24);
    stroke-width: 1.6;
    vector-effect: non-scaling-stroke;
}
.flux-waves path:nth-child(2) { stroke: rgba(63, 176, 255, .18); stroke-width: 1.15; }
.flux-waves path:nth-child(3) { stroke: rgba(178, 255, 250, .16); stroke-width: 1.2; }
.flux-waves-a { animation: flux-wave-drift-a 16s ease-in-out infinite alternate; }
.flux-waves-b {
    opacity: .18;
    transform: rotate(-7deg) scale(1.08);
    animation: flux-wave-drift-b 22s ease-in-out infinite alternate;
}

@keyframes flux-wave-drift-a {
    0% { transform: translate3d(-18px, -10px, 0) scale(1); opacity: .72; }
    50% { transform: translate3d(18px, 20px, 0) scale(1.035); opacity: .95; }
    100% { transform: translate3d(-8px, 34px, 0) scale(1.015); opacity: .78; }
}
@keyframes flux-wave-drift-b {
    0% { transform: translate3d(20px, 18px, 0) rotate(-7deg) scale(1.08); opacity: .42; }
    100% { transform: translate3d(-24px, -16px, 0) rotate(-4deg) scale(1.12); opacity: .68; }
}
@keyframes flux-orbit-a {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(34px, 42px, 0) scale(1.08); }
}
@keyframes flux-orbit-b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-34px, 28px, 0) scale(1.04); }
}
@keyframes flux-orbit-c {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-24px, -36px, 0) scale(1.1); }
}

/* ===== SCREENS ===== */
.screen {
    position: absolute; inset: 0;
    z-index: 1;
    padding-bottom: var(--nav-h);
    overflow-y: auto;
    overscroll-behavior: none;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-width: none;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) scale(0.99);
    transition: opacity .32s ease, transform .32s ease;
}
.screen::-webkit-scrollbar { display: none; }
.screen.active {
    opacity: 1; pointer-events: auto;
    transform: translateY(0) scale(1);
}
.screen-body {
    padding: 8px 16px 28px;
    display: flex; flex-direction: column; gap: 14px;
}

/* ===== TOP BAR ===== */
.top-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: calc(24px + env(safe-area-inset-top, 0px)) 16px 12px;
    position: sticky; top: 0; z-index: 10;
    background: linear-gradient(180deg, rgba(8, 13, 26, .96) 72%, rgba(8, 13, 26, 0) 100%);
}
.brand { display: flex; align-items: center; gap: 9px; }
.brand-icon {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(79,195,247,0.08);
    border: 1px solid rgba(79,195,247,0.22);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow: 0 8px 26px rgba(34, 211, 238, 0.16);
}
.brand-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-logo { transform: translateZ(0); transition: transform .22s ease, box-shadow .22s ease; }
.brand-logo:active { transform: scale(.96); }
.brand-name {
    font-size: 1.1rem; font-weight: 800;
    letter-spacing: -0.03em;
    background: var(--grad-main);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.status-pill {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.68rem; font-weight: 600;
    padding: 5px 12px;
    border-radius: var(--r-full);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    color: var(--txt-2);
    letter-spacing: 0.02em;
}
.status-dot {
    width: 7px; height: 7px; border-radius: 50%;
}
.status-dot.inactive { background: var(--txt-3); }
.status-dot.active { background: var(--green); box-shadow: 0 0 8px rgba(76,175,80,0.5); animation: blink-dot 2s ease-in-out infinite; }
@keyframes blink-dot { 0%,100%{ opacity:1; } 50%{ opacity:0.4; } }

.page-title {
    font-size: 1.35rem; font-weight: 900;
    letter-spacing: -0.04em;
    background: var(--grad-main);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.page-sub { font-size: 0.75rem; color: var(--txt-3); margin-top: 3px; }

/* ===== EMPTY STATE ===== */
.empty-state {
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
    padding: 48px 20px 24px;
    gap: 12px;
    animation: soft-rise .42s cubic-bezier(0.16, 1, 0.3, 1);
}
.empty-sub-card {
    position: relative;
    margin: 24px 6px 10px;
    padding: 34px 18px 20px;
    border-radius: 28px;
    border: 1px solid rgba(79, 195, 247, 0.18);
    background:
        linear-gradient(180deg, rgba(12, 25, 58, 0.92), rgba(6, 11, 29, 0.96)),
        radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.22), transparent 46%);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.05);
    overflow: hidden;
}
.empty-glow {
    position: absolute;
    width: 210px; height: 210px;
    top: -112px; left: 50%; transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.34), transparent 66%);
    filter: blur(6px);
    pointer-events: none;
}
.empty-logo-wrap {
    width: 96px; height: 96px;
    border-radius: 28px;
    padding: 3px;
    background: linear-gradient(135deg, rgba(56,189,248,.9), rgba(37,99,235,.55));
    box-shadow: 0 16px 42px rgba(37, 99, 235, .32);
    position: relative;
    z-index: 1;
}
.empty-logo {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 25px;
}
.empty-kicker {
    margin-top: 2px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--blue-1);
    opacity: .82;
}
.empty-title { font-size: 1.35rem; font-weight: 850; letter-spacing: -0.02em; }
.empty-desc { font-size: 0.86rem; color: var(--txt-3); line-height: 1.5; max-width: 290px; }
.empty-benefits {
    width: 100%;
    display: grid;
    gap: 8px;
    margin: 4px 0 6px;
}
.empty-benefit {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-radius: 14px;
    border: 1px solid rgba(79,195,247,0.14);
    background: rgba(16, 32, 72, 0.62);
    color: var(--txt-2);
    font-size: .82rem;
    font-weight: 650;
}
.empty-benefit span:first-child { width: 22px; text-align: center; }
.empty-cta { margin-top: 4px; }

/* ===== CTA BUTTON ===== */
.cta-btn {
    width: 100%; padding: 14px 24px;
    border: none; border-radius: var(--r-md);
    background: var(--grad-main);
    color: white; font-size: 0.92rem; font-weight: 700;
    letter-spacing: -0.01em; cursor: pointer;
    font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 24px rgba(79,195,247,0.18);
    position: relative; overflow: hidden;
}
.cta-btn::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
    pointer-events: none;
}
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(79,195,247,0.28); }
.cta-btn:active { transform: translateY(0) scale(0.98); }

.trial-cta {
    width: 100%;
    min-height: 48px;
    border: 1px solid rgba(76,175,80,0.24);
    border-radius: var(--r-md);
    background: linear-gradient(135deg, rgba(40, 180, 90, .9), rgba(18, 132, 62, .92));
    color: #fff;
    font: inherit;
    font-size: .88rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(34, 197, 94, .18);
    transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}
.trial-cta:active { transform: scale(.98); }
.trial-cta.disabled,
.trial-card-btn.disabled {
    opacity: .48;
    cursor: default;
    filter: saturate(.65);
}

/* ===== SUBSCRIPTION CENTER ===== */
.hidden { display: none !important; }

.subscription-center { display: grid; gap: 12px; }
.sub-hero {
    position: relative;
    overflow: hidden;
    padding: 19px;
    border: 1px solid rgba(95,172,255,.38);
    border-radius: 24px;
    background:
        radial-gradient(circle at 88% -12%, rgba(255,255,255,.2), transparent 34%),
        linear-gradient(145deg, #1465e8 0%, #0b48bb 58%, #07378f 100%);
    box-shadow: 0 22px 48px rgba(3,65,165,.28), inset 0 1px 0 rgba(255,255,255,.16);
}
.sub-hero::after {
    content: '';
    position: absolute;
    width: 160px; height: 160px;
    right: -90px; bottom: -110px;
    border: 24px solid rgba(255,255,255,.045);
    border-radius: 50%;
    pointer-events: none;
}

.sub-card-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 18px;
    position: relative; z-index: 1;
}
.sub-plan-badge {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.9rem; font-weight: 800;
    color: #fff; min-width: 0;
}
.sub-plan-badge span { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.sub-plan-sticker {
    width: 29px; height: 29px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    background: rgba(2,25,75,.22);
    font-size: .84rem;
}
.sub-status-tag {
    font-size: 0.59rem; font-weight: 850;
    padding: 6px 10px; border-radius: var(--r-full);
    text-transform: uppercase; letter-spacing: 0.14em;
    flex: 0 0 auto; max-width: 48%; text-align: center; overflow-wrap: anywhere;
}
.sub-status-tag.active { background: rgba(224,255,236,.94); color: #08783e; }
.sub-status-tag.expired { background: rgba(255,229,229,.95); color: #b92734; }

.sub-time {
    position: relative; z-index: 1;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
    margin-bottom: 18px;
}
.sub-time > div { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.sub-time strong {
    color: #fff;
    font-size: clamp(2.55rem, 13vw, 3.45rem);
    line-height: .88;
    letter-spacing: -.065em;
    font-weight: 900;
}
.sub-time > div span {
    max-width: 70px;
    color: rgba(235,245,255,.76);
    font-size: .66rem;
    font-weight: 650;
    line-height: 1.25;
}
.sub-expiry {
    padding-bottom: 2px;
    color: rgba(239,247,255,.86);
    font-size: .65rem;
    font-weight: 650;
    text-align: right;
}
.sub-stats {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px;
    margin-bottom: 13px;
}
.sub-stat {
    min-width: 0;
    padding: 10px 9px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 14px;
    background: rgba(2,29,88,.25);
}
.sub-stat span {
    display: block;
    margin-bottom: 5px;
    color: rgba(224,239,255,.66);
    font-size: .52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.sub-stat strong {
    display: block;
    color: #fff;
    font-size: .67rem;
    line-height: 1.25;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sub-hero-footer {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 9px;
    color: rgba(226,240,255,.72);
    font-size: .57rem;
    line-height: 1.3;
}
.sub-hero-footer b { color: #fff; font-weight: 750; }
.sp-bar {
    position: relative; z-index: 1;
    height: 4px; border-radius: 3px;
    background: rgba(0,19,66,.3);
    overflow: hidden;
}
.sp-fill {
    height: 100%; border-radius: 3px;
    background: rgba(255,255,255,.9);
    transition: width 1s ease;
    box-shadow: 0 0 12px rgba(255,255,255,.38);
}

.access-panel,
.management-panel {
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 21px;
    background: rgba(10,19,39,.76);
    backdrop-filter: blur(20px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.section-label {
    color: var(--txt-3);
    font-size: .56rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .16em;
}
.access-link-row {
    display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 9px;
    min-height: 52px; margin: 10px 0;
    padding: 8px 10px;
    border: 1px solid rgba(79,195,247,.12);
    border-radius: 14px;
    background: rgba(3,10,24,.48);
}
.access-link-icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(79,195,247,.09);
    font-size: .8rem;
}
.access-link-row code {
    min-width: 0;
    overflow: hidden;
    color: var(--txt-2);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: .62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.access-actions { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 8px; }
.access-actions button,
.locations-copy {
    min-height: 45px;
    border-radius: 13px;
    font: inherit;
    font-size: .71rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform .18s ease, filter .18s ease, background .18s ease;
}
.access-primary {
    border: 1px solid rgba(87,177,255,.55);
    background: linear-gradient(135deg, #1875f4, #0d52cf);
    color: #fff;
    box-shadow: 0 10px 24px rgba(14,92,218,.22);
}
.access-secondary {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid rgba(79,195,247,.16);
    background: rgba(79,195,247,.06);
    color: var(--blue-1);
}
.access-actions button:active,
.locations-copy:active { transform: scale(.98); }

.management-panel { padding-bottom: 7px; }
.management-list { margin-top: 8px; }
.management-item {
    width: 100%; min-height: 66px;
    display: grid; grid-template-columns: 39px minmax(0,1fr) 18px;
    align-items: center; gap: 11px;
    padding: 9px 5px;
    border: 0;
    border-bottom: 1px solid rgba(139,164,204,.09);
    background: transparent;
    color: var(--txt-1);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}
.management-item:last-child { border-bottom: 0; }
.management-item:hover { background: rgba(79,195,247,.035); }
.management-item:active { transform: scale(.99); }
.management-icon {
    width: 39px; height: 39px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(79,195,247,.12);
    border-radius: 12px;
    background: rgba(79,195,247,.07);
    font-size: .9rem;
}
.management-copy { min-width: 0; }
.management-copy strong,
.management-copy small { display: block; }
.management-copy strong { font-size: .75rem; font-weight: 750; line-height: 1.3; }
.management-copy small {
    margin-top: 3px;
    overflow: hidden;
    color: var(--txt-3);
    font-size: .6rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.management-arrow { color: var(--blue-1); font-size: 1.25rem; line-height: 1; }
.management-item.danger .management-icon {
    border-color: rgba(239,83,80,.16);
    background: rgba(239,83,80,.07);
    color: #ff7d82;
}
.management-item.danger strong,
.management-item.danger .management-arrow { color: #ff7d82; }

/* Reference-style subscription block */
.subscription-center { display: grid; gap: 14px; }
.subscription-center .sub-hero {
    padding: 20px 18px 18px;
    border: 1px solid rgba(80, 183, 255, .36);
    border-radius: 25px;
    background:
        linear-gradient(146deg, rgba(14, 27, 61, .72), rgba(8, 15, 37, .82)),
        rgba(7, 14, 32, .74);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(126, 210, 255, .08),
        inset 0 0 0 1px rgba(20, 88, 166, .08);
}
.subscription-center .sub-hero::after { display: none; }
.subscription-center .sub-card-header {
    margin-bottom: 18px;
}
.subscription-center .sub-plan-badge {
    color: #74d6ff;
    font-size: .92rem;
    font-weight: 850;
}
.subscription-center .sub-plan-sticker {
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #5fcfff;
    font-size: .92rem;
}
.subscription-center .sub-status-tag {
    padding: 7px 13px;
    border: 1px solid rgba(70, 203, 119, .14);
    background: rgba(35, 159, 72, .18);
    color: #77e778;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.subscription-center .sub-status-tag.expired {
    border-color: rgba(239, 83, 80, .18);
    background: rgba(239, 83, 80, .14);
    color: #ff8b91;
}
.sub-period-box {
    padding: 14px 14px 12px;
    border: 1px solid rgba(80, 183, 255, .14);
    border-radius: 16px;
    background: rgba(11, 29, 67, .48);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.sub-period-row,
.sub-period-state,
.sub-fact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.sub-period-row span {
    color: rgba(151, 174, 211, .8);
    font-size: .72rem;
    font-weight: 650;
}
.sub-period-row strong {
    color: #72d7ff;
    font-size: .7rem;
    line-height: 1.25;
    text-align: right;
}
.subscription-center .sp-bar {
    height: 4px;
    margin: 11px 0 9px;
    background: rgba(23, 53, 100, .72);
}
.subscription-center .sp-fill {
    background: linear-gradient(90deg, #45c8ff, #86e2ff);
    box-shadow: 0 0 16px rgba(79, 195, 247, .36);
}
.sub-period-state {
    color: rgba(125, 148, 186, .78);
    font-size: .62rem;
    line-height: 1.3;
}
.sub-period-state em {
    margin-left: auto;
    color: rgba(138, 160, 196, .72);
    font-style: normal;
    text-align: right;
}
.sub-check {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(63, 211, 107, .16);
    color: #66dc82;
    font-size: .68rem;
    font-weight: 900;
}
.sub-facts {
    display: grid;
    gap: 13px;
    margin: 18px 0 18px;
}
.sub-fact span {
    color: rgba(117, 139, 176, .84);
    font-size: .78rem;
    font-weight: 650;
}
.sub-fact strong,
.sub-fact button {
    color: #f2f7ff;
    font: inherit;
    font-size: .84rem;
    font-weight: 850;
    text-align: right;
}
.sub-fact button {
    border: 0;
    background: transparent;
    cursor: pointer;
}
.sub-fact button:active { transform: scale(.98); }
.sub-fact code {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.sub-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}
.sub-action-btn {
    min-width: 0;
    min-height: 82px;
    padding: 12px 8px 11px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 9px;
    border: 1px solid rgba(79, 195, 247, .18);
    border-radius: 14px;
    background: rgba(14, 39, 79, .5);
    color: #74d6ff;
    font: inherit;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    transition: transform var(--motion-fast) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), background var(--motion-base) var(--ease-standard);
}
.sub-action-btn > span {
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #74d6ff;
    font-size: 1.05rem;
    line-height: 1;
}
.sub-action-btn strong {
    max-width: 100%;
    color: #7ed9ff;
    font-size: .67rem;
    line-height: 1.25;
    font-weight: 780;
    text-align: center;
    overflow-wrap: anywhere;
}
.sub-action-btn:active {
    transform: scale(.98);
    background: rgba(20, 58, 112, .58);
}
.sub-copy-link-btn {
    width: 100%;
    min-height: 48px;
    margin-top: 10px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(79, 195, 247, .24);
    border-radius: 14px;
    background: rgba(14, 39, 79, .5);
    color: #7ed9ff;
    font: inherit;
    cursor: pointer;
    transition: transform var(--motion-fast) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), background var(--motion-base) var(--ease-standard);
}
.sub-copy-link-btn span {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}
.sub-copy-link-btn strong {
    min-width: 0;
    color: currentColor;
    font-size: .82rem;
    font-weight: 850;
    line-height: 1.2;
    text-align: center;
}
.sub-copy-link-btn:active {
    transform: scale(.99);
    background: rgba(20, 58, 112, .58);
}
.sub-hidden-metric {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}

/* Compact Happ setup guide */
.setup-guide {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: rgba(14,22,45,0.48);
    backdrop-filter: blur(18px);
    overflow: hidden;
}
.setup-guide summary {
    min-height: 58px; padding: 10px 12px;
    display: grid; grid-template-columns: 36px minmax(0,1fr) 24px;
    align-items: center; gap: 10px;
    cursor: pointer; list-style: none;
    transition: background .18s ease;
}
.setup-guide summary::-webkit-details-marker { display: none; }
.setup-guide summary:hover { background: rgba(79,195,247,0.035); }
.setup-guide summary:focus-visible { outline: 2px solid var(--blue-1); outline-offset: -2px; }
.setup-guide-button {
    width: 100%;
    min-height: 58px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 10px;
    appearance: none;
    color: var(--txt-1);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .18s ease, transform .14s ease;
}
.setup-guide-button:hover { background: rgba(79,195,247,0.035); }
.setup-guide-button:active { transform: scale(.99); }
.setup-guide-button:focus-visible { outline: 2px solid var(--blue-1); outline-offset: -2px; }
.guide-summary-icon {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: rgba(79,195,247,0.08);
    color: var(--blue-1);
}
.guide-summary-copy { min-width: 0; }
.guide-summary-copy > span { display: block; font-size: 0.78rem; font-weight: 620; line-height: 1.3; }
.guide-summary-copy small { display: block; margin-top: 2px; color: var(--txt-3); font-size: 0.61rem; font-weight: 400; }
.guide-chevron {
    display: flex; align-items: center; justify-content: center;
    color: var(--txt-3);
    transition: transform .22s cubic-bezier(.2,0,0,1), color .18s ease;
}
.setup-guide[open] .guide-chevron { transform: rotate(180deg); color: var(--blue-1); }
.guide-content {
    padding: 2px 12px 12px;
    border-top: 1px solid rgba(139,164,204,0.08);
    animation: guideReveal .24s cubic-bezier(.2,0,0,1) both;
}
@keyframes guideReveal {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
.guide-store-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 10px; }
.guide-store-link {
    min-width: 0; min-height: 42px; padding: 7px 9px;
    display: flex; align-items: center; gap: 8px;
    border: 1px solid rgba(139,164,204,0.12);
    border-radius: 11px;
    background: rgba(255,255,255,0.025);
    color: var(--txt-1); text-decoration: none;
    font-size: 0.67rem; font-weight: 540; line-height: 1.15;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.guide-store-link:active { transform: scale(.98); }
.guide-store-link:hover { background: rgba(79,195,247,0.06); border-color: rgba(79,195,247,0.2); }
.guide-store-link small { display: block; margin-bottom: 2px; color: var(--txt-3); font-size: 0.52rem; font-weight: 400; }
.guide-store-mark {
    width: 25px; height: 25px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,0.07);
    color: var(--txt-2); font-size: 0.55rem; font-weight: 700;
}
.guide-store-mark.play { color: var(--green); font-size: 0.6rem; }
.guide-steps { margin: 10px 0 0; display: flex; flex-direction: column; gap: 7px; list-style: none; }
.guide-steps li { display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: start; gap: 8px; }
.guide-steps li > span {
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px;
    background: rgba(79,195,247,0.08);
    color: var(--blue-1); font-size: 0.58rem; font-weight: 650;
}
.guide-steps p { padding-top: 2px; color: var(--txt-2); font-size: 0.65rem; font-weight: 400; line-height: 1.45; }
.guide-add-btn {
    width: 100%; min-height: 38px; margin-top: 10px; padding: 8px 12px;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid rgba(79,195,247,0.18);
    border-radius: 11px;
    background: rgba(79,195,247,0.08);
    color: var(--blue-1); font: inherit; font-size: 0.68rem; font-weight: 600;
    cursor: pointer; transition: background .18s ease, transform .18s ease;
}
.guide-add-btn:hover { background: rgba(79,195,247,0.14); }
.guide-add-btn:active { transform: scale(.985); }

/* Connected devices on the main subscription screen */
.devices-card {
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    background: var(--bg-card);
    backdrop-filter: blur(20px);
}
.devices-card-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin-bottom: 14px;
}
.devices-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--blue-1);
    font-size: 0.62rem; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.devices-card h2 { font-size: 0.96rem; line-height: 1.3; }
.devices-count {
    flex-shrink: 0;
    padding: 5px 9px;
    border: 1px solid rgba(79,195,247,0.15);
    border-radius: var(--r-full);
    background: rgba(79,195,247,0.08);
    color: var(--blue-1);
    font-size: 0.68rem; font-weight: 800;
}
.devices-card.is-limited { border-color: rgba(239,83,80,0.32); }
.devices-card.is-limited .devices-count {
    border-color: rgba(239,83,80,0.2);
    background: rgba(239,83,80,0.1);
    color: var(--red);
}
.device-limit-alert {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 12px; padding: 11px;
    border: 1px solid rgba(239,83,80,0.2);
    border-radius: var(--r-md);
    background: rgba(239,83,80,0.08);
}
.device-limit-alert-icon {
    width: 25px; height: 25px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(239,83,80,0.14);
    color: var(--red); font-size: 0.78rem; font-weight: 900;
}
.device-limit-alert strong { display: block; color: #ff8b89; font-size: 0.76rem; line-height: 1.35; }
.device-limit-alert span { display: block; margin-top: 3px; color: #c8878c; font-size: 0.64rem; line-height: 1.45; }
.devices-list { display: flex; flex-direction: column; }
.device-item {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center; gap: 11px;
    min-width: 0; padding: 11px 0;
    border-top: 1px solid rgba(139,164,204,0.1);
}
.device-item:first-child { padding-top: 2px; border-top: 0; }
.device-item:last-child { padding-bottom: 2px; }
.device-icon {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(79,195,247,0.13);
    border-radius: 13px;
    background: rgba(79,195,247,0.08);
    color: var(--blue-1);
}
.device-icon-android { background: rgba(76,175,80,0.08); border-color: rgba(76,175,80,0.14); color: var(--green); }
.device-copy { min-width: 0; }
.device-copy strong {
    display: block;
    color: var(--txt-1);
    font-size: 0.8rem; line-height: 1.35;
    overflow-wrap: anywhere;
}
.device-copy span {
    display: block;
    margin-top: 3px;
    color: var(--txt-3);
    font-size: 0.64rem; line-height: 1.45;
    overflow-wrap: anywhere;
}
.device-state {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(76,175,80,0.1);
}
.device-edit-btn {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(79,195,247,.14); border-radius: 11px;
    background: rgba(79,195,247,.07); color: var(--blue-1); cursor: pointer;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.device-actions { display: flex; align-items: center; gap: 6px; }
.device-remove-btn {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(239,83,80,.16); border-radius: 11px;
    background: rgba(239,83,80,.07); color: #ff8b89; cursor: pointer;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.device-remove-btn:hover { background: rgba(239,83,80,.13); border-color: rgba(239,83,80,.26); }
.device-remove-btn:active { transform: scale(.94); }
.device-edit-btn:hover { background: rgba(79,195,247,.13); border-color: rgba(79,195,247,.25); }
.device-edit-btn:active { transform: scale(.94); }

.device-name-modal {
    position: fixed; inset: 0; z-index: 400;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 18px;
    background: rgba(1,4,12,.72);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.device-name-sheet {
    width: min(100%, 398px); padding: 20px;
    border: 1px solid rgba(79,195,247,.2); border-radius: 22px;
    background: linear-gradient(160deg, #101d38, #080e1d);
    box-shadow: 0 24px 70px rgba(0,0,0,.48);
    animation: soft-rise .24s ease both;
}
.device-name-sheet h3 { margin: 0; font-size: 1rem; }
.device-name-sheet p { margin: 6px 0 15px; color: var(--txt-3); font-size: .7rem; line-height: 1.45; }
.device-name-sheet input {
    width: 100%; min-height: 48px; padding: 0 13px;
    border: 1px solid rgba(139,164,204,.18); border-radius: 13px;
    outline: none; background: rgba(3,8,20,.66); color: var(--txt-1);
    font-family: inherit; font-size: .84rem; font-weight: 600;
}
.device-name-sheet input:focus { border-color: rgba(79,195,247,.58); box-shadow: 0 0 0 3px rgba(79,195,247,.1); }
.device-name-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.device-name-actions button {
    min-height: 44px; border: 1px solid rgba(139,164,204,.14); border-radius: 13px;
    background: rgba(255,255,255,.04); color: var(--txt-2); font-family: inherit; font-size: .78rem; font-weight: 750; cursor: pointer;
}
.device-name-actions button.primary { border-color: rgba(79,195,247,.25); background: var(--grad-main); color: white; }

.locations-modal {
    position: fixed; inset: 0; z-index: 395;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
}
.locations-modal.hidden { pointer-events: none; visibility: hidden; }
.locations-backdrop {
    position: absolute; inset: 0;
    background: rgba(1,4,12,.72);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    opacity: 1;
    transition: opacity .22s ease;
}
.locations-modal.hidden .locations-backdrop { opacity: 0; }
.locations-sheet {
    position: relative; z-index: 1;
    width: min(100%, 406px);
    padding: 10px 14px 16px;
    border: 1px solid rgba(79,195,247,.19);
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(13,24,51,.99), rgba(8,15,32,.99));
    box-shadow: 0 24px 70px rgba(0,0,0,.5);
    transform: translateY(0);
    opacity: 1;
    transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .2s ease;
}
.locations-modal.hidden .locations-sheet { transform: translateY(28px) scale(.98); opacity: 0; }
.locations-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.locations-head h3 { margin: 4px 0 0; font-size: 1.05rem; }
.locations-head button {
    width: 34px; height: 34px;
    border: 1px solid rgba(139,164,204,.14);
    border-radius: 11px;
    background: rgba(255,255,255,.04);
    color: var(--txt-2);
    font: inherit; font-size: 1.25rem; line-height: 1;
    cursor: pointer;
}
.locations-intro {
    margin: 9px 0 13px;
    color: var(--txt-3);
    font-size: .68rem;
    line-height: 1.45;
}
.location-list { display: grid; gap: 8px; }
.location-item {
    display: grid; grid-template-columns: 39px minmax(0,1fr) auto;
    align-items: center; gap: 10px;
    min-height: 64px; padding: 9px 10px;
    border: 1px solid rgba(79,195,247,.11);
    border-radius: 15px;
    background: rgba(79,195,247,.04);
}
.location-flag {
    width: 39px; height: 39px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: rgba(79,195,247,.08);
    font-size: 1rem;
}
.location-item strong,
.location-item small { display: block; }
.location-item strong { font-size: .73rem; line-height: 1.3; }
.location-item small { margin-top: 3px; color: var(--txt-3); font-size: .57rem; line-height: 1.3; }
.location-item em {
    display: inline-flex; align-items: center; gap: 5px;
    color: #77dca2;
    font-size: .53rem;
    font-style: normal;
    font-weight: 750;
    white-space: nowrap;
}
.location-item em i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #52ce86;
    box-shadow: 0 0 0 3px rgba(82,206,134,.1);
}
.routing-summary {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
    margin-top: 10px;
}
.routing-summary span {
    min-width: 0; padding: 8px 6px;
    border: 1px solid rgba(119,220,162,.14);
    border-radius: 11px;
    background: rgba(82,206,134,.055);
    color: var(--txt-2);
    font-size: .52rem; font-weight: 700; line-height: 1.3; text-align: center;
}
.locations-actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px;
}
.locations-copy {
    width: 100%;
    border: 1px solid rgba(87,177,255,.45);
    background: linear-gradient(135deg, #1875f4, #0d52cf);
    color: #fff;
}
.locations-bot {
    width: 100%;
    border: 1px solid rgba(79,195,247,.2);
    background: rgba(79,195,247,.08);
    color: #a9e9ff;
}
.locations-copy,
.locations-bot {
    min-height: 44px; padding: 0 10px; border-radius: 13px;
    font-family: inherit; font-size: .68rem; font-weight: 800; cursor: pointer;
    transition: transform var(--motion-fast) var(--ease-standard), filter var(--motion-fast) var(--ease-standard);
}
.locations-copy:active,
.locations-bot:active { transform: scale(.98); }

.payment-modal {
    position: fixed; inset: 0; z-index: 390;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
}
.payment-modal.hidden { pointer-events: none; visibility: hidden; }
.payment-backdrop {
    position: absolute; inset: 0;
    background: rgba(1,4,12,.72);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    opacity: 1;
    transition: opacity .22s cubic-bezier(.2,0,0,1);
}
.payment-modal.hidden .payment-backdrop { opacity: 0; }
.payment-sheet {
    position: relative; z-index: 1;
    width: min(100%, 406px);
    padding: 10px 14px 16px;
    border: 1px solid rgba(79,195,247,.19);
    border-radius: 26px;
    background:
        radial-gradient(circle at 16% 0%, rgba(79,195,247,.14), transparent 42%),
        linear-gradient(180deg, rgba(13,24,51,.98), rgba(8,15,32,.98));
    box-shadow: 0 24px 70px rgba(0,0,0,.5);
    transform: translateY(0);
    opacity: 1;
    transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .2s cubic-bezier(.2,0,0,1);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.payment-sheet::-webkit-scrollbar { display: none; }
.payment-modal.hidden .payment-sheet { transform: translateY(28px) scale(.98); opacity: 0; }
.payment-grip {
    width: 42px; height: 4px; border-radius: var(--r-full);
    margin: 2px auto 16px;
    background: rgba(227,238,255,.22);
}
.payment-sheet h3 {
    margin: 0;
    text-align: center;
    font-size: 1.08rem;
    line-height: 1.2;
}
.payment-summary {
    max-width: 315px;
    margin: 8px auto 14px;
    color: var(--txt-2);
    text-align: center;
    font-size: .74rem;
    line-height: 1.42;
}
.payment-method-list { display: grid; gap: 9px; }
.payment-method {
    width: 100%; min-height: 66px;
    display: grid; grid-template-columns: 48px 1fr 22px;
    align-items: center; gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(79,195,247,.12);
    border-radius: 17px;
    background: rgba(15,33,70,.72);
    color: var(--txt-1);
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .14s ease, box-shadow .18s ease;
}
.payment-method:active { transform: scale(.985); }
.payment-method.is-disabled {
    opacity: .56;
    cursor: not-allowed;
}
.payment-method.is-disabled:active { transform: none; }
.payment-method.selected {
    border-color: rgba(79,195,247,.58);
    background: linear-gradient(135deg, rgba(24,62,126,.9), rgba(11,28,67,.88));
    box-shadow: 0 0 0 1px rgba(79,195,247,.1), 0 10px 34px rgba(21,101,192,.18);
}
.pm-icon {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: rgba(255,255,255,.08);
    font-size: 1.2rem;
}
.pm-icon.referral { background: rgba(78,255,184,.14); }
.pm-icon.card { background: rgba(79,195,247,.14); }
.pm-icon.sbp { background: rgba(48,117,255,.18); }
.pm-icon.yoomoney { background: rgba(118,76,255,.16); }
.pm-icon.sber { background: rgba(76,175,80,.16); }
.pm-copy { display: grid; gap: 3px; min-width: 0; }
.pm-copy strong { font-size: .9rem; line-height: 1.16; letter-spacing: -.01em; }
.pm-copy small { color: var(--txt-2); font-size: .68rem; line-height: 1.25; }
.pm-copy em {
    margin-left: 6px; padding: 2px 6px;
    border-radius: var(--r-full);
    color: #9ec7ff;
    background: rgba(79,195,247,.13);
    font-style: normal;
    font-size: .56rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.pm-check {
    width: 19px; height: 19px;
    border-radius: var(--r-full);
    border: 2px solid rgba(79,195,247,.22);
    box-shadow: inset 0 0 0 4px transparent;
}
.payment-method.selected .pm-check {
    border-color: var(--blue-1);
    background: var(--blue-1);
    box-shadow: inset 0 0 0 5px #0b1d42;
}
.payment-terms {
    margin: 12px 3px 12px;
    color: var(--txt-2);
    font-size: .68rem;
    line-height: 1.4;
}
.policy-consent {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 13px 14px;
    margin-top: 12px;
    border: 1px solid rgba(79,195,247,.16);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(13, 29, 62, .86), rgba(8, 16, 36, .78));
    color: var(--txt-2);
    font-size: .72rem;
    line-height: 1.45;
}
.policy-consent input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: #58cfff;
}
.policy-consent input:focus-visible {
    outline: 2px solid var(--blue-1);
    outline-offset: 3px;
}
.policy-consent a {
    color: var(--blue-1);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.policy-consent.accepted {
    border-color: rgba(79,195,247,.18);
    background: rgba(79,195,247,.055);
}
.policy-consent.consent-shake {
    animation: consent-shake 420ms var(--ease-premium) both;
}
@keyframes consent-shake {
    0%, 100% { transform: translateX(0); }
    28% { transform: translateX(-5px); }
    58% { transform: translateX(4px); }
    80% { transform: translateX(-2px); }
}
.payment-submit,
.payment-cancel {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 17px;
    font-family: inherit;
    font-weight: 850;
    cursor: pointer;
}
.payment-submit {
    background: var(--grad-main);
    color: white;
    box-shadow: 0 10px 30px rgba(30,136,229,.24);
}
.payment-submit:disabled {
    opacity: .42;
    cursor: not-allowed;
    box-shadow: none;
    filter: saturate(.55);
}
.payment-cancel {
    margin-top: 8px;
    background: transparent;
    color: var(--txt-2);
}
.payment-modal.trial-checkout .payment-method-list { display: none; }
.payment-modal.trial-checkout .payment-sheet {
    background:
        radial-gradient(circle at 50% 0%, rgba(110, 114, 255, .2), transparent 42%),
        linear-gradient(180deg, rgba(18, 25, 58, .98), rgba(8, 15, 32, .98));
}
.devices-empty {
    display: flex; align-items: center; gap: 11px;
    padding: 11px;
    border: 1px dashed rgba(139,164,204,0.15);
    border-radius: var(--r-md);
    background: rgba(255,255,255,0.015);
}
.devices-empty-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: rgba(139,164,204,0.08);
    color: var(--txt-2);
}
.devices-empty strong { display: block; font-size: 0.75rem; line-height: 1.35; }
.devices-empty span { display: block; margin-top: 3px; color: var(--txt-3); font-size: 0.63rem; line-height: 1.4; }
.devices-note { margin-top: 11px; color: var(--txt-3); font-size: 0.6rem; line-height: 1.45; }

/* Info mini cards */
.info-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.info-mini {
    display: flex; align-items: center; gap: 10px;
    padding: 14px; border-radius: var(--r-lg);
    background: var(--bg-card);
    border: 1px solid var(--border);
    backdrop-filter: blur(20px);
}
.im-icon {
    width: 34px; height: 34px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.green-bg { background: rgba(76,175,80,0.1); color: var(--green); }
.blue-bg  { background: rgba(79,195,247,0.1); color: var(--blue-1); }
.im-val { display: block; font-size: 0.82rem; font-weight: 700; }
.im-lbl { display: block; font-size: 0.62rem; color: var(--txt-3); margin-top: 1px; font-weight: 500; }

.channel-card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 12px 14px;
    border: 1px solid rgba(79,195,247,0.16);
    border-radius: var(--r-lg);
    background:
        linear-gradient(135deg, rgba(11, 27, 61, .86), rgba(6, 12, 31, .94)),
        radial-gradient(circle at 12% 0%, rgba(79,195,247,.22), transparent 44%);
    color: var(--txt-1);
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 14px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.channel-card:active { transform: scale(.985); }
.channel-card:hover { border-color: rgba(79,195,247,.3); background-color: rgba(79,195,247,.05); }
.channel-orb {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--blue-1);
    background: rgba(79,195,247,.1);
    border: 1px solid rgba(79,195,247,.18);
    box-shadow: 0 10px 24px rgba(79,195,247,.12);
}
.channel-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.channel-title {
    font-size: .88rem;
    font-weight: 850;
    letter-spacing: -.01em;
}
.channel-sub {
    font-size: .72rem;
    color: var(--txt-3);
    font-weight: 650;
}
.channel-arrow {
    margin-left: auto;
    color: var(--blue-1);
    opacity: .86;
    flex-shrink: 0;
}

/* ===== PLANS ===== */
.plan-card {
    position: relative;
    min-height: 148px;
    background:
        linear-gradient(145deg, rgba(15, 25, 49, .78), rgba(7, 12, 28, .9)),
        radial-gradient(circle at 12% 0%, rgba(79,195,247,.08), transparent 44%);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 16px;
    cursor: pointer;
    transition:
        transform var(--motion-base) var(--ease-premium),
        border-color var(--motion-base) var(--ease-standard),
        background var(--motion-base) var(--ease-standard),
        box-shadow var(--motion-base) var(--ease-standard);
    backdrop-filter: blur(20px);
    overflow: hidden;
    isolation: isolate;
}
.plan-top > div:not(.plan-price-right),
.plan-price-right { min-width: 0; }
.plan-name,
.plan-note { overflow-wrap: anywhere; }
.plan-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.045), transparent 52%);
    opacity: .52;
    pointer-events: none;
    z-index: -1;
}
.plan-card:hover { transform: translateY(-2px); border-color: var(--border-h); }
.plan-card:focus-visible {
    outline: 2px solid rgba(79,195,247,.62);
    outline-offset: 3px;
}
.plan-card:active { transform: translateY(0) scale(.992); }
.plan-card.selected {
    border-color: rgba(108, 214, 255, .78);
    background:
        linear-gradient(145deg, rgba(18, 38, 74, .88), rgba(6, 13, 32, .94)),
        radial-gradient(circle at 14% 0%, rgba(79,195,247,.18), transparent 48%);
    box-shadow: 0 0 0 2px rgba(79,195,247,0.16), 0 18px 46px rgba(79,195,247,0.15);
}
.plan-card.selected::after {
    content: '✓';
    position: absolute;
    right: 16px;
    bottom: 13px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--grad-main);
    color: white;
    font-size: .82rem;
    font-weight: 900;
    box-shadow: 0 8px 22px rgba(79,195,247,.24);
    animation: check-pop var(--motion-slow) var(--ease-premium) both;
}
.plan-card.just-selected { animation: select-pulse 460ms var(--ease-premium) both; }
.plan-lite {
    background:
        linear-gradient(145deg, rgba(8, 34, 54, .84), rgba(7, 13, 30, .92)),
        radial-gradient(circle at 10% 0%, rgba(72, 207, 255, .18), transparent 46%);
}
.plan-pro {
    background:
        linear-gradient(145deg, rgba(18, 24, 58, .84), rgba(8, 13, 30, .94)),
        radial-gradient(circle at 12% 0%, rgba(84, 122, 255, .16), transparent 50%);
}
.plan-family {
    background:
        linear-gradient(145deg, rgba(8, 42, 58, .88), rgba(7, 16, 34, .94)),
        radial-gradient(circle at 8% 0%, rgba(63, 216, 214, .18), transparent 46%);
}
.plan-card.popular { border-color: rgba(124, 150, 255,0.24); }
.plan-card.best    { border-color: rgba(72,207,220,.28); }
.plan-family.selected {
    background:
        linear-gradient(145deg, rgba(10, 52, 68, .92), rgba(7, 17, 36, .96)),
        radial-gradient(circle at 8% 0%, rgba(63, 216, 214, .25), transparent 48%);
    border-color: rgba(82,215,220,.72);
    box-shadow: 0 0 0 2px rgba(82,215,220,.14), 0 18px 46px rgba(18,148,164,.18);
}
.plan-family.selected::after {
    background: linear-gradient(135deg, #55e2da, #27a9c5);
    color: #fff;
}

.trial-card {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: var(--r-xl);
    border: 1px solid rgba(76,175,80,0.22);
    background:
        linear-gradient(135deg, rgba(16, 47, 31, .84), rgba(10, 21, 42, .9)),
        radial-gradient(circle at 10% 0%, rgba(76,175,80,.2), transparent 48%);
    box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
.trial-mark {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(76,175,80,.13);
    border: 1px solid rgba(76,175,80,.2);
    font-size: 1.3rem;
    animation: trial-gift-float 3.8s var(--ease-standard) infinite;
}
.trial-title { font-size: .92rem; font-weight: 850; }
.trial-sub { margin-top: 3px; font-size: .68rem; color: var(--txt-3); font-weight: 600; }
.trial-card-btn {
    min-height: 36px;
    padding: 0 13px;
    border-radius: 12px;
    border: 1px solid rgba(76,175,80,.26);
    background: rgba(76,175,80,.16);
    color: #9EF0B2;
    font: inherit;
    font-size: .72rem;
    font-weight: 850;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, opacity .18s ease;
}
.trial-card-btn:active { transform: scale(.97); }

.card-badge {
    display: inline-flex; align-items: center;
    font-size: 0.64rem; font-weight: 800;
    padding: 4px 11px; border-radius: var(--r-full);
    background: var(--grad-main); color: white;
    margin-bottom: 12px; letter-spacing: 0.04em; text-transform: uppercase;
}
.card-badge.family-badge {
    background: linear-gradient(135deg, #53d8d2, #238fac);
    color: #03191f;
}

.plan-top {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
}
.plan-orb {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--blue-1);
    background: rgba(79,195,247,.11);
    border: 1px solid rgba(79,195,247,.17);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 24px rgba(79,195,247,.1);
    transition: transform var(--motion-base) var(--ease-premium), color var(--motion-base) var(--ease-standard);
}
.plan-sticker {
    font-size: 1.38rem;
    line-height: 1;
    text-shadow: 0 8px 18px rgba(0,0,0,.24);
}
.plan-sticker::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 10px;
    background: rgba(255,255,255,.055);
    z-index: -1;
}
.plan-card.selected .plan-orb { transform: translateY(-1px) scale(1.04); }
.plan-pro .plan-orb { color: #8fa3ff; background: rgba(124,150,255,.11); border-color: rgba(124,150,255,.2); }
.plan-family .plan-orb { background: rgba(72,207,220,.13); border-color: rgba(82,215,220,.22); }
.plan-lite .plan-sticker { animation: lite-sticker-sway 4.6s var(--ease-standard) infinite; }
.plan-pro .plan-sticker { animation: pro-sticker-spark 3.4s var(--ease-standard) infinite; }
.plan-family .plan-sticker { animation: family-sticker-pulse 4.2s var(--ease-standard) infinite; }
.plan-name { font-size: 1rem; font-weight: 850; letter-spacing: -0.02em; }
.plan-note { font-size: 0.7rem; color: var(--txt-3); margin-top: 3px; line-height: 1.24; }
.plan-price-right {
    margin-left: auto; text-align: right; flex: 0 0 auto;
}
.pr-big {
    font-size: 1.5rem; font-weight: 900; letter-spacing: -0.04em;
    background: var(--grad-main);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    display: block;
}
.old-price {
    display: block;
    margin-bottom: 1px;
    color: var(--txt-3);
    font-size: .68rem;
    font-weight: 800;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(255, 143, 0, .72);
}
.plan-card.best .pr-big {
    background: linear-gradient(135deg, #83f1e8, #43c5dd);
    -webkit-background-clip: text; background-clip: text;
}
.pr-per { font-size: 0.72rem; color: var(--txt-3); font-weight: 500; }

.plan-metrics {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.plan-metrics span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: var(--r-full);
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.06);
    color: var(--txt-2);
    font-size: .68rem;
    font-weight: 760;
    white-space: nowrap;
}
.plan-card.selected .plan-metrics span {
    color: var(--txt-1);
    border-color: rgba(79,195,247,.18);
    background: rgba(79,195,247,.08);
}
.plan-family.selected .plan-metrics span {
    border-color: rgba(82,215,220,.2);
    background: rgba(82,215,220,.08);
}
.plan-desc {
    position: relative;
    z-index: 2;
    margin: 10px 32px 0 0;
    color: var(--txt-3);
    font-size: .72rem;
    line-height: 1.38;
    font-weight: 620;
}

.period-panel {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(79,195,247,.14);
    border-radius: 20px;
    background:
        linear-gradient(155deg, rgba(13, 24, 51, .86), rgba(7, 12, 28, .92)),
        radial-gradient(circle at 82% 0%, rgba(76,175,80,.1), transparent 38%);
    box-shadow: 0 16px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
    overflow: hidden;
}
.period-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.035), transparent 56%);
    pointer-events: none;
}
.period-head,
.period-options,
.plan-includes {
    position: relative;
    z-index: 1;
}
.period-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.period-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--txt-3);
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
}
.period-head strong {
    display: block;
    color: var(--txt-1);
    font-size: .98rem;
    line-height: 1.2;
}
.period-saving {
    flex: 0 0 auto;
    max-width: 42%;
    padding: 5px 9px;
    border: 1px solid rgba(139,164,204,.14);
    border-radius: var(--r-full);
    background: rgba(255,255,255,.045);
    color: var(--txt-2);
    font-size: .63rem;
    font-weight: 850;
    text-align: center;
}
.period-saving.is-discount {
    border-color: rgba(76,175,80,.24);
    background: rgba(76,175,80,.1);
    color: #9EF0B2;
}
.period-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.period-option {
    min-width: 0;
    min-height: 86px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 10px 8px;
    border: 1px solid rgba(139,164,204,.13);
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    color: var(--txt-1);
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: transform var(--motion-fast) var(--ease-premium), border-color var(--motion-base) var(--ease-standard), background var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);
}
.period-option strong {
    font-size: .82rem;
    line-height: 1.15;
}
.period-option span {
    min-height: 25px;
    color: var(--txt-3);
    font-size: .58rem;
    line-height: 1.25;
    font-weight: 720;
    overflow-wrap: anywhere;
}
.period-option b {
    color: var(--blue-1);
    font-size: .76rem;
    line-height: 1.15;
}
.period-option:focus-visible {
    outline: 2px solid rgba(79,195,247,.62);
    outline-offset: 3px;
}
.period-option:active { transform: scale(.97); }
.period-option.selected {
    border-color: rgba(79,195,247,.58);
    background: linear-gradient(180deg, rgba(79,195,247,.17), rgba(37,99,235,.1));
    box-shadow: inset 0 0 0 1px rgba(79,195,247,.1), 0 10px 26px rgba(37,99,235,.14);
}
.period-option.selected b { color: #BDEEFF; }
.period-option.period-just-selected {
    animation: period-select-pop 420ms var(--ease-premium) both;
}
@keyframes period-select-pop {
    0% { transform: scale(.96); }
    48% { transform: scale(1.035); }
    100% { transform: scale(1); }
}
.plan-includes {
    padding: 11px;
    border: 1px solid rgba(139,164,204,.11);
    border-radius: 16px;
    background: rgba(3, 8, 20, .28);
}
.include-title {
    margin-bottom: 8px;
    color: var(--txt-2);
    font-size: .7rem;
    font-weight: 850;
}
.include-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}
.include-grid span {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    border-radius: 12px;
    background: rgba(255,255,255,.045);
    color: var(--txt-2);
    font-size: .62rem;
    line-height: 1.22;
    font-weight: 760;
    text-align: center;
}
.plan-includes p {
    margin: 9px 0 0;
    color: var(--txt-3);
    font-size: .68rem;
    line-height: 1.42;
    font-weight: 620;
}

.plan-motion {
    position: absolute;
    inset: auto 0 0 0;
    height: 58px;
    pointer-events: none;
    z-index: 1;
    opacity: .62;
    overflow: hidden;
}
.plan-motion-wave span {
    position: absolute;
    left: -18%;
    right: -18%;
    bottom: 9px;
    height: 22px;
    border-radius: 50%;
    border-top: 2px solid rgba(84, 215, 255, .42);
    transform: translateX(-18%);
    animation: lite-wave 3.8s var(--ease-standard) infinite;
}
.plan-motion-wave span:nth-child(2) {
    bottom: 21px;
    opacity: .44;
    animation-duration: 5.2s;
    animation-delay: -1.1s;
}
.plan-motion-boost span {
    position: absolute;
    right: 10px;
    width: 54px;
    height: 2px;
    border-radius: var(--r-full);
    background: linear-gradient(90deg, transparent, rgba(142, 163, 255, .64));
    transform: translateX(72px);
    animation: pro-boost 2.6s var(--ease-out) infinite;
}
.plan-motion-boost span:nth-child(1) { bottom: 16px; animation-delay: 0s; }
.plan-motion-boost span:nth-child(2) { bottom: 29px; animation-delay: .45s; width: 42px; opacity: .7; }
.plan-motion-boost span:nth-child(3) { bottom: 42px; animation-delay: .9s; width: 64px; opacity: .42; }
.plan-motion-home span {
    position: absolute;
    right: 18px;
    bottom: 12px;
    width: 78px;
    height: 30px;
    border-radius: 999px 999px 0 0;
    background: radial-gradient(ellipse at center, rgba(82,215,220,.2), transparent 68%);
    animation: family-glow 3.4s var(--ease-standard) infinite;
}
.plan-motion-home span:nth-child(2) {
    right: 74px;
    bottom: 8px;
    width: 44px;
    opacity: .5;
    animation-delay: -1.4s;
}

@keyframes lite-wave {
    0% { transform: translateX(-18%) scaleY(.92); opacity: .34; }
    45% { opacity: .72; }
    100% { transform: translateX(18%) scaleY(1.06); opacity: .34; }
}
@keyframes pro-boost {
    0% { transform: translateX(72px); opacity: 0; }
    18% { opacity: .7; }
    72% { opacity: .26; }
    100% { transform: translateX(-230px); opacity: 0; }
}
@keyframes family-glow {
    0%, 100% { transform: scale(.94); opacity: .42; }
    50% { transform: scale(1.08); opacity: .76; }
}
@keyframes trial-gift-float {
    0%, 100% { transform: translateY(0) rotate(0deg); filter: brightness(1); }
    45% { transform: translateY(-2px) rotate(-3deg); filter: brightness(1.1); }
    70% { transform: translateY(1px) rotate(2deg); }
}
@keyframes lite-sticker-sway {
    0%, 100% { transform: translateY(0) rotate(0deg); filter: saturate(1); }
    50% { transform: translateY(-2px) rotate(-6deg); filter: saturate(1.16); }
}
@keyframes pro-sticker-spark {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); filter: brightness(1); }
    48% { transform: translateY(-2px) rotate(7deg) scale(1.08); filter: brightness(1.24); }
}
@keyframes family-sticker-pulse {
    0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
    50% { transform: translateY(-1px) scale(1.07); filter: brightness(1.14); }
}
.plan-card.effect-wave .plan-motion-wave span { animation: lite-wave-tap 580ms var(--ease-premium) both; }
.plan-card.effect-bolt .plan-motion-boost span { animation: pro-bolt-tap 620ms var(--ease-premium) both; }
.plan-card.effect-bolt .plan-orb { animation: bolt-kick 540ms var(--ease-premium) both; }
.plan-card.effect-family .plan-motion-home span { animation: family-hug 620ms var(--ease-premium) both; }
.plan-card.effect-family .plan-orb { animation: family-pop 560ms var(--ease-premium) both; }
@keyframes lite-wave-tap {
    0% { transform: translateX(-28%) scaleY(.8); opacity: .25; }
    45% { transform: translateX(0) scaleY(1.25); opacity: .9; }
    100% { transform: translateX(24%) scaleY(1); opacity: .36; }
}
@keyframes pro-bolt-tap {
    0% { transform: translateX(86px) scaleX(.7); opacity: 0; }
    35% { transform: translateX(-28px) scaleX(1.22); opacity: .95; }
    100% { transform: translateX(-250px) scaleX(.85); opacity: 0; }
}
@keyframes bolt-kick {
    0%, 100% { transform: translateY(-1px) scale(1.04); filter: brightness(1); }
    42% { transform: translateY(-3px) scale(1.14) rotate(7deg); filter: brightness(1.28); }
}
@keyframes family-hug {
    0%, 100% { transform: scale(.96); opacity: .48; }
    45% { transform: scale(1.28); opacity: .9; }
}
@keyframes family-pop {
    0%, 100% { transform: translateY(-1px) scale(1.04); }
    45% { transform: translateY(-2px) scale(1.16); }
}
@keyframes select-pulse {
    0% { transform: scale(.992); }
    45% { transform: scale(1.012); }
    100% { transform: scale(1); }
}
@keyframes check-pop {
    from { transform: scale(.72); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.guarantee-line {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 0.7rem; color: var(--txt-3); padding: 2px 0;
}

/* ===== ACCOUNT ===== */
.profile-card {
    display: flex; align-items: center; gap: 14px;
    padding: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    backdrop-filter: blur(20px);
    position: relative;
}
.profile-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--grad-main);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 0 20px rgba(79,195,247,0.15);
    overflow: hidden;
}
.profile-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.profile-info { flex: 1; }
.profile-name { font-size: 0.95rem; font-weight: 700; }
.profile-id { font-size: 0.7rem; color: var(--txt-3); margin-top: 2px; }
.profile-status {
    display: flex; align-items: center; gap: 5px;
    font-size: 0.68rem; font-weight: 600;
    padding: 5px 11px; border-radius: var(--r-full);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    color: var(--txt-2);
    position: absolute; top: 14px; right: 16px;
}
.ps-dot { width: 6px; height: 6px; border-radius: 50%; }
.ps-dot.inactive { background: var(--txt-3); }
.ps-dot.active { background: var(--green); box-shadow: 0 0 6px rgba(76,175,80,0.5); }

/* Sections */
.acc-section { display: flex; flex-direction: column; gap: 10px; }
.acc-heading {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.78rem; font-weight: 700; color: var(--txt-2);
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 0 2px;
}
.acc-heading svg { color: var(--txt-3); }
.acc-card {
    background: linear-gradient(160deg, rgba(16, 30, 62, .72), rgba(8, 14, 32, .62));
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px;
    backdrop-filter: blur(20px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 16px 46px rgba(0, 0, 0, .18);
}
.acc-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.82rem; padding: 6px 0;
}
.acc-row + .acc-row { border-top: 1px solid rgba(255,255,255,0.03); }
.ar-label { color: var(--txt-3); }
.ar-value { font-weight: 600; color: var(--txt-1); }

/* Referral compact */
.ref-card-compact { display: flex; flex-direction: column; gap: 14px; }
.ref-card-compact {
    position: relative;
    overflow: hidden;
}
.ref-card-compact::before {
    content: '';
    position: absolute;
    inset: -80px -70px auto auto;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 226, 255, .20), transparent 68%);
    pointer-events: none;
}

.ref-stats-mini {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.rsm-item {
    min-width: 0;
    text-align: center;
    padding: 11px 6px 10px;
    background: linear-gradient(180deg, rgba(79,195,247,0.10), rgba(79,195,247,0.04));
    border: 1px solid rgba(79,195,247,0.16);
    border-radius: var(--r-md);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.rsm-val {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(0.92rem, 4vw, 1.25rem);
    font-weight: 900;
    letter-spacing: -0.03em;
}
.rsm-val.accent { color: var(--blue-1); }
.rsm-lbl { display: block; font-size: 0.6rem; color: var(--txt-3); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; margin-top: 2px; }
.rsm-divider { display: none; }

.ref-reward-line {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.78rem; color: var(--txt-2);
    padding: 10px 14px;
    background: rgba(79,195,247,0.04);
    border: 1px solid rgba(79,195,247,0.08);
    border-radius: var(--r-md);
}
.rrl-icon { font-size: 1.2rem; }

.ref-link-row {
    display: flex; gap: 8px; align-items: stretch;
}
.ref-url {
    flex: 1; padding: 10px 12px;
    background: rgba(4,7,15,0.5);
    border: 1px solid rgba(79,195,247,0.12);
    border-radius: var(--r-sm);
    font-size: 0.74rem; color: var(--blue-1); font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: flex; align-items: center;
    font-family: 'Inter', monospace;
}
.ref-copy-btn {
    display: flex; align-items: center; justify-content: center;
    padding: 10px 14px;
    background: rgba(79,195,247,0.08);
    border: 1px solid rgba(79,195,247,0.18);
    border-radius: var(--r-sm);
    color: var(--blue-1); cursor: pointer;
    transition: all 0.25s ease;
}
.ref-copy-btn:hover { background: rgba(79,195,247,0.15); }
.ref-copy-btn:active { transform: scale(0.94); }
.ref-copy-btn.copied { background: rgba(76,175,80,0.1); border-color: rgba(76,175,80,0.2); color: var(--green); }

.ref-share-btn {
    width: 100%; padding: 12px;
    border: none; border-radius: var(--r-md);
    background: var(--grad-main); color: white;
    font-size: 0.84rem; font-weight: 700; cursor: pointer;
    font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(79,195,247,0.15);
}
.ref-share-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(79,195,247,0.22); }
.ref-share-btn:active { transform: translateY(0) scale(0.98); }

@media (prefers-reduced-motion: reduce) {
    .flux-bg::before,
    .flux-orb,
    .flux-waves-a,
    .flux-waves-b {
        animation: none;
    }
}

/* Menu items */
.menu-list { display: flex; flex-direction: column; gap: 6px; }
.menu-item {
    width: 100%;
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer; color: var(--txt-1);
    font-family: inherit;
    transition: all 0.25s ease;
    backdrop-filter: blur(20px);
}
.menu-item:hover { background: var(--bg-card-h); border-color: var(--border-h); transform: translateX(3px); }
.menu-item:active { transform: translateX(0) scale(0.99); }
.mi-icon {
    width: 34px; height: 34px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.support-icon { background: rgba(79,195,247,0.08); color: var(--blue-1); }
.info-icon    { background: rgba(76,175,80,0.08);  color: var(--green); }
.notify-icon  { background: rgba(255,143,0,0.08);  color: var(--orange); }
.mi-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mi-text { flex: 1; font-size: 0.86rem; font-weight: 600; text-align: left; }
.mi-sub { font-size: .68rem; color: var(--txt-3); font-weight: 600; text-align: left; }
.mi-arrow { color: var(--txt-3); flex-shrink: 0; transition: transform 0.2s; }
.menu-item:hover .mi-arrow { transform: translateX(3px); color: var(--blue-1); }
.toggle-item { cursor: default; }
.toggle-item:hover { transform: none; }

.switch {
    position: relative;
    width: 48px;
    height: 28px;
    flex: 0 0 auto;
}
.switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.switch-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    transition: background .2s ease, border-color .2s ease;
}
.switch-track::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    top: 2px;
    border-radius: 50%;
    background: #A7B7D4;
    box-shadow: 0 4px 12px rgba(0,0,0,.28);
    transition: transform .22s cubic-bezier(0.2,0,0,1), background .2s ease;
}
.switch input:checked + .switch-track {
    background: rgba(79,195,247,.25);
    border-color: rgba(79,195,247,.34);
}
.switch input:checked + .switch-track::after {
    transform: translateX(19px);
    background: #63D3FF;
}

.terms-card {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 16px;
    border: 1px solid rgba(79,195,247,.12);
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, rgba(12, 22, 50, .82), rgba(8, 13, 26, .92));
    color: var(--txt-1);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.terms-card:hover {
    transform: translateY(-1px);
    border-color: rgba(79,195,247,.22);
    background: linear-gradient(135deg, rgba(17, 31, 68, .92), rgba(10, 18, 38, .94));
}
.terms-card:active { transform: scale(.99); }
.terms-card svg { color: var(--blue-1); flex: 0 0 auto; }
.terms-title { display: block; font-size: .86rem; font-weight: 800; }
.terms-desc { display: block; margin-top: 4px; font-size: .72rem; line-height: 1.45; color: var(--txt-3); font-weight: 600; }

.footer-ver {
    text-align: center; font-size: 0.65rem;
    color: var(--txt-3); padding: 16px 0 8px;
    letter-spacing: 0.03em;
}

/* ===== BOTTOM NAV ===== */
.bottom-nav {
    position: fixed; bottom: 10px;
    left: 50%; transform: translateX(-50%);
    width: calc(100% - 32px); max-width: 398px;
    height: 70px;
    display: flex; align-items: center;
    gap: 6px;
    padding: 8px;
    background: rgba(10,18,40,0.88);
    backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(79,195,247,0.14);
    border-radius: 24px;
    box-shadow: 0 18px 46px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.05);
    z-index: 100;
}
.nav-tab {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
    border: none; background: transparent;
    color: var(--txt-3); cursor: pointer;
    font-family: inherit; padding: 8px 6px;
    min-height: 54px;
    border-radius: 18px;
    position: relative; transition: color 0.25s ease, background .25s ease, transform .2s ease;
}
.nav-tab span {
    font-size: 0.6rem; font-weight: 600;
    letter-spacing: 0.03em; text-transform: uppercase;
}
.nav-tab.active {
    color: var(--blue-1);
    background: linear-gradient(180deg, rgba(79,195,247,.16), rgba(21,101,192,.12));
    box-shadow: inset 0 0 0 1px rgba(79,195,247,.12), 0 8px 22px rgba(37,99,235,.12);
}
.nav-tab.active::before {
    content: ''; position: absolute; top: 5px;
    left: 50%; transform: translateX(-50%);
    width: 18px; height: 3px; border-radius: 999px;
    background: var(--grad-main);
    box-shadow: 0 0 10px rgba(79,195,247,0.5);
}
.nav-tab:hover:not(.active) { color: var(--txt-2); background: rgba(255,255,255,.025); }

/* ===== TOAST ===== */
.toast {
    position: fixed;
    bottom: calc(var(--nav-h) + 16px);
    left: 50%; transform: translateX(-50%) translateY(14px);
    padding: 10px 22px;
    background: rgba(79,195,247,0.1);
    border: 1px solid rgba(79,195,247,0.22);
    backdrop-filter: blur(20px);
    border-radius: var(--r-full);
    color: var(--blue-1); font-size: 0.76rem; font-weight: 700;
    opacity: 0; pointer-events: none;
    transition: all 0.35s ease; z-index: 300; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.green { background: rgba(76,175,80,0.1); border-color: rgba(76,175,80,0.22); color: var(--green); }

/* ===== ENTRY ANIM ===== */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.screen.active .plan-card,
.screen.active .trial-card,
.screen.active .period-panel,
.screen.active .profile-card,
.screen.active .acc-section,
.screen.active .subscription-center,
.screen.active .setup-guide,
.screen.active .devices-card,
.screen.active .info-row,
.screen.active .empty-state {
    animation: fadeUp 0.45s ease both;
}
.screen.active #trial-card { animation-delay: 0.00s; }
.screen.active #plan-lite { animation-delay: 0.05s; }
.screen.active #plan-pro { animation-delay: 0.10s; }
.screen.active #plan-family { animation-delay: 0.15s; }
.screen.active #period-panel { animation-delay: 0.20s; }
.screen.active .profile-card  { animation-delay: 0.00s; }
.screen.active .acc-section:nth-of-type(1) { animation-delay: 0.06s; }
.screen.active .acc-section:nth-of-type(2) { animation-delay: 0.12s; }
.screen.active .acc-section:nth-of-type(3) { animation-delay: 0.18s; }

@keyframes soft-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 360px) {
    .sub-hero { padding: 16px; }
    .sub-card-header { align-items: flex-start; }
    .sub-status-tag { font-size: .58rem; padding: 4px 8px; }
    .sub-stats { gap: 5px; }
    .sub-stat { padding-inline: 7px; }
    .sub-stat strong { font-size: .61rem; }
    .access-actions { grid-template-columns: 1fr; }
    .location-item { grid-template-columns: 36px minmax(0,1fr); }
    .location-item em { grid-column: 2; margin-top: -5px; }
    .routing-summary { grid-template-columns: 1fr; }
    .plan-card { padding-inline: 15px; }
    .pr-big { font-size: 1.3rem; }
    .period-panel { padding: 12px; }
    .period-options { gap: 6px; }
    .period-option { min-height: 82px; padding-inline: 5px; }
    .period-option strong { font-size: .76rem; }
    .period-option span { font-size: .54rem; }
    .period-option b { font-size: .68rem; }
    .include-grid { grid-template-columns: 1fr; }
}

.profile-topbar { gap: 12px; }
.icon-refresh-btn {
    width: 34px; height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(79,195,247,0.18);
    background: rgba(79,195,247,0.08);
    color: var(--blue-1);
    font-size: 1.05rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease;
}
.icon-refresh-btn:active { transform: rotate(24deg) scale(.96); }
.ref-heading { justify-content: space-between; }
.acc-title-left { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ref-badge {
    margin-left: auto;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(79,195,247,0.18);
    background: rgba(37,99,235,0.18);
    color: var(--blue-1);
    font-size: .68rem;
    font-weight: 800;
    white-space: nowrap;
}

/* ===== TYPOGRAPHY PASS ===== */
.brand-name,
.page-title {
    font-size: var(--fs-display);
    line-height: var(--lh-tight);
}
.empty-title {
    font-size: var(--fs-title);
    line-height: 1.16;
}
.sub-plan-name,
.devices-card h2,
.plan-name,
.profile-name,
.channel-title,
.trial-title,
.terms-title {
    font-size: var(--fs-card-title);
    line-height: 1.24;
    font-weight: 850;
}
.empty-desc,
.sub-card-detail,
.guide-summary-copy > span,
.device-copy strong,
.menu-item,
.terms-desc,
.channel-sub {
    font-size: var(--fs-body-sm);
    line-height: var(--lh-body);
}
.sub-traffic,
.info-mini,
.acc-row,
.ref-reward-line,
.plan-metrics span,
.devices-empty strong,
.device-name-sheet input {
    font-size: var(--fs-body);
    line-height: 1.35;
}
.page-sub,
.plan-note,
.plan-desc,
.trial-sub,
.profile-id,
.mi-sub,
.guide-steps p,
.device-copy span,
.devices-note,
.ar-label,
.pr-per,
.guarantee-line {
    font-size: var(--fs-caption);
    line-height: var(--lh-body);
}
.acc-heading,
.devices-kicker,
.card-badge,
.rsm-lbl,
.nav-tab span,
.guide-store-mark,
.sub-period-meta,
.footer-ver {
    font-size: var(--fs-micro);
    line-height: 1.22;
}
.rsm-val,
.pr-big {
    line-height: 1.06;
}

/* ===== EDITORIAL PLANS PASS ===== */
#screen-plans .screen-body {
    gap: 10px;
}
#screen-plans .top-bar {
    padding-bottom: 12px;
}
.plan-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 2px 2px;
    color: var(--txt-1);
}
.plan-picker-head > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 850;
}
.plan-picker-head b,
.period-kicker b {
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    border-radius: 7px;
    background: rgba(79,195,247,.13);
    color: #8cddff;
    font-size: .64rem;
    line-height: 1;
}
.plan-picker-head small {
    color: var(--txt-3);
    font-size: .62rem;
    font-weight: 650;
}
.trial-card {
    min-height: 64px;
    padding: 11px 12px;
    border-radius: 17px;
    border-color: rgba(79,195,247,.16);
    background: rgba(10, 21, 42, .82);
    box-shadow: none;
}
.trial-mark {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: rgba(79,195,247,.09);
    border-color: rgba(79,195,247,.14);
    font-size: 1.12rem;
}
.trial-card-btn {
    border-color: rgba(79,195,247,.22);
    background: rgba(79,195,247,.11);
    color: #9fddf8;
}
.plan-card,
.plan-lite,
.plan-pro,
.plan-family {
    min-height: 0;
    padding: 14px;
    border-radius: 17px;
    border-color: rgba(142, 171, 211, .13);
    background: rgba(9, 18, 38, .82);
    box-shadow: none;
    backdrop-filter: blur(12px);
}
.plan-card::before {
    display: none;
}
.plan-card:hover {
    transform: translateY(-1px);
    border-color: rgba(79,195,247,.26);
}
.plan-card.selected,
.plan-family.selected {
    border-color: rgba(79,195,247,.54);
    background: rgba(13, 31, 62, .94);
    box-shadow: inset 3px 0 0 #4fc3f7, 0 10px 28px rgba(0, 0, 0, .16);
}
.plan-card.selected::after,
.plan-family.selected::after {
    right: 13px;
    bottom: 12px;
    width: 20px;
    height: 20px;
    background: #4fc3f7;
    color: #05101f;
    font-size: .7rem;
    box-shadow: none;
}
.plan-top {
    align-items: center;
    margin-bottom: 11px;
}
.plan-orb,
.plan-pro .plan-orb,
.plan-family .plan-orb {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: rgba(255,255,255,.055);
    border-color: rgba(255,255,255,.07);
    box-shadow: none;
}
.plan-card.selected .plan-orb {
    transform: none;
    background: rgba(79,195,247,.09);
    border-color: rgba(79,195,247,.14);
}
.plan-sticker {
    font-size: 1.2rem;
    text-shadow: none;
}
.plan-sticker::after {
    display: none;
}
.plan-name-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.plan-name {
    font-size: .92rem;
    letter-spacing: -.015em;
}
.plan-note {
    margin-top: 2px;
    font-size: .65rem;
}
.plan-tag {
    padding: 3px 7px;
    border: 1px solid rgba(139,164,204,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    color: var(--txt-3);
    font-size: .52rem;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .035em;
}
.plan-tag.popular-tag {
    border-color: rgba(79,195,247,.18);
    background: rgba(79,195,247,.08);
    color: #8cddff;
}
.plan-price-right {
    align-self: center;
}
.pr-big,
.plan-card.best .pr-big {
    color: var(--txt-1);
    background: none;
    -webkit-text-fill-color: currentColor;
    font-size: 1.26rem;
    letter-spacing: -.035em;
}
.plan-metrics {
    gap: 6px;
}
.plan-metrics span,
.plan-card.selected .plan-metrics span,
.plan-family.selected .plan-metrics span {
    min-height: 25px;
    padding: 0 8px;
    border-color: rgba(139,164,204,.1);
    background: rgba(255,255,255,.03);
    color: var(--txt-2);
    font-size: .61rem;
}
.plan-desc {
    margin: 8px 28px 0 1px;
    font-size: .64rem;
    line-height: 1.35;
}
.period-panel {
    gap: 11px;
    padding: 14px;
    border-radius: 17px;
    border-color: rgba(139,164,204,.13);
    background: rgba(9, 18, 38, .82);
    box-shadow: none;
}
.period-panel::before {
    display: none;
}
.period-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: var(--txt-2);
    letter-spacing: .02em;
}
.period-head strong {
    font-size: .9rem;
}
.period-saving,
.period-saving.is-discount {
    border-color: rgba(79,195,247,.17);
    background: rgba(79,195,247,.07);
    color: #8cddff;
}
.period-option {
    min-height: 74px;
    padding: 9px 6px;
    border-radius: 13px;
    background: rgba(255,255,255,.025);
}
.period-option.selected {
    border-color: rgba(79,195,247,.42);
    background: rgba(79,195,247,.09);
    box-shadow: inset 0 0 0 1px rgba(79,195,247,.05);
}
.plan-includes {
    padding: 10px 0 0;
    border: 0;
    border-top: 1px solid rgba(139,164,204,.1);
    border-radius: 0;
    background: transparent;
}
.include-title {
    margin-bottom: 7px;
    font-size: .64rem;
}
.include-grid {
    gap: 5px;
}
.include-grid span {
    min-height: 30px;
    border-radius: 10px;
    background: rgba(255,255,255,.028);
    font-size: .58rem;
}
.plan-includes p {
    margin-top: 7px;
    font-size: .62rem;
}

@media (max-width: 360px) {
    .plan-picker-head small { display: none; }
    .plan-card { padding: 12px; }
    .plan-orb { width: 36px; height: 36px; }
    .plan-desc { display: none; }
    .include-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ===== QUIET DARK POLISH PASS ===== */
:root {
    --bg-0: #030712;
    --bg-1: #071225;
    --bg-2: #0a172b;
    --bg-card: rgba(10, 21, 40, .94);
    --bg-card-h: rgba(13, 27, 50, .98);
    --border: rgba(137, 165, 205, .18);
    --border-h: rgba(92, 166, 255, .34);
    --border-accent: rgba(79, 195, 247, .42);
    --txt-1: #edf5ff;
    --txt-2: #a9bad5;
    --txt-3: #7788a5;
    --fs-display: 1.42rem;
    --fs-title: 1.22rem;
    --r-sm: 8px;
    --r-md: 8px;
    --r-lg: 8px;
    --r-xl: 8px;
}

.app,
html,
body {
    background: #071225;
}

.app {
    background-image: none;
}

.app::after,
.flux-bg::before,
.flux-bg::after,
.flux-orb,
.flux-waves,
.empty-glow,
.plan-motion {
    display: none !important;
}

.flux-bg {
    background: #071225;
}

.app,
.app *,
.app *::before,
.app *::after {
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
    letter-spacing: 0 !important;
}

.app * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.top-bar {
    background: linear-gradient(180deg, rgba(7, 18, 37, .98) 78%, rgba(7, 18, 37, 0));
}

.brand-name,
.page-title {
    color: var(--txt-1);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.brand-name {
    font-size: 1.18rem;
    font-weight: 900;
}

.page-title {
    font-size: 1.46rem;
    font-weight: 900;
}

.page-sub,
.plan-note,
.plan-desc,
.trial-sub,
.profile-id,
.mi-sub,
.channel-sub,
.locations-intro,
.devices-note {
    color: var(--txt-3);
}

.empty-sub-card,
.sub-hero,
.setup-guide,
.devices-card,
.info-mini,
.trial-card,
.plan-card,
.period-panel,
.profile-card,
.acc-card,
.menu-item,
.terms-card,
.payment-sheet,
.locations-sheet,
.bottom-nav {
    border-color: var(--border);
    background: #0a172b;
}

.empty-sub-card,
.setup-guide,
.devices-card,
.trial-card,
.plan-card,
.period-panel,
.profile-card,
.acc-card,
.menu-item,
.terms-card,
.payment-sheet,
.locations-sheet {
    border-radius: 8px;
}

.bottom-nav {
    border-radius: 12px;
}

.empty-title,
.sub-period-row strong,
.sub-fact strong,
.devices-card h2,
.plan-name,
.period-head strong,
.profile-name,
.acc-heading,
.channel-title,
.locations-head h3,
.terms-title {
    color: var(--txt-1);
    font-weight: 850;
}

.sub-period-row strong {
    font-size: 1rem;
}

.sub-period-row span,
.sub-period-state,
.sub-fact span,
.im-lbl,
.devices-kicker,
.section-label,
.ar-label,
.rsm-lbl {
    color: var(--txt-3);
    font-size: .64rem;
    font-weight: 700;
}

.sub-fact strong,
.im-val,
.ar-value {
    font-size: .88rem;
}

.sub-plan-badge {
    font-size: 1rem;
}

.sub-status-tag {
    border: 1px solid rgba(104, 240, 173, .28);
}

.sub-status-tag.active {
    background: rgba(42, 92, 65, .86);
    color: #bff6d8;
}

.sub-status-tag.expired {
    background: rgba(102, 34, 40, .86);
    color: #ffd0d4;
}

.sp-fill {
    background: #6dd3ff;
}

.sub-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.sub-action-btn {
    min-height: 72px;
    border-color: rgba(137, 165, 205, .18);
    background: #0d1c34;
    color: #b8ddff;
}

.sub-action-btn > span,
.sub-action-btn strong {
    color: #c8e6ff;
}

.sub-action-btn > span {
    width: 24px;
    height: 24px;
    border: 1px solid rgba(137, 165, 205, .18);
    border-radius: 8px;
    font-size: .86rem;
    font-weight: 900;
}

.sub-copy-link-btn {
    min-height: 48px;
    border-color: rgba(137, 165, 205, .18);
    border-radius: 8px;
    background: #0d1c34;
    color: #c8e6ff;
}

.sub-copy-link-btn span {
    border: 1px solid rgba(137, 165, 205, .18);
    border-radius: 8px;
}

.hub-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.hub-info-card,
.channel-card {
    min-width: 0;
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #0a172b;
    color: var(--txt-1);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.hub-info-icon,
.channel-orb {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(137, 165, 205, .18);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: #0d1c34;
    color: #8fd6ff;
    font-weight: 900;
}

.channel-copy {
    min-width: 0;
}

.channel-title,
.channel-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.location-item,
.routing-summary span,
.ref-reward-line,
.rsm-item,
.include-grid span,
.plan-metrics span,
.period-option {
    background: #0d1c34;
    border-color: rgba(137, 165, 205, .14);
}

.location-flag,
.trial-mark,
.plan-orb,
.mi-icon,
.im-icon,
.empty-logo-wrap,
.brand-icon,
.profile-avatar {
    background: #0d1c34;
    border-color: rgba(137, 165, 205, .18);
}

.cta-btn,
.trial-cta,
.ref-share-btn,
.payment-submit {
    background: #1e6bd6;
    border-radius: 8px;
}

.nav-tab.active {
    background: #0d1c34;
    color: #8fd6ff;
}

.nav-tab.active::before {
    background: #4fc3f7;
}

@media (max-width: 360px) {
    .hub-action-row {
        grid-template-columns: 1fr;
    }
}