:root {
    color-scheme: dark;
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
    color: #edf1f8;
    background: #07090d;
    font-synthesis: none;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    background: radial-gradient(
        ellipse at 80% 0%,
        #182039 0%,
        transparent 55%
    );
}

main {
    width: min(760px, calc(100% - 40px));
    margin: auto;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 32px 0 48px;
}

a {
    color: inherit;
    text-decoration: none;
}

header > a:last-child {
    font-size: 14px;
    color: #c1cadd;
}

.brand {
    font-size: 23px;
    font-weight: 750;
    letter-spacing: -.5px;
}

.brand span {
    font-size: 16px;
    font-weight: 400;
    color: #95a0b5;
}

.panel {
    padding: 40px;
    border: 1px solid #2b3345;
    border-radius: 24px;
    background: #10151ef2;
}

.panel-top,
.subscription-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.kicker {
    font-size: 11px;
    letter-spacing: 1.8px;
    color: #9cbfff;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #ffffff08;
    border: 1px solid #ffffff12;
    color: #b9c4d6;
    font-size: 12px;
}

.badge.active {
    background: #16372d;
    border-color: #275744;
    color: #a1e5bd;
}

h1 {
    font-size: clamp(28px, 5vw, 38px);
    margin: 20px 0 12px;
    letter-spacing: -1px;
    line-height: 1.15;
}

h2 {
    font-size: 20px;
    margin: 0;
    letter-spacing: -.4px;
}

p {
    line-height: 1.6;
    font-size: 16px;
    color: #b9c4d6;
    overflow-wrap: anywhere;
}

#message {
    margin-bottom: 24px;
}

.tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border: 1px solid #293244;
    border-radius: 14px;
    background: #090d14;
    margin-bottom: 26px;
}

.tabs button {
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #a7b3c7;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.tabs button[aria-pressed="true"] {
    color: #edf1f8;
    background: #253149;
}

.field {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 9px;
    font-size: 14px;
    font-weight: 550;
}

input,
textarea {
    display: block;
    width: 100%;
    background: #090d14;
    color: #edf1f8;
    border: 1px solid #343f55;
    border-radius: 12px;
    padding: 14px;
    font: inherit;
    font-size: 16px;
    line-height: 1.5;
}

input {
    min-height: 52px;
}

input::placeholder,
textarea::placeholder {
    color: #77849b;
    opacity: 1;
}

input[readonly] {
    color: #a6b5cf;
    background: #131a26;
}

input:focus,
textarea:focus {
    border-color: #89b5ff;
}

.password-wrap {
    position: relative;
}

.password-wrap input {
    padding-right: 108px;
}

.password-toggle {
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #b0cbff;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

#code {
    font-family: ui-monospace, monospace;
    font-size: 24px;
    letter-spacing: 6px;
}

textarea {
    font: 14px/1.6 ui-monospace, monospace;
    resize: vertical;
    min-height: 100px;
    margin-bottom: 16px;
}

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid #3a455b;
    background: #1b2332;
    color: #edf1f8;
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    min-height: 48px;
    text-align: center;
    transition: background .15s ease, border-color .15s ease;
}

.primary {
    background: #b0cbff;
    color: #0a1830;
    border-color: #b0cbff;
    font-weight: 650;
}

.full {
    width: 100%;
}

.button:hover:not(:disabled) {
    background: #27344a;
    border-color: #6b819f;
}

.primary:hover:not(:disabled) {
    background: #c6daff;
    border-color: #c6daff;
}

button:disabled {
    cursor: wait;
    opacity: .6;
}

:focus-visible {
    outline: 3px solid #89b5ff;
    outline-offset: 3px;
}

.hint {
    margin: 9px 0 0;
    color: #a4b1c6;
    font-size: 13px;
    line-height: 1.6;
}

.centered {
    text-align: center;
}

.form-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 12px;
}

.text-button {
    min-height: 40px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: #b0cbff;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.text-button:hover:not(:disabled) {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.divider {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #8f9db3;
    margin: 22px 0;
    font-size: 13px;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #2b3345;
}

.notice {
    margin: 24px 0 0;
    padding: 14px 16px;
    border: 1px solid #303e54;
    border-radius: 12px;
    background: #192332;
    color: #bdcce1;
    font-size: 14px;
    line-height: 1.6;
}

.notice.error {
    margin: 0 0 20px;
    border-color: #69404a;
    background: #301c25;
    color: #ffd0d7;
}

.subscription-heading {
    margin-top: 28px;
}

dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    border-block: 1px solid #2b3345;
    padding: 24px 0;
    margin: 24px 0;
}

dt {
    color: #a0acc0;
    font-size: 14px;
}

dd {
    margin: 8px 0 0;
    font-size: 17px;
    overflow-wrap: anywhere;
}

.actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
}

footer {
    color: #93a0b5;
    padding: 24px 0;
    font-size: 14px;
}

[hidden] {
    display: none !important;
}

@media (max-width: 480px) {
    main {
        width: calc(100% - 24px);
    }

    .panel {
        padding: 24px 20px;
        border-radius: 20px;
    }

    header {
        padding: 24px 4px 28px;
    }

    dl {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .actions,
    .actions form,
    .actions .button {
        width: 100%;
    }

    .brand span {
        display: none;
    }

    .panel-top {
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* =========================
   Account dashboard
   ========================= */

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Navigation dock */

.account-nav {
    position: sticky;
    top: 14px;
    z-index: 20;
    display: flex;
    width: max-content;
    max-width: 100%;
    gap: 6px;
    margin: 26px auto 30px;
    padding: 6px;
    overflow: hidden;
    border: 1px solid rgb(120 143 183 / 22%);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            rgb(18 25 37 / 88%),
            rgb(8 12 19 / 94%)
        );
    box-shadow:
        0 14px 38px rgb(0 0 0 / 22%),
        inset 0 1px 0 rgb(255 255 255 / 5%);
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    isolation: isolate;
}

.account-nav::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 50% -120%,
            rgb(137 181 255 / 22%),
            transparent 62%
        );
}

.account-nav button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 44px;
    padding: 0 15px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #8998af;
    font: inherit;
    font-size: 13px;
    font-weight: 580;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        color .16s ease,
        background .16s ease,
        border-color .16s ease,
        transform .16s ease,
        box-shadow .16s ease;
}

.account-nav button:hover:not([aria-selected="true"]) {
    color: #dbe5f6;
    background: rgb(255 255 255 / 4%);
}

.account-nav button:active {
    transform: scale(.98);
}

.account-nav button[aria-selected="true"] {
    color: #f3f7ff;
    border-color: rgb(176 203 255 / 19%);
    background:
        linear-gradient(
            180deg,
            rgb(176 203 255 / 17%),
            rgb(99 123 176 / 12%)
        );
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 8%),
        0 5px 18px rgb(23 49 93 / 18%);
}

