/* Theme + language toggle controls shared across login.html, landing.html and index.html.
   Relies on each page's own --panel2/--border/--text/--muted/--accent CSS variables. */
.ui-controls{ display:flex; align-items:center; gap:10px; }

.lang-toggle{ display:inline-flex; background:var(--panel2); border:1px solid var(--border); border-radius:999px; padding:3px; gap:2px; }
.lang-btn{ border:none; background:transparent; color:var(--muted); font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px; cursor:pointer; transition:background .15s, color .15s; }
.lang-btn.active{ background:var(--accent); color:#0b1220; }
.lang-btn:hover:not(.active){ color:var(--text); }

.theme-toggle{
  width:52px; height:28px; border-radius:999px; background:var(--panel2); border:1px solid var(--border);
  position:relative; cursor:pointer; padding:0; flex:none; display:inline-block;
}
.theme-toggle .knob{
  position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%;
  background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:12px;
  line-height:1; transition:left .2s ease;
}
.theme-toggle[data-state="light"] .knob{ left:calc(100% - 24px); }