/* Recharge presentation owns no prices, products, entitlements or payment state.
 * The existing data-selected-kind and is-active states drive the shared accent. */
#userRechargeModal {
    --recharge-bg: var(--bg);
    --recharge-panel: var(--panel);
    --recharge-panel-soft: var(--control-fill);
    --recharge-line: var(--line);
    --recharge-line-strong: var(--badge-line);
    --recharge-text: var(--ink);
    --recharge-muted: var(--muted);
    --recharge-dim: var(--muted);
    --recharge-accent: var(--accent);
    --recharge-accent-strong: var(--accent-strong);
    --recharge-accent-fill: var(--primary-fill);
    --recharge-copy-size: var(--ui-surface-body-font);
    --recharge-caption-size: var(--ui-surface-caption-font);
    --recharge-button-size: var(--ui-surface-body-font);
    position: fixed;
    inset: var(--app-viewport-top, 0px) auto auto var(--app-viewport-left, 0px);
    width: var(--app-viewport-w, 100%);
    height: var(--app-viewport-h, 100dvh);
    --ui-overlay-padding: 16px;
    overflow: hidden;
    background: var(--bg);
    color: var(--ink);
    font-size: var(--recharge-copy-size);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0;
}

#userRechargeModal.open { display: grid; place-items: center; }
#userRechargeModal[hidden] { display: none; }
#userRechargeModal .user-recharge-shell {
    width: min(1120px, 100%);
    height: auto;
    min-height: 0;
    max-height: calc(var(--app-viewport-h, 100dvh) - 32px);
    max-width: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: var(--panel);
    color: var(--ink);
    box-shadow: var(--shadow);
}
#userRechargeModal .asset-library-modal-head {
    min-height: 49px;
    padding: 10px 16px;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    background: var(--control-fill);
}
#userRechargeModal .asset-library-modal-title {
    min-width: 0;
    color: var(--ink);
    font-size: var(--ui-surface-title-font);
    font-weight: var(--ui-heading-weight);
    line-height: 1.5;
}
#userRechargeModal .asset-library-close {
    flex: none;
    width: 29px;
    height: 29px;
    min-height: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--control-fill);
    color: var(--muted);
}
#userRechargeModal .asset-library-close svg { width: 16px; height: 16px; }
#userRechargeModal .user-recharge-body {
    display: block;
    min-height: 0;
    padding: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    font-weight: 400;
}
#userRechargeModal :is(.user-recharge-kicker, .user-recharge-spirit-title) {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    color: var(--ink);
    font-size: var(--ui-section-font);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0;
}
#userRechargeModal :is(.user-recharge-kicker, .user-recharge-spirit-title)::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}
#userRechargeModal .user-recharge-spirit-title { margin-top: 18px; color: var(--accent-strong); }
#userRechargeModal :is(.user-recharge-tier-board, .user-recharge-spirit-card) {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
#userRechargeModal .user-recharge-tier-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
#userRechargeModal .user-recharge-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
}
#userRechargeModal .user-recharge-tier.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: inset 0 2px var(--accent);
}
#userRechargeModal .user-recharge-tier.is-membership-locked { opacity: .76; }
#userRechargeModal .user-recharge-tier-head {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    gap: 4px 9px;
    align-items: center;
}
#userRechargeModal .user-recharge-tier-icon {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--control-fill);
    color: var(--muted);
    font-size: var(--ui-surface-caption-font);
}
#userRechargeModal .user-recharge-tier-icon svg { width: 17px; height: 17px; }
#userRechargeModal .is-active .user-recharge-tier-icon { border-color: var(--accent); color: var(--accent-strong); }
#userRechargeModal .user-recharge-tier-title {
    margin: 0;
    color: var(--muted);
    font-size: var(--recharge-copy-size);
    font-weight: 400;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
