.billing-page { background:#fff; color:#233531; }
.billing-main { max-width:1200px; margin:auto; padding:24px 24px 130px; }
.billing-filters,.billing-dates,.billing-actions { display:flex; align-items:end; flex-wrap:wrap; gap:12px; }
.billing-filters { margin-bottom:20px; }
.billing-dates[hidden] { display:none; }
.billing-field { display:grid; gap:7px; min-width:0; font-size:14px; }
.billing-field>span { font-weight:600; }
.billing-field input,.billing-field select { min-height:44px; width:100%; min-width:0; padding:9px 10px; border:1px solid #b4c4bf; border-radius:6px; background:#fff; color:#243934; font:inherit; }
.billing-field input[type=checkbox] { width:22px; height:22px; min-height:0; accent-color:var(--navigation-color); }
.billing-tabs { display:flex; gap:0; overflow-x:auto; border-bottom:1px solid #b6cac2; margin-bottom:22px; }
.billing-tabs button { flex:none; border:0; border-bottom:3px solid transparent; border-radius:0; color:#475e56; background:transparent; font-size:15px; padding:14px; }
.billing-tabs [aria-selected=true] { border-bottom-color:var(--navigation-color); color:var(--navigation-color); background:#edf6f2; }
.billing-status { overflow-wrap:anywhere; color:#765918; font-size:15px; }
.billing-status[data-tone=error],.billing-dialog .billing-status { color:#a12825; }
.billing-status:empty { display:none; }
.billing-band { padding:24px 0; border-bottom:1px solid #d7e1dd; }
.billing-band h2 { font-size:20px; font-weight:700; margin:0 0 16px; }
.billing-note { color:#52615b; font-size:14px; line-height:1.55; overflow-wrap:anywhere; }
.billing-alert { border-left:4px solid #b57717; background:#fff4df; padding:12px 16px; color:#684311; font-size:15px; }
.billing-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.billing-stat { border:1px solid #d1ded7; border-radius:6px; padding:18px; min-width:0; }
.billing-stat h2 { font-size:14px; margin:0 0 12px; color:#53625e; }
.billing-stat strong { display:block; font-size:21px; overflow-wrap:anywhere; margin-bottom:10px; }
.billing-stat small { font-size:13px; color:#53625e; }
.billing-table-scroll { overflow:auto; max-width:100%; margin-top:16px; }
.billing-table { width:100%; border-collapse:collapse; font-size:14px; text-align:left; }
.billing-table th { padding:12px; background:#edf3f0; color:#41564d; font-size:13px; white-space:nowrap; }
.billing-table td { padding:14px 12px; border-bottom:1px solid #e1e8e4; min-width:100px; max-width:300px; overflow-wrap:anywhere; vertical-align:middle; }
.billing-table small { display:block; font-size:12px; color:#53645e; margin-top:5px; }
.billing-metric { min-width:150px; }
.billing-metric-heading { display:flex; align-items:center; gap:8px; }
.billing-metric-heading strong { flex:1; min-width:0; }
.billing-help.config-icon-button { width:36px; height:36px; min-width:36px; min-height:36px; flex:0 0 36px; padding:7px; border:0; background:transparent; color:var(--navigation-color); }
.billing-help svg { width:22px; height:22px; }
.billing-info { padding:24px; max-height:calc(100dvh - 32px); overflow:auto; }
.billing-info>.config-command { margin:8px 8px 8px 0; }
.billing-page a.config-command { display:inline-flex; align-items:center; gap:8px; text-decoration:none; white-space:normal; font-size:14px; }
.billing-page a.config-command svg { width:20px; height:20px; flex:none; }
.billing-connection { padding:16px 0; border-bottom:1px solid #e1e8e4; }
.billing-connection h3 { margin:0; font-size:16px; }
.billing-connection>.config-command { margin:8px 8px 0 0; }
.billing-table .billing-stale { color:#994611; font-weight:700; }
.billing-table progress { display:block; width:140px; height:7px; accent-color:var(--navigation-color); }
.billing-actions { margin-bottom:16px; align-items:center; }
.billing-actions .config-command { font-size:14px; }
.billing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.billing-chart { width:100%; height:240px; margin:22px 0; }
.billing-chart canvas { display:block; width:100%; height:240px; }
.billing-dialog { width:min(780px,calc(100% - 24px)); }
.billing-line { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; border:0; border-top:1px solid #b9ccc2; margin:18px 0; padding:16px 0; min-width:0; }
.billing-line legend { font-weight:700; padding-right:10px; }
.billing-page .page-bottom-nav .config-command { background:transparent; border-radius:0; flex-direction:column; gap:6px; font-weight:400; }
.billing-page .page-bottom-nav .config-command svg { width:28px; height:28px; }
.billing-page .page-header .config-icon-button { background:transparent; color:inherit; }
.billing-page button:focus-visible,.billing-page input:focus-visible,.billing-page select:focus-visible { outline:3px solid #3a8ecc; outline-offset:2px; }
@media(max-width:700px) { .billing-main { padding:20px 14px 115px; } .billing-stats { grid-template-columns:1fr; } .billing-stat { padding:14px; } .billing-stat strong { font-size:20px; } .billing-grid { grid-template-columns:1fr; } .billing-filters>.billing-field { flex:1; } .billing-dates { width:100%; } .billing-dates .billing-field { flex:1; } .billing-tabs button { padding:12px 10px; } }
@media(max-width:400px) { .billing-line { grid-template-columns:1fr; } }