.account-nav-icon {
    display: grid;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    place-items: center;
    color: #7f91ab;
    opacity: .92;
    transition:
        color .16s ease,
        transform .16s ease,
        filter .16s ease;
}

.account-nav-icon svg,
.overview-stat-icon svg,
.secure-chip svg,
.secret-copy svg,
.icon-button svg,
.settings-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.account-nav button[aria-selected="true"] .account-nav-icon {
    color: #b9d3ff;
    transform: translateY(-.5px);
    filter: drop-shadow(0 0 8px rgb(137 181 255 / 22%));
}

.account-nav-label {
    display: inline-flex;
    align-items: center;
}

.account-nav-label-mobile {
    display: none;
}

.account-view {
    min-width: 0;
}

.account-view:not([hidden]) {
    animation: account-view-enter .18s cubic-bezier(.2, .7, .2, 1);
}

@keyframes account-view-enter {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Shared account UI */

.account-eyebrow {
    display: block;
    color: #8299bb;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 1.6px;
}

.account-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.account-section-heading-inline {
    align-items: center;
}

.account-section-heading h2 {
    margin-top: 6px;
    font-size: 24px;
}

.account-section-description {
    max-width: 640px;
    margin: 0 0 24px;
    color: #a9b6c9;
    font-size: 14px;
}

/* Overview */

.overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(190px, .9fr);
    gap: 12px;
}

.overview-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid #2d394d;
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgb(18 26 39 / 98%),
            rgb(12 18 27 / 98%)
        );
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 2%);
}

.overview-card-primary {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    min-height: 216px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgb(108 147 219 / 16%),
            transparent 48%
        ),
        linear-gradient(
            145deg,
            rgb(22 33 50 / 98%),
            rgb(12 19 29 / 98%)
        );
}

.overview-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.overview-card-top h2 {
    margin-top: 7px;
    font-size: 24px;
}

.overview-card-primary > p {
    max-width: 430px;
    margin: 16px 0 22px;
    color: #aebbd0;
    font-size: 14px;
}

.overview-identity {
    display: grid;
    gap: 4px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgb(255 255 255 / 7%);
}

.overview-identity span {
    color: #7f8da2;
    font-size: 11px;
}

.overview-identity strong {
    color: #dce6f5;
    font-size: 14px;
    font-weight: 550;
    overflow-wrap: anywhere;
}

.overview-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 102px;
}

.overview-stat-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    padding: 9px;
    place-items: center;
    border: 1px solid rgb(150 180 229 / 12%);
    border-radius: 12px;
    background: rgb(128 159 214 / 8%);
    color: #9fbae8;
}

.overview-stat > div {
    min-width: 0;
}

.overview-stat-label,
.overview-stat-note {
    display: block;
    color: #7f8ea5;
    font-size: 11px;
    line-height: 1.35;
}

.overview-stat strong {
    display: block;
    margin: 4px 0;
    color: #edf1f8;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

#remaining-card.is-warning {
    border-color: rgb(214 173 89 / 32%);
    background:
        linear-gradient(
            145deg,
            rgb(42 33 22 / 76%),
            rgb(18 20 25 / 98%)
        );
}

#remaining-card.is-warning .overview-stat-icon {
    color: #e0bc73;
    border-color: rgb(224 188 115 / 18%);
    background: rgb(224 188 115 / 8%);
}

/* Subscription secret */

.account-access {
    margin-top: 12px;
    padding: 20px;
    border: 1px solid #2d3749;
    border-radius: 18px;
    background: #0d131d;
}

.secure-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border: 1px solid #28364a;
    border-radius: 999px;
    background: #111a27;
    color: #8fa5c4;
    font-size: 11px;
}

.secure-chip svg {
    width: 13px;
    height: 13px;
}

.subscription-secret {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px auto;
    gap: 8px;
    margin-top: 16px;
}

.subscription-secret-value {
    min-width: 0;
    min-height: 46px;
    padding: 10px 13px;
    border-radius: 12px;
    font: 13px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.icon-button {
    display: grid;
    width: 44px;
    min-width: 44px;
    height: 46px;
    padding: 11px;
    place-items: center;
    border: 1px solid #344159;
    border-radius: 12px;
    background: #151e2b;
    color: #a8bbd8;
    cursor: pointer;
    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}

.icon-button:hover {
    border-color: #526987;
    background: #1b2738;
    color: #d9e6fb;
}

.secret-copy {
    min-height: 46px;
    padding: 10px 15px;
}

.secret-copy svg {
    width: 17px;
    height: 17px;
}

.account-access .hint {
    margin-top: 10px;
}

.account-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

/* Account settings */

.settings-group {
    margin-top: 22px;
}

.settings-group-title {
    margin: 0 0 9px 3px;
    color: #7e8ca2;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .4px;
}

.settings-list {
    overflow: hidden;
    border: 1px solid #2c3749;
    border-radius: 17px;
    background: #0e151f;
}

.settings-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    min-height: 72px;
    padding: 13px 16px;
}

.settings-row + .settings-row,
.settings-list > form + *,
.settings-list > * + form {
    border-top: 1px solid rgb(255 255 255 / 6%);
}

.settings-icon {
    display: grid;
    width: 38px;
    height: 38px;
    padding: 9px;
    place-items: center;
    border: 1px solid #29384c;
    border-radius: 12px;
    background: #151f2d;
    color: #99b6e5;
}

