.account-header-button { min-width: 64px; max-width: 100px; min-height: 44px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 22px; color: var(--accent); background: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 600; }
.account-header-button:hover { background: #dce5d4; }
.topbar-actions { min-width: 0; }
.topbar-actions .header-button { flex: 0 0 44px; }
.account-dialog { width: min(460px, calc(100% - 32px)); }
.account-intro { margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.account-social-options { display: flex; flex-direction: column; gap: 10px; }
.account-social-button { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px 10px; width: 100%; min-height: 50px; padding: 12px 15px; border: 1px solid #cbd3c5; border-radius: 14px; background: #fffef9; color: var(--ink); font-size: 15px; line-height: 1.5; }
.account-social-label { font-weight: 600; }
.account-social-button:hover:not(:disabled) { background: var(--soft); border-color: #a9b69d; }
.account-social-button:disabled { opacity: 1; color: var(--muted); background: #f0f1e9; border-color: var(--line); }
.account-social-availability { padding: 2px 7px; border-radius: 6px; background: #e2e7d9; color: #506448; font-size: 10px; font-weight: 500; letter-spacing: .1px; }
.account-social-note { margin: -4px 4px 1px; color: var(--muted); text-align: center; font-size: 12px; line-height: 1.5; }
.account-social-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.account-social-divider::before, .account-social-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.account-content > .secondary-button + .account-social-options { margin-top: 20px; }
.account-form { display: flex; flex-direction: column; gap: 17px; }
.account-field { display: flex; flex-direction: column; gap: 7px; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.5; }
.account-field input { min-width: 0; width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid #cbd3c5; border-radius: 12px; background: #fffef9; color: var(--ink); font-size: 16px; font-weight: 400; line-height: 1.5; }
.account-field input:focus-visible { outline: 3px solid #82996d; outline-offset: 3px; }
.account-submit { margin-top: 4px; min-height: 48px; }
.account-hint, .account-local-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.account-hint { margin-top: -7px; }
.account-local-note { margin-top: 20px; }
.account-status, .account-error { margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.account-status { color: var(--ink); background: var(--soft); }
.account-error { color: #814333; background: #f5e7df; }
.account-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1px 16px; margin-top: 9px; }
.account-text-button { min-height: 44px; min-width: 44px; padding: 10px 2px; background: transparent; color: var(--accent); font-size: 13px; line-height: 1.5; text-decoration: underline; text-underline-offset: 3px; }
.account-content > .account-text-button { display: block; margin: 7px auto 0; }
.account-email { margin: 0 0 22px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.account-claim { padding: 17px; border-radius: 16px; background: var(--soft); }
.account-claim h3 { margin: 0 0 8px; color: var(--ink); font-size: 15px; line-height: 1.5; }
.account-claim p { margin: 0 0 15px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.account-claim button { width: 100%; min-height: 48px; padding: 12px; white-space: normal; line-height: 1.6; }
.account-signout { margin-top: 20px; width: 100%; min-height: 48px; }
#account-label { overflow-wrap: anywhere; }
@media (max-width: 600px) { .account-dialog { width: 100%; } .account-header-button { max-width: 88px; } }
@media (max-width: 400px) { .topbar { gap: 7px; padding-left: 14px; padding-right: 14px; } .topbar-actions { gap: 2px; } .brand { font-size: 27px; gap: 4px; } .brand svg { width: 25px; } .account-header-button { padding-left: 9px; padding-right: 9px; } }
@media (max-width: 350px) { .brand svg { display: none; } .topbar { padding-left: 11px; padding-right: 11px; } }