html[data-theme="light"] .navbar {
    /* Navbar */
    --navbar-bg: #f7f7f7;
    --navbar-border: rgba(0, 0, 0, 0.08);

    /* Text */
    --text-secondary: #656d76;
    --text-accent: #0969da;

    /* Interactive */
    --hover-bg-soft: rgba(0, 0, 0, 0.05);
    --hover-bg-mobile: rgba(0, 0, 0, 0.04);

    /* Surfaces */
    --surface-dropdown: #ffffff;
    --surface-border: rgba(0, 0, 0, 0.12);

    /* Shadows */
    --shadow-dropdown: 0 10px 30px rgba(0, 0, 0, 0.12);
    --shadow-mobile-menu: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* ====================== NAVBAR ====================== */

.navbar {
    --navbar-bg: #0b0d11;
    --navbar-border: rgba(255, 255, 255, 0.04);

    /* Text */
    --text-secondary: #8b949e;
    --text-accent: #58a6ff;

    /* Interactive */
    --hover-bg-soft: rgba(255, 255, 255, 0.06);
    --hover-bg-mobile: rgba(255, 255, 255, 0.05);

    /* Surfaces */
    --surface-dropdown: #111;
    --surface-border: rgba(255, 255, 255, 0.08);

    /* Shadows */
    --shadow-dropdown: 0 10px 30px rgba(0, 0, 0, 0.25);
    --shadow-mobile-menu: 0 10px 30px rgba(0, 0, 0, 0.3);

    position: sticky;
    top: 0;
    z-index: 1000;

    height: 52px;

    background-color: var(--navbar-bg);

    border-bottom: 1px solid var(--navbar-border);

    .nav-inner {
        position: relative;

        max-width: 960px;
        height: 100%;

        margin: 0 auto;
        padding: 0 24px;

        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* ====================== BRAND ====================== */

    .brand {
        display: flex;
        align-items: center;

        height: 100%;

        color: var(--text);
        text-decoration: none;

        font-size: 1.2rem;
        font-weight: 650;

        letter-spacing: -0.02em;
    }

    .brand span {
        color: var(--text-accent);
    }

    /* ====================== NAVIGATION ====================== */

    .nav-links {
        display: flex;
        align-items: center;

        gap: 24px;

        /*margin-left: 40px;*/
        margin-left: 30px;
        margin-right: auto;
    }

    .nav-item {
        color: var(--text-secondary);
        text-decoration: none;

        font-size: 0.94rem;
        font-weight: 500;
    }

    .nav-item:hover,
    .nav-item.active {
        color: var(--text);
    }
    .nav-item {
        position: relative;
    }
    .nav-item.active::after {
        content: "";

        position: absolute;
        left: 0;
        right: 0;
        bottom: -4px;

        height: 2px;

        background: var(--primary);
        border-radius: 999px;
    }

    /* ====================== RIGHT SIDE ====================== */

    .nav-right {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* ====================== SHARED NAV BUTTONS ====================== */

    .nav-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        height: 40px;

        padding: 0 14px;

        border: none;
        border-radius: 999px;

        background: transparent;
        color: inherit;

        text-decoration: none;

        cursor: pointer;

        transition: background 0.15s ease;
    }

    .nav-button:hover {
        background: var(--hover-bg);
    }

    /* ====================== MENU BUTTON ====================== */

    .menu-btn {
        display: none;
    }

    .menu-btn svg,
    .avatar-btn svg {
        display: block;
    }

    /* ====================== ACCOUNT MENU ====================== */

    .account-menu {
        position: relative;
    }

    /* ====================== ACCOUNT DROPDOWN ====================== */

    .nav-dropdown {
        user-select: none;

        position: absolute;

        /*top: calc(100% + 10px);*/
        right: 0;

        min-width: 180px;

        padding: 8px;

        background: var(--surface-dropdown);

        border: 1px solid var(--surface-border);
        border-radius: 12px;

        box-shadow: var(--shadow-dropdown);
    }

    .nav-dropdown.settings {
        right: 5vw;
    }

    .dropdown-item {
        display: block;

        padding: 10px 12px;

        border-radius: 8px;

        color: inherit;
        text-decoration: none;

        transition: background 0.15s ease;

        cursor: pointer;
    }

    .dropdown-item:hover {
        background: var(--hover-bg-soft);
    }

    /* ====================== MOBILE ====================== */

    /*@media (max-width: 768px) {*/
    @media (max-width: 600px) {
        .menu-btn {
            display: inline-flex;
        }

        .nav-links {
            display: none;

            position: absolute;

            top: calc(100%);
            left: 24px;
            right: 24px;

            flex-direction: column;
            align-items: flex-start;

            gap: 4px;

            padding: 10px;

            background: var(--surface-dropdown);

            border: 1px solid var(--surface-border);
            border-radius: 14px;

            box-shadow: var(--shadow-mobile-menu);
        }

        .nav-links.show {
            display: flex;
        }

        .nav-item {
            width: 100%;

            padding: 12px;

            border-radius: 8px;
        }

        .nav-item:hover {
            background: var(--hover-bg-mobile);
        }
    }

    .nav-logo {
        height: 30px;
        width: 30px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 1;
        background-image: var(--logo-url);
    }
}