.settings-content {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.settings-content strong {
    color: #e6edf8;
    font-size: 14px;
    font-weight: 600;
}

.settings-content span {
    color: #8795aa;
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.settings-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    border: 1px solid #334158;
    border-radius: 999px;
    background: #151d29;
    color: #91a1b8;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.settings-state.is-ok {
    border-color: #275744;
    background: #16372d;
    color: #a1e5bd;
}

.settings-state.is-muted {
    color: #8795aa;
}

.settings-state.is-warning {
    border-color: #66522d;
    background: #302718;
    color: #e6c67d;
}

.settings-management {
    margin-top: 24px;
}

.settings-row-action {
    color: inherit;
    transition: background .15s ease;
}

a.settings-row-action:hover {
    background: rgb(255 255 255 / 3%);
}

.settings-chevron {
    color: #63738b;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
}

.settings-logout {
    display: block;
    min-height: 0;
    padding: 0;
    margin: 0;
}

.settings-logout button {
    display: grid;
    width: 100%;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    min-height: 72px;
    padding: 13px 16px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.settings-logout button:hover {
    background: rgb(255 255 255 / 3%);
}

.settings-logout .settings-icon {
    color: #d49aa4;
    border-color: #4b303a;
    background: #24171d;
}

.settings-logout .settings-content strong {
    color: #f0c7ce;
}

/* Mobile */

@media (max-width: 640px) {
    body {
        padding-bottom: calc(86px + env(safe-area-inset-bottom));
    }

    .account-nav {
        position: fixed;
        top: auto;
        right: max(12px, env(safe-area-inset-right));
        bottom: max(10px, env(safe-area-inset-bottom));
        left: max(12px, env(safe-area-inset-left));
        z-index: 100;
        display: grid;
        width: auto;
        max-width: none;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 3px;
        margin: 0;
        padding: 6px;
        overflow: visible;
        border-color: rgb(126 149 190 / 27%);
        border-radius: 22px;
        background:
            linear-gradient(
                180deg,
                rgb(19 27 40 / 92%),
                rgb(7 11 18 / 96%)
            );
        box-shadow:
            0 18px 45px rgb(0 0 0 / 46%),
            0 0 0 1px rgb(255 255 255 / 2%) inset,
            0 1px 0 rgb(255 255 255 / 6%) inset;
        backdrop-filter: blur(24px) saturate(155%);
        -webkit-backdrop-filter: blur(24px) saturate(155%);
    }

    .account-nav::before {
        border-radius: inherit;
        background:
            radial-gradient(
                circle at 50% -80%,
                rgb(127 174 255 / 24%),
                transparent 64%
            );
    }

    .account-nav button {
        min-width: 0;
        min-height: 58px;
        padding: 7px 3px 6px;
        flex-direction: column;
        gap: 4px;
        border-radius: 17px;
        font-size: 11px;
        line-height: 1.1;
    }

    .account-nav button:hover:not([aria-selected="true"]) {
        background: transparent;
    }

    .account-nav button[aria-selected="true"] {
        border-color: rgb(176 203 255 / 15%);
        background:
            linear-gradient(
                180deg,
                rgb(176 203 255 / 16%),
                rgb(92 117 171 / 10%)
            );
        box-shadow:
            inset 0 1px 0 rgb(255 255 255 / 7%),
            0 4px 14px rgb(20 43 80 / 16%);
    }

    .account-nav-icon {
        width: 21px;
        height: 21px;
        flex-basis: 21px;
    }

    .account-nav button[aria-selected="true"] .account-nav-icon {
        transform: translateY(-1px) scale(1.04);
    }

    .account-nav-label-desktop {
        display: none;
    }

    .account-nav-label-mobile {
        display: inline;
    }

    .overview-grid {
        grid-template-columns: 1fr;
    }

    .overview-card-primary {
        grid-row: auto;
        min-height: 0;
    }

    .overview-card {
        padding: 17px;
    }

    .overview-card-top h2 {
        font-size: 22px;
    }

    .overview-stat {
        min-height: 88px;
    }

    .account-access {
        padding: 17px;
    }

    .subscription-secret {
        grid-template-columns: minmax(0, 1fr) 44px;
    }

    .secret-copy {
        grid-column: 1 / -1;
        width: 100%;
    }

    .account-quick-actions {
        display: grid;
    }

    .account-quick-actions .button {
        width: 100%;
    }

    .account-section-heading h2 {
        font-size: 22px;
    }

    .settings-row,
    .settings-logout button {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        gap: 11px;
        padding: 12px 13px;
    }

    .settings-icon {
        width: 36px;
        height: 36px;
    }

    .settings-state {
        max-width: 92px;
        white-space: normal;
        text-align: center;
    }

    footer {
        padding-bottom: 8px;
    }
}

@media (max-width: 390px) {
    .overview-card-top {
        align-items: flex-start;
    }

    .settings-row,
    .settings-logout button {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .settings-state,
    .settings-chevron {
        grid-column: 2;
        justify-self: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .account-nav button,
    .account-nav-icon,
    .icon-button,
    .settings-row-action {
        transition: none;
    }

    .account-view:not([hidden]) {
        animation: none;
    }
}


/* =========================
   Feedback & loading states v5
   ========================= */

.account-loading {
    margin-top: 24px;
}

.account-loading-nav {
    display: flex;
    width: min(470px, 100%);
    gap: 8px;
    margin: 0 auto 30px;
    padding: 6px;
    border: 1px solid #29364a;
    border-radius: 999px;
    background: #0b111a;
}

.account-loading-nav span {
    flex: 1;
    height: 42px;
    border-radius: 999px;
    background: #151e2b;
}

.account-loading-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(170px, .7fr);
    gap: 12px;
}

.account-loading-card,
.account-loading-access {
    position: relative;
    overflow: hidden;
    border: 1px solid #293649;
    border-radius: 18px;
    background: #0f1722;
}

.account-loading-card {
    display: flex;
    min-height: 124px;
    padding: 20px;
    flex-direction: column;
    gap: 12px;
}

.account-loading-card-main {
    grid-row: span 2;
    min-height: 260px;
}

.account-loading-access {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    padding: 20px;
}

.skeleton-line,
.skeleton-circle,
.skeleton-block,
.account-loading-nav span {
    position: relative;
    overflow: hidden;
    background: #182230;
}

.skeleton-line::after,
.skeleton-circle::after,
.skeleton-block::after,
.account-loading-nav span::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
    background: linear-gradient(
        90deg,
        transparent,
        rgb(255 255 255 / 7%),
        transparent
    );
    animation: cvpn-skeleton 1.25s ease-in-out infinite;
}

.skeleton-line {
    display: block;
    height: 12px;
    border-radius: 999px;
}

.skeleton-line-short {
    width: 28%;
}

.skeleton-line-medium {
    width: 58%;
}

.skeleton-line-wide {
    width: 82%;
}

.skeleton-line-title {
    width: 46%;
    height: 24px;
}

.skeleton-circle {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.skeleton-block {
    width: 100%;
    height: 58px;
    border-radius: 13px;
}

.toast-region {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 1200;
    display: grid;
    width: min(390px, calc(100vw - 36px));
    gap: 8px;
    pointer-events: none;
}

.app-toast {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 30px;
    gap: 10px;
    align-items: center;
    padding: 11px 11px 11px 12px;
    border: 1px solid #35445a;
    border-radius: 15px;
    background: rgb(15 23 34 / 96%);
    box-shadow:
        0 18px 48px rgb(0 0 0 / 34%),
        inset 0 1px 0 rgb(255 255 255 / 4%);
    color: #dde6f4;
    opacity: 0;
    pointer-events: auto;
    transform: translateY(10px) scale(.985);
    transform-origin: right bottom;
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    transition:
        opacity .17s ease,
        transform .17s ease;
}

.app-toast.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.app-toast.is-leaving {
    opacity: 0;
    transform: translateY(6px) scale(.99);
}

.app-toast-icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid #40516a;
    border-radius: 9px;
    background: #172131;
    color: #b7cff5;
    font-size: 13px;
    font-weight: 800;
}

.app-toast.is-success .app-toast-icon {
    border-color: #2b5c49;
    background: #173328;
    color: #a8e7c0;
}

.app-toast.is-error .app-toast-icon {
    border-color: #68434f;
    background: #30202a;
    color: #ffc7d0;
}

.app-toast.is-warning .app-toast-icon {
    border-color: #69562f;
    background: #302718;
    color: #edce87;
}

.app-toast-message {
    min-width: 0;
    font-size: 13px;
    font-weight: 570;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.app-toast-close {
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #8594aa;
    font: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.app-toast-close:hover {
    background: #ffffff0a;
    color: #dbe6f7;
}

@keyframes cvpn-skeleton {
    to {
        transform: translateX(110%);
    }
}

@media (max-width: 640px) {
    .account-loading-nav {
        display: none;
    }

    .account-loading-grid {
        grid-template-columns: 1fr 1fr;
    }

    .account-loading-card-main {
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: 190px;
    }

    .account-loading-card:not(.account-loading-card-main) {
        min-height: 112px;
    }

    .toast-region {
        right: 50%;
        bottom: calc(86px + env(safe-area-inset-bottom));
        width: min(420px, calc(100vw - 24px));
        transform: translateX(50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-line::after,
    .skeleton-circle::after,
    .skeleton-block::after,
    .account-loading-nav span::after {
        animation: none;
    }

    .app-toast {
        transition: none;
    }
}


/* =========================
   Unified account/auth shell v7
   ========================= */

.account-page-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 14% 12%, rgb(92 153 255 / 17%), transparent 30%),
        radial-gradient(circle at 84% 18%, rgb(144 111 255 / 14%), transparent 27%),
        radial-gradient(circle at 54% 92%, rgb(70 210 179 / 6%), transparent 32%),
        linear-gradient(180deg, #0a0e15 0%, #07090d 62%, #07090d 100%);
}

body {
    background: transparent;
}

main {
    width: min(960px, calc(100% - 40px));
}

.site-topbar {
    padding: 26px 2px 30px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.brand-mark {
    display: block;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 13px;
    background:
        url("/legal/icon.png") center / cover no-repeat,
        #0d121a;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
}

.brand-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.brand-copy strong {
    color: #f1f5fc;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -.2px;
}

.brand .brand-copy > span {
    color: #8997ab;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
}

.topbar-support {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #aebbd0 !important;
    font-size: 13px !important;
}

.topbar-support svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.panel {
    transition:
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

.page-intro {
    min-width: 0;
}

.auth-promise {
    display: none;
}

/* Auth page layout */

body.is-auth-screen .panel {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(390px, 1fr);
    gap: 28px;
    align-items: stretch;
    padding: 28px;
    border-color: rgb(112 137 178 / 22%);
    background:
        linear-gradient(135deg, rgb(18 25 37 / 94%), rgb(10 15 23 / 96%));
    box-shadow:
        0 30px 90px rgb(0 0 0 / 26%),
        inset 0 1px 0 rgb(255 255 255 / 3%);
}

body.is-auth-screen .page-intro {
    display: flex;
    min-height: 590px;
    flex-direction: column;
    padding: 14px 8px 8px 8px;
}

body.is-auth-screen .panel-top {
    justify-content: flex-start;
}

body.is-auth-screen #page-badge {
    margin-left: 4px;
}

body.is-auth-screen #title {
    max-width: 430px;
    margin-top: 28px;
    font-size: clamp(36px, 5vw, 52px);
    line-height: 1.02;
    letter-spacing: -1.7px;
}

body.is-auth-screen #message {
    max-width: 450px;
    margin: 14px 0 0;
    color: #9eacc0;
    font-size: 15px;
    line-height: 1.7;
}

body.is-auth-screen .auth-promise {
    display: grid;
    gap: 22px;
    margin-top: auto;
    padding-top: 38px;
}

.auth-promise-orbit {
    position: relative;
    display: grid;
    width: 118px;
    height: 118px;
    place-items: center;
}

.auth-promise-logo {
    position: relative;
    z-index: 3;
    width: 60px;
    height: 60px;
    border: 1px solid rgb(173 204 255 / 18%);
    border-radius: 20px;
    background:
        url("/legal/icon.png") center / cover no-repeat,
        #0d141f;
    box-shadow:
        0 15px 38px rgb(0 0 0 / 24%),
        0 0 28px rgb(125 184 255 / 9%);
}

.auth-orbit {
    position: absolute;
    border: 1px solid rgb(140 181 247 / 10%);
    border-radius: 50%;
}

.auth-orbit-one {
    width: 88px;
    height: 88px;
}

.auth-orbit-two {
    width: 118px;
    height: 118px;
}

body.is-auth-screen .auth-orbit-one {
    animation: auth-orbit-pulse 2.8s ease-out infinite;
}

body.is-auth-screen .auth-orbit-two {
    animation: auth-orbit-pulse 2.8s .7s ease-out infinite;
}

.auth-promise-list {
    display: grid;
    gap: 10px;
}

.auth-promise-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
}

.auth-promise-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid #29384d;
    border-radius: 11px;
    background: #111a27;
    color: #92b7ef;
}

.auth-promise-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-promise-item > span:last-child {
    display: grid;
    gap: 3px;
}

.auth-promise-item strong {
    color: #dce6f4;
    font-size: 13px;
    font-weight: 650;
}

.auth-promise-item small {
    max-width: 340px;
    color: #74849a;
    font-size: 11px;
    line-height: 1.5;
}

/* Auth card */

.auth-card {
    align-self: center;
    min-width: 0;
    padding: 24px;
    border: 1px solid #2d3a4e;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgb(255 255 255 / 2.5%), transparent 24%),
        #0c131d;
    box-shadow:
        0 22px 60px rgb(0 0 0 / 23%),
        inset 0 1px 0 rgb(255 255 255 / 3%);
}

.auth-card-head {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin-bottom: 22px;
}

.auth-card-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid #34455e;
    border-radius: 15px;
    background:
        linear-gradient(145deg, rgb(176 203 255 / 10%), rgb(137 120 255 / 7%)),
        #121b28;
    color: #b8d0f8;
}

.auth-card-icon svg {
    display: none;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-card-icon[data-icon="login"] .auth-icon-login,
.auth-card-icon[data-icon="mail"] .auth-icon-mail,
.auth-card-icon[data-icon="key"] .auth-icon-key {
    display: block;
}

.auth-card-kicker {
    display: block;
    margin: 2px 0 5px;
    color: #8299bb;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 1.45px;
}

.auth-card-head h2 {
    margin: 0;
    font-size: 22px;
    letter-spacing: -.5px;
}

.auth-card-head p {
    margin: 7px 0 0;
    color: #8998ad;
    font-size: 13px;
    line-height: 1.55;
}

.auth-tabs {
    margin-bottom: 20px;
    padding: 4px;
    border-color: #273449;
    border-radius: 13px;
    background: #080d14;
}

.auth-tabs button {
    min-height: 40px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
}

.auth-tabs button[aria-pressed="true"] {
    background:
        linear-gradient(180deg, #26354c, #202c40);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
}

/* Verification steps */

.auth-flow-progress {
    display: grid;
    grid-template-columns: max-content 1fr max-content 1fr max-content;
    align-items: center;
    gap: 7px;
    margin: 0 0 18px;
    padding: 12px 13px;
    border: 1px solid #263347;
    border-radius: 14px;
    background: #09101a;
}

.auth-flow-step {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #65758c;
    font-size: 10px;
}

.auth-flow-step span {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid #2b384b;
    border-radius: 50%;
    background: #0d141e;
    font-size: 9px;
    font-weight: 700;
}

.auth-flow-step strong {
    font-weight: 600;
}

.auth-flow-step.is-active {
    color: #d9e5f6;
}

.auth-flow-step.is-active span {
    border-color: #52709b;
    background: #17253a;
    color: #bed5fb;
}

.auth-flow-step.is-complete {
    color: #91d8ad;
}

.auth-flow-step.is-complete span {
    border-color: #2a5b43;
    background: #143326;
    color: #a2e2ba;
}

.auth-flow-progress > i {
    height: 1px;
    min-width: 10px;
    background: #273348;
}

.auth-flow-progress > i:first-of-type {
    background: #2f654a;
}

.auth-destination {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
    padding: 11px 12px;
    border: 1px solid #2e4057;
    border-radius: 13px;
    background:
        linear-gradient(120deg, rgb(120 169 242 / 6%), transparent),
        #0c141f;
}

.auth-destination-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    background: #152235;
    color: #a9c7f5;
}

.auth-destination-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-destination > span:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.auth-destination small {
    color: #718198;
    font-size: 10px;
}

.auth-destination strong {
    overflow: hidden;
    color: #d8e3f2;
    font-size: 12px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Auth inputs */

.auth-field {
    margin-bottom: 15px;
}

.auth-field > label {
    margin-bottom: 7px;
    color: #c3cede;
    font-size: 12px;
    font-weight: 600;
}

.auth-input-wrap {
    position: relative;
}

.auth-input-icon {
    position: absolute;
    z-index: 2;
    left: 14px;
    top: 50%;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    color: #697c96;
    transform: translateY(-50%);
    pointer-events: none;
}

.auth-input-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-input-wrap > input {
    min-height: 50px;
    padding-left: 44px;
    border-color: #303e53;
    border-radius: 13px;
    background: #080e16;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 1.5%);
}

.auth-input-wrap > input:hover:not(:read-only) {
    border-color: #3b4c65;
}

.auth-input-wrap > input:focus {
    border-color: #6e95cb;
    outline: none;
    box-shadow: 0 0 0 4px rgb(116 165 234 / 8%);
}

.password-wrap.auth-input-wrap input {
    padding-right: 92px;
}

.password-wrap.auth-input-wrap .password-toggle {
    top: 5px;
    right: 5px;
    bottom: 5px;
    min-width: 76px;
    border-radius: 9px;
    color: #9ebceb;
}

.auth-code-input {
    min-height: 64px;
    padding: 0 16px;
    border: 1px solid #33465f;
    border-radius: 15px;
    outline: none;
    background:
        linear-gradient(180deg, rgb(255 255 255 / 2%), transparent),
        #080e16;
    color: #eef5ff;
    font: 700 30px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    letter-spacing: 10px !important;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.auth-code-input:focus {
    border-color: #799fd4;
    box-shadow: 0 0 0 4px rgb(121 159 212 / 8%);
}

.auth-code-input::placeholder {
    color: #34445b;
    opacity: 1;
}

.auth-code-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-top: 7px;
}

.auth-code-meta .hint {
    margin: 0;
    max-width: 240px;
}

.auth-resend {
    flex: 0 0 auto;
    min-height: auto;
    padding: 0;
    color: #9ebff3;
    font-size: 11px;
    white-space: nowrap;
}

.auth-submit {
    position: relative;
    min-height: 50px;
    margin-top: 3px;
    border-radius: 13px;
    background:
        linear-gradient(115deg, #b6d1ff, #aaa0ff);
    box-shadow: 0 12px 28px rgb(103 142 207 / 15%);
}

.auth-submit svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s ease;
}

.auth-submit:hover:not(:disabled) svg {
    transform: translateX(2px);
}

.auth-submit.is-loading svg {
    opacity: .35;
}

.auth-error {
    margin: 0 0 14px;
    padding: 11px 12px;
    border-radius: 12px;
    font-size: 12px;
}

.auth-form-links {
    margin-top: 9px;
}

.auth-form-links .text-button {
    min-height: 32px;
    font-size: 12px;
}

.telegram-option .divider {
    margin: 17px 0 14px;
}

.telegram-auth-button {
    min-height: 48px;
    border-color: #30425b;
    border-radius: 13px;
    background: #111d2b;
    font-size: 13px;
    font-weight: 600;
}

.telegram-auth-button:hover {
    background: #16263a !important;
}

.telegram-auth-icon {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    color: #9fcaff;
}

.telegram-auth-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.telegram-option .hint {
    max-width: 330px;
    margin-inline: auto;
    font-size: 11px;
}

.auth-registration-note {
    margin-top: 14px;
    padding: 10px 11px;
    border: 1px solid #27384d;
    border-radius: 11px;
    background: #0c1520;
}

.auth-trust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid rgb(255 255 255 / 6%);
    color: #697a91;
    font-size: 10px;
}

.auth-trust > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.auth-trust svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-trust a {
    color: #879ab4;
}

body.is-account-screen .auth-promise,
body.is-loading-screen .auth-promise,
body.is-error-screen .auth-promise {
    display: none;
}

body.is-account-screen .page-intro,
body.is-loading-screen .page-intro,
body.is-error-screen .page-intro {
    display: block;
}

/* Keep loading/account full-width inside the panel */

body.is-loading-screen .panel,
body.is-account-screen .panel,
body.is-error-screen .panel {
    display: block;
}

body.is-loading-screen #account-loading,
body.is-account-screen #account,
body.is-error-screen #retry {
    grid-column: 1 / -1;
}

@keyframes auth-orbit-pulse {
    0% {
        transform: scale(.78);
        opacity: .72;
    }

    80%,
    100% {
        transform: scale(1.08);
        opacity: 0;
    }
}

@media (max-width: 820px) {
    main {
        width: min(760px, calc(100% - 28px));
    }

    body.is-auth-screen .panel {
        display: block;
        padding: 22px;
    }

    body.is-auth-screen .page-intro {
        min-height: 0;
        padding: 2px 2px 22px;
    }

    body.is-auth-screen #title {
        max-width: 620px;
        margin-top: 20px;
        font-size: clamp(31px, 8vw, 42px);
    }

    body.is-auth-screen #message {
        max-width: 620px;
    }

    body.is-auth-screen .auth-promise {
        display: none;
    }

    .auth-card {
        max-width: 540px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    main {
        width: calc(100% - 20px);
    }

    .site-topbar {
        padding: 16px 2px 18px;
    }

    .brand-mark {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        border-radius: 11px;
    }

    .topbar-support {
        font-size: 12px !important;
    }

    body.is-auth-screen .panel {
        padding: 16px;
        border-radius: 22px;
    }

    body.is-auth-screen .page-intro {
        padding: 0 2px 18px;
    }

    body.is-auth-screen .panel-top {
        gap: 7px;
    }

    body.is-auth-screen #title {
        margin-top: 16px;
        font-size: 30px;
        letter-spacing: -1.1px;
    }

    body.is-auth-screen #message {
        margin-top: 9px;
        font-size: 13px;
        line-height: 1.6;
    }

    .auth-card {
        padding: 18px;
        border-radius: 18px;
    }

    .auth-card-head {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
        margin-bottom: 18px;
    }

    .auth-card-icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .auth-card-head h2 {
        font-size: 20px;
    }

    .auth-card-head p {
        font-size: 12px;
    }

    .auth-tabs {
        margin-bottom: 17px;
    }

    .auth-flow-progress {
        padding: 10px;
    }

    .auth-flow-step strong {
        display: none;
    }

    .auth-code-meta {
        display: grid;
        gap: 6px;
    }

    .auth-code-meta .hint {
        max-width: none;
    }

    .auth-resend {
        justify-self: start;
    }

    .auth-code-input {
        font-size: 27px !important;
        letter-spacing: 8px !important;
    }

    .auth-trust {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-orbit,
    .auth-submit svg {
        animation: none !important;
        transition: none !important;
    }
}


