/* ============================================================
   积分充值页 · 方案2 纯净现代 SaaS（Stripe Clean Minimal）
   纯白浅灰 + 圆角微阴影，商业信赖感
   ============================================================ */
:root{
  --bg:#f8fafc;
  --panel:#ffffff;
  --panel-soft:#fafbfc;
  --line:#e2e8f0;
  --line-strong:#cbd5e1;
  --text:#0f172a;
  --soft:#475569;
  --muted:#64748b;
  --faint:#94a3b8;
  --blue:#2563eb;
  --blue-hover:#1d4ed8;
  --blue-light:#eff6ff;
  --blue-border:#93c5fd;
  --green:#10b981;
  --green-light:#ecfdf5;
  --amber:#d97706;
  --amber-light:#fffbeb;
  --rose:#e11d48;
  --rose-light:#fff1f2;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  background:var(--bg);
  font:15px/1.7 "Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px max(22px,calc((100vw - 1180px)/2));
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(16px);
}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{
  display:grid;place-items:center;width:38px;height:38px;border-radius:10px;color:#fff;
  background:linear-gradient(135deg,#2563eb,#0ea5e9);
  font-weight:800;
}
.brand-text strong{display:block;font-size:15px}
.brand-text small{display:block;margin-top:1px;color:var(--muted);font-size:10px;letter-spacing:.16em}
.header-nav{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.nav-link{padding:8px 12px;border-radius:8px;color:var(--soft);font-size:13px;transition:.18s ease}
.nav-link:hover{color:var(--text);background:var(--blue-light)}
.nav-link.is-active{color:var(--blue);background:var(--blue-light);font-weight:600}

/* ---------- layout ---------- */
.page-shell{width:min(1080px,calc(100% - 44px));margin:0 auto;padding:40px 0 72px}
.eyebrow{margin:0;color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.18em}

/* ---------- hero ---------- */
.page-hero{text-align:center;margin-bottom:28px}
.page-hero h1{margin:10px 0 8px;font-size:30px;line-height:1.25;letter-spacing:-.01em;color:var(--text)}
.hero-sub{margin:0 auto;max-width:56ch;color:var(--soft);font-size:14px}

/* ---------- balance strip ---------- */
.balance-strip{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 24px;margin-bottom:24px;
  background:var(--panel-soft);
  border:1px solid var(--line);
  border-radius:14px;
}
.balance-left{display:flex;align-items:center;gap:10px}
.balance-right{display:flex;align-items:center;gap:24px}
.bs-label{font-size:12px;color:var(--muted);font-weight:600}
.bs-value{font-size:14px;color:var(--text);font-weight:600}
.bs-amount{display:flex;align-items:baseline;gap:6px}
.bs-amount strong{font-size:26px;color:var(--blue);font-weight:800;line-height:1}
.bs-amount em{font-style:normal;font-size:13px;color:var(--muted)}
.bs-used{font-size:12px;color:var(--muted)}
.bs-used span{color:var(--soft);font-weight:600}

/* ---------- notice ---------- */
.notice-strip{
  display:flex;align-items:center;gap:10px;margin-bottom:22px;padding:13px 18px;
  border:1px solid #fde68a;border-radius:12px;
  background:var(--amber-light);color:#92400e;font-size:13.5px;
}
.notice-strip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none}
.notice-strip a{color:var(--blue);font-weight:600;text-decoration:underline}

/* ---------- main card ---------- */
.recharge-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.04);
  overflow:hidden;
  margin-bottom:32px;
}
.recharge-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr)}

/* ---------- panes ---------- */
.order-pane{padding:32px 34px 30px;display:flex;flex-direction:column}
.pay-pane{
  padding:32px 30px 30px;
  background:var(--panel-soft);
  border-left:1px solid var(--line);
  display:flex;flex-direction:column;
}
.pane-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:20px}
.pane-head h2{margin:6px 0 0;font-size:18px}
.rate-chip{
  padding:6px 12px;border:1px solid var(--blue-border);border-radius:999px;
  background:var(--blue-light);color:var(--blue);font-size:12px;white-space:nowrap;font-weight:600;
}

