/* Dark mode (toggle: js/darkMode.js). The whole page is colour-inverted, then images and
   coloured elements are flipped back so logos/badges keep their look. */
html[data-theme="dark"] { background: #fff; filter: invert(.92) hue-rotate(180deg); color-scheme: dark; }
html[data-theme="dark"] img, html[data-theme="dark"] video, html[data-theme="dark"] canvas { filter: invert(1) hue-rotate(180deg); }
html[data-theme="dark"] .dm-toggle { background: #f1f5f9; }

.dm-toggle {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    border: 1px solid #e2e8f0; background: #fff; color: #334155;
    border-radius: 999px; padding: 6px 12px; font: 600 12.5px 'Inter', sans-serif;
}
.dm-toggle:hover { border-color: #94a3b8; }
.dm-toggle .dm-track { width: 30px; height: 16px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background .2s; }
.dm-toggle .dm-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .2s; }
html[data-theme="dark"] .dm-toggle .dm-track { background: #2563eb; }
html[data-theme="dark"] .dm-toggle .dm-track::after { transform: translateX(14px); }
.dm-toggle.dm-floating { position: fixed; top: 14px; right: 16px; z-index: 99999; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
html[data-theme="dark"] .auth-panel { filter: invert(1) hue-rotate(180deg); }   /* login page: panel is already dark */