/* Additive account controls. Existing homepage, themes and animation are unchanged. */
.account-in { flex-wrap:wrap; padding-top:8px; padding-bottom:8px; }
.account-note { overflow-wrap:anywhere; flex:1; min-width:160px; font-size:14px; }

/* Navbar account buttons - subtle login, orange register */
.account-btn { flex-shrink:0; min-height:44px; padding:8px 16px; font-size:15px; font-weight:650;
  border-radius:10px; border:0; cursor:pointer; transition:all .15s; }
#accountBtnLogin, #accountBtnLogout { background:transparent; color:var(--ink-2); }
#accountBtnLogin:hover, #accountBtnLogout:hover { background:var(--raised); color:var(--ink); }
#accountBtnRegister { background:var(--brand); color:#fff; }
#accountBtnRegister:hover { background:var(--brand-hover); }
#accountBtnRecharge { background:var(--brand-tint); color:var(--brand-text); }
#accountBtnRecharge:hover { background:var(--brand-line); }

/* Auth modal refinements */
.auth-modal { padding:28px 26px; }
.auth-modal h2 { font-size:23px; font-weight:700; letter-spacing:-0.01em; margin:0 0 8px; }
.auth-modal .auth-close { z-index:1; width:44px; height:44px; top:12px; right:12px; font-size:22px; }

/* Auth tabs - remove inline styles via clean selectors */
.auth-tabs { display:flex; gap:0; margin-bottom:22px; border-bottom:1.5px solid var(--line); }
.auth-tab { flex:1; height:44px; padding:0 4px; border:0; background:transparent;
  font-size:15px; font-weight:650; color:var(--ink-3); cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1.5px; transition:all .15s; }
.auth-tab:hover { color:var(--ink); }
.auth-tab.active { color:var(--brand-text); border-bottom-color:var(--brand); }

/* Form descriptions - nested inside form containers */
#formLogin p, #formRegister p { font-size:14.5px; line-height:1.6; color:var(--ink-2); margin:0 0 20px; }

/* Form typography refinement */
.auth-modal form label { display:block; font-size:14px; font-weight:650; margin-bottom:7px; color:var(--ink); }
.auth-modal form label:not(:first-child) { margin-top:18px; }
.auth-modal input { min-height:48px; font-size:16px; padding:11px 13px; border-radius:11px;
  border:1.5px solid var(--line-strong); background:var(--raised); }
.auth-modal input:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint); }

/* Error message styling */
.auth-error { min-height:24px; padding:6px 0; font-size:14px; line-height:1.5; color:var(--danger); }

/* Modal submit buttons - register orange, login subtle */
.auth-modal .btn { min-height:50px; margin-top:10px; border-radius:12px; font-size:16px; font-weight:700; }
#formRegister .btn { background:var(--brand); color:#fff; }
#formRegister .btn:hover { background:var(--brand-hover); }
#formLogin .btn { background:var(--surface); color:var(--brand-text);
  border:1.5px solid var(--brand-line); box-shadow:none; }
#formLogin .btn:hover { background:var(--brand-tint); border-color:var(--brand); }

/* Recharge modal */
.auth-modal .account-payment-note { padding:13px 14px; background:var(--brand-tint);
  border-radius:11px; font-size:14px; line-height:1.65; }
.account-record { display:flex; flex-direction:column; gap:5px; padding:12px 0;
  border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.account-record strong { font-size:15px; font-weight:650; }
.account-record span { font-size:13px; color:var(--ink-2); }
#rechargeList h3, #accountLedger h3 { font-size:18px; font-weight:700; margin:20px 0 10px; }
.recharge-pkg { min-height:44px; }
.recharge-pkg.selected { border-color:var(--brand) !important; background:var(--brand-tint) !important; }
#rechargeResult { font-size:14.5px; line-height:1.7; color:var(--brand-text); }

@media(max-width:460px) {
  .auth-modal { padding:24px 20px; }
  .auth-modal h2 { font-size:22px; }
  #formLogin p, #formRegister p { font-size:14px; }
  .account-note { width:100%; flex-basis:100%; font-size:13.5px; }
  .account-btn { min-height:44px; padding:8px 14px; font-size:14px; }
  .auth-modal input { min-height:48px; font-size:16px; }
  .auth-modal .btn { min-height:48px; }
  .recharge-pkg { padding:12px 5px !important; min-width:0; min-height:0; }
  .recharge-pkg > div:first-child { font-size:23px !important; }
  .recharge-pkg > div:nth-child(2) { font-size:11px !important; }
}

/* Account controls belong to the navigation, with a compact second row on phones. */
.nav-in { height:auto; min-height:var(--nav-h); flex-wrap:wrap; }
.nav .account-row { background:transparent; border:0; flex:0 0 auto; }
.nav .account-in { padding:0; margin:0; min-height:44px; gap:6px; flex-wrap:nowrap; }
.nav .account-row:not(.signed-in) .account-note { display:none; }
.nav .account-note { flex:0 1 auto; min-width:0; max-width:230px; font-size:12px; line-height:1.5; }
.nav .account-btn { white-space:nowrap; }
@media(min-width:1121px) {
  .nav .account-row { padding-left:12px; border-left:1px solid var(--line); }
  .nav-links { gap:2px; }
  .nav-link { padding-right:12px; padding-left:12px; }
}
@media(max-width:1120px) {
  :root { --nav-h:116px; }
  .nav-in { padding-top:8px; padding-bottom:8px; gap:4px 8px; }
  .nav .account-row { flex-basis:100%; margin:0; }
  .nav .account-in { justify-content:flex-end; }
  .nav .account-row.signed-in .account-in { justify-content:space-between; }
  .nav .account-note { margin-right:auto; max-width:none; flex:1; width:auto; flex-basis:auto; }
}
@media(max-width:420px) {
  .nav .account-btn { padding:8px 12px; }
}