#billingView[hidden]{display:none!important}
#billingView{--bill-ink:#1e241e;--bill-muted:#777e74;--bill-line:#e5e8e0;--bill-green:#29372d;--bill-soft:#f5f6f1;padding:clamp(22px,4vw,58px) clamp(18px,4vw,62px) 70px;color:var(--bill-ink);font-family:inherit}
.billing-shell{max-width:1500px;margin:0 auto}
.billing-head,.billing-chart-top,.billing-detail-head,.billing-dialog-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.billing-head{padding:8px 0 34px;border-bottom:1px solid var(--bill-line)}
.billing-head h1{margin:12px 0 8px;font-size:clamp(42px,6vw,74px);line-height:.98;letter-spacing:-.055em;font-weight:500}
.billing-head h1 span{color:#a58b57}
.billing-head p{margin:0;color:var(--bill-muted);font-size:15px}
.billing-kicker{font-size:10px;letter-spacing:.15em;color:#8b8e82}
.billing-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.billing-upload,.billing-secondary,.billing-submit{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d7dbd2;background:#fff;color:var(--bill-ink);border-radius:3px;padding:11px 15px;font:inherit;font-size:12px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.billing-upload:hover,.billing-secondary:hover{border-color:var(--bill-green);background:var(--bill-soft)}
.billing-upload input{display:none}
.billing-chart-card{margin-top:24px;padding:26px 30px 18px;background:#fff;border:1px solid var(--bill-line);border-radius:5px}
.billing-chart-top{align-items:center;margin-bottom:4px}
.billing-chart-top h2,.billing-detail-head h2{font-size:22px;letter-spacing:-.03em;font-weight:500;margin:7px 0 0}
.billing-chart-note{font-size:11px;color:var(--bill-muted)}
.billing-chart{width:100%;overflow:hidden}
.billing-chart svg{display:block;width:100%;height:auto;max-height:225px;overflow:visible}
.chart-baseline{stroke:#e8eae4;stroke-width:1}
.bar-bg{fill:transparent;cursor:pointer;transition:fill .2s}
.billing-bar{cursor:pointer;outline:none}
.billing-bar:hover .bar-bg,.billing-bar.selected .bar-bg{fill:#f4f5f0}
.bar-fill{fill:#bdc5b8;transition:height .35s, y .35s, fill .2s}
.billing-bar.selected .bar-fill,.billing-bar:hover .bar-fill{fill:#52634f}
.bar-value{font-family:inherit;font-size:10px;fill:#6f766d}
.bar-year{font-family:inherit;font-size:11px;fill:#747a70}
.billing-years{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin-top:7px}
.billing-year{border:1px solid transparent;background:transparent;color:#777e74;border-radius:3px;padding:9px 4px;font:inherit;font-size:12px;cursor:pointer}
.billing-year.active{border-color:#dfe3db;background:#f5f6f1;color:var(--bill-ink)}
.billing-year small{display:block;font-size:9px;color:#969a90;margin-top:2px}
.billing-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 34px}
.billing-metric{background:#f6f7f3;border:1px solid var(--bill-line);padding:18px 20px;min-height:112px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.billing-metric>span{font-size:9px;letter-spacing:.13em;color:#858a80}
.billing-metric strong{font-size:clamp(20px,2.3vw,30px);font-weight:500;letter-spacing:-.04em}
.billing-metric small{font-size:11px;color:var(--bill-muted)}
.billing-detail{background:#fff;border:1px solid var(--bill-line);border-radius:5px;overflow:hidden}
.billing-detail-head{padding:22px 24px;align-items:center;border-bottom:1px solid var(--bill-line)}
.billing-tools{display:flex;gap:8px;align-items:center}
.billing-search{display:flex;align-items:center;gap:8px;border:1px solid var(--bill-line);padding:0 10px;min-width:min(290px,35vw);height:39px;color:#8d9388}
.billing-search input{border:0;outline:0;width:100%;font:inherit;font-size:12px;color:var(--bill-ink);background:transparent}
.billing-tools select{height:39px;border:1px solid var(--bill-line);padding:0 10px;background:white;color:var(--bill-ink);font:inherit;font-size:12px}
.billing-table-wrap{overflow:auto;max-height:62vh}
.billing-table{width:100%;border-collapse:collapse;min-width:760px;font-size:12px}
.billing-table th{position:sticky;top:0;background:#fafbf8;text-align:left;padding:12px 15px;color:#858a80;font-size:9px;letter-spacing:.12em;font-weight:500;z-index:1}
.billing-table td{padding:13px 15px;border-top:1px solid #eef0eb;vertical-align:middle}
.billing-table tr:hover td{background:#fcfcfa}
.billing-table small{display:block;margin-top:4px;color:#90968c;font-size:10px;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.billing-invoice-no,.billing-customer{font-weight:500}
.billing-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.billing-status{display:inline-flex;align-items:center;gap:7px;color:#777e74;white-space:nowrap}
.billing-status i{width:7px;height:7px;border-radius:50%;background:#c99757}
.billing-status.paid i{background:#718b70}
.billing-row-edit{border:0;background:none;color:#71796d;font:inherit;font-size:11px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.billing-row-edit:hover{color:var(--bill-ink)}
.billing-empty{padding:38px 20px;text-align:center;color:var(--bill-muted);font-size:13px}
#billingToast{position:fixed;z-index:1000;left:50%;bottom:24px;transform:translate(-50%,12px);opacity:0;pointer-events:none;max-width:min(90vw,680px);padding:12px 18px;background:#29372d;color:#fff;border-radius:4px;font-size:12px;transition:opacity .2s,transform .2s}
#billingToast:not(:empty){opacity:1;transform:translate(-50%,0)}
.billing-dialog{width:min(540px,calc(100vw - 28px));max-height:calc(100dvh - 32px);border:1px solid #dfe3da;border-radius:5px;padding:28px;background:#fbfcf8;color:var(--bill-ink);box-shadow:0 25px 80px #131b1630}
.billing-dialog::backdrop{background:#171d19a8;backdrop-filter:blur(3px)}
.billing-dialog form{display:grid;gap:15px}
.billing-dialog-head{align-items:flex-start;margin-bottom:4px}
.billing-dialog-head h2{margin:7px 0 0;font-size:24px;font-weight:500;letter-spacing:-.04em}
.billing-close{border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;color:#62695f}
.billing-dialog label{display:grid;gap:6px;color:#6c7369;font-size:11px}
.billing-dialog input{width:100%;min-height:40px;border:1px solid #dfe3da;background:#fff;padding:9px 10px;font:inherit;font-size:13px;color:var(--bill-ink)}
.billing-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.billing-submit{justify-self:start;background:var(--bill-green);border-color:var(--bill-green);color:#fff;padding:12px 18px}
.billing-submit:hover{background:#1d2a21}
.billing-dialog p{font-size:12px;line-height:1.5;color:var(--bill-muted);margin:0}
.billing-alias-row{display:grid;grid-template-columns:1fr auto 1fr 32px;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid var(--bill-line);font-size:12px}
.billing-alias-row span{overflow-wrap:anywhere}
.billing-alias-row b{color:#9a9f94;font-weight:400}
.billing-alias-row button{border:0;background:none;font-size:19px;cursor:pointer;color:#8f554b}
@media(max-width:760px){#billingView{padding:24px 16px 48px}.billing-head{align-items:flex-start;flex-direction:column}.billing-chart-card{padding:20px 14px 12px}.billing-chart-note{display:none}.billing-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.billing-metric{padding:14px;min-height:100px}.billing-detail-head{align-items:flex-start;flex-direction:column;padding:18px 15px}.billing-tools{width:100%;flex-wrap:wrap}.billing-search{min-width:0;flex:1}.billing-tools select{flex:1}.billing-table th,.billing-table td{padding:11px 10px}.billing-years{gap:2px}.billing-year{font-size:11px}}
@media(prefers-reduced-motion:reduce){.bar-fill,.billing-upload,.billing-secondary,#billingToast{transition:none}}