html {
    font-size: 17px;
}

:root {
    color-scheme: light;
    --shell-bg: #f2f3f5;
    --shell-panel: #ffffff;
    --shell-panel-soft: #f7f8fa;
    --shell-card: #ffffff;
    --shell-card-strong: #f2f3f5;
    --shell-hover: #eceef1;
    --shell-line: rgba(21, 23, 26, .11);
    --shell-line-strong: rgba(21, 23, 26, .2);
    --shell-text: #17191c;
    --shell-muted: #6d727b;
    --shell-subtle: #8f949d;
    --shell-inverse: #f7f8fa;
    --shell-inverse-text: #15171a;
    --shell-accent: #087f9c;
    --shell-accent-bright: #12a9ce;
    --shell-accent-soft: #e8f7fb;
    --shell-success: #128259;
    --shell-warning: #a46208;
    --shell-danger: #b42318;
    --shell-shadow: 0 16px 44px rgba(28, 31, 36, .06);
}

html.studio-theme-dark {
    color-scheme: dark;
    --shell-bg: #0e0e0e;
    --shell-panel: #151515;
    --shell-panel-soft: #191919;
    --shell-card: #1f1f1f;
    --shell-card-strong: #111214;
    --shell-hover: #252525;
    --shell-line: rgba(255, 255, 255, .09);
    --shell-line-strong: rgba(255, 255, 255, .17);
    --shell-text: #f5f5f7;
    --shell-muted: #9a9a9f;
    --shell-subtle: #737379;
    --shell-inverse: #f6f6f6;
    --shell-inverse-text: #121214;
    --shell-accent: #5ed3f3;
    --shell-accent-bright: #5ed3f3;
    --shell-accent-soft: #142934;
    --shell-success: #55d89a;
    --shell-warning: #f0b45d;
    --shell-danger: #ff7b70;
    --shell-shadow: 0 18px 54px rgba(0, 0, 0, .24);
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    background: var(--shell-bg);
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--shell-bg);
    color: var(--shell-text);
    font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans SC", "Segoe UI", sans-serif;
    -webkit-font-smoothing: auto;
    text-rendering: optimizeLegibility;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--shell-accent);
    outline-offset: 2px;
}

[hidden] {
    display: none !important;
}

.wallet-topbar {
    position: sticky;
    z-index: 20;
    top: 0;
    min-height: 68px;
    border-bottom: 1px solid var(--shell-line);
    background: color-mix(in srgb, var(--shell-panel) 94%, transparent);
    backdrop-filter: blur(18px);
}

.wallet-topbar-inner {
    width: min(1660px, 100%);
    min-height: 68px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    margin: 0 auto;
    padding: 0 28px;
}

.back-to-service {
    width: max-content;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid var(--shell-line);
    border-radius: 10px;
    color: var(--shell-muted);
    background: var(--shell-panel-soft);
    text-decoration: none;
    font-size: 13px;
    font-weight: 720;
    transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.back-to-service:hover {
    border-color: var(--shell-line-strong);
    color: var(--shell-text);
    background: var(--shell-hover);
}

.back-to-service svg {
    width: 15px;
    height: 15px;
}

.wallet-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wallet-brand img {
    width: 30px;
    height: 30px;
    padding: 5px;
    border: 1px solid var(--shell-line);
    border-radius: 9px;
    background: var(--shell-panel-soft);
    object-fit: contain;
}

.wallet-brand div {
    display: grid;
    gap: 1px;
}

.wallet-brand span {
    color: var(--shell-muted);
    font-size: 11px;
    line-height: 1.1;
}

.wallet-brand strong {
    font-size: 15px;
    line-height: 1.2;
}

.balance-chip {
    justify-self: end;
    min-height: 42px;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--shell-line);
    border-radius: 12px;
    background: var(--shell-panel-soft);
}

.balance-chip span {
    align-self: end;
    color: var(--shell-muted);
    font-size: 11px;
}

.balance-chip strong {
    grid-row: 1 / 3;
    grid-column: 2;
    align-self: center;
    color: var(--shell-text);
    font-size: 24px;
    line-height: 1;
    letter-spacing: -.04em;
}

.balance-chip small {
    align-self: start;
    color: var(--shell-subtle);
    font-size: 10px;
}

.wallet-shell {
    width: min(1660px, 100%);
    min-height: calc(100vh - 68px);
    margin: 0 auto;
    padding: 0 28px 64px;
}

.credit-mode-switch {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid var(--shell-line);
}

.credit-tabs {
    width: min(420px, 100%);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.credit-tab {
    position: relative;
    min-height: 58px;
    padding: 0 20px;
    border: 0;
    color: var(--shell-muted);
    background: transparent;
    font-size: 16px;
    font-weight: 760;
    transition: color .16s ease, background .16s ease;
}

.credit-tab::after {
    position: absolute;
    right: 24px;
    bottom: -1px;
    left: 24px;
    height: 2px;
    background: transparent;
    content: "";
}

.credit-tab:hover {
    color: var(--shell-text);
    background: var(--shell-panel-soft);
}

.credit-tab.active {
    color: var(--shell-text);
}

.credit-tab.active::after {
    background: var(--shell-text);
}

.page-message {
    margin: 20px 0 0;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--shell-danger) 36%, var(--shell-line));
    border-radius: 10px;
    color: var(--shell-danger);
    background: color-mix(in srgb, var(--shell-danger) 7%, var(--shell-panel));
    font-size: 13px;
}

.page-message.success {
    border-color: color-mix(in srgb, var(--shell-success) 36%, var(--shell-line));
    color: var(--shell-success);
    background: color-mix(in srgb, var(--shell-success) 7%, var(--shell-panel));
}

.credit-view {
    padding-top: 28px;
}

.recharge-viewport-stage {
    min-height: calc(100dvh - 68px - 59px - 28px);
    display: flex;
    flex-direction: column;
    padding-bottom: max(22px, env(safe-area-inset-bottom));
}

