#account { display: flex; align-items: center; }

.acct-signin {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500;
    color: var(--ink); background: var(--surface); border: 1px solid var(--border);
    padding: 8px 14px; border-radius: var(--r-md); text-decoration: none; white-space: nowrap;
    transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.acct-signin:hover { background: var(--surface-raised); border-color: var(--border-bright); }

.acct-btn {
    display: inline-flex; padding: 2px; border: 1px solid var(--border);
    background: none; border-radius: var(--r-full); cursor: pointer; line-height: 0;
    transition: border-color var(--fast) var(--ease);
}
.acct-btn:hover { border-color: var(--accent); }

.acct-avatar {
    width: 30px; height: 30px; border-radius: var(--r-full); object-fit: cover;
    display: inline-flex; align-items: center; justify-content: center;
}
.acct-fallback {
    background: var(--surface-raised); color: var(--ink); border: 0;
    font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600;
}

.acct-menu {
    position: fixed; top: 56px; right: 16px; left: auto; bottom: auto;
    margin: 0; padding: 6px; width: 224px;
    background: var(--surface-raised); border: 1px solid var(--border-bright);
    border-radius: var(--r-lg); box-shadow: var(--shadow-overlay);
    color: var(--ink);
}
.acct-menu::backdrop { background: transparent; }
.acct-head {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 8px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border);
}
.acct-head .acct-avatar { width: 34px; height: 34px; }
.acct-handle { font-family: var(--font-mono); font-weight: 600; font-size: 0.875rem; color: var(--ink); word-break: break-word; }
.acct-sub { font-size: 0.75rem; color: var(--muted); }
.acct-item {
    display: block; width: 100%; text-align: left; box-sizing: border-box;
    padding: 8px 10px; border-radius: var(--r-md); border: 0; background: none; cursor: pointer;
    font-family: var(--font-sans); font-size: 0.875rem; color: var(--ink); text-decoration: none;
    transition: background var(--fast) var(--ease);
}
.acct-item:hover { background: var(--surface); }

@media (max-width: 760px) { .acct-menu { right: 12px; width: calc(100vw - 24px); max-width: 280px; } }

@media (pointer: coarse) {
    .acct-signin { min-height: 44px; }
    .acct-btn { min-height: 44px; min-width: 44px; align-items: center; justify-content: center; }
    .acct-item { min-height: 44px; display: flex; align-items: center; }
}