.profile { flex: 0 0 auto; }
.profile-trigger { display: flex; align-items: center; gap: 8px; max-width: 210px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: var(--panel); cursor: pointer; }
.profile-trigger:hover { border-color: var(--muted); }
.profile-trigger:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.profile-trigger-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-caret { color: var(--muted); font-size: 12px; }
.avatar { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(135deg, #fef3c7, #fb7185); display: grid; place-items: center; color: #111827; font-weight: 800; }
.profile-menu { min-width: 220px; padding: 8px; color: var(--text); background: var(--panel); border: 1px solid var(--line); box-shadow: 0 12px 30px #0008; }
.profile-menu-identity { display: grid; gap: 3px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 5px; overflow-wrap: anywhere; }
.profile-menu-identity span { color: var(--muted); font-size: 12px; }
.profile-menu .dropdown-item { border-radius: 7px; color: var(--text); }
.profile-menu .dropdown-item:hover, .profile-menu .dropdown-item:focus { color: var(--text); background: color-mix(in srgb, var(--brand) 16%, var(--panel)); }
.profile-menu .dropdown-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.profile-menu .logout-form { margin: 0; }
.profile-menu button.dropdown-item { width: 100%; text-align: start; }
@media (max-width: 780px) { .profile-trigger { max-width: 100%; } }