/* Mobile brand specificity override */
.brand > .brand-mark {
    display: block;
}

.brand > .brand-copy {
    display: grid;
}
/* =========================
   Auth intro cleanup v8
   ========================= */

body.is-auth-screen main {
    width: min(980px, calc(100% - 40px));
}

body.is-auth-screen .panel {
    grid-template-columns: minmax(0, 1.06fr) minmax(420px, .94fr);
    gap: 30px;
    padding: 30px;
}

body.is-auth-screen .page-intro {
    display: flex;
    min-height: 0;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px 12px 12px;
}

body.is-auth-screen .auth-intro-top {
    justify-content: flex-start;
    gap: 10px;
}

body.is-auth-screen #page-kicker {
    color: #9cbfff;
}

body.is-auth-screen #page-badge {
    margin-left: 0;
}

body.is-auth-screen .auth-intro-main {
    margin-top: 26px;
}

body.is-auth-screen #title {
    max-width: 560px;
    margin: 0;
    font-size: clamp(42px, 5vw, 64px);
    line-height: .96;
    letter-spacing: -2px;
    text-wrap: balance;
}

body.is-auth-screen #message {
    max-width: 500px;
    margin: 18px 0 0;
    color: #9eacc0;
    font-size: 16px;
    line-height: 1.75;
}

