/* Shared light/dark appearance. Loaded only by the website, never by OBS overlays. */
:root {
  --joghurt-logo-filter: brightness(0);
  --logo-shadow: #26252b18;
  --switch-surface: #eeeaf0;
  --switch-thumb: #fff;
  --switch-border: #d6d1dc;
  --switch-text: #736b7e;
  --switch-active: #26222d;
  --heading-gradient: linear-gradient(105deg, #0071e3 0%, #6955cf 60%, #b25496 110%);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111115;
  --bg-panel: #1c1c23;
  --bg-panel-2: #23232c;
  --bg-panel-3: #2b2b35;
  --border: #3b3745;
  --border-soft: #302d38;
  --text: #f2f1f5;
  --text-muted: #b8b3c1;
  --text-faint: #a39cae;
  --accent: #8ab7ff;
  --accent-bright: #a6c9ff;
  --accent-dark: #6e9ee8;
  --accent-glow: #719eff20;
  --success: #8bd6ae;
  --success-glow: #80d2a618;
  --error: #ff9fb5;
  --error-glow: #ff86a21a;
  --teal: #88d8d5;
  --teal-bright: #a2e6e4;
  --teal-glow: #80d4d018;
  --gold: #eac981;
  --gold-bright: #f6d99d;
  --gold-glow: #eac98118;
  --discord: #b8b3ff;
  --discord-bright: #cecaff;
  --discord-glow: #a6a0ff1c;
  --twitch: #c9a6ff;
  --twitch-bright: #dec8ff;
  --twitch-glow: #bb91ff1c;
  --icon-obsstudio: #e8e6ea;
  --shadow-sm: 0 2px 8px #00000015;
  --shadow-md: 0 12px 36px #00000024;
  --joghurt-logo-filter: brightness(0) invert(1);
  --logo-shadow: #00000048;
  --switch-surface: #27242e;
  --switch-thumb: #4c445b;
  --switch-border: #494052;
  --switch-text: #a49bad;
  --switch-active: #fff;
  --heading-gradient: linear-gradient(105deg, #6aafff 0%, #b09aff 60%, #e69aca 110%);
  scrollbar-color: #57505f transparent;
}
html[data-theme] body img[src*="/images/joghurt-"] { filter: var(--joghurt-logo-filter) !important; }
html[data-theme] .landing .accent-text { background-image: var(--heading-gradient); }

/* Stufenloser Regler (theme.js): Sonne | Schiene mit Hell->Dunkel-Verlauf | Mond. Die Farben
   des Reglers selbst mischt theme.js aus der aktuellen Stufe (--dial-*), --t = Stufe 0..1. */
html body .theme-dial {
  position: fixed;
  z-index: 100;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 8px;
  width: 196px;
  height: 46px;
  padding: 6px 12px;
  border: 1px solid var(--dial-border, #d9d3df);
  border-radius: 999px;
  background: var(--dial-surface, #f3f0f5);
  color: var(--dial-text, #5d5568);
  box-shadow: 0 6px 24px #00000018;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  isolation: isolate;
}
.theme-dial :is(.theme-dial-sun, .theme-dial-moon) { font-size: 16px; line-height: 1; flex: 0 0 auto; }
.theme-dial .theme-dial-moon { filter: grayscale(1) contrast(1.2) brightness(1.1); opacity: calc(0.35 + var(--t, 0) * 0.65); }
.theme-dial .theme-dial-sun { opacity: calc(1 - var(--t, 0) * 0.65); }
.theme-dial-track {
  position: relative;
  flex: 1 1 auto;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffffff 0%, #b9b3c2 50%, #111115 100%);
  box-shadow: inset 0 1px 3px #00000030;
}
.theme-dial-thumb {
  position: absolute;
  top: 50%;
  left: calc(var(--t, 0) * (100% - 34px));
  width: 34px;
  height: 34px;
  margin-top: -17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--dial-thumb, #fff);
  color: var(--dial-thumb-text, #3b3546);
  border: 1px solid var(--dial-border, #d9d3df);
  box-shadow: 0 2px 8px #00000030;
  cursor: grab;
  font: 600 10px/1 var(--font-body, system-ui, sans-serif);
  letter-spacing: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}
.theme-dial-thumb:hover { transform: scale(1.06); }
.theme-dial.is-dragging .theme-dial-thumb, .theme-dial-thumb:active { cursor: grabbing; transform: scale(1.1); box-shadow: 0 4px 14px #00000045; }
.theme-dial-thumb:focus-visible { outline: 3px solid var(--accent, #0071e3); outline-offset: 3px; }
html[data-design-preview] body .theme-dial { bottom: max(88px, env(safe-area-inset-bottom)); }
/* Inline-Variante in der Homepage-Navigation (Slot neben dem Dashboard-Button). */
html body .theme-dial.theme-dial--inline { position: relative; inset: auto; width: 170px; height: 40px; padding: 5px 10px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.theme-dial--inline .theme-dial-thumb { width: 30px; height: 30px; margin-top: -15px; left: calc(var(--t, 0) * (100% - 30px)); font-size: 9px; }
.theme-dial--inline .theme-dial-track { height: 12px; }
/* Waehrend theme.js beide Themes misst, duerfen keine Transitions Zwischenwerte liefern. */
html.theme-blend-snapshot *, html.theme-blend-snapshot *::before, html.theme-blend-snapshot *::after { transition: none !important; }
[data-theme-measure], [data-theme-measure]::before, [data-theme-measure]::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .theme-dial-thumb { transition: none; } }

/* Main surfaces and readable type, shared by public and account pages. */
html[data-theme="dark"] body,
html[data-theme="dark"] body:has(.landing),
html[data-theme="dark"] body .layout { background: var(--bg); color: var(--text); }
html[data-theme="dark"] body:has(.landing)::before,
html[data-theme="dark"] .landing-bg,
html[data-theme="dark"] body .dashboard-bg { background: none; }
html[data-theme="dark"] .landing-hero--editorial#main::before { background: linear-gradient(180deg, #151419, #111115); }
html[data-theme="dark"] .landing-hero--editorial { border-color: var(--border-soft); }
html[data-theme="dark"] .landing-section:is(.features,.pricing) { background: transparent; }
html[data-theme="dark"] body :is(h1,h2,h3,h4,h5,h6) { color: var(--text); }
html[data-theme="dark"] .event-demo-section .demo-heading h2 { color: var(--text); }
html[data-theme="dark"] .landing-hero--editorial .landing-hero-copy > p,
html[data-theme="dark"] .subpage-hero .landing-hero-copy > p,
html[data-theme="dark"] body :is(p,.page-subtitle,.desc,.checkbox-row,.consent-checkbox,.legal-list,.label,.plan-label,.checklist li) { color: var(--text-muted); }
html[data-theme="dark"] .landing-hero--editorial .landing-hero-copy > .hero-intro-label,
html[data-theme="dark"] body :is(.landing-eyebrow,.eyebrow,.workspace-kicker,.subpage-hero-card span) { color: #c6a4c0; }
html[data-theme="dark"] body :is(small,.micro,.source-note,.legal-note,.note,.changelog-date,.page-header-kicker,.section-title-kicker,.onboarding-progress) { color: var(--text-faint); }
html[data-theme="dark"] body :is(.card .value,.price-card .price,.tenant-select-name,.profile-modal-title-wrap,.docs-search-result-title,.landing-live-name,.future-grid h3,.referral b,.update-links b) { color: var(--text); }
html[data-theme="dark"] body :is(.price-card .price > span,.roadmap-col-title,.landing-live-title,.landing-live-game,.referral > span,.profile-modal-subtitle,.docs-search-result-category) { color: var(--text-muted); }
/* [class*="btn"] statt nur :not(.btn) - jeder button-artige Link (.retro-btn, .profile-open-btn,
   .btn danger/secondary/small, kuenftige) setzt seine eigene, gegen seinen Hintergrund
   kontrastierende Textfarbe explizit selbst (meist weiss) - diese generische a-Regel darf sie
   nie ueberschreiben. Live als echten Bug gefunden: .retro-btn (Gradient-Button auf der
   Retro-Login-Seite) wurde durch den fruehen, nur .btn ausschliessenden Fix NICHT erfasst und
   blieb kaum lesbar (var(--accent) auf lila/orangem Verlauf). */
html[data-theme="dark"] body a:not([class*="btn"]) { color: var(--accent); }
html[data-theme="dark"] body :focus-visible { outline-color: var(--accent); }
html[data-theme="dark"] ::selection { background: #53406f; color: #fff; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #57505f; }

/* Public navigation, calls to action, and footer. */
html[data-theme="dark"] .landing-nav { background: #18171deb; border-color: var(--border-soft); }
html[data-theme="dark"] .landing-nav-links { background-color: #18171d; border-color: var(--border-soft); }
html[data-theme="dark"] .landing-nav-links a,
html[data-theme="dark"] .landing-nav-brand > span,
html[data-theme="dark"] .landing-footer-links a { color: var(--text-muted); }
html[data-theme="dark"] .landing-nav-links a:hover,
html[data-theme="dark"] .landing-footer-links a:hover { color: var(--accent); }
html[data-theme="dark"] .landing .landing-nav-menu-toggle { color: var(--text); }
/* "body a.landing-nav-cta" statt nur ".landing-nav-cta": die generische Dark-Mode-Linkregel
   oben (body a:not([class*="btn"]), 3 Elemente) schlug die reine Klassenregel (1 Element) und
   faerbte den Text var(--accent) - hellblau auf dem hellen Pill, kaum lesbar. Gleiche
   Elementanzahl + spaeter im Cascade = dieser Wert gewinnt. */
html[data-theme="dark"] body a.landing-nav-cta,
html[data-theme="dark"] body a.landing-nav-cta:visited,
html[data-theme="dark"] .landing-hero--editorial .actions .button.primary { color: #18151e; background: #f0ebf4; }
html[data-theme="dark"] body a.landing-nav-cta:hover,
html[data-theme="dark"] .landing-hero--editorial .actions .button.primary:hover { color: #111; background: #fff; }
html[data-theme="dark"] .landing .text-link,
html[data-theme="dark"] .landing-hero--editorial .actions .text-link,
html[data-theme="dark"] .landing .button.secondary { color: var(--accent); }
html[data-theme="dark"] .landing .button.secondary { border-color: #526b91; background: transparent; }
html[data-theme="dark"] .landing .button.secondary:hover { background: #243146; }
html[data-theme="dark"] .landing .button.primary { color: #fff; background: #0071e3; }
html[data-theme="dark"] :is(.landing-footer,.landing-footer-links,.faq-list details,.detail-section,.changelog-entry,.price-card > .checklist),
html[data-theme="dark"] .landing-section#live,
html[data-theme="dark"] .landing-section.detail-section { border-color: var(--border-soft); }
html[data-theme="dark"] .landing-footer,
html[data-theme="dark"] .landing-footer-tagline,
html[data-theme="dark"] .landing-footer > p { color: var(--text-faint); }

/* Feature collections, pricing, release notes and setup surfaces. */
html[data-theme="dark"] body :is(.card,.price-card,.tenant-select-card,.chart-container,.docs-search-results,.docs-search-result,.profile-modal,.crop-modal,.subpage-hero-card,.roadmap-item,.showcase-card,.legal-note-box,.table-scroll,.workspace-signal-card,.workspace-map-node,.item,.overlay-card) {
  color: var(--text); background: var(--bg-panel); border-color: var(--border-soft); box-shadow: var(--shadow-sm);
}
html[data-theme="dark"] .features .feature-card,
html[data-theme="dark"] .features .feature-card:nth-child(1),
html[data-theme="dark"] .features .feature-card:nth-child(2),
html[data-theme="dark"] .features .feature-card:nth-child(3),
html[data-theme="dark"] .subpage-shell :is(.roadmap-col,.roadmap-item,.showcase-card),
html[data-theme="dark"] .future-grid > article { background: var(--bg-panel); border-color: var(--border-soft); }
html[data-theme="dark"] .landing .price-card { background: var(--bg-panel); border-color: var(--border-soft); }
html[data-theme="dark"] .landing .price-card.featured,
html[data-theme="dark"] body .price-card.featured { background: #21202e; border-color: #6d6092; box-shadow: 0 12px 35px #00000020; }
html[data-theme="dark"] :is(.feature-icon,.icon-badge,.page-header-icon,.hero-app-mark),
html[data-theme="dark"] body .page-header-icon { background: #2a2735; border-color: var(--border); color: #c0a8e6; }
html[data-theme="dark"] .landing :is(.tag,.pro-tag) { background: #30283e; color: #dac2fc; }
html[data-theme="dark"] :is(.feature-tabs,.roadmap-col,.showcase-visual,.landing-live-thumb,.app-footer) { background-color: var(--bg-panel-2); border-color: var(--border-soft); }
html[data-theme="dark"] .landing .feature-tabs button { background: transparent; color: var(--text-muted); }
html[data-theme="dark"] .landing .feature-tabs button[aria-selected="true"] { color: var(--text); background: #45404f; }
html[data-theme="dark"] .subpage-hero::before { background: linear-gradient(105deg,#31233180,transparent 50%,#24324a60); }
html[data-theme="dark"] .subpage-shell .changelog-entry,
html[data-theme="dark"] .subpage-shell .changelog-entry > div:last-child { border-color: var(--border); }
html[data-theme="dark"] .subpage-shell .changelog-tag { background: #3b2941; color: #e0b5df; }
html[data-theme="dark"] .subpage-shell .changelog-tag.fix { background: #233b30; color: #9fd7b8; }
html[data-theme="dark"] .faq-list summary { color: var(--text); }
html[data-theme="dark"] :is(.companion-visual,.final-cta),
html[data-theme="dark"] body .workspace-hero { background: linear-gradient(125deg,#24212e,#1b2430); border-color: var(--border); }
html[data-theme="dark"] :is(.app-window,.landing-live-card,.landing-live-empty,.update-links > a) { background: var(--bg-panel); border-color: var(--border-soft); color: var(--text); }
html[data-theme="dark"] .update-links > a:hover { background: var(--bg-panel-2); }
html[data-theme="dark"] :is(.app-brand h3,.action-row b,.workspace-map-node b,.subpage-hero-card strong) { color: var(--text); }
html[data-theme="dark"] :is(.action-row,.workspace-signal-foot) { border-color: var(--border-soft); }
html[data-theme="dark"] :is(.action-row > span:first-child,.workspace-map-node.core) { background: #2b2940; color: #c4b4f1; border-color: #52446b; }
html[data-theme="dark"] .landing .landing-live-arrow { color: var(--text); background: #292630ef; border-color: var(--border); }
html[data-theme="dark"] body .center-page { background: radial-gradient(ellipse at 50% 12%,#25233c,transparent 55%),var(--bg); }
html[data-theme="dark"] body .center-page > .icon.icon-accent { background: var(--bg-panel); border-color: var(--border); }

/* Homepage illustration only. Real OBS sources never load this stylesheet. */
html[data-theme="dark"] .event-demo-section .demo-shell { background: linear-gradient(120deg,#24202b,#1c2630); border-color: var(--border); }
html[data-theme="dark"] .landing .demo-modes button { background: transparent; color: var(--text-muted); }
html[data-theme="dark"] .landing .demo-modes button[aria-selected="true"] { color: var(--text); background: #3a3346; border-color: #594c67; }
html[data-theme="dark"] .landing .demo-modes button:hover { background: #332d3d; color: #ded1f3; }
html[data-theme="dark"] #demo-description { color: var(--text-muted); }
html[data-theme="dark"] :is(.demo-note,.demo-modes button > span,.stream-status,.stream-label,.timer > span,.window-bar,.overlay-alert small,.overlay-alert div > span,.event-log small) { color: var(--text-faint); }
html[data-theme="dark"] :is(.demo-display,.event-log) { background: #1d1c25; border-color: var(--border); }
html[data-theme="dark"] .window-bar { background: #26232e; border-color: var(--border); }
html[data-theme="dark"] .stream-stage { background: radial-gradient(ellipse at 95% 10%,#3e2c594d,transparent 65%),#202a39; }
html[data-theme="dark"] :is(.stream-word,.timer b,.overlay-alert strong) { color: #e9e5f6; }
html[data-theme="dark"] .stream-word em { color: #c9aff4; }
html[data-theme="dark"] .overlay-alert { background: #292634eb; border-color: #554761; }
html[data-theme="dark"] :is(.overlay-alert .alert-icon,.log-icon) { background: #46315a; color: #e0c0ff; }
html[data-theme="dark"] .log-check { color: var(--success); }

/* Dashboard, owner navigation, docs and account dialogs. */
html[data-theme="dark"] body :is(.dash-sidebar,.sidebar) { background: #1b1a21eb; border-color: var(--border-soft); }
html[data-theme="dark"] body :is(.dash-brand,.dash-bottom,.logout,.profile-modal-header,.crop-modal-header,.profile-language-form,.profile-redeem-form) { border-color: var(--border-soft); }
html[data-theme="dark"] body :is(.dash-group-title,.nav-section,.dash-icon,.dash-profile small,.dash-profile-arrow,.workspace-signal-head,.workspace-signal-foot,.workspace-map-node small) { color: var(--text-faint); }
html[data-theme="dark"] body :is(.dash-group a,.dash-group .dash-sub-toggle,.sidebar nav a,.dash-home,.dash-plan,.docs-nav a) { color: var(--text-muted); }
html[data-theme="dark"] body .dash-group .dash-sub-toggle { background: none; box-shadow: none; }
html[data-theme="dark"] body .dash-sub-list { border-color: var(--border-soft); }
html[data-theme="dark"] body .dash-sub-dot { background: var(--text-faint); }
html[data-theme="dark"] body .dash-group .dash-sub-list a[aria-current="page"] .dash-sub-dot { background: #cfb9f5; box-shadow: 0 0 8px #cfb9f5; }
html[data-theme="dark"] body :is(.dash-group a,.dash-group .dash-sub-toggle,.sidebar nav a,.dash-home,.dash-plan):hover { color: var(--text); background: var(--bg-panel-3); }
html[data-theme="dark"] body .dash-group a[aria-current="page"],
html[data-theme="dark"] body .dash-group .dash-sub-toggle[aria-current="page"],
html[data-theme="dark"] body .sidebar nav a.active { background: #302d3e; color: #cfb9f5; }
html[data-theme="dark"] body :is(.dash-group a[aria-current="page"],.dash-group .dash-sub-toggle[aria-current="page"]) .dash-icon { color: #cfb9f5; }
html[data-theme="dark"] body :is(.dash-collapse,.sidebar-collapse-btn,.profile-modal-close,.crop-modal-close,.toast-close) { background: #34303d; color: var(--text-muted); }
html[data-theme="dark"] body .dash-profile { background: #25222d; border-color: var(--border); color: var(--text); }
html[data-theme="dark"] body .dash-profile:hover { background: #302a3a; }
html[data-theme="dark"] body .dash-profile b { color: var(--text); }
html[data-theme="dark"] body :is(.dash-avatar,.avatar-fallback,.avatar-circle) { color: #e0d0ef; background: #41344e; border-color: #5b496a; }
html[data-theme="dark"] body :is(.sidebar-upgrade-card,.sidebar-upgrade,.sidebar-home-link,.sidebar-home-link-bottom,.nav-count) { background: #263248; color: #b5d1ff; border-color: #3f5475; }
html[data-theme="dark"] body .dash-mobile-bar { background: #1b1a21ed; border-color: var(--border); }
html[data-theme="dark"] body .dash-mobile-bar a { color: var(--text); }
html[data-theme="dark"] body .dash-mobile-bar button { background: #38323f !important; color: var(--text) !important; }
html[data-theme="dark"] body .card::after { background: #bc82cc0b; }
html[data-theme="dark"] body .page-header-meta { background: #25212c; border-color: var(--border); color: var(--text-faint); }
html[data-theme="dark"] body .page-header-meta-value { color: var(--success); }
html[data-theme="dark"] body .docs-nav { background: transparent; }
html[data-theme="dark"] body .docs-nav nav a { background: var(--bg-panel); border-color: var(--border); color: var(--text-muted); }
html[data-theme="dark"] body .docs-nav nav a.active { background: #382b40; border-color: #70537c; color: #e0bce8; }
html[data-theme="dark"] body .docs-search-result:hover { background: var(--bg-panel-2); }

/* Forms, tables and semantic feedback retain their separate states. */
html[data-theme="dark"] body :is(.form-group label,form > label,.profile-language-form label) { color: var(--text-muted); }
html[data-theme="dark"] body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),select,textarea) { color: var(--text); background: #18171e; border-color: #524c5e; }
html[data-theme="dark"] body select option { color: var(--text); background: #23202c; }
html[data-theme="dark"] body :is(input,textarea)::placeholder { color: #9991a6; }
html[data-theme="dark"] body :is(input,select,textarea):focus { border-color: var(--accent); box-shadow: 0 0 0 3px #8ab7ff20; }
html[data-theme="dark"] body input[type="color"] { background: #25222d; border-color: #524c5e; }
html[data-theme="dark"] body input[type="file"]::file-selector-button { color: #c8dbff; background: #303f59; }
html[data-theme="dark"] body :is(.btn.secondary,button.secondary,.button.secondary) { background: #302b3a; color: #e1d9eb; border-color: #51465f; }
html[data-theme="dark"] body :is(.btn.secondary,button.secondary,.button.secondary):hover { background: #42374f; color: #fff; }
html[data-theme="dark"] body :is(.btn.danger,button.danger) { background: #43232e; color: #ffafc3; border-color: #733548; }
html[data-theme="dark"] body table { background: var(--bg-panel); color: var(--text-muted); border-color: var(--border); }
html[data-theme="dark"] body th,
html[data-theme="dark"] .landing tbody th { background: #26232e; color: var(--text-muted); border-color: var(--border); }
html[data-theme="dark"] body td,
html[data-theme="dark"] .landing td { color: var(--text-muted); border-color: var(--border-soft); }
html[data-theme="dark"] body tr:hover td { background: #292632; }
html[data-theme="dark"] .landing caption { color: var(--text); }
html[data-theme="dark"] body :is(code,pre) { background: #272739; color: #baceff; border-color: #44415b; }
html[data-theme="dark"] body :is(.tab-bar,.profile-modal-tabs) { background: #23202c; border-color: var(--border); }
html[data-theme="dark"] body :is(.tab-bar a,.profile-tab-btn) { color: var(--text-muted); }
html[data-theme="dark"] body :is(.tab-bar a.active,.tab-bar a[aria-current="page"],.profile-tab-btn.active) { background: #454051; color: var(--text); }
html[data-theme="dark"] body .main > .filters:not(.tab-bar) a { background: var(--bg-panel); color: var(--text-muted); border-color: var(--border); }
html[data-theme="dark"] body .main > .filters:not(.tab-bar) a.active { background: #293753; color: #c4d8ff; border-color: #56709b; }
html[data-theme="dark"] body :is(.alert,.badge) { background: #253049; color: #bed5ff; border-color: #3e5377; }
html[data-theme="dark"] body :is(.alert.error,.badge.error) { background: #3b202d; color: #ffafc4; border-color: #694053; }
html[data-theme="dark"] body :is(.alert.success,.badge.success,.badge.online,.badge.active) { background: #21362b; color: #b0e5c5; border-color: #416e51; }
html[data-theme="dark"] body :is(.badge.offline,.badge.inactive) { background: #302c37; color: #c3bacc; }
html[data-theme="dark"] body .badge.live { background: #3c2b53; color: #d8b8ff; }
html[data-theme="dark"] body .badge.gold { background: #3a3020; color: #eed29e; }
html[data-theme="dark"] body .badge.teal { background: #1e393a; color: #a5e0dd; }
html[data-theme="dark"] body :is(.profile-modal-backdrop,.crop-modal-backdrop) { background: #09080fb0; }
html[data-theme="dark"] body .chart-gridline { stroke: var(--border); }
html[data-theme="dark"] body .chart-axis-label { color: var(--text-faint); fill: var(--text-faint); }
html[data-theme="dark"] body .chart-tooltip { background: #292430; color: var(--text); border-color: var(--border); }
html[data-theme="dark"] body :is(.chart-legend,.chart-empty) { color: var(--text-muted); }

/* Local catalogue and preview notices use the same mode; embedded OBS does not. */
html[data-theme="dark"] body .preview-bar { background: #201d29ed; border-color: #494052; color: var(--text-muted); }
html[data-theme="dark"] body .preview-bar b { color: var(--text); }
html[data-theme="dark"] body .preview-bar a { color: var(--accent); }
html[data-theme="dark"] body .preview-dialog { background: #23202b; border-color: #55495f; color: var(--text); }
html[data-theme="dark"] body .preview-dialog :is(h2,p) { color: var(--text); }
html[data-theme="dark"] body .chart-container[data-preview-empty] { background: var(--bg-panel); color: var(--text-muted); border-color: var(--border); }

/* Schmale Bildschirme: der schwebende Regler wird kompakter, damit er keinen Inhalt verdeckt. */
@media (max-width: 640px) {
  html body .theme-dial:not(.theme-dial--inline) { width: 150px; height: 40px; padding: 5px 10px; gap: 6px; }
  html body .theme-dial:not(.theme-dial--inline) .theme-dial-thumb { width: 30px; height: 30px; margin-top: -15px; left: calc(var(--t, 0) * (100% - 30px)); font-size: 9px; }
  html body .theme-dial:not(.theme-dial--inline) .theme-dial-track { height: 12px; }
}