/* ==========================================================================
   Topbar
   ========================================================================== */
.topbar {
    background: var(--primary);
    color: rgba(var(--on-dark-rgb), .85);
    font-size: .82rem;
    padding: 10px 0;
}
.topbar-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 24px; }
.topbar span, .topbar a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color .2s;
}
.topbar svg { width: 14px; height: 14px; opacity: .7; }
.topbar a:hover { color: var(--on-dark); }
.lang { display: inline-flex; gap: 2px; padding: 3px; background: rgba(var(--on-dark-rgb), .06); border-radius: 100px; }
.lang-btn {
    padding: 4px 10px;
    color: rgba(var(--on-dark-rgb), .55);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    border-radius: 100px;
    transition: all .2s;
}
.lang-btn.active { background: var(--accent); color: var(--on-accent); }