.section-heading,
.membership-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.section-kicker {
    display: block;
    margin-bottom: 8px;
    color: var(--shell-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
}

.section-heading h1,
.membership-heading h1 {
    margin: 0;
    font-size: clamp(27px, 2.5vw, 37px);
    line-height: 1.15;
    letter-spacing: -.035em;
}

.section-heading p,
.membership-heading p {
    margin: 8px 0 0;
    color: var(--shell-muted);
    font-size: 14px;
    line-height: 1.7;
}

.section-status {
    min-width: 210px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--shell-line);
    border-radius: 12px;
    background: var(--shell-panel);
}

.section-status > svg {
    width: 24px;
    height: 24px;
    color: var(--shell-success);
}

.section-status span {
    display: grid;
    gap: 2px;
}

.section-status strong {
    font-size: 14px;
    font-weight: 600;
}

.section-status small {
    color: var(--shell-muted);
    font-size: 13px;
    line-height: 1.5;
}

.recharge-mode-choices {
    width: 100%;
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: max-content;
    align-items: stretch;
    align-content: center;
    gap: 14px;
    padding: clamp(18px, 2.5vh, 28px) 0;
}

.recharge-mode-card {
    position: relative;
    isolation: isolate;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(20px, 2.2vw, 28px);
    border: 1px solid rgba(82, 185, 235, .48);
    border-radius: 16px;
    color: #f4f8fc;
    background:
        radial-gradient(110% 76% at 5% 0%, rgba(30, 132, 194, .38) 0%, transparent 58%),
        radial-gradient(90% 70% at 100% 100%, rgba(17, 72, 118, .28) 0%, transparent 62%),
        linear-gradient(148deg, #102d3e 0%, #0b1c2b 48%, #070c14 100%);
    background-position: 0 0, 100% 100%, 0 0;
    background-size: 120% 120%, 125% 125%, 100% 100%;
    box-shadow:
        inset 0 1px 0 rgba(155, 222, 255, .12),
        0 18px 44px rgba(0, 18, 34, .34);
    text-align: left;
    transition: transform .16s ease, border-color .18s ease, background-position .45s ease, box-shadow .25s ease;
}

.recharge-mode-card:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: rgba(103, 205, 255, .72);
    background-position: 10% 8%, 92% 92%, 0 0;
    box-shadow:
        inset 0 1px 0 rgba(178, 229, 255, .16),
        0 22px 54px rgba(0, 27, 49, .46);
}

.recharge-mode-card:focus-visible {
    outline: 2px solid var(--shell-accent);
    outline-offset: 3px;
}

.recharge-mode-card.active {
    border-color: #5ed3f3;
    background:
        radial-gradient(110% 76% at 5% 0%, rgba(30, 132, 194, .38) 0%, transparent 58%),
        radial-gradient(90% 70% at 100% 100%, rgba(17, 72, 118, .28) 0%, transparent 62%),
        linear-gradient(148deg, #102d3e 0%, #0b1c2b 48%, #070c14 100%);
    box-shadow:
        inset 0 1px 0 rgba(178, 229, 255, .16),
        0 20px 48px rgba(0, 27, 49, .42);
}

.recharge-mode-card:disabled,
.recharge-mode-card[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .5;
    box-shadow: none;
}

.mode-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.mode-card-plan {
    color: var(--shell-accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
}

.mode-card-heading {
    display: grid;
    gap: 5px;
}

.mode-card-heading strong {
    font-size: clamp(20px, 1.8vw, 27px);
    font-weight: 750;
    letter-spacing: -.025em;
}

.mode-card-heading small,
.mode-card-summary {
    color: rgba(225, 237, 246, .72);
    font-size: 13px;
    line-height: 1.55;
}

.mode-card-state {
    flex: none;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--shell-muted);
    background: var(--shell-hover);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.4;
}

.recharge-mode-card.active .mode-card-state {
    color: var(--shell-accent);
    background: color-mix(in srgb, var(--shell-accent) 13%, var(--shell-panel));
}

.mode-card-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

.mode-card-price > b {
    font-size: clamp(32px, 3.4vw, 48px);
    font-weight: 750;
    letter-spacing: -.035em;
    line-height: 1.1;
}

.mode-card-price small {
    color: rgba(225, 237, 246, .72);
    font-size: 13px;
    font-weight: 600;
}

.recharge-mode-card.active .mode-card-price > b {
    color: var(--shell-accent);
}

.mode-card-yield {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    margin-left: clamp(8px, 1.2vw, 20px);
    padding-left: clamp(14px, 1.4vw, 22px);
    border-left: 1px solid rgba(138, 205, 238, .2);
}

.mode-card-yield b {
    color: #73d9f7;
    font-size: clamp(22px, 2.1vw, 30px);
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.025em;
    line-height: 1.1;
}

.mode-card-yield small {
    color: rgba(225, 237, 246, .82);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.mode-card-summary {
    max-width: 52ch;
}

.mode-card-benefits {
    display: grid;
    grid-template-columns: minmax(220px, .78fr) minmax(0, 1.22fr);
    align-items: end;
    gap: clamp(18px, 2vw, 30px);
    margin-top: auto;
    padding-top: 17px;
    border-top: 1px solid rgba(138, 205, 238, .14);
}

.mode-card-benefit-summary {
    display: grid;
    align-content: end;
    gap: 9px;
}

.mode-card-benefit-summary > span {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: rgba(225, 237, 246, .76);
    font-size: 13px;
    line-height: 1.5;
}

.mode-card-benefits svg {
    width: 15px;
    height: 15px;
    flex: none;
    margin-top: 2px;
    color: var(--shell-success);
    stroke-width: 2.2;
}

.mode-card-benefits .mode-card-membership {
    color: #f4f8fc;
    font-weight: 700;
}

.mode-card-benefits .mode-card-membership svg {
    color: var(--shell-accent);
}

.mode-card-benefits .mode-card-limit,
.mode-card-benefits .mode-card-limit svg {
    color: rgba(225, 237, 246, .5);
}

.mode-card-entitlements {
    display: grid;
    align-content: end;
    gap: 12px;
    min-width: 0;
    padding-left: clamp(16px, 1.7vw, 26px);
    border-left: 1px solid rgba(138, 205, 238, .18);
}

.mode-card-entitlements-title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #f4f8fc;
    font-size: 13px;
    font-weight: 750;
}

.mode-card-entitlements-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 14px;
}

