html[data-theme="dark"] {
  color-scheme: dark;
  --theme-page: #181a1e;
  --theme-surface: #24272d;
  --theme-panel: #30343b;
  --theme-text: #e5e7eb;
  --theme-muted: #b1b7c2;
  --theme-link: #8cbfff;
  --theme-border: #697180;
  --theme-login: #9fda8a;
  --theme-menu: #443b27;
  --theme-selected: #78621e;
  --theme-reading-label: #929292;
  --theme-toggle-selected-text: #181a1e;
  --theme-icon-filter: invert(1);
  --theme-danger: #ff9696;
  background: var(--theme-page);
  color: var(--theme-text);
}
html[data-theme="dark"] body { background: var(--theme-page); color: var(--theme-text); }
html[data-theme="dark"] a { color: var(--theme-link); }
html[data-theme="dark"] :is(input, textarea, select, button, dialog, .pure-button) {
  background-color: var(--theme-surface);
  color: var(--theme-text);
  border-color: var(--theme-border);
}
html[data-theme="dark"] :is(#base_container, main) { background-color: var(--theme-page); }
html[data-theme="dark"] :is(#stream_container, #popup_container, #popup_header, #util_layout_option) {
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
}
html[data-theme="dark"] :is(#chat_container, #popup_main, #comment_list) { background-color: var(--theme-panel); }
html[data-theme="dark"] .comment_layout_choices button[aria-pressed="true"] {
  background: #245a92; color: #fff;
}
html[data-theme="dark"] :is(.live-stop-dialog__error, .error) { color: var(--theme-danger); }
footer { display: flex; align-items: center; justify-content: space-between; }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 20px; padding: 0; border: 0;
  background: transparent; color: inherit; cursor: pointer; flex-shrink: 0;
}
.theme-toggle:focus-visible { outline: 2px solid #408bd4; outline-offset: -2px; }
#util_layout_option .theme-toggle { float: right; }

/* Local SVG masks follow the surrounding text color in either theme. */
.ui-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: var(--ui-icon) center / contain no-repeat;
  mask: var(--ui-icon) center / contain no-repeat;
}
.ui-icon-login { --ui-icon: url('/assets/svg/login.svg'); }
.ui-icon-moon { --ui-icon: url('/assets/svg/moon.svg'); }
.ui-icon-lightbulb { --ui-icon: url('/assets/svg/lightbulb.svg'); }