body.is-auth-screen .auth-promise {
    display: grid;
    gap: 18px;
    margin-top: 42px;
    padding-top: 0;
}

.auth-side-card {
    padding: 18px 18px 17px;
    border: 1px solid #2c394e;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgb(28 40 61 / 92%), rgb(14 20 31 / 92%));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 2%);
}

.auth-side-kicker {
    display: block;
    margin-bottom: 8px;
    color: #8fb2ea;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.auth-side-card p {
    margin: 0;
    color: #afbdd0;
    font-size: 13px;
    line-height: 1.65;
}

.auth-promise-orbit,
.auth-promise-logo,
.auth-orbit,
.auth-orbit-one,
.auth-orbit-two {
    display: none !important;
}

.auth-promise-list {
    gap: 12px;
}

.auth-promise-item {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
}

.auth-promise-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid #2a3a4f;
    background: #111a27;
    color: #96b8ea;
}

.auth-promise-item strong {
    color: #e2ebf8;
    font-size: 14px;
    font-weight: 650;
}

.auth-promise-item small {
    max-width: 360px;
    color: #7e8ea5;
    font-size: 12px;
    line-height: 1.55;
}

@media (max-width: 1024px) {
    body.is-auth-screen main {
        width: min(920px, calc(100% - 32px));
    }

    body.is-auth-screen .panel {
        grid-template-columns: minmax(0, 1fr) minmax(380px, .96fr);
    }

    body.is-auth-screen #title {
        max-width: 520px;
        font-size: clamp(38px, 4.8vw, 56px);
    }
}

