/* Language switcher (markup is injected by lib/i18n.js). Colours come from the page theme; the fallbacks are for a dark page without these variables. */
.i18n-switcher { position: relative; display: inline-block; }
.i18n-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--bg4, rgba(255,255,255,.08)); border: 1px solid var(--border, rgba(255,255,255,.16)); border-radius: 999px;
    padding: 6px 12px; font-size: 0.72rem; font-weight: 700; color: var(--text-muted, #b7c5dd); cursor: pointer;
}
.i18n-toggle:hover { border-color: var(--accent-border, #61d8c6); color: var(--text, #ebf2ff); }
.i18n-globe { font-size: 0.85rem; line-height: 1; }
.i18n-caret { transition: transform 0.15s; flex-shrink: 0; }
.i18n-switcher.is-open .i18n-caret { transform: rotate(180deg); }
.i18n-menu {
    display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 150px;
    background: var(--bg2, #0f1f37); border: 1px solid var(--border, rgba(255,255,255,.16)); border-radius: 10px;
    padding: 4px; box-shadow: var(--shadow-card-hover, 0 12px 28px rgba(0,0,0,.4)); z-index: 1000;
}
.i18n-switcher.is-open .i18n-menu { display: block; }
.i18n-option {
    display: block; width: 100%; padding: 8px 10px; font-size: 0.82rem; font-weight: 600;
    border-radius: 6px; border: none; background: transparent; color: var(--text-muted, #b7c5dd);
    cursor: pointer; text-align: left;
}
.i18n-option:hover { background: var(--bg4, rgba(255,255,255,.08)); }
.i18n-option[aria-selected="true"] { background: var(--accent-dim, rgba(97,216,198,.14)); color: var(--accent, #61d8c6); }