.billing-page { --billing-surface: var(--surface, #fff); display: grid; gap: 18px; min-width: 0; color: var(--text); }
.billing-heading,.billing-toolbar,.billing-detail-top { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.billing-heading h2 { font-size:22px; margin:0 0 5px; letter-spacing:-.4px; }
.billing-heading p,.billing-form-hint { color:var(--muted); font-size:13px; line-height:1.6; margin:0; }
.billing-heading .button { white-space:nowrap; }
.billing-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(230px,1.45fr); gap:12px; }
.billing-metric { display:flex; flex-direction:column; align-items:flex-start; gap:8px; background:var(--billing-surface); border:1px solid var(--line); border-radius:12px; padding:18px; color:var(--text); text-align:left; min-width:0; }
button.billing-metric { cursor:pointer; }
.billing-metric>span { color:var(--muted); font-size:12px; font-weight:600; }
.billing-metric>strong { font-size:34px; line-height:1.1; font-variant-numeric:tabular-nums; letter-spacing:-1px; }
.billing-metric>small { color:var(--muted); font-size:11px; }
.billing-metric-soon { border-top:3px solid var(--amber,#c78b2b); }
.billing-metric-late { border-top:3px solid var(--red,#de4a5d); }
.billing-metric-late>strong { color:var(--red,#de4a5d); }
.billing-metric-amount { background:var(--blue-soft,#eff5ff); border-color:var(--blue-soft,#dce8ff); }
.billing-metric-amount>strong { font-size:23px; line-height:1.35; letter-spacing:-.5px; overflow-wrap:anywhere; }
.billing-views,.billing-scope { display:flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:9px; background:var(--billing-surface); }
.billing-views button,.billing-scope button { display:flex; align-items:center; gap:6px; border:0; background:transparent; color:var(--muted); border-radius:6px; padding:8px 12px; cursor:pointer; font-size:12px; font-weight:600; }
.billing-views button.active,.billing-scope button.active { background:var(--blue-soft,#edf3ff); color:var(--blue); }
.billing-filters { display:flex; flex-wrap:wrap; align-items:end; gap:10px; }
.billing-filter { display:grid; gap:6px; flex:1 1 120px; color:var(--muted); font-size:11px; min-width:0; }
.billing-filter.billing-search { flex:2 1 210px; }
.billing-filter input,.billing-filter select { width:100%; min-height:38px; border:1px solid var(--line); border-radius:7px; padding:8px 10px; background:var(--input-bg,var(--billing-surface)); color:var(--text); font:inherit; font-size:12px; }
.billing-stage-strip { display:grid; grid-template-columns:repeat(8,minmax(145px,1fr)); gap:7px; overflow-x:auto; padding:3px; }
.billing-stage-strip button { display:flex; align-items:center; justify-content:space-between; gap:7px; text-align:left; border:1px solid var(--line); border-top:3px solid var(--stage-color,var(--line)); background:var(--billing-surface); color:var(--text); border-radius:8px; padding:13px 12px; cursor:pointer; font-size:12px; }
.billing-stage-strip button[aria-pressed=true] { outline:2px solid var(--blue); outline-offset:1px; }
.billing-stage-strip strong { font-size:23px; font-variant-numeric:tabular-nums; }
.billing-stage-active { --stage-color:var(--green,#01b37d); }
.billing-stage-forming { --stage-color:var(--blue,#226cea); }
.billing-stage-days30 { --stage-color:var(--purple,#8865d5); }
.billing-stage-days14 { --stage-color:var(--amber,#c78b2b); }
.billing-result-caption { color:var(--muted); font-size:11px; }
.billing-table-group { border:1px solid var(--line); border-radius:11px; overflow:hidden; background:var(--billing-surface); }
.billing-table-group h3 { display:flex; gap:9px; align-items:center; font-size:13px; padding:14px 18px; margin:0; background:var(--surface-soft,#f8fafc); border-bottom:1px solid var(--line); }
.billing-table-group h3 span { color:var(--muted); border:1px solid var(--line); border-radius:5px; padding:1px 6px; font-size:11px; }
.billing-table-scroll { overflow-x:auto; }
.billing-table { width:100%; border-collapse:collapse; }
.billing-table th { text-align:left; font-size:10px; color:var(--muted); letter-spacing:.2px; padding:12px 16px; white-space:nowrap; }
.billing-table td { vertical-align:middle; font-size:12px; padding:16px; border-top:1px solid var(--line); }
.billing-table td:first-child { min-width:185px; max-width:290px; }
.billing-table td>small { display:block; margin-top:6px; color:var(--muted); font-size:11px; overflow-wrap:anywhere; }
.billing-table strong { font-size:12px; font-variant-numeric:tabular-nums; }
.billing-record-name { display:block; color:var(--text); background:none; border:0; padding:0; font:inherit; font-weight:650; text-align:left; cursor:pointer; overflow-wrap:anywhere; }
.billing-record-name:hover { color:var(--blue); }
.billing-deadline { display:inline-flex; font-size:10px; font-weight:600; border-radius:5px; padding:4px 6px; white-space:nowrap; }
.billing-overdue { color:var(--red,#c93950); background:var(--red-soft,#fff0f2); }
.billing-today,.billing-soon { color:var(--amber,#986000); background:var(--amber-soft,#fff5df); }
.billing-later { color:var(--green,#087d59); background:var(--green-soft,#e7f8f1); }
.billing-forming,.billing-archived { color:var(--muted); background:var(--surface-soft,#f3f5f8); }
.billing-stage-days7 { --stage-color:var(--amber,#c78b2b); }
.billing-stage-today { --stage-color:var(--red,#de4a5d); }
.billing-stage-completed { --stage-color:var(--muted,#738099); }
.billing-stage-pill { display:inline-flex; align-items:center; gap:5px; font-size:11px; }
.billing-stage-pill:before { content:''; width:6px; height:6px; border-radius:50%; background:var(--stage-color); }
.billing-board { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(245px,1fr); gap:12px; overflow-x:auto; padding:3px 2px 14px; align-items:start; }
.billing-column { border:1px solid var(--line); background:var(--surface-soft,#f4f6fa); border-radius:10px; border-top:3px solid var(--stage-color); min-height:260px; }
.billing-column>header { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:14px 12px; }
.billing-column h3 { font-size:12px; margin:0; }
.billing-column>header strong { font-size:23px; }
.billing-column-body { display:grid; gap:10px; padding:0 9px 12px; }
.billing-card { border:1px solid var(--line); background:var(--billing-surface); border-radius:8px; padding:13px; box-shadow:0 2px 4px #14213805; }
.billing-card[draggable=true] { cursor:grab; }
.billing-card-top { display:flex; justify-content:space-between; gap:5px; align-items:center; margin-bottom:13px; flex-wrap:wrap; }
.billing-platform { color:var(--blue); font-size:10px; font-weight:700; background:var(--blue-soft,#edf3ff); padding:4px 6px; border-radius:4px; overflow-wrap:anywhere; }
.billing-card>.billing-record-name { font-size:14px; line-height:1.5; }
.billing-card>p { margin:4px 0 14px; font-size:11px; color:var(--muted); overflow-wrap:anywhere; }
.billing-card-price { font-size:18px; font-weight:650; margin-bottom:14px; }
.billing-card-price small { display:block; font-size:10px; font-weight:400; color:var(--muted); margin-top:3px; }
.billing-card-meta { display:grid; gap:7px; color:var(--muted); font-size:10px; }
.billing-card-meta span { display:flex; align-items:center; gap:5px; overflow-wrap:anywhere; }
.billing-card-meta svg { width:13px; height:13px; }
.billing-stage-label { display:grid; gap:5px; margin-top:14px; padding-top:10px; border-top:1px solid var(--line); font-size:10px; color:var(--muted); }
.billing-column-empty { text-align:center; font-size:12px; padding:35px 5px; color:var(--muted); }
.billing-empty { border:1px dashed var(--line); border-radius:12px; padding:50px 20px; text-align:center; background:var(--billing-surface); }
.billing-empty>svg { width:30px; height:30px; color:var(--blue); }
.billing-empty h3 { font-size:16px; margin:14px 0 8px; }
.billing-empty p { font-size:13px; color:var(--muted); max-width:450px; margin:auto; line-height:1.6; }
.billing-alert { padding:12px 14px; border:1px solid var(--red,#cf4157); border-radius:8px; background:var(--red-soft,#fff0f2); color:var(--text); font-size:13px; line-height:1.6; }
.billing-alert[hidden] { display:none; }
.billing-form { display:grid; gap:18px; }
.billing-form input[readonly] { background:var(--surface-soft,#f4f6fa); color:var(--muted); }
.billing-detail { display:grid; gap:20px; }
.billing-detail h3 { margin:8px 0; font-size:17px; }
.billing-detail-top>div>strong { font-size:24px; }
.billing-detail-top p { font-size:12px; color:var(--muted); }
.billing-note { white-space:pre-wrap; overflow-wrap:anywhere; padding:14px; border:1px solid var(--line); border-radius:8px; font-size:13px; }
.billing-history { list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.billing-history>li { padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--surface-soft,#fafbfd); font-size:12px; }
.billing-history>li>div { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.billing-history>li>div>span { color:var(--muted); }
.billing-history p { white-space:pre-wrap; overflow-wrap:anywhere; }
.billing-history summary { cursor:pointer; color:var(--blue); margin-top:12px; }
.billing-history-snapshots { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.billing-snapshot { display:grid; gap:8px; margin:0; }
.billing-snapshot div { display:grid; gap:3px; }
.billing-snapshot dt { color:var(--muted); font-size:10px; }
.billing-snapshot dd { margin:0; overflow-wrap:anywhere; white-space:pre-wrap; }
.billing-page :is(button,input,select):focus-visible,.billing-form :is(button,input,select,textarea):focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
#app-dialog:has(.billing-workspace) { width:min(1180px,calc(100vw - 32px)); max-height:94dvh; }
#app-dialog:has(.billing-workspace)>.modal-body { padding:0; }
.billing-workspace { --billing-surface:var(--surface,#fff); color:var(--text); font-size:12px; }
.billing-work-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:23px 26px 20px; }
.billing-work-header h2 { margin:5px 0; font-size:23px; letter-spacing:-.4px; }
.billing-work-header p { margin:0; color:var(--muted); }
.billing-work-header small,.billing-client-identity small,.billing-muted { color:var(--muted); font-size:11px; line-height:1.6; }
.billing-work-status { display:grid; justify-items:end; gap:9px; }
.billing-work-stages { display:grid; grid-template-columns:repeat(7,minmax(110px,1fr)); list-style:none; margin:0; padding:0 26px 20px; gap:5px; overflow-x:auto; }
.billing-work-stages li { display:flex; align-items:center; min-height:40px; border-top:3px solid var(--line); padding:7px; font-size:10px; line-height:1.4; color:var(--muted); background:var(--surface-soft,#f6f8fb); }
.billing-work-stages li.is-current { color:var(--text); border-color:var(--stage-color); font-weight:650; }
.billing-work-layout { display:grid; grid-template-columns:270px minmax(0,1fr); border-top:1px solid var(--line); }
.billing-client-panel { padding:22px; border-right:1px solid var(--line); background:var(--surface-soft,#f7f9fc); min-width:0; }
.billing-client-identity { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.billing-client-avatar { display:grid; place-items:center; width:40px; height:40px; flex:0 0 40px; border-radius:10px; background:var(--blue-soft,#edf3ff); color:var(--blue); font-size:16px; font-weight:650; }
.billing-client-identity h3 { margin:4px 0 0; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.billing-client-data { display:grid; gap:14px; margin:0; }
.billing-client-data dt,.billing-terms-grid dt { color:var(--muted); font-size:10px; margin-bottom:5px; }
.billing-client-data dd,.billing-terms-grid dd { margin:0; line-height:1.5; overflow-wrap:anywhere; }
.billing-client-contacts,.billing-client-subscriptions { border-top:1px solid var(--line); padding-top:19px; margin-top:20px; }
.billing-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px; }
.billing-section-heading h3 { margin:0; font-size:13px; }
.billing-section-heading>span { color:var(--muted); font-size:10px; }
.billing-contact { margin-top:12px; border:1px solid var(--line); border-radius:8px; background:var(--billing-surface); padding:12px; overflow-wrap:anywhere; }
.billing-contact>strong { display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-size:12px; }
.billing-contact-primary { color:var(--blue); background:var(--blue-soft,#edf3ff); padding:2px 5px; font-size:9px; border-radius:4px; }
.billing-contact>small { display:block; color:var(--muted); font-size:10px; line-height:1.5; margin:5px 0 8px; }
.billing-contact>p { margin:4px 0 0; font-size:11px; }
.billing-related { display:grid; width:100%; gap:5px; border:1px solid var(--line); padding:12px; border-radius:8px; background:var(--billing-surface); color:var(--text); text-align:left; margin-top:8px; cursor:pointer; overflow-wrap:anywhere; }
.billing-related.is-current { border-color:var(--blue); background:var(--blue-soft,#edf3ff); }
.billing-related strong { font-size:12px; }
.billing-related span { font-size:11px; }
.billing-related small { font-size:10px; color:var(--muted); line-height:1.5; }
.billing-work-main { min-width:0; padding:24px; }
.billing-work-actions { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-bottom:23px; }
.billing-current-terms { border:1px solid var(--line); border-radius:10px; padding:20px; }
.billing-plan-price { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 0 20px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.billing-plan-price small { display:block; color:var(--muted); font-size:10px; font-weight:400; }
.billing-plan-price h4 { font-size:18px; margin:6px 0 0; line-height:1.4; overflow-wrap:anywhere; }
.billing-plan-price>strong { flex-shrink:0; font-size:23px; text-align:right; font-variant-numeric:tabular-nums; }
.billing-plan-price>strong small { margin-top:5px; }
.billing-terms-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:0; }
.billing-work-notes { border-top:1px solid var(--line); padding-top:16px; margin-top:20px; }
.billing-work-notes h4 { margin:0 0 7px; color:var(--muted); font-size:10px; font-weight:500; }
.billing-work-notes p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; }
.billing-work-history { margin-top:25px; }
.billing-work-secondary { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; margin-top:22px; }
.billing-work-secondary .button { font-size:11px; }
.billing-work-editor>h3 { font-size:18px; margin:0 0 20px; }
.billing-workspace :is(button,summary):focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
@media(max-width:760px) {
  .billing-work-layout { grid-template-columns:1fr; }
  .billing-client-panel { border-right:0; border-bottom:1px solid var(--line); }
  .billing-client-data { grid-template-columns:1fr 1fr; }
  .billing-work-header { padding:20px; }
  .billing-work-stages { padding:0 20px 18px; }
  .billing-work-main { padding:20px; }
}
@media(max-width:460px) {
  .billing-work-header { align-items:flex-start; gap:12px; }
  .billing-work-header h2 { font-size:19px; }
  .billing-plan-price { align-items:flex-start; flex-direction:column; }
  .billing-plan-price>strong { text-align:left; }
  .billing-workspace .form-grid { grid-template-columns:1fr; }
  .billing-workspace .form-actions { flex-wrap:wrap; }
  .billing-workspace .billing-history-snapshots { grid-template-columns:1fr; }
}
@media(max-width:1100px) { .billing-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .billing-stage-strip { overflow-x:auto; grid-template-columns:repeat(8,minmax(145px,1fr)); padding:3px; } }
@media(max-width:600px) {
  .billing-heading h2 { font-size:19px; } .billing-summary { gap:8px; } .billing-metric { padding:12px; gap:6px; } .billing-metric>strong { font-size:28px; } .billing-metric-amount>strong { font-size:18px; }
  .billing-heading>.toolbar-group { width:100%; justify-content:flex-end; } .billing-toolbar { gap:10px; } .billing-views { width:100%; } .billing-views button { justify-content:center; flex:1; padding:8px; }
  .billing-board { grid-auto-columns:minmax(255px,82vw); scroll-snap-type:x proximity; } .billing-column { scroll-snap-align:start; }
  .billing-table.responsive-records td { padding:9px 12px; } .billing-table td:first-child { max-width:none; } .billing-history-snapshots { grid-template-columns:1fr; } .billing-detail .toolbar-group { gap:8px; flex-wrap:wrap; }
}