:root {
    --navbar-collapsed-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* ===== NAV BLUR ===== */
.nav-blur {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}

/* ===== LINK UNDERLINE ===== */
.nav-link-underline {
    position: relative;
}
.nav-link-underline::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2.5px;
    background: #1755ba;
    transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 999px;
}
.nav-link-underline:hover::after {
    width: 100%;
}
.nav-link-underline.active::after {
    width: 100%;
    height: 3px;
}
.nav-link-underline.active {
    color: #1755ba;
}

/* ===== SCROLL COLLAPSE ===== */
#navbar.collapsed .nav-blur {
    box-shadow: var(--navbar-collapsed-shadow);
}

/* ===== MOBILE MENU ===== */
#mobileMenu.open {
    pointer-events: auto;
}
#mobileMenu.open #mobileOverlay {
    opacity: 1;
}
#mobileMenu.open #mobilePanel {
    transform: translateX(0);
}

/* ===== AUTH LOGIN BUTTON ===== */
.login-btn {
    background: linear-gradient(135deg, #1755ba, #3b6fd4);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 999px;
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 15px rgba(23, 85, 186, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(23, 85, 186, 0.3);
}
.login-btn:active {
    transform: scale(0.95);
}

/* ===== USER CHIP ===== */
.user-menu {
    position: relative;
}
.user-chip {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(23, 85, 186, 0.08);
    border: 1px solid rgba(23, 85, 186, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 8px 18px;
    border-radius: 999px;
    color: var(--text-primary, #191b22);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.user-chip:hover {
    background: rgba(23, 85, 186, 0.14);
    transform: translateY(-1px);
}
.user-name {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
}
.user-chip i,
.user-chip .material-symbols-outlined {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

/* rotate chevron */
.user-menu.active .user-chip i:last-child {
    transform: rotate(180deg);
}

/* ===== USER DROPDOWN ===== */
.user-dropdown {
    position: fixed;
    top: 72px;
    right: 40px;
    width: 220px;
    padding: 8px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.22,1,.36,1), top 0.3s cubic-bezier(.22,1,.36,1);
}
.user-menu.active .user-dropdown {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.dropdown-item {
    width: 100%;
    border: none;
    background: transparent;
    padding: 12px 16px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #222;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.dropdown-item:hover {
    background: rgba(0, 0, 0, 0.05);
    transform: translateX(2px);
}
.dropdown-item i {
    width: 18px;
    text-align: center;
}
.logout-item {
    color: #d11a2a;
}

/* collapsed state adjusts */
#navbar.collapsed .user-chip {
    padding: 6px 14px;
}
#navbar.collapsed .user-dropdown {
    top: 64px;
}

/* ===== RESPONSIVE: 768px ===== */
@media (max-width: 768px) {
    .user-dropdown {
        right: 16px;
        top: 64px;
        width: 200px;
    }
    #navbar.collapsed .user-dropdown {
        top: 56px;
    }
    .user-chip {
        padding: 6px 14px;
        gap: 8px;
    }
    .user-name {
        font-size: 13px;
    }
}

/* ===== SPRING TRANSITION ===== */
.spring-ease {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}