/* Billing uses the same opaque settings surfaces and Onest as the profile. */
.plan-badge { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border:1px solid var(--border); border-radius:999px; background:var(--bg2); color:var(--t2); font:400 14px/1.4 var(--font-ui); white-space:nowrap; cursor:pointer; }
.plan-badge strong { color:var(--t); font-weight:500; }
.plan-badge svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; }
.plan-badge:hover:not(:disabled) { background:var(--accent-soft); border-color:var(--accent-soft); }
.plan-badge:disabled { opacity:1; cursor:default; }
.plan-badge:disabled svg { display:none; }
#page-settings #set-billing { max-width:none; }
#page-settings .billing-content { display:grid; gap:24px; container-type:inline-size; font-family:var(--font-ui); }
#page-settings :is(.billing-account,.billing-history,.billing-catalog) { min-width:0; padding:28px; border-radius:28px; background:var(--bg2); box-shadow:var(--ds-shadow-card); }
#page-settings .billing-account-head { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-bottom:24px; }
#page-settings .billing-content h2 { margin:0; color:var(--t); font:700 24px/1.3 var(--font-ui); letter-spacing:-.02em; }
#page-settings .billing-account-head p, #page-settings .billing-section-head p { margin:8px 0 0; color:var(--t2); font:400 14px/1.5 var(--font-ui); }
#page-settings .billing-account-price { font:650 26px/1.3 var(--font-ui); white-space:nowrap; letter-spacing:-.02em; }
#page-settings .billing-account-price span, #page-settings .billing-offer-price span { color:var(--t2); font:400 14px/1.5 var(--font-ui); letter-spacing:normal; }
#page-settings .billing-quota-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
#page-settings .billing-quota { min-width:0; padding:24px; }
#page-settings .billing-quota:first-child { padding-left:0; }
#page-settings .billing-quota:last-child { padding-right:0; }
#page-settings .billing-quota + .billing-quota { border-left:1px solid var(--border); }
#page-settings .billing-quota-title { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
#page-settings .billing-quota-title h3 { margin:0; color:var(--t); font:600 16px/1.4 var(--font-ui); }
#page-settings .billing-quota-state { margin-top:16px; color:var(--t2); font:400 14px/1.4 var(--font-ui); }
#page-settings .billing-quota-value { display:block; margin-top:4px; color:var(--t); font:700 40px/1.15 var(--font-ui); letter-spacing:-.025em; font-variant-numeric:lining-nums proportional-nums; }
#page-settings .billing-quota.danger .billing-quota-value { color:var(--red); }
#page-settings .billing-quota.warning .billing-quota-value { color:var(--orange); }
#page-settings .billing-quota p { margin:8px 0 0; min-height:21px; color:var(--t2); font:400 14px/1.5 var(--font-ui); }
#page-settings .billing-progress { margin-top:16px; height:6px; background:var(--bg3); border-radius:999px; }
#page-settings .billing-progress > span { background:var(--a); }
#page-settings .billing-progress.danger > span { background:var(--red); }
#page-settings .billing-progress.warning > span { background:var(--orange); }
#page-settings .billing-tag { padding:4px 8px; background:var(--accent-soft); color:var(--a); font:500 12px/1.4 var(--font-ui); border:0; }
#page-settings .billing-included { margin-top:16px; }
#page-settings :is(.billing-included,.billing-offer,.billing-technical) summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; color:var(--t); font:500 14px/1.4 var(--font-ui); cursor:pointer; list-style:none; }
#page-settings summary::-webkit-details-marker { display:none; }
#page-settings :is(.billing-included,.billing-offer,.billing-technical) summary svg { width:18px; height:18px; flex-shrink:0; stroke:currentColor; stroke-width:1.8; fill:none; }
#page-settings details[open] > summary svg { transform:rotate(180deg); }
#page-settings .billing-included ul { display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; margin:16px 0; padding-left:20px; font:400 14px/1.5 var(--font-ui); color:var(--t); }
#page-settings .billing-plan-facts { padding:16px 0 0; gap:20px; background:none; border-top:1px solid var(--border); border-radius:0; }
#page-settings .billing-plan-facts span { color:var(--t2); font:400 14px/1.5 var(--font-ui); }
#page-settings .billing-plan-facts strong { font:500 14px/1.5 var(--font-ui); white-space:normal; }
#page-settings .billing-included > p { margin:16px 0 0; color:var(--t2); font:400 14px/1.5 var(--font-ui); }
#page-settings .billing-section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 24px; }
#page-settings .billing-site-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; color:var(--t2); background:var(--bg2); border:1px solid var(--border); border-radius:999px; font:500 14px/1.4 var(--font-ui); text-decoration:none; white-space:nowrap; }
#page-settings .billing-site-link svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
#page-settings .billing-offers { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
#page-settings .billing-offer { min-width:0; padding:0 24px; display:flex; flex-direction:column; }
#page-settings .billing-offer:first-child { padding-left:0; }
#page-settings .billing-offer:last-child { padding-right:0; }
#page-settings .billing-offer + .billing-offer { border-left:1px solid var(--border); }
#page-settings .billing-offer-head { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-height:32px; }
#page-settings .billing-offer h3 { margin:0; font:650 20px/1.4 var(--font-ui); color:var(--t); letter-spacing:-.015em; }
#page-settings .billing-offer-price { margin-top:20px; font:650 24px/1.4 var(--font-ui); color:var(--t); white-space:nowrap; letter-spacing:-.02em; }
#page-settings .billing-offer-price span { display:block; }
#page-settings .billing-offer-volume { margin:16px 0 0; font:600 16px/1.4 var(--font-ui); }
#page-settings .billing-offer-extra { margin:4px 0 16px; color:var(--t2); font:400 14px/1.5 var(--font-ui); }
#page-settings .billing-offer details { border-top:1px solid var(--border); margin-bottom:20px; padding-top:8px; }
#page-settings .billing-offer ul { padding-left:18px; margin:8px 0 16px; color:var(--t2); font:400 14px/1.55 var(--font-ui); }
#page-settings .billing-offer li + li { margin-top:8px; }
#page-settings .billing-offer details p { color:var(--t2); font:400 14px/1.5 var(--font-ui); }
#page-settings .billing-plan-link { display:inline-flex; justify-content:center; align-items:center; min-height:44px; margin:0; padding:0 16px; border:1px solid var(--border); border-radius:999px; color:var(--t); background:var(--bg2); font:500 14px/1.4 var(--font-ui); }
#page-settings .billing-offer .billing-plan-link { margin-top:auto; width:100%; }
#page-settings .billing-offer.is-current .billing-plan-link { color:var(--a); background:var(--accent-soft); border-color:transparent; }
#page-settings .billing-plan-link:disabled { opacity:1; cursor:default; }
#page-settings .billing-plan-link:hover:not(:disabled) { color:var(--a); background:var(--accent-soft); }
#page-settings .billing-ultra { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:24px; padding-top:20px; border-top:1px solid var(--border); color:var(--t2); font:400 14px/1.5 var(--font-ui); }
#page-settings .billing-operations { margin:0; border:0; border-radius:0; }
#page-settings .billing-operation { grid-template-columns:minmax(0,1fr) auto; gap:24px; padding:16px 0; }
#page-settings .billing-operation:last-child { border-bottom:0; }
#page-settings .billing-operation-main strong { color:var(--t); font:500 15px/1.45 var(--font-ui); }
#page-settings .billing-operation-main span, #page-settings .billing-operation-delta { font:400 14px/1.5 var(--font-ui); }
#page-settings .billing-operation-delta { white-space:normal; }
#page-settings .billing-empty { min-height:0; padding:12px 0 24px; margin:0; color:var(--t2); text-align:left; font:400 14px/1.5 var(--font-ui); }
#page-settings .billing-technical { border-radius:0; border-top:1px solid var(--border); background:none; box-shadow:none; padding:12px 0 0; margin:0; }
#page-settings details.billing-technical > summary { padding:0; color:var(--t2); }
#page-settings .billing-technical summary span:nth-child(2) { margin-left:auto; }
#page-settings .billing-technical-body { padding:16px 0 0; }
#page-settings .billing-technical-body > p { color:var(--t2); font:400 14px/1.5 var(--font-ui); margin:0 0 16px; }
#page-settings .billing-table-wrap { max-width:100%; overflow-x:auto; border-radius:16px; }
#page-settings .billing-table-wrap table { min-width:560px; font:400 14px/1.5 var(--font-ui); }
#page-settings .billing-updated { display:flex; align-items:center; justify-content:flex-end; gap:16px; margin:0; color:var(--t2); font:400 14px/1.5 var(--font-ui); }
#page-settings .billing-updated button, #page-settings .billing-error button { min-height:44px; padding:0 16px; border-radius:999px; border:1px solid var(--border); background:var(--bg2); color:var(--t); font:500 14px/1.4 var(--font-ui); }
@container (max-width:1050px) {
  #page-settings .billing-quota-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #page-settings .billing-quota:nth-child(odd) { padding-left:0; border-left:0; }
  #page-settings .billing-quota:nth-child(even) { padding-right:0; }
  #page-settings .billing-quota:nth-child(n+3) { border-top:1px solid var(--border); }
}
@container (max-width:600px) {
  #page-settings :is(.billing-account,.billing-history,.billing-catalog) { padding:20px; border-radius:24px; }
  #page-settings .billing-account-head { align-items:flex-start; flex-direction:column; gap:12px; }
  #page-settings .billing-content h2 { font-size:22px; }
  #page-settings .billing-account-price { font-size:24px; }
  #page-settings .billing-quota-grid, #page-settings .billing-offers { grid-template-columns:minmax(0,1fr); gap:0; }
  #page-settings .billing-quota, #page-settings .billing-quota:first-child, #page-settings .billing-quota:last-child { padding:20px 0; }
  #page-settings .billing-quota + .billing-quota { border-left:0; border-top:1px solid var(--border); }
  #page-settings .billing-quota-value { font-size:36px; }
  #page-settings .billing-included ul, #page-settings .billing-plan-facts { grid-template-columns:minmax(0,1fr); }
  #page-settings .billing-offer, #page-settings .billing-offer:nth-child(n) { padding:20px 0; border-left:0; border-top:1px solid var(--border); }
  #page-settings .billing-offer:first-child { padding-top:0; border-top:0; }
  #page-settings .billing-section-head { align-items:flex-start; }
  #page-settings .billing-site-link { padding:0 12px; }
  #page-settings .billing-ultra { align-items:flex-start; flex-direction:column; gap:12px; }
  #page-settings .billing-operation { grid-template-columns:minmax(0,1fr); gap:6px; padding-inline:0; }
  #page-settings .billing-technical summary span:nth-child(2) { display:none; }
  #page-settings .billing-updated { justify-content:space-between; flex-wrap:wrap; }
}
@media (max-width:760px) { .plan-badge { padding:0 12px; min-height:44px; } .plan-badge > span,.plan-badge > svg { display:none; } }

