.billing-settings { max-width:1120px; width:100%; padding-bottom:12px; container:billing / inline-size; }
.billing-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.billing-heading .eyebrow { margin-bottom:5px; }
.billing-heading h2 { margin:0; font-size:20px; }
.billing-heading>button { min-height:44px; white-space:nowrap; padding:8px 12px; }
.billing-status-panel { border:1px solid var(--dc-border); background:var(--dc-surface); border-radius:12px; padding:14px 16px; margin-bottom:12px; }
.billing-status { display:inline-flex; color:var(--dc-text); font-size:15px; font-weight:750; line-height:1.4; }
.billing-status[data-state=pending],.billing-status[data-state=grace] { color:var(--dc-brand-orange); }
.billing-status[data-state=blocked] { color:var(--dc-status-error); }
#billing-description { color:var(--dc-text-muted); font-size:12px; line-height:1.5; margin:5px 0 0; max-width:760px; }
.billing-facts { display:flex; flex-wrap:wrap; gap:10px 24px; margin:12px 0 0; padding-top:10px; border-top:1px solid var(--dc-border); }
.billing-facts>div { min-width:0; }
.billing-facts dt { font-size:11px; color:var(--dc-text-muted); margin-bottom:3px; }
.billing-facts dd { font-size:12px; margin:0; line-height:1.5; }
.billing-inline-note { font-size:12px; line-height:1.5; color:var(--dc-brand-orange); margin:10px 0 0; }
.billing-plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); align-items:start; gap:12px; }
.billing-plan { padding:16px; border:1px solid var(--dc-border); border-radius:12px; background:var(--dc-surface); min-width:0; }
.billing-plan-cloud { border-color:var(--dc-brand-orange); box-shadow:inset 0 2px 0 var(--dc-brand-orange); }
.billing-plan-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px; margin-bottom:12px; }
.billing-plan-label { color:var(--dc-brand-orange); font-size:9px; letter-spacing:.1em; font-weight:800; }
.billing-plan-badge { display:inline-flex; padding:4px 7px; border:1px solid var(--dc-border); border-radius:5px; font-size:10px; color:var(--dc-text-muted); }
.billing-plan h3 { font-size:18px; margin:0 0 8px; }
.billing-price { margin:0; font-size:30px; font-weight:750; letter-spacing:-.04em; }
.billing-price span { font-size:12px; letter-spacing:0; color:var(--dc-text-muted); font-weight:500; }
.billing-price-note { font-size:12px; line-height:1.5; color:var(--dc-text-muted); margin:5px 0 14px; }
.billing-features { margin:0; padding:0; list-style:none; display:grid; gap:7px; font-size:12px; line-height:1.5; }
.billing-features li { position:relative; padding-left:18px; }
.billing-features li::before { content:'✓'; position:absolute; left:0; color:var(--dc-brand-orange); font-weight:800; }
.billing-buffer-note { color:var(--dc-text-muted); font-size:12px; line-height:1.5; margin:12px 0; }
.billing-checkout-form { border-top:1px solid var(--dc-border); padding-top:12px; margin-top:12px; }
.billing-checkout-form>label { font-size:12px; line-height:1.5; margin-bottom:5px; }
.billing-camera-help { color:var(--dc-text-muted); font-size:12px; line-height:1.5; margin:0 0 10px; }
.billing-quantity { display:grid; grid-template-columns:44px minmax(56px,1fr) 44px; max-width:200px; gap:6px; }
.billing-quantity button { border:1px solid var(--dc-border); border-radius:7px; background:var(--dc-background-raised); color:var(--dc-text); min-height:44px; font-size:21px; padding:4px; }
.billing-quantity input { text-align:center; font-size:16px; min-width:0; padding:6px; min-height:44px; }
#billing-quantity-note { font-size:11px; line-height:1.5; margin:7px 0; }
.billing-total-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; padding:10px 0; font-size:12px; }
.billing-total-row strong { font-size:22px; }
#billing-checkout { display:flex; width:100%; min-height:44px; padding:9px 12px; justify-content:space-between; align-items:center; gap:8px; font-size:13px; }
#billing-checkout-unavailable { margin:8px 0 0; line-height:1.5; }
.billing-payment-note { border-top:1px solid var(--dc-border); padding-top:12px; margin:12px 0 8px; font-size:11px; line-height:1.5; color:var(--dc-text-muted); }
.billing-payment-note strong { color:var(--dc-text); font-weight:600; }
.billing-approval-note { color:var(--dc-text-muted); font-size:11px; line-height:1.5; margin:0; }
.billing-coming-soon { border-top:1px solid var(--dc-border); padding-top:12px; margin-top:12px; }
.billing-coming-soon button { width:100%; min-height:44px; padding:9px 12px; }
.billing-coming-soon p { font-size:11px; line-height:1.5; margin:8px 0 0; }
.billing-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; margin-top:12px; }
.billing-bottom p { max-width:600px; margin:0; line-height:1.5; }
.billing-bottom button { min-height:44px; padding:8px 0; }
#billing-message { margin:8px 0 0; line-height:1.5; min-height:0; }
#billing-message[data-state=success] { color:var(--dc-text-muted); }
.admin-paid-summary { border:1px solid var(--dc-brand-orange); border-radius:10px; padding:14px; margin-top:16px; }
.admin-paid-summary strong { display:block; font-size:13px; color:var(--dc-brand-orange); }
.admin-paid-summary p { font-size:12px; line-height:1.5; margin:8px 0 12px; }
.admin-paid-summary button { min-height:44px; font-size:12px; }
.billing-subscriptions { display:grid; gap:8px; margin-top:12px; padding-top:10px; border-top:1px solid var(--dc-border); }
.billing-subscriptions>div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; font-size:12px; line-height:1.5; }
.billing-subscriptions strong { font-weight:600; }
.billing-subscriptions span { color:var(--dc-text-muted); }
.billing-reduce-section { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; margin:12px 0; padding:14px 16px; border:1px solid var(--dc-border); border-radius:12px; background:var(--dc-surface); }
.billing-reduce-section>div { flex:1 1 260px; }
.billing-reduce-section h3 { margin:0 0 6px; font-size:15px; }
.billing-reduce-section .small-text { margin:4px 0; font-size:12px; line-height:1.5; max-width:440px; }
.billing-reduce-section form { display:grid; grid-template-columns:minmax(150px,200px) auto; align-items:center; gap:7px 14px; flex:0 1 370px; min-width:0; }
.billing-reduce-section label { grid-column:1/-1; font-size:12px; margin:0; }
.billing-reduce-section .billing-quantity { grid-column:1; width:100%; }
.billing-reduce-section #billing-reduce-price { grid-column:1; font-size:11px; line-height:1.5; margin:0; }
#billing-reduce-price strong { color:var(--dc-text); white-space:nowrap; }
#billing-reduce-review { grid-column:2; grid-row:2/4; font-size:12px; min-height:44px; padding:8px 12px; }
#billing-action-dialog { width:min(460px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); }
#billing-action-dialog h2 { font-size:18px; line-height:1.3; }
#billing-action-dialog p { font-size:13px; }
#billing-action-dialog .account-action-footer button { font-size:12px; min-height:44px; padding:8px 12px; }
.admin-paid-summary button+button { margin-left:8px; }
.saved-clip-player { margin-top:12px; }
.saved-clip-player>.clip-actions { margin-top:10px; }
@container billing (min-width:700px) {
  .billing-status-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.8fr); align-items:center; gap:10px 18px; }
  .billing-facts { margin:0; padding:0 0 0 18px; border-top:0; border-left:1px solid var(--dc-border); gap:8px 20px; }
  .billing-status-panel>.billing-subscriptions,.billing-status-panel>.billing-inline-note { grid-column:1/-1; }
}
@media (hover:hover) and (pointer:fine) {
  .billing-heading>button,.billing-bottom button,.billing-quantity button,.billing-quantity input,.billing-coming-soon button,#billing-checkout { min-height:36px; }
  .billing-heading>button,.billing-coming-soon button,#billing-checkout { padding-top:7px; padding-bottom:7px; }
  .billing-quantity { grid-template-columns:36px minmax(56px,1fr) 36px; max-width:180px; }
}
@media(max-width:700px) {
  .billing-heading { align-items:flex-start; gap:8px; }
  .billing-heading h2 { font-size:18px; }
  .billing-heading>button { font-size:12px; padding:8px 10px; }
  .billing-status-panel,.billing-plan { padding:14px; }
  .billing-facts { gap:10px 18px; }
}
@media(max-width:400px) {
  .billing-reduce-section { padding:14px; }
  .billing-reduce-section form { flex-basis:100%; grid-template-columns:minmax(130px,1fr) auto; gap:7px 9px; }
  #billing-reduce-review { padding:8px; }
}
