/* Reuse the surrounding console/admin tokens; every rule stays within billing. */
.billing { min-width:0; font-size:14px; letter-spacing:0; }
.billing [hidden] { display:none!important; }
.billing h1 { margin:0; font-size:24px; }
.billing h2 { font-size:18px; margin:0 0 14px; }
.billing p { color:var(--muted); overflow-wrap:anywhere; }
.billing section { padding:24px; border:1px solid var(--line-soft); background:var(--surface); border-radius:var(--radius); margin-bottom:20px; }
.billing .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin:20px 0; }
.billing .card { display:flex; flex-direction:column; gap:12px; padding:20px; border:1px solid var(--line-soft); border-radius:var(--radius-sm); min-width:0; }
.billing .card h2,.billing .card p { margin:0; }
.billing .card button { margin-top:auto; }
.billing .price { font-size:32px; color:var(--ink); font-weight:700; }
.billing .price small { font-size:14px; font-weight:400; color:var(--muted); }
.billing button { font:inherit; color:white; background:var(--blue); border:1px solid transparent; padding:9px 14px; border-radius:var(--radius-sm); cursor:pointer; }
.billing button.secondary,.billing-tabs button { background:var(--surface-hover); color:var(--ink); }
.billing button:disabled { background:var(--surface-hover); color:var(--faint); cursor:default; }
.billing button:focus-visible,.billing a:focus-visible,.billing input:focus-visible,.billing select:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.billing-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:20px 0; }
.billing-tabs button[aria-pressed=true] { background:var(--blue-soft); color:var(--blue); border-color:var(--blue-mid); }
.billing label { display:block; margin:12px 0; }
.billing input,.billing select,.billing textarea { display:block; width:100%; font:inherit; padding:10px; border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); margin-top:6px; }
.billing form { max-width:640px; }
.billing .row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.billing .row label { flex:1 1 180px; }
.billing .scroll { overflow:auto; max-width:100%; }
.billing table { width:100%; border-collapse:collapse; font-size:14px; }
.billing th,.billing td { padding:12px 8px; border-bottom:1px solid var(--line-soft); text-align:left; white-space:nowrap; }
.billing td button { padding:6px 9px; font-size:14px; margin:3px; }
.billing .message { background:var(--blue-soft); color:var(--ink); border-radius:var(--radius-sm); padding:14px; margin:16px 0; white-space:pre-wrap; }
.billing .message.bad { background:var(--red-soft); color:var(--red); }
.billing dialog { width:min(720px,calc(100vw - 32px)); max-height:85vh; overflow:auto; padding:24px; border:1px solid var(--line-soft); border-radius:var(--radius); background:var(--surface); color:var(--ink); font-family:var(--font); }
.billing dialog::backdrop { background:rgba(0,0,0,.4); }
/* Compact order band above the payment controls, using the existing shell tokens. */
.billing dialog#payment { width:min(520px,calc(100vw - 32px)); padding:0; overflow:auto; max-height:90vh; }
.billing .pay-head { display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid var(--line-soft); }
.billing .pay-head h2 { margin:0; font-size:18px; flex:1; min-width:0; }
.billing .pay-icon { background:transparent; border:1px solid transparent; color:var(--muted); border-radius:var(--radius-sm); line-height:1; }
.billing .pay-icon { padding:8px 10px; font-size:14px; }
.billing .pay-icon:hover { background:var(--surface-hover); color:var(--ink); }
.billing .pay-badge { flex:none; font-size:14px; color:var(--amber); background:var(--amber-soft); border:1px solid var(--amber-border); border-radius:999px; padding:2px 10px; }
.billing .pay-grid { display:flex; flex-direction:column; }
.billing .pay-grid > section { border:0; border-radius:0; margin:0; }
.billing .pay-grid .pay-summary { display:grid; grid-template-columns:minmax(0,1fr) minmax(130px,.65fr); gap:12px 20px; padding:18px 24px; border-bottom:1px solid var(--line-soft); background:var(--surface-hover); align-items:center; }
.billing .pay-summary > .pay-kicker { grid-column:1/-1; }
.billing .pay-body { padding:24px; display:flex; flex-direction:column; min-width:0; }
.billing .pay-step { display:flex; flex-direction:column; gap:14px; flex:1 1 auto; min-width:0; }
.billing .pay-step h3 { margin:0; font-size:16px; }
.billing .pay-kicker { margin:0; font-size:14px; color:var(--faint); }
.billing .pay-plan { margin:0; font-size:18px; font-weight:700; color:var(--ink); }
.billing .pay-term { display:none; }
.billing .pay-expiry { margin:12px 0 0; display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; }
.billing .pay-expiry span { font-size:14px; color:var(--muted); }
.billing .pay-expiry strong { font-size:14px; font-weight:500; }
.billing .pay-lines { margin:0; }
.billing .pay-lines > div { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line-soft); }
.billing .pay-lines dt { font-size:14px; color:var(--muted); }
.billing .pay-lines dd { margin:0; font-size:14px; font-weight:500; }
.billing .pay-lines .pay-total-row { border-bottom:0; padding-top:14px; }
.billing .pay-total-row dd { font-size:32px; font-weight:700; }
.billing .pay-channels { display:grid; gap:12px; }
.billing .pay-channel { display:flex; align-items:center; gap:12px; text-align:left; padding:14px; border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); }
.billing .pay-channel:hover { border-color:var(--channel); }
.billing .pay-channel[aria-checked=true] { border-color:var(--channel); background:var(--channel-soft); }
.billing .pay-channel[data-ready="0"] { border-style:dashed; }
.billing .pay-logo { flex:none; display:grid; place-items:center; width:34px; height:34px; }
.billing .pay-logo svg { display:block; width:34px; height:34px; }
.billing .pay-channel-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.billing .pay-channel-text strong { font-size:16px; font-weight:600; }
.billing .pay-channel-text span { font-size:14px; color:var(--muted); }
.billing .pay-channel[data-ready="0"] .pay-channel-text span { color:var(--amber); }
.billing .pay-note { margin:0; font-size:14px; line-height:1.6; }
.billing .pay-promo { margin:0; max-width:none; }
.billing .pay-promo label { margin:0 0 8px; font-size:14px; color:var(--muted); }
.billing .pay-promo-input { display:flex; gap:8px; align-items:center; }
.billing .pay-promo-input input { margin:0; min-width:0; flex:1; }
.billing .pay-promo-input button { flex:none; }
.billing #promo-status { margin:6px 0 0; font-size:14px; }
.billing #promo-status:empty { display:none; }
.billing #confirm-promo { color:var(--blue); }
.billing .pay-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:12px; padding-top:16px; margin-top:4px; border-top:1px solid var(--line-soft); }
.billing .scan-body { display:flex; flex-direction:column; align-items:center; gap:10px; max-width:100%; text-align:center; }
.billing .scan-code { display:flex; flex-direction:column; align-items:center; }
.billing .scan-details { min-width:0; }
.billing .scan-brand { display:none; }
.billing .scan-brand svg { display:block; height:30px; width:auto; }
.billing .scan-lead,.billing .scan-amount { display:none; }
.billing .qr-frame { display:grid; place-items:center; width:250px; height:250px; margin:12px 0 0; padding:0; overflow:hidden; border:1px solid var(--line-soft); border-radius:var(--radius); background:#fff; }
.billing .qr-frame img { display:block; width:min(216px,58vw); height:auto; aspect-ratio:1; object-fit:contain; }
.billing .qr-frame iframe { display:block; width:248px; height:248px; transform:translate(16px,16px); border:0; background:#fff; }
.billing .scan-hint { margin:0; font-size:16px; font-weight:500; color:var(--ink); }
.billing #payment-state { margin:0; font-size:14px; }
.billing .scan-meta { margin:6px 0 0; font-size:14px; color:var(--muted); }
.billing .scan-meta strong { color:var(--ink); font-variant-numeric:tabular-nums; }
.billing .scan-order { display:none; }
.billing .scan-body .row { margin-top:22px; }
.billing .account { overflow-wrap:anywhere; }
.billing .scan-details { display:flex; flex-direction:column; align-items:center; gap:6px; }
.billing .scan-details a { font-size:14px; }
.billing .pay-scan-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:16px; margin-top:2px; border-top:1px solid var(--line-soft); }
.billing #payment button { min-height:44px; font-size:14px; }
.billing #payment.scanning .pay-lines > div:not(.pay-total-row),.billing #payment.scanning .pay-expiry { display:none; }
.billing #payment.scanning .pay-lines .pay-total-row { padding:0; }
.billing #payment.scanning .pay-total-row dt { display:none; }
.billing #payment.scanning .pay-lines dd { width:100%; text-align:right; }
.billing #payment.scanning .pay-grid .pay-summary { grid-template-columns:minmax(0,1fr) auto; padding:16px 24px; }
@media(max-width:600px) {
 .billing section { padding:18px; }
 .billing .grid,.billing .pay-grid { grid-template-columns:1fr; }
 .billing .pay-grid .pay-summary { grid-template-columns:1fr; gap:12px; padding:18px 20px; }
 .billing .pay-expiry { margin:10px 0 0; }
 .billing .pay-lines > div { padding:8px 0; }
 .billing .pay-body { padding:20px; }
 .billing .scan-body { gap:10px; }
 .billing #payment.scanning .pay-grid .pay-summary { padding:16px 20px; }
 .billing dialog { padding:18px; }
 .billing input,.billing select,.billing textarea { font-size:16px; }
}

.billing .package-widget {--package-line:var(--line-soft);--package-ink:var(--ink);--package-muted:var(--muted);--package-surface:var(--surface);--package-blue:var(--blue);}

/* Shared package components inherit the portal or account design system. */
.package-widget { min-width:0; margin-bottom:28px; font-size:14px; letter-spacing:0; }
.package-widget h2 { margin:0; font-size:18px; }
.package-widget h3 { margin:0; font-size:18px; }
.package-heading { display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; }
.package-period { display:flex; gap:4px; padding:5px; border:1px solid var(--package-line); border-radius:999px; background:var(--package-surface); }
.package-widget button { font:600 14px var(--font); padding:10px 14px; border:1px solid var(--package-line); border-radius:8px; color:var(--package-ink); background:var(--package-surface); cursor:pointer; }
.package-period button { border:0; border-radius:999px; font-weight:500; background:transparent; padding:9px 16px; }
.package-period button span { color:inherit; margin-left:6px; font-size:14px; }
.package-period button[data-period="year"] { border:1px dashed var(--package-line); background:color-mix(in srgb,var(--package-blue) 5%,var(--package-surface)); white-space:nowrap; }
.package-period button[aria-pressed=true] { background:var(--package-blue); color:#fff; box-shadow:0 3px 9px color-mix(in srgb,var(--package-blue) 15%,transparent); }
.package-period button[aria-pressed=true] span { color:inherit; }
.package-widget :focus-visible { outline:2px solid var(--package-blue); outline-offset:3px; }
.package-widget .package-notice,.package-widget .package-note { font-size:14px; line-height:1.8; color:var(--package-muted); margin:16px 0; }
.package-cards { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin:24px 0 36px; }
.package-card { display:flex; flex-direction:column; min-width:0; padding:24px 12px 20px; text-align:center; border:1px solid var(--package-line); border-radius:16px; background:var(--package-surface); box-shadow:0 6px 20px rgba(35,56,81,.035); transition:border-color .2s,box-shadow .2s; }
.package-card:hover { border-color:color-mix(in srgb,var(--package-blue) 35%,var(--package-line)); box-shadow:0 10px 24px rgba(35,56,81,.06); }
.package-card--free { background:color-mix(in srgb,var(--package-surface) 90%,var(--package-line)); box-shadow:none; border-style:dashed; }
.package-widget .package-card h3 { font-size:18px; font-weight:650; margin:0 0 24px; letter-spacing:0; }
.package-widget .package-description { color:var(--package-muted); font-size:14px; line-height:1.8; min-height:65px; margin:0 0 18px; }
.package-price-row { display:flex; align-items:baseline; justify-content:center; gap:7px; min-height:42px; white-space:nowrap; }
.package-price { font-size:32px; line-height:1.3; font-weight:700; letter-spacing:0; white-space:nowrap; }
.package-price span { font-size:14px; font-weight:400; letter-spacing:0; color:var(--package-muted); }
.package-widget .package-card .package-alternative { min-height:22px; color:var(--package-muted); margin:8px 0 20px; font-size:14px; line-height:1.7; white-space:nowrap; }
.package-widget .package-card .package-saving { color:var(--package-blue); margin:0; font-size:14px; font-weight:500; letter-spacing:0; }
.package-card button:disabled { cursor:not-allowed; color:var(--package-muted); border-color:var(--package-line); background:color-mix(in srgb,var(--package-line) 35%,var(--package-surface)); box-shadow:none; margin:0; width:100%; }
.package-card--free button:disabled { color:var(--package-muted); background:var(--package-surface); border-color:var(--package-line); }
.package-card ul { list-style:none; padding:18px 0 0; margin:18px 0 0; border-top:1px solid var(--package-line); font-size:14px; line-height:1.7; display:grid; gap:12px; }
.package-card li { display:flex; gap:5px; align-items:flex-start; justify-content:center; }
.package-card li svg { width:14px; height:14px; flex:none; margin-top:3px; color:var(--package-blue); }
.package-card li strong { font-weight:600; }
.package-table-title { text-align:center; font-size:18px!important; margin-bottom:20px!important; }
.package-scroll { overflow:auto; max-width:100%; border:1px solid var(--package-line); border-radius:14px; background:var(--package-surface); }
.package-scroll table { width:100%; border-collapse:collapse; min-width:760px; font-size:14px; }
.package-scroll th,.package-scroll td { padding:13px 16px; border-bottom:1px solid var(--package-line); text-align:left; white-space:nowrap; }
.package-scroll thead { background:color-mix(in srgb,var(--package-blue) 4%,var(--package-surface)); }
.package-scroll thead th { font-weight:600; }
.package-scroll tbody th { font-weight:400; color:var(--package-muted); }
.package-scroll tbody tr:last-child th,.package-scroll tbody tr:last-child td { border-bottom:0; }
.package-scroll tbody tr:hover { background:color-mix(in srgb,var(--package-blue) 2%,var(--package-surface)); }
@media(max-width:1100px) { .package-cards { grid-template-columns:repeat(3,minmax(0,1fr)); } .package-widget .package-description { min-height:44px; } }
@media(max-width:700px) { .package-cards { grid-template-columns:1fr; } .package-widget .package-description { min-height:0; margin-bottom:14px; } .package-card { padding:22px; } .package-heading { align-items:flex-start; } .package-widget h2 { font-size:18px; } .package-period button { padding:8px 13px; } .package-price { font-size:32px; } }

.package-widget .package-notice { color:var(--package-muted); font-size:14px; }

.package-period button[data-period="year"][aria-pressed="true"]{border:1px solid transparent}

.account-plan{border:1px solid var(--line);border-radius:16px;padding:24px;background:#fff;margin-bottom:28px}
.account-plan-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.account-plan-heading h2{font-size:22px;margin:8px 0}.account-plan-heading span,.account-plan-heading p{font-size:14px;color:var(--muted)}
.account-usage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0 12px}.account-usage>div{padding:16px;border:1px solid var(--line);border-radius:10px;background:#f8fafc}.account-usage span{display:block;font-size:14px;color:var(--muted);margin-bottom:10px}.account-usage strong{font-size:22px}.account-usage-note{font-size:14px;color:var(--muted);line-height:1.8}
@media(max-width:700px){.account-plan{padding:20px}.account-plan-heading{flex-wrap:wrap}.account-usage{grid-template-columns:1fr}.account-usage>div{display:flex;align-items:center;justify-content:space-between}.account-usage span{margin:0}}

.billing .account-plan .marketing-action{display:inline-flex;padding:10px 14px;border-radius:8px;background:var(--accent);color:#fff;text-decoration:none;font-size:14px}.billing .account-plan-heading h2{margin:8px 0}

.billing .order-filter { display:flex; align-items:center; gap:8px; margin:12px 0; color:var(--muted); }
.billing .order-filter input { width:16px; height:16px; margin:0; accent-color:var(--blue); }