* {
    box-sizing: border-box;
}

:root {
    --background: #f7f7f5;
    --surface: #ffffff;
    --surface-soft: #f2f2ef;

    --text: #171716;
    --text-secondary: #6c6c67;
    --text-light: #989891;

    --border: #e3e3dd;
    --border-dark: #cdcdc6;

    --dark: #181817;
    --dark-hover: #30302e;

    --success: #19794e;
    --success-bg: #e9f6ee;

    --warning: #946400;
    --warning-bg: #fff6dc;

    --danger: #a43d34;
    --danger-bg: #fff0ee;

    --radius-large: 22px;
    --radius-medium: 15px;
    --radius-small: 10px;

    --shadow:
        0 1px 2px rgba(0, 0, 0, 0.025),
        0 10px 34px rgba(0, 0, 0, 0.035);
}


html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}


body {
    background:
        var(--background);

    color:
        var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "PingFang SC",
        "Hiragino Sans GB",
        "Microsoft YaHei",
        Arial,
        sans-serif;

    -webkit-font-smoothing:
        antialiased;
}


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


button {
    font: inherit;
    cursor: pointer;
}


.hidden {
    display: none !important;
}


/* =========================================================
   Header
========================================================= */

.topbar {
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        0
        clamp(22px, 5vw, 64px);

    border-bottom:
        1px solid var(--border);

    background:
        rgba(247, 247, 245, 0.94);

    backdrop-filter:
        blur(14px);

    position: sticky;
    top: 0;

    z-index: 40;
}


.brand {
    font-size: 19px;
    font-weight: 700;

    letter-spacing:
        -0.04em;
}


.topbar-right {
    display: flex;
    align-items: center;

    gap: 16px;
}


.user-email {
    font-size: 13px;

    color:
        var(--text-secondary);
}


/* =========================================================
   Main
========================================================= */

.dashboard {
    width: min(
        1080px,
        calc(100% - 40px)
    );

    margin:
        0 auto;

    padding:
        54px
        0
        90px;
}


.welcome {
    display: flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        28px;

    margin-bottom:
        30px;
}


.eyebrow {
    margin:
        0
        0
        8px;

    color:
        var(--text-light);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.12em;
}


.welcome h1 {
    margin: 0;

    font-size:
        clamp(
            38px,
            5vw,
            48px
        );

    line-height:
        1;

    letter-spacing:
        -0.055em;
}


.welcome-description {
    margin:
        14px
        0
        0;

    color:
        var(--text-secondary);

    font-size:
        15px;
}


/* =========================================================
   Buttons
========================================================= */

.primary-button,
.dark-button,
.secondary-button,
.ghost-button,
.copy-button {
    border: 0;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    transition:
        0.18s ease;
}


.primary-button,
.dark-button {
    min-height:
        42px;

    padding:
        0
        18px;

    border-radius:
        11px;

    background:
        var(--dark);

    color:
        white;

    font-size:
        13px;

    font-weight:
        650;
}


.primary-button:hover,
.dark-button:hover {
    background:
        var(--dark-hover);
}


.secondary-button,
.copy-button,
.ghost-button {
    min-height:
        38px;

    padding:
        0
        14px;

    border:
        1px solid var(--border);

    border-radius:
        10px;

    background:
        #fff;

    color:
        var(--text);

    font-weight:
        600;
}


.secondary-button:hover,
.copy-button:hover,
.ghost-button:hover {
    background:
        var(--surface-soft);
}


.full-width {
    width: 100%;
}


/* =========================================================
   States
========================================================= */

.state-card {
    padding:
        30px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-large);

    background:
        var(--surface);

    text-align:
        center;

    box-shadow:
        var(--shadow);
}


.error-state {
    background:
        var(--danger-bg);

    color:
        var(--danger);
}


/* =========================================================
   Subscription
========================================================= */

.subscriptions-container {
    display: grid;

    gap: 24px;
}


.subscription-card {
    padding:
        30px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-large);

    background:
        var(--surface);

    box-shadow:
        var(--shadow);
}


.plan-title-row {
    display: flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap: 10px;
}


.plan-title-row h2 {
    margin: 0;

    font-size:
        25px;

    letter-spacing:
        -0.04em;
}


.subscription-validity {
    margin:
        8px
        0
        0;

    color:
        var(--text-secondary);

    font-size:
        13px;
}


.status-pill {
    min-height:
        27px;

    display:
        inline-flex;

    align-items:
        center;

    padding:
        0
        10px;

    border-radius:
        999px;

    font-size:
        11px;

    font-weight:
        700;
}


.status-active {
    background:
        var(--success-bg);

    color:
        var(--success);
}


.status-blocked {
    background:
        var(--danger-bg);

    color:
        var(--danger);
}


.status-expired {
    background:
        var(--surface-soft);

    color:
        var(--text-secondary);
}