.mode-card-entitlements-grid > span {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
    color: rgba(225, 237, 246, .78);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.mode-card-entitlements-grid svg,
.mode-card-entitlements-title svg {
    width: 14px;
    height: 14px;
    flex: none;
    margin-top: 0;
}

.mode-card-entitlements.available svg {
    color: var(--shell-success);
}

.mode-card-entitlements.unavailable .mode-card-entitlements-grid > span,
.mode-card-entitlements.unavailable svg {
    color: rgba(255, 123, 112, .78);
}

@media (max-width: 1180px) {
    .mode-card-benefits {
        grid-template-columns: 1fr;
    }

    .mode-card-entitlements {
        padding-top: 14px;
        padding-left: 0;
        border-top: 1px solid rgba(138, 205, 238, .14);
        border-left: 0;
    }
}

.panel,
.recharge-packages {
    border: 1px solid var(--shell-line);
    border-radius: 16px;
    background: var(--shell-panel);
    box-shadow: var(--shell-shadow);
}

.recharge-packages {
    padding: 22px;
}

.subsection-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.step-index {
    width: 27px;
    height: 27px;
    display: grid;
    flex: none;
    place-items: center;
    border: 1px solid var(--shell-line);
    border-radius: 8px;
    color: var(--shell-accent);
    background: var(--shell-accent-soft);
    font-size: 12px;
    font-weight: 700;
}

.subsection-title h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

.subsection-title p {
    margin: 3px 0 0;
    color: var(--shell-muted);
    font-size: 13px;
    line-height: 1.5;
}

.recharge-mode-switch {
    width: min(390px, 42vw);
    min-width: 340px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin-left: auto;
    padding: 4px;
    border: 1px solid var(--shell-line);
    border-radius: 12px;
    background: var(--shell-panel-soft);
}

.recharge-mode-switch button {
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    color: var(--shell-muted);
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}

.recharge-mode-switch button:hover {
    color: var(--shell-text);
}

.recharge-mode-switch button.active {
    color: var(--shell-inverse-text);
    background: var(--shell-inverse);
    box-shadow: 0 7px 16px rgba(0, 0, 0, .16);
}

.studio-theme-dark .recharge-mode-switch button.active {
    color: #06151b;
    background: var(--shell-accent-bright);
}

.amount-presets {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.amount-presets button {
    min-width: 0;
    min-height: 94px;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 5px;
    padding: 14px 16px;
    border: 1px solid var(--shell-line);
    border-radius: 12px;
    color: var(--shell-text);
    background: var(--shell-panel-soft);
    text-align: left;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.amount-presets button:hover {
    transform: translateY(-2px);
    border-color: var(--shell-line-strong);
    background: var(--shell-hover);
}

.amount-presets button.active {
    border-color: var(--shell-accent);
    background: var(--shell-accent-soft);
}

.amount-presets button span {
    color: var(--shell-muted);
    font-size: 13px;
    line-height: 1.45;
}

.amount-presets button small {
    color: var(--shell-muted);
    font-size: 12px;
    line-height: 1.45;
}

.amount-presets button strong {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.amount-presets button strong.member-bonus-total {
    display: flex;
    align-items: baseline;
    gap: 0;
    max-width: 100%;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.amount-presets button strong.member-bonus-total em {
    flex: none;
    font-size: inherit;
    font-weight: inherit;
    font-style: normal;
    letter-spacing: inherit;
}

.amount-presets button strong.member-bonus-total > span {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

@media (max-width: 1380px) {
    .amount-presets button strong.member-bonus-total {
        font-size: 18px;
    }
}

.amount-presets button.active small,
.amount-presets button.active strong {
    color: var(--shell-accent);
}

.recharge-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
    gap: 14px;
    margin-top: 14px;
    align-items: stretch;
}

.recharge-panel {
    padding: 22px;
}

.custom-amount {
    display: block;
}

.custom-amount > span,
.field-label {
    display: block;
    margin-bottom: 8px;
    color: var(--shell-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}

.custom-amount > div {
    min-height: 54px;
    display: flex;
    align-items: center;
    border: 1px solid var(--shell-line);
    border-radius: 11px;
    background: var(--shell-panel-soft);
}

.custom-amount b {
    padding-left: 15px;
    color: var(--shell-muted);
    font-size: 19px;
}

.custom-amount input {
    width: 100%;
    min-width: 0;
    padding: 0 10px;
    border: 0;
    outline: 0;
    color: var(--shell-text);
    background: transparent;
    font-size: 22px;
    font-weight: 700;
}

.custom-amount em {
    padding-right: 15px;
    color: var(--shell-muted);
    font-size: 12px;
    font-style: normal;
    white-space: nowrap;
}

.custom-amount > small {
    display: block;
    margin: 7px 0 18px;
    color: var(--shell-muted);
    font-size: 13px;
    line-height: 1.55;
}

.custom-amount > small strong {
    color: var(--shell-text);
    font-weight: 600;
}

.selected-recharge-package {
    min-height: 112px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: center;
    align-items: end;
    gap: 4px 16px;
    padding: 18px;
    border: 1px solid var(--shell-line);
    border-radius: 12px;
    background: var(--shell-panel-soft);
}

.selected-recharge-package > span {
    color: var(--shell-muted);
    font-size: 13px;
}

.selected-recharge-package > strong {
    grid-row: 1 / 3;
    grid-column: 2;
    color: var(--shell-text);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.04em;
}

.selected-recharge-package > strong b {
    font: inherit;
}

.selected-recharge-package > small {
    color: var(--shell-muted);
    font-size: 13px;
}

.selected-recharge-package > small em {
    color: var(--shell-text);
    font-style: normal;
    font-weight: 700;
}

.selected-recharge-package > i {
    width: max-content;
    margin-top: 7px;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--shell-accent);
    background: var(--shell-accent-soft);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.contact-recharge-method {
    min-height: 66px;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 4px;
    padding: 11px 13px;
    border: 1px solid var(--shell-line);
    border-radius: 11px;
    background: var(--shell-accent-soft);
}

.contact-recharge-icon {
    width: 40px;
    height: 40px;
    display: grid;
    flex: none;
    place-items: center;
    border-radius: 10px;
    color: #06202a;
    background: var(--shell-accent-bright);
}

.contact-recharge-icon svg {
    width: 19px;
    height: 19px;
}

.contact-recharge-method > span:nth-child(2) {
    min-width: 0;
    display: grid;
    flex: 1;
    gap: 3px;
}

.contact-recharge-method small {
    color: var(--shell-muted);
    font-size: 12px;
    line-height: 1.45;
}

.contact-recharge-method strong {
    font-size: 14px;
    font-weight: 600;
}

.contact-recharge-method > svg {
    width: 16px;
    height: 16px;
    color: var(--shell-accent);
}

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

.method-card {
    min-width: 0;
    min-height: 66px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--shell-line);
    border-radius: 11px;
    color: var(--shell-text);
    background: var(--shell-panel-soft);
    text-align: left;
    transition: border-color .16s ease, background .16s ease;
}

.method-card:hover {
    background: var(--shell-hover);
}

.method-card.active {
    border-color: var(--shell-accent);
    background: var(--shell-accent-soft);
}

.method-icon {
    width: 38px;
    height: 38px;
    display: grid;
    flex: none;
    place-items: center;
    border-radius: 10px;
    color: #fff;
}

.wechat .method-icon {
    background: #10a765;
}

.alipay .method-icon {
    background: #1677ff;
}

.method-icon svg {
    width: 18px;
    height: 18px;
}

.method-card > span:nth-child(2) {
    min-width: 0;
    display: grid;
    flex: 1;
    gap: 3px;
}

.method-card strong {
    font-size: 13px;
}

.method-card small {
    overflow: hidden;
    color: var(--shell-muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.method-check {
    width: 16px;
    height: 16px;
    display: none;
    flex: none;
    color: var(--shell-accent);
}

.method-card.active .method-check {
    display: block;
}

.order-total {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 20px 0 13px;
    padding-top: 18px;
    border-top: 1px solid var(--shell-line);
}

.order-total div {
    display: grid;
    gap: 3px;
}

.order-total span {
    font-size: 14px;
    font-weight: 600;
}

.order-total small {
    color: var(--shell-muted);
    font-size: 12px;
    line-height: 1.5;
}

.order-total strong {
    font-size: 28px;
    letter-spacing: -.04em;
}

.order-total em {
    font-style: normal;
}

.primary-action,
.mock-pay {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 10px;
    color: var(--shell-inverse-text);
    background: var(--shell-inverse);
    font-size: 14px;
    font-weight: 600;
    transition: transform .16s ease, opacity .16s ease, background .16s ease;
}

.primary-action {
    width: 100%;
}

.primary-action:hover,
.mock-pay:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--shell-inverse) 88%, var(--shell-accent));
}

.primary-action:disabled,
.mock-pay:disabled {
    cursor: wait;
    opacity: .55;
}

.primary-action svg {
    width: 15px;
    height: 15px;
}

.safe-note {
    margin: 10px 0 0;
    color: var(--shell-subtle);
    font-size: 12px;
    line-height: 1.65;
    text-align: center;
}

.payment-panel {
    min-height: 430px;
    display: grid;
    place-items: center;
    padding: 22px;
    overflow: hidden;
    text-align: center;
}

.service-qr-panel {
    min-height: 430px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
    text-align: center;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.service-qr-panel:focus {
    outline: none;
    border-color: var(--shell-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--shell-accent) 14%, transparent);
}

.service-qr-panel > h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
}

.service-qr-panel > p {
    max-width: 390px;
    margin: 7px 0 15px;
    color: var(--shell-muted);
    font-size: 13px;
    line-height: 1.7;
}

.service-qr-frame {
    width: 184px;
    height: 184px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--shell-line);
    border-radius: 14px;
    background: #fff;
}

.service-qr-frame img {
    width: 100%;
    height: 100%;
    display: block;
    padding: 0;
    object-fit: contain;
    object-position: center;
}

.service-qr-empty {
    width: 100%;
    height: 100%;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 7px;
    padding: 18px;
    color: #6d727b;
    background: #f7f8fa;
}

.service-qr-empty svg {
    width: 38px;
    height: 38px;
    color: #087f9c;
}

.service-qr-empty strong {
    color: #17191c;
    font-size: 13px;
    font-weight: 600;
}

.service-qr-empty small {
    font-size: 12px;
    line-height: 1.5;
}

.service-qr-meta {
    display: grid;
    gap: 3px;
    margin-top: 10px;
}

.service-qr-meta strong {
    font-size: 14px;
    font-weight: 600;
}

.service-qr-meta span {
    color: var(--shell-muted);
    font-size: 12px;
    line-height: 1.5;
}

.service-recharge-summary {
    width: min(390px, 100%);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.service-recharge-summary > span {
    display: grid;
    gap: 4px;
    padding: 9px 10px;
    border: 1px solid var(--shell-line);
    border-radius: 9px;
    color: var(--shell-muted);
    background: var(--shell-panel-soft);
    font-size: 12px;
    line-height: 1.45;
}

.service-recharge-summary strong {
    color: var(--shell-text);
    font-size: 14px;
    font-weight: 600;
}

.service-recharge-summary b {
    font-weight: 700;
}

.service-qr-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
    color: var(--shell-muted);
    font-size: 12px;
    line-height: 1.45;
}

.service-qr-steps span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.service-qr-steps b {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: var(--shell-text);
    background: var(--shell-hover);
}

.service-qr-steps > svg {
    width: 12px;
    height: 12px;
}

.service-safe-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 13px;
    color: var(--shell-muted);
    font-size: 12px;
    line-height: 1.5;
}

.service-safe-tip svg {
    width: 13px;
    height: 13px;
    color: var(--shell-success);
}

.service-refresh-button {
    margin: 13px 0 0;
}

.empty-payment {
    max-width: 400px;
}

.empty-icon {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    border: 1px solid var(--shell-line);
    border-radius: 18px;
    color: var(--shell-accent);
    background: var(--shell-accent-soft);
}

.empty-icon svg {
    width: 28px;
    height: 28px;
}

.empty-payment h2 {
    margin: 0 0 7px;
    font-size: 18px;
}

.empty-payment > p,
.payment-content > p {
    margin: 0;
    color: var(--shell-muted);
    font-size: 11px;
    line-height: 1.65;
}

.empty-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 22px;
    color: var(--shell-muted);
    font-size: 10px;
}

