/* billing.html styles. Colors come from market-theme tokens. */
body { margin: 0; font-family: var(--font-family, Inter, system-ui, sans-serif); background: var(--content-bg); color: var(--text-primary); }
.app-shell { display: flex; min-height: 100vh; background: var(--content-bg); }
.page-shell { flex: 1; min-width: 0; margin-left: var(--sidebar-width); }
.page { padding: 24px; }
.page-inner { max-width: 1220px; margin: 0 auto; display: grid; gap: 22px; }
.hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--surface-border); box-shadow: var(--shadow-sm); }
.hero h1 { margin: 0; font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.04em; }
.hero p { margin: 8px 0 0; color: var(--text-muted); max-width: 680px; line-height: 1.6; }
.status-card { min-width: 280px; padding: 16px; border-radius: 14px; background: var(--surface-soft); border: 1px solid var(--surface-border); }
.status-card label { display: block; color: var(--text-muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.status-card strong { display: block; font-size: 20px; }
.billing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.coupon-card { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; padding: 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--surface-border); box-shadow: var(--shadow-sm); }
.coupon-fields { display: grid; grid-template-columns: minmax(160px, 220px) minmax(180px, 1fr); gap: 12px; }
.field label { display: block; margin: 0 0 7px; color: var(--text-muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.field input, .field select { width: 100%; padding: 12px 13px; border-radius: 10px; border: 1px solid var(--surface-border); background: var(--surface-soft); color: var(--text-primary); outline: none; font-weight: 700; }
.field input:focus, .field select:focus { border-color: rgba(37,99,235,.55); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.coupon-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.coupon-message { grid-column: 1 / -1; margin: -2px 0 0; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.coupon-message.ok { color: var(--mc-malachite); font-weight: 800; }
.coupon-message.error { color: var(--mc-garnet); font-weight: 800; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--surface-border); box-shadow: var(--shadow-sm); min-height: 100%; }
.plan-card.featured { border-color: rgba(37,99,235,.45); box-shadow: 0 18px 40px rgba(37,99,235,.14); }
.plan-card.active { border-color: rgba(22,163,74,.5); box-shadow: 0 18px 40px rgba(22,163,74,.12); }
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.plan-name { margin: 0; font-size: 20px; }
.plan-price { font-size: 32px; font-weight: 900; letter-spacing: -0.04em; }
.plan-price span { font-size: 13px; color: var(--text-muted); font-weight: 700; letter-spacing: 0; }
.plan-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--text-muted); font-size: 14px; line-height: 1.45; }
.plan-card li::before { content: "✓"; color: var(--mc-malachite); font-weight: 900; margin-right: 8px; }
.plan-card .btn { margin-top: auto; }
.usage-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 18px; }
.usage-card { padding:18px;border:1px solid var(--surface-border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm); }
.usage-card header { display:flex;justify-content:space-between;gap:12px;align-items:flex-start; }
.usage-card h3 { margin:0;font-size:15px; }
.usage-card strong { font-size:20px; }
.usage-track { height:8px;border-radius:999px;background:var(--surface-muted,var(--mc-secondary));overflow:hidden;margin-top:14px; }
.usage-fill { height:100%;border-radius:inherit;background:var(--mc-facet); }
.usage-card.warning .usage-fill { background:var(--mc-citrine-warn); }
.usage-card.critical .usage-fill,.usage-card.limit_reached .usage-fill { background:var(--mc-garnet); }
.usage-meta { margin:9px 0 0;color:var(--text-muted);font-size:12px; }
@media (max-width:860px) { .usage-grid { grid-template-columns:1fr; } }
.pill { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(37,99,235,.1); color: var(--mc-azurite-info); border: 1px solid rgba(37,99,235,.18); }
.pill.ok { background: rgba(22,163,74,.12); color: var(--mc-malachite); border-color: rgba(22,163,74,.22); }
.pill.warn { background: rgba(245,158,11,.12); color: var(--mc-citrine-warn); border-color: rgba(245,158,11,.24); }
.matrix { overflow: auto; border-radius: 16px; border: 1px solid var(--surface-border); background: var(--surface); }
.matrix table { width: 100%; border-collapse: collapse; min-width: 760px; }
.matrix th, .matrix td { padding: 13px 14px; border-bottom: 1px solid var(--surface-border); text-align: left; }
.matrix th { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.matrix td { color: var(--text-primary); font-size: 14px; }
@media (max-width: 1100px) { .billing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero { flex-direction: column; } .status-card { width: 100%; } }
@media (max-width: 760px) { .page-shell { margin-left: 0; } .page { padding: 16px; } .billing-grid, .coupon-card, .coupon-fields { grid-template-columns: 1fr; } .coupon-actions { justify-content: stretch; } .coupon-actions .btn { flex: 1; } }

.billing-actions{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 24px}.billing-actions .btn{min-height:44px}.billing-dialog{box-sizing:border-box;width:min(560px,calc(100vw - 32px));max-height:85dvh;overflow:auto;border:1px solid var(--ux-line,#cbd3d8);border-radius:14px;padding:24px;background:var(--ux-surface,#fff);color:var(--ux-ink,#18252d)}.billing-dialog::backdrop{background:rgba(0,0,0,.6)}.billing-dialog-close{float:right}.billing-dialog h2{clear:both;padding-top:16px}.billing-dialog p{line-height:1.6;overflow-wrap:anywhere}.billing-dialog label{display:flex;align-items:flex-start;gap:12px;margin:20px 0}.billing-dialog input[type=checkbox]{flex:none;margin-top:4px}#billingDialogError{color:var(--ux-danger,#b42336)}#billingNotice[data-error=true]{border-color:var(--ux-danger,#b42336)!important}[hidden]{display:none!important}.billing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.plan-card{min-width:0}.usage-card{min-width:0}.billing-grid .btn{min-height:44px;width:100%}@media(max-width:650px){.billing-grid{grid-template-columns:1fr}.billing-dialog{padding:20px}.billing-actions .btn{flex:1 1 auto}.page-inner{min-width:0}}

.page-inner>section.card,#billingNotice{padding:24px}.billing-actions a.btn,.page-inner>section.card>a.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;min-height:44px;box-sizing:border-box;line-height:1.4;text-align:center;text-decoration:none}.billing-actions{align-items:stretch}@media(max-width:650px){.page-inner>section.card,#billingNotice{padding:18px}.page-inner>section.card>a.btn{width:100%}}