@media (max-width: 820px) {
    body.is-auth-screen main {
        width: calc(100% - 24px);
    }

    body.is-auth-screen .panel {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }

    body.is-auth-screen .page-intro {
        min-height: 0;
        padding: 0;
    }

    body.is-auth-screen .auth-intro-main {
        margin-top: 18px;
    }

    body.is-auth-screen #title {
        max-width: none;
        font-size: clamp(34px, 9vw, 48px);
        line-height: 1.02;
        text-wrap: pretty;
    }

    body.is-auth-screen #message {
        max-width: none;
        margin-top: 14px;
        font-size: 15px;
        line-height: 1.7;
    }

    body.is-auth-screen .auth-promise {
        margin-top: 24px;
    }

    .auth-side-card {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    body.is-auth-screen .panel {
        padding: 18px;
        border-radius: 22px;
    }

    body.is-auth-screen #title {
        font-size: clamp(32px, 10vw, 42px);
        letter-spacing: -1.4px;
    }

    .auth-promise-item {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 10px;
    }

    .auth-promise-icon {
        width: 34px;
        height: 34px;
        border-radius: 11px;
    }

    .auth-promise-item strong {
        font-size: 13px;
    }

    .auth-promise-item small {
        font-size: 11px;
    }
}
/* =========================================================
   CVPN Unified Shell v10
   ========================================================= */

:root {
    --account-accent: var(--cvpn-accent);
    --account-accent-2: var(--cvpn-accent-2);
}

.account-page-bg {
    background:
        radial-gradient(circle at 15% 20%, rgba(114,185,255,.22), transparent 25%),
        radial-gradient(circle at 78% 18%, rgba(164,113,255,.17), transparent 23%),
        radial-gradient(circle at 72% 78%, rgba(102,255,214,.08), transparent 25%),
        linear-gradient(180deg, #0a0d12 0%, var(--cvpn-bg) 100%);
    filter: blur(18px) saturate(118%);
}

.site-topbar.cvpn-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 20px 0 28px;
}

.site-topbar.cvpn-topbar .brand {
    min-width: 0;
}

.panel {
    border-color: var(--cvpn-border);
    border-radius: var(--cvpn-radius-xl);
    background:
        linear-gradient(180deg, rgba(255,255,255,.018), transparent 28%),
        rgba(14, 19, 27, .88);
    box-shadow: var(--cvpn-shadow);
}

