/* 弹窗在 page-recharge 外，按当前页面和确切标识限定，避免改变其他控制台页面。
   复用糖豆插画与暖金色；二维码始终保留白底，深色主题也不反相。 */
body:has(#page-recharge.active) :is(#modal-usage-analysis,#modal-contact,#modal-account-support,#modal-wxpay,#modal-next-outfit,#modal-first-outfit,#modal-exclusive-service) {
  --rd-ink:#3d2717; --rd-muted:#785c46; --rd-accent:#94511a;
  --rd-surface:#fffcf7; --rd-soft:#fff3e2; --rd-line:#edddc8;
  --text-primary:var(--rd-ink); --text-secondary:var(--rd-muted); --text-tertiary:var(--rd-muted);
  --bg-card:var(--rd-surface); --bg-subtle:var(--rd-soft);
  --border-medium:var(--rd-line); --border-light:var(--rd-line);
  background:rgba(51,38,26,.38); backdrop-filter:blur(4px); padding:24px;
  visibility:hidden; transition:opacity .18s ease,visibility .18s;
  &.open { visibility:visible; }
  & .modal {
    max-width:100%; max-height:calc(100dvh - 48px); overflow-y:auto;
    padding:32px; border:0; border-radius:16px;
    background:var(--rd-surface); color:var(--rd-ink);
    box-shadow:0 24px 70px -20px rgba(48,28,10,.3);
    transform:translateY(8px); transition:transform .2s cubic-bezier(.22,1,.36,1);
    overscroll-behavior:contain;
  }
  &.open .modal { transform:none; }
  & .modal:focus { outline:none; }
  & .modal-title { color:var(--rd-ink); font-size:23px; font-weight:700; line-height:1.4; letter-spacing:0; padding-right:36px; margin-bottom:8px; }
  & .modal-desc { color:var(--rd-muted); font-size:13px; line-height:1.8; margin:0 0 24px; max-width:65ch; text-wrap:pretty; }
  & .modal-close { top:20px; right:20px; width:36px; height:36px; background:var(--rd-soft); color:var(--rd-muted); font-size:14px; }
  & .modal-close:hover { background:var(--rd-line); color:var(--rd-ink); }
  & :is(button,a):focus-visible { outline:3px solid var(--rd-accent); outline-offset:3px; }
  & .btn { min-height:42px; padding:10px 22px; border:0; border-radius:999px; font:600 13px/1.4 var(--font); box-shadow:none; }
  & .btn-primary { background:#f4cc7a; color:#51300e; }
  & .btn-primary:hover { background:#eabe65; }
  & .btn-secondary { background:var(--rd-soft); color:var(--rd-accent); }
  & .btn-secondary:hover { background:var(--rd-line); }
  & .modal-footer { margin-top:24px; }

  /* 用量明细：固定标题与可滚动正文，数字同色，不再层层套小卡片。 */
  & .usage-analysis-modal { width:940px; padding:0; overflow:hidden; }
  & .usage-analysis-head { padding:26px 30px 20px; gap:20px; background:var(--rd-surface); border-bottom:1px solid var(--rd-line); }
  & .usage-analysis-head>div { min-width:0; }
  & .usage-analysis-head .modal-title { padding:0; display:flex; align-items:center; gap:10px; }
  & .usage-analysis-head .modal-title::before { content:""; flex:none; width:30px; height:32px; background:url('/static/img/recharge/jellybean/jellybean.png') center/contain no-repeat; }
  & .usage-analysis-head .modal-desc { margin:0; font-size:12px; }
  & .usage-analysis-head>.btn { flex:none; margin-top:3px; }
  & .usage-analysis-body { margin:0; padding:24px 30px 28px; scrollbar-gutter:stable; }
  & .analysis-hero { padding:0; border:0; border-radius:0; background:none; }
  & .analysis-hero-title { font-size:17px; font-weight:700; letter-spacing:0; }
  & .analysis-hero-copy { margin-top:6px; color:var(--rd-muted); font-size:12px; }
  & .analysis-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:18px; padding:6px 20px; border-radius:12px; background:var(--rd-soft); }
  & .analysis-kpi { min-width:0; padding:15px 12px; border:0; border-radius:0; background:none; }
  & .analysis-kpi:nth-child(n+4) { border-top:1px solid var(--rd-line); }
  & .analysis-kpi-label { color:var(--rd-muted); font-size:12px; }
  & .analysis-kpi-value { color:var(--rd-ink); font-size:20px; line-height:1.4; font-weight:700; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
  & .analysis-actual-summary { margin:18px 0 24px; padding:0; border:0; background:none; color:var(--rd-muted); font-size:13px; line-height:1.9; }
  & .analysis-section { margin-top:24px; }
  & .analysis-section-head { margin-bottom:14px; align-items:baseline; flex-wrap:wrap; gap:4px 12px; }
  & .analysis-section-title { font-size:15px; font-weight:700; }
  & .analysis-section-note { color:var(--rd-muted); font-size:11px; line-height:1.6; }
  & .analysis-insights { gap:10px; }
  & .analysis-insight { display:flex; align-items:baseline; gap:10px; padding:0; border:0; background:none; color:var(--rd-muted); font-size:13px; line-height:1.75; }
  & .analysis-insight::before { content:""; width:5px; height:5px; flex:none; border-radius:50%; background:var(--rd-accent); }
  & .analysis-model-list { gap:0; }
  & .analysis-model-row { grid-template-columns:minmax(160px,1fr) 120px minmax(130px,1fr); padding:14px 0; border:0; border-bottom:1px solid var(--rd-line); border-radius:0; gap:24px; }
  & .analysis-model-row:last-child { border-bottom:0; }
  & .analysis-model-name { color:var(--rd-ink); font:600 13px/1.6 var(--font); }
  & .analysis-model-cost { color:var(--rd-accent); font-size:13px; font-variant-numeric:tabular-nums; }
  & .analysis-share-track { height:6px; background:var(--rd-soft); }
  & .analysis-share-bar { background:#dba04b; }
  & .analysis-method { margin-top:22px; padding-top:18px; border-top:1px solid var(--rd-line); color:var(--rd-muted); font-size:11px; line-height:1.8; }
  & :is(.analysis-loading,.analysis-empty) { padding:48px 20px; border:0; background:var(--rd-soft); color:var(--rd-muted); font-size:13px; border-radius:12px; }

  /* 两种客服入口保留各自联系方式，二维码不受暖色背景影响。 */
  & .rc-contact-dialog { width:600px!important; }
  /* 客服标题保留一颗糖豆与文字同行，付款标题只展示文字。 */
  & .rc-contact-dialog .modal-title { display:flex; align-items:center; gap:10px; }
  & .rc-contact-dialog .modal-title::before { content:""; flex:none; width:28px; height:30px; background:url('/static/img/recharge/jellybean/jellybean.png') center/contain no-repeat; }
  & .rc-contact-channels { gap:20px!important; margin-bottom:22px!important; }
  & .rc-contact-channel { min-width:0; padding:18px 10px!important; background:var(--rd-soft)!important; border-radius:12px!important; }
  & .rc-contact-channel>div { color:var(--rd-muted)!important; min-height:40px; margin-bottom:10px!important; font-size:12px!important; line-height:1.65; }
  & .rc-contact-channel img { display:block; width:156px!important; height:156px!important; max-width:100%; object-fit:contain; margin:auto; padding:6px; border:0!important; background:white; border-radius:8px; }
  & .rc-contact-email { padding:16px 0!important; border-top:1px solid var(--rd-line); border-radius:0!important; background:none!important; flex-wrap:wrap; }
  & .rc-contact-email a { text-decoration:underline; text-underline-offset:4px; color:var(--rd-accent)!important; overflow-wrap:anywhere; }
  & .rc-contact-hours { text-align:left!important; font-size:11px!important; line-height:1.8!important; }
  & .account-support-dialog { width:420px; }
  & .account-support-dialog .modal-title { padding:0 24px; }
  & .account-support-qr { width:min(236px,100%); border:0; padding:10px; border-radius:12px; }
  & .account-support-email { color:var(--rd-accent); font-size:13px; }
  & .account-support-scan { color:var(--rd-ink); }
  & .es-qr { width:220px; max-width:100%; height:auto; padding:10px; border:0; border-radius:12px; background:#fff; margin:24px auto 16px; }
  & .es-hint { color:var(--rd-muted); font-size:13px; }

  /* 付款状态沿用既有节点，样式不参与下单和轮询。 */
  & .rc-payment-dialog { width:440px!important; }
  & #wxpay-modal-title { text-align:center; padding:0 28px; margin:10px 0 12px; font-size:22px!important; }
  & #wxpay-pts-info { color:var(--rd-muted)!important; font-size:13px!important; line-height:1.8; margin:0 0 22px!important; }
  & #wxpay-pts-info strong { color:var(--rd-accent)!important; font-size:17px; }
  & #wxpay-pts-info>span { display:block; font-size:12px; }
  & #wxpay-qr-wrap>div { padding:12px!important; border:0!important; border-radius:12px!important; box-shadow:0 0 0 8px var(--rd-soft); }
  & #wxpay-qr-wrap { margin:8px 0 24px!important; }
  & #wxpay-amount-info { color:var(--rd-ink)!important; font-size:32px!important; font-variant-numeric:tabular-nums; }
  & #wxpay-status-msg { color:var(--rd-muted)!important; line-height:1.7; }
  & #wxpay-success-msg { color:#206c46!important; background:#e6f4e9!important; line-height:1.8; }
  & #wxpay-qr-ttl { color:var(--rd-muted)!important; line-height:1.7; }

  /* 外观保持完整人物与独立正文，手机在下面改为纵向阅读。 */
  & .next-outfit-modal { width:800px; padding:0; overflow:hidden; grid-template-columns:minmax(260px,44%) minmax(0,1fr); }
  & .next-outfit-modal>img { object-fit:contain; object-position:center; max-height:calc(100dvh - 48px); background:var(--rd-soft); }
  & .next-outfit-body { padding:44px 30px 30px; max-height:calc(100dvh - 48px); }
  & .recharge-next-badge { padding:6px 12px; border:0; border-radius:999px; background:var(--rd-soft); color:var(--rd-accent); font-size:12px; }
  & .next-outfit-name { color:var(--rd-ink); font-size:25px; margin:20px 0 16px; line-height:1.45; }
  & .next-outfit-story { color:var(--rd-muted); font-size:14px; line-height:1.9; }
  & .next-outfit-note { color:var(--rd-muted); font-size:12px; line-height:1.8; margin-top:24px; }
  & .next-outfit-schedule { border:0; background:var(--rd-soft); border-radius:10px; }
  & .next-outfit-schedule-left { color:var(--rd-accent); }
  & .next-outfit-body .modal-footer { margin-top:auto; padding-top:24px; }
  & .next-outfit-body .modal-footer>.btn { width:100%; }
}
[data-theme="dark"] body:has(#page-recharge.active) :is(#modal-usage-analysis,#modal-contact,#modal-account-support,#modal-wxpay,#modal-next-outfit,#modal-first-outfit,#modal-exclusive-service) {
  --rd-ink:#f4e7d3; --rd-muted:#c5b298; --rd-accent:#f0be73;
  --rd-surface:#28231e; --rd-soft:#342b22; --rd-line:#4f4233;
  background:rgba(0,0,0,.6);
}
@media(max-width:640px) {
  body:has(#page-recharge.active) :is(#modal-usage-analysis,#modal-contact,#modal-account-support,#modal-wxpay,#modal-next-outfit,#modal-first-outfit,#modal-exclusive-service) {
    padding:12px;
    & .modal { padding:24px 20px; max-width:100%!important; max-height:calc(100dvh - 24px); }
    & .modal-title { font-size:20px; }
    & .modal-close { top:14px; right:14px; }
    & .usage-analysis-modal { padding:0; }
    & .usage-analysis-head { padding:22px 20px 16px; gap:12px; }
    & .usage-analysis-head .modal-title { font-size:18px; gap:7px; }
    & .usage-analysis-head .modal-title::before { width:23px; height:25px; }
    & .usage-analysis-head .btn { min-height:36px; padding:8px 14px; }
    & .usage-analysis-body { padding:20px; }
    & .analysis-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); padding:4px 10px; }
    & .analysis-kpi { padding:12px 6px; }
    & .analysis-kpi:nth-child(n+3) { border-top:1px solid var(--rd-line); }
    & .analysis-kpi-value { font-size:17px; }
    & .analysis-kpi-label { font-size:11px; }
    & .analysis-model-row { grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; }
    & .analysis-model-row>div:last-child { grid-column:1/-1; }
    & .rc-contact-channels { gap:12px!important; }
    & .rc-contact-channel { padding:14px 8px!important; }
    & .rc-contact-channel img { width:132px!important; height:auto!important; aspect-ratio:1; }
    & .rc-contact-email { gap:6px!important; }
    & .next-outfit-modal { display:block; padding:0; overflow-y:auto; }
    & .next-outfit-modal>img { height:290px; width:100%; }
    & .next-outfit-body { max-height:none; overflow:visible; padding:24px; }
    & .next-outfit-name { font-size:22px; margin:14px 0 12px; }
    & .next-outfit-story { font-size:13px; }
  }
}
@media(prefers-reduced-motion:reduce) {
  body:has(#page-recharge.active) :is(#modal-usage-analysis,#modal-contact,#modal-account-support,#modal-wxpay,#modal-next-outfit,#modal-first-outfit,#modal-exclusive-service) {
    &, & * { animation:none!important; transition:none!important; }
  }
}