/* Stage Combined v1 - F: Dark theme overlays. * Applied only when . * Keep specificity LOW (single body class prefix) so component-level styles * (player controls, wavesurfer) keep their existing colours. * * Sensors: * S-N-F-1 body.theme-dark base background/text * S-N-F-2 panels (.menu-item, .desk-window, .admin-tab) inverted * S-N-F-3 inputs and borders * S-N-F-4 modal backgrounds */ body.theme-dark { background: #1a1a1a; color: #e0e0e0; } body.theme-dark a { color: #6db4ff; } body.theme-dark a:visited { color: #b08eff; } body.theme-dark .menu-item { color: #e0e0e0; } body.theme-dark .menu-item:hover { background: #2a2a2a; } body.theme-dark .desk-window, body.theme-dark .desk-window-content, body.theme-dark .desk-window-header { background: #222; color: #e0e0e0; border-color: #444; } body.theme-dark .admin-tab { background: #2a2a2a; color: #ccc; border-color: #444; } body.theme-dark .admin-tab.active { background: #1a1a1a; color: #fff; } body.theme-dark .admin-tab:hover { background: #333; } body.theme-dark input, body.theme-dark textarea, body.theme-dark select { background: #2a2a2a; color: #e0e0e0; border-color: #555; } body.theme-dark input::placeholder { color: #888; } body.theme-dark hr { border-color: #444; } body.theme-dark .loading-text { color: #aaa; } /* Sync-mode subtle accents kept readable */ body.theme-dark [style*="background:#fff7e0"], body.theme-dark [style*="background: #fff7e0"] { background: #3a3220 !important; } /* Dashed-bordered cards in Stats */ body.theme-dark [data-syrok-stats-v1] [style*="border:1px dashed #ccc"] { border-color: #555 !important; } body.theme-dark [data-syrok-stats-v1] [style*="border:1px solid #ddd"] { border-color: #444 !important; } /* Theme toggle button */ .syrok-theme-toggle { display: inline-block; cursor: pointer; padding: 2px 8px; border: 1px solid #aaa; border-radius: 12px; font-size: 12px; margin-left: 6px; user-select: none; background: transparent; color: inherit; } body.theme-dark .syrok-theme-toggle { border-color: #666; }