.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    margin: 24px auto 0; /* Centered with 24px top margin */
    width: 90%; 
    max-width: 1200px;
    border-radius: 999px; /* The Pill Effect */
    border: none;
    /* Psychological dynamic shadow */
    box-shadow: 
        0px 20px 40px -10px rgba(0, 0, 0, 0.15),
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        inset 0 -1px 1px rgba(255, 255, 255, 0.05);
    padding: 1rem 2rem;
    box-sizing: border-box;
    transition: box-shadow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform;
}

/* Main Background, Blur, and Glare Layer combined */
.topbar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: inherit;
    pointer-events: none;
    background: 
        /* The Glare */
        radial-gradient(
            circle at var(--glare-x) var(--glare-y), 
            rgba(255, 255, 255, calc(0.3 * var(--glare-opacity))) 0%, 
            transparent 60%
        ),
        /* The Base Background */
        linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03)),
        url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.08"/%3E%3C/svg%3E');
    backdrop-filter: blur(12px) saturate(200%);
    -webkit-backdrop-filter: blur(12px) saturate(200%);
    z-index: -1;
}

/* Black Hole Light Bending Ring (Inner Edge Only) */
.topbar::after {
    content: '';
    position: absolute;
    /* Hide the protruding 'sensors' by making it fit exactly inside the pill bounds */
    inset: 0; 
    border-radius: 999px;
    
    /* A thick 20px inner ring that bends the light */
    padding: 20px; 
    
    /* XOR mask hides the very center, showing only the 20px thick inner ring */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    
    /* High saturation and contrast creates the chromatic lens effect on the border */
    backdrop-filter: blur(16px) saturate(400%) contrast(150%) brightness(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(400%) contrast(150%) brightness(1.2);
    
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.1);
    pointer-events: none;
    z-index: -2;
}

.header-container {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.topbar h1 {
    margin: 0;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
}

.topbar .logo {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-color);
    text-decoration: none;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.5rem;
}

.main-nav ul a {
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 1rem;
    transition: color 0.2s ease;
}

.main-nav ul a:hover {
    color: var(--text-color);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-login {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;
}

.nav-btn {
    background-color: var(--primary-color);
    color: #ffffff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 999px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px -3px rgba(0, 107, 255, 0.4);
}

.nav-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-20deg);
    transition: left 0.7s ease;
}

.nav-btn:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -4px rgba(0, 107, 255, 0.6);
}

.nav-btn:hover::after {
    left: 150%;
}

/* Mobile Responsiveness for Topbar */
@media (max-width: 768px) {
    .topbar {
        width: 95%;
        margin-top: 12px;
        padding: 0.75rem 1rem;
    }
    .topbar .logo {
        font-size: 1.2rem;
    }
    .nav-login {
        display: none; /* Hide 'Log In' text to save space on narrow screens */
    }
    .nav-btn {
        padding: 8px 14px;
        font-size: 0.85rem;
    }
}

/* Dark Mode Liquid Glass */
@media (prefers-color-scheme: dark) {
    .topbar {
        /* Background moved to ::before */
        border: none;
        box-shadow: 
            0px 20px 40px -10px rgba(0, 0, 0, 0.4),
            inset 0 1px 1px rgba(255, 255, 255, 0.15),
            inset 0 -1px 1px rgba(255, 255, 255, 0.02);
    }
    
    .topbar::before {
        background: 
            radial-gradient(
                circle at var(--glare-x) var(--glare-y), 
                rgba(255, 255, 255, calc(0.1 * var(--glare-opacity))) 0%, 
                transparent 60%
            ),
            linear-gradient(rgba(15, 23, 42, 0.25), rgba(15, 23, 42, 0.25)),
            url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.08"/%3E%3C/svg%3E');
    }
    
    .topbar::after {
        backdrop-filter: blur(16px) saturate(400%) contrast(150%) brightness(1.2);
        -webkit-backdrop-filter: blur(16px) saturate(400%) contrast(150%) brightness(1.2);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2),
                    0 0 0 1px rgba(255, 255, 255, 0.05);
    }
}