.empty-steps span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.empty-steps b {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: var(--shell-text);
    background: var(--shell-hover);
}

.empty-steps > svg {
    width: 12px;
    height: 12px;
}

.payment-content {
    width: 100%;
    max-width: 390px;
}

.payment-content-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.mock-badge {
    color: var(--shell-muted);
    font-size: 11px;
    font-weight: 750;
}

.payment-content img {
    width: min(210px, 72%);
    aspect-ratio: 1;
    display: block;
    margin: 0 auto 13px;
    padding: 8px;
    border: 1px solid var(--shell-line);
    border-radius: 14px;
    background: #fff;
    object-fit: contain;
}

.payment-content h2 {
    margin: 0 0 6px;
    font-size: 17px;
}

.order-number {
    overflow-wrap: anywhere;
}

.payment-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 15px 0 10px;
}

.payment-summary span {
    padding: 10px;
    border: 1px solid var(--shell-line);
    border-radius: 9px;
    color: var(--shell-muted);
    background: var(--shell-panel-soft);
    font-size: 10px;
}

.payment-summary b {
    display: block;
    margin-top: 4px;
    color: var(--shell-text);
    font-size: 14px;
}

.mock-pay {
    width: 100%;
}

.text-action {
    margin: 9px 0;
    padding: 5px 8px;
    border: 0;
    color: var(--shell-muted);
    background: transparent;
    font-size: 11px;
}

