:root {
  --control-surface: #111827;
  --control-text: #edf2ff;
  --control-line: #50617d;
  --control-accent: #a6baff;
  --scroll-track: #111723;
  --scroll-thumb: #657798;
}

ticker-language { display:inline-block; min-width:0; }
.language-trigger, .language-dialog button {
  appearance:none; -webkit-appearance:none; font:inherit; cursor:pointer;
  color:var(--control-text); touch-action:manipulation;
}
.language-trigger {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  min-height:38px; max-width:100%; padding:7px 12px; border:1px solid var(--control-line);
  border-radius:8px; background:var(--control-surface); font-size:14px; font-weight:600;
}
.language-trigger::after {
  content:""; width:7px; height:7px; flex:none; border:solid var(--control-accent);
  border-width:0 2px 2px 0; transform:translateY(-2px) rotate(45deg);
}
.language-trigger[aria-expanded="true"]::after { transform:translateY(2px) rotate(225deg); }
.language-trigger:hover { border-color:var(--control-accent); }
dialog.language-dialog {
  position:fixed; inset:auto; margin:0; box-sizing:border-box; padding:5px;
  width:min(232px,calc(100vw - 16px)); max-height:min(75dvh,32rem); overflow:auto;
  overscroll-behavior:contain; background:var(--control-surface); color:var(--control-text);
  border:1px solid var(--control-line); border-radius:12px; box-shadow:0 12px 36px #0009;
  font:500 15px/1.4 system-ui,sans-serif;
}
.language-dialog::backdrop { background:rgb(5 10 18 / 25%); }
.language-bar { display:flex; align-items:center; justify-content:space-between; padding:0 7px 4px 10px; }
.language-dialog .language-close { width:36px; height:36px; border:0; background:transparent; font-size:22px; }
.language-options [role="option"] {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  min-height:38px; padding:7px 12px; border:0; border-radius:7px; background:transparent; text-align:start;
}
.language-options [aria-selected="true"] { background:#233352; color:#dce5ff; }
.language-options [aria-selected="true"]::after { content:"✓"; color:var(--control-accent); }
.language-options button:hover { background:#304263; }
.language-dialog button:focus-visible, .language-trigger:focus-visible {
  outline:2px solid var(--control-accent); outline-offset:-2px;
}
@media (max-width:670px) {
  dialog.language-dialog { inset:auto 0 0; margin-inline:auto; width:100%; max-width:32rem;
    max-height:80dvh; border-radius:16px 16px 0 0; padding:8px 10px max(12px,env(safe-area-inset-bottom)); }
  .language-trigger,.language-options [role="option"],.language-dialog .language-close { min-height:44px; }
  .language-dialog::backdrop { background:rgb(5 10 18 / 58%); }
}

/* Keep normal scroll behavior and defer to the OS in forced-color mode. */
@media (forced-colors: none) {
  :root { scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
  @supports not (scrollbar-color: auto) {
    ::-webkit-scrollbar { width: 12px; height: 12px; }
    ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: var(--scroll-track); }
    ::-webkit-scrollbar-thumb {
      background: var(--scroll-thumb);
      border: 2px solid var(--scroll-track);
      border-radius: 8px;
    }
  }
}