.page-head { display:flex; align-items:center; gap:16px; min-height:48px; border-bottom:1px solid var(--line); }
.page-head .page-tabs { flex:1; border:0; }
.page-head > a { color:var(--green); font-weight:600; }
#account-root { margin-left:auto; position:relative; flex:none; }
#account-root summary { cursor:pointer; padding:8px 0 8px 8px; }
.account-status { color:var(--green); margin-left:8px; }
.account-status.expired { color:var(--red); }
.account-status.unpaid { color:var(--muted); }
.account-menu { position:absolute; right:0; top:100%; z-index:20; display:grid; gap:12px; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:6px; width:280px; max-width:calc(100vw - 24px); overflow-wrap:anywhere; }
.account-menu a, .account-login { color:var(--cyan); }
.account-menu button { justify-content:flex-start; padding:0; }
#expiry-notice { display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--yellow); padding:8px 12px; border-bottom:1px solid var(--line); }
#expiry-notice[hidden], #account-notice[hidden], [hidden] { display:none !important; }
#account-notice { padding:8px 12px; color:var(--yellow); }
.account-page { max-width:720px; margin:0 auto; padding:0 20px 40px; }
.account-form { max-width:380px; margin:48px auto; }
.account-form h1, .payment-content h1 { font-size:22px; margin:0 0 24px; }
.account-form form { display:grid; gap:12px; }
.account-form label { display:grid; gap:6px; color:var(--muted); }
.account-form input, .payment-content input, .payment-content select { min-width:0; width:100%; min-height:40px; background:var(--surface); border:1px solid #536057; border-radius:4px; padding:8px 10px; font:inherit; color:var(--text); }
.account-primary { display:inline-flex; justify-content:center; align-items:center; min-height:40px; padding:8px 16px; border:1px solid #388961; border-radius:4px; background:#19462f; color:var(--text); font-weight:600; }
.account-feedback { color:var(--yellow); overflow-wrap:anywhere; }
.account-secondary { color:var(--muted); font-size:12px; }
#registration-notice { margin-top:16px; }
#registration-notice p { margin:0; }
#registration-notice .registration-plan { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; margin-top:6px; }
.registration-plan > strong { font-size:16px; }
.browser-options { display:grid; gap:12px; }
.browser-options button { display:block; padding:12px; border:1px solid var(--line); text-align:left; overflow-wrap:anywhere; }
.browser-options small { display:block; color:var(--muted); }
#paywall { padding:64px 16px; text-align:center; }
#paywall h1 { font-size:20px; }
.payment-content { padding-top:32px; }
.payment-choice { display:flex; align-items:center; gap:20px; margin:18px 0; }
.payment-choice input { width:auto; min-height:auto; }
.payment-price { font-size:24px; font-weight:600; }
.payment-price small { font-size:13px; font-weight:400; color:var(--muted); }
.payment-active { padding:20px 0; border-top:1px solid var(--line); margin-top:24px; }
.payment-active code, .payment-orders code { overflow-wrap:anywhere; white-space:normal; }
.payment-actions { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }
.payment-actions button, .payment-actions a { padding:8px 12px; min-height:36px; border:1px solid #536057; border-radius:4px; }
.payment-orders { margin-top:32px; border-top:1px solid var(--line); }
.payment-orders h2 { font-size:16px; }
.payment-order { border-bottom:1px solid var(--line); padding:14px 0; overflow-wrap:anywhere; }
.payment-order button { margin-top:8px; color:var(--cyan); }
.payment-success { color:var(--green); }
.order-details { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:18px 20px; margin:24px 0; padding:24px 0; border-block:1px solid var(--line); }
.order-details dt { color:var(--muted); }
.order-details dd { margin:0; overflow-wrap:anywhere; }
.order-details code { white-space:normal; }
.order-transaction { color:var(--cyan); }
@media (max-width:600px) { .page-head { gap:8px; } .page-tabs { gap:12px; } #account-root summary { font-size:12px; } .account-status { margin-left:3px; } .account-page { padding:0 12px 24px; } }