.text-action:hover {
    color: var(--shell-text);
}

.history-panel {
    margin-top: 14px;
    padding: 22px;
}

.history-title {
    margin-bottom: 14px;
}

.refresh-button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding: 0 11px;
    border: 1px solid var(--shell-line);
    border-radius: 9px;
    color: var(--shell-muted);
    background: var(--shell-panel-soft);
    font-size: 11px;
}

.refresh-button:hover {
    color: var(--shell-text);
    background: var(--shell-hover);
}

.refresh-button svg {
    width: 13px;
    height: 13px;
}

.history-list {
    display: grid;
    gap: 8px;
}

.history-item {
    display: grid;
    grid-template-columns: minmax(180px, 1.3fr) repeat(3, minmax(90px, .6fr)) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--shell-line);
    border-radius: 10px;
    background: var(--shell-panel-soft);
}

.history-order-action {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--shell-line-strong);
    border-radius: 8px;
    background: var(--shell-panel);
    color: var(--shell-text);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.history-order-action:hover { border-color: var(--shell-accent); color: var(--shell-accent); }
.history-order-action:focus-visible { outline: 2px solid var(--shell-accent); outline-offset: 2px; }

.history-item strong,
.history-item small {
    display: block;
}

.history-item small {
    margin-top: 3px;
    color: var(--shell-muted);
    font-size: 10px;
}

.history-item > span {
    color: var(--shell-muted);
    font-size: 11px;
}

.history-item > span b {
    display: block;
    margin-top: 3px;
    color: var(--shell-text);
    font-size: 13px;
}

.status {
    width: max-content;
    justify-self: end;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.status.paid {
    color: var(--shell-success);
    background: color-mix(in srgb, var(--shell-success) 12%, transparent);
}

.status.pending {
    color: var(--shell-warning);
    background: color-mix(in srgb, var(--shell-warning) 12%, transparent);
}

.history-empty {
    padding: 34px 0;
    color: var(--shell-muted);
    font-size: 12px;
    text-align: center;
}

.membership-view {
    min-height: 640px;
}

.membership-heading {
    align-items: center;
    margin-bottom: 28px;
}

.membership-service {
    width: 150px;
    display: grid;
    flex: none;
    justify-items: center;
    gap: 9px;
}

.membership-service-qr-frame {
    width: 118px;
    height: 118px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--shell-line);
    border-radius: 12px;
    background: #fff;
}

.membership-service-qr-frame img {
    width: 100%;
    height: 100%;
    display: block;
    padding: 0;
    object-fit: contain;
    object-position: center;
}

.membership-service-qr-empty {
    width: 100%;
    height: 100%;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 7px;
    padding: 12px;
    color: #626872;
    background: #f7f8fa;
    text-align: center;
}

.membership-service-qr-empty svg {
    width: 30px;
    height: 30px;
    color: #087f9c;
}

