.main-header {
    background-color: var(--bg-surface);
    height: var(--header-height);
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
}

.header-left, .header-right { display: flex; align-items: center; gap: 10px; }
.logo img { height: 24px; display: block; }

/* SEARCH BAR */
.header-center { flex: 1; max-width: 600px; margin: 0 20px; display: flex; }
.search-bar {
    width: 100%; display: flex; background: var(--search-bg);
    border: 1px solid var(--border); border-radius: 40px; overflow: hidden;
}
.search-bar input {
    width: 100%; border: none; background: transparent;
    padding: 0 16px; font-size: 16px; color: var(--text-main);
}
.search-btn {
    background: transparent; border: none; padding: 8px 20px;
    cursor: pointer; color: var(--text-main); border-left: 1px solid var(--border);
}

.icon-btn {
    background: none; border: none; cursor: pointer; color: var(--text-main);
    padding: 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background-color: var(--hover-bg); }

/* --- DESKTOP: HIDE MENU BUTTON --- */
@media (min-width: 769px) {
    #menu-btn {
        display: none !important; /* GONE FOREVER ON DESKTOP */
    }
}

/* --- MOBILE TWEAKS --- */
@media (max-width: 768px) {
    .main-header { padding: 0 10px; height: 56px; }
    .header-center { display: none; } 
    #menu-btn { display: flex !important; } /* Visible on Mobile */
}