/* Account and settings left; balance above the purchase rows right. */
body:has(#section-account:not([hidden])) { min-height:100svh; display:flex; flex-direction:column; }
body:has(#section-account:not([hidden])) .topbar { flex-shrink:0; width:100%; }
body:has(#section-account:not([hidden])) .workspace { width:100%; flex:1; display:flex; flex-direction:column; }
body:has(#section-account:not([hidden])) main { flex:1; }
body:has(#section-account:not([hidden])) .page-footer { margin-top:24px; font-size:11px; }
#section-account { max-width:none; padding:10px 0 0; }
#section-account .page-heading { margin-bottom:26px; }
#section-account h1 { font-size:36px; letter-spacing:-.035em; line-height:1.2; }
#section-account .lead { font-size:14px; margin-top:9px; }
#section-account .account-grid { grid-template-columns:minmax(290px,.49fr) minmax(0,1fr); gap:28px; align-items:start; }
#section-account .account-sidebar, #section-account .account-purchases { min-width:0; padding:24px; background:#ffffffdf; border:1px solid #dbe7df; border-radius:12px; }
#section-account .account-purchases { margin:0; }
#section-account .account-field-label { font-size:13px; margin-bottom:8px; }
#section-account #signed-email { font-size:17px; font-weight:600; }
#section-account .verification-status { margin-top:24px; }
#section-account .verification-line { display:flex; align-items:center; gap:10px; margin:0; }
#section-account #verification-title { margin:0; font-size:13px; font-weight:400; color:var(--muted); }
#verified-mark { width:24px; height:24px; flex-shrink:0; color:var(--green); }
#verified-mark circle { fill:currentColor; }
#verified-mark path { fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#section-account #logout { margin:24px 0 0; padding:17px 0 0; min-height:0; border-top:1px solid var(--line); width:100%; text-align:left; color:var(--green); font-size:13px; text-decoration:underline; text-underline-offset:3px; }
#section-account .balance-card { border-left:0; border-top:1px solid var(--line); margin-top:23px; padding:20px 0 0; }
#section-account .balance-card h2 { font-size:16px; }
#section-account .balance-total { margin:8px 0 18px; }
#section-account .balance-amount { font-size:36px; line-height:1.05; }
#section-account .balance-card dl div { font-size:13px; padding:4px 0; }
#section-account .balance-card p { font-size:13px; line-height:1.5; margin:18px 0; }
#section-account #account-chat { min-height:43px; padding:10px 22px; font-size:14px; border-radius:8px; }
#section-account .packs-heading { margin:0 0 22px; align-items:center; gap:8px 14px; }
#section-account .packs-heading h2 { font-size:22px; letter-spacing:-.025em; }
#section-account #payment-mode { font-size:12px; }
#section-account .first-purchase-offer { display:flex; align-items:center; gap:16px; padding:15px 18px; margin:0 0 22px; background:#edf5f0; border:1px solid #d8e8df; border-radius:9px; color:#165441; }
.first-purchase-offer svg { width:29px; height:29px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.first-purchase-offer strong { font-size:14px; font-weight:600; }
.first-purchase-offer p { margin:4px 0 0; color:#4d6b5e; font-size:13px; line-height:1.4; }
#offer-countdown { font-variant-numeric:tabular-nums; }
#section-account .packs { border:1px solid var(--line); border-radius:10px; overflow:hidden; padding:0; }
#section-account .packs:empty { min-height:130px; display:grid; place-items:center; }
#section-account .packs:empty::after { content:'Пакеты временно недоступны'; padding:24px; font-size:14px; color:var(--muted); }
#section-account .pack { grid-template-columns:minmax(140px,1fr) auto 145px; gap:20px; padding:20px 16px; min-height:78px; }
#section-account .pack:first-child { border-top:0; }
#section-account .pack h3 { font-size:15px; font-weight:600; white-space:nowrap; }
#section-account .pack-price { display:flex; justify-content:flex-end; align-items:baseline; gap:20px; font-variant-numeric:tabular-nums; }
#section-account .pack-price s { font-size:14px; color:var(--muted); text-decoration-thickness:1.5px; }
#section-account .pack-price strong { color:var(--ink); font-size:17px; font-weight:600; }
#section-account .pack .button { min-height:42px; width:100%; padding:10px 12px; font-size:13px; border-radius:8px; }
#section-account .packs-note { margin:28px 0 4px; color:var(--muted); font-size:13px; line-height:1.5; }
#section-account input { caret-color:var(--green); }
#section-account:not(.is-signed) .balance-card dl { display:none; }
#section-account:not(.is-signed) .balance-total { display:inline-flex; margin-bottom:0; }
#section-account:not(.is-signed) .balance-amount { font-size:27px; }
#section-account:not(.is-signed) .balance-card p { margin:10px 0; }
#section-account #auth { margin-top:15px; }
#section-account .modes { margin-bottom:16px; }
#section-account .modes button { min-height:35px; }
#section-account input { min-height:38px; padding:8px 10px; }
#section-account .auth-actions { gap:8px; margin-top:10px; }
#section-account #auth-submit { min-height:39px; padding:9px 14px; font-size:13px; }
#section-account #forgot { font-size:12px; }
@media(min-width:1050px) and (max-height:800px) {
  body:has(#section-account:not([hidden])) .workspace main { padding-top:14px; }
  #section-account { padding-top:4px; }
  #section-account .page-heading { margin-bottom:20px; }
  #section-account h1 { font-size:30px; }
  #section-account .account-sidebar, #section-account .account-purchases { padding:20px; }
  #section-account .verification-status { margin-top:18px; }
  #section-account #logout { margin-top:18px; padding-top:13px; }
  #section-account .balance-card { margin-top:17px; padding-top:16px; }
  #section-account .balance-total { margin:7px 0 12px; }
  #section-account .balance-card p { margin:13px 0; }
  #section-account .packs-heading { margin-bottom:18px; }
  #section-account .first-purchase-offer { padding:12px 16px; margin-bottom:18px; }
  #section-account .pack { min-height:71px; padding:15px 14px; }
  #section-account .packs-note { margin-top:22px; }
  body:has(#section-account:not([hidden])) .page-footer { margin-top:16px; }
}
@media(min-width:1050px) and (max-height:680px) {
  #section-account .page-heading { margin-bottom:16px; }
  #section-account .account-sidebar, #section-account .account-purchases { padding:16px 20px; }
  #section-account:not(.is-signed) .balance-card { margin-top:13px; padding-top:12px; }
  #section-account:not(.is-signed) .balance-card p { font-size:12px; }
  #section-account:not(.is-signed) #auth { margin-top:10px; gap:5px; }
  #section-account:not(.is-signed) #password-field { margin-top:4px; }
  #section-account:not(.is-signed) .modes { margin-bottom:10px; }
  #section-account:not(.is-signed) .balance-card h2 { display:inline; margin-right:10px; }
}
@media(max-width:1200px) and (min-width:901px) {
  #section-account .account-grid { grid-template-columns:minmax(265px,.45fr) minmax(0,1fr); gap:20px; }
  #section-account .account-sidebar, #section-account .account-purchases { padding:18px; }
  #section-account .pack { grid-template-columns:minmax(115px,1fr) auto 120px; gap:12px; padding-inline:12px; }
  #section-account .pack-price { gap:10px; }
  #section-account .pack h3 { font-size:14px; }
}
@media(max-width:900px) {
  #section-account .account-grid { grid-template-columns:1fr; gap:20px; }
  #section-account .balance-card { border-top:0; border-left:1px solid var(--line); padding:0 0 0 24px; margin:0; }
  #section-account h1 { font-size:30px; }
}
@media(max-width:600px) {
  #section-account .account-sidebar { display:block; }
  #section-account .account-sidebar, #section-account .account-purchases { padding:20px 16px; }
  #section-account .balance-card { border-left:0; border-top:1px solid var(--line); margin-top:22px; padding:20px 0 0; }
  #section-account .packs-heading { align-items:flex-start; }
  #section-account .packs-heading h2 { font-size:20px; }
  #section-account .first-purchase-offer { padding:13px; gap:11px; }
  .first-purchase-offer strong { font-size:13px; }
  .first-purchase-offer p { font-size:12px; }
  #section-account .pack { grid-template-columns:minmax(0,1fr) auto; padding:16px 13px; gap:12px; }
  #section-account .pack h3 { font-size:13px; }
  #section-account .pack-price { gap:6px; flex-wrap:wrap; }
  #section-account .pack-price s { font-size:12px; }
  #section-account .pack-price strong { font-size:15px; }
  #section-account .pack .button { grid-column:1/-1; }
}
@media(min-width:1050px) and (max-height:800px) {
  #section-account .verification-actions { gap:8px; }
  #section-account .verification-actions .button { min-height:35px; padding:7px 9px; font-size:12px; }
  #section-account #verification-note { font-size:13px; line-height:1.45; margin:8px 0; }
  #section-account:not(.is-signed) #password-hint { margin:0; }
  #section-account:not(.is-signed) .auth-actions .text-button { min-height:32px; padding:4px 0; }
}
@media(min-width:1050px) and (max-height:720px) {
  body:has(#section-account:not([hidden])) .topbar { height:58px; }
  body:has(#section-account:not([hidden])) .workspace main { padding-top:8px; }
  body:has(#section-account:not([hidden])) .page-footer { margin-top:12px; padding:10px 0; }
  #section-account .page-heading { margin-bottom:16px; }
  #section-account h1 { font-size:28px; }
  #section-account .lead { margin-top:6px; }
  #section-account .account-sidebar, #section-account .account-purchases { padding:16px; }
  #section-account .verification-status { margin-top:14px; }
  #section-account #logout { margin-top:13px; padding-top:12px; }
  #section-account .balance-card { display:grid; grid-template-columns:1fr auto; gap:0 10px; margin-top:14px; padding-top:12px; }
  #section-account .balance-card h2 { grid-column:1; align-self:center; }
  #section-account .balance-total { grid-column:2; grid-row:1; margin:0; }
  #section-account .balance-amount { font-size:28px; }
  #section-account .balance-card dl { display:flex; gap:16px; grid-column:1/-1; margin-top:10px; }
  #section-account .balance-card dl div { flex:1; gap:6px; font-size:12px; }
  #section-account .balance-card p { grid-column:1/-1; margin:10px 0; font-size:12px; }
  #section-account #account-chat { grid-column:1/-1; justify-self:start; min-height:38px; padding:8px 16px; }
  #section-account .pack { min-height:65px; padding:11px 12px; }
  #section-account .packs-note { margin-top:18px; }
}
@media(min-width:1050px) {
  #auth-card:not(.is-forgot) #auth-title { display:none; }
  #section-account #password-field { display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:6px 8px; }
  #section-account #password-field label { grid-column:1; grid-row:1; }
  #section-account #password-hint { grid-column:2; grid-row:1; font-size:11px; }
  #section-account #password { grid-column:1/-1; grid-row:2; }
}
/* Keep balance next to the purchase decision in both DOM and visual order. */
#section-account .account-purchases .balance-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 24px; border:0; border-bottom:1px solid var(--line); margin:0 0 24px; padding:0 0 24px; }
#section-account .account-purchases .balance-card h2 { display:block; grid-column:1; margin:0; }
#section-account .account-purchases .balance-total { grid-column:1; grid-row:auto; margin:8px 0 0; }
#section-account .account-purchases .balance-card dl { grid-column:1; max-width:340px; margin:12px 0 0; }
#section-account .account-purchases .balance-card p { grid-column:1; margin:12px 0 0; }
#section-account .account-purchases #account-chat { grid-column:2; grid-row:1 / 5; align-self:center; justify-self:end; }
@media(max-width:600px) {
  #section-account .account-purchases .balance-card { grid-template-columns:minmax(0,1fr); }
  #section-account .account-purchases #account-chat { grid-column:1; grid-row:auto; justify-self:start; margin-top:12px; }
}