.topbar { min-height: 4.5rem; height: auto; }
.topbar-identity { min-width: 0; }
.topbar-identity > strong { color: #172033; font-size: .9375rem; white-space: nowrap; }
.topbar-actions { flex: 0 0 auto; gap: .5rem; }
.topbar-icon-button { width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; border-radius: .75rem; }
.topbar-icon-button svg { pointer-events: none; }
.topbar-theme-toggle { display: grid; width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; place-items: center; border: 0; border-radius: 999px; background: transparent; color: #334155; cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.topbar-theme-toggle:hover { background: #f1f5f9; color: #0f172a; }
.topbar-theme-toggle:focus-visible { outline: 3px solid #d9e7ff; outline-offset: 1px; }
.theme-icon-sun { display: none; }
.dark .theme-icon-moon { display: none; }
.dark .theme-icon-sun { display: block; }
.topbar-divider { width: 1px; height: 1.75rem; margin: 0 .25rem; background: #e2e8f0; }
.avatar { width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; font-size: .8125rem; }
.profile-menu { position: relative; }
.profile-menu-trigger { display: flex; align-items: center; gap: .7rem; min-height: 3rem; padding: .3rem .25rem .3rem .35rem; border: 0; border-radius: .85rem; background: transparent; color: #334155; cursor: pointer; transition: background-color .15s ease; }
.profile-menu-trigger:hover, .profile-menu-trigger[aria-expanded="true"] { background: #f8fafc; }
.profile-menu-trigger:focus-visible { outline: 3px solid #d9e7ff; outline-offset: 1px; }
.profile-menu-identity { min-width: 0; text-align: left; }
.profile-menu-identity strong { display: block; max-width: 12rem; overflow: hidden; color: #334155; font-size: .875rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-identity small { display: none; }
.profile-menu-chevron { flex: 0 0 auto; color: #94a3b8; transition: transform .15s ease; }
.profile-menu-trigger[aria-expanded="true"] .profile-menu-chevron { transform: rotate(180deg); }
.profile-menu-popover { position: absolute; top: calc(100% + .65rem); right: 0; z-index: 60; width: min(22rem,calc(100vw - 2rem)); overflow: hidden; border: 1px solid #e2e8f0; border-radius: 1.35rem; background: #fff; box-shadow: 0 18px 45px rgba(15,23,42,.16); }
.profile-menu-head { padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0; }
.profile-menu-head strong, .profile-menu-head small { display: block; }
.profile-menu-head strong { overflow: hidden; color: #172033; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-head small { margin-top: .15rem; color: #64748b; font-size: .8125rem; }
.profile-menu-links { padding: .6rem; }
.profile-menu-links a, .profile-menu-logout button { display: flex; width: 100%; min-height: 3rem; align-items: center; gap: .8rem; padding: .7rem .75rem; border-radius: .75rem; color: #334155; font-size: .875rem; text-align: left; }
.profile-menu-links a:hover { background: #f8fafc; color: #174895; }
.profile-menu-links svg, .profile-menu-logout svg { width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; }
.profile-menu-logout { padding: .6rem; border-top: 1px solid #e2e8f0; }
.profile-menu-logout button { border: 0; background: transparent; color: #dc2626; cursor: pointer; }
.profile-menu-logout button:hover { background: #fef2f2; }
.dark .topbar-identity > strong, .dark .profile-menu-identity strong { color: #f1f5f9; }
.dark .topbar-theme-toggle { color: #d1d5db; }
.dark .topbar-theme-toggle:hover, .dark .profile-menu-trigger:hover, .dark .profile-menu-trigger[aria-expanded="true"] { background: #374151; }
.dark .topbar-divider { background: #374151; }
.dark .profile-menu-popover { border-color: #374151; background: #1f2937; box-shadow: 0 18px 45px rgba(0,0,0,.32); }
.dark .profile-menu-head, .dark .profile-menu-logout { border-color: #374151; }
.dark .profile-menu-head strong { color: #f1f5f9; }
.dark .profile-menu-head small { color: #9ca3af; }
.dark .profile-menu-links a { color: #d1d5db; }
.dark .profile-menu-links a:hover { background: #374151; color: #b8d2ff; }
.dark .profile-menu-logout button { color: #f87171; }
.dark .profile-menu-logout button:hover { background: rgba(127,29,29,.18); }
@media (max-width: 47.99rem) {
  .topbar-identity .environment { display: none; }
  .profile-menu-identity { display: none; }
  .profile-menu-trigger { gap: .35rem; padding-right: 0; }
}
@media (max-width: 25rem) {
  .topbar-identity > strong { font-size: .8125rem; }
  .topbar-divider { display: none; }
}