:root {
    --navbar-expanded-top-height: 60px;
    --navbar-expanded-bottom-height: 40px;
    --navbar-collapsed-top-height: 50px;
    --logo-skew-angle: -20deg;
    --logo-stickout: 36px;
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.nav-main {
    position: relative;
    background: var(--accent);
    overflow: visible;
    box-shadow:
        0 10px 30px var(--accent-glow);
}

.nav-main-top {
    height: var(--navbar-expanded-top-height);
    display: flex;
    align-items: center;
    transition: height 0.45s cubic-bezier(.22,1,.36,1);
}

.nav-main-bottom {
    height: var(--navbar-expanded-bottom-height);
    background: var(--accent-dark);
    display: flex;
    align-items: center;
    padding-left: 520px;
    color: var(--bg-panel);

    font-size: 15px;
    font-weight: 600;

    overflow: hidden;

    transition:
        height 0.45s cubic-bezier(.22,1,.36,1),
        opacity 0.35s ease,
        transform 0.45s cubic-bezier(.22,1,.36,1);
}

.next-pill {
    background: #00b96b;

    padding: 4px 16px;

    border-radius: 999px;

    margin-right: 18px;

    font-size: 14px;
    font-weight: 700;
}

.logo-panel {
    position: absolute;

    top: calc(var(--logo-stickout)/(-2));
    left: 70px;
    width: 360px;

    height: calc(var(--navbar-expanded-top-height) + var(--navbar-expanded-bottom-height) + var(--logo-stickout));

    background: var(--bg-panel);
    color: var(--accent);

    transform:
        skewX(var(--logo-skew-angle));

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 20;

    box-shadow:
        0 18px 38px rgba(0,0,0,0.22);

    transition:
        width 0.45s cubic-bezier(.22,1,.36,1),
        height 0.45s cubic-bezier(.22,1,.36,1),
        top 0.45s cubic-bezier(.22,1,.36,1),
        transform 0.45s cubic-bezier(.22,1,.36,1),
        box-shadow 0.45s ease;
}

.logo-inner {
    transform:
        skewX(calc(-1 * var(--logo-skew-angle)));
}

.logo-text {
    color: var(--red);

    font-size: 3rem;
    font-weight: 900;

    font-style: italic;

    letter-spacing: -2px;

    user-select: none;

    transition:
        font-size 0.45s cubic-bezier(.22,1,.36,1);
}

.nav-content {
    width: 100%;

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

    padding-left: 450px;

    transition: padding-left 0.25s ease;
}

.nav-links {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.nav-links a {
    position: relative;

    text-decoration: none;

    color: var(--bg-panel);

    font-size: 19px;
    font-weight: 500;

    transition:
        opacity 0.25s ease;
}

.nav-links a:hover {
    opacity: 0.75;
}

.nav-links a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -5px;

    width: 0%;
    height: 2px;

    background: var(--bg-panel);

    transition:
        width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

#auth-section {
    margin-right: 50px;
    margin-left: 20px;
    color: var(--bg-panel);
    font-size: 18px;
}

.login-btn {
    background-color: var(--secondary);
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    padding: 10px 28px;
    border-radius: 999px;
    text-align: center;

    transition: padding 0.25s ease;
}

.navbar.collapsed .login-btn {
    padding: 7px 20px;
}

.navbar.collapsed .nav-main-bottom {
    height: 0;

    opacity: 0;

    transform: translateY(-12px);
}

.navbar.collapsed .nav-main-top {
    height: var(--navbar-collapsed-top-height);
}

.navbar.collapsed .logo-panel {
    width: 200px;
    height: var(--navbar-collapsed-top-height);
    top: 0;

    box-shadow:
        0 8px 18px rgba(0,0,0,0.16);
}

.navbar.collapsed .logo-text {
    font-size: 1.5rem;
}

.navbar.collapsed .nav-content {
    padding-left: 300px;
}


.user-chip {

    cursor: pointer;

    display: flex;
    align-items: center;
    gap: 12px;

    text-decoration: none;

    background:
        rgba(255,255,255,0.12);

    border:
        1px solid rgba(255,255,255,0.18);

    backdrop-filter:
        blur(12px);

    padding:
        10px 24px;

    border-radius: 999px;

    color: var(--bg-panel);

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        padding 0.25s ease,
        border 0.25s ease;
}

.user-chip:hover {

    background:
        rgba(255,255,255,0.18);

    transform:
        translateY(-1px);
}

.user-name {

    font-size: 15px;
    font-weight: 600;

    white-space: nowrap;
}

.user-chip i {

    font-size: 12px;

    color:
        rgba(255,255,255,0.85);

    transition:
        transform 0.3s ease;
}

/* rotate */

.user-menu.active .user-chip i {

    transform:
        rotate(180deg);
}

.user-dropdown {

    position: fixed;

    top: 70px;
    right: 50px;

    width: 220px;

    padding: 10px;

    border-radius: 22px;

    background:
        rgba(255,255,255,0.92);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        0 20px 50px rgba(0,0,0,0.16);

    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);
}

/* visible */

.user-menu.active .user-dropdown {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    pointer-events: auto;
}

.dropdown-item {

    width: 100%;

    border: none;

    background: transparent;

    padding:
        14px 16px;

    border-radius: 14px;

    display: flex;
    align-items: center;
    gap: 14px;

    color: #222;

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    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 */

.logout-item {

    color:
        #d11a2a;
}

/* collapsed navbar */

.navbar.collapsed .user-chip {

    padding:
        6px 12px;
}

.navbar.collapsed .user-avatar {

    width: 30px;
    height: 30px;

    font-size: 13px;
}

.navbar.collapsed .user-dropdown {
    top: 60px;
}