.topbar {
    background: #44434d; /* use border/separator color */
    color: #e6e1e8;
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 16px;
}

.brand {
    font-weight: 700;
    font-size: 20px;
    /* Use the special brand font (fallback to cursive) */
    font-family: 'Momo Trust Display', cursive;
}

/* Brand icon (favicon) placed next to site name */
.brand { display: flex; align-items: center; gap: 8px; }
.brand-icon { height: 2em; width: auto; display: inline-block; }

@media (max-width:600px) {
    .brand { font-size: 18px; }
    .brand-icon { height: 1em; }
}

.main-nav a {
    color: #e6e1e8;
    text-decoration: none;
    margin: 0 8px;
    padding: 15px;
    border-radius: 4px;
    font-weight: 700;
}

.main-nav a:hover {
    background: #3a3940;
}

.auth-button {
    background: transparent;
    color: #e6e1e8;
    border: 1px solid rgba(230,225,232,0.12);
    padding: 8px 12px;
    border-radius: 6px;
}

.auth-button:hover {
    background: rgba(230,225,232,0.04);
}

.auth-area {
    display: flex;
    align-items: center;
    gap: 8px;
}

.language-label {
    font-size: 13px;
    color: #e6e1e8;
}

.language-select {
    height: 34px;
    border-radius: 6px;
    border: 1px solid rgba(230,225,232,0.12);
    background: transparent;
    color: #e6e1e8;
    padding: 0 8px;
}

.language-select option {
    background: #2f2e33;
    color: #e6e1e8;
}

@media (max-width:600px) {
    .topbar-inner { flex-direction: column; align-items: flex-start; }
    .auth-area { width: 100%; flex-wrap: wrap; }
}

.auth-popup {
    /* hidden by default */
    display: none;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
    /* adjust z-index if needed so popup sits above other content */
    z-index: 1000;
}

/* when JS toggles .open, show it */
.auth-popup.open {
    display: block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