.membership-service-qr-empty span {
    color: #30343a;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

.membership-service > p {
    margin: 0;
    color: var(--shell-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
    text-align: center;
}

.membership-plans {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.membership-card:nth-child(1) {
    --membership-pop-delay: 0ms;
}

.membership-card:nth-child(2) {
    --membership-pop-delay: 35ms;
}

.membership-card:nth-child(3) {
    --membership-pop-delay: 70ms;
}

.membership-card:nth-child(4) {
    --membership-pop-delay: 105ms;
}

.membership-card:nth-child(5) {
    --membership-pop-delay: 140ms;
}

.membership-loading {
    grid-column: 1 / -1;
    min-height: 420px;
    display: grid;
    place-items: center;
    color: var(--shell-muted);
    font-size: 13px;
    line-height: 1.6;
}

.membership-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--shell-line);
    border-radius: 14px;
    color: var(--shell-text);
    background: var(--shell-panel);
    box-shadow: var(--shell-shadow);
    transition: transform .18s ease, border-color .18s ease;
}

.membership-card:hover {
    z-index: 1;
    transform: translateY(-3px);
    border-color: var(--shell-line-strong);
}

.membership-card.featured {
    border-color: var(--shell-line-strong);
}

.membership-card.accent {
    position: relative;
    isolation: isolate;
    border-color: rgba(82, 185, 235, .48);
    color: #f4f8fc;
    background:
        radial-gradient(110% 76% at 5% 0%, rgba(30, 132, 194, .38) 0%, transparent 58%),
        radial-gradient(90% 70% at 100% 100%, rgba(17, 72, 118, .28) 0%, transparent 62%),
        linear-gradient(148deg, #102d3e 0%, #0b1c2b 48%, #070c14 100%);
    background-position: 0 0, 100% 100%, 0 0;
    background-size: 120% 120%, 125% 125%, 100% 100%;
    box-shadow:
        inset 0 1px 0 rgba(155, 222, 255, .12),
        0 18px 44px rgba(0, 18, 34, .34);
    transition:
        transform .18s ease,
        border-color .18s ease,
        background-position .45s ease,
        box-shadow .25s ease;
}

.membership-card.accent::before {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: -55%;
    width: 42%;
    content: "";
    pointer-events: none;
    opacity: .42;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(120, 211, 255, .03) 28%,
        rgba(120, 211, 255, .12) 50%,
        rgba(120, 211, 255, .03) 72%,
        transparent 100%
    );
    transform: skewX(-12deg);
    transition: left .7s ease;
}

.membership-card.accent:hover {
    border-color: rgba(103, 205, 255, .72);
    background-position: 10% 8%, 92% 92%, 0 0;
    box-shadow:
        inset 0 1px 0 rgba(178, 229, 255, .16),
        0 22px 54px rgba(0, 27, 49, .46);
}

.membership-card.accent:hover::before {
    left: 118%;
}

.membership-card.accent > * {
    position: relative;
    z-index: 1;
}

.membership-summary {
    min-height: 316px;
    padding: 21px 19px 18px;
    background: var(--shell-card);
}

.membership-card.accent .membership-summary {
    background: transparent;
}

.membership-card-head {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
}

.membership-card h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.02em;
}

