/* ================================================================ BOFLOW DARK MODE Activated by ================================================================ */ /* --- Toggle button (injected by theme.js) --- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #ddd; background: #fff; color: #666; cursor: pointer; box-shadow: none; transition: all 0.2s; font-size: 16px; line-height: 1; padding: 0; vertical-align: middle; margin-left: 8px; } .theme-toggle:hover { border-color: #111; color: #111; } /* Fallback: floating when no footer (app pages) */ body > .theme-toggle { position: fixed; bottom: 20px; right: 20px; z-index: 9999; width: 40px; height: 40px; font-size: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-left: 0; } [data-theme="dark"] .theme-toggle { background: #1e1e1e; border-color: #333; color: #999; } [data-theme="dark"] .theme-toggle:hover { border-color: #666; color: #eee; } [data-theme="dark"] body > .theme-toggle { box-shadow: 0 2px 8px rgba(0,0,0,0.4); } /* --- Logo swap --- */ [data-theme="dark"] img[src*="logo-light.png"] { content: url('/static/logo-dark.png'); } /* --- Root --- */ [data-theme="dark"] { color-scheme: dark; } /* --- CSS custom property overrides (admin-panel.html) --- */ [data-theme="dark"] { --bg: #121212; --bg-white: #1e1e1e; --surface: #252525; --accent: #0099dd; --accent-light: #1a2a35; --text: #e8e8e8; --text-secondary: #aaa; --text-muted: #777; --text-faint: #555; --text-placeholder: #555; --border: #2a2a2a; --border-hover: #444; --danger: #f44; --danger-bg: #2a1a1a; --danger-border: #4a2a2a; --success: #0a0; --success-bg: #1a2a1a; --warning: #da0; --warning-bg: #2a2510; --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.4); --shadow-lg: 0 8px 24px rgba(0,0,0,0.5); } /* ================================================================ BASE ================================================================ */ [data-theme="dark"] body { background: #121212 !important; color: #e8e8e8 !important; } [data-theme="dark"] html { background: #121212 !important; } /* ================================================================ NAVIGATION / HEADERS ================================================================ */ [data-theme="dark"] .nav, [data-theme="dark"] .header, [data-theme="dark"] .share-header { background: rgba(30,30,30,0.95) !important; border-bottom-color: #2a2a2a !important; } [data-theme="dark"] .logo, [data-theme="dark"] .sidebar-logo { color: #e8e8e8 !important; } [data-theme="dark"] .nav-link { color: #aaa !important; border-color: #444 !important; } [data-theme="dark"] .nav-link:hover { color: #e8e8e8 !important; border-color: #e8e8e8 !important; } [data-theme="dark"] .nav-cta { background: #e8e8e8 !important; color: #111 !important; } [data-theme="dark"] .nav-cta:hover { background: #fff !important; } [data-theme="dark"] .nav-cta-mobile { background: #e8e8e8 !important; color: #111 !important; } [data-theme="dark"] .nav-cta-mobile:hover { background: #fff !important; } /* ================================================================ CARDS / PANELS / MODALS ================================================================ */ [data-theme="dark"] .wf-card, [data-theme="dark"] .form-card, [data-theme="dark"] .login-card, [data-theme="dark"] .card, [data-theme="dark"] .stat-card, [data-theme="dark"] .usecase-card, [data-theme="dark"] .plan-card, [data-theme="dark"] .member-list, [data-theme="dark"] .invite-list, [data-theme="dark"] .table-wrap, [data-theme="dark"] .event-list, [data-theme="dark"] .step-menu, [data-theme="dark"] .invite-link-box, [data-theme="dark"] .modal, [data-theme="dark"] .modal-box, [data-theme="dark"] .account-modal, [data-theme="dark"] .qr-modal { background: #1e1e1e !important; border-color: #2a2a2a !important; } [data-theme="dark"] .wf-card:hover, [data-theme="dark"] .usecase-card:hover, [data-theme="dark"] .plan-card:hover { border-color: #444 !important; } [data-theme="dark"] .wf-card:active { background: #252525 !important; } [data-theme="dark"] .plan-card.featured { border-color: #e8e8e8 !important; } [data-theme="dark"] .modal-overlay { background: rgba(0,0,0,0.6) !important; } [data-theme="dark"] .modal p { color: #999 !important; } /* ================================================================ SIDEBAR (admin-panel) ================================================================ */ [data-theme="dark"] .sidebar { background: #1e1e1e !important; border-right-color: #2a2a2a !important; } [data-theme="dark"] .sidebar-item:hover { background: #2a2a2a !important; } [data-theme="dark"] .sidebar-item.active { background: #1a2a35 !important; color: #0099dd !important; } [data-theme="dark"] .sidebar-collapse-btn { background: #1e1e1e !important; border-color: #333 !important; color: #888 !important; } /* ================================================================ INPUTS ================================================================ */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select, [data-theme="dark"] .input, [data-theme="dark"] .filter-select, [data-theme="dark"] .filter-input, [data-theme="dark"] .rs-note-input { background: #2a2a2a !important; border-color: #3a3a3a !important; color: #e8e8e8 !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #666 !important; } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: #0099dd !important; } /* ================================================================ TEXT COLORS ================================================================ */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: #e8e8e8 !important; } [data-theme="dark"] .wf-name, [data-theme="dark"] .stat-num, [data-theme="dark"] .plan-name, [data-theme="dark"] .plan-price, [data-theme="dark"] .event-desc { color: #e8e8e8 !important; } [data-theme="dark"] p { color: #bbb !important; } [data-theme="dark"] .sub, [data-theme="dark"] .subtitle, [data-theme="dark"] .plan-desc, [data-theme="dark"] .how-sub, [data-theme="dark"] .usecases-sub, [data-theme="dark"] .pricing-sub, [data-theme="dark"] .admin-sub { color: #888 !important; } [data-theme="dark"] .wf-meta, [data-theme="dark"] .wf-steps, [data-theme="dark"] .member-meta, [data-theme="dark"] .event-meta, [data-theme="dark"] .stat-label, [data-theme="dark"] .day-label, [data-theme="dark"] .plan-usage { color: #666 !important; } [data-theme="dark"] .section-label { color: #0099dd !important; } [data-theme="dark"] .empty-state, [data-theme="dark"] .empty, [data-theme="dark"] .loading-more { color: #555 !important; } [data-theme="dark"] label { color: #aaa !important; } [data-theme="dark"] .step-text, [data-theme="dark"] .step-txt, [data-theme="dark"] .step-menu button, [data-theme="dark"] .plan-features li { color: #ccc !important; } [data-theme="dark"] .step-number { color: #555 !important; } [data-theme="dark"] .step-time { color: #666 !important; } [data-theme="dark"] .step-time:hover { color: #0099dd !important; } [data-theme="dark"] .step-label { color: #666 !important; } /* ================================================================ LINKS ================================================================ */ [data-theme="dark"] a { color: #0099dd; } [data-theme="dark"] .back-link, [data-theme="dark"] .link-row { color: #888 !important; } [data-theme="dark"] .link-row a { color: #0099dd !important; } [data-theme="dark"] .export-link { color: #0099dd !important; } /* ================================================================ BUTTONS ================================================================ */ /* Dark bg buttons: slightly lighter in dark mode */ [data-theme="dark"] .btn-black, [data-theme="dark"] .new-btn, [data-theme="dark"] .modal-btn, [data-theme="dark"] .account-btn-primary, [data-theme="dark"] .copy-btn, [data-theme="dark"] .plan-btn-black, [data-theme="dark"] .filter-btn:not(.secondary), [data-theme="dark"] .plan-upgrade-link { background: #e8e8e8 !important; color: #111 !important; } [data-theme="dark"] .btn-black:hover, [data-theme="dark"] .new-btn:hover, [data-theme="dark"] .modal-btn:hover, [data-theme="dark"] .plan-btn-black:hover { background: #fff !important; } /* Outline buttons */ [data-theme="dark"] .btn-outline, [data-theme="dark"] .plan-btn-outline, [data-theme="dark"] .btn-ghost, [data-theme="dark"] .logout-btn, [data-theme="dark"] .filter-btn.secondary { background: transparent !important; color: #aaa !important; border-color: #444 !important; } [data-theme="dark"] .btn-outline:hover, [data-theme="dark"] .plan-btn-outline:hover, [data-theme="dark"] .btn-ghost:hover, [data-theme="dark"] .logout-btn:hover { color: #e8e8e8 !important; border-color: #e8e8e8 !important; } /* Icon buttons */ [data-theme="dark"] .btn-icon, [data-theme="dark"] .icon-btn { background: #1e1e1e !important; border-color: #333 !important; color: #888 !important; } [data-theme="dark"] .btn-icon:hover, [data-theme="dark"] .icon-btn:hover { color: #e8e8e8 !important; border-color: #e8e8e8 !important; } /* Small buttons (superadmin) */ [data-theme="dark"] .btn-sm { background: #1e1e1e !important; border-color: #444 !important; color: #aaa !important; } [data-theme="dark"] .btn-sm:hover { border-color: #888 !important; } [data-theme="dark"] .btn-sm.danger { color: #f66 !important; border-color: #4a2a2a !important; } [data-theme="dark"] .btn-sm.danger:hover { background: #2a1a1a !important; } /* Monitoring page (superadmin) */ [data-theme="dark"] #panel-monitoring pre { background: #121212 !important; color: #aaa !important; } [data-theme="dark"] #panel-monitoring details summary { color: #0099dd !important; } [data-theme="dark"] #monitorErrors > div { border-color: #2a2a2a !important; } /* Dismiss / muted buttons */ [data-theme="dark"] .modal-dismiss { color: #666 !important; } [data-theme="dark"] .wf-delete { color: #444 !important; } [data-theme="dark"] .wf-delete:hover { color: #f44 !important; } [data-theme="dark"] .add-step-btn { color: #555 !important; } [data-theme="dark"] .add-step-btn:hover { color: #888 !important; } /* Danger buttons */ [data-theme="dark"] .account-btn-danger { background: #1e1e1e !important; color: #f66 !important; border-color: #4a2a2a !important; } [data-theme="dark"] .account-btn-danger:hover { background: #2a1a1a !important; } [data-theme="dark"] .account-btn-logout { background: #2a2a2a !important; color: #aaa !important; } /* Step menu */ [data-theme="dark"] .step-menu button:hover { background: #2a2a2a !important; } /* ================================================================ PLAN BANNER ================================================================ */ [data-theme="dark"] .plan-banner { background: #1e1e1e !important; border-bottom-color: #2a2a2a !important; color: #888 !important; } [data-theme="dark"] .plan-banner.at-limit { background: #2a2510 !important; } /* ================================================================ TABS ================================================================ */ [data-theme="dark"] .tabs { border-bottom-color: #2a2a2a !important; } [data-theme="dark"] .tab { color: #666 !important; } [data-theme="dark"] .tab.active { background: #e8e8e8 !important; color: #111 !important; } /* ================================================================ TABLES ================================================================ */ [data-theme="dark"] table { border-color: #2a2a2a !important; } [data-theme="dark"] th { border-bottom-color: #2a2a2a !important; color: #888 !important; background: #1e1e1e !important; } [data-theme="dark"] td { border-bottom-color: #222 !important; color: #ccc !important; } [data-theme="dark"] tr:hover { background: #252525 !important; } /* ================================================================ BADGES ================================================================ */ [data-theme="dark"] .badge-free { background: #2a2a2a !important; color: #777 !important; } [data-theme="dark"] .badge-pro { background: #0099dd !important; } [data-theme="dark"] .badge-owner { background: #e8e8e8 !important; color: #111 !important; } [data-theme="dark"] .badge-member { background: #2a2a2a !important; color: #888 !important; } [data-theme="dark"] .badge-immutable { background: #3a3020 !important; color: #da0 !important; } [data-theme="dark"] .plan-badge { background: #e8e8e8 !important; color: #111 !important; } [data-theme="dark"] .nav-badge { background: #e8e8e8 !important; color: #111 !important; } /* ================================================================ ACTIVITY ICONS ================================================================ */ [data-theme="dark"] .icon-sop { background: #1a2a35 !important; color: #0099dd !important; } [data-theme="dark"] .icon-run_sheet { background: #1a2a1a !important; color: #0c6 !important; } [data-theme="dark"] .icon-submission { background: #2a2510 !important; color: #da0 !important; } [data-theme="dark"] .icon-worker { background: #251a35 !important; color: #a370ed !important; } [data-theme="dark"] .icon-settings { background: #2a2a2a !important; color: #888 !important; } [data-theme="dark"] .icon-user { background: #351a2a !important; color: #e070b0 !important; } /* ================================================================ MEMBER / AVATAR ================================================================ */ [data-theme="dark"] .member-row { border-bottom-color: #2a2a2a !important; } [data-theme="dark"] .member-avatar { background: #2a2a2a !important; color: #888 !important; } [data-theme="dark"] .invite-row { border-bottom-color: #2a2a2a !important; } [data-theme="dark"] .invite-url { color: #777 !important; } [data-theme="dark"] .invite-uses { color: #555 !important; } /* ================================================================ EVENT LIST (activity) ================================================================ */ [data-theme="dark"] .event-row { border-bottom-color: #222 !important; } [data-theme="dark"] .event-row:hover { background: #252525 !important; } [data-theme="dark"] .event-meta .dot { color: #444 !important; } /* ================================================================ MESSAGES / ERRORS ================================================================ */ [data-theme="dark"] .error, [data-theme="dark"] .msg.err, [data-theme="dark"] .account-msg.err { background: #2a1a1a !important; border-color: #4a2a2a !important; color: #f66 !important; } [data-theme="dark"] .msg.ok, [data-theme="dark"] .account-msg.ok { background: #1a2a1a !important; color: #0c0 !important; } /* ================================================================ SIGNUP WIZARD ================================================================ */ [data-theme="dark"] .step-dot:not([class*="color-"]) { background: #444 !important; } [data-theme="dark"] .step-dot.active { background: #0099dd !important; } [data-theme="dark"] .step-dot.done { background: #e8e8e8 !important; } [data-theme="dark"] .timeline .step-dot { border-color: #121212 !important; } [data-theme="dark"] .color-0, [data-theme="dark"] .color-3, [data-theme="dark"] .color-6 { background: #e8e8e8 !important; } [data-theme="dark"] .color-2, [data-theme="dark"] .color-5 { background: #999 !important; } [data-theme="dark"] .success-check { background: #e8e8e8 !important; color: #111 !important; } /* ================================================================ INDEX.HTML — RECORDING / STEPS ================================================================ */ [data-theme="dark"] .start-prompt { background: #1e1e1e !important; border-bottom-color: #2a2a2a !important; } [data-theme="dark"] .step-content { background: #1e1e1e !important; border-color: #2a2a2a !important; } [data-theme="dark"] .timeline::before { background: #333 !important; } [data-theme="dark"] .step-dot-timeline { border-color: #121212 !important; } [data-theme="dark"] .frame-wrap.pdf-frame { background: #2a2a2a !important; border-color: #333 !important; } [data-theme="dark"] .frame-del { border-color: #1e1e1e !important; } [data-theme="dark"] .step-delete-x { background: #1e1e1e !important; border-color: #444 !important; } [data-theme="dark"] .step-delete-x:hover { background: #2a1a1a !important; border-color: #d00 !important; } [data-theme="dark"] .upload-label { background: #1e1e1e !important; border-color: #333 !important; color: #777 !important; } /* ================================================================ SHARE PAGE ================================================================ */ [data-theme="dark"] .timeline-line { background: #333 !important; } [data-theme="dark"] .step-dot-share { border-color: #121212 !important; } [data-theme="dark"] .step-dot-share.colors-0, [data-theme="dark"] .step-dot-share.colors-3, [data-theme="dark"] .step-dot-share.colors-6 { background: #e8e8e8 !important; } [data-theme="dark"] .step-dot-share.colors-2, [data-theme="dark"] .step-dot-share.colors-5 { background: #999 !important; } [data-theme="dark"] .share-toast { background: #e8e8e8 !important; color: #111 !important; } [data-theme="dark"] .step-box { background: #1e1e1e !important; border-color: #2a2a2a !important; } /* ================================================================ RUN SHEETS ================================================================ */ [data-theme="dark"] .rs-sheet, [data-theme="dark"] .rs-confirm-overlay, [data-theme="dark"] .rs-pin-overlay { background: #1e1e1e !important; } [data-theme="dark"] .rs-sheet-title, [data-theme="dark"] .rs-confirm-title, [data-theme="dark"] .rs-pin-header h2 { color: #e8e8e8 !important; } [data-theme="dark"] .rs-sheet-close { background: #2a2a2a !important; color: #888 !important; } [data-theme="dark"] .rs-sheet-close:hover { background: #333 !important; color: #e8e8e8 !important; } [data-theme="dark"] .rs-sheet-handle::after { background: #444 !important; } [data-theme="dark"] .rs-progress-bar { background: #2a2a2a !important; } [data-theme="dark"] .rs-item { border-bottom-color: #2a2a2a !important; } [data-theme="dark"] .rs-item-text { color: #ccc !important; } [data-theme="dark"] .rs-action-btn { background: #1e1e1e !important; border-color: #333 !important; color: #888 !important; } [data-theme="dark"] .rs-checkbox .rs-check-box { background: #1e1e1e !important; border-color: #444 !important; } [data-theme="dark"] .rs-confirm-summary { background: #2a2a2a !important; border-color: #333 !important; } [data-theme="dark"] .rs-confirm-summary-row { border-bottom-color: #333 !important; } [data-theme="dark"] .rs-confirm-summary-label { color: #777 !important; } [data-theme="dark"] .rs-confirm-summary-value { color: #e8e8e8 !important; } [data-theme="dark"] .rs-confirm-btn.secondary { background: #2a2a2a !important; border-color: #444 !important; color: #aaa !important; } [data-theme="dark"] .rs-submit-footer { background: #1e1e1e !important; } [data-theme="dark"] .rs-submit-btn.disabled { background: #2a2a2a !important; color: #555 !important; } [data-theme="dark"] .rs-pin-key { background: #2a2a2a !important; color: #e8e8e8 !important; } [data-theme="dark"] .rs-pin-key:hover { background: #333 !important; } [data-theme="dark"] .rs-pin-dot { border-color: #444 !important; background: #1e1e1e !important; } [data-theme="dark"] .rs-pin-dot.filled { background: #e8e8e8 !important; border-color: #e8e8e8 !important; } /* ================================================================ LANDING PAGE SECTIONS ================================================================ */ /* proof-bar is always light — no dark mode override needed */ [data-theme="dark"] .features-section { background: #181818 !important; border-color: #2a2a2a !important; } [data-theme="dark"] .admin-section { background: #0a0a0a !important; } [data-theme="dark"] .usecases-section, [data-theme="dark"] .pricing-section, [data-theme="dark"] .cta-section { border-top-color: #2a2a2a !important; } [data-theme="dark"] .video-section { background: #181818 !important; border-color: #2a2a2a !important; } [data-theme="dark"] .hero-screenshot, [data-theme="dark"] .feature-img, [data-theme="dark"] .video-wrap { border-color: #333 !important; } /* Plan features in modal */ [data-theme="dark"] .plan-features { background: #2a2a2a !important; border-color: #333 !important; } [data-theme="dark"] .plan-features .plan-label { color: #666 !important; } [data-theme="dark"] .plan-features .feat { color: #ccc !important; } [data-theme="dark"] .plan-features li { border-bottom-color: #333 !important; } [data-theme="dark"] .check { background: #0099dd !important; } /* ================================================================ LEGAL PAGES (privacy, terms, impressum) ================================================================ */ [data-theme="dark"] .content { color: #bbb !important; } [data-theme="dark"] .content h2, [data-theme="dark"] .content h3 { color: #e8e8e8 !important; } [data-theme="dark"] .content a { color: #0099dd !important; } /* ================================================================ FOOTER ================================================================ */ [data-theme="dark"] .footer { color: #666 !important; border-top-color: #2a2a2a !important; } [data-theme="dark"] .footer a { color: #777 !important; } /* ================================================================ INLINE STYLE OVERRIDES Catch common inline color patterns across all files ================================================================ */ [data-theme="dark"] [style*="color:#999"], [data-theme="dark"] [style*="color: #999"] { color: #777 !important; } [data-theme="dark"] [style*="color:#888"], [data-theme="dark"] [style*="color: #888"] { color: #999 !important; } [data-theme="dark"] [style*="color:#bbb"], [data-theme="dark"] [style*="color: #bbb"] { color: #888 !important; } [data-theme="dark"] [style*="color:#ccc"], [data-theme="dark"] [style*="color: #ccc"] { color: #777 !important; } [data-theme="dark"] [style*="color:#666"], [data-theme="dark"] [style*="color: #666"] { color: #aaa !important; } [data-theme="dark"] [style*="color:#333"], [data-theme="dark"] [style*="color: #333"] { color: #ccc !important; } [data-theme="dark"] [style*="color:#444"], [data-theme="dark"] [style*="color: #444"] { color: #bbb !important; } [data-theme="dark"] [style*="color:#111"], [data-theme="dark"] [style*="color: #111"] { color: #e8e8e8 !important; } [data-theme="dark"] [style*="color:#d00"], [data-theme="dark"] [style*="color: #d00"] { color: #f44 !important; } [data-theme="dark"] [style*="color:#ddd"], [data-theme="dark"] [style*="color: #ddd"] { color: #444 !important; } [data-theme="dark"] [style*="background:#fff"], [data-theme="dark"] [style*="background: #fff"] { background: #1e1e1e !important; } [data-theme="dark"] [style*="background:#f5f5f5"], [data-theme="dark"] [style*="background: #f5f5f5"] { background: #2a2a2a !important; } [data-theme="dark"] [style*="background:#f9f9f9"], [data-theme="dark"] [style*="background: #f9f9f9"] { background: #2a2a2a !important; } [data-theme="dark"] [style*="background:#fafafa"], [data-theme="dark"] [style*="background: #fafafa"] { background: #252525 !important; } [data-theme="dark"] [style*="background:#f0f0f0"], [data-theme="dark"] [style*="background: #f0f0f0"] { background: #2a2a2a !important; } [data-theme="dark"] [style*="border-top:1px solid #eee"], [data-theme="dark"] [style*="border-bottom:1px solid #eee"], [data-theme="dark"] [style*="border: 1px solid #eee"], [data-theme="dark"] [style*="border:1px solid #eee"] { border-color: #2a2a2a !important; } [data-theme="dark"] [style*="border-bottom:1px solid #f0f0f0"], [data-theme="dark"] [style*="border-bottom:1px solid #f5f5f5"] { border-color: #222 !important; } /* ================================================================ SCROLLBAR ================================================================ */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #121212; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #444; } /* ================================================================ SELECTION ================================================================ */ [data-theme="dark"] ::selection { background: #0099dd; color: #fff; } /* ================================================================ IMAGES — keep natural, just adjust shadows ================================================================ */ [data-theme="dark"] .admin-screenshot { box-shadow: 0 16px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08) !important; } [data-theme="dark"] .hero-screenshot { box-shadow: 0 24px 80px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.2) !important; } /* ================================================================ COMPREHENSIVE FIXES — from thorough dark mode audit ================================================================ */ /* --- Account modal (dashboard + index) --- */ [data-theme="dark"] .account-section { border-top-color: #2a2a2a !important; } [data-theme="dark"] .account-footer-links { border-top-color: #2a2a2a !important; } [data-theme="dark"] .account-footer-links a { color: #666 !important; } [data-theme="dark"] .account-footer-links a:hover { color: #e8e8e8 !important; } [data-theme="dark"] .account-btn-logout:hover { background: #333 !important; color: #e8e8e8 !important; } [data-theme="dark"] .plan-banner.at-limit .plan-usage { color: #f44 !important; } /* --- QR modal --- */ [data-theme="dark"] .qr-modal p { color: #999 !important; } [data-theme="dark"] .qr-dismiss { color: #666 !important; } [data-theme="dark"] .qr-dismiss:hover { color: #e8e8e8 !important; } /* --- Button active states --- */ [data-theme="dark"] .btn-icon:active { background: #2a2a2a !important; } [data-theme="dark"] .icon-btn:active { background: #2a2a2a !important; } [data-theme="dark"] .new-btn:active { background: #ccc !important; } [data-theme="dark"] .icon-btn.active { background: #e8e8e8 !important; border-color: #e8e8e8 !important; color: #111 !important; } /* --- index.html: recording/steps area --- */ [data-theme="dark"] .wf-banner { background: #121212 !important; } [data-theme="dark"] .wf-title { color: #e8e8e8 !important; } [data-theme="dark"] .steps-section { background: #121212 !important; } [data-theme="dark"] .obs-ticker { background: #1e1e1e !important; border-bottom-color: #2a2a2a !important; color: #777 !important; } [data-theme="dark"] .obs-ticker .obs-count { color: #555 !important; } [data-theme="dark"] .start-prompt button { background: #e8e8e8 !important; color: #111 !important; } [data-theme="dark"] .start-prompt button:active { background: #ccc !important; } [data-theme="dark"] .step-content:hover { border-color: #444 !important; } [data-theme="dark"] .step-action-btn { background: #1e1e1e !important; border-color: #333 !important; color: #777 !important; } [data-theme="dark"] .step-action-btn.danger { color: #f44 !important; border-color: #4a2a2a !important; } [data-theme="dark"] .step-menu { box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important; } [data-theme="dark"] .sop-pill { box-shadow: 0 4px 24px rgba(0,136,204,0.6), 0 2px 12px rgba(0,0,0,0.4) !important; } /* --- Share page extras --- */ [data-theme="dark"] .share-header a[href="/"] { color: #666 !important; } [data-theme="dark"] .share-header a[href="/"]:hover { color: #e8e8e8 !important; } [data-theme="dark"] .step-box:hover { border-color: #444 !important; } [data-theme="dark"] .footer-share { color: #444 !important; } [data-theme="dark"] .footer-share a { color: #555 !important; } [data-theme="dark"] .footer-share span { color: #3a3a3a !important; } [data-theme="dark"] .rs-submit-footer { border-top-color: #2a2a2a !important; } [data-theme="dark"] .rs-action-btn.has-data { background: #1a2a35 !important; border-color: #0099dd !important; color: #0099dd !important; } [data-theme="dark"] .rs-photo-thumb { border-color: #333 !important; } [data-theme="dark"] .step-filmstrip .frame-wrap.pdf-frame svg { stroke: #f44 !important; } /* --- Admin panel extras --- */ [data-theme="dark"] .toggle-track { background: #444 !important; } [data-theme="dark"] .toggle-track::after { background: #ccc !important; } [data-theme="dark"] .badge-default { background: #2a2a2a !important; color: #777 !important; } [data-theme="dark"] .toggle-wrap { border-bottom-color: #2a2a2a !important; } [data-theme="dark"] .list-row { border-bottom-color: #2a2a2a !important; } [data-theme="dark"] .list-row:hover { background: #252525 !important; } [data-theme="dark"] .data-table tr:hover td { background: #252525 !important; } [data-theme="dark"] .btn-primary:hover { background: #fff !important; } /* --- Superadmin extras --- */ [data-theme="dark"] .stats-grid { background: #2a2a2a !important; } [data-theme="dark"] .tab:hover { color: #bbb !important; } /* --- Activity page extras --- */ [data-theme="dark"] .spinner { border-color: #333 !important; border-top-color: #0099dd !important; } [data-theme="dark"] .filter-btn.secondary:hover { color: #e8e8e8 !important; border-color: #e8e8e8 !important; } /* --- Signup page extras --- */ [data-theme="dark"] .btn-ghost:hover { background: #2a2a2a !important; color: #e8e8e8 !important; border-color: #e8e8e8 !important; } /* --- Reset password page --- */ [data-theme="dark"] .btn:disabled { background: #2a2a2a !important; color: #555 !important; } [data-theme="dark"] .back-link:hover { color: #e8e8e8 !important; } /* --- Admin.html extras --- */ [data-theme="dark"] .section-header { border-bottom-color: #2a2a2a !important; } /* --- Landing page extras --- */ [data-theme="dark"] .step-num { background: #e8e8e8 !important; color: #111 !important; } [data-theme="dark"] .how-section .step-card { background: #1e1e1e !important; border-color: #2a2a2a !important; } [data-theme="dark"] .how-section .step-card:hover { border-color: #444 !important; } [data-theme="dark"] .how-section .step-card h3 { color: #e8e8e8 !important; } [data-theme="dark"] .how-section .step-card p { color: #999 !important; } [data-theme="dark"] .features-section h2, [data-theme="dark"] .how-section h2, [data-theme="dark"] .usecases-section h2, [data-theme="dark"] .pricing-section h2, [data-theme="dark"] .cta-section h2 { color: #e8e8e8 !important; } [data-theme="dark"] .cta-section p { color: #888 !important; } [data-theme="dark"] .feature-text h3 { color: #e8e8e8 !important; } [data-theme="dark"] .feature-text p { color: #999 !important; } [data-theme="dark"] .usecase-card h3 { color: #e8e8e8 !important; } [data-theme="dark"] .usecase-card p { color: #999 !important; } [data-theme="dark"] .plan-card.featured { border-color: #e8e8e8 !important; } [data-theme="dark"] .plan-name { color: #e8e8e8 !important; } [data-theme="dark"] .plan-price { color: #e8e8e8 !important; } [data-theme="dark"] .plan-price span { color: #666 !important; } [data-theme="dark"] .plan-features li { color: #ccc !important; border-bottom-color: #2a2a2a !important; } [data-theme="dark"] .btn-outline:hover { color: #e8e8e8 !important; border-color: #e8e8e8 !important; } /* --- Additional inline style overrides --- */ [data-theme="dark"] [style*="background:#fff0f0"], [data-theme="dark"] [style*="background: #fff0f0"] { background: #2a1a1a !important; } [data-theme="dark"] [style*="background:#f0fff0"], [data-theme="dark"] [style*="background: #f0fff0"] { background: #1a2a1a !important; } [data-theme="dark"] [style*="background:#fff8f0"], [data-theme="dark"] [style*="background: #fff8f0"] { background: #2a2510 !important; } [data-theme="dark"] [style*="background:#e5e5e5"], [data-theme="dark"] [style*="background: #e5e5e5"] { background: #333 !important; } [data-theme="dark"] [style*="border:1px solid #fcc"], [data-theme="dark"] [style*="border: 1px solid #fcc"] { border-color: #4a2a2a !important; } [data-theme="dark"] [style*="color:#b60"], [data-theme="dark"] [style*="color: #b60"] { color: #da0 !important; } /* --- Marketing pages (Jinja2 templates) --- */ [data-theme="dark"] .pricing-hero h1, [data-theme="dark"] .hiw-hero h1, [data-theme="dark"] .tmpl-hero h1, [data-theme="dark"] .tp-hero h1, [data-theme="dark"] .compare-section h2, [data-theme="dark"] .faq-section h2, [data-theme="dark"] .hiw-cta h2, [data-theme="dark"] .tmpl-cta h2 { color: #e8e8e8; } [data-theme="dark"] .pricing-hero p, [data-theme="dark"] .hiw-hero p, [data-theme="dark"] .tmpl-hero p, [data-theme="dark"] .tp-hero p { color: #999; } [data-theme="dark"] .compare-table th { color: #999; border-bottom-color: #333; } [data-theme="dark"] .compare-table td { border-bottom-color: #252525; color: #ccc; } [data-theme="dark"] .compare-table .feature-name { color: #e8e8e8; } [data-theme="dark"] .compare-table .no { color: #555; } [data-theme="dark"] .faq-item { border-color: #2a2a2a; } [data-theme="dark"] .faq-q { color: #e8e8e8; } [data-theme="dark"] .faq-q::after { color: #666; } [data-theme="dark"] .faq-a { color: #999; } [data-theme="dark"] .step-text h2 { color: #e8e8e8; } [data-theme="dark"] .step-text p { color: #999; } [data-theme="dark"] .step-img { border-color: #333; box-shadow: 0 8px 32px rgba(0,0,0,0.3); } [data-theme="dark"] .step-num { background: #0088cc; } [data-theme="dark"] .tmpl-card { border-color: #2a2a2a; background: #1e1e1e; } [data-theme="dark"] .tmpl-card:hover { border-color: #0088cc; box-shadow: 0 4px 16px rgba(0,136,204,0.15); } [data-theme="dark"] .tmpl-card h3 { color: #e8e8e8; } [data-theme="dark"] .tmpl-card p { color: #888; } [data-theme="dark"] .tmpl-steps { color: #666; } /* --- Template detail pages --- */ [data-theme="dark"] .tp-hero h1 { color: #e8e8e8; } [data-theme="dark"] .tp-hero p { color: #999; } [data-theme="dark"] .tp-hero .tp-badge { background: #1a2d3d; color: #4db8e8; } [data-theme="dark"] .tp-hero .btn-view { background: #e8e8e8; color: #111; } [data-theme="dark"] .tp-hero .btn-view:hover { background: #fff; } [data-theme="dark"] .tp-steps h2 { color: #e8e8e8; } [data-theme="dark"] .tp-step-content h3 { color: #e8e8e8; } [data-theme="dark"] .tp-step-content p { color: #999; } [data-theme="dark"] .tp-cta { background: #1a1a1a; border-top-color: #2a2a2a; } [data-theme="dark"] .tp-cta h2 { color: #e8e8e8; } [data-theme="dark"] .tp-cta p { color: #999; } [data-theme="dark"] .hiw-cta p, [data-theme="dark"] .tmpl-cta p { color: #999; } /* --- Industry pages --- */ [data-theme="dark"] .ind-hero h1 { color: #e8e8e8; } [data-theme="dark"] .ind-hero p { color: #999; } [data-theme="dark"] .pain-section h2, [data-theme="dark"] .ind-cta h2 { color: #e8e8e8; } [data-theme="dark"] .ind-cta p { color: #999; } [data-theme="dark"] .pain-card { border-color: #2a2a2a; background: #1e1e1e; } [data-theme="dark"] .pain-card h3 { color: #e8e8e8; } [data-theme="dark"] .pain-card p { color: #999; } [data-theme="dark"] .sol-section { background: #1a1a1a; border-color: #2a2a2a; } [data-theme="dark"] .sol-section h2 { color: #e8e8e8; } [data-theme="dark"] .sol-text h3 { color: #e8e8e8; } [data-theme="dark"] .sol-text p { color: #999; } [data-theme="dark"] .sol-img { border-color: #333; box-shadow: 0 8px 32px rgba(0,0,0,0.3); } [data-theme="dark"] .related-section h2 { color: #e8e8e8; } [data-theme="dark"] .related-link { border-color: #2a2a2a; color: #ccc; } [data-theme="dark"] .related-link:hover { border-color: #0088cc; color: #0088cc; } [data-theme="dark"] .ind-cta { border-color: #2a2a2a; } /* --- Blog --- */ [data-theme="dark"] .blog-hero h1 { color: #e8e8e8; } [data-theme="dark"] .blog-hero p { color: #999; } [data-theme="dark"] .blog-card { border-color: #2a2a2a; background: #1e1e1e; } [data-theme="dark"] .blog-card:hover { border-color: #0088cc; box-shadow: 0 4px 16px rgba(0,136,204,0.15); } [data-theme="dark"] .blog-card h2 { color: #e8e8e8; } [data-theme="dark"] .blog-card p { color: #888; } [data-theme="dark"] .blog-meta { color: #666; } [data-theme="dark"] .blog-tag { background: rgba(0,136,204,0.12); } [data-theme="dark"] .post-header h1 { color: #e8e8e8; } [data-theme="dark"] .post-desc { color: #999; } [data-theme="dark"] .post-meta { color: #666; } [data-theme="dark"] .post-tag { background: rgba(0,136,204,0.12); } [data-theme="dark"] .post-body { color: #ccc; } [data-theme="dark"] .post-body h2, [data-theme="dark"] .post-body h3 { color: #e8e8e8; } [data-theme="dark"] .post-body strong { color: #e8e8e8; } [data-theme="dark"] .post-body blockquote { background: #1e1e1e; border-left-color: #0088cc; color: #999; } [data-theme="dark"] .post-body code { background: #252525; color: #ccc; } [data-theme="dark"] .post-body pre { background: #1e1e1e; } [data-theme="dark"] .post-body hr { border-top-color: #2a2a2a; } [data-theme="dark"] .post-cta-box { background: #1e1e1e; border-color: #2a2a2a; } [data-theme="dark"] .post-cta-box h3 { color: #e8e8e8; } [data-theme="dark"] .post-cta-box p { color: #999; } /* --- Comparison pages --- */ [data-theme="dark"] .vs-hero h1, [data-theme="dark"] .vs-cta h2 { color: #e8e8e8; } [data-theme="dark"] .vs-hero p, [data-theme="dark"] .vs-cta p { color: #999; } [data-theme="dark"] .vs-tldr-box { background: #1e1e1e; border-color: #2a2a2a; } [data-theme="dark"] .vs-tldr-box h2 { color: #e8e8e8; } [data-theme="dark"] .vs-tldr-box p { color: #999; } [data-theme="dark"] .vs-table-section h2, [data-theme="dark"] .vs-diff-section h2, [data-theme="dark"] .vs-who-section h2 { color: #e8e8e8; } [data-theme="dark"] .vs-table th { border-bottom-color: #333; color: #ccc; } [data-theme="dark"] .vs-table th:first-child { color: #888; } [data-theme="dark"] .vs-table td { border-bottom-color: #252525; color: #ccc; } [data-theme="dark"] .vs-table .feat { color: #e8e8e8; } [data-theme="dark"] .vs-table .no { color: #555; } [data-theme="dark"] .vs-table .highlight { background: rgba(0,136,204,0.08); } [data-theme="dark"] .vs-diff-card, [data-theme="dark"] .vs-who-card { border-color: #2a2a2a; background: #1e1e1e; } [data-theme="dark"] .vs-diff-card h3, [data-theme="dark"] .vs-who-card h3 { color: #e8e8e8; } [data-theme="dark"] .vs-diff-card p, [data-theme="dark"] .vs-who-card li { color: #999; } [data-theme="dark"] .vs-cta { border-top-color: #2a2a2a; }