/* ========================================================================== PRAYOG SETU — UNIVERSAL GLOBAL THEME SYSTEM (LIGHT / DARK) ========================================================================== */ /* ── 1. ROOT DESIGN SYSTEM VARIABLES (LIGHT MODE DEFAULT) ────────────────── */ :root, html[data-theme="light"], html:not(.dark):not([data-theme="dark"]) { color-scheme: light; /* Core Architecture Variables */ --app-bg: #f8fafc; --surface: #ffffff; --surface-secondary: #f1f5f9; --border: #dbe3ee !important; --text-primary: #0f172a !important; --text-secondary: #475569 !important; --accent: #0ea5e9; --shadow: rgba(15, 23, 42, 0.10); --simulator-bg: #f8fafc; --simulator-grid: #cbd5e1; /* Extended Theme Tokens */ --prayog-bg-canvas: #f8fafc; --prayog-bg-surface: #ffffff; --prayog-bg-card: #ffffff; --prayog-bg-card-alt: #f8fafc; --prayog-bg-card-hover: #f1f5f9; --prayog-bg-input: #ffffff; --prayog-bg-header: rgba(255, 255, 255, 0.92); --prayog-bg-overlay: rgba(15, 23, 42, 0.5); --prayog-text-primary: #0f172a; --prayog-text-secondary: #475569; --prayog-text-muted: #64748b; --prayog-text-dim: #94a3b8; --prayog-text-inverse: #ffffff; --prayog-border: #e2e8f0; --prayog-border-subtle: #f1f5f9; --prayog-border-strong: #cbd5e1; --prayog-border-focus: #0284c7; --prayog-grid-dot: #cbd5e1; --prayog-cyan: #0284c7; --prayog-cyan-glow: rgba(2, 132, 199, 0.15); --prayog-blue: #2563eb; --prayog-blue-glow: rgba(37, 99, 235, 0.15); --prayog-purple: #9333ea; --prayog-emerald: #16a34a; --prayog-amber: #d97706; --prayog-rose: #e11d48; /* Universal Simulator Variable Overrides for Light Mode */ --bg-dark: #f8fafc !important; --bg-main: #f8fafc !important; --bg-base: #f8fafc !important; --bg-primary: #f8fafc !important; --bg-secondary: #ffffff !important; --bg-light: #f8fafc !important; --lab-bg: #ffffff !important; --panel-bg: #f8fafc !important; --panel-header-bg: #f1f5f9 !important; --card-bg: #ffffff !important; --card-header-bg: #f8fafc !important; --bg-card: #ffffff !important; --bg-card-alt: #f8fafc !important; --bg-card-subtle: #f1f5f9 !important; --bg-panel: #ffffff !important; --bg-input: #ffffff !important; --bg-hover: #f1f5f9 !important; --bg-elevated: #ffffff !important; --bg-lab: #f4f6f9 !important; --bg-page: #f1f5f9 !important; --bg-color: #f8fafc !important; --bg-sidebar: #f1f5f9 !important; --bg-subtle: #f8fafc !important; --border-color: #e2e8f0 !important; --border-subtle: #f1f5f9 !important; --border-light: #e2e8f0 !important; --border-main: #cbd5e1 !important; --border-active: #0284c7 !important; --panel-border: #cbd5e1 !important; --card-border: #e2e8f0 !important; --border-card: #e2e8f0 !important; --bg-panel-header: #f8fafc !important; --text-main: #0f172a !important; --text-dark: #0f172a !important; --text-heading: #0f172a !important; --text-dim: #94a3b8 !important; --text-muted: #64748b !important; --text-highlight: #0284c7 !important; --primary-dark: #0f172a !important; --dark-navy: #0f172a !important; --navy-primary: #0f172a !important; --navy-900: #0f172a !important; --navy-800: #1e293b !important; --navy-700: #334155 !important; --navy-600: #475569 !important; --header-navy: #1e3a8a !important; --header-bg: #ffffff !important; --header-text: #0f172a !important; /* Digital Electronics Gates / SVGs */ --gate-fill: #e8ecf1 !important; --gate-stroke: #1a2744 !important; --switch-track-off: #cbd5e1 !important; --switch-knob: #ffffff !important; /* Tailwind CSS Variable Mappings */ --tw-bg-background: #f8fafc; --tw-bg-surface: #f8fafc; --tw-bg-surface-lowest: #ffffff; --tw-bg-surface-low: #f6f3f2; --tw-bg-surface-container: #f1edec; --tw-bg-surface-high: #ebe7e7; --tw-bg-surface-highest: #e5e2e1; --tw-text-on-surface: #1c1b1b; --tw-text-on-surface-variant: #444748; --tw-border-outline-variant: #c4c7c8; --tw-border-outline: #747878; --tw-color-tertiary: #3a5f94; --tw-color-on-tertiary: #ffffff; --tw-color-tertiary-container: #ffffff; --tw-color-on-tertiary-container: #5377ae; --tw-color-tertiary-fixed: #d5e3ff; --tw-color-on-tertiary-fixed: #001b3c; --tw-color-on-tertiary-fixed-variant: #1f477b; --tw-color-primary: #5d5f5f; --tw-color-secondary: #5d5e60; --tw-color-secondary-container: #dfdfe1; --tw-color-inverse-surface: #313030; --tw-color-inverse-on-surface: #f4f0ef; } /* ── 2. DARK THEME OVERRIDES ────────────────────────────────────────────── */ html[data-theme="dark"], html.dark { color-scheme: dark; /* Core Architecture Variables */ --app-bg: #080d18; --surface: #111827; --surface-secondary: #172033; --border: #263550 !important; --text-primary: #f8fafc !important; --text-secondary: #94a3b8 !important; --accent: #38bdf8; --shadow: rgba(0, 0, 0, 0.35); --simulator-bg: #080d18; --simulator-grid: #263550; /* Extended Theme Tokens */ --prayog-bg-canvas: #080d18; --prayog-bg-surface: #111827; --prayog-bg-card: #111827; --prayog-bg-card-alt: #172033; --prayog-bg-card-hover: #1e293b; --prayog-bg-input: #0a1020; --prayog-bg-header: rgba(14, 21, 38, 0.88); --prayog-bg-overlay: rgba(3, 7, 18, 0.85); --prayog-text-primary: #f8fafc; --prayog-text-secondary: #94a3b8; --prayog-text-muted: #64748b; --prayog-text-dim: #475569; --prayog-text-inverse: #070a12; --prayog-border: #263550; --prayog-border-subtle: rgba(255, 255, 255, 0.06); --prayog-border-strong: rgba(255, 255, 255, 0.18); --prayog-border-focus: #38bdf8; --prayog-grid-dot: rgba(255, 255, 255, 0.08); --prayog-cyan: #38bdf8; --prayog-cyan-glow: rgba(56, 189, 248, 0.25); --prayog-blue: #3b82f6; --prayog-blue-glow: rgba(59, 130, 246, 0.25); --prayog-purple: #a855f7; --prayog-emerald: #10b981; --prayog-amber: #f59e0b; --prayog-rose: #f43f5e; /* Universal Simulator Variable Overrides for Dark Mode */ --bg-dark: #080d18 !important; --bg-main: #080d18 !important; --bg-base: #080d18 !important; --bg-primary: #0a0e1a !important; --bg-secondary: #111827 !important; --bg-light: #080d18 !important; --lab-bg: #080d18 !important; --panel-bg: #111827 !important; --panel-header-bg: #172033 !important; --card-bg: #111827 !important; --card-header-bg: #172033 !important; --bg-card: #111827 !important; --bg-card-alt: #172033 !important; --bg-card-subtle: #172033 !important; --bg-panel: #111827 !important; --bg-input: #0a1020 !important; --bg-hover: #1e293b !important; --bg-elevated: #162036 !important; --bg-lab: #080d18 !important; --bg-page: #080d18 !important; --bg-color: #080d18 !important; --bg-sidebar: #0f172a !important; --bg-subtle: #172033 !important; --border-color: #263550 !important; --border-subtle: rgba(255, 255, 255, 0.06) !important; --border-light: rgba(255, 255, 255, 0.08) !important; --border-main: #263550 !important; --border-active: rgba(56, 189, 248, 0.5) !important; --panel-border: #263550 !important; --card-border: #263550 !important; --border-card: #263550 !important; --bg-panel-header: #172033 !important; --text-main: #f8fafc !important; --text-dark: #f8fafc !important; --text-heading: #f8fafc !important; --text-dim: #475569 !important; --text-muted: #94a3b8 !important; --text-highlight: #38bdf8 !important; --primary-dark: #070a12 !important; --dark-navy: #f8fafc !important; --navy-primary: #070a12 !important; --navy-900: #f8fafc !important; --navy-800: #e2e8f0 !important; --navy-700: #cbd5e1 !important; --navy-600: #94a3b8 !important; --header-navy: #0f172a !important; --header-bg: #0e1526 !important; --header-text: #f8fafc !important; /* Digital Electronics Gates / SVGs */ --gate-fill: #162036 !important; --gate-stroke: #38bdf8 !important; --switch-track-off: #334155 !important; --switch-knob: #f8fafc !important; /* Tailwind CSS Variable Mappings */ --tw-bg-background: #080d18; --tw-bg-surface: #0e1526; --tw-bg-surface-lowest: #0a0f1d; --tw-bg-surface-low: #0e1627; --tw-bg-surface-container: #131e33; --tw-bg-surface-high: #182641; --tw-bg-surface-highest: #1f3052; --tw-text-on-surface: #f8fafc; --tw-text-on-surface-variant: #94a3b8; --tw-border-outline-variant: #263550; --tw-border-outline: #475569; --tw-color-tertiary: #38bdf8; --tw-color-on-tertiary: #070a12; --tw-color-tertiary-container: #0c2742; --tw-color-on-tertiary-container: #7dd3fc; --tw-color-tertiary-fixed: #07233d; --tw-color-on-tertiary-fixed: #38bdf8; --tw-color-on-tertiary-fixed-variant: #0284c7; --tw-color-primary: #38bdf8; --tw-color-secondary: #94a3b8; --tw-color-secondary-container: #1e293b; --tw-color-inverse-surface: #f8fafc; --tw-color-inverse-on-surface: #070a12; } /* ── 3. GLOBAL SMOOTH THEME TRANSITION (Visual Properties Only) ────────── */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease, fill 250ms ease, stroke 250ms ease, box-shadow 250ms ease !important; transition-delay: 0s !important; } @media (prefers-reduced-motion: reduce) { html.theme-transitioning, html.theme-transitioning * { transition: none !important; } } /* ── 4. COMPACT PILL THEME TOGGLE SWITCH: [ 🌙 ● ☀ ] ─────────────────── */ .prayog-theme-toggle { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; width: 58px; height: 28px; padding: 2px 4px; border-radius: 9999px; background-color: #1e293b; border: 1px solid rgba(255, 255, 255, 0.16); cursor: pointer; outline: none; user-select: none; -webkit-tap-highlight-color: transparent; flex-shrink: 0; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); transition: background-color 250ms ease, border-color 250ms ease, box-shadow 250ms ease; } /* Light state pill switch */ html[data-theme="light"] .prayog-theme-toggle { background-color: #e2e8f0; border-color: #cbd5e1; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.04); } /* Focus ring for accessibility */ .prayog-theme-toggle:focus-visible { outline: 2px solid #0284c7; outline-offset: 2px; } /* Track icon strip */ .prayog-toggle-track { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; pointer-events: none; } .prayog-track-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; transition: opacity 250ms ease, transform 250ms ease; } .icon-moon { color: #38bdf8; } .icon-sun { color: #f59e0b; } /* Indicator contrast depending on active theme */ html[data-theme="dark"] .icon-moon { opacity: 1; transform: scale(1.05); } html[data-theme="dark"] .icon-sun { opacity: 0.35; transform: scale(0.85); } html[data-theme="light"] .icon-moon { opacity: 0.35; transform: scale(0.85); } html[data-theme="light"] .icon-sun { opacity: 1; transform: scale(1.05); } /* Sliding Indicator Thumb (●) */ .prayog-theme-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #ffffff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2); transform: translateX(0px); transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), background-color 250ms ease, box-shadow 250ms ease; z-index: 2; pointer-events: none; } html[data-theme="light"] .prayog-theme-thumb { transform: translateX(30px); background: #ffffff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.1); } @media (prefers-reduced-motion: reduce) { .prayog-theme-toggle, .prayog-theme-thumb, .prayog-track-icon { transition: none !important; } } /* ── 5. UNIVERSAL SIMULATOR ENVIRONMENT THEME ENGINE ───────────────────── */ /* Full Simulation Workspaces & Containers */ .simulator-layout, .lab-container, .lab-workspace, .workspace-panel, .left-panel, .workspace-viewport, .simulation-viewport, .circuit-workspace, .schematic-viewport, .schematic-card, .svg-container, .svg-viewport, .canvas-wrapper, .workspace-grid, .lab-main, .workspace-area, .experiment-stage, .stage-container { background-color: var(--simulator-bg) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } /* Large Simulator SVG Background Canvas Rectangles */ html[data-theme="dark"] svg > rect[width="950"][height="680"], html[data-theme="dark"] svg > rect[width="960"][height="620"], html[data-theme="dark"] svg > rect[width="900"][height="700"], html[data-theme="dark"] svg > rect[width="800"][height="600"], html[data-theme="dark"] svg > rect[width="760"][height="480"], html[data-theme="dark"] svg > rect[width="940"][height="420"], html[data-theme="dark"] svg > rect[width="900"][height="520"], html[data-theme="dark"] svg > rect[width="100%"][height="100%"], html[data-theme="dark"] #svgContainer > svg > rect:first-of-type, html[data-theme="dark"] #svg-container > svg > rect:first-of-type, html[data-theme="dark"] .svg-container > svg > rect:first-of-type, html[data-theme="dark"] .svg-viewport > svg > rect:first-of-type, html[data-theme="dark"] #robotSvg > rect:first-of-type, html[data-theme="dark"] #robot-svg > #environment-layer > rect:first-of-type, html[data-theme="dark"] #labSvg > rect:first-of-type { fill: #080d18 !important; } html[data-theme="light"] svg > rect[width="950"][height="680"], html[data-theme="light"] svg > rect[width="960"][height="620"], html[data-theme="light"] svg > rect[width="900"][height="700"], html[data-theme="light"] svg > rect[width="800"][height="600"], html[data-theme="light"] svg > rect[width="760"][height="480"], html[data-theme="light"] svg > rect[width="940"][height="420"], html[data-theme="light"] svg > rect[width="900"][height="520"], html[data-theme="light"] svg > rect[width="100%"][height="100%"], html[data-theme="light"] #svgContainer > svg > rect:first-of-type, html[data-theme="light"] #svg-container > svg > rect:first-of-type, html[data-theme="light"] .svg-container > svg > rect:first-of-type, html[data-theme="light"] .svg-viewport > svg > rect:first-of-type, html[data-theme="light"] #robotSvg > rect:first-of-type, html[data-theme="light"] #robot-svg > #environment-layer > rect:first-of-type, html[data-theme="light"] #labSvg > rect:first-of-type { fill: #f8fafc !important; } /* Grids & Blueprint Backgrounds */ html[data-theme="dark"] pattern[id*="grid"] path, html[data-theme="dark"] pattern[id*="grid"] line, html[data-theme="dark"] svg pattern[id="grid"] path, html[data-theme="dark"] #floor-grid line, html[data-theme="dark"] .schematic-grid line { stroke: #1e293b !important; } html[data-theme="light"] pattern[id*="grid"] path, html[data-theme="light"] pattern[id*="grid"] line, html[data-theme="light"] svg pattern[id="grid"] path, html[data-theme="light"] #floor-grid line, html[data-theme="light"] .schematic-grid line { stroke: #cbd5e1 !important; } /* 3-Axis Robot Isometric Worktable & Grid */ html[data-theme="dark"] #worktableGroup polygon[fill="url(#worktableSurface)"] { fill: #1a2333 !important; stroke: #263550 !important; } html[data-theme="dark"] #worktableGroup polygon[points="140,480 410,615 410,632 140,497"] { fill: #0f172a !important; stroke: #1e293b !important; } html[data-theme="dark"] #worktableGroup polygon[points="410,615 810,415 810,432 410,632"] { fill: #131d31 !important; stroke: #1e293b !important; } html[data-theme="dark"] #gridGroup line { stroke: #334155 !important; } html[data-theme="light"] #gridGroup line { stroke: #94a3b8 !important; } /* Right-Side Simulator Control Panels & Cards */ .controls-panel, .control-panel, .right-panel, .sidebar-controls, .control-card, .card, .panel-card, .exercise-card, .log-card, .settings-card, .modal-card { background-color: var(--surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } .panel-header, .panel-sub-header, .settings-hdr { background-color: var(--surface-secondary) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } .panel-title, .card-title, .sub-title { color: var(--text-primary) !important; border-color: var(--border) !important; } /* Digital Readouts (DRO) */ .dro-container, .dro-display, .readout-card, .readout-box, .digital-readout, .dro-card { background-color: var(--bg-input) !important; border: 1px solid var(--border) !important; } .dro-axis { border-color: var(--border) !important; } html[data-theme="light"] .dro-x .dro-label { color: #dc2626 !important; } html[data-theme="light"] .dro-y .dro-label { color: #16a34a !important; } html[data-theme="light"] .dro-z .dro-label { color: #2563eb !important; } html[data-theme="dark"] .dro-x .dro-label { color: #fca5a5 !important; } html[data-theme="dark"] .dro-y .dro-label { color: #86efac !important; } html[data-theme="dark"] .dro-z .dro-label { color: #93c5fd !important; } /* Keep semantic DRO values recognizable across both themes */ .dro-x .dro-val { color: #ef4444 !important; } .dro-y .dro-val { color: #22c55e !important; } .dro-z .dro-val { color: #3b82f6 !important; } .dro-unit { color: var(--text-secondary) !important; } /* Status Cards & Indicators */ .status-box, .telemetry-pill, .metric-card { background-color: var(--surface-secondary) !important; border: 1px solid var(--border) !important; color: var(--text-primary) !important; } .box-title, .pill-label { color: var(--text-secondary) !important; } /* Sliders & Inputs */ .slider-control-group, .jog-group, .joint-control-group { background-color: var(--surface-secondary) !important; border: 1px solid var(--border) !important; } .range-slider, input[type="range"] { accent-color: var(--accent); } html[data-theme="dark"] .range-slider { background: #263550 !important; } html[data-theme="light"] .range-slider { background: #cbd5e1 !important; } .slider-val-badge { background-color: var(--surface) !important; color: var(--accent) !important; border: 1px solid var(--border) !important; } /* Axis controls / Jog buttons */ .jog-btn, .cam-btn, .view-btn, .step-btn, .spd-btn, .tab-btn, .icon-toggle-btn { background-color: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text-secondary) !important; } .jog-btn:hover, .cam-btn:hover, .view-btn:hover, .step-btn:hover, .spd-btn:hover, .tab-btn:hover { background-color: var(--surface-secondary) !important; color: var(--text-primary) !important; } .cam-btn.active, .step-btn.active, .spd-btn.active { background-color: var(--accent) !important; color: #ffffff !important; border-color: var(--accent) !important; } /* Standard Simulator Buttons */ .btn-action { background-color: var(--surface-secondary) !important; border: 1px solid var(--border) !important; color: var(--text-primary) !important; } .btn-action:hover:not(:disabled) { background-color: var(--border) !important; } .btn-outline { background-color: transparent !important; border: 1px solid var(--border) !important; color: var(--text-primary) !important; } /* Emergency Stop Button ALWAYS preserves recognizable safety red */ .btn-danger, .estop-btn, #estop-btn { background-color: #dc2626 !important; color: #ffffff !important; border-color: #b91c1c !important; } .btn-danger:hover:not(:disabled), .estop-btn:hover:not(:disabled), #estop-btn:hover:not(:disabled) { background-color: #b91c1c !important; } /* Log Terminals & Text */ .log-terminal { background-color: #070a12 !important; border: 1px solid #1e293b !important; } .step-item { background-color: var(--surface-secondary) !important; border: 1px solid var(--border) !important; color: var(--text-primary) !important; } .exercise-instruction p { color: var(--text-secondary) !important; } .exercise-instruction code { background-color: var(--surface-secondary) !important; color: var(--accent) !important; border: 1px solid var(--border) !important; } /* Tables across simulators */ table, .observation-table { background-color: var(--surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } th { background-color: var(--surface-secondary) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } td { border-color: var(--border) !important; color: var(--text-secondary) !important; } /* Form Inputs */ input[type="text"], input[type="number"], select, textarea { background-color: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } /* Status Indicators */ html[data-theme="dark"] .status-ready { background-color: rgba(22, 163, 74, 0.2) !important; color: #4ade80 !important; } html[data-theme="dark"] .status-busy { background-color: rgba(234, 179, 8, 0.2) !important; color: #fde047 !important; } html[data-theme="dark"] .status-off { background-color: rgba(100, 116, 139, 0.2) !important; color: #94a3b8 !important; } html[data-theme="dark"] .status-estop { background-color: rgba(220, 38, 38, 0.2) !important; color: #f87171 !important; } html[data-theme="light"] .status-ready { background-color: #dcfce7 !important; color: #15803d !important; } html[data-theme="light"] .status-busy { background-color: #fef9c3 !important; color: #a16207 !important; } html[data-theme="light"] .status-off { background-color: #f1f5f9 !important; color: #64748b !important; } html[data-theme="light"] .status-estop { background-color: #fee2e2 !important; color: #b91c1c !important; } /* Technical Blueprint Grid Pattern on Main & Hub Pages */ html[data-theme="dark"] .technical-grid, html[data-theme="light"] .technical-grid { background-image: none !important; } /* Blueprint container */ html[data-theme="dark"] .blueprint-svg-container { background-color: #0b1120 !important; border-color: rgba(255, 255, 255, 0.1) !important; } html[data-theme="dark"] .blueprint-svg-container svg text { fill: #94a3b8 !important; } html[data-theme="dark"] .blueprint-svg-container svg rect[stroke="#cbd5e1"], html[data-theme="dark"] .blueprint-svg-container svg path[stroke="#cbd5e1"] { stroke: #334155 !important; } /* ── 6. HIGH-CONTRAST GLOBAL TYPOGRAPHY & HEADER OVERRIDES ──────────────── */ /* Dark Mode Typography & Surfaces */ html[data-theme="dark"], html[data-theme="dark"] body { background-color: #080d18 !important; color: #f8fafc !important; } html[data-theme="dark"] header { background-color: rgba(8, 13, 24, 0.92) !important; border-bottom: 1px solid #263550 !important; } html[data-theme="dark"] .nav-item { color: #cbd5e1 !important; } html[data-theme="dark"] .nav-item:hover { color: #38bdf8 !important; } html[data-theme="dark"] .nav-item.active { color: #38bdf8 !important; } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] .text-on-surface { color: #f8fafc !important; } html[data-theme="dark"] p, html[data-theme="dark"] .text-on-surface-variant, html[data-theme="dark"] .font-body-lg, html[data-theme="dark"] .font-body-md, html[data-theme="dark"] .font-body-sm { color: #cbd5e1 !important; } html[data-theme="dark"] .technical-grid { background-color: #080d18 !important; background-image: none !important; } html[data-theme="dark"] #shader-canvas { opacity: 0.55 !important; } html[data-theme="dark"] .bg-surface { background-color: #111827 !important; } html[data-theme="dark"] .bg-surface-container { background-color: #131e33 !important; } html[data-theme="dark"] .bg-surface-container-low { background-color: #0e1627 !important; } html[data-theme="dark"] .bg-surface-container-lowest { background-color: #0a0f1d !important; } html[data-theme="dark"] .bg-surface-container-high { background-color: #182641 !important; } html[data-theme="dark"] .bg-surface-container-highest { background-color: #1f3052 !important; } /* Light Mode Typography & Surfaces */ html[data-theme="light"], html[data-theme="light"] body { background-color: #f8fafc !important; color: #0f172a !important; } html[data-theme="light"] header { background-color: rgba(255, 255, 255, 0.92) !important; border-bottom: 1px solid #e2e8f0 !important; } html[data-theme="light"] .nav-item { color: #475569 !important; } html[data-theme="light"] .nav-item:hover { color: #0284c7 !important; } html[data-theme="light"] .nav-item.active { color: #0284c7 !important; } html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] h4, html[data-theme="light"] .text-on-surface { color: #0f172a !important; } html[data-theme="light"] p, html[data-theme="light"] .text-on-surface-variant, html[data-theme="light"] .font-body-lg, html[data-theme="light"] .font-body-md:not(.bg-on-tertiary-fixed-variant):not([class*="btn"]):not([class*="button"]), html[data-theme="light"] .font-body-sm { color: #475569 !important; } html[data-theme="light"] .technical-grid { background-color: transparent !important; background-image: radial-gradient(#cbd5e1 1.2px, transparent 1.2px) !important; } /* ========================================================================== PRAYOGSETU — UNIFIED PHYSICAL GLASS MATERIAL SYSTEM Cohesive frosted glass for all simulation cards, info boxes, feature panels, pills, and containers across the entire website (Dark & Light modes). ========================================================================== */ /* ── 1. GLOBAL CARD & PANEL GLASS PRIMITIVES (DARK THEME DEFAULT) ────────── */ .cats .card, .card, .physics-card, .elec-card, .de-card, .cnt-card, .param-card, .valve-card, .mux-card, .demux-card, .sr-card, .digi-card, .sub-card, .sim-card, .category-card, .experiment-card, .lab-card, .simulation-card, .module-card, .liquid-glass-card, .liquid-glass-card-pro, .glass-panel, .feat, .vision, .about, .thanks, .dev, .guide, .stat, .mini, .arch, .banner { position: relative !important; isolation: isolate !important; border-radius: 20px !important; /* Luminous translucent graphite glass letting the liquid background shine through */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.03) 40%, rgba(10, 16, 28, 0.38) 100%) !important; -webkit-backdrop-filter: blur(30px) saturate(220%) brightness(1.10) !important; backdrop-filter: blur(30px) saturate(220%) brightness(1.10) !important; /* Specular glass bevel & prismatic borders */ border: 1px solid rgba(255, 255, 255, 0.18) !important; border-top: 1.8px solid rgba(255, 255, 255, 0.60) !important; border-left: 1.2px solid rgba(255, 255, 255, 0.28) !important; border-right: 1px solid rgba(255, 255, 255, 0.16) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important; box-shadow: 0 22px 50px -10px rgba(0, 0, 0, 0.75), 0 0 30px rgba(56, 189, 248, 0.05), inset 0 1.5px 0 rgba(255, 255, 255, 0.50), inset 0 0 26px rgba(255, 255, 255, 0.03), inset 0 -1px 2px rgba(0, 0, 0, 0.5) !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s, box-shadow 0.35s !important; } /* Diagonal glass reflection highlight across all cards */ .cats .card::after, .card::after, .physics-card::after, .elec-card::after, .de-card::after, .cnt-card::after, .param-card::after, .valve-card::after, .mux-card::after, .demux-card::after, .sr-card::after, .digi-card::after, .sub-card::after, .sim-card::after, .category-card::after, .experiment-card::after, .lab-card::after, .simulation-card::after, .module-card::after, .liquid-glass-card::after, .liquid-glass-card-pro::after, .glass-panel::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; border-radius: inherit !important; background: linear-gradient(120deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 28%, transparent 55%, rgba(255, 255, 255, 0.04) 100%) !important; } /* Top specular reflection rim */ .cats .card::before, .card::before, .physics-card::before, .elec-card::before, .de-card::before, .cnt-card::before, .param-card::before, .valve-card::before, .mux-card::before, .demux-card::before, .sr-card::before, .digi-card::before, .sub-card::before, .sim-card::before, .category-card::before, .experiment-card::before, .lab-card::before, .simulation-card::before, .module-card::before, .liquid-glass-card::before, .liquid-glass-card-pro::before, .glass-panel::before { content: "" !important; position: absolute !important; top: 0 !important; left: 6% !important; right: 6% !important; height: 1.5px !important; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4) 15%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.4) 85%, transparent) !important; pointer-events: none !important; z-index: 2 !important; opacity: 0.75 !important; transition: opacity 0.35s ease !important; } .cats .card:hover::before, .card:hover::before, .physics-card:hover::before, .elec-card:hover::before, .de-card:hover::before, .cnt-card:hover::before, .param-card:hover::before, .valve-card:hover::before, .mux-card:hover::before, .demux-card:hover::before, .sr-card:hover::before, .digi-card:hover::before, .sub-card:hover::before, .sim-card:hover::before, .category-card:hover::before, .experiment-card:hover::before, .lab-card:hover::before, .simulation-card:hover::before, .module-card:hover::before, .liquid-glass-card:hover::before, .liquid-glass-card-pro:hover::before, .glass-panel:hover::before { opacity: 1 !important; } /* Hover state - elevated physical liquid glass depth */ .cats .card:hover, .card:hover, .physics-card:hover, .elec-card:hover, .de-card:hover, .cnt-card:hover, .param-card:hover, .valve-card:hover, .mux-card:hover, .demux-card:hover, .sr-card:hover, .digi-card:hover, .sub-card:hover, .sim-card:hover, .category-card:hover, .experiment-card:hover, .lab-card:hover, .simulation-card:hover, .module-card:hover, .liquid-glass-card:hover, .liquid-glass-card-pro:hover { transform: translateY(-6px) scale(1.008) !important; border-color: rgba(255, 255, 255, 0.38) !important; border-top-color: rgba(255, 255, 255, 0.85) !important; box-shadow: 0 28px 60px -12px rgba(0, 0, 0, 0.82), 0 0 32px rgba(56, 189, 248, 0.12), inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 0 24px rgba(255, 255, 255, 0.05) !important; } /* ── 2. CARD IMAGE & MEDIA CONTAINERS ────────────────────────────────────── */ .cats .card .media, .card .media { background: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; position: relative !important; z-index: 2 !important; } .cats .card .art, .card .art { filter: none !important; opacity: 1 !important; object-fit: cover !important; width: 100% !important; height: 100% !important; transition: transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) !important; } .cats .card:hover .art, .card:hover .art { transform: scale(1.05) !important; } .cats .card .media::after, .card .media::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, transparent 45%, rgba(0, 0, 0, 0.10) 100%) !important; } /* ── 3. CARD BODY & CONTENT PANELS (TRUE TRANSLUCENCY) ───────────────────── */ .cats .card .card-body, .card .card-body, .physics-card .card-body, .experiment-card .card-body { position: relative !important; z-index: 2 !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 50%, rgba(255, 255, 255, 0.02) 100%) !important; -webkit-backdrop-filter: inherit !important; backdrop-filter: inherit !important; border-top: 1px solid rgba(255, 255, 255, 0.10) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } .cats .card h3, .card h3 { color: #ffffff !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important; } .cats .card p, .card p { color: #cbd5e1 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important; } .cats .card .card-foot, .card .card-foot { color: #7dd3fc !important; } .cats .card .card-foot svg, .card .card-foot svg { color: #38bdf8 !important; } /* ── 4. PILLS, BADGES, ROLES & ICON CAPSULES (PHYSICAL GLASS MATERIAL) ───── */ .cats .card .ic, .card .ic, .avatar, .guide .cap, .feat .ic { background: rgba(255, 255, 255, 0.08) !important; -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; border-top: 1px solid rgba(255, 255, 255, 0.50) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 14px rgba(0, 0, 0, 0.3) !important; color: #ffffff !important; transition: transform 0.3s ease, background 0.3s, border-color 0.3s !important; } .cats .card:hover .ic, .card:hover .ic { transform: scale(1.06) !important; background: rgba(255, 255, 255, 0.16) !important; border-color: rgba(255, 255, 255, 0.50) !important; } .cats .card .badge, .card .badge, .role, .pill, .chip { font-family: var(--mono) !important; font-size: 0.65rem !important; font-weight: 600 !important; padding: 4px 12px !important; border-radius: 999px !important; color: #f1f5f9 !important; background: rgba(255, 255, 255, 0.08) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; border-top: 1px solid rgba(255, 255, 255, 0.45) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 12px rgba(0, 0, 0, 0.25) !important; } .cats .card .badge.ok, .card .badge.ok { color: #38bdf8 !important; background: rgba(56, 189, 248, 0.12) !important; border-color: rgba(56, 189, 248, 0.35) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 0 12px rgba(56, 189, 248, 0.20) !important; } /* ── 5. LIGHT THEME PHYSICAL GLASS SYSTEM (TRANSLUCENT WHITE / FROSTED) ───── */ [data-theme="light"] .cats .card, html:not(.dark):not([data-theme="dark"]) .cats .card, [data-theme="light"] .card, html:not(.dark):not([data-theme="dark"]) .card, [data-theme="light"] .physics-card, html:not(.dark):not([data-theme="dark"]) .physics-card, [data-theme="light"] .elec-card, html:not(.dark):not([data-theme="dark"]) .elec-card, [data-theme="light"] .de-card, html:not(.dark):not([data-theme="dark"]) .de-card, [data-theme="light"] .cnt-card, html:not(.dark):not([data-theme="dark"]) .cnt-card, [data-theme="light"] .param-card, html:not(.dark):not([data-theme="dark"]) .param-card, [data-theme="light"] .valve-card, html:not(.dark):not([data-theme="dark"]) .valve-card, [data-theme="light"] .mux-card, html:not(.dark):not([data-theme="dark"]) .mux-card, [data-theme="light"] .demux-card, html:not(.dark):not([data-theme="dark"]) .demux-card, [data-theme="light"] .sr-card, html:not(.dark):not([data-theme="dark"]) .sr-card, [data-theme="light"] .digi-card, html:not(.dark):not([data-theme="dark"]) .digi-card, [data-theme="light"] .sub-card, html:not(.dark):not([data-theme="dark"]) .sub-card, [data-theme="light"] .sim-card, html:not(.dark):not([data-theme="dark"]) .sim-card, [data-theme="light"] .category-card, html:not(.dark):not([data-theme="dark"]) .category-card, [data-theme="light"] .experiment-card, html:not(.dark):not([data-theme="dark"]) .experiment-card, [data-theme="light"] .lab-card, html:not(.dark):not([data-theme="dark"]) .lab-card, [data-theme="light"] .simulation-card, html:not(.dark):not([data-theme="dark"]) .simulation-card, [data-theme="light"] .module-card, html:not(.dark):not([data-theme="dark"]) .module-card, [data-theme="light"] .liquid-glass-card, html:not(.dark):not([data-theme="dark"]) .liquid-glass-card, [data-theme="light"] .liquid-glass-card-pro, html:not(.dark):not([data-theme="dark"]) .liquid-glass-card-pro, [data-theme="light"] .glass-panel, html:not(.dark):not([data-theme="dark"]) .glass-panel, [data-theme="light"] .feat, html:not(.dark):not([data-theme="dark"]) .feat, [data-theme="light"] .vision, html:not(.dark):not([data-theme="dark"]) .vision, [data-theme="light"] .about, html:not(.dark):not([data-theme="dark"]) .about, [data-theme="light"] .thanks, html:not(.dark):not([data-theme="dark"]) .thanks, [data-theme="light"] .dev, html:not(.dark):not([data-theme="dark"]) .dev, [data-theme="light"] .guide, html:not(.dark):not([data-theme="dark"]) .guide, [data-theme="light"] .stat, html:not(.dark):not([data-theme="dark"]) .stat, [data-theme="light"] .mini, html:not(.dark):not([data-theme="dark"]) .mini, [data-theme="light"] .arch, html:not(.dark):not([data-theme="dark"]) .arch, [data-theme="light"] .banner, html:not(.dark):not([data-theme="dark"]) .banner { border-radius: 26px !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.35) 48%, rgba(255, 255, 255, 0.50) 100%) !important; background-color: rgba(255, 255, 255, 0.38) !important; -webkit-backdrop-filter: blur(34px) saturate(180%) contrast(105%) !important; backdrop-filter: blur(34px) saturate(180%) contrast(105%) !important; border: 1px solid rgba(255, 255, 255, 0.75) !important; border-top: 1.5px solid rgba(255, 255, 255, 0.95) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.45) !important; box-shadow: 0 20px 48px -12px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(0, 0, 0, 0.03), inset 0 1.5px 0.5px rgba(255, 255, 255, 0.92), inset 0 -1px 1px rgba(0, 0, 0, 0.04) !important; } [data-theme="light"] .cats .card:hover, html:not(.dark):not([data-theme="dark"]) .cats .card:hover, [data-theme="light"] .card:hover, html:not(.dark):not([data-theme="dark"]) .card:hover, [data-theme="light"] .physics-card:hover, html:not(.dark):not([data-theme="dark"]) .physics-card:hover, [data-theme="light"] .elec-card:hover, html:not(.dark):not([data-theme="dark"]) .elec-card:hover, [data-theme="light"] .de-card:hover, html:not(.dark):not([data-theme="dark"]) .de-card:hover, [data-theme="light"] .cnt-card:hover, html:not(.dark):not([data-theme="dark"]) .cnt-card:hover, [data-theme="light"] .param-card:hover, html:not(.dark):not([data-theme="dark"]) .param-card:hover, [data-theme="light"] .valve-card:hover, html:not(.dark):not([data-theme="dark"]) .valve-card:hover, [data-theme="light"] .mux-card:hover, html:not(.dark):not([data-theme="dark"]) .mux-card:hover, [data-theme="light"] .demux-card:hover, html:not(.dark):not([data-theme="dark"]) .demux-card:hover, [data-theme="light"] .sr-card:hover, html:not(.dark):not([data-theme="dark"]) .sr-card:hover, [data-theme="light"] .digi-card:hover, html:not(.dark):not([data-theme="dark"]) .digi-card:hover, [data-theme="light"] .sub-card:hover, html:not(.dark):not([data-theme="dark"]) .sub-card:hover, [data-theme="light"] .sim-card:hover, html:not(.dark):not([data-theme="dark"]) .sim-card:hover, [data-theme="light"] .category-card:hover, html:not(.dark):not([data-theme="dark"]) .category-card:hover, [data-theme="light"] .experiment-card:hover, html:not(.dark):not([data-theme="dark"]) .experiment-card:hover, [data-theme="light"] .lab-card:hover, html:not(.dark):not([data-theme="dark"]) .lab-card:hover, [data-theme="light"] .simulation-card:hover, html:not(.dark):not([data-theme="dark"]) .simulation-card:hover, [data-theme="light"] .module-card:hover, html:not(.dark):not([data-theme="dark"]) .module-card:hover, [data-theme="light"] .liquid-glass-card:hover, html:not(.dark):not([data-theme="dark"]) .liquid-glass-card:hover, [data-theme="light"] .liquid-glass-card-pro:hover, html:not(.dark):not([data-theme="dark"]) .liquid-glass-card-pro:hover { transform: translateY(-5px) !important; border-top-color: #ffffff !important; border-color: rgba(56, 189, 248, 0.5) !important; box-shadow: 0 28px 64px -14px rgba(2, 132, 199, 0.16), 0 2px 6px rgba(0, 0, 0, 0.04), inset 0 1.5px 1px rgba(255, 255, 255, 1) !important; } [data-theme="light"] .cats .card::after, html:not(.dark):not([data-theme="dark"]) .cats .card::after, [data-theme="light"] .card::after, html:not(.dark):not([data-theme="dark"]) .card::after, [data-theme="light"] .physics-card::after, html:not(.dark):not([data-theme="dark"]) .physics-card::after, [data-theme="light"] .elec-card::after, html:not(.dark):not([data-theme="dark"]) .elec-card::after, [data-theme="light"] .de-card::after, html:not(.dark):not([data-theme="dark"]) .de-card::after, [data-theme="light"] .cnt-card::after, html:not(.dark):not([data-theme="dark"]) .cnt-card::after, [data-theme="light"] .param-card::after, html:not(.dark):not([data-theme="dark"]) .param-card::after, [data-theme="light"] .valve-card::after, html:not(.dark):not([data-theme="dark"]) .valve-card::after, [data-theme="light"] .mux-card::after, html:not(.dark):not([data-theme="dark"]) .mux-card::after, [data-theme="light"] .demux-card::after, html:not(.dark):not([data-theme="dark"]) .demux-card::after, [data-theme="light"] .sr-card::after, html:not(.dark):not([data-theme="dark"]) .sr-card::after, [data-theme="light"] .digi-card::after, html:not(.dark):not([data-theme="dark"]) .digi-card::after, [data-theme="light"] .sub-card::after, html:not(.dark):not([data-theme="dark"]) .sub-card::after, [data-theme="light"] .sim-card::after, html:not(.dark):not([data-theme="dark"]) .sim-card::after, [data-theme="light"] .category-card::after, html:not(.dark):not([data-theme="dark"]) .category-card::after, [data-theme="light"] .experiment-card::after, html:not(.dark):not([data-theme="dark"]) .experiment-card::after, [data-theme="light"] .lab-card::after, html:not(.dark):not([data-theme="dark"]) .lab-card::after, [data-theme="light"] .simulation-card::after, html:not(.dark):not([data-theme="dark"]) .simulation-card::after, [data-theme="light"] .module-card::after, html:not(.dark):not([data-theme="dark"]) .module-card::after, [data-theme="light"] .liquid-glass-card::after, html:not(.dark):not([data-theme="dark"]) .liquid-glass-card::after, [data-theme="light"] .liquid-glass-card-pro::after, html:not(.dark):not([data-theme="dark"]) .liquid-glass-card-pro::after, [data-theme="light"] .glass-panel::after, html:not(.dark):not([data-theme="dark"]) .glass-panel::after { background: linear-gradient(120deg, rgba(255, 255, 255, 0.45) 0%, transparent 35%, transparent 70%, rgba(255, 255, 255, 0.15) 100%) !important; } [data-theme="light"] .cats .card::before, html:not(.dark):not([data-theme="dark"]) .cats .card::before, [data-theme="light"] .card::before, html:not(.dark):not([data-theme="dark"]) .card::before, [data-theme="light"] .physics-card::before, html:not(.dark):not([data-theme="dark"]) .physics-card::before, [data-theme="light"] .elec-card::before, html:not(.dark):not([data-theme="dark"]) .elec-card::before, [data-theme="light"] .de-card::before, html:not(.dark):not([data-theme="dark"]) .de-card::before, [data-theme="light"] .cnt-card::before, html:not(.dark):not([data-theme="dark"]) .cnt-card::before, [data-theme="light"] .param-card::before, html:not(.dark):not([data-theme="dark"]) .param-card::before, [data-theme="light"] .valve-card::before, html:not(.dark):not([data-theme="dark"]) .valve-card::before, [data-theme="light"] .mux-card::before, html:not(.dark):not([data-theme="dark"]) .mux-card::before, [data-theme="light"] .demux-card::before, html:not(.dark):not([data-theme="dark"]) .demux-card::before, [data-theme="light"] .sr-card::before, html:not(.dark):not([data-theme="dark"]) .sr-card::before, [data-theme="light"] .digi-card::before, html:not(.dark):not([data-theme="dark"]) .digi-card::before, [data-theme="light"] .sub-card::before, html:not(.dark):not([data-theme="dark"]) .sub-card::before, [data-theme="light"] .sim-card::before, html:not(.dark):not([data-theme="dark"]) .sim-card::before, [data-theme="light"] .category-card::before, html:not(.dark):not([data-theme="dark"]) .category-card::before, [data-theme="light"] .experiment-card::before, html:not(.dark):not([data-theme="dark"]) .experiment-card::before, [data-theme="light"] .lab-card::before, html:not(.dark):not([data-theme="dark"]) .lab-card::before, [data-theme="light"] .simulation-card::before, html:not(.dark):not([data-theme="dark"]) .simulation-card::before, [data-theme="light"] .module-card::before, html:not(.dark):not([data-theme="dark"]) .module-card::before, [data-theme="light"] .liquid-glass-card::before, html:not(.dark):not([data-theme="dark"]) .liquid-glass-card::before, [data-theme="light"] .liquid-glass-card-pro::before, html:not(.dark):not([data-theme="dark"]) .liquid-glass-card-pro::before, [data-theme="light"] .glass-panel::before, html:not(.dark):not([data-theme="dark"]) .glass-panel::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6) 15%, #ffffff 50%, rgba(255, 255, 255, 0.6) 85%, transparent) !important; } [data-theme="light"] .cats .card .media, html:not(.dark):not([data-theme="dark"]) .cats .card .media, [data-theme="light"] .card .media, html:not(.dark):not([data-theme="dark"]) .card .media { background: rgba(226, 232, 240, 0.35) !important; } [data-theme="light"] .cats .card .media::after, html:not(.dark):not([data-theme="dark"]) .cats .card .media::after, [data-theme="light"] .card .media::after, html:not(.dark):not([data-theme="dark"]) .card .media::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, transparent 45%, rgba(0, 0, 0, 0.04) 100%) !important; } [data-theme="light"] .cats .card .ic, html:not(.dark):not([data-theme="dark"]) .cats .card .ic, [data-theme="light"] .card .ic, html:not(.dark):not([data-theme="dark"]) .card .ic, [data-theme="light"] .avatar, html:not(.dark):not([data-theme="dark"]) .avatar, [data-theme="light"] .feat .ic, html:not(.dark):not([data-theme="dark"]) .feat .ic { background: rgba(255, 255, 255, 0.75) !important; border: 1px solid rgba(255, 255, 255, 0.95) !important; box-shadow: inset 0 1px 0 #ffffff, 0 4px 14px rgba(15, 23, 42, 0.08) !important; color: #0f172a !important; } [data-theme="light"] .cats .card .badge, html:not(.dark):not([data-theme="dark"]) .cats .card .badge, [data-theme="light"] .card .badge, html:not(.dark):not([data-theme="dark"]) .card .badge, [data-theme="light"] .role, html:not(.dark):not([data-theme="dark"]) .role, [data-theme="light"] .pill, html:not(.dark):not([data-theme="dark"]) .pill { color: #0f172a !important; background: rgba(255, 255, 255, 0.75) !important; border: 1px solid rgba(255, 255, 255, 0.95) !important; box-shadow: inset 0 1px 0 #ffffff, 0 4px 12px rgba(15, 23, 42, 0.06) !important; } [data-theme="light"] .cats .card .badge.ok, html:not(.dark):not([data-theme="dark"]) .cats .card .badge.ok, [data-theme="light"] .card .badge.ok, html:not(.dark):not([data-theme="dark"]) .card .badge.ok { color: #0284c7 !important; background: rgba(224, 242, 254, 0.75) !important; border-color: rgba(14, 165, 233, 0.40) !important; box-shadow: inset 0 1px 0 #ffffff, 0 2px 8px rgba(14, 165, 233, 0.15) !important; } [data-theme="light"] .cats .card .card-body, html:not(.dark):not([data-theme="dark"]) .cats .card .card-body, [data-theme="light"] .card .card-body, html:not(.dark):not([data-theme="dark"]) .card .card-body { background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.35) 100%) !important; border-top: 1px solid rgba(255, 255, 255, 0.85) !important; box-shadow: inset 0 1px 0 #ffffff !important; } [data-theme="light"] .cats .card h3, html:not(.dark):not([data-theme="dark"]) .cats .card h3, [data-theme="light"] .card h3, html:not(.dark):not([data-theme="dark"]) .card h3 { color: #0f172a !important; text-shadow: none !important; } [data-theme="light"] .cats .card p, html:not(.dark):not([data-theme="dark"]) .cats .card p, [data-theme="light"] .card p, html:not(.dark):not([data-theme="dark"]) .card p { color: #475569 !important; text-shadow: none !important; } [data-theme="light"] .cats .card .card-foot, html:not(.dark):not([data-theme="dark"]) .cats .card .card-foot, [data-theme="light"] .card .card-foot, html:not(.dark):not([data-theme="dark"]) .card .card-foot { color: #0284c7 !important; text-shadow: none !important; } [data-theme="light"] .cats .card .card-foot svg, html:not(.dark):not([data-theme="dark"]) .cats .card .card-foot svg, [data-theme="light"] .card .card-foot svg, html:not(.dark):not([data-theme="dark"]) .card .card-foot svg { color: #0284c7 !important; } /* ============================================================ GLOBAL UNIFIED LIQUID BACKGROUND SYSTEM ============================================================ */ .liquid-bg { position: fixed !important; inset: 0 !important; z-index: 0 !important; overflow: hidden !important; pointer-events: none !important; background: url('./liquid-bg.png') center/cover no-repeat fixed !important; background-color: #07090d !important; } [data-theme="light"] .liquid-bg, html:not(.dark):not([data-theme="dark"]) .liquid-bg { background-image: url('./liquid-bg.png') !important; filter: invert(.88) hue-rotate(180deg) brightness(1.1) contrast(.95) !important; } /* ============================================================ SIMULATION BUTTONS & ACTION PILLS (LIQUID GLASS PRO) - White Mode: Translucent Frosted Glass Pills (matching liquid glass pro) - Dark Mode: Pure White button with deep Black text/icon ============================================================ */ .physics-card .bg-on-tertiary-fixed-variant, .cnt-card .bg-on-tertiary-fixed-variant, .de-card .bg-on-tertiary-fixed-variant, .elec-card .bg-on-tertiary-fixed-variant, .elec-card .liquid-btn-primary, .valve-card .bg-on-tertiary-fixed-variant, .param-card a[href*="simulations"], .mux-card .bg-on-tertiary-fixed-variant, .demux-card .bg-on-tertiary-fixed-variant, .sr-card .bg-on-tertiary-fixed-variant, .sim-card .bg-on-tertiary-fixed-variant, .experiment-card .bg-on-tertiary-fixed-variant, [class*="-card"] .bg-on-tertiary-fixed-variant, [class*="-card"] .liquid-btn-primary, .open-sim-btn { background: rgba(255, 255, 255, 0.45) !important; color: #1e293b !important; border: 1px solid rgba(255, 255, 255, 0.65) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), inset 0 1px 0.5px rgba(255, 255, 255, 0.8) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border-radius: 12px !important; font-weight: 600 !important; letter-spacing: 0.01em; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; } .physics-card:hover .bg-on-tertiary-fixed-variant, .cnt-card:hover .bg-on-tertiary-fixed-variant, .de-card:hover .bg-on-tertiary-fixed-variant, .elec-card:hover .bg-on-tertiary-fixed-variant, .elec-card:hover .liquid-btn-primary, .valve-card:hover .bg-on-tertiary-fixed-variant, .param-card:hover a[href*="simulations"], .mux-card:hover .bg-on-tertiary-fixed-variant, .demux-card:hover .bg-on-tertiary-fixed-variant, .sr-card:hover .bg-on-tertiary-fixed-variant, .sim-card:hover .bg-on-tertiary-fixed-variant, .experiment-card:hover .bg-on-tertiary-fixed-variant, [class*="-card"]:hover .bg-on-tertiary-fixed-variant, [class*="-card"]:hover .liquid-btn-primary, .open-sim-btn:hover { background: rgba(255, 255, 255, 0.75) !important; border-color: rgba(2, 132, 199, 0.35) !important; color: #0284c7 !important; box-shadow: 0 4px 12px rgba(2, 132, 199, 0.08), inset 0 1px 0.5px rgba(255, 255, 255, 0.9) !important; transform: translateY(-1.5px) !important; } /* White mode text and icons inside buttons: dark slate, cyan on hover */ .physics-card .bg-on-tertiary-fixed-variant *, .cnt-card .bg-on-tertiary-fixed-variant *, .de-card .bg-on-tertiary-fixed-variant *, .elec-card .bg-on-tertiary-fixed-variant *, .elec-card .liquid-btn-primary *, .valve-card .bg-on-tertiary-fixed-variant *, .param-card a[href*="simulations"] *, .mux-card .bg-on-tertiary-fixed-variant *, .demux-card .bg-on-tertiary-fixed-variant *, .sr-card .bg-on-tertiary-fixed-variant *, .sim-card .bg-on-tertiary-fixed-variant *, .experiment-card .bg-on-tertiary-fixed-variant *, [class*="-card"] .bg-on-tertiary-fixed-variant *, [class*="-card"] .liquid-btn-primary *, .open-sim-btn * { color: #1e293b !important; } .physics-card:hover .bg-on-tertiary-fixed-variant *, .cnt-card:hover .bg-on-tertiary-fixed-variant *, .de-card:hover .bg-on-tertiary-fixed-variant *, .elec-card:hover .bg-on-tertiary-fixed-variant *, .elec-card:hover .liquid-btn-primary *, .valve-card:hover .bg-on-tertiary-fixed-variant *, .param-card:hover a[href*="simulations"] *, .mux-card:hover .bg-on-tertiary-fixed-variant *, .demux-card:hover .bg-on-tertiary-fixed-variant *, .sr-card:hover .bg-on-tertiary-fixed-variant *, .sim-card:hover .bg-on-tertiary-fixed-variant *, .experiment-card:hover .bg-on-tertiary-fixed-variant *, [class*="-card"]:hover .bg-on-tertiary-fixed-variant *, [class*="-card"]:hover .liquid-btn-primary *, .open-sim-btn:hover * { color: #0284c7 !important; } /* Dark Mode: Pure White Button with deep Black text & icons */ html[data-theme="dark"] .physics-card .bg-on-tertiary-fixed-variant, html[data-theme="dark"] .cnt-card .bg-on-tertiary-fixed-variant, html[data-theme="dark"] .de-card .bg-on-tertiary-fixed-variant, html[data-theme="dark"] .elec-card .bg-on-tertiary-fixed-variant, html[data-theme="dark"] .elec-card .liquid-btn-primary, html[data-theme="dark"] .valve-card .bg-on-tertiary-fixed-variant, html[data-theme="dark"] .param-card a[href*="simulations"], html[data-theme="dark"] .mux-card .bg-on-tertiary-fixed-variant, html[data-theme="dark"] .demux-card .bg-on-tertiary-fixed-variant, html[data-theme="dark"] .sr-card .bg-on-tertiary-fixed-variant, html[data-theme="dark"] .sim-card .bg-on-tertiary-fixed-variant, html[data-theme="dark"] .experiment-card .bg-on-tertiary-fixed-variant, html[data-theme="dark"] [class*="-card"] .bg-on-tertiary-fixed-variant, html[data-theme="dark"] [class*="-card"] .liquid-btn-primary, html[data-theme="dark"] .open-sim-btn, html.dark .physics-card .bg-on-tertiary-fixed-variant, html.dark .cnt-card .bg-on-tertiary-fixed-variant, html.dark .de-card .bg-on-tertiary-fixed-variant, html.dark .elec-card .bg-on-tertiary-fixed-variant, html.dark .elec-card .liquid-btn-primary, html.dark .valve-card .bg-on-tertiary-fixed-variant, html.dark .param-card a[href*="simulations"], html.dark .mux-card .bg-on-tertiary-fixed-variant, html.dark .demux-card .bg-on-tertiary-fixed-variant, html.dark .sr-card .bg-on-tertiary-fixed-variant, html.dark .sim-card .bg-on-tertiary-fixed-variant, html.dark .experiment-card .bg-on-tertiary-fixed-variant, html.dark [class*="-card"] .bg-on-tertiary-fixed-variant, html.dark [class*="-card"] .liquid-btn-primary, html.dark .open-sim-btn { background: #ffffff !important; color: #000000 !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; box-shadow: 0 4px 16px rgba(255, 255, 255, 0.25) !important; } html[data-theme="dark"] .physics-card:hover .bg-on-tertiary-fixed-variant, html[data-theme="dark"] .cnt-card:hover .bg-on-tertiary-fixed-variant, html[data-theme="dark"] .de-card:hover .bg-on-tertiary-fixed-variant, html[data-theme="dark"] .elec-card:hover .bg-on-tertiary-fixed-variant, html[data-theme="dark"] .elec-card:hover .liquid-btn-primary, html[data-theme="dark"] .valve-card:hover .bg-on-tertiary-fixed-variant, html[data-theme="dark"] .param-card:hover a[href*="simulations"], html[data-theme="dark"] .mux-card:hover .bg-on-tertiary-fixed-variant, html[data-theme="dark"] .demux-card:hover .bg-on-tertiary-fixed-variant, html[data-theme="dark"] .sr-card:hover .bg-on-tertiary-fixed-variant, html[data-theme="dark"] .sim-card:hover .bg-on-tertiary-fixed-variant, html[data-theme="dark"] .experiment-card:hover .bg-on-tertiary-fixed-variant, html[data-theme="dark"] [class*="-card"]:hover .bg-on-tertiary-fixed-variant, html[data-theme="dark"] [class*="-card"]:hover .liquid-btn-primary, html[data-theme="dark"] .open-sim-btn:hover, html.dark .physics-card:hover .bg-on-tertiary-fixed-variant, html.dark .cnt-card:hover .bg-on-tertiary-fixed-variant, html.dark .de-card:hover .bg-on-tertiary-fixed-variant, html.dark .elec-card:hover .bg-on-tertiary-fixed-variant, html.dark .elec-card:hover .liquid-btn-primary, html.dark .valve-card:hover .bg-on-tertiary-fixed-variant, html.dark .param-card:hover a[href*="simulations"], html.dark .mux-card:hover .bg-on-tertiary-fixed-variant, html.dark .demux-card:hover .bg-on-tertiary-fixed-variant, html.dark .sr-card:hover .bg-on-tertiary-fixed-variant, html.dark .sim-card:hover .bg-on-tertiary-fixed-variant, html.dark .experiment-card:hover .bg-on-tertiary-fixed-variant, html.dark [class*="-card"]:hover .bg-on-tertiary-fixed-variant, html.dark [class*="-card"]:hover .liquid-btn-primary, html.dark .open-sim-btn:hover { background: #f1f5f9 !important; color: #000000 !important; box-shadow: 0 6px 22px rgba(255, 255, 255, 0.4) !important; } html[data-theme="dark"] .physics-card .bg-on-tertiary-fixed-variant *, html[data-theme="dark"] .cnt-card .bg-on-tertiary-fixed-variant *, html[data-theme="dark"] .de-card .bg-on-tertiary-fixed-variant *, html[data-theme="dark"] .elec-card .bg-on-tertiary-fixed-variant *, html[data-theme="dark"] .elec-card .liquid-btn-primary *, html[data-theme="dark"] .valve-card .bg-on-tertiary-fixed-variant *, html[data-theme="dark"] .param-card a[href*="simulations"] *, html[data-theme="dark"] .mux-card .bg-on-tertiary-fixed-variant *, html[data-theme="dark"] .demux-card .bg-on-tertiary-fixed-variant *, html[data-theme="dark"] .sr-card .bg-on-tertiary-fixed-variant *, html[data-theme="dark"] .sim-card .bg-on-tertiary-fixed-variant *, html[data-theme="dark"] .experiment-card .bg-on-tertiary-fixed-variant *, html[data-theme="dark"] [class*="-card"] .bg-on-tertiary-fixed-variant *, html[data-theme="dark"] [class*="-card"] .liquid-btn-primary *, html[data-theme="dark"] .open-sim-btn *, html.dark .physics-card .bg-on-tertiary-fixed-variant *, html.dark .cnt-card .bg-on-tertiary-fixed-variant *, html.dark .de-card .bg-on-tertiary-fixed-variant *, html.dark .elec-card .bg-on-tertiary-fixed-variant *, html.dark .elec-card .liquid-btn-primary *, html.dark .valve-card .bg-on-tertiary-fixed-variant *, html.dark .param-card a[href*="simulations"] *, html.dark .mux-card .bg-on-tertiary-fixed-variant *, html.dark .demux-card .bg-on-tertiary-fixed-variant *, html.dark .sr-card .bg-on-tertiary-fixed-variant *, html.dark .sim-card .bg-on-tertiary-fixed-variant *, html.dark .experiment-card .bg-on-tertiary-fixed-variant *, html.dark [class*="-card"] .bg-on-tertiary-fixed-variant *, html.dark [class*="-card"] .liquid-btn-primary *, html.dark .open-sim-btn * { color: #000000 !important; } /* ============================================================ ENHANCED LIQUID GLASS INNER COMPONENTS & PILLS ============================================================ */ /* Card icon containers across all sections */ .card-icon-wrap, .technical-icon-box { border-radius: 14px !important; background: rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-top: 1px solid rgba(255, 255, 255, 0.42) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 12px rgba(0, 0, 0, 0.25) !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; } [data-theme="light"] .card-icon-wrap, html:not(.dark):not([data-theme="dark"]) .card-icon-wrap, [data-theme="light"] .technical-icon-box, html:not(.dark):not([data-theme="dark"]) .technical-icon-box { width: 44px !important; height: 44px !important; border-radius: 12px !important; background: rgba(2, 132, 199, 0.06) !important; border: 1px solid rgba(2, 132, 199, 0.22) !important; color: #0284c7 !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6) !important; } [data-theme="light"] [class*="-card"]:hover .card-icon-wrap, html:not(.dark):not([data-theme="dark"]) [class*="-card"]:hover .card-icon-wrap, [data-theme="light"] .card:hover .card-icon-wrap, html:not(.dark):not([data-theme="dark"]) .card:hover .card-icon-wrap, [data-theme="light"] [class*="-card"]:hover .technical-icon-box, html:not(.dark):not([data-theme="dark"]) [class*="-card"]:hover .technical-icon-box { transform: scale(1.06) rotate(2deg) !important; background: rgba(56, 189, 248, 0.12) !important; } /* "Available" badge on simulation cards */ .physics-card span[class*="text-emerald"], .de-card span[class*="text-emerald"], .cnt-card span[class*="text-emerald"], .mux-card span[class*="text-emerald"], .demux-card span[class*="text-emerald"], .sr-card span[class*="text-emerald"], .elec-card .sim-card-badge, .param-card .sim-card-badge, .sim-card-badge { border-radius: 9999px !important; padding: 3px 10px !important; background: rgba(16, 185, 129, 0.15) !important; border: 1px solid rgba(16, 185, 129, 0.40) !important; border-top: 1px solid rgba(16, 185, 129, 0.65) !important; color: #34d399 !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; box-shadow: 0 0 12px rgba(16, 185, 129, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.20) !important; font-weight: 700 !important; letter-spacing: 0.05em !important; } [data-theme="light"] .physics-card span[class*="text-emerald"], html:not(.dark):not([data-theme="dark"]) .physics-card span[class*="text-emerald"], [data-theme="light"] .de-card span[class*="text-emerald"], html:not(.dark):not([data-theme="dark"]) .de-card span[class*="text-emerald"], [data-theme="light"] .cnt-card span[class*="text-emerald"], html:not(.dark):not([data-theme="dark"]) .cnt-card span[class*="text-emerald"], [data-theme="light"] .mux-card span[class*="text-emerald"], html:not(.dark):not([data-theme="dark"]) .mux-card span[class*="text-emerald"], [data-theme="light"] .demux-card span[class*="text-emerald"], html:not(.dark):not([data-theme="dark"]) .demux-card span[class*="text-emerald"], [data-theme="light"] .sr-card span[class*="text-emerald"], html:not(.dark):not([data-theme="dark"]) .sr-card span[class*="text-emerald"], [data-theme="light"] .elec-card .sim-card-badge, html:not(.dark):not([data-theme="dark"]) .elec-card .sim-card-badge, [data-theme="light"] .param-card .sim-card-badge, html:not(.dark):not([data-theme="dark"]) .param-card .sim-card-badge, [data-theme="light"] .sim-card-badge, html:not(.dark):not([data-theme="dark"]) .sim-card-badge, [data-theme="light"] .experiment-count-badge, html:not(.dark):not([data-theme="dark"]) .experiment-count-badge, [data-theme="light"] .font-data-label, html:not(.dark):not([data-theme="dark"]) .font-data-label { font-family: 'JetBrains Mono', monospace !important; font-size: 10.5px !important; font-weight: 600 !important; padding: 4px 11px !important; border-radius: 9999px !important; background: rgba(16, 185, 129, 0.07) !important; border: 1px solid rgba(16, 185, 129, 0.25) !important; color: #059669 !important; box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.6) !important; letter-spacing: -0.01em !important; } [data-theme="light"] [class*="-card"] h3, html:not(.dark):not([data-theme="dark"]) [class*="-card"] h3, [data-theme="light"] [class*="-card"] h2, html:not(.dark):not([data-theme="dark"]) [class*="-card"] h2, [data-theme="light"] .card-category-title, html:not(.dark):not([data-theme="dark"]) .card-category-title { color: #0f172a !important; font-weight: 700 !important; letter-spacing: -0.02em !important; } [data-theme="light"] [class*="-card"] p, html:not(.dark):not([data-theme="dark"]) [class*="-card"] p, [data-theme="light"] .card-category-desc, html:not(.dark):not([data-theme="dark"]) .card-category-desc { color: #64748b !important; } /* Category Quick-Links / Navigation Pills */ .subpage-hero-banner .liquid-btn-secondary, .category-pill, .filter-chip { background: rgba(255, 255, 255, 0.06) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-top: 1.2px solid rgba(255, 255, 255, 0.38) !important; border-radius: 9999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 4px 12px rgba(0, 0, 0, 0.25) !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; } .subpage-hero-banner .liquid-btn-secondary:hover, .category-pill:hover, .filter-chip:hover { background: rgba(255, 255, 255, 0.14) !important; border-color: rgba(255, 255, 255, 0.45) !important; border-top-color: rgba(255, 255, 255, 0.75) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.40) !important; } [data-theme="light"] .subpage-hero-banner .liquid-btn-secondary, html:not(.dark):not([data-theme="dark"]) .subpage-hero-banner .liquid-btn-secondary, [data-theme="light"] .category-pill, html:not(.dark):not([data-theme="dark"]) .category-pill, [data-theme="light"] .filter-chip, html:not(.dark):not([data-theme="dark"]) .filter-chip { background: rgba(255, 255, 255, 0.65) !important; border: 1px solid rgba(255, 255, 255, 0.85) !important; border-top: 1.5px solid #ffffff !important; color: #0f172a !important; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05), inset 0 1px 0 #ffffff !important; } /* Also ensure open simulation button has clean rounded corners */ .physics-card .bg-on-tertiary-fixed-variant, .cnt-card .bg-on-tertiary-fixed-variant, .de-card .bg-on-tertiary-fixed-variant, .elec-card .bg-on-tertiary-fixed-variant, .elec-card .liquid-btn-primary, .valve-card .bg-on-tertiary-fixed-variant, .param-card a[href*="simulations"], .mux-card .bg-on-tertiary-fixed-variant, .demux-card .bg-on-tertiary-fixed-variant, .sr-card .bg-on-tertiary-fixed-variant, .sim-card .bg-on-tertiary-fixed-variant, .experiment-card .bg-on-tertiary-fixed-variant, [class*="-card"] .bg-on-tertiary-fixed-variant, [class*="-card"] .liquid-btn-primary, .open-sim-btn { border-radius: 12px !important; } /* ============================================================ ADVANCED LIQUID GLASS SECTIONS, HERO BANNERS & HEADERS ============================================================ */ /* Subpage Hero Banners */ .subpage-hero-banner { position: relative !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0.35) 100%) !important; backdrop-filter: blur(30px) saturate(210%) brightness(1.05) !important; -webkit-backdrop-filter: blur(30px) saturate(210%) brightness(1.05) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important; } .subpage-hero-banner::after { content: ""; position: absolute; bottom: 0; left: 6%; right: 6%; height: 1.5px; background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.4) 20%, rgba(255, 255, 255, 0.95) 50%, rgba(56, 189, 248, 0.4) 80%, transparent); pointer-events: none; } [data-theme="light"] .subpage-hero-banner, html:not(.dark):not([data-theme="dark"]) .subpage-hero-banner { background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.60) 100%) !important; backdrop-filter: blur(26px) saturate(170%) !important; -webkit-backdrop-filter: blur(26px) saturate(170%) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.9) !important; box-shadow: 0 16px 40px -10px rgba(15, 23, 42, 0.08), inset 0 1.5px 0 #ffffff !important; } /* Subpage section divider lines with glass prismatic reflection */ section.border-b { position: relative !important; border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important; } section.border-b::after { content: ""; position: absolute; bottom: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.35) 25%, rgba(255, 255, 255, 0.85) 50%, rgba(56, 189, 248, 0.35) 75%, transparent); pointer-events: none; } [data-theme="light"] section.border-b, html:not(.dark):not([data-theme="dark"]) section.border-b { border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important; } [data-theme="light"] section.border-b::after, html:not(.dark):not([data-theme="dark"]) section.border-b::after { background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.3) 25%, rgba(255, 255, 255, 0.95) 50%, rgba(14, 165, 233, 0.3) 75%, transparent); } /* Subpage Section Header Glass Badges & Icon Highlights */ section .mb-8.space-y-2 { position: relative; padding: 16px 20px; border-radius: 18px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.10); border-top: 1.2px solid rgba(255, 255, 255, 0.28); box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18); transition: all 0.3s ease; } section .mb-8.space-y-2:hover { border-color: rgba(255, 255, 255, 0.20); border-top-color: rgba(255, 255, 255, 0.45); box-shadow: 0 14px 34px -8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25); } [data-theme="light"] section .mb-8.space-y-2, html:not(.dark):not([data-theme="dark"]) section .mb-8.space-y-2 { background: linear-gradient(135deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.45) 100%); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.90); border-top: 1.5px solid #ffffff; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05), inset 0 1px 0 #ffffff; } section .mb-8 .flex.items-center span.material-symbols-outlined { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(56, 189, 248, 0.12) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(56, 189, 248, 0.35) !important; border-top: 1px solid rgba(255, 255, 255, 0.6) !important; color: #38bdf8 !important; box-shadow: 0 0 16px rgba(56, 189, 248, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; } [data-theme="light"] section .mb-8 .flex.items-center span.material-symbols-outlined, html:not(.dark):not([data-theme="dark"]) section .mb-8 .flex.items-center span.material-symbols-outlined { background: rgba(2, 132, 199, 0.10) !important; border: 1px solid rgba(2, 132, 199, 0.25) !important; border-top: 1.5px solid #ffffff !important; color: #0284c7 !important; box-shadow: 0 2px 8px rgba(2, 132, 199, 0.10), inset 0 1px 0 #ffffff !important; } /* ============================================================ 7. UNIVERSAL SIMULATOR DUAL-THEME ENGINE (LIGHT & DARK MODES) ============================================================ */ /* ── Pill Theme Toggle Switch Mount in Simulator Headers (Disabled in Simulators) ───── */ .sim-theme-toggle-wrap, #sim-theme-toggle-wrap, .lab-header .sim-theme-toggle-wrap, .lab-navbar .sim-theme-toggle-wrap, .lab-title-bar .sim-theme-toggle-wrap, .header-actions .sim-theme-toggle-wrap, .header-status .sim-theme-toggle-wrap { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* Header Status Capsule - Light & Dark Theme Polish */ html[data-theme="light"] .header-status, html:not(.dark):not([data-theme="dark"]) .header-status { background: #f1f5f9 !important; border: 1px solid #cbd5e1 !important; color: #0f172a !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; } html[data-theme="light"] .header-status #systemStatusText, html:not(.dark):not([data-theme="dark"]) .header-status #systemStatusText, html[data-theme="light"] .header-status > span:not(.status-indicator), html:not(.dark):not([data-theme="dark"]) .header-status > span:not(.status-indicator) { color: #0f172a !important; } html[data-theme="dark"] .header-status, html.dark .header-status { background: rgba(15, 23, 42, 0.6) !important; border: 1px solid #334155 !important; color: #cbd5e1 !important; } html[data-theme="dark"] .header-status #systemStatusText, html[data-theme="dark"] .header-status > span:not(.status-indicator), html.dark .header-status #systemStatusText, html.dark .header-status > span:not(.status-indicator) { color: #cbd5e1 !important; } /* ───────────────────────────────────────────────────────────── A. LIGHT MODE: CONVERT ALL DARK-ORIGIN SIMULATORS TO WHITE UI (Electronics, Physics, Instrumentation, Process Parameters) ───────────────────────────────────────────────────────────── */ /* Light Mode Simulator Body & Page Background */ html[data-theme="light"] body, html:not(.dark):not([data-theme="dark"]) body { background-color: #f8fafc !important; color: #0f172a !important; background-image: radial-gradient(circle at 15% 15%, rgba(2, 132, 199, 0.04) 0%, transparent 40%), radial-gradient(circle at 85% 85%, rgba(37, 99, 235, 0.04) 0%, transparent 40%) !important; background-size: 100% 100%, 100% 100% !important; } /* Simulator Headers & Nav in Light Mode */ html[data-theme="light"] .lab-header, html[data-theme="light"] .lab-title-bar, html[data-theme="light"] header.lab-header, html[data-theme="light"] header.header, html[data-theme="light"] .app-header, html:not(.dark):not([data-theme="dark"]) .lab-header, html:not(.dark):not([data-theme="dark"]) .lab-title-bar, html:not(.dark):not([data-theme="dark"]) header.lab-header, html:not(.dark):not([data-theme="dark"]) header.header, html:not(.dark):not([data-theme="dark"]) .app-header { background: rgba(255, 255, 255, 0.94) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border-bottom: 1px solid #e2e8f0 !important; color: #0f172a !important; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important; } html[data-theme="light"] .brand-text h1, html[data-theme="light"] .brand-name, html[data-theme="light"] .exp-title, html[data-theme="light"] .lab-title-bar h1, html:not(.dark):not([data-theme="dark"]) .brand-text h1, html:not(.dark):not([data-theme="dark"]) .brand-name, html:not(.dark):not([data-theme="dark"]) .exp-title, html:not(.dark):not([data-theme="dark"]) .lab-title-bar h1 { color: #0f172a !important; } html[data-theme="light"] .subtitle, html[data-theme="light"] .brand-sub, html[data-theme="light"] .lab-subtitle, html:not(.dark):not([data-theme="dark"]) .subtitle, html:not(.dark):not([data-theme="dark"]) .brand-sub, html:not(.dark):not([data-theme="dark"]) .lab-subtitle { color: #64748b !important; } /* Presets Toolbar in Light Mode */ html[data-theme="light"] .presets-toolbar, html:not(.dark):not([data-theme="dark"]) .presets-toolbar { background: rgba(241, 245, 249, 0.92) !important; border-bottom: 1px solid #e2e8f0 !important; } html[data-theme="light"] .presets-label, html:not(.dark):not([data-theme="dark"]) .presets-label { color: #64748b !important; } html[data-theme="light"] .preset-btn, html:not(.dark):not([data-theme="dark"]) .preset-btn { background: #ffffff !important; color: #475569 !important; border: 1px solid #cbd5e1 !important; } html[data-theme="light"] .preset-btn:hover, html:not(.dark):not([data-theme="dark"]) .preset-btn:hover { background: #f1f5f9 !important; color: #0284c7 !important; border-color: #0284c7 !important; } html[data-theme="light"] .preset-btn.active, html:not(.dark):not([data-theme="dark"]) .preset-btn.active { background: #e0f2fe !important; color: #0284c7 !important; border-color: #0284c7 !important; box-shadow: 0 0 10px rgba(2, 132, 199, 0.15) !important; } /* Simulator Panels, Cards & Glass Containers in Light Mode */ html[data-theme="light"] .panel-card, html[data-theme="light"] .control-card, html[data-theme="light"] .card, html[data-theme="light"] .lab-panel, html[data-theme="light"] .panel, html[data-theme="light"] .glass-panel, html[data-theme="light"] .hud-card, html[data-theme="light"] .telemetry-card, html[data-theme="light"] .scope-container, html[data-theme="light"] .oscilloscope-wrapper, html[data-theme="light"] .formula-box, html[data-theme="light"] .calc-card, html[data-theme="light"] .readout-card, html[data-theme="light"] .results-box, html[data-theme="light"] .observation-card, html[data-theme="light"] .observation-panel, html[data-theme="light"] .chart-card, html[data-theme="light"] .gauge-box, html[data-theme="light"] .gauge-card, html[data-theme="light"] .step-item, html[data-theme="light"] .exercise-card, html[data-theme="light"] .data-card, html:not(.dark):not([data-theme="dark"]) .panel-card, html:not(.dark):not([data-theme="dark"]) .control-card, html:not(.dark):not([data-theme="dark"]) .card, html:not(.dark):not([data-theme="dark"]) .lab-panel, html:not(.dark):not([data-theme="dark"]) .panel, html:not(.dark):not([data-theme="dark"]) .glass-panel, html:not(.dark):not([data-theme="dark"]) .hud-card, html:not(.dark):not([data-theme="dark"]) .telemetry-card, html:not(.dark):not([data-theme="dark"]) .scope-container, html:not(.dark):not([data-theme="dark"]) .oscilloscope-wrapper, html:not(.dark):not([data-theme="dark"]) .formula-box, html:not(.dark):not([data-theme="dark"]) .calc-card, html:not(.dark):not([data-theme="dark"]) .readout-card, html:not(.dark):not([data-theme="dark"]) .results-box, html:not(.dark):not([data-theme="dark"]) .observation-card, html:not(.dark):not([data-theme="dark"]) .observation-panel, html:not(.dark):not([data-theme="dark"]) .chart-card, html:not(.dark):not([data-theme="dark"]) .gauge-box, html:not(.dark):not([data-theme="dark"]) .gauge-card, html:not(.dark):not([data-theme="dark"]) .step-item, html:not(.dark):not([data-theme="dark"]) .exercise-card, html:not(.dark):not([data-theme="dark"]) .data-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; color: #0f172a !important; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important; } html[data-theme="light"] .panel-header, html[data-theme="light"] .card-header, html[data-theme="light"] .lab-panel__header, html[data-theme="light"] .section-header, html[data-theme="light"] .settings-hdr, html:not(.dark):not([data-theme="dark"]) .panel-header, html:not(.dark):not([data-theme="dark"]) .card-header, html:not(.dark):not([data-theme="dark"]) .lab-panel__header, html:not(.dark):not([data-theme="dark"]) .section-header, html:not(.dark):not([data-theme="dark"]) .settings-hdr { background: #f8fafc !important; border-bottom: 1px solid #e2e8f0 !important; color: #0f172a !important; } html[data-theme="light"] .panel-title, html[data-theme="light"] .card-title, html:not(.dark):not([data-theme="dark"]) .panel-title, html:not(.dark):not([data-theme="dark"]) .card-title { color: #0f172a !important; } /* Light Mode Canvas & Schematic Backgrounds */ html[data-theme="light"] .circuit-canvas, html[data-theme="light"] .schematic-viewport, html[data-theme="light"] .canvas-wrapper, html[data-theme="light"] .svg-container, html[data-theme="light"] .viewport-canvas, html[data-theme="light"] .simulation-viewport, html[data-theme="light"] .circuit-board, html:not(.dark):not([data-theme="dark"]) .circuit-canvas, html:not(.dark):not([data-theme="dark"]) .schematic-viewport, html:not(.dark):not([data-theme="dark"]) .canvas-wrapper, html:not(.dark):not([data-theme="dark"]) .svg-container, html:not(.dark):not([data-theme="dark"]) .viewport-canvas, html:not(.dark):not([data-theme="dark"]) .simulation-viewport, html:not(.dark):not([data-theme="dark"]) .circuit-board { background: #ffffff !important; border: 1px solid #e2e8f0 !important; } /* SVG Text elements in Light Mode */ html[data-theme="light"] .circuit-canvas text, html[data-theme="light"] .schematic-viewport text, html[data-theme="light"] .canvas-wrapper svg text, html[data-theme="light"] .svg-container svg text, html:not(.dark):not([data-theme="dark"]) .circuit-canvas text, html:not(.dark):not([data-theme="dark"]) .schematic-viewport text, html:not(.dark):not([data-theme="dark"]) .canvas-wrapper svg text, html:not(.dark):not([data-theme="dark"]) .svg-container svg text { fill: #0f172a; } /* Secondary & Action Buttons in Light Mode */ html[data-theme="light"] .btn-secondary, html[data-theme="light"] .view-btn, html[data-theme="light"] .btn-action, html:not(.dark):not([data-theme="dark"]) .btn-secondary, html:not(.dark):not([data-theme="dark"]) .view-btn, html:not(.dark):not([data-theme="dark"]) .btn-action { background: #f1f5f9 !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important; } html[data-theme="light"] .btn-secondary:hover, html[data-theme="light"] .view-btn:hover, html[data-theme="light"] .btn-action:hover:not(:disabled), html:not(.dark):not([data-theme="dark"]) .btn-secondary:hover, html:not(.dark):not([data-theme="dark"]) .view-btn:hover, html:not(.dark):not([data-theme="dark"]) .btn-action:hover:not(:disabled) { background: #e2e8f0 !important; color: #0f172a !important; border-color: #94a3b8 !important; } html[data-theme="light"] .view-btn.active, html:not(.dark):not([data-theme="dark"]) .view-btn.active { background: #0284c7 !important; color: #ffffff !important; border-color: #0284c7 !important; } /* Status Indicators in Light Mode */ html[data-theme="light"] .status-indicator, html[data-theme="light"] .status-badge, html:not(.dark):not([data-theme="dark"]) .status-indicator, html:not(.dark):not([data-theme="dark"]) .status-badge { background: #f1f5f9 !important; border: 1px solid #cbd5e1 !important; color: #0f172a !important; } html[data-theme="light"] .status-badge.running, html:not(.dark):not([data-theme="dark"]) .status-badge.running { background: #dcfce7 !important; color: #15803d !important; border-color: #86efac !important; } html[data-theme="light"] .status-badge.paused, html:not(.dark):not([data-theme="dark"]) .status-badge.paused { background: #fef3c7 !important; color: #b45309 !important; border-color: #fde68a !important; } /* Controls & Form Inputs in Light Mode */ html[data-theme="light"] input[type="text"], html[data-theme="light"] input[type="number"], html[data-theme="light"] select, html[data-theme="light"] textarea, html:not(.dark):not([data-theme="dark"]) input[type="text"], html:not(.dark):not([data-theme="dark"]) input[type="number"], html:not(.dark):not([data-theme="dark"]) select, html:not(.dark):not([data-theme="dark"]) textarea { background: #ffffff !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important; } html[data-theme="light"] label, html[data-theme="light"] .control-label, html[data-theme="light"] .param-label, html[data-theme="light"] .hud-label, html:not(.dark):not([data-theme="dark"]) label, html:not(.dark):not([data-theme="dark"]) .control-label, html:not(.dark):not([data-theme="dark"]) .param-label, html:not(.dark):not([data-theme="dark"]) .hud-label { color: #475569 !important; } html[data-theme="light"] .param-value, html[data-theme="light"] .hud-value, html[data-theme="light"] .display-value, html[data-theme="light"] .telemetry-value, html[data-theme="light"] .slider-val-badge, html[data-theme="light"] .badge-val, html:not(.dark):not([data-theme="dark"]) .param-value, html:not(.dark):not([data-theme="dark"]) .hud-value, html:not(.dark):not([data-theme="dark"]) .display-value, html:not(.dark):not([data-theme="dark"]) .telemetry-value, html:not(.dark):not([data-theme="dark"]) .slider-val-badge, html:not(.dark):not([data-theme="dark"]) .badge-val { background: #f1f5f9 !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important; } /* Tables in Light Mode */ html[data-theme="light"] table, html[data-theme="light"] .observation-table, html[data-theme="light"] .data-table, html[data-theme="light"] .results-table, html:not(.dark):not([data-theme="dark"]) table, html:not(.dark):not([data-theme="dark"]) .observation-table, html:not(.dark):not([data-theme="dark"]) .data-table, html:not(.dark):not([data-theme="dark"]) .results-table { background: #ffffff !important; color: #0f172a !important; border-color: #e2e8f0 !important; } html[data-theme="light"] th, html:not(.dark):not([data-theme="dark"]) th { background: #f8fafc !important; color: #0f172a !important; border-color: #e2e8f0 !important; } html[data-theme="light"] td, html:not(.dark):not([data-theme="dark"]) td { background: #ffffff !important; color: #334155 !important; border-color: #e2e8f0 !important; } html[data-theme="light"] tr:nth-child(even) td, html:not(.dark):not([data-theme="dark"]) tr:nth-child(even) td { background: #f8fafc !important; } /* ───────────────────────────────────────────────────────────── B. DARK MODE: CONVERT ALL WHITE-ORIGIN SIMULATORS TO BLACK UI (Digital Electronics: AND, OR, NOT, NAND, NOR, Adders, etc.) ───────────────────────────────────────────────────────────── */ /* Simulator Page Body & Header in Dark Mode */ html[data-theme="dark"] body, html.dark body { background-color: #080d18 !important; color: #f8fafc !important; } html[data-theme="dark"] .lab-title-bar, html.dark .lab-title-bar, html[data-theme="dark"] .lab-header, html.dark .lab-header, html[data-theme="dark"] header.lab-header, html.dark header.lab-header, html[data-theme="dark"] header.header, html.dark header.header { background: #0e1526 !important; border-bottom: 1px solid #1e293b !important; color: #f8fafc !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important; } html[data-theme="dark"] .lab-title-bar h1, html.dark .lab-title-bar h1, html[data-theme="dark"] .brand-text h1, html.dark .brand-text h1, html[data-theme="dark"] .brand-name, html.dark .brand-name, html[data-theme="dark"] .exp-title, html.dark .exp-title { color: #f8fafc !important; } html[data-theme="dark"] .lab-subtitle, html.dark .lab-subtitle, html[data-theme="dark"] .subtitle, html.dark .subtitle, html[data-theme="dark"] .brand-sub, html.dark .brand-sub { color: #94a3b8 !important; } /* Digital Electronics Gate Nav Bar in Dark Mode */ html[data-theme="dark"] .gate-nav-bar, html.dark .gate-nav-bar { background: #0a0f1d !important; border-bottom: 1px solid #1e293b !important; } html[data-theme="dark"] .gate-nav-link, html.dark .gate-nav-link { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: #94a3b8 !important; } html[data-theme="dark"] .gate-nav-link:hover, html.dark .gate-nav-link:hover { background: rgba(56, 189, 248, 0.15) !important; border-color: rgba(56, 189, 248, 0.35) !important; color: #38bdf8 !important; } html[data-theme="dark"] .gate-nav-link.active, html.dark .gate-nav-link.active { background: #0284c7 !important; border-color: #38bdf8 !important; color: #ffffff !important; } .gate-nav-container::-webkit-scrollbar { display: none; width: 0; height: 0; } .gate-nav-container { -ms-overflow-style: none; scrollbar-width: none; } /* Panels, Cards & Theory Boxes in Dark Mode */ html[data-theme="dark"] .lab-panel, html.dark .lab-panel, html[data-theme="dark"] .theory-card, html.dark .theory-card, html[data-theme="dark"] .app-card, html.dark .app-card, html[data-theme="dark"] .tab-content, html.dark .tab-content, html[data-theme="dark"] .card-grid .card, html.dark .card-grid .card, html[data-theme="dark"] .control-box, html.dark .control-box, html[data-theme="dark"] .truth-table-card, html.dark .truth-table-card, html[data-theme="dark"] .panel-card, html.dark .panel-card, html[data-theme="dark"] .control-card, html.dark .control-card, html[data-theme="dark"] .card, html.dark .card { background: #111827 !important; border: 1px solid #1e293b !important; color: #f8fafc !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important; } /* 2:1 Multiplexer Cards in Dark Mode */ html[data-theme="dark"] .selected-channel-card, html.dark .selected-channel-card, html[data-theme="dark"] .output-result-card, html.dark .output-result-card, html[data-theme="dark"] .terms-breakdown-container, html.dark .terms-breakdown-container { background: #0f172a !important; border-color: #1e293b !important; color: #f8fafc !important; } html[data-theme="dark"] .selected-channel-card, html.dark .selected-channel-card { border-color: #1e40af !important; background: rgba(30, 58, 138, 0.15) !important; } html[data-theme="dark"] .channel-name, html.dark .channel-name { color: #60a5fa !important; } html[data-theme="dark"] .channel-state-pill, html.dark .channel-state-pill { background: rgba(37, 99, 235, 0.25) !important; color: #93c5fd !important; } html[data-theme="dark"] .channel-formula, html.dark .channel-formula { color: #94a3b8 !important; } html[data-theme="dark"] .term-card, html.dark .term-card { background: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .term-card.active-term, html.dark .term-card.active-term { background: rgba(37, 99, 235, 0.2) !important; border-color: #3b82f6 !important; } html[data-theme="dark"] .term-card.inactive-term, html.dark .term-card.inactive-term { background: rgba(15, 23, 42, 0.7) !important; border-color: #1e293b !important; } html[data-theme="dark"] .term-name, html.dark .term-name { color: #cbd5e1 !important; } html[data-theme="dark"] .term-expression, html.dark .term-expression { color: #f1f5f9 !important; } html[data-theme="dark"] .eval-summary-bar, html.dark .eval-summary-bar { background: #1e293b !important; border: 1px solid #334155 !important; } html[data-theme="dark"] .eval-label, html.dark .eval-label { color: #94a3b8 !important; } html[data-theme="dark"] .eval-expression, html.dark .eval-expression { color: #f1f5f9 !important; } html[data-theme="dark"] .terms-title, html.dark .terms-title, html[data-theme="dark"] .channel-card-label, html.dark .channel-card-label, html[data-theme="dark"] .result-card-label, html.dark .result-card-label, html[data-theme="dark"] .output-status-text, html.dark .output-status-text { color: #94a3b8 !important; } html[data-theme="dark"] .btn--mode, html.dark .btn--mode { background: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; } html[data-theme="dark"] .btn--mode:hover, html.dark .btn--mode:hover { background: #334155 !important; color: #ffffff !important; } html[data-theme="dark"] .btn--mode.active, html.dark .btn--mode.active { background: #2563eb !important; color: #ffffff !important; border-color: #3b82f6 !important; } /* 16:1 Multiplexer in Dark Mode */ html[data-theme="dark"] .toolbar-card, html.dark .toolbar-card { background: #0f172a !important; border: 1px solid #1e293b !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important; } html[data-theme="dark"] .btn-group-toggle, html.dark .btn-group-toggle { background: #1e293b !important; border: 1px solid #334155 !important; } html[data-theme="dark"] .btn-tab, html.dark .btn-tab { color: #94a3b8 !important; } html[data-theme="dark"] .btn-tab.active, html.dark .btn-tab.active { background: #2563eb !important; color: #ffffff !important; } html[data-theme="dark"] .speed-label, html.dark .speed-label { color: #cbd5e1 !important; } html[data-theme="dark"] .readout-box, html.dark .readout-box { background: #1e293b !important; border: 1px solid #334155 !important; } html[data-theme="dark"] .readout-box.highlight-box, html.dark .readout-box.highlight-box { background: rgba(37, 99, 235, 0.15) !important; border-color: #1e40af !important; } html[data-theme="dark"] .readout-box.output-box, html.dark .readout-box.output-box { background: rgba(139, 92, 246, 0.15) !important; border-color: #6b21a8 !important; } html[data-theme="dark"] .select-switch-item, html.dark .select-switch-item { background: #1e293b !important; border: 1px solid #334155 !important; } html[data-theme="dark"] .select-label strong, html.dark .select-label strong { color: #60a5fa !important; } html[data-theme="dark"] .toggle-btn, html.dark .toggle-btn { background: #0f172a !important; border: 2px solid #334155 !important; color: #f8fafc !important; } html[data-theme="dark"] .toggle-btn.active-high, html.dark .toggle-btn.active-high { background: #2563eb !important; border-color: #3b82f6 !important; color: #ffffff !important; } html[data-theme="dark"] .input-item, html.dark .input-item { background: #1e293b !important; border: 1px solid #334155 !important; } html[data-theme="dark"] .input-val-btn, html.dark .input-val-btn { background: #0f172a !important; border: 1px solid #334155 !important; color: #94a3b8 !important; } html[data-theme="dark"] .svg-mux-block, html.dark .svg-mux-block { fill: #1e293b !important; stroke: #475569 !important; } html[data-theme="dark"] .svg-mux-block.active-mux, html.dark .svg-mux-block.active-mux { fill: rgba(37, 99, 235, 0.25) !important; stroke: #3b82f6 !important; } html[data-theme="dark"] .svg-stage-header-bg, html.dark .svg-stage-header-bg { fill: #1e293b !important; } html[data-theme="dark"] .svg-stage-header-text, html.dark .svg-stage-header-text { fill: #93c5fd !important; } html[data-theme="dark"] .circuit-footer-note, html.dark .circuit-footer-note { background: #1e293b !important; border: 1px solid #334155 !important; color: #94a3b8 !important; } html[data-theme="dark"] .lab-panel__header, html.dark .lab-panel__header, html[data-theme="dark"] .panel-header, html.dark .panel-header, html[data-theme="dark"] .card-header, html.dark .card-header { background: #172033 !important; border-bottom: 1px solid #1e293b !important; color: #f8fafc !important; } /* Circuit Canvas in Dark Mode */ html[data-theme="dark"] .circuit-canvas, html.dark .circuit-canvas { background: #0b1120 !important; border: 1px solid #1e293b !important; } /* SVG Circuit Labels, Gates and Wires in Dark Mode */ html[data-theme="dark"] .circuit-canvas .svg-label, html.dark .circuit-canvas .svg-label, html[data-theme="dark"] .circuit-canvas text, html.dark .circuit-canvas text { fill: #f8fafc; } html[data-theme="dark"] .circuit-canvas .svg-label-small, html.dark .circuit-canvas .svg-label-small { fill: #94a3b8 !important; } html[data-theme="dark"] .gate-body, html.dark .gate-body { fill: #162036 !important; stroke: #38bdf8 !important; } html[data-theme="dark"] .gate-body.active, html.dark .gate-body.active { fill: #064e3b !important; stroke: #10b981 !important; } html[data-theme="dark"] .gate-label-text, html.dark .gate-label-text { fill: #38bdf8 !important; } /* Live Displays & Cells in Dark Mode */ html[data-theme="dark"] .live-cell, html.dark .live-cell { background: #162036 !important; border: 1px solid #1e293b !important; color: #f8fafc !important; } html[data-theme="dark"] .live-cell .label, html.dark .live-cell .label { color: #94a3b8 !important; } html[data-theme="dark"] .live-cell .val, html.dark .live-cell .val { color: #38bdf8 !important; } /* Truth Tables in Dark Mode */ html[data-theme="dark"] .truth-table, html.dark .truth-table, html[data-theme="dark"] .data-table, html.dark .data-table { background: #111827 !important; color: #f8fafc !important; border: 1px solid #1e293b !important; } html[data-theme="dark"] .truth-table th, html.dark .truth-table th, html[data-theme="dark"] .data-table th, html.dark .data-table th { background: #172033 !important; color: #f8fafc !important; border-bottom: 1px solid #1e293b !important; border-color: #1e293b !important; } html[data-theme="dark"] .truth-table td, html.dark .truth-table td, html[data-theme="dark"] .data-table td, html.dark .data-table td { background: #111827 !important; color: #cbd5e1 !important; border-color: #1e293b !important; } html[data-theme="dark"] .truth-table tr:hover td, html.dark .truth-table tr:hover td, html[data-theme="dark"] .truth-table tr.active td, html.dark .truth-table tr.active td { background: rgba(56, 189, 248, 0.12) !important; color: #38bdf8 !important; } /* Tab Navigation in Dark Mode */ html[data-theme="dark"] .tab-nav, html.dark .tab-nav, html[data-theme="dark"] .tabs-header, html.dark .tabs-header { background: #0f172a !important; border-bottom: 1px solid #1e293b !important; } html[data-theme="dark"] .tab-btn, html.dark .tab-btn { background: #111827 !important; border-color: #1e293b !important; color: #94a3b8 !important; } html[data-theme="dark"] .tab-btn.active, html.dark .tab-btn.active { background: #1e293b !important; border-bottom: 2px solid #38bdf8 !important; color: #38bdf8 !important; } /* Theory / App Card Typography in Dark Mode */ html[data-theme="dark"] .theory-card h3, html.dark .theory-card h3, html[data-theme="dark"] .theory-card h4, html.dark .theory-card h4, html[data-theme="dark"] .app-card h3, html.dark .app-card h3, html[data-theme="dark"] .app-card h4, html.dark .app-card h4, html[data-theme="dark"] .theory-card strong, html.dark .theory-card strong, html[data-theme="dark"] .app-card strong, html.dark .app-card strong { color: #f8fafc !important; } html[data-theme="dark"] .theory-card p, html.dark .theory-card p, html[data-theme="dark"] .app-card p, html.dark .app-card p, html[data-theme="dark"] .theory-card li, html.dark .theory-card li, html[data-theme="dark"] .app-card li, html.dark .app-card li { color: #94a3b8 !important; } /* Switch Controls in Digital Electronics Control Panel */ html[data-theme="dark"] .toggle-row, html.dark .toggle-row { border-bottom: 1px solid #1e293b !important; } html[data-theme="dark"] .toggle-label, html.dark .toggle-label { color: #f8fafc !important; } html[data-theme="dark"] .toggle-track, html.dark .toggle-track { background: #334155 !important; } html[data-theme="dark"] .toggle-track::after, html.dark .toggle-track::after { background: #f8fafc !important; } /* ========================================================================== 22. COMPREHENSIVE DARK & LIGHT THEME ENGINE FOR WHITE-ORIGIN SIMULATORS ========================================================================== */ /* ── A. 3-AXIS CARTESIAN ROBOT SIMULATOR ───────────────────────────────── */ html[data-theme="dark"] .cad-floor-bg, html.dark .cad-floor-bg, html[data-theme="dark"] #robotSvg > rect:first-of-type, html.dark #robotSvg > rect:first-of-type { fill: #080d18 !important; } html[data-theme="dark"] #worktableSurface stop:nth-child(1), html.dark #worktableSurface stop:nth-child(1) { stop-color: #1e293b !important; } html[data-theme="dark"] #worktableSurface stop:nth-child(2), html.dark #worktableSurface stop:nth-child(2) { stop-color: #172033 !important; } html[data-theme="dark"] #worktableSurface stop:nth-child(3), html.dark #worktableSurface stop:nth-child(3) { stop-color: #0f172a !important; } html[data-theme="dark"] #worktableSurface stop:nth-child(4), html.dark #worktableSurface stop:nth-child(4) { stop-color: #0b1120 !important; } html[data-theme="dark"] .workspace-panel, html.dark .workspace-panel, html[data-theme="dark"] .control-card, html.dark .control-card { background: #111827 !important; border-color: #263550 !important; color: #f8fafc !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important; } html[data-theme="dark"] .panel-header, html.dark .panel-header { background: #172033 !important; border-color: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .panel-title, html.dark .panel-title { color: #f8fafc !important; } html[data-theme="dark"] .camera-mode-group, html.dark .camera-mode-group { background-color: #172033 !important; border-color: #263550 !important; } html[data-theme="dark"] .cam-label, html.dark .cam-label { color: #94a3b8 !important; } html[data-theme="dark"] .view-btn, html.dark .view-btn, html[data-theme="dark"] .cam-btn, html.dark .cam-btn { background: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; } html[data-theme="dark"] .view-btn:hover, html.dark .view-btn:hover, html[data-theme="dark"] .cam-btn:hover, html.dark .cam-btn:hover { background: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .view-btn.active, html.dark .view-btn.active, html[data-theme="dark"] .cam-btn.active, html.dark .cam-btn.active { background: #2563eb !important; border-color: #3b82f6 !important; color: #ffffff !important; } html[data-theme="dark"] .status-box, html.dark .status-box { background-color: #172033 !important; border-color: #263550 !important; } html[data-theme="dark"] .box-title, html.dark .box-title { color: #94a3b8 !important; } html[data-theme="dark"] .status-ready, html.dark .status-ready { background-color: rgba(16, 185, 129, 0.2) !important; color: #34d399 !important; border: 1px solid rgba(16, 185, 129, 0.4) !important; } html[data-theme="dark"] .status-busy, html.dark .status-busy { background-color: rgba(234, 179, 8, 0.2) !important; color: #facc15 !important; border: 1px solid rgba(234, 179, 8, 0.4) !important; } html[data-theme="dark"] .status-off, html.dark .status-off { background-color: rgba(100, 116, 139, 0.2) !important; color: #94a3b8 !important; border: 1px solid rgba(100, 116, 139, 0.4) !important; } html[data-theme="dark"] .status-estop, html.dark .status-estop { background-color: rgba(239, 68, 68, 0.2) !important; color: #f87171 !important; border: 1px solid rgba(239, 68, 68, 0.4) !important; } html[data-theme="dark"] .slider-control-group, html.dark .slider-control-group { background-color: #172033 !important; border-color: #263550 !important; } html[data-theme="dark"] .step-btn, html.dark .step-btn { background: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important; } html[data-theme="dark"] .step-btn:hover, html.dark .step-btn:hover { background: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .step-btn.active, html.dark .step-btn.active { background: #2563eb !important; border-color: #3b82f6 !important; color: #ffffff !important; } html[data-theme="dark"] .jog-group, html.dark .jog-group { background-color: #172033 !important; border-color: #263550 !important; } html[data-theme="dark"] .jog-btn, html.dark .jog-btn { background-color: #1e293b !important; border-color: #334155 !important; color: #f8fafc !important; } html[data-theme="dark"] .jog-btn:hover, html.dark .jog-btn:hover { background-color: #263550 !important; border-color: #475569 !important; } html[data-theme="dark"] .actuator-grid .btn-action, html.dark .actuator-grid .btn-action { background-color: #1e293b !important; border: 1px solid #334155 !important; color: #38bdf8 !important; } html[data-theme="dark"] .actuator-grid .btn-action:hover:not(:disabled), html.dark .actuator-grid .btn-action:hover:not(:disabled) { background-color: #2563eb !important; border-color: #3b82f6 !important; color: #ffffff !important; } html[data-theme="dark"] .actuator-grid .btn-action-active, html.dark .actuator-grid .btn-action-active { background-color: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; } html[data-theme="dark"] .macro-grid .btn-outline, html.dark .macro-grid .btn-outline { background-color: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; } html[data-theme="dark"] .macro-grid .btn-outline:hover:not(:disabled), html.dark .macro-grid .btn-outline:hover:not(:disabled) { background-color: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .exercise-card, html.dark .exercise-card, html[data-theme="dark"] .log-card, html.dark .log-card { background-color: #111827 !important; border-color: #263550 !important; } html[data-theme="dark"] .sub-title, html.dark .sub-title { color: #f8fafc !important; } html[data-theme="dark"] .exercise-badge, html.dark .exercise-badge { background-color: rgba(234, 179, 8, 0.2) !important; color: #facc15 !important; border: 1px solid rgba(234, 179, 8, 0.4) !important; } html[data-theme="dark"] .step-item, html.dark .step-item { background-color: #172033 !important; border-color: #263550 !important; } html[data-theme="dark"] .step-item.active, html.dark .step-item.active { background-color: rgba(37, 99, 235, 0.2) !important; border-color: #3b82f6 !important; } html[data-theme="dark"] .step-item.done, html.dark .step-item.done { background-color: rgba(16, 185, 129, 0.2) !important; border-color: #10b981 !important; } html[data-theme="dark"] .step-num, html.dark .step-num { background-color: #1e293b !important; color: #cbd5e1 !important; } html[data-theme="dark"] .step-text, html.dark .step-text { color: #cbd5e1 !important; } html[data-theme="dark"] .settings-card, html.dark .settings-card, html[data-theme="dark"] .modal-card, html.dark .modal-card { background-color: #111827 !important; border-color: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .settings-hdr, html.dark .settings-hdr { border-color: #263550 !important; } html[data-theme="dark"] .settings-hdr h3, html.dark .settings-hdr h3, html[data-theme="dark"] .modal-card h2, html.dark .modal-card h2 { color: #f8fafc !important; } html[data-theme="dark"] .modal-card p, html.dark .modal-card p { color: #94a3b8 !important; } html[data-theme="dark"] .modal-stats, html.dark .modal-stats { background-color: #172033 !important; border-color: #263550 !important; } html[data-theme="dark"] .spd-btn, html.dark .spd-btn { background: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; } html[data-theme="dark"] .spd-btn.active, html.dark .spd-btn.active { background: #2563eb !important; border-color: #3b82f6 !important; color: #ffffff !important; } html[data-theme="dark"] .setting-select, html.dark .setting-select { background: #1e293b !important; border-color: #334155 !important; color: #f8fafc !important; } html[data-theme="dark"] .svg-container, html.dark .svg-container { background: #080d18 !important; border-color: #263550 !important; } html[data-theme="dark"] .jog-axis-box, html.dark .jog-axis-box { background: #172033 !important; border-color: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .input-coord, html.dark .input-coord { background: #0a1020 !important; border-color: #263550 !important; color: #38bdf8 !important; } html[data-theme="dark"] .preset-btn, html.dark .preset-btn { background: #1e293b !important; border-color: #334155 !important; color: #f8fafc !important; } html[data-theme="dark"] .preset-btn:hover, html.dark .preset-btn:hover { background: #2563eb !important; border-color: #3b82f6 !important; color: #ffffff !important; } html[data-theme="dark"] .telemetry-grid, html.dark .telemetry-grid, html[data-theme="dark"] .telemetry-item, html.dark .telemetry-item { background: #0a1020 !important; border-color: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .telemetry-label, html.dark .telemetry-label { color: #94a3b8 !important; } html[data-theme="dark"] .telemetry-val, html.dark .telemetry-val { color: #38bdf8 !important; } html[data-theme="dark"] .tab-item, html.dark .tab-item { color: #94a3b8 !important; } html[data-theme="dark"] .tab-item.active, html.dark .tab-item.active { color: #38bdf8 !important; border-color: #38bdf8 !important; } html[data-theme="dark"] .cad-settings-modal, html.dark .cad-settings-modal, html[data-theme="dark"] .settings-modal-content, html.dark .settings-modal-content { background: #111827 !important; border-color: #263550 !important; color: #f8fafc !important; } /* 3-Axis Workspace Footer & Telemetry Bar */ html[data-theme="dark"] .workspace-footer-bar, html.dark .workspace-footer-bar { background-color: #0b1120 !important; border-top-color: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .telemetry-pill, html.dark .telemetry-pill { background-color: #111827 !important; border-color: #263550 !important; box-shadow: none !important; } html[data-theme="dark"] .pill-label, html.dark .pill-label { color: #94a3b8 !important; } html[data-theme="dark"] .pill-val, html.dark .pill-val { color: #38bdf8 !important; } html[data-theme="dark"] #activeTaskReadout, html.dark #activeTaskReadout { color: #facc15 !important; } html[data-theme="light"] .workspace-footer-bar, html:not(.dark):not([data-theme="dark"]) .workspace-footer-bar { background-color: #f8fafc !important; border-top-color: #e2e8f0 !important; color: #0f172a !important; } html[data-theme="light"] .telemetry-pill, html:not(.dark):not([data-theme="dark"]) .telemetry-pill { background-color: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; } html[data-theme="light"] .pill-label, html:not(.dark):not([data-theme="dark"]) .pill-label { color: #64748b !important; } html[data-theme="light"] .pill-val, html:not(.dark):not([data-theme="dark"]) .pill-val { color: #0284c7 !important; } html[data-theme="light"] #activeTaskReadout, html:not(.dark):not([data-theme="dark"]) #activeTaskReadout { color: #b45309 !important; } /* ── B. 6-AXIS INDUSTRIAL ROBOT SIMULATOR ───────────────────────────────── */ html[data-theme="dark"] .robot-cell-floor-bg, html.dark .robot-cell-floor-bg, html[data-theme="dark"] #robot-svg #environment-layer > rect:first-of-type, html.dark #robot-svg #environment-layer > rect:first-of-type { fill: #080d18 !important; } html[data-theme="dark"] #robot-svg #environment-layer rect[stroke="#cbd5e1"], html.dark #robot-svg #environment-layer rect[stroke="#cbd5e1"] { stroke: #263550 !important; } html[data-theme="dark"] #robot-svg #environment-layer text, html.dark #robot-svg #environment-layer text { fill: #94a3b8 !important; } html[data-theme="dark"] .brand-title, html.dark .brand-title { color: #f8fafc !important; } html[data-theme="dark"] .brand-subtitle, html.dark .brand-subtitle { color: #94a3b8 !important; } html[data-theme="dark"] .left-panel, html.dark .left-panel, html[data-theme="dark"] .right-panel, html.dark .right-panel, html[data-theme="dark"] .control-panel-card, html.dark .control-panel-card, html[data-theme="dark"] .workspace-card, html.dark .workspace-card { background: #111827 !important; border-color: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .actions-container, html.dark .actions-container { background: #172033 !important; border-top-color: #263550 !important; } html[data-theme="dark"] .gripper-control-row, html.dark .gripper-control-row { background: #0f172a !important; border-color: #263550 !important; } html[data-theme="dark"] .grp-lbl, html.dark .grp-lbl { color: #cbd5e1 !important; } html[data-theme="dark"] .btn-action, html.dark .btn-action { background: #1e293b !important; border-color: #334155 !important; color: #38bdf8 !important; } html[data-theme="dark"] .btn-action:hover, html.dark .btn-action:hover { background: #2563eb !important; border-color: #3b82f6 !important; color: #ffffff !important; } html[data-theme="dark"] .btn-secondary, html.dark .btn-secondary { background: #1e293b !important; border-color: #334155 !important; color: #f8fafc !important; } html[data-theme="dark"] .btn-secondary:hover, html.dark .btn-secondary:hover { background: #263550 !important; color: #ffffff !important; } html[data-theme="dark"] .btn-outline, html.dark .btn-outline { background: transparent !important; border-color: #334155 !important; color: #cbd5e1 !important; } html[data-theme="dark"] .btn-outline:hover, html.dark .btn-outline:hover { background: #1e293b !important; color: #f8fafc !important; } html[data-theme="dark"] .joint-controls-container, html.dark .joint-controls-container { background: transparent !important; } html[data-theme="dark"] .joint-row, html.dark .joint-row { background: #172033 !important; border-color: #263550 !important; } html[data-theme="dark"] .joint-name, html.dark .joint-name { color: #f8fafc !important; } html[data-theme="dark"] .joint-val, html.dark .joint-val { background: #0a1020 !important; border-color: #263550 !important; color: #fb923c !important; } html[data-theme="dark"] .jog-btn, html.dark .jog-btn { background: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; } html[data-theme="dark"] .jog-btn:hover, html.dark .jog-btn:hover { background: #2563eb !important; border-color: #3b82f6 !important; color: #ffffff !important; } html[data-theme="dark"] .mono-badge, html.dark .mono-badge { background: #1e293b !important; border-color: #334155 !important; color: #38bdf8 !important; } html[data-theme="dark"] .mono-val, html.dark .mono-val { color: #f8fafc !important; } html[data-theme="dark"] .section-subtitle, html.dark .section-subtitle { color: #94a3b8 !important; } html[data-theme="dark"] .teach-counter strong, html.dark .teach-counter strong { background: #1e293b !important; color: #38bdf8 !important; } html[data-theme="dark"] .table-scroll-wrapper, html.dark .table-scroll-wrapper { background: #0a1020 !important; border-color: #263550 !important; } html[data-theme="dark"] .bottom-panel, html.dark .bottom-panel { background: #111827 !important; border-color: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .icon-toggle-btn, html.dark .icon-toggle-btn { background: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; } html[data-theme="dark"] .joint-control-row, html.dark .joint-control-row, html[data-theme="dark"] .joint-card, html.dark .joint-card { background: #172033 !important; border-color: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .joint-deg-input, html.dark .joint-deg-input, html[data-theme="dark"] .cart-input, html.dark .cart-input { background: #0a1020 !important; border-color: #263550 !important; color: #38bdf8 !important; } html[data-theme="dark"] .pose-matrix-table, html.dark .pose-matrix-table { background: #0a1020 !important; border-color: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .pose-matrix-table th, html.dark .pose-matrix-table th { background: #172033 !important; color: #38bdf8 !important; border-color: #263550 !important; } html[data-theme="dark"] .pose-matrix-table td, html.dark .pose-matrix-table td { background: #0a1020 !important; color: #cbd5e1 !important; border-color: #263550 !important; } html[data-theme="dark"] .telemetry-pill, html.dark .telemetry-pill { background: #172033 !important; border-color: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .telemetry-pill .pill-val, html.dark .telemetry-pill .pill-val { color: #38bdf8 !important; } html[data-theme="dark"] .btn-cad, html.dark .btn-cad, html[data-theme="dark"] .kin-tab, html.dark .kin-tab { background: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; } html[data-theme="dark"] .btn-cad:hover, html.dark .btn-cad:hover, html[data-theme="dark"] .kin-tab.active, html.dark .kin-tab.active { background: #2563eb !important; border-color: #3b82f6 !important; color: #ffffff !important; } html[data-theme="dark"] .teach-table, html.dark .teach-table { background: #0a1020 !important; border-color: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .teach-table th, html.dark .teach-table th { background: #172033 !important; color: #f8fafc !important; border-color: #263550 !important; } html[data-theme="dark"] .teach-table td, html.dark .teach-table td { border-color: #263550 !important; color: #cbd5e1 !important; } html[data-theme="dark"] .workspace-footer, html.dark .workspace-footer { background: #111827 !important; border-color: #263550 !important; color: #94a3b8 !important; } /* ── C. FLIP-FLOP LAB (ALL FLIP FLOP) ─────────────────────────────────── */ html[data-theme="dark"] .lab-title-bar, html.dark .lab-title-bar { background: rgba(14, 21, 38, 0.92) !important; color: #f8fafc !important; border-bottom-color: #263550 !important; } html[data-theme="dark"] .lab-title-container h1, html.dark .lab-title-container h1 { color: #f8fafc !important; } html[data-theme="dark"] .experiment-nav-bar, html.dark .experiment-nav-bar { background: #0f172a !important; border-color: #263550 !important; } html[data-theme="dark"] .nav-tab-btn, html.dark .nav-tab-btn { background: transparent !important; color: #94a3b8 !important; border-color: #263550 !important; } html[data-theme="dark"] .nav-tab-btn.active, html.dark .nav-tab-btn.active { background: #1e293b !important; color: #38bdf8 !important; border-color: #38bdf8 !important; } html[data-theme="dark"] .lab-toolbar, html.dark .lab-toolbar { background: #111827 !important; border-color: #263550 !important; } html[data-theme="dark"] .schematic-wrapper, html.dark .schematic-wrapper { background: #0b1120 !important; border-color: #263550 !important; } html[data-theme="dark"] .svg-gate-body, html.dark .svg-gate-body { fill: #162036 !important; stroke: #38bdf8 !important; } html[data-theme="dark"] .svg-gate-body.active, html.dark .svg-gate-body.active { fill: #064e3b !important; stroke: #10b981 !important; } html[data-theme="dark"] .svg-gate-label, html.dark .svg-gate-label { fill: #f8fafc !important; } html[data-theme="dark"] .svg-text-label, html.dark .svg-text-label { fill: #cbd5e1 !important; } html[data-theme="dark"] .input-control-card, html.dark .input-control-card { background: #172033 !important; border-color: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .input-control-card.active-high, html.dark .input-control-card.active-high { background: rgba(37, 99, 235, 0.2) !important; border-color: #38bdf8 !important; } html[data-theme="dark"] .clock-display-card, html.dark .clock-display-card, html[data-theme="dark"] .state-readout-card, html.dark .state-readout-card, html[data-theme="dark"] .state-summary-card, html.dark .state-summary-card, html[data-theme="dark"] .led-card, html.dark .led-card, html[data-theme="dark"] .table-container, html.dark .table-container { background: #172033 !important; border-color: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .state-summary-content h4, html.dark .state-summary-content h4 { color: #38bdf8 !important; } html[data-theme="dark"] .flow-box, html.dark .flow-box, html[data-theme="dark"] .flow-step, html.dark .flow-step { background: #172033 !important; border-color: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .op-explanation-card, html.dark .op-explanation-card { background: #172033 !important; border-color: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .op-explanation-text, html.dark .op-explanation-text { color: #cbd5e1 !important; } html[data-theme="dark"] .btn--secondary, html.dark .btn--secondary, html[data-theme="dark"] .btn--mode, html.dark .btn--mode { background: #1e293b !important; border-color: #334155 !important; color: #f8fafc !important; } /* ── D. DIGITAL ELECTRONICS LOGIC GATES & ADDERS/SUBTRACTORS ──────────── */ html[data-theme="dark"] .live-cell__label, html.dark .live-cell__label { color: #94a3b8 !important; } html[data-theme="dark"] .live-cell__value, html.dark .live-cell__value { color: #f8fafc !important; } html[data-theme="dark"] .bool-expr, html.dark .bool-expr { background: #162036 !important; border-color: #1e293b !important; color: #f8fafc !important; } html[data-theme="dark"] .bool-expr__formula, html.dark .bool-expr__formula { color: #38bdf8 !important; } html[data-theme="dark"] .btn:not(.btn--primary):not(.btn--danger), html.dark .btn:not(.btn--primary):not(.btn--danger) { background: #1e293b !important; border-color: #334155 !important; color: #f8fafc !important; } html[data-theme="dark"] .btn:not(.btn--primary):not(.btn--danger):hover, html.dark .btn:not(.btn--primary):not(.btn--danger):hover { background: #2563eb !important; border-color: #3b82f6 !important; color: #ffffff !important; } html[data-theme="dark"] .quiz-question, html.dark .quiz-question { background: #111827 !important; border-color: #1e293b !important; color: #f8fafc !important; } html[data-theme="dark"] .quiz-question__text, html.dark .quiz-question__text { color: #f8fafc !important; } html[data-theme="dark"] .quiz-opt, html.dark .quiz-opt { background: #172033 !important; border-color: #334155 !important; color: #f8fafc !important; } html[data-theme="dark"] .quiz-opt:hover, html.dark .quiz-opt:hover { background: #1e293b !important; border-color: #38bdf8 !important; } html[data-theme="dark"] .info-section h3, html.dark .info-section h3 { color: #38bdf8 !important; } html[data-theme="dark"] .info-section p, html.dark .info-section p, html[data-theme="dark"] .info-section li, html.dark .info-section li { color: #cbd5e1 !important; } html[data-theme="dark"] .app-demo, html.dark .app-demo { color: #cbd5e1 !important; } /* ── E. CONSERVATION OF LINEAR MOMENTUM ────────────────────────────────── */ html[data-theme="dark"] .lab-header, html.dark .lab-header { background: #111827 !important; border-color: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .lab-header h1, html.dark .lab-header h1 { color: #f8fafc !important; } html[data-theme="dark"] .mode-selector:has(.btn-mode), html.dark .mode-selector:has(.btn-mode), html[data-theme="dark"] .mode-selector:has(.mode-btn), html.dark .mode-selector:has(.mode-btn), html[data-theme="dark"] .toggle-group, html.dark .toggle-group { background: #0a1020 !important; border-color: #263550 !important; } html[data-theme="dark"] .mode-btn, html.dark .mode-btn { color: #94a3b8 !important; } html[data-theme="dark"] .mode-btn.active, html.dark .mode-btn.active { background: #1e293b !important; color: #38bdf8 !important; } html[data-theme="dark"] .sim-container, html.dark .sim-container { background: #080d18 !important; border-color: #263550 !important; } html[data-theme="dark"] .sim-controls-bar, html.dark .sim-controls-bar { background: #172033 !important; border-color: #263550 !important; } html[data-theme="dark"] .btn-secondary, html.dark .btn-secondary { background: #1e293b !important; border-color: #334155 !important; color: #f8fafc !important; } html[data-theme="dark"] .btn-secondary:hover, html.dark .btn-secondary:hover { background: #334155 !important; } html[data-theme="dark"] .speed-btn, html.dark .speed-btn { background: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important; } html[data-theme="dark"] .speed-btn.active, html.dark .speed-btn.active { background: #2563eb !important; color: #ffffff !important; } html[data-theme="dark"] .preset-chip, html.dark .preset-chip { background: #172033 !important; border-color: #263550 !important; color: #cbd5e1 !important; } html[data-theme="dark"] .preset-chip:hover, html.dark .preset-chip:hover { background: #1e293b !important; color: #38bdf8 !important; border-color: #38bdf8 !important; } html[data-theme="dark"] .object-control-block, html.dark .object-control-block { background: #172033 !important; border-color: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .object1-theme, html.dark .object1-theme { background: linear-gradient(180deg, rgba(37, 99, 235, 0.12) 0%, #172033 100%) !important; } html[data-theme="dark"] .object2-theme, html.dark .object2-theme { background: linear-gradient(180deg, rgba(217, 119, 6, 0.12) 0%, #172033 100%) !important; } html[data-theme="dark"] .block-header h3, html.dark .block-header h3, html[data-theme="dark"] .control-label-row label, html.dark .control-label-row label { color: #f8fafc !important; } html[data-theme="dark"] .input-with-unit, html.dark .input-with-unit { background: #0a1020 !important; border-color: #263550 !important; } html[data-theme="dark"] .input-with-unit input, html.dark .input-with-unit input { color: #38bdf8 !important; background: transparent !important; } html[data-theme="dark"] .diag-block, html.dark .diag-block { background: #172033 !important; border-color: #263550 !important; } html[data-theme="dark"] .metric-box, html.dark .metric-box { background: #111827 !important; border-color: #263550 !important; } html[data-theme="dark"] .metric-label, html.dark .metric-label { color: #94a3b8 !important; } html[data-theme="dark"] .metric-val, html.dark .metric-val { color: #f8fafc !important; } html[data-theme="dark"] .total-border, html.dark .total-border { background: rgba(37, 99, 235, 0.15) !important; } html[data-theme="dark"] .ke-block, html.dark .ke-block { background: #1e1338 !important; border-color: #4c1d95 !important; } html[data-theme="dark"] .ke-label, html.dark .ke-label { color: #c084fc !important; } html[data-theme="dark"] .ke-val, html.dark .ke-val { color: #e9d5ff !important; } html[data-theme="dark"] .ke-note, html.dark .ke-note { color: #a855f7 !important; } html[data-theme="dark"] .momentum-bar-section, html.dark .momentum-bar-section { background: #172033 !important; border-color: #263550 !important; } html[data-theme="dark"] .bar-section-title, html.dark .bar-section-title { color: #f8fafc !important; } html[data-theme="dark"] .bar-track, html.dark .bar-track { background: #0a1020 !important; border-color: #263550 !important; } html[data-theme="dark"] .graph-tab-toggle, html.dark .graph-tab-toggle { background: #0a1020 !important; } html[data-theme="dark"] .obs-table, html.dark .obs-table { background: #111827 !important; color: #f8fafc !important; } html[data-theme="dark"] .obs-table th, html.dark .obs-table th { background: #172033 !important; color: #f8fafc !important; border-color: #263550 !important; } html[data-theme="dark"] .obs-table td, html.dark .obs-table td { background: #111827 !important; color: #cbd5e1 !important; border-color: #263550 !important; } html[data-theme="dark"] .obs-table tbody tr:nth-child(even), html.dark .obs-table tbody tr:nth-child(even) { background: #131b2e !important; } html[data-theme="dark"] .theory-card, html.dark .theory-card { background: #111827 !important; border-color: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .theory-block, html.dark .theory-block { background: #172033 !important; border-color: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .theory-block h3, html.dark .theory-block h3 { color: #38bdf8 !important; border-color: #263550 !important; } html[data-theme="dark"] .theory-block p, html.dark .theory-block p, html[data-theme="dark"] .theory-block li, html.dark .theory-block li { color: #cbd5e1 !important; } html[data-theme="dark"] .formula-box, html.dark .formula-box { background: #0a1020 !important; border-color: #263550 !important; color: #38bdf8 !important; } html[data-theme="dark"] .formula-box-sm, html.dark .formula-box-sm { background: #0a1020 !important; border-color: #263550 !important; color: #cbd5e1 !important; } html[data-theme="dark"] .lab-footer, html.dark .lab-footer { background: #111827 !important; border-color: #263550 !important; color: #64748b !important; } /* ── F. HOOKE'S LAW VIRTUAL LAB ────────────────────────────────────────── */ html[data-theme="dark"] body.hooke-body, html.dark body.hooke-body { background-color: #080d18 !important; color: #f8fafc !important; } html[data-theme="dark"] .sim-card, html.dark .sim-card { background: #111827 !important; border-color: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .sim-card .card-header h2, html.dark .sim-card .card-header h2 { color: #f8fafc !important; } html[data-theme="dark"] .ruler-title, html.dark .ruler-title { fill: #94a3b8 !important; } /* ── G. CONSERVATION OF ENERGY ────────────────────────────────────────── */ html[data-theme="dark"] .energy-bars-container, html.dark .energy-bars-container, html[data-theme="dark"] .theory-box, html.dark .theory-box { background: #172033 !important; border-color: #263550 !important; } html[data-theme="dark"] .theory-box h3, html.dark .theory-box h3 { color: #38bdf8 !important; } html[data-theme="dark"] .theory-box p, html.dark .theory-box p, html[data-theme="dark"] .theory-box li, html.dark .theory-box li { color: #cbd5e1 !important; } html[data-theme="dark"] .verification-overlay, html.dark .verification-overlay { background: rgba(17, 24, 39, 0.92) !important; border-color: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .verification-overlay.ideal, html.dark .verification-overlay.ideal { background: rgba(6, 78, 59, 0.4) !important; color: #34d399 !important; border-color: #059669 !important; } html[data-theme="dark"] .verification-overlay.friction, html.dark .verification-overlay.friction { background: rgba(124, 45, 18, 0.4) !important; color: #fb923c !important; border-color: #ea580c !important; } html[data-theme="dark"] .bar-track, html.dark .bar-track { background: #0a1020 !important; } html[data-theme="dark"] .control-val-badge, html.dark .control-val-badge { background: #1e293b !important; color: #38bdf8 !important; border-color: #263550 !important; } /* ── H. THERMOCOUPLE & SENSORS SIMULATOR ────────────────────────────────── */ html[data-theme="dark"] .tc-type-btn, html.dark .tc-type-btn { background-color: #172033 !important; border-color: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .tc-type-btn .tc-name, html.dark .tc-type-btn .tc-name { color: #f8fafc !important; } html[data-theme="dark"] .tc-type-btn.active, html.dark .tc-type-btn.active { background-color: #1e3a8a !important; border-color: #3b82f6 !important; } html[data-theme="dark"] .tc-type-btn.active .tc-name, html.dark .tc-type-btn.active .tc-name { color: #60a5fa !important; } html[data-theme="dark"] .segmented-control, html.dark .segmented-control { background-color: #0f172a !important; border-color: #263550 !important; } html[data-theme="dark"] .segment-btn.active, html.dark .segment-btn.active { background-color: #1e293b !important; color: #f97316 !important; } html[data-theme="dark"] .tab-btn.active, html.dark .tab-btn.active { background-color: #111827 !important; color: #38bdf8 !important; border-bottom-color: #38bdf8 !important; } html[data-theme="dark"] .btn-outline, html.dark .btn-outline { background-color: transparent !important; border-color: #334155 !important; color: #cbd5e1 !important; } html[data-theme="dark"] .btn-danger-outline, html.dark .btn-danger-outline { background-color: transparent !important; border-color: #ef4444 !important; color: #f87171 !important; } /* ── I. PRESSURE TRANSMITTER & FLOW TRANSMITTER ─────────────────────────── */ html[data-theme="dark"] .schematic-viewport, html.dark .schematic-viewport { background-color: #0b1120 !important; border-color: #263550 !important; } html[data-theme="dark"] .diagram-legend, html.dark .diagram-legend { background: rgba(17, 24, 39, 0.94) !important; border-color: #263550 !important; color: #cbd5e1 !important; } html[data-theme="dark"] .btn-preset, html.dark .btn-preset { background: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; } html[data-theme="dark"] .btn-preset.active, html.dark .btn-preset.active { background: #2563eb !important; border-color: #3b82f6 !important; color: #ffffff !important; } html[data-theme="dark"] .readout-card, html.dark .readout-card { background: #172033 !important; border-color: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .btn-step, html.dark .btn-step { background: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; } /* ── J. PYROMETER SIMULATOR ─────────────────────────────────────────────── */ html[data-theme="dark"] .reading-card, html.dark .reading-card, html[data-theme="dark"] .status-panel, html.dark .status-panel { background: #172033 !important; border-color: #263550 !important; color: #f8fafc !important; } html[data-theme="dark"] .case, html.dark .case { background: #111827 !important; border-color: #263550 !important; color: #f8fafc !important; } /* ── K. PID CONTROLLER SIMULATOR ────────────────────────────────────────── */ html[data-theme="dark"] .obs-table td, html.dark .obs-table td { background-color: #111827 !important; color: #cbd5e1 !important; } html[data-theme="dark"] .obs-table tr:nth-child(even) td, html.dark .obs-table tr:nth-child(even) td { background-color: #172033 !important; } html[data-theme="dark"] .tab-header, html.dark .tab-header { background: #0f172a !important; border-color: #263550 !important; } html[data-theme="dark"] .tab-btn.active, html.dark .tab-btn.active { background: #1e293b !important; border-color: #263550 !important; color: #38bdf8 !important; } html[data-theme="dark"] .tab-content.active, html.dark .tab-content.active { color: #cbd5e1 !important; } html[data-theme="dark"] .tab-content h4, html.dark .tab-content h4 { color: #38bdf8 !important; } html[data-theme="dark"] .formula-box, html.dark .formula-box { background: #0a1020 !important; border-left-color: #38bdf8 !important; color: #f8fafc !important; } /* ── L. RTD SIMULATOR ───────────────────────────────────────────────────── */ html[data-theme="dark"] .status-pill, html.dark .status-pill { background: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; } /* ── M. CONSERVATION OF LINEAR MOMENTUM ─────────────────────────────────── */ html[data-theme="dark"] .lab-header, html.dark .lab-header { background: #111827 !important; border-color: #263550 !important; } html[data-theme="dark"] .mode-selector:has(.btn-mode), html.dark .mode-selector:has(.btn-mode), html[data-theme="dark"] .mode-selector:has(.mode-btn), html.dark .mode-selector:has(.mode-btn) { background: #0f172a !important; border-color: #263550 !important; } html[data-theme="dark"] .mode-btn.active, html.dark .mode-btn.active { background: #1e293b !important; color: #38bdf8 !important; } /* ========================================================================== 24. PROCESS PARAMETERS SIMULATORS DUAL-THEME ENGINE (LIGHT & DARK) Precision theme styling for: - C-Type Bourdon Tube - Diaphragm Pressure Sensing Element - Bellows Pressure Sensing Element - Pressure Transmitter - RTD (Pt100) - Thermocouple - Optical Pyrometer - DP Level Transmitter - Flow Transmitter ========================================================================== */ /* ── 1. Universal Headers for Process Parameters ── */ html[data-theme="light"] .lab-header, html[data-theme="light"] .app-header, html[data-theme="light"] #lab-header, html:not(.dark):not([data-theme="dark"]) .lab-header, html:not(.dark):not([data-theme="dark"]) .app-header, html:not(.dark):not([data-theme="dark"]) #lab-header { background: rgba(255, 255, 255, 0.96) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border-bottom: 1px solid #e2e8f0 !important; color: #0f172a !important; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important; } html[data-theme="light"] .lab-header h1, html[data-theme="light"] .app-header h1, html[data-theme="light"] #lab-header h1, html[data-theme="light"] .brand-title h1, html[data-theme="light"] .brand-section h1, html[data-theme="light"] .brand h1, html[data-theme="light"] .brand-logo, html:not(.dark):not([data-theme="dark"]) .lab-header h1, html:not(.dark):not([data-theme="dark"]) .app-header h1, html:not(.dark):not([data-theme="dark"]) #lab-header h1, html:not(.dark):not([data-theme="dark"]) .brand-title h1, html:not(.dark):not([data-theme="dark"]) .brand-section h1, html:not(.dark):not([data-theme="dark"]) .brand h1, html:not(.dark):not([data-theme="dark"]) .brand-logo { color: #0f172a !important; } html[data-theme="light"] .subtitle, html[data-theme="light"] .header-subtitle, html[data-theme="light"] .brand-subtitle, html[data-theme="light"] .brand-title .sub-title, html[data-theme="light"] .tagline, html[data-theme="light"] .sub-heading, html:not(.dark):not([data-theme="dark"]) .subtitle, html:not(.dark):not([data-theme="dark"]) .header-subtitle, html:not(.dark):not([data-theme="dark"]) .brand-subtitle, html:not(.dark):not([data-theme="dark"]) .brand-title .sub-title, html:not(.dark):not([data-theme="dark"]) .tagline, html:not(.dark):not([data-theme="dark"]) .sub-heading { color: #64748b !important; } html[data-theme="light"] .meta-val, html[data-theme="light"] .meta-value, html[data-theme="light"] .header-meta .meta-item, html:not(.dark):not([data-theme="dark"]) .meta-val, html:not(.dark):not([data-theme="dark"]) .meta-value, html:not(.dark):not([data-theme="dark"]) .header-meta .meta-item { color: #0f172a !important; } html[data-theme="light"] .meta-label, html:not(.dark):not([data-theme="dark"]) .meta-label { color: #64748b !important; } html[data-theme="light"] .status-badge, html[data-theme="light"] .status-pill, html:not(.dark):not([data-theme="dark"]) .status-badge, html:not(.dark):not([data-theme="dark"]) .status-pill { background: rgba(15, 23, 42, 0.05) !important; border: 1px solid #cbd5e1 !important; color: #0f172a !important; } /* Dark Headers */ html[data-theme="dark"] .lab-header, html[data-theme="dark"] .app-header, html[data-theme="dark"] #lab-header, html.dark .lab-header, html.dark .app-header, html.dark #lab-header { background: #111827 !important; border-bottom: 1px solid #1e293b !important; color: #f8fafc !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important; } html[data-theme="dark"] .lab-header h1, html[data-theme="dark"] .app-header h1, html[data-theme="dark"] #lab-header h1, html[data-theme="dark"] .brand-title h1, html[data-theme="dark"] .brand-section h1, html[data-theme="dark"] .brand h1, html[data-theme="dark"] .brand-logo, html.dark .lab-header h1, html.dark .app-header h1, html.dark #lab-header h1, html.dark .brand-title h1, html.dark .brand-section h1, html.dark .brand h1, html.dark .brand-logo { color: #f8fafc !important; } html[data-theme="dark"] .subtitle, html[data-theme="dark"] .header-subtitle, html[data-theme="dark"] .brand-subtitle, html[data-theme="dark"] .brand-title .sub-title, html[data-theme="dark"] .tagline, html[data-theme="dark"] .sub-heading, html.dark .subtitle, html.dark .header-subtitle, html.dark .brand-subtitle, html.dark .brand-title .sub-title, html.dark .tagline, html.dark .sub-heading { color: #94a3b8 !important; } html[data-theme="dark"] .meta-val, html[data-theme="dark"] .meta-value, html[data-theme="dark"] .header-meta .meta-item, html.dark .meta-val, html.dark .meta-value, html.dark .header-meta .meta-item { color: #f8fafc !important; } html[data-theme="dark"] .meta-label, html.dark .meta-label { color: #94a3b8 !important; } html[data-theme="dark"] .status-badge, html[data-theme="dark"] .status-pill, html.dark .status-badge, html.dark .status-pill { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #f8fafc !important; } /* ── 2. Panels, Cards & Containers in Light Mode ── */ html[data-theme="light"] .lab-panel, html[data-theme="light"] .panel, html[data-theme="light"] .card, html[data-theme="light"] .lab-card, html[data-theme="light"] .control-card, html[data-theme="light"] .data-card, html[data-theme="light"] .chart-card, html[data-theme="light"] .formula-card, html[data-theme="light"] .spec-card, html[data-theme="light"] .theory-card, html[data-theme="light"] .telemetry-card, html[data-theme="light"] .tank-card, html[data-theme="light"] .transmitter-card, html[data-theme="light"] .measurement-card, html[data-theme="light"] .bath-card, html[data-theme="light"] .reading-card, html[data-theme="light"] .status-panel, html[data-theme="light"] .viewport-card, html[data-theme="light"] .modal-card, html[data-theme="light"] .theory-grid, html[data-theme="light"] .specs-grid, html[data-theme="light"] .controls-body, html:not(.dark):not([data-theme="dark"]) .lab-panel, html:not(.dark):not([data-theme="dark"]) .panel, html:not(.dark):not([data-theme="dark"]) .card, html:not(.dark):not([data-theme="dark"]) .lab-card, html:not(.dark):not([data-theme="dark"]) .control-card, html:not(.dark):not([data-theme="dark"]) .data-card, html:not(.dark):not([data-theme="dark"]) .chart-card, html:not(.dark):not([data-theme="dark"]) .formula-card, html:not(.dark):not([data-theme="dark"]) .spec-card, html:not(.dark):not([data-theme="dark"]) .theory-card, html:not(.dark):not([data-theme="dark"]) .telemetry-card, html:not(.dark):not([data-theme="dark"]) .tank-card, html:not(.dark):not([data-theme="dark"]) .transmitter-card, html:not(.dark):not([data-theme="dark"]) .measurement-card, html:not(.dark):not([data-theme="dark"]) .bath-card, html:not(.dark):not([data-theme="dark"]) .reading-card, html:not(.dark):not([data-theme="dark"]) .status-panel, html:not(.dark):not([data-theme="dark"]) .viewport-card, html:not(.dark):not([data-theme="dark"]) .modal-card, html:not(.dark):not([data-theme="dark"]) .theory-grid, html:not(.dark):not([data-theme="dark"]) .specs-grid, html:not(.dark):not([data-theme="dark"]) .controls-body { background-color: #ffffff !important; border-color: #e2e8f0 !important; color: #0f172a !important; } html[data-theme="light"] .panel-header, html[data-theme="light"] .card-header, html[data-theme="light"] .section-header, html[data-theme="light"] .modal-header, html:not(.dark):not([data-theme="dark"]) .panel-header, html:not(.dark):not([data-theme="dark"]) .card-header, html:not(.dark):not([data-theme="dark"]) .section-header, html:not(.dark):not([data-theme="dark"]) .modal-header { background-color: #f8fafc !important; border-bottom: 1px solid #e2e8f0 !important; color: #0f172a !important; } html[data-theme="light"] .panel-header h2, html[data-theme="light"] .card-header h2, html[data-theme="light"] .card-header h3, html[data-theme="light"] .panel-title, html[data-theme="light"] .card-title, html[data-theme="light"] .modal-header h3, html:not(.dark):not([data-theme="dark"]) .panel-header h2, html:not(.dark):not([data-theme="dark"]) .card-header h2, html:not(.dark):not([data-theme="dark"]) .card-header h3, html:not(.dark):not([data-theme="dark"]) .panel-title, html:not(.dark):not([data-theme="dark"]) .card-title, html:not(.dark):not([data-theme="dark"]) .modal-header h3 { color: #0f172a !important; } html[data-theme="light"] .theory-card p, html[data-theme="light"] .spec-card p, html[data-theme="light"] .theory-card li, html[data-theme="light"] .spec-card li, html[data-theme="light"] .step-list, html[data-theme="light"] .spec-list, html:not(.dark):not([data-theme="dark"]) .theory-card p, html:not(.dark):not([data-theme="dark"]) .spec-card p, html:not(.dark):not([data-theme="dark"]) .theory-card li, html:not(.dark):not([data-theme="dark"]) .spec-card li, html:not(.dark):not([data-theme="dark"]) .step-list, html:not(.dark):not([data-theme="dark"]) .spec-list { color: #334155 !important; } /* ── 3. Panels, Cards & Containers in Dark Mode ── */ html[data-theme="dark"] .lab-panel, html[data-theme="dark"] .panel, html[data-theme="dark"] .card, html[data-theme="dark"] .lab-card, html[data-theme="dark"] .control-card, html[data-theme="dark"] .data-card, html[data-theme="dark"] .chart-card, html[data-theme="dark"] .formula-card, html[data-theme="dark"] .spec-card, html[data-theme="dark"] .theory-card, html[data-theme="dark"] .telemetry-card, html[data-theme="dark"] .tank-card, html[data-theme="dark"] .transmitter-card, html[data-theme="dark"] .measurement-card, html[data-theme="dark"] .bath-card, html[data-theme="dark"] .reading-card, html[data-theme="dark"] .status-panel, html[data-theme="dark"] .viewport-card, html[data-theme="dark"] .modal-card, html[data-theme="dark"] .theory-grid, html[data-theme="dark"] .specs-grid, html[data-theme="dark"] .controls-body, html.dark .lab-panel, html.dark .panel, html.dark .card, html.dark .lab-card, html.dark .control-card, html.dark .data-card, html.dark .chart-card, html.dark .formula-card, html.dark .spec-card, html.dark .theory-card, html.dark .telemetry-card, html.dark .tank-card, html.dark .transmitter-card, html.dark .measurement-card, html.dark .bath-card, html.dark .reading-card, html.dark .status-panel, html.dark .viewport-card, html.dark .modal-card, html.dark .theory-grid, html.dark .specs-grid, html.dark .controls-body { background-color: #111827 !important; border-color: #1e293b !important; color: #f8fafc !important; } html[data-theme="dark"] .panel-header, html[data-theme="dark"] .card-header, html[data-theme="dark"] .section-header, html[data-theme="dark"] .modal-header, html.dark .panel-header, html.dark .card-header, html.dark .section-header, html.dark .modal-header { background-color: #172033 !important; border-bottom: 1px solid #1e293b !important; color: #f8fafc !important; } html[data-theme="dark"] .panel-header h2, html[data-theme="dark"] .card-header h2, html[data-theme="dark"] .card-header h3, html[data-theme="dark"] .panel-title, html[data-theme="dark"] .card-title, html[data-theme="dark"] .modal-header h3, html.dark .panel-header h2, html.dark .card-header h2, html.dark .card-header h3, html.dark .panel-title, html.dark .card-title, html.dark .modal-header h3 { color: #f8fafc !important; } html[data-theme="dark"] .theory-card p, html[data-theme="dark"] .spec-card p, html[data-theme="dark"] .theory-card li, html[data-theme="dark"] .spec-card li, html[data-theme="dark"] .step-list, html[data-theme="dark"] .spec-list, html.dark .theory-card p, html.dark .spec-card p, html.dark .theory-card li, html.dark .spec-card li, html.dark .step-list, html.dark .spec-list { color: #cbd5e1 !important; } /* ── 4. Canvases & Viewports in Light and Dark Modes ── */ html[data-theme="light"] .canvas-wrapper, html[data-theme="light"] .schematic-viewport, html[data-theme="light"] .diagram-container, html[data-theme="light"] .viewport-container, html:not(.dark):not([data-theme="dark"]) .canvas-wrapper, html:not(.dark):not([data-theme="dark"]) .schematic-viewport, html:not(.dark):not([data-theme="dark"]) .diagram-container, html:not(.dark):not([data-theme="dark"]) .viewport-container { background-color: #f8fafc !important; border-color: #e2e8f0 !important; } .svg-grid-bg, html[data-theme="light"] .svg-grid-bg, html:not(.dark):not([data-theme="dark"]) .svg-grid-bg, html[data-theme="dark"] .svg-grid-bg, html.dark .svg-grid-bg { display: none !important; background-image: none !important; visibility: hidden !important; opacity: 0 !important; } html[data-theme="dark"] .canvas-wrapper, html[data-theme="dark"] .schematic-viewport, html[data-theme="dark"] .diagram-container, html[data-theme="dark"] .viewport-container, html.dark .canvas-wrapper, html.dark .schematic-viewport, html.dark .diagram-container, html.dark .viewport-container { background-color: #080d18 !important; border-color: #1e293b !important; box-shadow: none !important; } /* ── 5. Readouts, Pills, Gauges & Controls ── */ /* Light Mode */ html[data-theme="light"] .readout-pill, html[data-theme="light"] .telemetry-pill, html[data-theme="light"] .badge-reading, html[data-theme="light"] .card-icon, html:not(.dark):not([data-theme="dark"]) .readout-pill, html:not(.dark):not([data-theme="dark"]) .telemetry-pill, html:not(.dark):not([data-theme="dark"]) .badge-reading, html:not(.dark):not([data-theme="dark"]) .card-icon { background-color: #e0f2fe !important; color: #0284c7 !important; border-color: #bae6fd !important; } html[data-theme="light"] .regulator-box, html[data-theme="light"] .slider-group, html[data-theme="light"] .control-group, html[data-theme="light"] .knob-container, html:not(.dark):not([data-theme="dark"]) .regulator-box, html:not(.dark):not([data-theme="dark"]) .slider-group, html:not(.dark):not([data-theme="dark"]) .control-group, html:not(.dark):not([data-theme="dark"]) .knob-container { background-color: #f8fafc !important; border-color: #e2e8f0 !important; color: #0f172a !important; } html[data-theme="light"] .card-data .card-value, html[data-theme="light"] .card-value, html[data-theme="light"] .telemetry-val, html[data-theme="light"] .slider-val, html[data-theme="light"] .readout-value, html:not(.dark):not([data-theme="dark"]) .card-data .card-value, html:not(.dark):not([data-theme="dark"]) .card-value, html:not(.dark):not([data-theme="dark"]) .telemetry-val, html:not(.dark):not([data-theme="dark"]) .slider-val, html:not(.dark):not([data-theme="dark"]) .readout-value { color: #0f172a !important; } html[data-theme="light"] .card-data .card-label, html[data-theme="light"] .card-label, html[data-theme="light"] .telemetry-label, html[data-theme="light"] .slider-label, html[data-theme="light"] .control-label, html:not(.dark):not([data-theme="dark"]) .card-data .card-label, html:not(.dark):not([data-theme="dark"]) .card-label, html:not(.dark):not([data-theme="dark"]) .telemetry-label, html:not(.dark):not([data-theme="dark"]) .slider-label, html:not(.dark):not([data-theme="dark"]) .control-label { color: #475569 !important; } html[data-theme="light"] .btn-preset, html:not(.dark):not([data-theme="dark"]) .btn-preset { background-color: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; } html[data-theme="light"] .btn-preset:hover, html:not(.dark):not([data-theme="dark"]) .btn-preset:hover { background-color: #f1f5f9 !important; border-color: #0284c7 !important; color: #0284c7 !important; } html[data-theme="light"] .toggle-switch-container, html[data-theme="light"] .segmented-control, html:not(.dark):not([data-theme="dark"]) .toggle-switch-container, html:not(.dark):not([data-theme="dark"]) .segmented-control { background-color: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; } html[data-theme="light"] .btn-toggle, html[data-theme="light"] .segment-btn, html:not(.dark):not([data-theme="dark"]) .btn-toggle, html:not(.dark):not([data-theme="dark"]) .segment-btn { color: #64748b !important; } html[data-theme="light"] .btn-toggle.active, html[data-theme="light"] .segment-btn.active, html:not(.dark):not([data-theme="dark"]) .btn-toggle.active, html:not(.dark):not([data-theme="dark"]) .segment-btn.active { background-color: #ffffff !important; color: #0284c7 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important; } /* Dark Mode Readouts & Controls */ html[data-theme="dark"] .readout-pill, html[data-theme="dark"] .telemetry-pill, html[data-theme="dark"] .badge-reading, html[data-theme="dark"] .card-icon, html.dark .readout-pill, html.dark .telemetry-pill, html.dark .badge-reading, html.dark .card-icon { background-color: rgba(2, 132, 199, 0.18) !important; color: #38bdf8 !important; border-color: rgba(56, 189, 248, 0.35) !important; } html[data-theme="dark"] .regulator-box, html[data-theme="dark"] .slider-group, html[data-theme="dark"] .control-group, html[data-theme="dark"] .knob-container, html.dark .regulator-box, html.dark .slider-group, html.dark .control-group, html.dark .knob-container { background-color: #172033 !important; border-color: #1e293b !important; color: #f8fafc !important; } html[data-theme="dark"] .card-data .card-value, html[data-theme="dark"] .card-value, html[data-theme="dark"] .telemetry-val, html[data-theme="dark"] .slider-val, html[data-theme="dark"] .readout-value, html.dark .card-data .card-value, html.dark .card-value, html.dark .telemetry-val, html.dark .slider-val, html.dark .readout-value { color: #f8fafc !important; } html[data-theme="dark"] .card-data .card-label, html[data-theme="dark"] .card-label, html[data-theme="dark"] .telemetry-label, html[data-theme="dark"] .slider-label, html[data-theme="dark"] .control-label, html.dark .card-data .card-label, html.dark .card-label, html.dark .telemetry-label, html.dark .slider-label, html.dark .control-label { color: #94a3b8 !important; } html[data-theme="dark"] .btn-preset, html.dark .btn-preset { background-color: #1e293b !important; border: 1px solid #334155 !important; color: #cbd5e1 !important; } html[data-theme="dark"] .btn-preset:hover, html.dark .btn-preset:hover { background-color: #263550 !important; border-color: #38bdf8 !important; color: #38bdf8 !important; } html[data-theme="dark"] .toggle-switch-container, html[data-theme="dark"] .segmented-control, html.dark .toggle-switch-container, html.dark .segmented-control { background-color: #0f172a !important; border: 1px solid #1e293b !important; } html[data-theme="dark"] .btn-toggle, html[data-theme="dark"] .segment-btn, html.dark .btn-toggle, html.dark .segment-btn { color: #94a3b8 !important; } html[data-theme="dark"] .btn-toggle.active, html[data-theme="dark"] .segment-btn.active, html.dark .btn-toggle.active, html.dark .segment-btn.active { background-color: #1e293b !important; color: #38bdf8 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important; } /* ── 6. Tables across all 9 Process Parameters Simulators ── */ /* Light Mode Tables */ html[data-theme="light"] .lab-table th, html[data-theme="light"] .data-table th, html[data-theme="light"] .obs-table th, html[data-theme="light"] .table-wrapper th, html[data-theme="light"] .table-container th, html:not(.dark):not([data-theme="dark"]) .lab-table th, html:not(.dark):not([data-theme="dark"]) .data-table th, html:not(.dark):not([data-theme="dark"]) .obs-table th, html:not(.dark):not([data-theme="dark"]) .table-wrapper th, html:not(.dark):not([data-theme="dark"]) .table-container th { background-color: #f1f5f9 !important; color: #0f172a !important; border-bottom: 2px solid #cbd5e1 !important; } html[data-theme="light"] .lab-table td, html[data-theme="light"] .data-table td, html[data-theme="light"] .obs-table td, html[data-theme="light"] .table-wrapper td, html[data-theme="light"] .table-container td, html:not(.dark):not([data-theme="dark"]) .lab-table td, html:not(.dark):not([data-theme="dark"]) .data-table td, html:not(.dark):not([data-theme="dark"]) .obs-table td, html:not(.dark):not([data-theme="dark"]) .table-wrapper td, html:not(.dark):not([data-theme="dark"]) .table-container td { background-color: #ffffff !important; color: #0f172a !important; border-bottom: 1px solid #e2e8f0 !important; } html[data-theme="light"] .lab-table tbody tr:hover td, html[data-theme="light"] .data-table tbody tr:hover td, html[data-theme="light"] .obs-table tbody tr:hover td, html[data-theme="light"] .table-wrapper tbody tr:hover td, html[data-theme="light"] .table-container tbody tr:hover td, html:not(.dark):not([data-theme="dark"]) .lab-table tbody tr:hover td, html:not(.dark):not([data-theme="dark"]) .data-table tbody tr:hover td, html:not(.dark):not([data-theme="dark"]) .obs-table tbody tr:hover td, html:not(.dark):not([data-theme="dark"]) .table-wrapper tbody tr:hover td, html:not(.dark):not([data-theme="dark"]) .table-container tbody tr:hover td { background-color: #f8fafc !important; color: #0284c7 !important; } /* Dark Mode Tables */ html[data-theme="dark"] .lab-table th, html[data-theme="dark"] .data-table th, html[data-theme="dark"] .obs-table th, html[data-theme="dark"] .table-wrapper th, html[data-theme="dark"] .table-container th, html.dark .lab-table th, html.dark .data-table th, html.dark .obs-table th, html.dark .table-wrapper th, html.dark .table-container th { background-color: #172033 !important; color: #f8fafc !important; border-bottom: 2px solid #1e293b !important; } html[data-theme="dark"] .lab-table td, html[data-theme="dark"] .data-table td, html[data-theme="dark"] .obs-table td, html[data-theme="dark"] .table-wrapper td, html[data-theme="dark"] .table-container td, html.dark .lab-table td, html.dark .data-table td, html.dark .obs-table td, html.dark .table-wrapper td, html.dark .table-container td { background-color: #111827 !important; color: #cbd5e1 !important; border-bottom: 1px solid #1e293b !important; } html[data-theme="dark"] .lab-table tbody tr:hover td, html[data-theme="dark"] .data-table tbody tr:hover td, html[data-theme="dark"] .obs-table tbody tr:hover td, html[data-theme="dark"] .table-wrapper tbody tr:hover td, html[data-theme="dark"] .table-container tbody tr:hover td, html.dark .lab-table tbody tr:hover td, html.dark .data-table tbody tr:hover td, html.dark .obs-table tbody tr:hover td, html.dark .table-wrapper tbody tr:hover td, html.dark .table-container tbody tr:hover td { background-color: rgba(56, 189, 248, 0.12) !important; color: #38bdf8 !important; } /* ── 7. Formulas, Theory Cards & Step Lists ── */ html[data-theme="light"] .formula-box, html:not(.dark):not([data-theme="dark"]) .formula-box { background-color: #f1f5f9 !important; border-left: 3px solid #0284c7 !important; color: #0f172a !important; } html[data-theme="dark"] .formula-box, html.dark .formula-box { background-color: #0a1020 !important; border-left: 3px solid #38bdf8 !important; color: #f8fafc !important; } html[data-theme="light"] .step-list, html[data-theme="light"] .spec-list, html:not(.dark):not([data-theme="dark"]) .step-list, html:not(.dark):not([data-theme="dark"]) .spec-list { color: #334155 !important; } html[data-theme="dark"] .step-list, html[data-theme="dark"] .spec-list, html.dark .step-list, html.dark .spec-list { color: #cbd5e1 !important; } /* ── 8. Diaphragm, Bellows & Bourdon SVG Elements ── */ /* Light Mode SVGs */ html[data-theme="light"] .svg-housing, html:not(.dark):not([data-theme="dark"]) .svg-housing { fill: #e2e8f0 !important; stroke: #94a3b8 !important; } html[data-theme="light"] .svg-chamber-cavity, html:not(.dark):not([data-theme="dark"]) .svg-chamber-cavity { fill: #f8fafc !important; stroke: #cbd5e1 !important; } html[data-theme="light"] .svg-label-bg, html:not(.dark):not([data-theme="dark"]) .svg-label-bg { fill: rgba(255, 255, 255, 0.94) !important; stroke: #cbd5e1 !important; } html[data-theme="light"] .svg-label-text, html:not(.dark):not([data-theme="dark"]) .svg-label-text { fill: #0f172a !important; } html[data-theme="light"] .svg-pushrod, html:not(.dark):not([data-theme="dark"]) .svg-pushrod { fill: #cbd5e1 !important; stroke: #64748b !important; } /* Dark Mode SVGs */ html[data-theme="dark"] .svg-housing, html.dark .svg-housing { fill: #1e293b !important; stroke: #475569 !important; } html[data-theme="dark"] .svg-chamber-cavity, html.dark .svg-chamber-cavity { fill: #090d1a !important; stroke: #1e293b !important; } html[data-theme="dark"] .svg-label-bg, html.dark .svg-label-bg { fill: rgba(15, 23, 42, 0.88) !important; stroke: #334155 !important; } html[data-theme="dark"] .svg-label-text, html.dark .svg-label-text { fill: #f8fafc !important; } html[data-theme="dark"] #componentTank text, html.dark #componentTank text { fill: #94a3b8 !important; } /* Mechanical Scale Styling for Diaphragm Element */ html[data-theme="light"] .svg-scale-frame, html.light .svg-scale-frame, html:not(.dark):not([data-theme="dark"]) .svg-scale-frame, html[data-theme="light"] #svgScaleFrame, html.light #svgScaleFrame, html:not(.dark):not([data-theme="dark"]) #svgScaleFrame { fill: #ffffff !important; stroke: #cbd5e1 !important; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08)) !important; } html[data-theme="light"] .svg-scale-title, html.light .svg-scale-title, html:not(.dark):not([data-theme="dark"]) .svg-scale-title, html[data-theme="light"] #svgScaleTitle, html.light #svgScaleTitle, html:not(.dark):not([data-theme="dark"]) #svgScaleTitle { fill: #475569 !important; } html[data-theme="light"] .svg-scale-axis, html.light .svg-scale-axis, html:not(.dark):not([data-theme="dark"]) .svg-scale-axis, html[data-theme="light"] #svgScaleAxis, html.light #svgScaleAxis, html:not(.dark):not([data-theme="dark"]) #svgScaleAxis { stroke: #94a3b8 !important; } html[data-theme="light"] .svg-scale-tick, html.light .svg-scale-tick, html:not(.dark):not([data-theme="dark"]) .svg-scale-tick { stroke: #475569 !important; } html[data-theme="light"] .svg-scale-subtick, html.light .svg-scale-subtick, html:not(.dark):not([data-theme="dark"]) .svg-scale-subtick { stroke: #94a3b8 !important; } html[data-theme="light"] .svg-scale-tick-text, html.light .svg-scale-tick-text, html:not(.dark):not([data-theme="dark"]) .svg-scale-tick-text { fill: #0f172a !important; } html[data-theme="light"] .svg-scale-readout-bg, html.light .svg-scale-readout-bg, html:not(.dark):not([data-theme="dark"]) .svg-scale-readout-bg, html[data-theme="light"] #svgScaleReadoutBox, html.light #svgScaleReadoutBox, html:not(.dark):not([data-theme="dark"]) #svgScaleReadoutBox { fill: #f1f5f9 !important; stroke: #0284c7 !important; } html[data-theme="light"] .svg-scale-readout-text, html.light .svg-scale-readout-text, html:not(.dark):not([data-theme="dark"]) .svg-scale-readout-text, html[data-theme="light"] #svgScaleReadoutText, html.light #svgScaleReadoutText, html:not(.dark):not([data-theme="dark"]) #svgScaleReadoutText { fill: #0284c7 !important; } html[data-theme="dark"] .svg-scale-frame, html.dark .svg-scale-frame, html[data-theme="dark"] #svgScaleFrame, html.dark #svgScaleFrame { fill: #0f172a !important; stroke: #334155 !important; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5)) !important; } html[data-theme="dark"] .svg-scale-title, html.dark .svg-scale-title, html[data-theme="dark"] #svgScaleTitle, html.dark #svgScaleTitle { fill: #94a3b8 !important; } html[data-theme="dark"] .svg-scale-axis, html.dark .svg-scale-axis, html[data-theme="dark"] #svgScaleAxis, html.dark #svgScaleAxis { stroke: #64748b !important; } html[data-theme="dark"] .svg-scale-tick, html.dark .svg-scale-tick { stroke: #94a3b8 !important; } html[data-theme="dark"] .svg-scale-subtick, html.dark .svg-scale-subtick { stroke: #64748b !important; } html[data-theme="dark"] .svg-scale-tick-text, html.dark .svg-scale-tick-text { fill: #f8fafc !important; } html[data-theme="dark"] .svg-scale-readout-bg, html.dark .svg-scale-readout-bg, html[data-theme="dark"] #svgScaleReadoutBox, html.dark #svgScaleReadoutBox { fill: #1e293b !important; stroke: #38bdf8 !important; } html[data-theme="dark"] .svg-scale-readout-text, html.dark .svg-scale-readout-text, html[data-theme="dark"] #svgScaleReadoutText, html.dark #svgScaleReadoutText { fill: #38bdf8 !important; } /* Remove all background grids in schematic diagrams */ #labGrid, #labGrid path, pattern#labGrid, pattern#labGrid path { display: none !important; stroke: none !important; } /* ========================================================================== ── 9. PHYSICS SIMULATIONS UNIVERSAL THEME SYSTEM (LIGHT / DARK MODES) ── Comprehensive styling for all 17 Physics laboratory simulations ========================================================================== */ /* ── Universal Physics Viewports & Canvas Wrappers ── */ html[data-theme="light"] .canvas-wrapper, html[data-theme="light"] .sim-canvas-wrapper, html[data-theme="light"] .svg-container, html[data-theme="light"] #svgContainer, html[data-theme="light"] .tank-canvas-wrapper, html[data-theme="light"] .apparatus-container, html[data-theme="light"] #apparatus-container, html[data-theme="light"] .experiment-viewport, html[data-theme="light"] .simulation-viewport-panel, html[data-theme="light"] .circuit-canvas, html[data-theme="light"] .simulation-column, html[data-theme="light"] .stage-viewport, html[data-theme="light"] .optics-canvas, html[data-theme="light"] .doppler-canvas, html[data-theme="light"] .orbit-canvas, html[data-theme="light"] .pv-diagram-card, html[data-theme="light"] .thermo-card, html[data-theme="light"] .apparatus-card, html:not(.dark):not([data-theme="dark"]) .canvas-wrapper, html:not(.dark):not([data-theme="dark"]) .sim-canvas-wrapper, html:not(.dark):not([data-theme="dark"]) .svg-container, html:not(.dark):not([data-theme="dark"]) #svgContainer, html:not(.dark):not([data-theme="dark"]) .apparatus-container, html:not(.dark):not([data-theme="dark"]) .apparatus-card { background: #ffffff !important; background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; color: #0f172a !important; box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.08) !important; } /* ── 9.1 NEWTON'S FIRST LAW (newtons-law-1) & Shared Lab Controls ── */ html[data-theme="light"] .brand-name, html:not(.dark):not([data-theme="dark"]) .brand-name { background: linear-gradient(135deg, #0f172a 0%, #0284c7 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } html[data-theme="light"] .brand-sub, html:not(.dark):not([data-theme="dark"]) .brand-sub { color: #0284c7 !important; } html[data-theme="light"] .direction-toggle, html:not(.dark):not([data-theme="dark"]) .direction-toggle { background: #f1f5f9 !important; border: 1px solid #cbd5e1 !important; } html[data-theme="light"] .dir-btn, html:not(.dark):not([data-theme="dark"]) .dir-btn { color: #475569 !important; } html[data-theme="light"] .dir-btn:hover, html:not(.dark):not([data-theme="dark"]) .dir-btn:hover { color: #0f172a !important; background: #e2e8f0 !important; } html[data-theme="light"] .dir-btn.active, html:not(.dark):not([data-theme="dark"]) .dir-btn.active { background: #0284c7 !important; color: #ffffff !important; } html[data-theme="light"] .surface-indicator, html:not(.dark):not([data-theme="dark"]) .surface-indicator { background: #f1f5f9 !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; font-weight: 500 !important; } html[data-theme="light"] .control-value, html:not(.dark):not([data-theme="dark"]) .control-value { color: #0284c7 !important; background: #e0f2fe !important; border: 1px solid rgba(2, 132, 199, 0.2) !important; font-weight: 700 !important; } html[data-theme="light"] input[type="range"], html:not(.dark):not([data-theme="dark"]) input[type="range"] { background: #cbd5e1 !important; } html[data-theme="light"] .btn-secondary, html:not(.dark):not([data-theme="dark"]) .btn-secondary { background: #f1f5f9 !important; border: 1px solid #cbd5e1 !important; color: #0f172a !important; } html[data-theme="light"] .btn-secondary:hover, html:not(.dark):not([data-theme="dark"]) .btn-secondary:hover { background: #e2e8f0 !important; color: #0f172a !important; border-color: #94a3b8 !important; } html[data-theme="light"] .slider-marks, html:not(.dark):not([data-theme="dark"]) .slider-marks { color: #64748b !important; } html[data-theme="light"] #physicsSvg, html:not(.dark):not([data-theme="dark"]) #physicsSvg { background: #ffffff !important; } html[data-theme="light"] #physicsSvg #trackSurface, html:not(.dark):not([data-theme="dark"]) #physicsSvg #trackSurface { fill: #f1f5f9 !important; stroke: #cbd5e1 !important; } html[data-theme="light"] #physicsSvg #trackTexture, html:not(.dark):not([data-theme="dark"]) #physicsSvg #trackTexture { fill: #94a3b8 !important; } html[data-theme="light"] #physicsSvg line[y1="320"][y2="320"], html:not(.dark):not([data-theme="dark"]) #physicsSvg line[y1="320"][y2="320"] { stroke: #0284c7 !important; opacity: 0.9 !important; } html[data-theme="light"] .ruler-tick-line, html:not(.dark):not([data-theme="dark"]) .ruler-tick-line { stroke: #64748b !important; } html[data-theme="light"] .ruler-tick-line.major, html:not(.dark):not([data-theme="dark"]) .ruler-tick-line.major { stroke: #0284c7 !important; } html[data-theme="light"] .ruler-tick-label, html[data-theme="light"] #rulerTicksGroup text, html:not(.dark):not([data-theme="dark"]) .ruler-tick-label, html:not(.dark):not([data-theme="dark"]) #rulerTicksGroup text { fill: #334155 !important; font-weight: 600 !important; } /* Vector labels contrast in Light mode */ html[data-theme="light"] #lblGravity, html:not(.dark):not([data-theme="dark"]) #lblGravity { fill: #b45309 !important; font-weight: 700 !important; } html[data-theme="light"] #lblNormal, html:not(.dark):not([data-theme="dark"]) #lblNormal { fill: #1d4ed8 !important; font-weight: 700 !important; } html[data-theme="light"] #lblVelocity, html:not(.dark):not([data-theme="dark"]) #lblVelocity { fill: #047857 !important; font-weight: 700 !important; } html[data-theme="light"] #lblApplied, html:not(.dark):not([data-theme="dark"]) #lblApplied { fill: #0284c7 !important; font-weight: 700 !important; } html[data-theme="light"] #lblFriction, html:not(.dark):not([data-theme="dark"]) #lblFriction { fill: #dc2626 !important; font-weight: 700 !important; } /* Telemetry HUD Cards for Newton's 1st Law */ html[data-theme="light"] .hud-card, html:not(.dark):not([data-theme="dark"]) .hud-card { background: rgba(255, 255, 255, 0.94) !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important; } html[data-theme="light"] .hud-label, html:not(.dark):not([data-theme="dark"]) .hud-label { color: #64748b !important; font-weight: 600 !important; } html[data-theme="light"] .hud-value, html:not(.dark):not([data-theme="dark"]) .hud-value { color: #0284c7 !important; } html[data-theme="light"] .hud-value small, html:not(.dark):not([data-theme="dark"]) .hud-value small { color: #64748b !important; } html[data-theme="light"] .hud-value-badge.state-rest, html:not(.dark):not([data-theme="dark"]) .hud-value-badge.state-rest { background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #475569 !important; } /* Viewport Buttons & Command Bar */ html[data-theme="light"] .view-btn, html:not(.dark):not([data-theme="dark"]) .view-btn { background: rgba(255, 255, 255, 0.94) !important; border: 1px solid #cbd5e1 !important; color: #475569 !important; } html[data-theme="light"] .view-btn:hover, html:not(.dark):not([data-theme="dark"]) .view-btn:hover { background: #f1f5f9 !important; color: #0f172a !important; border-color: #94a3b8 !important; } html[data-theme="light"] .view-btn.active, html:not(.dark):not([data-theme="dark"]) .view-btn.active { background: #e0f2fe !important; border-color: #38bdf8 !important; color: #0284c7 !important; } html[data-theme="light"] .sim-command-bar, html:not(.dark):not([data-theme="dark"]) .sim-command-bar { background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important; } html[data-theme="light"] .simulation-time-display, html:not(.dark):not([data-theme="dark"]) .simulation-time-display { background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; } html[data-theme="light"] .time-label, html:not(.dark):not([data-theme="dark"]) .time-label { color: #64748b !important; } html[data-theme="light"] .time-value, html:not(.dark):not([data-theme="dark"]) .time-value { color: #0284c7 !important; } /* Presets & Flowchart Steps */ html[data-theme="light"] .preset-btn, html:not(.dark):not([data-theme="dark"]) .preset-btn { background: #ffffff !important; border: 1px solid #e2e8f0 !important; color: #0f172a !important; } html[data-theme="light"] .preset-btn:hover, html:not(.dark):not([data-theme="dark"]) .preset-btn:hover { background: #f0f9ff !important; border-color: #38bdf8 !important; color: #0f172a !important; } html[data-theme="light"] .preset-btn.active, html:not(.dark):not([data-theme="dark"]) .preset-btn.active { background: #e0f2fe !important; border-color: #0284c7 !important; color: #0369a1 !important; } html[data-theme="light"] .flow-step, html[data-theme="light"] .flowchart-step, html:not(.dark):not([data-theme="dark"]) .flow-step, html:not(.dark):not([data-theme="dark"]) .flowchart-step { background: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #0f172a !important; } html[data-theme="light"] .flow-step.active, html[data-theme="light"] .flowchart-step.active, html:not(.dark):not([data-theme="dark"]) .flow-step.active, html:not(.dark):not([data-theme="dark"]) .flowchart-step.active { background: #f0f9ff !important; border-color: #0284c7 !important; } html[data-theme="light"] .flow-title, html:not(.dark):not([data-theme="dark"]) .flow-title { color: #0f172a !important; } html[data-theme="light"] .flow-sub, html:not(.dark):not([data-theme="dark"]) .flow-sub { color: #64748b !important; } /* Chart Container in Newton's 1st Law */ html[data-theme="light"] .chart-card, html:not(.dark):not([data-theme="dark"]) .chart-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important; } html[data-theme="light"] #chartSvg rect, html:not(.dark):not([data-theme="dark"]) #chartSvg rect { fill: #f8fafc !important; } html[data-theme="light"] #chartSvg line, html:not(.dark):not([data-theme="dark"]) #chartSvg line { stroke: #e2e8f0 !important; } html[data-theme="light"] #chartSvg text, html:not(.dark):not([data-theme="dark"]) #chartSvg text { fill: #64748b !important; } /* ── 9.2 NEWTON'S SECOND LAW (newtons-law-2) ── */ html[data-theme="light"] #simSvg rect[fill="url(#skyGrad)"], html:not(.dark):not([data-theme="dark"]) #simSvg rect[fill="url(#skyGrad)"] { fill: #f8fafc !important; } html[data-theme="light"] #simSvg rect[fill="url(#groundGrad)"], html:not(.dark):not([data-theme="dark"]) #simSvg rect[fill="url(#groundGrad)"] { fill: #e2e8f0 !important; } html[data-theme="light"] #simSvg line[stroke="#334155"], html[data-theme="light"] #simSvg line[stroke="#475569"], html:not(.dark):not([data-theme="dark"]) #simSvg line[stroke="#334155"], html:not(.dark):not([data-theme="dark"]) #simSvg line[stroke="#475569"] { stroke: #cbd5e1 !important; } html[data-theme="light"] #simSvg text[fill="#64748b"], html[data-theme="light"] #simSvg text[fill="#94a3b8"], html:not(.dark):not([data-theme="dark"]) #simSvg text[fill="#64748b"], html:not(.dark):not([data-theme="dark"]) #simSvg text[fill="#94a3b8"] { fill: #475569 !important; } html[data-theme="light"] .telem-chip, html:not(.dark):not([data-theme="dark"]) .telem-chip { background: rgba(255, 255, 255, 0.94) !important; border: 1px solid #cbd5e1 !important; color: #0f172a !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important; } html[data-theme="light"] .telem-chip .telem-label, html:not(.dark):not([data-theme="dark"]) .telem-chip .telem-label { color: #64748b !important; } html[data-theme="light"] .formula-overlay, html:not(.dark):not([data-theme="dark"]) .formula-overlay { background: rgba(255, 255, 255, 0.96) !important; border: 1px solid #cbd5e1 !important; color: #0f172a !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important; } html[data-theme="light"] .formula-line .op, html:not(.dark):not([data-theme="dark"]) .formula-line .op { color: #64748b !important; } html[data-theme="light"] .graph-card, html:not(.dark):not([data-theme="dark"]) .graph-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; color: #0f172a !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important; } html[data-theme="light"] .graph-card .graph-title, html:not(.dark):not([data-theme="dark"]) .graph-card .graph-title { color: #475569 !important; } html[data-theme="light"] .graph-card svg path[stroke="#1e293b"], html[data-theme="light"] .graph-card svg line, html:not(.dark):not([data-theme="dark"]) .graph-card svg path[stroke="#1e293b"], html:not(.dark):not([data-theme="dark"]) .graph-card svg line { stroke: #e2e8f0 !important; } html[data-theme="light"] .graph-card svg text, html:not(.dark):not([data-theme="dark"]) .graph-card svg text { fill: #64748b !important; } html[data-theme="light"] .gravity-btn, html:not(.dark):not([data-theme="dark"]) .gravity-btn { background: #f1f5f9 !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; } html[data-theme="light"] .gravity-btn:hover, html:not(.dark):not([data-theme="dark"]) .gravity-btn:hover { background: #e2e8f0 !important; color: #0f172a !important; } html[data-theme="light"] .gravity-btn.active, html:not(.dark):not([data-theme="dark"]) .gravity-btn.active { background: #f3e8ff !important; border-color: #a855f7 !important; color: #7e22ce !important; } html[data-theme="light"] .status-bar, html:not(.dark):not([data-theme="dark"]) .status-bar { background: transparent !important; border: none !important; } html[data-theme="light"] .time-display, html:not(.dark):not([data-theme="dark"]) .time-display { background: #f1f5f9 !important; border: 1px solid #cbd5e1 !important; color: #0284c7 !important; font-weight: 700 !important; } html[data-theme="light"] .dist-tick-label, html:not(.dark):not([data-theme="dark"]) .dist-tick-label { fill: #334155 !important; font-weight: 600 !important; } html[data-theme="light"] .dist-tick-line, html:not(.dark):not([data-theme="dark"]) .dist-tick-line { stroke: #64748b !important; } html[data-theme="light"] #surfaceLabel, html:not(.dark):not([data-theme="dark"]) #surfaceLabel { fill: #334155 !important; font-weight: 600 !important; } html[data-theme="light"] .btn-sound, html:not(.dark):not([data-theme="dark"]) .btn-sound { background: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #475569 !important; } html[data-theme="light"] .btn-sound:hover, html:not(.dark):not([data-theme="dark"]) .btn-sound:hover { background: #f1f5f9 !important; color: #0284c7 !important; border-color: #0284c7 !important; } html[data-theme="light"] .btn-warning, html:not(.dark):not([data-theme="dark"]) .btn-warning { background: #fffbeb !important; border: 1px solid #fde68a !important; color: #b45309 !important; } html[data-theme="light"] .btn-warning:hover, html:not(.dark):not([data-theme="dark"]) .btn-warning:hover { background: #fef3c7 !important; color: #92400e !important; } html[data-theme="light"] .btn-export, html:not(.dark):not([data-theme="dark"]) .btn-export { background: #f0fdf4 !important; border: 1px solid #a7f3d0 !important; color: #059669 !important; } html[data-theme="light"] .btn-export:hover, html:not(.dark):not([data-theme="dark"]) .btn-export:hover { background: #d1fae5 !important; color: #047857 !important; } html[data-theme="light"] .graph-card, html:not(.dark):not([data-theme="dark"]) .graph-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important; } html[data-theme="light"] .graph-card .graph-title, html:not(.dark):not([data-theme="dark"]) .graph-card .graph-title { color: #0f172a !important; font-weight: 700 !important; } /* ── 9.3 NEWTON'S THIRD LAW (newtons-law-3) ── */ html[data-theme="light"] #simSvg rect[fill="url(#trackGradient)"], html:not(.dark):not([data-theme="dark"]) #simSvg rect[fill="url(#trackGradient)"] { fill: #e2e8f0 !important; stroke: #cbd5e1 !important; } html[data-theme="light"] #gridPattern path, html:not(.dark):not([data-theme="dark"]) #gridPattern path { stroke: rgba(0, 0, 0, 0.06) !important; } html[data-theme="light"] #rulerGroup line, html[data-theme="light"] #gridTicks line, html:not(.dark):not([data-theme="dark"]) #rulerGroup line, html:not(.dark):not([data-theme="dark"]) #gridTicks line { stroke: #94a3b8 !important; } html[data-theme="light"] #rulerGroup text, html[data-theme="light"] #gridTicks text, html:not(.dark):not([data-theme="dark"]) #rulerGroup text, html:not(.dark):not([data-theme="dark"]) #gridTicks text { fill: #475569 !important; } html[data-theme="light"] .law-banner, html:not(.dark):not([data-theme="dark"]) .law-banner { background: #ffffff !important; border: 1px solid #e2e8f0 !important; color: #0f172a !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important; } html[data-theme="light"] .banner-title, html:not(.dark):not([data-theme="dark"]) .banner-title { color: #475569 !important; } html[data-theme="light"] .f-action, html:not(.dark):not([data-theme="dark"]) .f-action { color: #0f172a !important; } html[data-theme="light"] .toggle-card, html:not(.dark):not([data-theme="dark"]) .toggle-card { background: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; } html[data-theme="light"] .toggle-card.active, html:not(.dark):not([data-theme="dark"]) .toggle-card.active { background: #f0fdf4 !important; border-color: #10b981 !important; color: #065f46 !important; } html[data-theme="light"] .speed-btn, html:not(.dark):not([data-theme="dark"]) .speed-btn { background: #f1f5f9 !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; } html[data-theme="light"] .speed-btn.active, html:not(.dark):not([data-theme="dark"]) .speed-btn.active { background: #0284c7 !important; color: #ffffff !important; border-color: #0284c7 !important; } /* ── 9.4 ARCHIMEDES' PRINCIPLE & BUOYANCY ── */ html[data-theme="light"] .app-header, html:not(.dark):not([data-theme="dark"]) .app-header { background: #ffffff !important; border: 1px solid #e2e8f0 !important; } html[data-theme="light"] .mode-btn, html:not(.dark):not([data-theme="dark"]) .mode-btn { background: #f8fafc !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; } html[data-theme="light"] .mode-btn.active, html:not(.dark):not([data-theme="dark"]) .mode-btn.active { background: #e0f2fe !important; border-color: #0284c7 !important; color: #0369a1 !important; } html[data-theme="light"] .beaker-wall, html[data-theme="light"] .tank-wall, html:not(.dark):not([data-theme="dark"]) .beaker-wall, html:not(.dark):not([data-theme="dark"]) .tank-wall { stroke: #64748b !important; } html[data-theme="light"] .ruler-tick, html[data-theme="light"] .scale-tick, html:not(.dark):not([data-theme="dark"]) .ruler-tick, html:not(.dark):not([data-theme="dark"]) .scale-tick { stroke: #64748b !important; } html[data-theme="light"] .ruler-text, html[data-theme="light"] .scale-text, html:not(.dark):not([data-theme="dark"]) .ruler-text, html:not(.dark):not([data-theme="dark"]) .scale-text { fill: #334155 !important; } html[data-theme="light"] .calc-card, html[data-theme="light"] .data-card, html[data-theme="light"] .free-body-card, html:not(.dark):not([data-theme="dark"]) .calc-card, html:not(.dark):not([data-theme="dark"]) .data-card, html:not(.dark):not([data-theme="dark"]) .free-body-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; color: #0f172a !important; } /* ── 9.5 BERNOULLI'S PRINCIPLE ── */ html[data-theme="light"] #venturi-svg > rect:first-of-type, html:not(.dark):not([data-theme="dark"]) #venturi-svg > rect:first-of-type { fill: #ffffff !important; } html[data-theme="light"] .tube-grid line, html[data-theme="light"] .apparatus-grid line, html:not(.dark):not([data-theme="dark"]) .tube-grid line, html:not(.dark):not([data-theme="dark"]) .apparatus-grid line { stroke: #e2e8f0 !important; } html[data-theme="light"] .section-label, html[data-theme="light"] .sensor-label, html[data-theme="light"] .ruler-label, html:not(.dark):not([data-theme="dark"]) .section-label, html:not(.dark):not([data-theme="dark"]) .sensor-label, html:not(.dark):not([data-theme="dark"]) .ruler-label { fill: #0f172a !important; color: #0f172a !important; } /* ── 9.6 ALL REMAINING PHYSICS EXPERIMENTS (Carnot, Conservation, Doppler, Faraday, Gravitation, Pascal, Snell, Hooke, Ohm, Kirchhoff, Thermo) ── */ html[data-theme="light"] .physics-workspace, html[data-theme="light"] .stage-viewport, html[data-theme="light"] .optics-canvas, html[data-theme="light"] .doppler-canvas, html[data-theme="light"] .orbit-canvas, html[data-theme="light"] .pv-diagram-card, html[data-theme="light"] .thermo-card, html:not(.dark):not([data-theme="dark"]) .physics-workspace, html:not(.dark):not([data-theme="dark"]) .stage-viewport, html:not(.dark):not([data-theme="dark"]) .optics-canvas, html:not(.dark):not([data-theme="dark"]) .doppler-canvas, html:not(.dark):not([data-theme="dark"]) .orbit-canvas, html:not(.dark):not([data-theme="dark"]) .pv-diagram-card, html:not(.dark):not([data-theme="dark"]) .thermo-card { background: #ffffff !important; border-color: #e2e8f0 !important; color: #0f172a !important; } html[data-theme="light"] .pv-axis, html[data-theme="light"] .grid-line, html[data-theme="light"] .track-line, html[data-theme="light"] .ramp-line, html:not(.dark):not([data-theme="dark"]) .pv-axis, html:not(.dark):not([data-theme="dark"]) .grid-line, html:not(.dark):not([data-theme="dark"]) .track-line, html:not(.dark):not([data-theme="dark"]) .ramp-line { stroke: #cbd5e1 !important; } html[data-theme="light"] .axis-label, html[data-theme="light"] .tick-label, html[data-theme="light"] .scale-label, html:not(.dark):not([data-theme="dark"]) .axis-label, html:not(.dark):not([data-theme="dark"]) .tick-label, html:not(.dark):not([data-theme="dark"]) .scale-label { fill: #475569 !important; color: #475569 !important; } html[data-theme="light"] .state-label, html[data-theme="light"] .process-label, html[data-theme="light"] .energy-label, html[data-theme="light"] .momentum-label, html:not(.dark):not([data-theme="dark"]) .state-label, html:not(.dark):not([data-theme="dark"]) .process-label, html:not(.dark):not([data-theme="dark"]) .energy-label, html:not(.dark):not([data-theme="dark"]) .momentum-label { fill: #0f172a !important; color: #0f172a !important; font-weight: 600 !important; } html[data-theme="light"] .energy-bar-bg, html[data-theme="light"] .bar-track, html:not(.dark):not([data-theme="dark"]) .energy-bar-bg, html:not(.dark):not([data-theme="dark"]) .bar-track { background: #e2e8f0 !important; } html[data-theme="light"] .wire-path, html[data-theme="light"] .circuit-wire, html[data-theme="light"] .spring-coil, html:not(.dark):not([data-theme="dark"]) .wire-path, html:not(.dark):not([data-theme="dark"]) .circuit-wire, html:not(.dark):not([data-theme="dark"]) .spring-coil { stroke: #334155 !important; } html[data-theme="light"] .meter-dial, html[data-theme="light"] .galvanometer-dial, html:not(.dark):not([data-theme="dark"]) .meter-dial, html:not(.dark):not([data-theme="dark"]) .galvanometer-dial { fill: #f8fafc !important; stroke: #cbd5e1 !important; } /* ========================================================================== Newton's Third Law Physics Simulator Theme Rules ========================================================================== */ html[data-theme="light"] .val-badge, html:not(.dark):not([data-theme="dark"]) .val-badge { background: #f1f5f9 !important; border: 1px solid #cbd5e1 !important; color: #0f172a !important; } html[data-theme="light"] .comparison-display, html[data-theme="light"] .momentum-conservation-box, html:not(.dark):not([data-theme="dark"]) .comparison-display, html:not(.dark):not([data-theme="dark"]) .momentum-conservation-box { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; } html[data-theme="light"] .comp-label, html[data-theme="light"] .mom-title, html:not(.dark):not([data-theme="dark"]) .comp-label, html:not(.dark):not([data-theme="dark"]) .mom-title { color: #64748b !important; } html[data-theme="light"] .mom-equation, html:not(.dark):not([data-theme="dark"]) .mom-equation { color: #0f172a !important; } html[data-theme="light"] .mom-bar-container, html:not(.dark):not([data-theme="dark"]) .mom-bar-container { background: #e2e8f0 !important; } html[data-theme="light"] .toggle-card, html:not(.dark):not([data-theme="dark"]) .toggle-card { background: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; } html[data-theme="light"] .toggle-card.active, html:not(.dark):not([data-theme="dark"]) .toggle-card.active { background: #e0f2fe !important; border-color: #0284c7 !important; color: #0369a1 !important; } html[data-theme="light"] .speed-btn, html:not(.dark):not([data-theme="dark"]) .speed-btn { background: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #475569 !important; } html[data-theme="light"] .speed-btn.active, html:not(.dark):not([data-theme="dark"]) .speed-btn.active { background: #0284c7 !important; color: #ffffff !important; border-color: #0284c7 !important; } html[data-theme="light"] .theory-card, html[data-theme="light"] .quiz-container, html:not(.dark):not([data-theme="dark"]) .theory-card, html:not(.dark):not([data-theme="dark"]) .quiz-container { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; color: #0f172a !important; } html[data-theme="light"] .math-callout, html:not(.dark):not([data-theme="dark"]) .math-callout { background: #f1f5f9 !important; color: #0f172a !important; border: 1px solid #e2e8f0 !important; } html[data-theme="light"] .quiz-header, html:not(.dark):not([data-theme="dark"]) .quiz-header { border-bottom: 1px solid #e2e8f0 !important; } html[data-theme="light"] .quiz-card h4, html:not(.dark):not([data-theme="dark"]) .quiz-card h4 { color: #0f172a !important; } html[data-theme="light"] .quiz-opt, html:not(.dark):not([data-theme="dark"]) .quiz-opt { background: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; } html[data-theme="light"] .quiz-opt:hover:not(:disabled), html:not(.dark):not([data-theme="dark"]) .quiz-opt:hover:not(:disabled) { background: #f1f5f9 !important; color: #0f172a !important; } html[data-theme="light"] .law-banner, html[data-theme="light"] .telemetry-card, html[data-theme="light"] .analytics-tabs-panel, html[data-theme="light"] .svg-container, html:not(.dark):not([data-theme="dark"]) .law-banner, html:not(.dark):not([data-theme="dark"]) .telemetry-card, html:not(.dark):not([data-theme="dark"]) .analytics-tabs-panel, html:not(.dark):not([data-theme="dark"]) .svg-container { background: #ffffff !important; border-color: #e2e8f0 !important; } html[data-theme="light"] .svg-container, html:not(.dark):not([data-theme="dark"]) .svg-container { background: #f8fafc !important; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.04) !important; } html[data-theme="light"] .equality-formula, html:not(.dark):not([data-theme="dark"]) .equality-formula { color: #0f172a !important; } html[data-theme="light"] .tab-btn, html:not(.dark):not([data-theme="dark"]) .tab-btn { color: #64748b !important; } html[data-theme="light"] .tab-btn:hover, html:not(.dark):not([data-theme="dark"]) .tab-btn:hover { color: #0f172a !important; background: #f1f5f9 !important; } html[data-theme="light"] .tab-btn.active, html:not(.dark):not([data-theme="dark"]) .tab-btn.active { background: #e0f2fe !important; color: #0284c7 !important; border: 1px solid rgba(2, 132, 199, 0.3) !important; } html[data-theme="light"] .tab-buttons, html:not(.dark):not([data-theme="dark"]) .tab-buttons { border-bottom: 1px solid #e2e8f0 !important; } html[data-theme="light"] #vecForceABg, html[data-theme="light"] #vecForceBBg, html:not(.dark):not([data-theme="dark"]) #vecForceABg, html:not(.dark):not([data-theme="dark"]) #vecForceBBg { fill: rgba(255, 255, 255, 0.95) !important; } html[data-theme="light"] .sensor-screen rect, html:not(.dark):not([data-theme="dark"]) .sensor-screen rect { fill: #ffffff !important; } html[data-theme="light"] #trackGroup rect, html:not(.dark):not([data-theme="dark"]) #trackGroup rect { fill: #f1f5f9 !important; stroke: #cbd5e1 !important; } html[data-theme="light"] #trackGroup line, html:not(.dark):not([data-theme="dark"]) #trackGroup line { stroke: #94a3b8 !important; } html[data-theme="light"] .ruler-tick-line, html:not(.dark):not([data-theme="dark"]) .ruler-tick-line { stroke: #64748b !important; } html[data-theme="light"] .ruler-tick-label, html:not(.dark):not([data-theme="dark"]) .ruler-tick-label { fill: #475569 !important; } html[data-theme="light"] #cartAGroup text[font-family="Outfit"], html[data-theme="light"] #cartBGroup text[font-family="Outfit"], html:not(.dark):not([data-theme="dark"]) #cartAGroup text[font-family="Outfit"], html:not(.dark):not([data-theme="dark"]) #cartBGroup text[font-family="Outfit"] { fill: #0f172a !important; } html[data-theme="light"] .styled-select, html:not(.dark):not([data-theme="dark"]) .styled-select { background: #ffffff !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important; } html[data-theme="light"] .btn-icon, html:not(.dark):not([data-theme="dark"]) .btn-icon { background: #ffffff !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important; } html[data-theme="light"] .header-brand h1, html:not(.dark):not([data-theme="dark"]) .header-brand h1 { background: linear-gradient(90deg, #0f172a, #0284c7) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } html[data-theme="light"] #svgCartAMassText, html:not(.dark):not([data-theme="dark"]) #svgCartAMassText { fill: #0369a1 !important; } html[data-theme="light"] #svgCartBMassText, html:not(.dark):not([data-theme="dark"]) #svgCartBMassText { fill: #be123c !important; } /* ========================================================================== Law of Universal Gravitation Virtual Laboratory Theme Rules ========================================================================== */ html[data-theme="light"] #spaceGrid path, html:not(.dark):not([data-theme="dark"]) #spaceGrid path { stroke: #e2e8f0 !important; } html[data-theme="light"] #spaceGrid circle, html:not(.dark):not([data-theme="dark"]) #spaceGrid circle { fill: #cbd5e1 !important; } html[data-theme="light"] #dimBadge rect, html:not(.dark):not([data-theme="dark"]) #dimBadge rect { fill: #ffffff !important; stroke: #0284c7 !important; } html[data-theme="light"] #dimText, html:not(.dark):not([data-theme="dark"]) #dimText { fill: #0284c7 !important; } html[data-theme="light"] #mass1Group rect, html:not(.dark):not([data-theme="dark"]) #mass1Group rect { fill: #ffffff !important; stroke: #2563eb !important; } html[data-theme="light"] #mass1Label, html:not(.dark):not([data-theme="dark"]) #mass1Label { fill: #1d4ed8 !important; } html[data-theme="light"] #mass2Group rect, html:not(.dark):not([data-theme="dark"]) #mass2Group rect { fill: #ffffff !important; stroke: #d97706 !important; } html[data-theme="light"] #mass2Label, html:not(.dark):not([data-theme="dark"]) #mass2Label { fill: #b45309 !important; } html[data-theme="light"] #labelF12Bg, html[data-theme="light"] #labelF21Bg, html:not(.dark):not([data-theme="dark"]) #labelF12Bg, html:not(.dark):not([data-theme="dark"]) #labelF21Bg { fill: #ffffff !important; stroke: #ef4444 !important; } html[data-theme="light"] #labelF12, html[data-theme="light"] #labelF21, html:not(.dark):not([data-theme="dark"]) #labelF12, html:not(.dark):not([data-theme="dark"]) #labelF21 { fill: #b91c1c !important; } html[data-theme="light"] .metric-box, html:not(.dark):not([data-theme="dark"]) .metric-box { background-color: #f8fafc !important; border: 1px solid #e2e8f0 !important; } html[data-theme="light"] .metric-value, html:not(.dark):not([data-theme="dark"]) .metric-value { color: #0f172a !important; } html[data-theme="light"] .box-m1 .metric-value, html:not(.dark):not([data-theme="dark"]) .box-m1 .metric-value { color: #1d4ed8 !important; } html[data-theme="light"] .box-m2 .metric-value, html:not(.dark):not([data-theme="dark"]) .box-m2 .metric-value { color: #b45309 !important; } html[data-theme="light"] .box-dist .metric-value, html:not(.dark):not([data-theme="dark"]) .box-dist .metric-value { color: #0284c7 !important; } html[data-theme="light"] .highlight-force, html:not(.dark):not([data-theme="dark"]) .highlight-force { background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(254, 242, 242, 0.95) 100%) !important; border-color: rgba(239, 68, 68, 0.3) !important; } html[data-theme="light"] .highlight-force .metric-value, html:not(.dark):not([data-theme="dark"]) .highlight-force .metric-value { color: #dc2626 !important; } html[data-theme="light"] .force-subtext, html:not(.dark):not([data-theme="dark"]) .force-subtext { color: #64748b !important; } html[data-theme="light"] .input-with-unit, html:not(.dark):not([data-theme="dark"]) .input-with-unit { background-color: #ffffff !important; border: 1px solid #cbd5e1 !important; } html[data-theme="light"] .input-with-unit input, html:not(.dark):not([data-theme="dark"]) .input-with-unit input { color: #0f172a !important; } html[data-theme="light"] .mode-selector:has(.btn-mode), html[data-theme="light"] .mode-selector:has(.mode-btn), html:not(.dark):not([data-theme="dark"]) .mode-selector:has(.btn-mode), html:not(.dark):not([data-theme="dark"]) .mode-selector:has(.mode-btn) { background-color: #f1f5f9 !important; border: 1px solid #cbd5e1 !important; } .mode-selector, html[data-theme="light"] .mode-selector:has(select), html:not(.dark):not([data-theme="dark"]) .mode-selector:has(select), html[data-theme="dark"] .mode-selector:has(select), html.dark .mode-selector:has(select) { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } html[data-theme="light"] .btn-mode, html:not(.dark):not([data-theme="dark"]) .btn-mode { color: #475569 !important; } html[data-theme="light"] .btn-mode.active, html:not(.dark):not([data-theme="dark"]) .btn-mode.active { background-color: #2563eb !important; color: #ffffff !important; } html[data-theme="light"] .btn-reset, html:not(.dark):not([data-theme="dark"]) .btn-reset { background-color: #fef2f2 !important; color: #dc2626 !important; border: 1px solid #fca5a5 !important; } html[data-theme="light"] .canvas-wrapper, html:not(.dark):not([data-theme="dark"]) .canvas-wrapper { background: #f8fafc !important; } html[data-theme="light"] #graphCanvas, html:not(.dark):not([data-theme="dark"]) #graphCanvas { background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; } html[data-theme="light"] .graph-legend, html:not(.dark):not([data-theme="dark"]) .graph-legend { background-color: #f8fafc !important; border-top: 1px solid #e2e8f0 !important; } html[data-theme="light"] .lab-header, html:not(.dark):not([data-theme="dark"]) .lab-header { background-color: #ffffff !important; border-bottom: 1px solid #e2e8f0 !important; } html[data-theme="light"] .sim-card, html[data-theme="light"] .card, html:not(.dark):not([data-theme="dark"]) .sim-card, html:not(.dark):not([data-theme="dark"]) .card { background-color: #ffffff !important; border-color: #e2e8f0 !important; } html[data-theme="light"] .header-title h1, html:not(.dark):not([data-theme="dark"]) .header-title h1 { color: #0f172a !important; } html[data-theme="light"] .mode-btn, html:not(.dark):not([data-theme="dark"]) .mode-btn { background-color: transparent !important; color: #475569 !important; } html[data-theme="light"] .mode-btn.active, html:not(.dark):not([data-theme="dark"]) .mode-btn.active { background-color: #2563eb !important; color: #ffffff !important; } html[data-theme="light"] .lab-badge, html:not(.dark):not([data-theme="dark"]) .lab-badge { background: rgba(37, 99, 235, 0.1) !important; color: #1d4ed8 !important; border-color: rgba(37, 99, 235, 0.3) !important; } html[data-theme="light"] .lab-subtitle, html:not(.dark):not([data-theme="dark"]) .lab-subtitle { color: #64748b !important; } /* ========================================================================== Conservation of Linear Momentum Simulator Theme Rules ========================================================================== */ html[data-theme="light"] .graph-container, html:not(.dark):not([data-theme="dark"]) .graph-container { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; } html[data-theme="light"] .graph-legend, html:not(.dark):not([data-theme="dark"]) .graph-legend { background: rgba(255, 255, 255, 0.92) !important; border: 1px solid #cbd5e1 !important; } html[data-theme="light"] .legend-item, html:not(.dark):not([data-theme="dark"]) .legend-item { color: #334155 !important; } html[data-theme="light"] .preset-btn, html[data-theme="light"] .preset-chip, html:not(.dark):not([data-theme="dark"]) .preset-btn, html:not(.dark):not([data-theme="dark"]) .preset-chip { background-color: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; } html[data-theme="light"] .preset-btn:hover, html[data-theme="light"] .preset-chip:hover, html:not(.dark):not([data-theme="dark"]) .preset-btn:hover, html:not(.dark):not([data-theme="dark"]) .preset-chip:hover { background-color: #f1f5f9 !important; color: #0f172a !important; } html[data-theme="light"] .sim-controls-bar, html:not(.dark):not([data-theme="dark"]) .sim-controls-bar { background-color: #f8fafc !important; border: 1px solid #e2e8f0 !important; } html[data-theme="light"] .diag-block, html[data-theme="light"] .momentum-bar-section, html[data-theme="light"] .theory-block, html:not(.dark):not([data-theme="dark"]) .diag-block, html:not(.dark):not([data-theme="dark"]) .momentum-bar-section, html:not(.dark):not([data-theme="dark"]) .theory-block { background-color: #f8fafc !important; border: 1px solid #e2e8f0 !important; } html[data-theme="light"] .obs-table th, html:not(.dark):not([data-theme="dark"]) .obs-table th { background-color: #f1f5f9 !important; color: #0f172a !important; border-bottom: 2px solid #e2e8f0 !important; } html[data-theme="light"] .obs-table td, html:not(.dark):not([data-theme="dark"]) .obs-table td { border-bottom: 1px solid #e2e8f0 !important; color: #1e293b !important; } html[data-theme="light"] .obs-table tbody tr:nth-child(even), html:not(.dark):not([data-theme="dark"]) .obs-table tbody tr:nth-child(even) { background-color: #f8fafc !important; } /* ========================================================================== Hooke's Law & Elasticity Virtual Laboratory Theme Rules ========================================================================== */ html[data-theme="dark"] #rulerGroup rect, html.dark #rulerGroup rect { fill: #1e293b !important; stroke: #334155 !important; } html[data-theme="dark"] .ruler-title, html.dark .ruler-title { fill: #94a3b8 !important; } html[data-theme="dark"] #origLengthLabel, html.dark #origLengthLabel { fill: #94a3b8 !important; } html[data-theme="dark"] #extLabelBg, html.dark #extLabelBg { fill: #1e293b !important; stroke: #f87171 !important; } html[data-theme="dark"] .canvas-container, html.dark .canvas-container { background-color: #0f172a !important; border-color: #1e293b !important; } html[data-theme="dark"] #graphCanvas, html.dark #graphCanvas { background-color: #0f172a !important; } html[data-theme="dark"] .svg-container, html.dark .svg-container { background-color: #0b1120 !important; border-color: #1e293b !important; } html[data-theme="dark"] #grid path, html.dark #grid path { stroke: #1e293b !important; } html[data-theme="dark"] .metric-box, html.dark .metric-box { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .metric-box.highlight-ext, html.dark .metric-box.highlight-ext { background-color: rgba(37, 99, 235, 0.2) !important; border-color: #3b82f6 !important; } html[data-theme="dark"] .metric-value, html.dark .metric-value { color: #f8fafc !important; } html[data-theme="dark"] .number-input-wrap, html.dark .number-input-wrap { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .number-input-wrap input, html.dark .number-input-wrap input { color: #f8fafc !important; } html[data-theme="dark"] .theory-block, html.dark .theory-block { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .theory-block h3, html.dark .theory-block h3 { color: #f8fafc !important; } html[data-theme="dark"] .theory-block p, html[data-theme="dark"] .theory-block li, html.dark .theory-block p, html.dark .theory-block li { color: #94a3b8 !important; } /* Light mode explicit styling */ html[data-theme="light"] #rulerGroup rect, html:not(.dark):not([data-theme="dark"]) #rulerGroup rect { fill: #f8fafc !important; stroke: #cbd5e1 !important; } html[data-theme="light"] .ruler-title, html:not(.dark):not([data-theme="dark"]) .ruler-title { fill: #475569 !important; } html[data-theme="light"] #extLabelBg, html:not(.dark):not([data-theme="dark"]) #extLabelBg { fill: #ffffff !important; stroke: #ef4444 !important; } html[data-theme="light"] .canvas-container, html:not(.dark):not([data-theme="dark"]) .canvas-container { background-color: #ffffff !important; border-color: #e2e8f0 !important; } html[data-theme="light"] #graphCanvas, html:not(.dark):not([data-theme="dark"]) #graphCanvas { background-color: #ffffff !important; } html[data-theme="light"] .svg-container, html:not(.dark):not([data-theme="dark"]) .svg-container { background-color: #fafafa !important; border-color: #cbd5e1 !important; } /* ========================================================================== Archimedes' Principle Simulator Theme Rules ========================================================================== */ html[data-theme="light"] .sim-viewport-wrapper, html:not(.dark):not([data-theme="dark"]) .sim-viewport-wrapper { background: #f8fafc !important; border-bottom: 1px solid #e2e8f0 !important; } html[data-theme="light"] .canvas-legend, html:not(.dark):not([data-theme="dark"]) .canvas-legend { background: rgba(255, 255, 255, 0.92) !important; border: 1px solid #cbd5e1 !important; } html[data-theme="light"] .canvas-legend .legend-item, html:not(.dark):not([data-theme="dark"]) .canvas-legend .legend-item { color: #334155 !important; } html[data-theme="light"] .icon-toggle, html:not(.dark):not([data-theme="dark"]) .icon-toggle { background: rgba(255, 255, 255, 0.92) !important; border-color: #cbd5e1 !important; color: #475569 !important; } html[data-theme="light"] .icon-toggle:hover, html:not(.dark):not([data-theme="dark"]) .icon-toggle:hover { background: #ffffff !important; color: #0f172a !important; border-color: #94a3b8 !important; } html[data-theme="light"] .icon-toggle.active, html:not(.dark):not([data-theme="dark"]) .icon-toggle.active { background: rgba(37, 99, 235, 0.15) !important; border-color: #2563eb !important; color: #1d4ed8 !important; } html[data-theme="light"] .density-calc-banner, html:not(.dark):not([data-theme="dark"]) .density-calc-banner { background: #f1f5f9 !important; border: 1px dashed #93c5fd !important; color: #334155 !important; } html[data-theme="light"] .density-calc-banner strong, html:not(.dark):not([data-theme="dark"]) .density-calc-banner strong { color: #0284c7 !important; } html[data-theme="light"] .ratio-float, html:not(.dark):not([data-theme="dark"]) .ratio-float { background: #dcfce7 !important; color: #15803d !important; } html[data-theme="light"] .ratio-sink, html:not(.dark):not([data-theme="dark"]) .ratio-sink { background: #fee2e2 !important; color: #b91c1c !important; } html[data-theme="light"] .ratio-suspend, html:not(.dark):not([data-theme="dark"]) .ratio-suspend { background: #e0f2fe !important; color: #0369a1 !important; } html[data-theme="light"] .verification-card, html:not(.dark):not([data-theme="dark"]) .verification-card { background: #f8fafc !important; border-top: 1px solid #e2e8f0 !important; } html[data-theme="light"] .force-bar-header, html:not(.dark):not([data-theme="dark"]) .force-bar-header { color: #475569 !important; } html[data-theme="light"] .force-bar-track, html:not(.dark):not([data-theme="dark"]) .force-bar-track { background: #e2e8f0 !important; border: 1px solid #cbd5e1 !important; } html[data-theme="light"] .verification-status.unverified, html:not(.dark):not([data-theme="dark"]) .verification-status.unverified { background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #475569 !important; } html[data-theme="light"] .verification-status.verified, html:not(.dark):not([data-theme="dark"]) .verification-status.verified { background: #dcfce7 !important; border-color: #16a34a !important; color: #15803d !important; } html[data-theme="light"] .verification-status.unbalanced, html:not(.dark):not([data-theme="dark"]) .verification-status.unbalanced { background: #fee2e2 !important; border-color: #dc2626 !important; color: #b91c1c !important; } html[data-theme="light"] .action-bar, html:not(.dark):not([data-theme="dark"]) .action-bar { background: #ffffff !important; border-bottom: 1px solid #e2e8f0 !important; } html[data-theme="light"] .btn-secondary, html:not(.dark):not([data-theme="dark"]) .btn-secondary { background: #f1f5f9 !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; } html[data-theme="light"] .btn-secondary:hover, html:not(.dark):not([data-theme="dark"]) .btn-secondary:hover { background: #e2e8f0 !important; color: #0f172a !important; } html[data-theme="light"] .mode-buttons, html:not(.dark):not([data-theme="dark"]) .mode-buttons { background: #f1f5f9 !important; border: 1px solid #cbd5e1 !important; } html[data-theme="light"] .preset-chip, html:not(.dark):not([data-theme="dark"]) .preset-chip { background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #475569 !important; } html[data-theme="light"] .preset-chip.active, html:not(.dark):not([data-theme="dark"]) .preset-chip.active { background: #2563eb !important; color: #ffffff !important; border-color: #2563eb !important; } html[data-theme="light"] .number-input-wrap, html:not(.dark):not([data-theme="dark"]) .number-input-wrap { background: #f8fafc !important; border-color: #cbd5e1 !important; } html[data-theme="light"] .number-input-wrap input[type="number"], html:not(.dark):not([data-theme="dark"]) .number-input-wrap input[type="number"] { color: #0f172a !important; } html[data-theme="light"] .form-select, html:not(.dark):not([data-theme="dark"]) .form-select { background: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; } html[data-theme="light"] .control-header label, html:not(.dark):not([data-theme="dark"]) .control-header label { color: #334155 !important; } html[data-theme="light"] .preset-group label, html:not(.dark):not([data-theme="dark"]) .preset-group label { color: #334155 !important; } html[data-theme="light"] .card-header h3, html[data-theme="light"] .sim-title h2, html:not(.dark):not([data-theme="dark"]) .card-header h3, html:not(.dark):not([data-theme="dark"]) .sim-title h2 { color: #0f172a !important; } html[data-theme="light"] .header-titles h1, html:not(.dark):not([data-theme="dark"]) .header-titles h1 { color: #0f172a !important; } /* ========================================================================== Pascal's Principle Simulator Theme Rules ========================================================================== */ html[data-theme="light"] .canvas-container#canvas-container, html[data-theme="light"] .viewport-section .canvas-container, html:not(.dark):not([data-theme="dark"]) .canvas-container#canvas-container, html:not(.dark):not([data-theme="dark"]) .viewport-section .canvas-container { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; } html[data-theme="light"] #canvas-status-badge, html:not(.dark):not([data-theme="dark"]) #canvas-status-badge { background: rgba(255, 255, 255, 0.92) !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; } html[data-theme="light"] .pressure-gauge-card, html:not(.dark):not([data-theme="dark"]) .pressure-gauge-card { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; } html[data-theme="light"] .gauge-title, html:not(.dark):not([data-theme="dark"]) .gauge-title { color: #475569 !important; } html[data-theme="light"] .gauge-val, html:not(.dark):not([data-theme="dark"]) .gauge-val { color: #0284c7 !important; } html[data-theme="light"] .gauge-bar-track, html:not(.dark):not([data-theme="dark"]) .gauge-bar-track { background: #e2e8f0 !important; border: 1px solid #cbd5e1 !important; } html[data-theme="light"] .gauge-ticks, html:not(.dark):not([data-theme="dark"]) .gauge-ticks { color: #64748b !important; } html[data-theme="light"] .control-group, html:not(.dark):not([data-theme="dark"]) .control-group { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; } html[data-theme="light"] .control-group.highlight, html:not(.dark):not([data-theme="dark"]) .control-group.highlight { background: rgba(239, 68, 68, 0.06) !important; border-color: rgba(239, 68, 68, 0.25) !important; } html[data-theme="light"] .input-with-unit, html:not(.dark):not([data-theme="dark"]) .input-with-unit { background: #ffffff !important; border: 1px solid #cbd5e1 !important; } html[data-theme="light"] .input-with-unit input, html:not(.dark):not([data-theme="dark"]) .input-with-unit input { color: #0f172a !important; } html[data-theme="light"] .range-bounds, html:not(.dark):not([data-theme="dark"]) .range-bounds { color: #64748b !important; } html[data-theme="light"] .btn-preset, html:not(.dark):not([data-theme="dark"]) .btn-preset { background: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; } html[data-theme="light"] .btn-preset:hover, html:not(.dark):not([data-theme="dark"]) .btn-preset:hover { background: #f1f5f9 !important; color: #0f172a !important; } html[data-theme="light"] .btn-preset.active, html:not(.dark):not([data-theme="dark"]) .btn-preset.active { background: rgba(6, 182, 212, 0.12) !important; border-color: #0284c7 !important; color: #0369a1 !important; } html[data-theme="light"] .flow-step, html:not(.dark):not([data-theme="dark"]) .flow-step { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; } html[data-theme="light"] .flow-step .step-title, html:not(.dark):not([data-theme="dark"]) .flow-step .step-title { color: #64748b !important; } html[data-theme="light"] .flow-step .step-val, html:not(.dark):not([data-theme="dark"]) .flow-step .step-val { color: #0f172a !important; } html[data-theme="light"] .flow-step.highlight-fluid, html:not(.dark):not([data-theme="dark"]) .flow-step.highlight-fluid { background: rgba(6, 182, 212, 0.1) !important; border-color: rgba(6, 182, 212, 0.35) !important; } html[data-theme="light"] .flow-step.highlight-output, html:not(.dark):not([data-theme="dark"]) .flow-step.highlight-output { background: rgba(16, 185, 129, 0.1) !important; border-color: rgba(16, 185, 129, 0.35) !important; } html[data-theme="light"] .flow-arrow, html:not(.dark):not([data-theme="dark"]) .flow-arrow { color: #94a3b8 !important; } html[data-theme="light"] .area-bar-item, html:not(.dark):not([data-theme="dark"]) .area-bar-item { color: #334155 !important; } html[data-theme="light"] .bar-track, html:not(.dark):not([data-theme="dark"]) .bar-track { background: #e2e8f0 !important; border: 1px solid #cbd5e1 !important; } html[data-theme="light"] .dash-card, html:not(.dark):not([data-theme="dark"]) .dash-card { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; } html[data-theme="light"] .dash-title, html:not(.dark):not([data-theme="dark"]) .dash-title { color: #64748b !important; } html[data-theme="light"] .dash-value, html:not(.dark):not([data-theme="dark"]) .dash-value { color: #0f172a !important; } html[data-theme="light"] .dash-sub, html:not(.dark):not([data-theme="dark"]) .dash-sub { color: #94a3b8 !important; } html[data-theme="light"] .verif-item, html:not(.dark):not([data-theme="dark"]) .verif-item { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; } html[data-theme="light"] .verif-label, html:not(.dark):not([data-theme="dark"]) .verif-label { color: #64748b !important; } html[data-theme="light"] .verif-val, html:not(.dark):not([data-theme="dark"]) .verif-val { color: #0f172a !important; } html[data-theme="light"] .verif-formula, html:not(.dark):not([data-theme="dark"]) .verif-formula { color: #94a3b8 !important; } html[data-theme="light"] .verif-equals, html:not(.dark):not([data-theme="dark"]) .verif-equals { color: #64748b !important; } html[data-theme="light"] .mode-selector label, html:not(.dark):not([data-theme="dark"]) .mode-selector label { color: #334155 !important; } html[data-theme="light"] .mode-selector select, html:not(.dark):not([data-theme="dark"]) .mode-selector select { background: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; } html[data-theme="light"] .header-brand h1, html:not(.dark):not([data-theme="dark"]) .header-brand h1 { color: #0f172a !important; } html[data-theme="light"] .header-brand h1 span, html:not(.dark):not([data-theme="dark"]) .header-brand h1 span { color: #64748b !important; } /* ── 16. THERMODYNAMICS - ZEROTH LAW LIGHT THEME OVERRIDES ───────────────── */ html[data-theme="light"] .experiment-viz-container, html:not(.dark):not([data-theme="dark"]) .experiment-viz-container { background: #f8fafc !important; border-color: #e2e8f0 !important; box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.02) !important; } html[data-theme="light"] .graph-container, html:not(.dark):not([data-theme="dark"]) .graph-container { background: #f8fafc !important; border-color: #e2e8f0 !important; } html[data-theme="light"] .svg-grid-lines line, html:not(.dark):not([data-theme="dark"]) .svg-grid-lines line { stroke: #cbd5e1 !important; opacity: 0.6 !important; } html[data-theme="light"] .tank-shell-a, html:not(.dark):not([data-theme="dark"]) .tank-shell-a { stroke: #ef4444 !important; } html[data-theme="light"] .tank-bg-a, html:not(.dark):not([data-theme="dark"]) .tank-bg-a { opacity: 0.12 !important; } html[data-theme="light"] .svg-label-a, html:not(.dark):not([data-theme="dark"]) .svg-label-a { fill: #dc2626 !important; } html[data-theme="light"] .svg-temp-a, html:not(.dark):not([data-theme="dark"]) .svg-temp-a { fill: #b91c1c !important; } html[data-theme="light"] .tank-shell-b, html:not(.dark):not([data-theme="dark"]) .tank-shell-b { stroke: #3b82f6 !important; } html[data-theme="light"] .tank-bg-b, html:not(.dark):not([data-theme="dark"]) .tank-bg-b { opacity: 0.12 !important; } html[data-theme="light"] .svg-label-b, html:not(.dark):not([data-theme="dark"]) .svg-label-b { fill: #2563eb !important; } html[data-theme="light"] .svg-temp-b, html:not(.dark):not([data-theme="dark"]) .svg-temp-b { fill: #1d4ed8 !important; } html[data-theme="light"] .svg-label-c, html:not(.dark):not([data-theme="dark"]) .svg-label-c { fill: #0284c7 !important; } html[data-theme="light"] .therm-body, html:not(.dark):not([data-theme="dark"]) .therm-body { fill: #e2e8f0 !important; stroke: #cbd5e1 !important; } html[data-theme="light"] .therm-scale text, html:not(.dark):not([data-theme="dark"]) .therm-scale text { fill: #475569 !important; } html[data-theme="light"] .therm-scale line, html:not(.dark):not([data-theme="dark"]) .therm-scale line { stroke: #94a3b8 !important; } html[data-theme="light"] .therm-readout-bg, html:not(.dark):not([data-theme="dark"]) .therm-readout-bg { fill: #ffffff !important; stroke: #cbd5e1 !important; } html[data-theme="light"] .therm-readout-text, html:not(.dark):not([data-theme="dark"]) .therm-readout-text { fill: #e11d48 !important; } html[data-theme="light"] .bridge-rect, html:not(.dark):not([data-theme="dark"]) .bridge-rect { fill: rgba(2, 132, 199, 0.05) !important; stroke: #0284c7 !important; } html[data-theme="light"] .bridge-text, html:not(.dark):not([data-theme="dark"]) .bridge-text { fill: #0284c7 !important; } html[data-theme="light"] .zeroth-arrow-line, html:not(.dark):not([data-theme="dark"]) .zeroth-arrow-line { stroke: #0284c7 !important; } html[data-theme="light"] .zeroth-arrow-poly, html:not(.dark):not([data-theme="dark"]) .zeroth-arrow-poly { fill: #0284c7 !important; } html[data-theme="light"] .zeroth-arrow-text, html:not(.dark):not([data-theme="dark"]) .zeroth-arrow-text { fill: #0284c7 !important; } html[data-theme="light"] .zeroth-stmt-bg, html:not(.dark):not([data-theme="dark"]) .zeroth-stmt-bg { fill: rgba(22, 163, 74, 0.1) !important; stroke: #16a34a !important; } html[data-theme="light"] .zeroth-stmt-text, html:not(.dark):not([data-theme="dark"]) .zeroth-stmt-text { fill: #15803d !important; } html[data-theme="light"] .schematic-footnote, html:not(.dark):not([data-theme="dark"]) .schematic-footnote { background: #f1f5f9 !important; color: #334155 !important; border-left-color: #0284c7 !important; } /* Bernoulli's Principle Light Theme Support */ html[data-theme="light"] .apparatus-card, html:not(.dark):not([data-theme="dark"]) .apparatus-card { background: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(15, 23, 42, 0.03) !important; } html[data-theme="light"] .canvas-container, html:not(.dark):not([data-theme="dark"]) .canvas-container { background: #ffffff !important; border-color: #e2e8f0 !important; } html[data-theme="light"] .canvas-graph-wrap, html:not(.dark):not([data-theme="dark"]) .canvas-graph-wrap { background: #f8fafc !important; border-color: #e2e8f0 !important; } html[data-theme="light"] .gauge-bg, html:not(.dark):not([data-theme="dark"]) .gauge-bg { fill: #f1f5f9 !important; stroke: #cbd5e1 !important; } html[data-theme="light"] .bar-bg, html:not(.dark):not([data-theme="dark"]) .bar-bg, html[data-theme="light"] .stack-bar, html:not(.dark):not([data-theme="dark"]) .stack-bar { background: #e2e8f0 !important; border-color: #cbd5e1 !important; } /* ── Universal Fix for Digital Electronics Logic Gates Live Display & Boolean Expressions ── */ .live-cell { background: var(--surface, #ffffff) !important; border: 1px solid var(--panel-border, #cbd5e1) !important; } html[data-theme="light"] .live-cell, html:not(.dark):not([data-theme="dark"]) .live-cell { background: #ffffff !important; border-color: #cbd5e1 !important; } html[data-theme="dark"] .live-cell, html.dark .live-cell { background: #0f172a !important; border-color: #263550 !important; } html[data-theme="light"] .live-cell__label, html:not(.dark):not([data-theme="dark"]) .live-cell__label { color: #475569 !important; } html[data-theme="dark"] .live-cell__label, html.dark .live-cell__label { color: #94a3b8 !important; } html[data-theme="light"] .live-cell__value, html:not(.dark):not([data-theme="dark"]) .live-cell__value { color: #0f172a !important; } html[data-theme="dark"] .live-cell__value, html.dark .live-cell__value { color: #f8fafc !important; } html[data-theme="light"] .live-cell__value.high, html:not(.dark):not([data-theme="dark"]) .live-cell__value.high, html[data-theme="dark"] .live-cell__value.high, html.dark .live-cell__value.high { color: #16a34a !important; } html[data-theme="light"] .live-cell__value.low, html:not(.dark):not([data-theme="dark"]) .live-cell__value.low { color: #dc2626 !important; } html[data-theme="dark"] .live-cell__value.low, html.dark .live-cell__value.low { color: #f43f5e !important; } .bool-expr { background: var(--surface, #ffffff) !important; border: 1px solid var(--panel-border, #cbd5e1) !important; } html[data-theme="light"] .bool-expr, html:not(.dark):not([data-theme="dark"]) .bool-expr { background: #ffffff !important; border-color: #cbd5e1 !important; } html[data-theme="dark"] .bool-expr, html.dark .bool-expr { background: #0f172a !important; border-color: #263550 !important; } .bool-expr__formula { font-family: var(--font-mono) !important; font-size: 1.25rem !important; font-weight: 700 !important; } html[data-theme="light"] .bool-expr__formula, html:not(.dark):not([data-theme="dark"]) .bool-expr__formula { color: #0284c7 !important; } html[data-theme="dark"] .bool-expr__formula, html.dark .bool-expr__formula { color: #38bdf8 !important; } html[data-theme="light"] .bool-expr__calc, html:not(.dark):not([data-theme="dark"]) .bool-expr__calc { color: #334155 !important; } html[data-theme="dark"] .bool-expr__calc, html.dark .bool-expr__calc { color: #94a3b8 !important; } html[data-theme="light"] .logic-state, html:not(.dark):not([data-theme="dark"]) .logic-state { border-color: #e2e8f0 !important; }