.mini-plus-badge,
.plus-badge {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        999px;

    background:
        var(--dark);

    color:
        white;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.12em;
}


.mini-plus-badge {
    padding:
        5px
        7px;
}


.plus-badge {
    padding:
        6px
        9px;

    margin-bottom:
        16px;
}


/* =========================================================
   Traffic
========================================================= */

.traffic-panel {
    margin-top:
        26px;

    padding:
        25px;

    border-radius:
        var(--radius-medium);

    background:
        var(--surface-soft);
}


.metric-label {
    display: block;

    margin-bottom:
        8px;

    color:
        var(--text-secondary);

    font-size:
        12px;
}


.traffic-number {
    display: flex;

    align-items:
        baseline;

    gap:
        8px;
}


.traffic-number strong {
    font-size:
        clamp(
            32px,
            5vw,
            42px
        );

    line-height:
        1;

    letter-spacing:
        -0.055em;
}


.traffic-number span {
    color:
        var(--text-secondary);

    font-size:
        14px;
}


.progress-track {
    width: 100%;

    height:
        8px;

    margin-top:
        24px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        #deded8;
}


.progress-value {
    min-width: 0;

    height:
        100%;

    border-radius:
        999px;

    background:
        var(--dark);

    transition:
        width
        0.5s ease;
}


.progress-footer {
    display: flex;

    justify-content:
        space-between;

    margin-top:
        9px;

    color:
        var(--text-secondary);

    font-size:
        11px;
}


/* =========================================================
   Metrics
========================================================= */

.metric-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        12px;

    margin-top:
        14px;
}


.metric-card {
    padding:
        18px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-medium);

    background:
        white;
}


.metric-card span {
    display: block;

    margin-bottom:
        8px;

    color:
        var(--text-secondary);

    font-size:
        11px;
}


.metric-card strong {
    font-size:
        19px;

    letter-spacing:
        -0.03em;
}


.metric-card-emphasis {
    background:
        var(--surface-soft);
}


/* =========================================================
   Cycle
========================================================= */

.cycle-row {
    margin-top:
        14px;

    padding:
        16px
        18px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-medium);
}


.cycle-row span {
    display: block;

    margin-bottom:
        5px;

    color:
        var(--text-secondary);

    font-size:
        11px;
}


.cycle-row strong {
    font-size:
        13px;
}


/* =========================================================
   Access Key
========================================================= */

.access-key-section {
    margin-top:
        25px;

    padding-top:
        24px;

    border-top:
        1px solid var(--border);
}


.access-key-heading {
    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;
}


.access-key-heading p {
    margin:
        4px
        0
        0;

    color:
        var(--text-secondary);

    font-size:
        12px;
}


.key-actions {
    display: flex;

    gap: 8px;
}


.access-key-box {
    margin-top:
        13px;

    padding:
        15px
        16px;

    border-radius:
        11px;

    background:
        #181817;

    color:
        #efefec;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size:
        11px;

    line-height:
        1.6;

    word-break:
        break-all;
}


.subscription-actions {
    display: flex;

    align-items:
        center;

    gap:
        18px;

    margin-top:
        20px;
}


.secondary-link {
    color:
        var(--text-secondary);

    font-size:
        13px;

    font-weight:
        600;
}


.secondary-link:hover {
    color:
        var(--text);
}


/* =========================================================
   Alerts
========================================================= */

.quota-alert {
    margin-top:
        18px;

    padding:
        13px
        15px;

    border-radius:
        11px;

    background:
        var(--warning-bg);

    color:
        var(--warning);

    font-size:
        12px;

    line-height:
        1.6;
}


.quota-alert-danger {
    background:
        var(--danger-bg);

    color:
        var(--danger);
}


/* =========================================================
   Extra
========================================================= */

.section-block {
    margin-top:
        54px;
}


.section-heading h2 {
    margin: 0;

    font-size:
        29px;

    letter-spacing:
        -0.045em;
}


.section-heading p:not(
    .eyebrow
) {
    max-width:
        600px;

    margin:
        10px
        0
        0;

    color:
        var(--text-secondary);

    font-size:
        14px;

    line-height:
        1.7;
}


.package-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap:
        12px;

    margin-top:
        22px;
}


.traffic-package-card {
    position:
        relative;

    padding:
        21px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-medium);

    background:
        var(--surface);

    box-shadow:
        var(--shadow);
}


.recommended-package {
    border-color:
        #aaa9a1;
}


.recommended-badge {
    position:
        absolute;

    top:
        14px;

    right:
        14px;

    padding:
        4px
        8px;

    border-radius:
        999px;

    background:
        var(--dark);

    color:
        white;

    font-size:
        9px;

    font-weight:
        700;
}


.package-traffic {
    font-size:
        22px;

    font-weight:
        700;

    letter-spacing:
        -0.04em;
}


