.billing-centre { min-height: 100vh; padding: clamp(24px, 4vw, 64px); background: var(--yuqi-canvas); }
.billing-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.billing-header h1 { margin: 8px 0; font-size: clamp(34px, 5vw, 62px); letter-spacing: -.045em; }
.billing-header p:not(.eyebrow) { color: var(--yuqi-muted); line-height: 1.7; }
.back-link { display: inline-block; margin-bottom: 18px; color: var(--yuqi-signal-strong); text-decoration: none; }.back-link:hover { text-decoration: underline; }
.billing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.billing-card, .billing-panel { border: 1px solid var(--yuqi-line); border-radius: 16px; background: var(--yuqi-surface); box-shadow: 0 8px 22px rgba(27, 39, 50, .04); }
.billing-card { display: grid; gap: 12px; padding: 22px; }.billing-card span, .muted { color: var(--yuqi-muted); font-size: 13px; }.billing-card strong { color: var(--yuqi-signal-strong); font-size: clamp(28px, 4vw, 42px); }
.billing-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; margin-bottom: 18px; }.billing-panel { padding: 22px; margin-bottom: 18px; }.billing-panel header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }.billing-panel h2 { margin: 6px 0 0; }.billing-panel h3 { margin: 0; }
.billing-form { display: grid; gap: 14px; }.billing-form label { display: grid; gap: 7px; color: var(--yuqi-muted); font-size: 13px; }.billing-form input, .billing-form select, .billing-form textarea, .billing-admin-reason textarea, .billing-user-search input { min-height: 42px; padding: 9px 11px; border: 1px solid var(--yuqi-line-strong); border-radius: 10px; background: var(--yuqi-surface); color: var(--yuqi-ink); }.billing-form textarea, .billing-admin-reason textarea { min-height: 76px; resize: vertical; }.billing-form :is(input, select, textarea):disabled, .billing-admin[data-busy="true"] :is(input, select, textarea, button) { cursor: not-allowed; opacity: .58; }
.billing-unit-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; padding: 14px; border: 1px solid var(--yuqi-line); border-radius: 12px; background: var(--yuqi-surface-muted); }.billing-unit-fields label { margin: 0; }
.quote-result { display: grid; gap: 6px; margin-top: 18px; padding: 14px; border: 1px solid #9fc8c4; border-radius: 12px; color: var(--yuqi-signal-strong); background: var(--yuqi-signal-soft); }.quote-result span { color: var(--yuqi-muted); font-size: 12px; }.quote-result[data-state="insufficient"], .quote-result[data-state="unavailable"] { border-color: #e5bdc2; color: var(--yuqi-danger); background: var(--yuqi-danger-soft); }.billing-warning { color: var(--yuqi-danger) !important; }.billing-help { margin: -2px 0 2px; color: var(--yuqi-muted); font-size: 12px; line-height: 1.65; }.billing-notes { display: grid; gap: 12px; margin: 0; padding-left: 20px; color: var(--yuqi-ink); line-height: 1.65; }
.billing-admin { margin-top: 28px; }.billing-admin-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr); align-items: end; gap: 22px; }.billing-admin-intro header { margin: 0; }.billing-admin-reason { display: grid; gap: 7px; color: var(--yuqi-muted); font-size: 13px; }.billing-admin-attempt { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 0; padding: 10px 12px; border: 1px solid #e5bdc2; border-radius: 10px; color: var(--yuqi-danger); background: var(--yuqi-danger-soft); }.billing-admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }.billing-admin-form { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; margin-bottom: 20px; }.billing-admin-form button { align-self: end; }.billing-source { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }.billing-row-actions { display: flex; flex-wrap: wrap; gap: 8px; white-space: normal; }.billing-row-actions .button-secondary { min-height: 32px; padding: 6px 8px; font-size: 12px; }.billing-user-search { display: flex; align-items: end; gap: 10px; margin: -2px 0 16px; }.billing-user-search label { display: grid; flex: 1; gap: 7px; color: var(--yuqi-muted); font-size: 13px; }.billing-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; color: var(--yuqi-muted); font-size: 13px; }.billing-user-ledger { display: grid; gap: 14px; margin-top: 18px; padding: 16px; border: 1px solid var(--yuqi-line); border-radius: 12px; background: var(--yuqi-surface-muted); }.billing-user-ledger header { margin: 0; }
.billing-user-action { display: grid; gap: 14px; margin-top: 18px; padding: 16px; border: 1px solid #9fc8c4; border-radius: 12px; background: var(--yuqi-signal-soft); }.billing-user-action[hidden] { display: none; }.billing-user-action h3, .billing-user-action p { margin: 0; }.billing-user-action-error { color: var(--yuqi-danger); }.billing-user-action-actions { display: flex; justify-content: flex-end; gap: 10px; }
.table-scroll { overflow-x: auto; }table { width: 100%; border-collapse: collapse; font-size: 13px; }th, td { padding: 12px 10px; border-bottom: 1px solid var(--yuqi-line); text-align: left; white-space: nowrap; }th { color: var(--yuqi-muted); font-size: 12px; }td { color: var(--yuqi-ink); }.admin-panel[hidden] { display: none; }
@media (max-width: 960px) { .billing-admin-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }.billing-admin-intro { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .billing-grid, .billing-layout, .billing-admin-grid, .billing-admin-form { grid-template-columns: 1fr; }.billing-header { align-items: flex-start; flex-direction: column; }.centre-actions { align-self: stretch; justify-content: flex-start; }.billing-user-search { display: grid; align-items: stretch; }.billing-pagination { justify-content: space-between; }.billing-admin-attempt { align-items: flex-start; flex-direction: column; }.billing-user-action-actions { justify-content: stretch; flex-direction: column-reverse; }.billing-user-action-actions button { width: 100%; } }