#billingContent .billing-package-policy { margin:20px 0 0; padding:16px 18px; border-radius:18px; background:var(--surface-muted,#f3f3f7); color:var(--t2); font-size:14px; line-height:1.55; }
#billingContent .billing-reserved { margin-top:8px; color:var(--t2); }

#page-settings .billing-next-plan { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:20px; padding:20px; border-radius:20px; background:var(--bg3); }
#page-settings .billing-next-plan h3 { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 16px; margin:0; font:650 20px/1.4 var(--font-ui); }
#page-settings .billing-next-plan h3 span { color:var(--t2); font:500 15px/1.5 var(--font-ui); }
#page-settings .billing-next-plan p { margin:8px 0 0; color:var(--t2); font:400 14px/1.5 var(--font-ui); }
#page-settings .billing-next-plan .billing-upgrade-button { flex-shrink:0; background:var(--a); color:#fff; border-color:transparent; }
#page-settings .billing-next-plan .billing-upgrade-button:disabled { color:var(--t2); background:var(--bg2); border-color:var(--border); }
#page-settings .billing-upgrade-feedback[role=alert] { color:var(--red); }
@container (max-width:600px) {
  #page-settings .billing-next-plan { flex-direction:column; align-items:stretch; gap:16px; padding:16px; }
}