:root { --billing-paper:#f7f7f8; --billing-surface:#fff; --billing-ink:#24252b; --billing-muted:#70717b; --billing-line:#dedee4; --billing-accent:#4267c7; --billing-soft:#edf2ff; --billing-danger:#b6443c; }
* { box-sizing:border-box; }
body.billing-page { margin:0; min-height:100vh; color:var(--billing-ink); background:var(--billing-paper); font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; }
.billing-shell { width:min(1080px,calc(100% - 28px)); margin:0 auto; padding:22px 0 48px; }
.billing-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.billing-brand { color:var(--billing-ink); font-size:20px; font-weight:750; letter-spacing:-.03em; text-decoration:none; }
.billing-brand em { margin-left:5px; color:var(--billing-accent); font-size:13px; font-style:normal; font-weight:600; }
.billing-nav { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.billing-nav a,.billing-link { color:var(--billing-accent); text-decoration:none; }
.billing-nav a:hover,.billing-link:hover { text-decoration:underline; }
.billing-card { margin:14px 0; padding:22px; border:1px solid var(--billing-line); border-radius:14px; background:var(--billing-surface); box-shadow:0 8px 30px rgba(30,35,55,.04); }
.billing-card h1,.billing-card h2,.billing-card h3 { margin:0 0 8px; letter-spacing:-.025em; }
.billing-card h1 { font-size:25px; }.billing-card h2 { font-size:18px; }.billing-card h3 { font-size:15px; }
.billing-muted { color:var(--billing-muted); }.billing-note { color:var(--billing-muted); font-size:13px; }
.billing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.billing-stat { padding:15px; border:1px solid var(--billing-line); border-radius:11px; background:var(--billing-surface); }.billing-stat strong { display:block; margin-top:5px; font-size:22px; }.billing-stat span { color:var(--billing-muted); font-size:13px; }
.billing-form { display:grid; gap:12px; max-width:540px; }.billing-form label { display:grid; gap:5px; color:var(--billing-muted); font-size:13px; font-weight:650; }.billing-form input,.billing-form select,.billing-form textarea { width:100%; min-height:40px; border:1px solid var(--billing-line); border-radius:8px; padding:8px 10px; color:var(--billing-ink); background:#fff; font:inherit; }.billing-form textarea { min-height:90px; resize:vertical; }
.billing-button { min-height:40px; width:max-content; border:1px solid var(--billing-accent); border-radius:8px; padding:7px 15px; color:#fff; background:var(--billing-accent); font:inherit; font-weight:650; cursor:pointer; }.billing-button.secondary { color:var(--billing-accent); background:var(--billing-surface); }.billing-button.danger { border-color:var(--billing-danger); background:var(--billing-danger); }.billing-button:disabled { cursor:not-allowed; opacity:.55; }
.billing-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }.billing-status { min-height:21px; color:var(--billing-danger); font-size:13px; white-space:pre-wrap; }.billing-status.ok { color:#28734a; }
.billing-table-wrap { width:100%; overflow:auto; }.billing-table { width:100%; min-width:620px; border-collapse:collapse; }.billing-table th,.billing-table td { padding:10px 8px; border-bottom:1px solid var(--billing-line); text-align:left; vertical-align:top; }.billing-table th { color:var(--billing-muted); font-size:12px; font-weight:700; white-space:nowrap; }.billing-table td { font-size:13px; }
.billing-pill { display:inline-flex; align-items:center; border-radius:999px; padding:2px 8px; color:var(--billing-accent); background:var(--billing-soft); font-size:12px; }.billing-empty { padding:16px 0; color:var(--billing-muted); }.billing-pagination { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }.billing-pagination button { min-height:34px; border:1px solid var(--billing-line); border-radius:7px; color:var(--billing-accent); background:var(--billing-surface); cursor:pointer; }.billing-pagination button:disabled { opacity:.45; cursor:not-allowed; }
.billing-dialog { width:min(600px,calc(100% - 22px)); border:0; border-radius:13px; padding:0; color:var(--billing-ink); background:var(--billing-surface); }.billing-dialog::backdrop { background:rgba(20,22,30,.4); }.billing-dialog-inner { position:relative; padding:24px; }.billing-close { position:absolute; top:10px; right:10px; width:38px; height:38px; border:0; border-radius:8px; color:var(--billing-muted); background:transparent; font-size:22px; cursor:pointer; }.billing-close:hover { background:var(--billing-paper); }
.billing-code { overflow:auto; border:1px solid var(--billing-line); border-radius:8px; padding:10px; background:var(--billing-paper); font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; }.billing-qr { width:220px; min-height:220px; display:grid; place-items:center; border:1px solid var(--billing-line); background:#fff; }.billing-qr img,.billing-qr canvas { max-width:100%; }
@media (max-width:700px) { .billing-shell { width:min(100% - 18px,1080px); padding-top:14px; }.billing-header { align-items:flex-start; flex-direction:column; }.billing-card { padding:17px; }.billing-grid { grid-template-columns:1fr; }.billing-table { min-width:540px; } }