.billingCard { min-height: 250px; }
.billingHeaderActions { display:flex; align-items:center; gap:6px; }
.billingIconButton { border:1px solid var(--line); background:#fff; border-radius:9px; width:32px; height:32px; cursor:pointer; font-size:16px; }
.billingCard button,.billingModal button { transition:transform .08s ease,box-shadow .12s ease,background-color .12s ease,opacity .12s ease; }
.billingCard button:active:not(:disabled),.billingModal button:active:not(:disabled) { transform:translateY(2px) scale(.98); box-shadow:inset 0 2px 5px rgba(15,23,42,.2); }
.billingCard button:focus-visible,.billingModal button:focus-visible { outline:3px solid rgba(37,99,235,.24); outline-offset:2px; }
.billingCard button.billingButtonBusy,.billingModal button.billingButtonBusy { cursor:wait; opacity:.78; }
.billingButtonSpinner { display:inline-block; width:12px; height:12px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-2px; animation:billingButtonSpin .7s linear infinite; }
.billingButtonSuccess { background:#ecfdf3 !important; border-color:#86d7a8 !important; color:#067647 !important; }
.billingButtonError { background:#fff5f5 !important; border-color:#f4c7c3 !important; color:#b42318 !important; }
@keyframes billingButtonSpin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .billingCard button,.billingModal button { transition:none; } .billingButtonSpinner { animation-duration:1.4s; } }
.billingTotals { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.billingTotal { background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px; }
.billingTotal span { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.billingTotal strong { display:block; margin-top:3px; font-size:20px; }
.billingProviders { display:flex; flex-direction:column; gap:8px; }
.billingProvider { border-top:1px solid var(--line); padding-top:9px; }
.billingProviderTop { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.billingProviderName { font-weight:600; font-size:13px; }
.billingProviderValue { font-weight:700; font-variant-numeric:tabular-nums; }
.billingProviderMeta { color:var(--muted); font-size:11px; margin-top:3px; display:flex; justify-content:space-between; gap:8px; }
.billingProgress { height:5px; border-radius:10px; background:#e8edf5; overflow:hidden; margin-top:6px; }
.billingProgress > i { display:block; height:100%; background:#2563eb; }
.billingProgress > i.warn { background:#d97706; }
.billingProgress > i.danger { background:#dc2626; }
.billingState { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; background:#94a3b8; }
.billingState.ok { background:#16a34a; } .billingState.error { background:#dc2626; } .billingState.running { background:#2563eb; }
.billingBackdrop { position:fixed; inset:0; z-index:10000; background:rgba(15,23,42,.48); display:grid; place-items:center; padding:20px; }
.billingBackdrop[hidden] { display:none; }
.billingModal { width:min(980px,96vw); max-height:92vh; overflow:auto; background:#fff; border-radius:16px; box-shadow:0 24px 70px rgba(15,23,42,.25); }
.billingModalHeader { display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; z-index:2; }
.billingModalBody { padding:20px; }
.billingSettingsGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.billingField { display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--muted); }
.billingField input,.billingField select,.billingField textarea { border:1px solid var(--line); border-radius:8px; padding:9px; color:var(--text); background:#fff; }
.billingField textarea { min-height:70px; resize:vertical; }
.billingSection { border:1px solid var(--line); border-radius:12px; margin:14px 0; padding:14px; }
.billingSection h4 { margin:0 0 4px; }
.billingBinding { color:var(--muted); font-size:11px; overflow-wrap:anywhere; }
.billingMissingBinding { margin-top:8px; border:1px solid #f4c7c3; border-radius:8px; background:#fff5f5; color:#b42318; padding:8px 10px; font-size:12px; overflow-wrap:anywhere; }
.billingTestResult { display:none; margin-top:10px; border-radius:8px; padding:9px 11px; font-size:12px; line-height:1.45; overflow-wrap:anywhere; }
.billingTestResult.checking { display:block; background:#eff6ff; color:#1d4ed8; }
.billingTestResult.success { display:block; background:#ecfdf3; color:#067647; border:1px solid #abefc6; }
.billingTestResult.error { display:block; background:#fff5f5; color:#b42318; border:1px solid #f4c7c3; }
.billingModalActions { display:flex; justify-content:flex-end; align-items:center; gap:12px; padding:14px 20px; border-top:1px solid var(--line); position:sticky; bottom:0; background:#fff; }
.billingActionMessage { flex:1; min-width:0; font-size:12px; line-height:1.4; color:var(--muted); overflow-wrap:anywhere; }
.billingActionMessage.success { color:#067647; }
.billingActionMessage.error { color:#b42318; font-weight:600; }
.billingHistory { max-height:220px; overflow:auto; font-size:12px; }
.billingHistoryRow { display:grid; grid-template-columns:130px 100px 1fr; gap:8px; border-top:1px solid var(--line); padding:7px 0; }
.billingMessage { min-height:18px; margin-top:10px; color:var(--muted); font-size:12px; }
@media (max-width:720px) { .billingSettingsGrid { grid-template-columns:1fr; } .billingHistoryRow { grid-template-columns:1fr; } .billingModalActions { align-items:stretch; flex-direction:column; } .billingModalActions button { width:100%; } }