.billing-panel{margin-top:24px}.billing-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.billing-heading h2{margin-top:0}.billing-heading p{margin-bottom:12px}.billing-sandbox{border-radius:18px;background:var(--bg);padding:16px;margin:16px 0;border:1px solid var(--line)}.billing-sandbox p{margin:8px 0 0;font-size:.85rem;line-height:1.6}.billing-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}.billing-plan{display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);border-radius:20px;padding:18px}.billing-plan>strong{font-size:1.6rem}.billing-plan strong small{display:block;font-size:.8rem;font-weight:400;color:var(--muted)}.billing-plan .button{margin-top:auto;min-height:44px}.billing-current{display:grid;justify-items:start;gap:12px;margin-top:16px}.billing-current p{margin:0}.billing-confirm-price{font-size:1.5rem}.admin-subscription{display:grid;gap:8px;justify-items:start}.admin-subscription small{font-size:.75rem}.admin-subscription a{font-size:.8rem;color:var(--green);min-height:32px;display:flex;align-items:center}.admin-subscription .text-button{min-height:44px}.billing-panel .error-message{overflow-wrap:anywhere}@media(max-width:480px){.billing-plan{padding:14px}.billing-plans{gap:10px}.billing-plan .button{padding-inline:10px;font-size:.8rem}.billing-panel{padding:20px}}
.subscription-header { width: 100%; }
.subscription-content { width: 100%; max-width: 780px; margin: 64px auto 30px; }
.subscription-account { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 0 8px 22px; }
.subscription-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.subscription-identity .avatar { flex-shrink: 0; width: 44px; height: 44px; }
.subscription-identity > div { min-width: 0; }
.subscription-identity strong, .subscription-identity span:not(.avatar) { display: block; overflow-wrap: anywhere; }
.subscription-identity strong { font-size: .875rem; }
.subscription-identity span:not(.avatar) { margin-top: 4px; font-size: .8125rem; color: var(--muted); }
.subscription-logout { display: flex; align-items: center; gap: 8px; min-height: 44px; flex-shrink: 0; font-size: .875rem; }
.subscription-logout svg { width: 18px; height: 18px; }
.billing-payment-panel { margin-top: 0; padding: 36px; box-shadow: 0 12px 44px #173a4d0b; }
.billing-payment-panel h1 { font-size: clamp(1.55rem, 4vw, 2rem); margin: 0; }
.billing-payment-panel .billing-heading > div { min-width: 0; }
.billing-payment-panel .billing-heading p { margin-top: 12px; line-height: 1.7; }
.billing-payment-panel .billing-plan { padding: 24px; gap: 16px; }
.billing-payment-panel .billing-plan > strong { font-size: 2rem; }
.billing-payment-panel .billing-plan .button { min-height: 48px; }
.subscription-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin: 20px 8px 0; color: var(--muted); font-size: .75rem; }
.subscription-footer p { display: flex; align-items: center; gap: 8px; }
.subscription-footer svg { width: 16px; height: 16px; flex-shrink: 0; }
.subscription-footer .text-button { min-height: 44px; font-size: inherit; }
@media (max-width: 680px) { .subscription-content { margin-top: 36px; } .subscription-account { align-items: flex-start; gap: 12px; margin-inline: 0; } .subscription-identity { gap: 10px; } .billing-payment-panel { padding: 26px 22px; } .subscription-footer { justify-content: center; text-align: center; } }
@media (max-width: 480px) { .subscription-account { flex-wrap: wrap; } .subscription-logout { margin-left: auto; } .billing-payment-panel .billing-plans { grid-template-columns: minmax(0, 1fr); gap: 14px; } .billing-payment-panel .billing-plan { padding: 20px; } }