/* ==========================================
   TOPBAR
========================================== */

.topbar {

    position: sticky;

    top: 0;

    z-index: 100;

    height: 60px;

    padding: 0 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: rgba(33, 33, 33, .88);

    backdrop-filter: blur(18px);

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

}


/* ==========================================
   LEFT / RIGHT
========================================== */

.topbar-left,
.topbar-right {

    display: flex;

    align-items: center;

    gap: 10px;

}


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

.mobile-menu {

    width: 40px;

    height: 40px;

    border-radius: 10px;

    display: none;

    align-items: center;

    justify-content: center;

    color: var(--text-secondary);

    transition: .2s;

}

.mobile-menu:hover {

    background: var(--surface);

    color: var(--text);

}


/* ==========================================
   MODEL SELECTOR
========================================== */

.model-selector {

    display: flex;

    align-items: center;

    gap: 8px;

    height: 38px;

    padding: 0 14px;

    border-radius: 10px;

    font-size: .95rem;

    font-weight: 600;

    color: var(--text);

    transition: .2s;

}

.model-selector:hover {

    background: var(--surface);

}


/* ==========================================
   CHEVRON
========================================== */

.model-selector{

    display:flex;

    align-items:center;

    gap:8px;

}

.model-chevron{

    width:16px;

    height:16px;

    color:#9b9b9b;

    transition:.2s;

}

.model-selector:hover .model-chevron{

    transform:translateY(1px);

}


/* ==========================================
   HEADER ACTIONS
========================================== */

.header-btn {

    width: 40px;

    height: 40px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-secondary);

    transition: .2s;

}

.header-btn:hover {

    background: var(--surface);

    color: var(--text);

}


/* ==========================================
   BADGE
========================================== */

.plan-badge {

    padding: 6px 10px;

    border-radius: 999px;

    background: #2f2f2f;

    color: var(--text-secondary);

    font-size: .75rem;

    font-weight: 500;

}


/* ==========================================
   DIVIDER
========================================== */

.topbar-divider {

    width: 1px;

    height: 22px;

    background: rgba(255,255,255,.08);

}


/* ==========================================
   SHADOW ON SCROLL
========================================== */

.topbar.scrolled {

    box-shadow: 0 1px 0 rgba(255,255,255,.05);

}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 900px) {

    .mobile-menu {

        display: flex;

    }

}


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

@media (max-width: 600px) {

    .topbar {

        padding: 0 12px;

    }

    .model-selector {

        padding: 0 10px;

        font-size: .9rem;

    }

    .plan-badge {

        display: none;

    }

}