/* ---------- package grid ---------- */
.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
.package-btn{
  display:flex;flex-direction:column;gap:4px;padding:16px 12px;text-align:center;
  border:2px solid var(--line);border-radius:14px;background:var(--panel);
  color:var(--text);transition:.18s ease;cursor:pointer;
}
.package-btn:hover{border-color:var(--blue-border);background:var(--blue-light)}
.package-btn .pkg-yuan{font-size:20px;font-weight:800;letter-spacing:-.01em}
.package-btn .pkg-points{color:var(--blue);font-size:12.5px;font-weight:600}
.package-btn.is-active{
  border-color:var(--blue);background:var(--blue-light);
  box-shadow:0 0 0 1px var(--blue);
}

/* ---------- custom amount ---------- */
.custom-amount{margin-bottom:20px}
.custom-amount label{display:block;margin-bottom:8px;color:var(--soft);font-size:13px;font-weight:600}
.amount-input{
  display:flex;align-items:center;gap:9px;padding:0 16px;
  border:2px solid var(--line);border-radius:12px;background:var(--panel);transition:.16s ease;
}
.amount-input:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.amount-prefix{color:var(--muted);font-size:18px;font-weight:700}
.amount-input input{
  flex:1;padding:12px 0;border:0;background:transparent;color:var(--text);
  font:700 17px/1.4 inherit;outline:none;min-width:0;
}
.amount-input input::-webkit-outer-spin-button,
.amount-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.amount-input input[type=number]{-moz-appearance:textfield}
#amount-hint{display:block;margin-top:7px;color:var(--faint);font-size:12px}

/* ---------- pay type (hidden by JS when only alipay) ---------- */
.pay-type-row{margin-bottom:22px}
.field-label{display:block;margin-bottom:8px;color:var(--soft);font-size:13px;font-weight:600}
.pay-type-group{display:flex;gap:10px;flex-wrap:wrap}
.pay-type-btn{
  padding:9px 18px;border:2px solid var(--line);border-radius:10px;
  background:var(--panel);color:var(--soft);font-size:13.5px;transition:.16s ease;
}
.pay-type-btn:hover{color:var(--text);border-color:var(--blue-border)}
.pay-type-btn.is-active{border-color:var(--blue);background:var(--blue-light);color:var(--blue);font-weight:600}

/* ---------- summary ---------- */
.summary-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:auto;padding-top:20px;border-top:1px dashed var(--line);
}
.summary-points{display:flex;align-items:baseline;gap:7px;color:var(--soft);font-size:13px}
.summary-points strong{font-size:24px;color:var(--green);letter-spacing:-.01em;font-weight:800}
.summary-points em{font-style:normal;color:var(--muted)}

/* ---------- buttons ---------- */
.button-primary,.button-secondary,.plain-button,.mini-button{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border-radius:10px;font-size:13.5px;font-weight:600;transition:.16s ease;
}
.button-primary{
  padding:12px 22px;border:1px solid transparent;color:#fff;
  background:var(--blue);box-shadow:0 4px 14px rgba(37,99,235,.25);
}
.button-primary:hover{background:var(--blue-hover);box-shadow:0 6px 18px rgba(37,99,235,.32)}
.button-primary:disabled{opacity:.42;cursor:not-allowed;box-shadow:none;background:var(--line-strong)}
.button-secondary{padding:11px 18px;border:1px solid var(--line-strong);background:var(--panel);color:var(--text)}
.button-secondary:hover{border-color:var(--blue-border);background:var(--blue-light);color:var(--blue)}
.plain-button{padding:8px 12px;border:1px solid transparent;background:transparent;color:var(--muted);font-weight:500}
.plain-button:hover{color:var(--blue);background:var(--blue-light)}
.mini-button{padding:7px 13px;border:1px solid var(--line);background:var(--panel);color:var(--soft);font-size:12.5px}
.mini-button:hover{color:var(--blue);border-color:var(--blue-border);background:var(--blue-light)}

/* ---------- pay empty ---------- */
.pay-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  flex:1;min-height:320px;padding:24px;text-align:center;color:var(--faint);
}
.pay-empty-mark{
  display:grid;place-items:center;width:62px;height:62px;margin-bottom:6px;
  border:2px dashed var(--line-strong);border-radius:16px;color:var(--muted);font-size:26px;font-weight:700;
}
.pay-empty strong{color:var(--soft);font-size:14.5px}
.pay-empty span{font-size:13px}

