/* 真实账单与付款结果共用卡片；逻辑方向保证长译文与 RTL 能自然换行。 */
.finance-page { margin: 0; background: #f8f5f0; }
.finance-main { min-height: 100vh; padding: calc(var(--header-height) + 52px) 32px 80px; }
.finance-inner { max-width: 960px; margin-inline: auto; }
.finance-inner > h1 { margin: 0 0 12px; font-size: 2rem; line-height: 1.35; overflow-wrap: anywhere; }
.finance-intro { margin: 0 0 24px; color: var(--muted); line-height: 1.85; }
.finance-card { margin-block: 20px; padding: 26px; border: 1px solid #ece3d9; border-radius: 20px; background: var(--paper); box-shadow: 0 10px 32px rgba(64, 45, 25, .05); }
.finance-card h2 { margin: 0 0 18px; font-size: 1.125rem; line-height: 1.6; overflow-wrap: anywhere; }
.finance-card h3 { margin: 0; font-size: 1rem; line-height: 1.7; overflow-wrap: anywhere; }
.payment-state { margin: 0 0 18px; color: var(--fox-deep); font-weight: 650; line-height: 1.7; }
.finance-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 0; }
.finance-details[hidden] { display: none; }
.finance-details > div { min-width: 0; }
.finance-details dt { margin-bottom: 5px; color: var(--muted); font-size: .875rem; }
.finance-details dd { margin: 0; color: var(--ink); line-height: 1.65; overflow-wrap: anywhere; }
.benefit-details { display: grid; gap: 7px; margin-top: 20px; }
.benefit-details p { margin: 0; line-height: 1.8; color: var(--teal); }
.benefit-details .benefit-pending, .benefit-pending { color: var(--muted); line-height: 1.8; }
.balance-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #ece3d9; line-height: 1.8; }
.balance-summary span { color: var(--muted); }
.balance-number { margin: 0; font-size: 2rem; font-weight: 650; }
.finance-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 24px; }
.finance-actions[hidden] { display: none; }
.finance-actions .cancel-button { font-size: .875rem; }
#subscription-actions .buy-button { margin-top: 0; }
.payment-action { display: inline-block; width: auto; text-decoration: none; text-align: center; }
.billing-list-head, .billing-order-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; }
.billing-list-head { margin-bottom: 22px; }
.billing-list-head h2 { margin: 0; }
.billing-list-head label { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: .875rem; }
.billing-list-head select { max-width: 100%; padding: 9px 12px; border: 1px solid #e6e1db; border-radius: 9px; background: var(--paper); color: var(--ink); font: inherit; }
.billing-orders { display: grid; gap: 20px; }
.billing-order { min-width: 0; padding: 20px; border: 1px solid #ece3d9; border-radius: 14px; }
.billing-order-head { margin-bottom: 16px; }
.billing-order-head a { font-size: .875rem; }
#billing-more { margin-top: 20px; }
html[data-theme="dark"] .finance-card { background: var(--surface); border-color: var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
html[data-theme="dark"] .billing-order, html[data-theme="dark"] .balance-summary { border-color: var(--line); }
html[data-theme="dark"] .billing-list-head select { background: var(--card); border-color: var(--line); }
@media (max-width: 760px) { .finance-main { padding: calc(var(--header-height) + 36px) 20px 64px; } }
@media (max-width: 520px) {
  .finance-main { padding: calc(var(--header-height) + 28px) 16px 48px; }
  .finance-inner > h1 { font-size: 1.625rem; }
  .finance-card { padding: 20px 16px; border-radius: 16px; }
  .finance-details { grid-template-columns: 1fr; gap: 14px; }
  .billing-order { padding: 16px; }
  .billing-list-head label { align-items: start; flex-direction: column; width: 100%; }
  .billing-list-head select { width: 100%; }
}

/* 账单页的品牌装饰仅作用于 billing-page，不改变付款结果页及业务状态。 */
.billing-page {
  --billing-teal-soft: #e7f3ed;
  --billing-detail: #faf7f2;
  --billing-line: #ece3d9;
  --billing-balance-start: #f1f8f2;
  --billing-order-start: #fffaf4;
  background: radial-gradient(ellipse at 8% 14%, rgba(232, 93, 4, .035), transparent 38%), #f8f5f0;
}
.billing-heading { margin-bottom: 28px; }
.billing-heading h1 { margin: 0 0 12px; font-size: 2rem; line-height: 1.35; overflow-wrap: anywhere; }
.billing-heading .finance-intro { margin: 0; }
.billing-page .finance-card { position: relative; }
.billing-card-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.billing-card-heading h2 { min-width: 0; margin: 0; }
.billing-section-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--fox-soft); color: var(--fox-deep); }
.billing-section-icon.is-teal { background: var(--billing-teal-soft); color: var(--teal); }
.billing-section-icon svg { width: 23px; height: 23px; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.billing-page .billing-balance-card { overflow: hidden; border-color: #dbe8dc; background: linear-gradient(115deg, var(--billing-balance-start), var(--paper) 72%); }
/* 右上角青色圆形装饰（同小狸 home 页 AI 卡），取代原右侧时钟插画 */
.billing-balance-card::after { content: ""; position: absolute; inset-inline-end: -72px; inset-block-start: -80px; width: 170px; height: 170px; border-radius: 50%; background: #ccfbf1; opacity: .48; pointer-events: none; }
.billing-balance-copy { min-width: 0; position: relative; z-index: 1; }
.billing-balance-card .billing-card-heading { margin-bottom: 14px; }
.billing-balance-card .balance-number { width: fit-content; max-width: 100%; color: var(--teal); font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 750; line-height: 1.25; letter-spacing: -.025em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.billing-balance-card .benefit-pending { margin-bottom: 0; }
/* VIP 卡与个人中心共用视觉口径，状态和期限来自真实账号。 */
.billing-vip-card { overflow: hidden; }
.billing-vip-card::after { content: ""; position: absolute; inset-inline-end: -72px; inset-block-start: -80px; width: 170px; height: 170px; border-radius: 50%; background: #ffead2; pointer-events: none; }
.billing-vip-heading { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.billing-vip-heading h2 { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; color: var(--ink); font-size: 1.125rem; font-weight: 800; }
.billing-vip-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; box-sizing: border-box; border: 1px solid #dedbd5; border-radius: 12px; background: #f4f2ef; }
.billing-vip-heading h2.is-active .billing-vip-icon { border-color: #f4dda6; background: #fff5db; }
.billing-vip-heading svg { transform: translateY(-2px); flex-shrink: 0; width: 26px; height: 26px; color: #96928c; fill: #e4e1dc; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.billing-vip-heading h2.is-active { color: var(--ink); }
.billing-vip-heading h2.is-active svg { color: #bb8418; fill: #ffe29a; }
html[data-theme="dark"] .billing-vip-icon { border-color: #5b5750; background: #302e2a; }
html[data-theme="dark"] .billing-vip-heading h2.is-active .billing-vip-icon { border-color: #6e5425; background: #3d301b; }
html[data-theme="dark"] .billing-vip-heading svg { color: #a6a29c; fill: #514e49; }
html[data-theme="dark"] .billing-vip-heading h2.is-active svg { color: #f4c35b; fill: #78571c; }
.billing-vip-badge { flex-shrink: 0; max-width: 45%; padding: 5px 10px; border: 1px solid var(--billing-line); border-radius: 999px; color: var(--muted); background: var(--paper); font-size: .75rem; overflow-wrap: anywhere; }
.billing-vip-badge.is-active { color: var(--fox-deep); border-color: #ffd4ad; background: var(--fox-soft); }
.billing-vip-value { position: relative; margin: 0 0 9px; font-size: 2rem; font-weight: 750; line-height: 1.4; overflow-wrap: anywhere; }
.billing-vip-value small { font-size: .875rem; font-weight: 500; color: var(--muted); }
.billing-vip-foot, .billing-subscription-message { position: relative; margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.8; overflow-wrap: anywhere; }
.billing-subscription-card { overflow: hidden; }
.billing-subscription-card::before { content: ""; position: absolute; inset-inline-start: 26px; inset-block-start: 0; width: 72px; height: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--fox), #ffbd7a); }
/* 右上角蜜桃色圆形装饰（同小狸 home 页 VIP 卡），长标题压在圆上仍可读 */
.billing-subscription-card::after { content: ""; position: absolute; inset-inline-end: -72px; inset-block-start: -80px; width: 170px; height: 170px; border-radius: 50%; background: #fed7aa; opacity: .48; pointer-events: none; }
.billing-subscription-card > * { position: relative; z-index: 1; }
.billing-subscription-card .payment-state { width: fit-content; max-width: 100%; padding: 5px 12px; border-radius: 8px; background: var(--fox-soft); font-size: .875rem; overflow-wrap: anywhere; }
.billing-subscription-card .is-subscribed .payment-state { margin-bottom: 0; }
.billing-subscription-card .finance-details { gap: 12px; }
.billing-subscription-card .finance-details > div { padding: 12px 14px; border: 1px solid var(--billing-line); border-radius: 12px; background: var(--billing-detail); }
.billing-page .billing-list-head { align-items: center; }
.billing-list-head .billing-card-heading { margin: 0; }
.billing-empty-state { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 26px 18px; border: 1px dashed var(--billing-line); border-radius: 14px; background: var(--billing-detail); color: var(--muted); }
.billing-empty-state[hidden] { display: none; }
.billing-empty-icon { display: grid; place-items: center; flex-shrink: 0; width: 60px; height: 60px; border-radius: 18px; background: var(--fox-soft); color: var(--fox-deep); }
.billing-empty-icon svg { width: 44px; height: 44px; }
.billing-empty-state p { margin: 0; line-height: 1.7; overflow-wrap: anywhere; }
.billing-page .billing-order { background: linear-gradient(120deg, var(--billing-order-start), var(--paper) 75%); }
.billing-page .billing-order h3 { padding-inline-start: 10px; border-inline-start: 3px solid var(--fox); }
.billing-page .billing-order-head .payment-link { max-width: 100%; padding: 4px 10px; border-radius: 8px; background: var(--fox-soft); overflow-wrap: anywhere; }
/* 付款超时状态使用灰色，保留原有详情链接与键盘交互。 */
.payment-state.is-expired, .billing-page .billing-order-head .payment-link.is-expired { color: #6b7280; }
.billing-page .billing-order-head .payment-link.is-expired { background: #f3f4f6; }
html[data-theme="dark"] .payment-state.is-expired, html[data-theme="dark"] .billing-page .billing-order-head .payment-link.is-expired { color: #9ca3af; }
html[data-theme="dark"] .billing-page .billing-order-head .payment-link.is-expired { background: #374151; }
.billing-page .billing-order .finance-details { padding-top: 16px; border-top: 1px dashed var(--billing-line); }
html[data-theme="dark"] .billing-page {
  --billing-teal-soft: rgba(45, 212, 191, .1);
  --billing-detail: var(--card);
  --billing-line: var(--line);
  --billing-balance-start: #24332c;
  --billing-order-start: #302820;
}
html[data-theme="dark"] .billing-page .billing-balance-card { border-color: #365044; background: linear-gradient(115deg, var(--billing-balance-start), var(--surface) 75%); }
html[data-theme="dark"] .billing-balance-card::after { background: rgba(45, 212, 191, .16); }
html[data-theme="dark"] .billing-page .billing-order { background: linear-gradient(120deg, var(--billing-order-start), var(--surface) 75%); }
html[data-theme="dark"] .billing-subscription-card::after { background: rgba(232, 93, 4, .28); }
html[data-theme="dark"] .billing-vip-card::after { background: rgba(232, 93, 4, .2); }
html[data-theme="dark"] .billing-vip-badge { background: var(--surface); }
@media (max-width: 640px) {
  .billing-heading h1 { font-size: 1.625rem; }
  .billing-card-heading { gap: 10px; }
  .billing-subscription-card::before { inset-inline-start: 16px; }
}