.button.primary,
.auth-submit,
.account-quick-actions .button.primary {
    border-color: transparent;
    background: linear-gradient(
        135deg,
        var(--cvpn-accent),
        var(--cvpn-accent-2)
    );
    color: var(--cvpn-accent-text);
    box-shadow: 0 14px 34px rgba(125,184,255,.18);
}

.button.primary:hover:not(:disabled),
.auth-submit:hover:not(:disabled) {
    filter: brightness(1.04);
    box-shadow:
        0 18px 42px rgba(125,184,255,.22),
        0 0 24px rgba(157,123,255,.10);
}

.badge.active {
    border-color: rgba(78,168,116,.26);
    background: rgba(50,139,87,.16);
    color: #a7e7c0;
}

.account-nav {
    border-color: var(--cvpn-border);
    background: rgba(9, 13, 20, .84);
    box-shadow:
        0 12px 34px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.025);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.account-nav button[aria-selected="true"] {
    background:
        linear-gradient(
            135deg,
            rgba(139,194,255,.14),
            rgba(159,136,255,.10)
        ),
        #1d293b;
}

.auth-card,
.account-hero,
.account-access,
.account-settings-group,
.account-settings-row {
    border-color: var(--cvpn-border);
}

.auth-card {
    box-shadow:
        0 22px 60px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.025);
}

.auth-side-card {
    border-color: var(--cvpn-border);
    background:
        linear-gradient(
            135deg,
            rgba(139,194,255,.075),
            rgba(159,136,255,.045)
        ),
        rgba(12, 18, 27, .78);
}

.auth-promise-icon {
    border-color: rgba(145,177,225,.16);
    background: rgba(125,184,255,.06);
    color: #a8c8f7;
}

input:focus,
textarea:focus {
    border-color: rgba(139,194,255,.78);
    box-shadow: 0 0 0 4px rgba(125,184,255,.09);
    outline: 0;
}

@media (max-width: 560px) {
    .site-topbar.cvpn-topbar {
        margin: 10px 0 20px;
    }
}
/* =========================================================
   Auth resilience UX v12
   ========================================================= */

#code-field.is-expired .auth-code-input {
    border-color: rgba(215,168,85,.42);
    background:
        linear-gradient(
            180deg,
            rgba(239,195,111,.035),
            rgba(255,255,255,.015)
        ),
        #0b1018;
    box-shadow: 0 0 0 4px rgba(239,195,111,.055);
}

#code-field.is-expired #code-hint {
    color: #e8c27e;
}

.auth-resend:disabled {
    cursor: default;
    color: #687a94;
    text-decoration: none;
    opacity: .72;
}
/* Unified typography v14.1 */
.site-topbar .cvpn-brand-name {
    font-family: var(--cvpn-font-sans);
    font-weight: 700;
    letter-spacing: -.02em;
}

.site-topbar .cvpn-brand-sub {
    font-family: var(--cvpn-font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}
/* =========================================================
   Brand hotfix v14.2
   Match Support v14 exactly
   ========================================================= */

.site-topbar .brand .brand-copy > .cvpn-brand-name {
    font-family:
        "Segoe UI Variable",
        "Segoe UI",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        Roboto,
        Arial,
        sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: rgba(255,255,255,.94);
}

.site-topbar .brand .brand-copy > .cvpn-brand-sub {
    font-family:
        ui-monospace,
        "SFMono-Regular",
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: rgba(200,214,235,.48);
}

/* =========================================================
   Account dashboard v15 — 2026-09-17
   Page shell stays compact; process dialogs use their own header style.
   ========================================================= */

body.is-account-screen #page-intro {
    display: none;
}

body.is-account-screen .panel {
    padding: 26px;
}

body.is-account-screen .account-nav {
    margin-top: 0;
    margin-bottom: 22px;
}

.dashboard-overview-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(270px, .78fr);
    gap: 14px;
}

.dashboard-subscription-card,
.dashboard-status-card,
.dashboard-actions-section,
.dashboard-secret {
    border: 1px solid rgba(145, 166, 204, .16);
    background:
        linear-gradient(180deg, rgba(255,255,255,.018), transparent 30%),
        rgba(11, 16, 24, .88);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 18px 46px rgba(0,0,0,.14);
}

.dashboard-subscription-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 24px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(125,184,255,.14), transparent 42%),
        radial-gradient(circle at 75% 110%, rgba(159,136,255,.08), transparent 44%),
        linear-gradient(145deg, rgba(20,30,45,.98), rgba(10,16,24,.98));
}

.dashboard-subscription-card::after {
    content: "";
    position: absolute;
    right: -46px;
    bottom: -64px;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(151, 190, 248, .08);
    border-radius: 50%;
    pointer-events: none;
}

.dashboard-subscription-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.dashboard-subscription-head h1 {
    margin: 7px 0 0;
    color: #f1f5fb;
    font-size: clamp(25px, 4vw, 32px);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.dashboard-subscription-message {
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin: 15px 0 21px;
    color: #aebbd0;
    font-size: 14px;
    line-height: 1.58;
}

.dashboard-subscription-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 15px;
    background: rgba(5, 9, 15, .34);
}

.dashboard-subscription-stat {
    min-width: 0;
    padding: 14px 16px;
}

.dashboard-subscription-stat + .dashboard-subscription-stat {
    border-left: 1px solid rgba(255,255,255,.065);
}

.dashboard-subscription-stat > span,
.dashboard-account-identity > span {
    display: block;
    color: #7788a1;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .035em;
}

.dashboard-subscription-stat strong {
    display: block;
    margin-top: 5px;
    color: #edf3fc;
    font-size: 16px;
    font-weight: 680;
    line-height: 1.25;
}

.dashboard-subscription-stat small {
    display: block;
    margin-top: 3px;
    color: #7788a1;
    font-size: 10px;
    line-height: 1.35;
}

#remaining-card.is-warning {
    background: rgba(191, 139, 54, .075);
}

#remaining-card.is-warning strong,
#remaining-card.is-warning small {
    color: #e8c783;
}

.dashboard-subscription-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-top: 20px;
}

.dashboard-account-identity {
    min-width: 0;
}

.dashboard-account-identity strong {
    display: block;
    max-width: 280px;
    margin-top: 4px;
    overflow: hidden;
    color: #dce6f5;
    font-size: 12px;
    font-weight: 570;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-subscription-card .account-quick-actions {
    justify-content: flex-end;
    margin: 0;
}

.dashboard-subscription-card .account-quick-actions .button {
    min-height: 42px;
    padding: 9px 13px;
    border-radius: 12px;
    font-size: 12px;
}

.dashboard-subscription-card #connect-device svg {
    width: 17px;
    height: 17px;
}

