.billing-page { max-width: 1100px; }
.billing-page > h1 { margin: 24px 0; }
.billing-page .account-card { margin-bottom: 24px; }
.billing-page .payment-table-wrap table { min-width: 680px; }
.billing-page .payment-table-wrap :is(th,td) { padding: 12px; text-align: left; }
.billing-page .account-card .billing-price { font-size: clamp(28px, 5vw, 44px); line-height: 1.4; color: var(--text); }
.billing-plan { max-width: 620px; margin-inline: auto; }
.billing-plan-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:stretch; }
.billing-plan-grid .billing-plan { width:100%; margin-inline:0; }
.billing-plan[data-plan-tier] { display:flex; flex-direction:column; }
.billing-plan-intro { color:var(--muted); min-height:3.6em; }
.billing-cycle-tabs { display:flex; gap:4px; padding:5px; margin-bottom:24px; background:var(--bg-deep); border:1px solid var(--line); border-radius:12px; }
.billing-cycle-tabs [role="tab"] { flex:1; min-height:46px; padding:10px; border-radius:8px; font-size:17px; }
.billing-cycle-tabs [aria-selected="true"] { background:var(--gold); color:#152a2e; font-weight:600; }
.billing-cycle-tabs [role="tab"]:focus-visible { outline:2px solid var(--gold-bright); outline-offset:2px; }
.billing-cycle-panel { display:flex; flex:1; flex-direction:column; gap:10px; }
.billing-plan[data-tabs-ready] .billing-cycle-heading { display:none; }
.billing-plan:not([data-tabs-ready]) .billing-cycle-panel + .billing-cycle-panel { margin-top:24px; border-top:1px solid var(--line); padding-top:20px; }
.billing-plan .billing-plan-quota { margin-block:12px 20px; }
.billing-offer-actions { margin-top:auto; padding-top:8px; }
.billing-offer-actions .button { width:100%; }
.billing-offer-actions .account-hint { padding:12px; margin:0; border:1px solid var(--line); border-radius:8px; text-align:center; }
:root[data-text-size="large"] .billing-cycle-tabs [role="tab"] { font-size:21px; }
.billing-equivalent { color:var(--gold-deep,var(--text)); font-weight:600; }
@media(max-width:760px) { .billing-plan-grid { grid-template-columns:1fr; gap:0; } }
.billing-price { font-size: clamp(28px, 5vw, 44px); font-weight: 700; line-height: 1.4; }
.billing-price small { font-size: 16px; color: var(--muted); font-weight: 400; }
.billing-benefits { padding-left: 1.4em; line-height: 2; margin-block: 24px; }
.billing-plan > .text-link { display: block; margin-top: 20px; }
.billing-form { display: grid; gap: 18px; }
.billing-form label { display: grid; gap: 8px; margin: 0; }
.billing-form :is(input,select,textarea) { width: 100%; max-width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 12px; font: inherit; background: var(--surface); color: var(--text); }
.billing-form select { white-space: normal; }
.billing-form small { color: var(--muted); line-height: 1.6; }
.billing-check { display: flex !important; align-items: flex-start; gap: 10px !important; line-height: 1.7; margin: 18px 0; }
.billing-check input { width: 20px !important; height: 20px; flex: 0 0 20px; margin-top: 5px; }
.billing-check a { text-decoration: underline; }
.billing-agreement + .billing-agreement { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 24px; }
.billing-agreement p { overflow-wrap: anywhere; }
.billing-profile { margin-top: 20px; }
.billing-profile summary { cursor: pointer; padding: 10px 0; }
.billing-profile form { margin-top: 16px; }
.billing-dialog { width: min(580px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: auto; border: 1px solid var(--line,#b6bdc7); border-radius: 16px; padding: 28px; color: var(--text,#202d3b); background: var(--surface,#fff); }
.billing-dialog::backdrop { background: #07121ccc; }
.billing-dialog h2 { margin: 0 0 18px; font-size: 24px; }
.billing-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: 20px; }
.billing-dialog label:not(.billing-check) { display: grid; gap: 6px; margin-top: 14px; }
.billing-dialog :is(input:not([type=checkbox]),textarea) { width: 100%; padding: 10px; border: 1px solid var(--line,#aaa); border-radius: 5px; font: inherit; }
.chat-account { position: relative; }
.chat-account > summary { cursor: pointer; list-style: none; width: 100%; }
.chat-account > summary::-webkit-details-marker { display: none; }
.chat-account > summary::after { content: '⋯'; margin-left: auto; font-size: 24px; }
.chat-account-menu { position: absolute; bottom: calc(100% - 5px); left: 8px; right: 8px; z-index: 20; border: 1px solid var(--line); border-radius: 12px; padding: 8px; background: var(--surface); }
.chat-account-menu :is(a,button) { display: block; width: 100%; min-height: 44px; padding: 12px; color: var(--text); font: inherit; text-align: left; border-radius: 6px; }
.chat-account-menu :is(a,button):hover { background: var(--surface-hover); }
.chat-account-menu form { margin: 0; }
.billing-admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.billing-admin .table { min-width: 650px; }
.billing-admin form.d-flex > .btn { white-space: nowrap; }
.billing-admin .billing-dialog { color: #172e3e; background: #fff; }
.billing-admin .billing-dialog .button { padding:10px 16px; border:1px solid #b8c2cd; border-radius:6px; background:#fff; }
.billing-admin .billing-dialog .button-primary { background:#173d50; color:#fff; }
[data-invoice-field][hidden] { display: none !important; }
.legal-company, .billing-agreement, .billing-profile { overflow-wrap:anywhere; }
.legal-company dl { margin-block:16px; }
.legal-company dt { font-weight:600; }
.legal-company dd { margin:0 0 12px; }
.billing-request-text { white-space:pre-wrap; overflow-wrap:anywhere; }
.billing-form select { width:100%; min-height:44px; max-width:100%; }
.legal-page p { overflow-wrap:anywhere; }
@media print { .site-header, .site-footer, .legal-page > a { display:none; } .legal-page { max-width:none; color:#000; } .legal-content section { break-inside:avoid; } }
@media(max-width:640px) { .billing-dialog { padding:20px; } .billing-admin-grid { grid-template-columns:1fr; } .billing-price { font-size:32px; } .billing-actions > * { flex:1; } }
@media(max-width:360px) { .site-header .nav-actions .member-dropdown > .nav-dropdown-toggle { padding-inline:6px; gap:2px; } .billing-page .account-heading { flex-wrap:wrap; gap:12px; } }