#userRechargeModal .user-recharge-tier-price {
    grid-column: 2;
    color: var(--muted);
    font-size: var(--ui-surface-emphasis-font);
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}
#userRechargeModal .user-recharge-tier-price small { margin-left: 4px; color: var(--muted); font-size: var(--recharge-caption-size); font-weight: 400; letter-spacing: 0; }
#userRechargeModal .is-active :is(.user-recharge-tier-title, .user-recharge-tier-price) { color: var(--ink); font-weight: 500; }
#userRechargeModal .user-recharge-tier-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0;
    margin-top: 12px;
    padding-left: 34px;
    color: var(--muted);
    font-size: var(--recharge-copy-size);
    font-weight: 400;
    line-height: 1.75;
    overflow-wrap: anywhere;
}
#userRechargeModal .user-recharge-tier-action {
    display: grid;
    place-items: center;
    width: calc(100% + 34px);
    min-height: 32px;
    margin: auto 0 0 -34px;
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--control-fill);
    color: var(--muted);
    font-size: var(--recharge-button-size);
    font-weight: 400;
    line-height: 1.5;
}
#userRechargeModal .user-recharge-tier-body > div:nth-last-child(2) { margin-bottom: 14px; }
#userRechargeModal .is-active .user-recharge-tier-action { border-color: var(--badge-line); background: var(--badge-fill); color: var(--accent-strong); }
#userRechargeModal .is-current .user-recharge-tier-action { padding-right: 47px; }
#userRechargeModal .user-recharge-payment-zone {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: transparent;
    font-size: 0;
    cursor: pointer;
}
#userRechargeModal .user-recharge-payment-zone:disabled { cursor: not-allowed; }
#userRechargeModal .user-recharge-payment-zone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#userRechargeModal .user-recharge-tier-current:not([hidden]) {
    position: absolute;
    right: 22px;
    bottom: 21px;
    z-index: 3;
    padding: 0 5px;
    border: 1px solid var(--badge-line);
    border-radius: 6px;
    background: var(--badge-fill);
    color: var(--badge-text);
    font-size: var(--ui-surface-caption-font);
    font-weight: 400;
    line-height: 18px;
    pointer-events: none;
}
#userRechargeModal .user-recharge-notice {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 3px 12px;
    margin-top: 13px;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: transparent;
}
#userRechargeModal .user-recharge-notice-title { grid-row: 1 / 4; margin: 0; color: var(--ink); font-size: var(--recharge-caption-size); font-weight: 500; line-height: 1.8; }
#userRechargeModal .user-recharge-notice p { grid-column: 2; margin: 0; color: var(--muted); font-size: var(--recharge-caption-size); font-weight: 400; line-height: 1.8; overflow-wrap: anywhere; }
#userRechargeModal .user-recharge-notice p:first-of-type { color: var(--ink); font-weight: 500; }

/* Shared rows keep amounts and all three comparison columns aligned even when
 * published text wraps. The wrappers and their existing ARIA roles stay intact. */
