/* ── Dark mode overrides (applied when ) ── */ body.dark { --color-bg: #18181b; --color-border: #3f3f46; --color-header: #1d4ed8; background: #18181b; color: #e4e4e7; } /* Subtitle section panel */ body.dark .subtitle-section { background: #1c1c1e; } body.dark .subtitle-header { background: var(--color-header); } body.dark .subtitle-list { scrollbar-color: #52525b #27272a; } /* Rows */ body.dark .subtitle-item { border-bottom-color: #3f3f46; } body.dark .subtitle-item:hover { background: #27272a; } /* Active row — redefine pulse for dark bg */ @keyframes pulse-dark { 0% { background: #1e3a5f; } 100% { background: #163260; } } body.dark .subtitle-item.active { background: #1e3a5f; border-left-color: #60a5fa; animation-name: pulse-dark; } /* In-row search highlight */ body.dark .subtitle-item.search-match { background: #3d3200; } body.dark .subtitle-item.search-match:hover { background: #4a3d00; } body.dark .search-hl { background: #2e2800; color: #d4a017; border-color: #d4a017; } /* CPS badge */ body.dark .cps-ok { background: #065f46; color: #a7f3d0; } body.dark .cps-warn { background: #78350f; color: #fde68a; } body.dark .cps-bad { background: #7f1d1d; color: #fca5a5; } /* Conflict warning */ body.dark .subtitle-item.has-conflict { background: #3b1515; } body.dark .subtitle-item.has-conflict .subtitle-time { color: #f87171; } /* Time column */ body.dark .subtitle-time { color: #a1a1aa; } body.dark .time-field:hover { color: #60a5fa; border-bottom-color: #60a5fa; } /* Inline time edit */ body.dark .time-edit-input { background: #27272a; color: #e4e4e7; border-color: #60a5fa; } body.dark .time-now-btn { border-color: #52525b; color: #a1a1aa; background: #27272a; } body.dark .time-now-btn:hover { background: #2563eb; border-color: #2563eb; color: #fff; } /* Textarea */ body.dark .subtitle-text textarea { color: #e4e4e7; } /* Row action buttons */ body.dark .ins-btn:hover { background: #14532d; } body.dark .split-btn:hover { background: #1e3a5f; } body.dark .del-btn:hover { background: #3b1515; } /* Global buttons */ body.dark .btn-secondary { background: #3f3f46; color: #e4e4e7; } body.dark .btn-secondary:hover { background: #52525b; } body.dark .btn-icon:disabled { opacity: .3; } /* Shift bar */ body.dark .shift-bar { background: #1e3350; border-bottom-color: #2563eb; } body.dark .shift-label { color: #93c5fd; } body.dark .shift-bar input[type=number] { background: #27272a; color: #e4e4e7; border-color: #52525b; } /* Find / Replace modal */ body.dark #findReplaceModal { background: #27272a; color: #e4e4e7; } body.dark .fr-row input[type=text], body.dark #replaceInput { background: #3f3f46; color: #e4e4e7; border-color: #52525b; } body.dark .fr-row .clear-btn { color: #a1a1aa; } body.dark .fr-row select { background: #3f3f46; color: #e4e4e7; border-color: #52525b; } body.dark .fr-results-container { border-color: #3f3f46; } body.dark .fr-table thead { background: #3f3f46; } body.dark .fr-table th { color: #a1a1aa; } body.dark .fr-table th, body.dark .fr-table td { border-bottom-color: #3f3f46; } body.dark .fr-footer .total { color: #a1a1aa; } /* Timeline modal */ body.dark #timelineModal { background: #27272a; color: #e4e4e7; } body.dark .tm-header { background: #1d4ed8; color: #fff; border-bottom-color: #3f3f46; } body.dark .tm-info { color: #a1a1aa; } body.dark .tm-arrow { color: #71717a; } body.dark .tm-dur { color: #71717a; } body.dark .tm-bar { background: #3f3f46; border-color: #52525b; } body.dark .tm-active-band { background: rgba(96, 165, 250, .25); border-color: #60a5fa; } body.dark .tm-window-labels { color: #71717a; } body.dark .tm-label-handle { background: #18181b; border-color: #52525b; } body.dark .tm-label-edge { color: #60a5fa; } body.dark .tm-label-split { color: #4ade80; } body.dark .tm-preview { background: #1c1c1e; } body.dark .tm-seg { background: #1c1c1e; } body.dark .tm-seg-time { background: #27272a; color: #a1a1aa; } body.dark .tm-seg-text { background: #27272a; color: #e4e4e7; border-color: #52525b; } body.dark .tm-footer { background: #1c1c1e; border-top-color: #3f3f46; } body.dark .tm-close { color: #fff; }