.dashboard-status-card {
    display: flex;
    min-width: 0;
    min-height: 100%;
    padding: 21px;
    flex-direction: column;
    border-radius: 22px;
    transition: border-color .2s ease, background .2s ease;
}

.dashboard-status-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.dashboard-status-head h2 {
    margin: 7px 0 0;
    color: #edf2fa;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.dashboard-status-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    margin-top: 3px;
    border-radius: 50%;
    background: #64748b;
    box-shadow: 0 0 0 5px rgba(100,116,139,.09);
}

.dashboard-status-card.is-online .dashboard-status-dot,
.dashboard-server-pill.is-online .dashboard-server-pill-dot {
    background: #62c98b;
    box-shadow: 0 0 0 5px rgba(98,201,139,.09);
}

.dashboard-status-card.is-degraded .dashboard-status-dot,
.dashboard-server-pill.is-degraded .dashboard-server-pill-dot {
    background: #d6aa58;
    box-shadow: 0 0 0 5px rgba(214,170,88,.09);
}

.dashboard-status-card.is-down .dashboard-status-dot,
.dashboard-server-pill.is-down .dashboard-server-pill-dot {
    background: #dc7180;
    box-shadow: 0 0 0 5px rgba(220,113,128,.09);
}

.dashboard-status-card.is-loading .dashboard-status-dot {
    animation: dashboard-status-pulse 1.5s ease-in-out infinite;
}

@keyframes dashboard-status-pulse {
    0%, 100% { opacity: .48; transform: scale(.9); }
    50% { opacity: 1; transform: scale(1); }
}

.dashboard-status-card > p {
    margin: 14px 0 16px;
    color: #92a1b7;
    font-size: 12px;
    line-height: 1.52;
}

.dashboard-status-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 18px;
}

.dashboard-server-pill {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    border: 1px solid rgba(142,164,199,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.025);
    color: #a9b6c9;
    font-size: 10px;
    white-space: nowrap;
}

.dashboard-server-pill-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #64748b;
}

.dashboard-status-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.06);
    color: #697a93;
    font-size: 10px;
}

.dashboard-status-footer a {
    color: #a8c7f7;
    font-weight: 600;
}

.dashboard-actions-section {
    margin-top: 14px;
    padding: 20px;
    border-radius: 20px;
}

.dashboard-actions-section .account-section-heading {
    margin-bottom: 14px;
}

.dashboard-actions-section .account-section-heading h2 {
    margin-top: 5px;
    font-size: 19px;
}

.dashboard-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.dashboard-action-card {
    display: grid;
    min-width: 0;
    min-height: 76px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 13px;
    border: 1px solid rgba(142,164,199,.13);
    border-radius: 15px;
    background: rgba(255,255,255,.02);
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease;
}

.dashboard-action-card:hover {
    border-color: rgba(157,190,242,.24);
    background: rgba(125,184,255,.055);
    transform: translateY(-1px);
}

.dashboard-action-card:active {
    transform: translateY(0) scale(.99);
}

.dashboard-action-icon {
    display: grid;
    width: 38px;
    height: 38px;
    padding: 9px;
    place-items: center;
    border: 1px solid rgba(151,181,229,.13);
    border-radius: 12px;
    background: rgba(125,184,255,.055);
    color: #9bbcf0;
}

.dashboard-action-icon svg,
.dashboard-secret-summary-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dashboard-action-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.dashboard-action-copy strong {
    color: #e7eef9;
    font-size: 13px;
    font-weight: 650;
}

.dashboard-action-copy small {
    color: #7e8da4;
    font-size: 10px;
    line-height: 1.35;
}

.dashboard-action-arrow {
    color: #60728e;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
}

.dashboard-secret {
    margin-top: 14px;
    overflow: hidden;
    border-radius: 18px;
}

.dashboard-secret > summary {
    display: grid;
    min-height: 68px;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.dashboard-secret > summary::-webkit-details-marker {
    display: none;
}

.dashboard-secret-summary-icon {
    display: grid;
    width: 36px;
    height: 36px;
    padding: 9px;
    place-items: center;
    border: 1px solid rgba(142,164,199,.13);
    border-radius: 11px;
    background: rgba(255,255,255,.025);
    color: #8ca9d4;
}

.dashboard-secret-summary-copy {
    display: grid;
    gap: 3px;
}

.dashboard-secret-summary-copy strong {
    color: #dfe8f5;
    font-size: 13px;
    font-weight: 630;
}

.dashboard-secret-summary-copy small {
    color: #7788a1;
    font-size: 10px;
}

.dashboard-secret-body {
    padding: 0 16px 16px;
    border-top: 1px solid rgba(255,255,255,.055);
}

.dashboard-secret .subscription-secret {
    margin-top: 16px;
}

.dashboard-secret .hint {
    margin: 9px 0 0;
}

/* The account page keeps its compact CVPN / ACCOUNT brand treatment.
   CONNECT and CHECKOUT dialogs intentionally keep the process-title treatment. */

@media (max-width: 760px) {
    .dashboard-overview-layout {
        grid-template-columns: 1fr;
    }

    .dashboard-status-card {
        min-height: 215px;
    }
}

@media (max-width: 640px) {
    body.is-account-screen .panel {
        padding: 16px;
    }

    body.is-account-screen .account-nav {
        margin-bottom: 18px;
    }

    .dashboard-subscription-card,
    .dashboard-status-card {
        padding: 18px;
        border-radius: 19px;
    }

    .dashboard-subscription-head h1 {
        font-size: 24px;
    }

    .dashboard-subscription-stats {
        grid-template-columns: 1fr;
    }

    .dashboard-subscription-stat + .dashboard-subscription-stat {
        border-top: 1px solid rgba(255,255,255,.065);
        border-left: 0;
    }

    .dashboard-subscription-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-account-identity strong {
        max-width: none;
    }

    .dashboard-subscription-card .account-quick-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .dashboard-subscription-card .account-quick-actions .button {
        width: 100%;
    }

    .dashboard-action-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-actions-section {
        padding: 16px;
    }

    .dashboard-secret > summary {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .dashboard-secret .secure-chip {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 390px) {
    .dashboard-subscription-head {
        align-items: flex-start;
        flex-direction: column-reverse;
    }

    .dashboard-status-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-action-card,
    .dashboard-status-dot {
        animation: none;
        transition: none;
    }
}

/* =========================================================
   CVPN Status v2 dashboard tones v16
   ========================================================= */
.dashboard-status-card.is-maintenance .dashboard-status-dot,
.dashboard-server-pill.is-maintenance .dashboard-server-pill-dot {
    background: #78a9e8;
    box-shadow: 0 0 0 5px rgba(120,169,232,.09);
}

.dashboard-status-card.is-unknown .dashboard-status-dot,
.dashboard-server-pill.is-unknown .dashboard-server-pill-dot {
    background: #8492a6;
    box-shadow: 0 0 0 5px rgba(132,146,166,.08);
}