#userRechargeModal .user-recharge-spirit-matrix {
    display: grid;
    grid-template-columns: minmax(0, 1.27fr) repeat(3, minmax(0, 1fr));
    grid-template-rows: auto repeat(6, minmax(40px, auto));
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 7px;
    overflow: hidden;
    background: var(--control-muted);
    font-variant-numeric: tabular-nums;
}
#userRechargeModal .user-recharge-amount-grid { display: grid; grid-column: 1; grid-row: 1 / -1; grid-template-rows: subgrid; min-width: 0; }
#userRechargeModal .user-recharge-rate-table { display: grid; grid-column: 2 / -1; grid-row: 1 / -1; grid-template-columns: subgrid; grid-template-rows: subgrid; min-width: 0; }
#userRechargeModal .user-recharge-rate-column {
    --rate-fill: transparent;
    --rate-header-fill: var(--control-fill);
    --rate-ink: var(--muted);
    --rate-border: var(--line);
    --rate-cap: transparent;
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    min-width: 0;
}
#userRechargeModal[data-selected-kind="yearly"] .user-recharge-rate-column:nth-child(1),
#userRechargeModal[data-selected-kind="monthly"] .user-recharge-rate-column:nth-child(2),
#userRechargeModal[data-selected-kind="trial"] .user-recharge-rate-column:nth-child(3) {
    --rate-fill: var(--accent-soft);
    --rate-header-fill: color-mix(in srgb, var(--accent) 17%, var(--panel));
    --rate-ink: var(--accent-strong);
    --rate-border: var(--badge-line);
    --rate-cap: var(--accent);
}
#userRechargeModal .user-recharge-amount-header,
#userRechargeModal .user-recharge-rate-column h3 {
    display: grid;
    align-content: center;
    min-height: 38px;
    margin: 0;
    padding: 7px 6px;
    border-top: 2px solid transparent;
    border-bottom: 1px solid var(--line);
    background: var(--control-fill);
    color: var(--muted);
    font-size: var(--recharge-caption-size);
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    overflow-wrap: anywhere;
}
#userRechargeModal .user-recharge-rate-column h3 { display: block; align-content: center; background: var(--rate-header-fill); color: var(--rate-ink); border-top-color: var(--rate-cap); border-left: 1px solid var(--rate-border); border-right: 1px solid var(--rate-border); }
#userRechargeModal .user-recharge-rate-column strong { font-size: inherit; font-weight: inherit; }
#userRechargeModal .user-recharge-rate-column > span {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 7px 5px;
    border-left: 1px solid var(--rate-border);
    border-right: 1px solid var(--rate-border);
    border-bottom: 1px solid var(--line);
    background: var(--rate-fill);
    color: var(--rate-ink);
    font-size: var(--recharge-copy-size);
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    overflow-wrap: anywhere;
}
#userRechargeModal .user-recharge-rate-column > span:last-child { border-bottom: 2px solid var(--rate-cap); }
#userRechargeModal .user-recharge-rate-column > span.is-active { background: color-mix(in srgb, var(--accent) 21%, var(--control-muted)); color: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 500; }
#userRechargeModal .user-recharge-amount-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 12px);
    min-width: 0;
    margin: 3px 6px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    font-size: var(--ui-surface-body-font);
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
    text-align: center;
}
#userRechargeModal .user-recharge-amount-btn strong { min-width: 0; font-size: inherit; font-weight: inherit; }
#userRechargeModal .user-recharge-amount-equals { margin: 0; color: var(--muted); font-size: inherit; font-weight: 400; }
#userRechargeModal .user-recharge-amount-btn.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); font-weight: 500; }
#userRechargeModal .user-recharge-amount-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#userRechargeModal .user-recharge-custom-btn { flex-direction: column; gap: 0; }
#userRechargeModal .user-recharge-custom-editor { align-items: center; justify-content: center; gap: 4px; width: 100%; }
#userRechargeModal .user-recharge-custom-editor[aria-hidden="true"] { display: none; }
#userRechargeModal .user-recharge-custom-editor[aria-hidden="false"] { display: inline-flex; }
#userRechargeModal .user-recharge-custom-btn.is-active .user-recharge-custom-label { display: none; }
#userRechargeModal .user-recharge-custom-amount-input { width: min(100%, 86px); min-width: 0; height: 27px; padding: 2px 4px; border: 1px solid var(--badge-line); border-radius: 4px; background: var(--control-fill); color: var(--ink); font: inherit; text-align: center; }
#userRechargeModal .user-recharge-spirit-note { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; margin-top: 10px; padding: 0 1px; color: var(--muted); font-size: var(--recharge-caption-size); font-weight: 400; line-height: 1.8; }
#userRechargeModal .user-recharge-spirit-note strong { font: inherit; color: var(--muted); }
#userRechargeModal .user-recharge-spirit-note span { min-width: 0; overflow-wrap: anywhere; }
#userRechargeModal .user-recharge-actions { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--control-fill); }
#userRechargeModal .user-recharge-order-panel { display: flex; align-items: center; flex: 1; min-width: 0; gap: 16px; padding: 0; border: 0; background: transparent; }
#userRechargeModal .user-recharge-order-panel[hidden] { display: none; }
#userRechargeModal .user-recharge-order-copy { flex: 1; min-width: 0; }
#userRechargeModal .user-recharge-order-copy > strong { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; color: var(--ink); font-size: var(--recharge-copy-size); font-weight: 400; line-height: 1.5; }
#userRechargeModal .user-recharge-order-product { min-width: 0; overflow-wrap: anywhere; }
#userRechargeModal :is(.user-recharge-order-points, .user-recharge-order-amount) { color: var(--accent-strong); font-size: var(--ui-surface-title-font); font-weight: 500; line-height: 1.4; font-variant-numeric: tabular-nums; }
#userRechargeModal .user-recharge-order-separator { color: var(--muted); }
#userRechargeModal .user-recharge-order-copy > span { display: block; margin-top: 4px; color: var(--muted); font-size: var(--recharge-caption-size); font-weight: 400; line-height: 1.7; overflow-wrap: anywhere; }
#userRechargeModal .user-recharge-order-status { flex: none; padding: 1px 7px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: transparent; font-size: var(--ui-surface-caption-font); font-weight: 400; line-height: 1.6; white-space: nowrap; }
#userRechargeModal .user-recharge-order-status.is-waiting { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); }
#userRechargeModal .user-recharge-order-status.is-success { color: var(--accent-strong); border-color: var(--badge-line); background: var(--accent-soft); }
#userRechargeModal .user-recharge-order-status.is-error { color: var(--danger); border-color: var(--danger-line); background: var(--danger-soft); }
#userRechargeModal .user-recharge-actions :is(.primary-btn, .secondary-btn) { flex: none; width: auto; height: 34px; min-height: 34px; padding: 0 17px; border: 1px solid var(--line); border-radius: 7px; background: var(--control-fill); color: var(--ink); font-size: var(--recharge-button-size); font-weight: 400; line-height: 1.5; white-space: nowrap; }
#userRechargeModal .user-recharge-actions .primary-btn { border-color: var(--primary-fill); background: var(--primary-fill); color: var(--primary-text); box-shadow: none; }
#userRechargeModal .user-recharge-actions .primary-btn:disabled { opacity: .58; }