/* ---------- pay active ---------- */
.pay-active{display:flex;flex-direction:column;gap:14px}
.pay-amount-block{text-align:center}
.pay-amount-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.pay-amount-num{font-size:34px;font-weight:900;color:var(--text);line-height:1.2;margin:2px 0}
.pay-points-line{font-size:14px;color:var(--green);font-weight:600}

/* ---------- page payment ---------- */
.payment-page-block{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:18px;text-align:center;color:var(--soft);font-size:14px;
}

/* ---------- pay status ---------- */
.pay-status{display:flex;align-items:center;justify-content:center;gap:9px;color:var(--amber);font-size:13.5px;font-weight:600}
.status-dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
.pay-status.is-paid{color:var(--green)}
.pay-status.is-paid .status-dot{animation:none}
.pay-status.is-failed{color:var(--rose)}
.pay-status.is-failed .status-dot{animation:none}

/* ---------- pay meta ---------- */
.pay-meta{display:grid;gap:8px;margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.pay-meta>div{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.pay-meta dt{margin:0;color:var(--muted)}
.pay-meta dd{margin:0;font-weight:600;word-break:break-all;text-align:right;color:var(--text)}

/* ---------- pay actions ---------- */
.pay-actions{display:flex;flex-wrap:wrap;gap:10px}
.pay-actions .button-primary,.pay-actions .button-secondary{flex:1 1 auto}
.pay-tip{margin:0;color:var(--muted);font-size:12.5px;line-height:1.65}

/* ---------- records ---------- */
.records{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:26px 28px 28px;box-shadow:0 4px 16px rgba(0,0,0,.03)}
.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.section-heading h2{margin:6px 0 0;font-size:18px}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{
  padding:11px 16px;text-align:left;white-space:nowrap;color:var(--muted);font-size:12px;
  font-weight:700;letter-spacing:.05em;background:var(--panel-soft);border-bottom:1px solid var(--line);
}
tbody td{padding:13px 16px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--panel-soft)}
td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--soft)}
td.num{font-weight:700;color:var(--text)}
.status-badge{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
  font-size:12px;font-weight:600;white-space:nowrap;
}
.status-badge.paid{color:var(--green);background:var(--green-light);border:1px solid #a7f3d0}
.status-badge.pending{color:var(--amber);background:var(--amber-light);border:1px solid #fde68a}
.status-badge.expired{color:var(--muted);background:#f1f5f9;border:1px solid var(--line)}
.status-badge.failed{color:var(--rose);background:var(--rose-light);border:1px solid #fecdd3}
.empty-state{display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px 20px;color:var(--faint);text-align:center}
.empty-state strong{color:var(--soft);font-size:14px}

/* ---------- footer / toast ---------- */
.site-footer{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:22px max(22px,calc((100vw - 1080px)/2));
  border-top:1px solid var(--line);color:var(--muted);font-size:12.5px;
}
.notice{
  position:fixed;left:50%;bottom:32px;transform:translate(-50%,16px);
  max-width:min(560px,calc(100vw - 40px));padding:13px 20px;border-radius:11px;
  border:1px solid var(--line-strong);background:rgba(255,255,255,.97);color:var(--text);
  box-shadow:0 12px 32px rgba(0,0,0,.12);font-size:13.5px;opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;z-index:60;
}
.notice.is-visible{opacity:1;transform:translate(-50%,0)}
.notice.is-error{border-color:#fecdd3;color:var(--rose);background:var(--rose-light)}
.notice.is-success{border-color:#a7f3d0;color:var(--green);background:var(--green-light)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .recharge-grid{grid-template-columns:1fr}
  .pay-pane{border-left:0;border-top:1px solid var(--line)}
  .package-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .page-shell{width:calc(100% - 28px);padding:28px 0 52px}
  .page-hero h1{font-size:24px}
  .order-pane,.pay-pane{padding:22px 18px 22px}
  .balance-strip{padding:14px 18px}
  .balance-right{gap:16px}
  .bs-amount strong{font-size:22px}
  .summary-row{flex-direction:column;align-items:stretch}
  .summary-row .button-primary{width:100%}
  .site-header{padding:12px 14px}
  .header-nav{gap:2px}
  .nav-link{padding:7px 9px;font-size:12.5px}
  .records{padding:20px 16px 22px}
}