/* Account surfaces follow Vincent's frosted white panels and deep teal controls. */
.topbar-account-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 0; }
.account-controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.account-beta-badge { color: #42756e; border: 1px solid #649d9333; background: #e5f6ed85; border-radius: 999px; padding: 4px 8px; font-size: 11px; white-space: nowrap; }
.account-header-balance { font-size: 12px; font-weight: 600; color: #316b64; white-space: nowrap; }
.account-header-button { border: 1px solid #25827535; background: #fbfffd90; border-radius: 13px; padding: 8px 13px; font: inherit; font-size: 12px; color: #186f66; cursor: pointer; }
.account-header-button:hover { background: #ffffffd9; }
.account-user-button { max-width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.generation-cost { margin: 13px 0 10px; font-size: 12px; line-height: 1.7; color: var(--muted, #627582); }
.generation-cost[data-insufficient=true] { color: #9a593f; }
.account-dialog { width: min(580px, calc(100vw - 32px)); max-height: min(88dvh, 800px); margin: auto; padding: 0; overflow: auto; border: 1px solid #ffffffcc; border-radius: 24px; color: var(--ink, #303b45); background: #edf8f3f5; box-shadow: 0 26px 90px #264e5a35; backdrop-filter: blur(26px); }
.account-dialog::backdrop { background: #23454a60; backdrop-filter: blur(6px); }
.account-dialog[open] { animation: dialogIn .2s ease; }
.account-dialog [hidden] { display: none !important; }
.account-dialog button, .account-dialog input { font: inherit; }
.account-dialog button { cursor: pointer; }
.account-dialog button:disabled { opacity: .55; cursor: wait; }
.account-dialog button:focus-visible, .account-dialog input:focus-visible { outline: 2px solid #147d73; outline-offset: 3px; }
.account-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 25px 26px 20px; border-bottom: 1px solid var(--line, #6d9fa438); }
.account-eyebrow { margin: 0 0 5px; font-size: 11px; color: #627c79; letter-spacing: .08em; }
.account-dialog-header h2 { margin: 0; font-size: 25px; line-height: 1.35; }
.account-close { flex: 0 0 36px; height: 36px; display: grid; place-items: center; border: 1px solid #5b999a26; border-radius: 12px; background: #ffffff85; color: #61767a; font-size: 25px !important; line-height: 1; }
.account-dialog-body { padding: 22px 26px 25px; }
.account-description { color: var(--muted, #627582); font-size: 13px; line-height: 1.8; margin: 0 0 18px; }
.account-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 22px; }
.account-auth-tabs button { min-height: 44px; border: 1px solid #6d9fa438; border-radius: 13px; background: #ffffff66; color: #627582; font-size: 14px; }
.account-auth-tabs button[aria-pressed=true] { color: white; background: #127b70; border-color: #127b70; }
.account-field { display: flex; flex-direction: column; gap: 8px; color: #506765; font-size: 13px; margin: 0 0 16px; }
.account-field input { width: 100%; min-height: 46px; padding: 12px 14px; border: 1px solid #6d9fa445; border-radius: 13px; color: #303b45; background: #ffffffbb; font-size: 15px; }
.account-field input::placeholder { color: #849794; }
.account-primary, .account-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 12px 17px; min-height: 46px; border-radius: 14px; font-size: 14px !important; border: 1px solid #6d9fa445; }
.account-primary { width: 100%; color: white; background: #127b70; border-color: #127b70; }
.account-primary:hover { background: #08665e; }
.account-secondary { color: #4f6f6b; background: #ffffffaa; }
.account-form-message { font-size: 13px; line-height: 1.6; color: #9a493e; overflow-wrap: anywhere; margin: 0; }
.account-form-message:not(:empty) { margin-bottom: 14px; }
.account-beta-note { margin: 15px 0 0; color: #748784; font-size: 12px; line-height: 1.8; }
.account-username { margin: 0 0 4px; font-size: 19px; font-weight: 600; overflow-wrap: anywhere; }
.account-email { margin: 0 0 19px; font-size: 13px; color: var(--muted, #627582); overflow-wrap: anywhere; }
.account-profile-form { margin: 0 0 21px; }
.account-profile-form .account-field { margin-bottom: 7px; }
.account-profile-row { display: flex; align-items: stretch; gap: 9px; }
.account-profile-row input { min-width: 0; flex: 1; }
.account-profile-row button { flex: 0 0 auto; }
.account-field-hint { margin: 0; color: #788b85; font-size: 11px; line-height: 1.6; }
.account-profile-message { margin: 0; font-size: 12px; line-height: 1.7; color: #147d73; }
.account-profile-message:not(:empty) { margin-top: 8px; }
.account-profile-message[data-state=error] { color: #9a493e; }
.account-balances { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; margin: 0 0 17px; }
.account-balances > div { border: 1px solid #6d9fa428; padding: 15px 12px; border-radius: 16px; background: #ffffff75; }
.account-balances > div:first-child { background: #caeae380; }
.account-balances span { display: block; color: #627b77; font-size: 11px; }
.account-balances strong { display: block; margin-top: 7px; font-size: 24px; font-weight: 600; color: #176e63; overflow-wrap: anywhere; }
.account-ledger-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding-top: 5px; }
.account-ledger-heading h3 { margin: 0; font-size: 16px; }
.account-text-button { padding: 8px; color: #147d73; background: transparent; border: 0; font-size: 13px !important; }
.account-ledger-state { color: #71857f; font-size: 12px; margin: 5px 0 12px; }
.account-ledger-scroll { max-height: 270px; overflow: auto; border: 1px solid #6d9fa428; border-radius: 14px; background: #ffffff55; }
.account-ledger { width: 100%; border-collapse: collapse; text-align: left; table-layout: fixed; font-size: 13px; }
.account-ledger th { background: #eef7f3; color: #6a807a; font-size: 11px; font-weight: 500; position: sticky; top: 0; }
.account-ledger th, .account-ledger td { padding: 12px 14px; border-bottom: 1px solid #6d9fa422; }
.account-ledger th:last-child, .account-ledger td:last-child { text-align: right; width: 95px; }
.account-ledger tr:last-child td { border-bottom: 0; }
.account-ledger strong { font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.account-ledger time { display: block; color: #7f908a; font-size: 11px; margin-top: 5px; }
.account-ledger-positive { color: #147d73; }
.account-detail-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #6d9fa430; }
.account-detail-footer > span { font-size: 11px; color: #788b85; }
.account-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1100px) {
  .topbar { gap: 12px; flex-wrap: wrap; }
  .topbar-account-actions { margin-left: auto; }
}
@media (max-width: 620px) {
  .topbar-account-actions { width: 100%; align-items: flex-start; margin-left: 0; }
  .account-controls { width: 100%; justify-content: flex-start; gap: 7px; }
  .account-header-button { margin-left: auto; }
  .account-dialog { border-radius: 20px; }
  .account-dialog-header { padding: 20px 19px 17px; }
  .account-dialog-body { padding: 19px; }
  .account-balances { gap: 6px; }
  .account-balances > div { padding: 12px 9px; }
  .account-balances strong { font-size: 21px; }
  .account-balances span { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .account-dialog[open] { animation: none; } }