@media (max-width:640px), (max-height:520px), (max-width:1024px) and (orientation:portrait), (max-width:1400px) and (max-height:1400px) {
#userRechargeModal { --ui-overlay-padding:calc(8 * var(--ui-device-unit)); }
#userRechargeModal .user-recharge-shell { height:auto; max-height:calc(var(--app-viewport-h) - 16 * var(--ui-device-unit)); }
#userRechargeModal .asset-library-modal-head { min-height:calc(34 * var(--ui-device-unit)); padding:calc(5 * var(--ui-device-unit)) calc(10 * var(--ui-device-unit)); gap:calc(6 * var(--ui-device-unit)); }
#userRechargeModal .asset-library-close { width:calc(24 * var(--ui-device-unit)); height:calc(24 * var(--ui-device-unit)); }
#userRechargeModal .user-recharge-body { padding:calc(10 * var(--ui-device-unit)); }
#userRechargeModal :is(.user-recharge-kicker,.user-recharge-spirit-title) { gap:calc(7 * var(--ui-device-unit)); margin-bottom:calc(7 * var(--ui-device-unit)); }
#userRechargeModal .user-recharge-spirit-title { margin-top:calc(12 * var(--ui-device-unit)); }
#userRechargeModal .user-recharge-tier-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:calc(7 * var(--ui-device-unit)); }
#userRechargeModal .user-recharge-tier { padding:calc(8 * var(--ui-device-unit)); }
#userRechargeModal .user-recharge-tier-head { grid-template-columns:calc(18 * var(--ui-device-unit)) minmax(0,1fr); gap:calc(3 * var(--ui-device-unit)) calc(5 * var(--ui-device-unit)); }
#userRechargeModal .user-recharge-tier-icon { width:calc(18 * var(--ui-device-unit)); height:calc(18 * var(--ui-device-unit)); }
#userRechargeModal .user-recharge-tier-icon svg { width:1.1em; height:1.1em; }
#userRechargeModal .user-recharge-tier-body { margin-top:calc(7 * var(--ui-device-unit)); padding-left:0; line-height:1.55; }
#userRechargeModal .user-recharge-tier-action { width:100%; min-height:var(--ui-surface-control-height); margin:auto 0 0; padding:calc(4 * var(--ui-device-unit)); }
#userRechargeModal .user-recharge-tier-body>div:nth-last-child(2) { margin-bottom:calc(8 * var(--ui-device-unit)); }
#userRechargeModal .is-current .user-recharge-tier-action { padding-right:calc(30 * var(--ui-device-unit)); }
#userRechargeModal .user-recharge-tier-current:not([hidden]) { right:calc(12 * var(--ui-device-unit)); bottom:calc(12 * var(--ui-device-unit)); line-height:calc(16 * var(--ui-device-unit)); padding:0 calc(3 * var(--ui-device-unit)); }
#userRechargeModal .user-recharge-notice { display:grid; grid-template-columns:calc(50 * var(--ui-device-unit)) minmax(0,1fr); gap:calc(2 * var(--ui-device-unit)) calc(7 * var(--ui-device-unit)); margin-top:calc(8 * var(--ui-device-unit)); padding:calc(7 * var(--ui-device-unit)); }
#userRechargeModal .user-recharge-notice-title { margin:0; }
#userRechargeModal .user-recharge-notice p+p { margin-top:0; }
#userRechargeModal .user-recharge-spirit-matrix { grid-template-rows:auto repeat(6,minmax(calc(28 * var(--ui-device-unit)),auto)); }
#userRechargeModal .user-recharge-rate-column>span { padding:calc(4 * var(--ui-device-unit)); }
#userRechargeModal :is(.user-recharge-amount-header,.user-recharge-rate-column h3) { padding:calc(5 * var(--ui-device-unit)) calc(4 * var(--ui-device-unit)); }
#userRechargeModal .user-recharge-amount-btn { display:flex; gap:calc(4 * var(--ui-device-unit)); margin:calc(2 * var(--ui-device-unit)) calc(3 * var(--ui-device-unit)); width:calc(100% - 6 * var(--ui-device-unit)); padding:calc(3 * var(--ui-device-unit)); line-height:1.5; }
#userRechargeModal .user-recharge-amount-btn strong { display:inline; }
#userRechargeModal .user-recharge-custom-btn { flex-direction:column; }
#userRechargeModal .user-recharge-spirit-note { display:grid; grid-template-columns:calc(50 * var(--ui-device-unit)) minmax(0,1fr); gap:calc(7 * var(--ui-device-unit)); margin-top:calc(7 * var(--ui-device-unit)); line-height:1.5; }
#userRechargeModal .user-recharge-spirit-note strong { margin:0; }
#userRechargeModal .user-recharge-actions { gap:calc(6 * var(--ui-device-unit)); padding:calc(7 * var(--ui-device-unit)) calc(10 * var(--ui-device-unit)); flex-wrap:nowrap; }
#userRechargeModal .user-recharge-order-panel { flex-basis:auto; gap:calc(6 * var(--ui-device-unit)); }
#userRechargeModal .user-recharge-actions :is(.primary-btn,.secondary-btn) { flex:none; height:var(--ui-surface-control-height); min-height:var(--ui-surface-control-height); padding:0 calc(8 * var(--ui-device-unit)); }
}