.traffic-package-card p {
    margin:
        6px
        0
        21px;

    color:
        var(--text-secondary);

    font-size:
        12px;
}


.package-price {
    margin-bottom:
        15px;
}


.package-price strong {
    font-size:
        21px;
}


/* =========================================================
   Plus
========================================================= */

.plus-card {
    margin-top:
        54px;

    padding:
        34px;

    display: flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        36px;

    border:
        1px solid #d7d7d0;

    border-radius:
        var(--radius-large);

    background:
        #ebebe6;
}


.plus-content {
    max-width:
        650px;
}


.plus-card h2 {
    margin: 0;

    font-size:
        31px;

    letter-spacing:
        -0.05em;
}


.plus-card p {
    margin:
        10px
        0
        0;

    color:
        var(--text-secondary);

    font-size:
        14px;
}


.plus-metrics {
    display: flex;

    gap:
        38px;

    margin-top:
        24px;
}


.plus-metrics div {
    display: flex;

    flex-direction:
        column;

    gap:
        4px;
}


.plus-metrics strong {
    font-size:
        24px;
}


.plus-metrics span {
    color:
        var(--text-secondary);

    font-size:
        11px;
}


/* =========================================================
   Modal
========================================================= */

.modal-backdrop {
    position: fixed;

    inset: 0;

    z-index:
        100;

    display: flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        rgba(
            20,
            20,
            18,
            0.45
        );

    backdrop-filter:
        blur(5px);
}


.modal {
    position:
        relative;

    width:
        min(
            500px,
            100%
        );

    padding:
        30px;

    border-radius:
        21px;

    background:
        white;

    box-shadow:
        0
        28px
        90px
        rgba(
            0,
            0,
            0,
            0.2
        );
}


.modal-close {
    position:
        absolute;

    top:
        15px;

    right:
        16px;

    width:
        35px;

    height:
        35px;

    border: 0;

    border-radius:
        50%;

    background:
        var(--surface-soft);

    color:
        var(--text-secondary);

    font-size:
        22px;
}


.modal h2 {
    margin: 0;

    font-size:
        28px;

    letter-spacing:
        -0.045em;
}


.modal-description {
    margin:
        10px
        0
        22px;

    color:
        var(--text-secondary);

    font-size:
        13px;

    line-height:
        1.6;
}


.modal-package-options {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        10px;
}


.modal-package-option {
    position:
        relative;

    min-height:
        82px;

    padding:
        14px;

    border:
        1px solid var(--border);

    border-radius:
        13px;

    background:
        white;

    text-align:
        left;

    transition:
        0.15s ease;
}


.modal-package-option:hover {
    border-color:
        var(--border-dark);
}


.modal-package-option.active {
    border-color:
        var(--dark);

    box-shadow:
        inset
        0
        0
        0
        1px
        var(--dark);
}


.modal-package-option strong {
    display: block;

    font-size:
        17px;
}


.modal-package-option > span:last-child {
    display: block;

    margin-top:
        5px;

    color:
        var(--text-secondary);

    font-size:
        12px;
}


.modal-recommended {
    position:
        absolute;

    right:
        9px;

    top:
        9px;

    padding:
        3px
        6px;

    border-radius:
        999px;

    background:
        var(--dark);

    color:
        white;

    font-size:
        8px;
}


.purchase-total {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        10px;

    margin-top:
        18px;
}


.purchase-total > div {
    padding:
        15px;

    border-radius:
        12px;

    background:
        var(--surface-soft);
}


.purchase-total span {
    display: block;

    margin-bottom:
        6px;

    color:
        var(--text-secondary);

    font-size:
        11px;
}


.purchase-total strong {
    font-size:
        19px;
}


.modal-note {
    margin:
        18px
        0;

    color:
        var(--text-secondary);

    font-size:
        12px;

    line-height:
        1.6;
}


.purchase-message {
    margin-top:
        12px;

    padding:
        11px;

    border-radius:
        9px;

    background:
        var(--danger-bg);

    color:
        var(--danger);

    font-size:
        12px;
}


.purchase-message.success-message {
    background:
        var(--success-bg);

    color:
        var(--success);
}


/* =========================================================
   Responsive
========================================================= */

@media (
    max-width: 860px
) {

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


    .plus-card {
        align-items:
            flex-start;

        flex-direction:
            column;
    }
}


@media (
    max-width: 620px
) {

    .dashboard {
        width:
            calc(100% - 28px);

        padding-top:
            36px;
    }


    .welcome {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .user-email {
        display:
            none;
    }


    .subscription-card {
        padding:
            21px;
    }


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


    .access-key-heading {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .subscription-actions {
        align-items:
            stretch;

        flex-direction:
            column;
    }


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


    .plus-card {
        padding:
            25px;
    }
}


@media (
    max-width: 430px
) {

    .package-grid,
    .modal-package-options,
    .purchase-total {
        grid-template-columns:
            1fr;
    }
}