/* Checkout composition; basic controls remain owned by shared/design.ts. */
.payment-page { --quiet: #527386; --shell: calc(100% - clamp(32px,5.2vw,160px)); overflow-x: clip; min-height: 100svh; display: flex; flex-direction: column; }
.payment-page > .site-footer { margin-top: auto; flex-shrink: 0; }
.payment-page [hidden] { display: none !important; }
.payment-page .site-header__inner { display: grid; grid-template-columns: auto 1fr auto; }
.payment-header-label { justify-self: center; color: var(--quiet); font-size: 13px; }
.payment-main { padding-top: 28px; padding-bottom: 38px; flex: 1 0 auto; }
.payment-back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--quiet); font-size: 13px; text-decoration: none; }
.payment-back:hover { color: var(--ink); }
.payment-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 14px 0 30px; }
.payment-heading h1 { margin: 0 0 9px; font-size: clamp(30px,3vw,39px); line-height: 1.35; letter-spacing: -.05em; }
.payment-heading p { margin: 0; color: var(--muted); font-size: 14px; }
.payment-layout { display: grid; grid-template-columns: minmax(0,1fr) clamp(390px,27vw,560px); align-items: start; gap: clamp(24px,3vw,64px); }
.payment-visual { position: sticky; top: 106px; min-width: 0; --art-height: clamp(780px,calc(100svh - 340px),1320px); }
.payment-artwork { position: relative; isolation: isolate; overflow: hidden; min-height: var(--art-height); border-radius: 32px; border: 1px solid rgba(43,111,143,.16); background: #e4eef8; }
.payment-art-layer { position: relative; min-height: var(--art-height); overflow: hidden; background: #e4eef8; color: var(--ink); }
.payment-art-layer--outgoing { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.payment-scene { position: absolute; inset: 0; overflow: hidden; }
.payment-art-copy { position: relative; z-index: 1; min-height: var(--art-height); display: flex; flex-direction: column; padding: clamp(32px,3.6vw,82px); pointer-events: none; }
.payment-art-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.payment-art-copy h2 { margin: 0; font-size: clamp(28px,2.2vw,46px); line-height: 1.2; letter-spacing: -.045em; }
.payment-art-model { margin: 0; font-family: var(--st-serif); font-size: 17px; line-height: 1.5; }
.payment-art-story { margin: auto 0; padding: 90px 0; max-width: 680px; }
.payment-art-title { margin: 0 0 24px; font-size: clamp(38px,4.5vw,94px); font-weight: 650; letter-spacing: -.065em; line-height: 1.25; }
.payment-art-description { max-width: 28em; margin: 0; font-size: clamp(14px,1.15vw,20px); line-height: 1.9; }
.payment-art-bottom { margin-top: auto; display: grid; grid-template-columns: minmax(190px,.9fr) minmax(0,1fr); gap: 28px; align-items: end; padding-top: 24px; border-top: 1px solid rgba(23,58,85,.22); }
.payment-art-credit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 6px; font-size: 16px; }
.payment-art-credit strong { font-size: clamp(48px,3.2vw,76px); line-height: 1.2; font-weight: 450; }
.payment-art-tier { margin: 0; font-size: 13px; }
.payment-art-benefits { display: grid; gap: 22px; }
.payment-art-benefits h3 { margin: 0 0 5px; font-size: 16px; font-weight: 600; }
.payment-art-benefits p { margin: 0; max-width: 30em; font-size: 12px; line-height: 1.8; }
.payment-art-caption { display: none; }
.payment-art-mark { position: absolute; z-index: 1; pointer-events: none; }
.payment-art-layer[data-family="deepseek"] .payment-art-mark { width: min(36%,310px); height: auto; inset-inline-end: 7%; top: 46%; transform: translateY(-50%); }
.payment-art-layer[data-family="haiku"] { background: #bcd1ca; color: #254d46; }
.payment-art-layer[data-family="haiku"] .payment-art-mark { width: min(35%,340px); height: auto; inset-inline-end: 8%; top: 46%; transform: translateY(-50%); }
.payment-art-layer[data-family="terra"] { background: #f5f9fb; }
.payment-art-layer[data-family="terra"] .payment-scene { --terra-center-x: .73; --terra-center-y: 365px; --terra-radius: 176px; --terra-background: #f5f9fb; }
.payment-art-layer[data-family="fable"] { color: #fff; background: #739acc url('./art/fable/day-sky.webp') center / cover; }
/* 文字那一侧压深一点才读得清;RTL 下文字换边,渐变跟着掉头 */
[dir="rtl"] .payment-art-copy { --st-scrim: 270deg; }
.payment-art-layer[data-family="fable"] .payment-art-copy { text-shadow: 0 2px 14px rgba(5,24,46,.4); background: linear-gradient(var(--st-scrim, 90deg),rgba(4,21,45,.32),transparent 75%),linear-gradient(0deg,rgba(3,17,37,.82),rgba(8,30,58,.18) 35%,transparent 65%,rgba(5,20,42,.28)); }
.payment-art-layer[data-family="fable"] .payment-art-bottom { border-color: rgba(255,255,255,.4); }
.payment-order { position: relative; isolation: isolate; overflow: hidden; min-width: 0; padding: 32px; border: 1px solid rgba(43,111,143,.17); border-radius: 28px; background: rgba(255,255,255,.94); }
.payment-order-scene,.payment-order-stars { position: absolute; inset: 0; pointer-events: none; }
.payment-order-content { position: relative; z-index: 1; }
.payment-order[data-family="astra"] {
  --ink: #f9fbff;
  --muted: #c1d0dd;
  --quiet: #b1c4d6;
  --line: rgba(201,226,249,.22);
  --st-control-field-bg: #0b1724;
  --st-control-field-bg-hover: #122436;
  --st-control-field-fg: #e5f1fc;
  --st-control-field-border: rgba(168,204,236,.3);
  --st-control-field-border-strong: rgba(185,220,250,.52);
  --st-control-field-shadow: inset 0 1px 0 rgba(219,237,255,.06), 0 2px 8px rgba(0,0,0,.2);
  --st-control-field-focus-bg: #122436;
  --st-control-field-focus-border: #8fbade;
  --st-control-field-focus-shadow: 0 0 0 3px rgba(124,177,220,.2);
  --st-control-picker-bg: #0b1724;
  --st-control-picker-border: rgba(168,204,236,.3);
  --st-control-picker-shadow: 0 18px 46px rgba(0,0,0,.48), inset 0 1px 0 rgba(219,237,255,.08);
  --st-control-picker-icon: #bedcf5;
  --st-control-option-bg: #0b1724;
  --st-control-option-hover-bg: #172d42;
  --st-control-option-selected-bg: #294760;
  --st-control-option-selected-fg: #f1f7fc;
  --st-control-primary-bg: #f1f7fc;
  --st-control-primary-fg: #102b40;
  --st-control-primary-border: #fff;
  color: var(--ink);
  background: #000;
  border-color: #000;
}
.payment-order[data-family="astra"] .payment-order-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,.46) 30%,rgba(0,0,0,.46) 70%,rgba(0,0,0,.2)); }
.payment-order[data-family="astra"] .payment-capacity { background: rgba(6,17,30,.84); box-shadow: inset 0 0 0 1px rgba(186,213,236,.16); }
.payment-order[data-family="astra"] .payment-model-details summary,.payment-order[data-family="astra"] .payment-trial-link a { color: #d5eafb; }
.payment-order-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 23px; }
.payment-order-heading h2 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.035em; }
.payment-order-heading > span { font-size: 12px; color: var(--quiet); }
.payment-plan-field { display: grid; grid-template-columns: minmax(0,1fr) minmax(130px,1fr); align-items: center; gap: 16px; margin-bottom: 12px; }
.payment-plan-field label { font-size: 13px; color: var(--muted); }
.payment-plan-field select { width: 100%; min-width: 0; min-height: 44px; }
.payment-lines { margin: 0; }
.payment-lines > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 10px 0; }
.payment-lines dt { color: var(--muted); font-size: 13px; flex-shrink: 0; }
.payment-lines dd { margin: 0; text-align: end; font-size: 13px; }
.payment-lines dd strong { font-size: 20px; font-weight: 500; }
.payment-model-details { margin-top: 9px; border-top: 1px solid var(--line); }
.payment-model-details summary { display: list-item; cursor: pointer; padding: 14px 0; font-size: 12px; color: #246e94; }
.payment-model-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px 17px; padding: 2px 0 18px; }
.payment-model-list section { min-width: 0; }
.payment-model-list h4 { margin: 0 0 5px; color: var(--quiet); font-size: 11px; font-weight: 500; }
.payment-model-list p { margin: 3px 0; font-size: 12px; }
.payment-capacity { padding: 14px 17px; border-radius: 12px; background: #edf5f8; }
.payment-capacity > p { margin: 0 0 8px; color: var(--quiet); font-size: 11px; }
.payment-capacity > div { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 10px; }
.payment-capacity > div p { margin: 0; font-size: 12px; white-space: nowrap; }
.payment-capacity > div p:last-child { text-align: end; }
.payment-capacity > div p > span { display: block; margin-bottom: 3px; color: var(--quiet); font-size: 11px; }
.payment-capacity > div > span { font-size: 11px; color: var(--quiet); }
.payment-capacity strong { font-size: 26px; font-weight: 450; }
.payment-capacity small { display: block; margin-top: 8px; font-size: 10px; color: var(--quiet); line-height: 1.7; }
.payment-total { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: 24px 0; padding-bottom: 23px; border-bottom: 1px solid var(--line); }
.payment-total > div > span { font-size: 13px; }
.payment-total small { display: block; margin-top: 4px; max-width: 190px; font-size: 10px; color: var(--quiet); }
.payment-total > p { display: flex; gap: 3px; align-items: baseline; margin: 0; white-space: nowrap; }
.payment-total strong { font-size: 42px; line-height: 1.2; font-weight: 450; }
.payment-total .payment-price-pending { font-size: 22px; font-weight: 600; }
.payment-total .payment-price-unit { color: var(--quiet); font-size: 12px; margin-inline-start: 4px; }
.payment-method h3 { margin: 0 0 15px; font-size: 14px; font-weight: 650; }
.payment-unavailable { display: flex; align-items: center; gap: 13px; margin-bottom: 19px; color: var(--quiet); }
.payment-unavailable svg { flex-shrink: 0; }
.payment-unavailable strong { font-size: 13px; color: var(--ink); font-weight: 500; }
.payment-unavailable p { margin: 5px 0 0; font-size: 12px; line-height: 1.7; }
.payment-unavailable a { display: inline-block; margin-top: 6px; color: #246e94; font-size: 12px; text-underline-offset: 4px; }
.payment-order[data-family="astra"] .payment-unavailable a { color: #d5eafb; }
.payment-sandbox { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: #fff6d9; color: #6f520f; font-size: 12px; line-height: 1.6; }
.payment-method button { width: 100%; min-height: 58px; }
.payment-topups { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.payment-topups h3 { margin: 0 0 6px; font-size: 14px; font-weight: 650; }
.payment-topups p { margin: 0 0 14px; color: var(--quiet); font-size: 12px; line-height: 1.7; }
.payment-topup-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(96px,1fr)); gap: 10px; }
.payment-topup-list button { min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.payment-topup-list strong { font-size: 16px; font-weight: 600; }
.payment-topup-list span { font-size: 12px; }
.payment-page[data-view="result"] .payment-main { width: min(760px, calc(100% - 32px)); padding-block: clamp(40px,8vh,88px) 64px; }
.payment-page[data-view="result"] .site-header__inner { width: min(1080px, calc(100% - 32px)); }
.payment-page[data-view="result"] :is(.payment-heading,.payment-back,.payment-bottom-note,.payment-footer > p:not(.legal-region),.payment-footer > a) { display: none; }
.payment-page[data-view="result"] .payment-footer { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; }
.payment-page[data-view="result"] .legal-region { width: 100%; margin: 0; }
.payment-result { --result-color: var(--accent); --result-tint: #e7f3fa; border: 1px solid var(--line); border-radius: 24px; background: var(--surface-raised); box-shadow: 0 20px 70px rgba(40,87,111,.09); overflow: hidden; }
.payment-result[data-state="success"] { --result-color: #237667; --result-tint: #eaf5ef; }
.payment-result[data-state="attention"] { --result-color: #976025; --result-tint: #fbf1e2; }
.payment-result[data-state="closed"],.payment-result[data-state="refunded"] { --result-color: var(--muted); --result-tint: #edf2f5; }
.payment-result-intro { padding: 32px 40px 36px; }
.payment-result-topline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-bottom: 30px; font-size: 12px; color: var(--quiet); }
.payment-result-topline .payment-sandbox { margin: 0; }
.payment-result-status { display: grid; grid-template-columns: minmax(0,1fr); justify-items: center; gap: 22px; text-align: center; }
.payment-result-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--result-tint); color: var(--result-color); }
.payment-result-icon svg { width: 34px; height: 34px; }
[data-result-icon] { display: none; }
.payment-result[data-state="pending"] [data-result-icon="pending"],.payment-result[data-state="success"] [data-result-icon="success"],.payment-result[data-state="attention"] [data-result-icon="attention"],.payment-result[data-state="closed"] [data-result-icon="closed"],.payment-result[data-state="refunded"] [data-result-icon="refunded"] { display: initial; }
.payment-result[data-state="pending"] .payment-result-icon svg { animation: payment-result-spin 1.4s linear infinite; }
@keyframes payment-result-spin { to { transform: rotate(360deg); } }
.payment-result-status h1 { margin: 0 0 12px; font-size: clamp(25px,3vw,34px); font-weight: 650; line-height: 1.35; letter-spacing: -.035em; text-wrap: balance; }
.payment-result-status p { margin: 0 auto; color: var(--muted); font-size: 14px; line-height: 1.85; max-width: 42em; }
.payment-receipt { margin-inline: 40px; padding: 24px; background: #f3f8fb; border: 1px solid var(--line); border-radius: 12px; }
.payment-receipt-summary { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.payment-receipt-label,.payment-receipt-details dt { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.payment-receipt-summary h2 { margin: 0; font-size: 23px; line-height: 1.45; font-weight: 600; }
.payment-receipt-amount { text-align: end; }
.payment-receipt-amount strong { display: block; font-size: 28px; line-height: 1.25; font-weight: 500; white-space: nowrap; }
.payment-receipt-details { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; padding-top: 20px; margin: 20px 0 0; border-top: 1px solid var(--line); }
.payment-receipt-details:not(:has(> div:not([hidden]))) { display: none; }
.payment-receipt-details dd { margin: 0; font-size: 13px; }
.payment-result-bottom { padding: 28px 40px 20px; }
.payment-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; align-items: center; }
.payment-result-actions > * { min-height: 44px; }
.payment-result-action-message { margin: 14px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.payment-result-reference { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--quiet); font-size: 11px; }
.payment-result-reference > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; min-width: 0; }
.payment-result-reference bdi { font: 11px/1.5 ui-monospace,monospace; overflow-wrap: anywhere; }
.payment-result-reference button { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; }
.payment-result-reference > a { display: inline-flex; align-items: center; min-height: 36px; text-underline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .payment-result[data-state="pending"] .payment-result-icon svg { animation: none; } }
@media (max-width: 540px) {
  .payment-result-intro { padding: 24px; }
  .payment-result-topline { margin-bottom: 24px; }
  .payment-result-status { grid-template-columns: 1fr; gap: 18px; }
  .payment-receipt { margin-inline: 24px; padding: 18px; }
  .payment-receipt-summary { gap: 16px; flex-wrap: wrap; }
  .payment-receipt-summary h2 { font-size: 20px; }
  .payment-receipt-amount strong { font-size: 25px; }
  .payment-receipt-details { grid-template-columns: 1fr; gap: 14px; }
  .payment-result-bottom { padding: 24px; }
  .payment-result-actions { display: grid; grid-template-columns: 1fr; }
  .payment-result-actions > * { width: 100%; }
  .payment-page[data-view="result"] .payment-footer > div { flex-wrap: wrap; justify-content: center; gap: 10px 18px; }
}
.payment-error { margin: 14px 0 0; padding: 12px 14px; background: #fff0ea; border-radius: 8px; color: #883d27; font-size: 12px; line-height: 1.7; text-align: center; /* 夹在居中的按钮和「先免费体验」之间 */ }
.payment-trial-link { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; font-size: 12px; }
.payment-trial-link a { color: #246e94; text-underline-offset: 4px; }
.payment-trial-link span { color: var(--quiet); }
.payment-bottom-note { margin: 29px 0 0; color: var(--quiet); font-size: 12px; text-align: center; line-height: 1.8; }
.payment-message,.payment-fallback { padding: 22px 25px; margin: 20px 0; border: 1px solid var(--line); border-radius: 16px; background: #fff; font-size: 14px; line-height: 1.8; }
.payment-fallback h2 { margin: 0 0 12px; font-size: 22px; }
.payment-fallback p { color: var(--quiet); }
.payment-message a { color: #246e94; }
.payment-footer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; padding-block: 27px 30px; }
.payment-footer > a,.payment-footer > div a { color: var(--quiet); font-size: 12px; text-decoration: none; }
.payment-footer > div { display: flex; gap: 22px; }
.payment-footer > p { grid-column: 1 / -1; }
.payment-footer > p a { color: inherit; text-underline-offset: 3px; }
.payment-page :is(a,summary):focus-visible { outline: 3px solid #287da8; outline-offset: 4px; }
.payment-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1000px) {
  .payment-layout { grid-template-columns: minmax(0,1fr) 370px; gap: 24px; }
  .payment-order { padding: 26px 23px; }
  .payment-art-copy { padding: 28px; }
  .payment-art-heading { gap: 12px; }
  .payment-art-story { padding: 190px 0 44px; }
  .payment-art-title { font-size: 38px; }
  .payment-art-bottom { grid-template-columns: 1fr; gap: 24px; }
  .payment-art-benefits { gap: 16px; }
  .payment-art-layer[data-family="terra"] .payment-scene { --terra-center-x: .6; --terra-center-y: 216px; --terra-radius: 92px; }
  .payment-art-layer:is([data-family="deepseek"],[data-family="haiku"]) .payment-art-mark { top: 205px; inset-inline-end: 12%; width: 150px; }
}
@media (max-width: 760px) {
  .payment-header-label { display: none; }
  .payment-page .site-header__inner { display: flex; justify-content: space-between; }
  .payment-layout { grid-template-columns: 1fr; gap: 26px; }
  .payment-visual { position: relative; top: auto; --art-height: 670px; }
  .payment-art-copy { padding: 28px; }
  .payment-art-copy h2 { font-size: 36px; }
  .payment-art-heading { display: block; }
  .payment-art-model { margin-top: 10px; }
  .payment-art-story { padding: 155px 0 36px; }
  .payment-art-layer[data-family="fable"] .payment-art-story { padding-top: 90px; }
  .payment-art-layer[data-family="terra"] .payment-scene { --terra-center-x: .7; --terra-center-y: 210px; --terra-radius: 93px; }
  .payment-art-layer[data-family="haiku"] .payment-art-mark { width: 135px; top: 205px; }
  .payment-art-layer[data-family="deepseek"] .payment-art-mark { width: 195px; top: 200px; }
  .payment-art-credit strong { font-size: 43px; }
  .payment-art-model { font-size: 16px; }
  .payment-art-benefits { grid-template-columns: 1fr 1fr; gap: 20px; }
  .payment-art-benefits h3 { font-size: 14px; }
  .payment-art-benefits p { font-size: 11px; }
  .payment-order { padding: 25px; }
  .payment-main { padding-top: 12px; }
  .payment-heading { align-items: flex-start; margin-top: 8px; margin-bottom: 25px; }
  .payment-heading h1 { font-size: 31px; }
  .payment-heading p { max-width: 220px; font-size: 12px; line-height: 1.8; }
  .payment-bottom-note { text-align: start; }
}
@media (max-width: 380px) {
  .payment-page .brand__copy strong { font-size: 13px; }
  .payment-page .site-header__actions { gap: 0; }
  .payment-page .site-header__actions button { padding-inline: 9px; }
  .payment-order { padding: 23px 19px; }
  .payment-art-copy { padding: 25px; }
  .payment-art-model { font-size: 14px; }
  .payment-capacity { padding: 13px; }
  .payment-capacity > div { gap: 4px 8px; }
  .payment-capacity strong { font-size: 23px; }
  .payment-lines > div { gap: 13px; }
  .payment-lines dd { font-size: 12px; }
  .payment-total strong { font-size: 36px; }
  .payment-total .payment-price-pending { font-size: 20px; }
}