/* Shared header for the home and vocabulary pages. */
.navbar {
    min-height: 72px;
    padding: var(--space-3) clamp(1rem, 4vw, 4rem);
    background: rgb(241 245 246 / .95);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-xs);
}
.navbar .nav-links { gap: .5rem; }
.navbar .nav-links a { color: var(--color-text); }
.navbar .nav-links a.active,
.navbar .nav-links a:hover {
    color: var(--color-primary);
    background: var(--color-primary-subtle) !important;
    border-color: var(--blue-300) !important;
}
.navbar .user-trigger {
    min-height: 48px;
    padding: .3125rem .875rem .3125rem .375rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--blue-200);
    box-shadow: var(--shadow-xs);
}
.navbar .user-trigger:hover,
.navbar .user-menu-container.active .user-trigger { background: var(--color-primary-subtle); border-color: var(--blue-300); }
.navbar .user-avatar { color: var(--color-on-primary); background: var(--gradient-main); }
.navbar .user-name { color: var(--color-text); font-weight: var(--font-weight-semibold); }