.membership-recommend {
    overflow: hidden;
    padding: 4px 7px;
    border-radius: 999px;
    color: var(--shell-accent);
    background: color-mix(in srgb, var(--shell-accent) 10%, transparent);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.membership-price {
    min-height: 58px;
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 14px;
}

.membership-price.free-price,
.membership-price.custom-price {
    align-items: baseline;
}

.membership-price.free-price strong {
    font-size: clamp(31px, 2.1vw, 40px);
}

.membership-price.custom-price strong {
    font-size: clamp(26px, 1.8vw, 34px);
    letter-spacing: -.035em;
}

.membership-price sup {
    font-size: 17px;
    font-weight: 600;
}

.membership-price strong {
    display: inline-block;
    font-size: clamp(33px, 2.3vw, 43px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -.045em;
    transform-origin: center bottom;
    transition: opacity .14s ease, transform .14s ease;
}

.membership-price span {
    color: var(--shell-muted);
    font-size: 13px;
    line-height: 1.45;
}

.membership-price-promotion {
    display: inline-grid;
    gap: 1px;
    margin-left: 4px;
    color: var(--shell-accent) !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    white-space: nowrap;
}

.membership-price-promotion b {
    font-size: 12px;
    font-weight: 700;
}

.membership-price-promotion span {
    color: var(--shell-muted);
    font-size: 10px;
}

.membership-renewal {
    min-height: 34px;
    margin: 2px 0 0;
    color: var(--shell-muted);
    font-size: 12px;
    line-height: 1.55;
    transition: opacity .14s ease, transform .14s ease;
}

.membership-points {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 17px;
}

.membership-points strong {
    display: inline-block;
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.025em;
    transform-origin: center bottom;
    transition: opacity .14s ease, transform .14s ease;
}

.membership-points span {
    color: var(--shell-muted);
    font-size: 12px;
    line-height: 1.45;
}

.membership-estimate {
    min-height: 38px;
    margin: 7px 0 13px;
    color: var(--shell-muted);
    font-size: 12px;
    line-height: 1.55;
}

.membership-upgrade-button {
    width: 100%;
    min-height: 38px;
    border: 0;
    border-radius: 999px;
    color: var(--shell-inverse-text);
    background: var(--shell-inverse);
    font-size: 13px;
    font-weight: 600;
    transition: transform .16s ease, opacity .16s ease, background .16s ease;
}

.membership-card.accent .membership-upgrade-button {
    color: #06202a;
    background: var(--shell-accent-bright);
}

.membership-upgrade-button:hover {
    transform: translateY(-1px);
}

.membership-upgrade-button:disabled {
    cursor: default;
    opacity: .72;
}

.membership-upgrade-button.secondary {
    color: var(--shell-text);
    border: 1px solid var(--shell-line);
    background: var(--shell-panel-soft);
}

.membership-recharge-benefit {
    display: grid;
    gap: 7px;
    margin-top: 11px;
    padding: 9px 10px;
    border: 1px solid color-mix(in srgb, var(--shell-accent) 24%, var(--shell-line));
    border-radius: 10px;
    background: color-mix(in srgb, var(--shell-accent) 5%, var(--shell-panel-soft));
}

.membership-recharge-benefit-head,
.membership-recharge-tier {
    display: flex;
    align-items: center;
}

.membership-recharge-benefit-head {
    justify-content: space-between;
    gap: 8px;
}

.membership-recharge-benefit-head strong {
    color: var(--shell-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

.membership-recharge-benefit-head span {
    color: var(--shell-muted);
    font-size: 10px;
    line-height: 1.4;
}

.membership-recharge-tiers {
    display: grid;
    gap: 4px;
}

.membership-recharge-tier {
    display: grid;
    grid-template-columns: 28px repeat(2, minmax(0, 1fr));
    min-width: 0;
    gap: 4px;
    color: var(--shell-muted);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    white-space: nowrap;
}

.membership-recharge-tier b {
    color: var(--shell-accent);
    font-size: 10px;
    font-weight: 600;
}

.membership-recharge-tier span {
    min-width: 0;
    overflow: hidden;
    font-size: 8.5px;
    letter-spacing: -.035em;
    text-align: center;
    text-overflow: clip;
}

.membership-recharge-tier i {
    margin: 0 3px;
    color: var(--shell-muted);
    font-style: normal;
}

.membership-card.accent .membership-recharge-benefit {
    border-color: rgba(114, 207, 249, .22);
    background: rgba(92, 191, 234, .07);
}

.membership-card.accent .membership-recharge-benefit-head strong {
    color: #f4f8fc;
}

.membership-custom-service {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-top: 14px;
}

.membership-custom-service .membership-service-qr-frame {
    width: 112px;
    height: 112px;
}

.membership-custom-service p {
    margin: 0;
    color: rgba(225, 237, 246, .72);
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

.membership-details {
    flex: 1;
    min-height: 150px;
    padding: 17px 18px 20px;
    background: var(--shell-panel);
}

.membership-card.accent .membership-details {
    border-top: 1px solid rgba(138, 205, 238, .14);
    background: transparent;
}

.membership-card.accent .membership-renewal,
.membership-card.accent .membership-price span,
.membership-card.accent .membership-points span,
.membership-card.accent .membership-estimate,
.membership-card.accent .membership-campaigns li,
.membership-card.accent .membership-features li {
    color: rgba(225, 237, 246, .72);
}

.membership-card.accent .membership-price-promotion {
    color: #73d9f7 !important;
}

.membership-card.accent .membership-recommend {
    color: #73d9f7;
    background: rgba(64, 176, 222, .13);
}

.membership-card.accent .membership-benefit-title {
    border-top-color: rgba(138, 205, 238, .14);
    color: #f4f8fc;
}

.membership-card.accent .membership-campaigns li svg {
    color: rgba(233, 245, 252, .9);
}

.membership-campaign-title,
.membership-benefit-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    color: var(--shell-accent);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.membership-benefit-title {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    color: var(--shell-text);
}

.membership-campaign-title svg,
.membership-benefit-title svg {
    width: 14px;
    height: 14px;
}

.membership-campaigns,
.membership-features {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.membership-campaigns li,
.membership-features li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--shell-muted);
    font-size: 12px;
    line-height: 1.55;
}

.membership-campaigns li svg,
.membership-features li svg {
    width: 12px;
    height: 12px;
    flex: none;
    margin-top: 1px;
    color: var(--shell-text);
}

.membership-features li svg {
    color: var(--shell-accent);
}

.membership-feature-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.membership-feature-copy strong {
    color: var(--shell-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.membership-feature-copy > span {
    color: var(--shell-muted);
    font-size: 11px;
    line-height: 1.5;
}

.membership-card.accent .membership-feature-copy strong {
    color: #f4f8fc;
}

.membership-card.accent .membership-feature-copy > span {
    color: rgba(225, 237, 246, .72);
}

.membership-access-note {
    margin: 14px 0 0;
    color: var(--shell-muted);
    font-size: 12px;
    line-height: 1.55;
    text-align: center;
}

.membership-dialog {
    width: min(430px, calc(100vw - 28px));
    max-width: none;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 18px;
    color: var(--shell-text);
    background: transparent;
}

.membership-dialog::backdrop {
    background: rgba(0, 0, 0, .78);
    backdrop-filter: blur(7px);
}

.membership-dialog-card {
    position: relative;
    padding: 28px;
    border: 1px solid var(--shell-line);
    border-radius: 18px;
    background: var(--shell-panel);
    box-shadow: 0 30px 100px rgba(0, 0, 0, .34);
    text-align: center;
}

.dialog-close {
    position: absolute;
    top: 13px;
    right: 13px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--shell-line);
    border-radius: 9px;
    color: var(--shell-muted);
    background: var(--shell-panel-soft);
}

.dialog-close svg {
    width: 15px;
    height: 15px;
}

.dialog-plan-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin: 0 auto 13px;
    border-radius: 14px;
    color: var(--shell-accent);
    background: var(--shell-accent-soft);
}

.dialog-plan-icon svg {
    width: 23px;
    height: 23px;
}

.dialog-kicker {
    color: var(--shell-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
}

.membership-dialog h2 {
    margin: 7px 0;
    font-size: 23px;
    font-weight: 600;
}

.dialog-summary,
.membership-order-number,
.dialog-note {
    color: var(--shell-muted);
    font-size: 13px;
    line-height: 1.65;
}

.membership-qr {
    width: 204px;
    height: 204px;
    display: block;
    margin: 17px auto 10px;
    padding: 8px;
    border: 1px solid var(--shell-line);
    border-radius: 14px;
    background: #fff;
    object-fit: contain;
}

.membership-order-number {
    overflow-wrap: anywhere;
}

.membership-order-status {
    margin: 13px 0;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
}

.membership-order-status.pending {
    color: var(--shell-warning);
    background: color-mix(in srgb, var(--shell-warning) 12%, transparent);
}

.membership-order-status.paid {
    color: var(--shell-success);
    background: color-mix(in srgb, var(--shell-success) 12%, transparent);
}

.dialog-note {
    margin: 10px 0 0;
}

.membership-service-dialog .membership-dialog-card {
    padding: 27px 28px 25px;
}

.membership-purchase-qr-frame {
    width: 224px;
    height: 224px;
    display: grid;
    place-items: center;
    margin: 18px auto 12px;
    overflow: hidden;
    border: 1px solid var(--shell-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .14);
}

.membership-purchase-qr-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.membership-purchase-qr-empty {
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 10px;
    padding: 18px;
    color: #717680;
    background: #f5f7fa;
    text-align: center;
}

.membership-purchase-qr-empty[hidden] {
    display: none !important;
}

.membership-purchase-qr-empty svg {
    width: 38px;
    height: 38px;
}

.membership-purchase-qr-empty strong {
    font-size: 13px;
    font-weight: 650;
}

.membership-service-dialog-heading {
    display: block;
    margin-top: 3px;
    color: var(--shell-text);
    font-size: 15px;
    font-weight: 700;
}

.membership-service-order {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--shell-line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--shell-panel) 86%, var(--shell-accent) 14%);
    text-align: left;
}

.membership-service-order > span {
    grid-column: 1 / -1;
    color: var(--shell-muted);
    font-size: 12px;
}

.membership-service-order > strong {
    overflow-wrap: anywhere;
    color: var(--shell-text);
    font-size: 14px;
}

.membership-service-order > button {
    border: 1px solid var(--shell-line);
    border-radius: 8px;
    background: var(--shell-panel);
    color: var(--shell-text);
    padding: 6px 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}

.membership-service-order > button:focus-visible {
    outline: 2px solid var(--shell-accent);
    outline-offset: 2px;
}

.membership-service-order > button:disabled { cursor: default; opacity: .55; }

.membership-service-order > small {
    grid-column: 1 / -1;
    color: #a26a13;
    font-size: 12px;
    line-height: 1.55;
}

.membership-service-order > small.paid { color: var(--shell-success); }

#queryMembershipServiceOrder { margin-top: 14px; }

.membership-service-dialog-done {
    width: 100%;
    margin-top: 8px;
    border: 1px solid var(--shell-line);
    background: var(--shell-panel);
    color: var(--shell-text);
}

@media (max-width: 1180px) {
    .membership-plans {
        grid-template-columns: none;
        grid-auto-columns: minmax(270px, 300px);
        grid-auto-flow: column;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding: 2px 0 14px;
        scroll-snap-type: inline proximity;
    }

    .membership-card {
        scroll-snap-align: start;
    }
}

@media (max-width: 900px) {
    .wallet-topbar-inner {
        padding: 0 18px;
    }

    .wallet-brand {
        display: none;
    }

    .wallet-topbar-inner {
        grid-template-columns: 1fr 1fr;
    }

    .wallet-shell {
        padding-right: 18px;
        padding-left: 18px;
    }

    .section-heading,
    .membership-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .section-status {
        min-width: 0;
    }

    .amount-presets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .payment-panel {
        min-height: 360px;
    }

    .service-qr-panel {
        min-height: 420px;
    }

    .membership-service {
        align-self: center;
    }
}

@media (max-width: 620px) {
    .wallet-topbar,
    .wallet-topbar-inner {
        min-height: 62px;
    }

    .wallet-topbar-inner {
        padding: 0 12px;
    }

    .back-to-service span {
        display: none;
    }

    .back-to-service {
        width: 36px;
        padding: 0;
        justify-content: center;
    }

    .balance-chip {
        padding: 5px 9px;
    }

    .balance-chip small {
        display: none;
    }

    .balance-chip strong {
        grid-row: 1 / 2;
    }

    .wallet-shell {
        padding: 0 12px 44px;
    }

    .credit-tab {
        min-height: 52px;
        font-size: 15px;
    }

    .credit-view {
        padding-top: 22px;
    }

    .recharge-viewport-stage {
        min-height: calc(100dvh - 62px - env(safe-area-inset-top) - 53px - 22px);
        padding-bottom: max(18px, env(safe-area-inset-bottom));
    }

    .section-heading h1,
    .membership-heading h1 {
        font-size: 26px;
    }

    .section-status {
        width: 100%;
    }

    .recharge-mode-choices {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        align-content: normal;
        gap: 10px;
        padding: 18px 0;
    }

    .recharge-mode-card {
        height: auto;
        gap: 12px;
        padding: 18px;
    }

    .mode-card-price > b {
        font-size: 32px;
    }

    .mode-card-yield {
        width: 100%;
        margin-left: 0;
        padding-top: 10px;
        padding-left: 0;
        border-top: 1px solid rgba(138, 205, 238, .14);
        border-left: 0;
    }

    .mode-card-yield b {
        font-size: 25px;
    }

    .mode-card-benefits {
        margin-top: 2px;
    }

    .recharge-packages,
    .recharge-panel,
    .payment-panel,
    .service-qr-panel,
    .history-panel {
        padding: 17px;
    }

    .recharge-packages > .subsection-title {
        flex-wrap: wrap;
    }

    .recharge-mode-switch {
        width: 100%;
        min-width: 0;
        margin-left: 0;
    }

    .recharge-mode-switch button {
        padding: 0 8px;
        font-size: 12px;
    }

    .amount-presets {
        grid-template-columns: 1fr;
    }

    .amount-presets button {
        min-height: 76px;
    }

    .method-grid,
    .payment-summary {
        grid-template-columns: 1fr;
    }

    .empty-steps {
        align-items: flex-start;
        flex-direction: column;
    }

    .empty-steps > svg {
        display: none;
    }

    .service-qr-steps {
        align-items: flex-start;
        flex-direction: column;
    }

    .service-qr-steps > svg {
        display: none;
    }

    .history-item {
        grid-template-columns: 1fr 1fr;
    }

    .status {
        justify-self: start;
    }

    .membership-dialog-card {
        padding: 25px 20px 22px;
    }

    .membership-qr {
        width: 184px;
        height: 184px;
    }

    .membership-purchase-qr-frame {
        width: 194px;
        height: 194px;
    }
}

@media (max-width: 768px) {
    body { min-height: 100dvh; }
    .wallet-topbar { min-height: calc(62px + env(safe-area-inset-top)); }
    .wallet-topbar-inner {
        min-height: calc(62px + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
    }
    .wallet-shell {
        padding-right: max(12px, env(safe-area-inset-right));
        padding-bottom: calc(44px + env(safe-area-inset-bottom));
        padding-left: max(12px, env(safe-area-inset-left));
    }
    button { min-height: 44px; touch-action: manipulation; }
    .recharge-mode-switch button { min-height: 44px; height: 44px; }
    .back-to-service { width: 44px; min-height: 44px; }
    .refresh-button,
    .membership-upgrade-button,
    .dialog-close,
    .membership-service-order > button { min-height: 44px; }
    .dialog-close { width: 44px; height: 44px; }
    .membership-plans {
        grid-auto-columns: min(82vw, 300px);
        scroll-padding-inline: 2px;
        scrollbar-width: thin;
    }
    .membership-dialog {
        width: min(430px, calc(100vw - 16px));
        max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
        overflow: auto;
        overscroll-behavior: contain;
        scroll-padding-block: 16px 72px;
    }
    .membership-dialog-card { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}

@media (hover: none) {
    .primary-action:hover,
    .mock-pay:hover,
    .membership-upgrade-button:hover { transform: none; }
}