/* ========================================================================= * PRISM Light Mode * * Overrides design tokens when [data-color-scheme="light"] is set on . * Separate from data-theme (decorative themes). * * Strategy: override CSS custom properties AND hardcoded backgrounds/colors * at the element level, since much of the codebase uses hardcoded values. * ========================================================================= */ /* --- Token overrides ---------------------------------------------------- */ [data-color-scheme="light"] { color-scheme: light; /* Core palette — do NOT invert --color-white/--color-black, they're used as literal colors, not semantic roles */ --color-cyan: #1a75d2; --color-cyan-hover: #125eae; /* Text */ --color-text: #0f172a; --color-text-muted: #6b7280; --color-text-secondary: #475569; --color-text-tertiary: #9ca3af; --color-text-bright: #0f172a; --color-text-light: #475569; --color-text-subtle: #6b7280; --color-text-faint: #d1d5db; /* Surfaces */ --color-bg: #f5f3ef; --color-bg-dark: #f0f0f0; --color-bg-lighter: rgba(0, 0, 0, 0.04); --color-surface: #ffffff; --color-card: #ffffff; --color-card-hover: #eef4fb; --color-border: rgba(0, 0, 0, 0.12); --color-surface-alt: #f0f4f8; --color-elevated: #e8e6e0; /* Interactive states */ --color-hover-overlay: rgba(0, 0, 0, 0.04); --color-active-overlay: rgba(0, 0, 0, 0.08); --color-disabled: rgba(0, 0, 0, 0.25); /* Overlay alpha scale */ --overlay-2: rgba(0, 0, 0, 0.02); --overlay-3: rgba(0, 0, 0, 0.025); --overlay-4: rgba(0, 0, 0, 0.035); --overlay-5: rgba(0, 0, 0, 0.04); --overlay-6: rgba(0, 0, 0, 0.05); --overlay-8: rgba(0, 0, 0, 0.06); --overlay-10: rgba(0, 0, 0, 0.08); --overlay-12: rgba(0, 0, 0, 0.1); --overlay-15: rgba(0, 0, 0, 0.12); --overlay-20: rgba(0, 0, 0, 0.16); /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.06); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.08); --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.1); --shadow-glow-cyan: 0 0 12px rgba(26, 117, 210, 0.2); --shadow-glow-error: 0 0 12px rgba(255, 46, 59, 0.2); /* Semantic aliases for feature CSS */ --bg-primary: #f5f3ef; --bg-secondary: #ffffff; --bg-tertiary: #eef2f7; --bg-quaternary: #e3e9f2; --bg-surface: #ffffff; --bg-elevated: #ffffff; --bg-hover: rgba(15, 23, 42, 0.05); --bg-dark: #e8e6e0; --bg-1: #f7fafd; --bg-2: #e8eff7; --surface-1: #ffffff; --surface-2: #f5f7fb; --surface-primary: #ffffff; --surface-secondary: #eef2f7; --surface-tertiary: #e3e9f2; --surface-color: #ffffff; --surface-hover: #eef4fb; --surface-elevated: #ffffff; --border-color: rgba(15, 23, 42, 0.14); --border-subtle: rgba(15, 23, 42, 0.1); --border-primary: rgba(15, 23, 42, 0.16); --border-light: rgba(15, 23, 42, 0.06); --border-faint: rgba(15, 23, 42, 0.04); --text-primary: #111827; --text-secondary: #475569; --text-tertiary: #64748b; --text-muted: #6b7280; --text-dim: #94a3b8; --text-bright: #0f172a; --text-color: #111827; --accent-primary: #1a75d2; --accent-primary-hover: #125eae; --accent-hover: #125eae; --accent-color: #1a75d2; --accent-color-hover: #125eae; --accent-blue: #1a75d2; --accent-text: #125eae; --accent-glow: rgba(26, 117, 210, 0.14); --success: #16a34a; --success-color: #16a34a; --warning: #d97706; --warning-color: #d97706; --error: #dc2626; --error-color: #dc2626; --info: #1a75d2; --info-color: #1a75d2; /* Workspace / editor */ --editor-bg: #f7f3e8; --editor-bg-focus: #fcfaf4; --editor-text: #1f2937; --editor-gutter-bg: #ebe4d3; --editor-gutter-text: #64748b; --editor-border: rgba(15, 23, 42, 0.14); --editor-caret: #1a75d2; --editor-selection: rgba(26, 117, 210, 0.18); --editor-selection-focus: rgba(26, 117, 210, 0.24); --editor-active-line: rgba(15, 23, 42, 0.035); --editor-active-line-gutter: rgba(26, 117, 210, 0.12); --editor-search-panel-bg: #eef2f7; --editor-search-input-bg: #ffffff; --editor-search-button-bg: #e2e8f0; --editor-search-button-hover: #dbe7f5; --editor-search-match: rgba(245, 158, 11, 0.22); --editor-search-match-selected: rgba(245, 158, 11, 0.32); --editor-scrollbar-track: rgba(148, 163, 184, 0.18); --editor-scrollbar-thumb: rgba(100, 116, 139, 0.45); --editor-scrollbar-thumb-hover: rgba(71, 85, 105, 0.62); --editor-token-scene-heading: #125eae; --editor-token-section: #7c3aed; --editor-token-character: #b45309; --editor-token-dialogue: #1f2937; --editor-token-parenthetical: #64748b; --editor-token-transition: #0369a1; --editor-token-synopsis: #94a3b8; --editor-token-centered: #b45309; --editor-token-comment: #94a3b8; --editor-token-page-break: #cbd5e1; --workspace-modal-backdrop: rgba(15, 23, 42, 0.24); --workspace-modal-bg: #ffffff; --workspace-modal-elevated-bg: #ffffff; --workspace-modal-header-bg: #f8fafc; --workspace-modal-section-bg: rgba(15, 23, 42, 0.035); --workspace-modal-section-bg-strong: rgba(15, 23, 42, 0.055); --workspace-modal-field-bg: #ffffff; --workspace-modal-field-hover: rgba(26, 117, 210, 0.08); --workspace-modal-panel-bg: rgba(255, 255, 255, 0.92); --workspace-modal-scroll-thumb: rgba(100, 116, 139, 0.4); --workspace-modal-shadow: 0 20px 48px rgba(15, 23, 42, 0.16); --workspace-context-card-bg: linear-gradient(180deg, #f8fbff, #edf4fb); --workspace-context-chip-bg: rgba(26, 117, 210, 0.1); --workspace-context-chip-border: rgba(26, 117, 210, 0.18); --workspace-context-chip-text: #125eae; --workspace-link: #125eae; --workspace-link-hover: #1e40af; --workspace-danger-soft: rgba(220, 38, 38, 0.08); --workspace-danger-soft-hover: rgba(220, 38, 38, 0.14); --workspace-border-soft: rgba(15, 23, 42, 0.12); --workspace-border-subtle: rgba(15, 23, 42, 0.08); /* Color primitives — deeper/saturated for white-bg contrast. Scrim tokens (--scrim-NN) intentionally stay black-on-light: scrims darken, they don't adapt. */ --color-red: #dc2626; --color-red-soft: #ef4444; --color-amber: #d97706; --color-purple: #7c3aed; --color-purple-soft: #8b5cf6; --color-indigo: #4f46e5; --color-emerald: #059669; --color-green-soft: #22c55e; --color-green-bright: #16a34a; --color-blue-soft: #6366f1; --accent-orange-deep: #c2410c; /* RGB triplets — track their paired primitive in light mode */ --color-cyan-rgb: 26, 117, 210; /* matches light --color-cyan */ --color-cyan-glow-rgb: 26, 117, 210; /* legacy glow tracks main cyan */ --accent-orange-rgb: 255, 107, 53; /* accent orange unchanged */ --color-red-rgb: 220, 38, 38; --color-amber-rgb: 217, 119, 6; --color-purple-rgb: 124, 58, 237; --color-purple-soft-rgb: 139, 92, 246; --color-indigo-rgb: 79, 70, 229; --color-emerald-rgb: 5, 150, 105; --stage-prep-rgb: 59, 130, 246; /* unchanged */ --stage-production-rgb: 34, 197, 94; /* unchanged */ } /* --- html/body background ----------------------------------------------- */ [data-color-scheme="light"], [data-color-scheme="light"] body { background-color: #f5f3ef; color: #0f172a; } /* ========================================================================= * SITE SHELL — Header, Footer, User Menu * ========================================================================= */ [data-color-scheme="light"] .site-header { background: linear-gradient(110deg, #e8e6e0 0%, #ddd9d1 25%, #d5d0c8 50%, #ddd9d1 75%, #e8e6e0 100%); background-size: 200% 200%; background-position: 50% 50%; border-bottom-color: rgba(0, 0, 0, 0.1); } [data-color-scheme="light"] .site-header.is-processing { background: linear-gradient(110deg, #e8e6e0 0%, #ddd9d1 25%, #b3d4fc 50%, #ddd9d1 75%, #e8e6e0 100%); } [data-color-scheme="light"] .site-header::after { background: linear-gradient( 110deg, transparent 0%, rgba(26, 117, 210, 0.04) 20%, rgba(26, 117, 210, 0.08) 40%, rgba(26, 117, 210, 0.04) 60%, transparent 100% ); } [data-color-scheme="light"] .header-logo-text { color: #0f172a; } [data-color-scheme="light"] .header-nav-link { color: #4b5563; } [data-color-scheme="light"] .header-nav-link:hover, [data-color-scheme="light"] .header-nav-link.active { color: #0f172a; } [data-color-scheme="light"] .site-footer { background: rgba(245, 243, 239, 0.85); -webkit-backdrop-filter: blur(18px) brightness(1.05) contrast(1.1) saturate(1.2); backdrop-filter: blur(18px) brightness(1.05) contrast(1.1) saturate(1.2); border-top-color: rgba(26, 117, 210, 0.3); box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.04), 0 -1px 0 rgba(26, 117, 210, 0.12); } [data-color-scheme="light"] .site-footer, [data-color-scheme="light"] .site-footer a, [data-color-scheme="light"] .site-footer span { color: #4b5563; } @media (max-width: 600px) { [data-color-scheme="light"] .footer-row--bottom { background: rgba(245, 245, 245, 0.95); border-top-color: rgba(26, 117, 210, 0.15); box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06); } [data-color-scheme="light"] .footer-nav-link { border-bottom-color: rgba(0, 0, 0, 0.06); } [data-color-scheme="light"] .footer-menu-toggle { color: #6b7280; } [data-color-scheme="light"] .footer-menu-toggle:hover, [data-color-scheme="light"] .footer-menu-toggle[aria-expanded="true"] { color: #1a75d2; } } [data-color-scheme="light"] .user-menu-dropdown { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } [data-color-scheme="light"] .user-menu-header { border-bottom-color: rgba(0, 0, 0, 0.08); } [data-color-scheme="light"] .user-menu-header, [data-color-scheme="light"] .user-menu-name, [data-color-scheme="light"] .user-menu-email { color: #0f172a; } [data-color-scheme="light"] .user-menu-item { color: #475569; } [data-color-scheme="light"] .user-menu-item:hover { background: rgba(0, 0, 0, 0.04); } [data-color-scheme="light"] .user-menu-divider { border-color: rgba(0, 0, 0, 0.08); } /* ========================================================================= * DASHBOARD — Sidebar, Cards, Scripts, Kanban * ========================================================================= */ [data-color-scheme="light"] .dashboard-sidebar { background: #ece8e1; } [data-color-scheme="light"] .sidebar-toggle-btn { background: #dce0e5; } [data-color-scheme="light"] .sidebar-toggle-btn:hover { background: #cfd4da; } [data-color-scheme="light"] .dashboard-prod-card { border-color: rgba(0, 0, 0, 0.08); } [data-color-scheme="light"] .dashboard-prod-card:hover { background: #fafafa; } [data-color-scheme="light"] .dashboard-prod-card-poster { background: #ece8e1; } [data-color-scheme="light"] .dashboard-prod-card-placeholder--feature_film { background: linear-gradient(135deg, #e8edf8, #d0dae6); } [data-color-scheme="light"] .dashboard-prod-card-placeholder--short { background: linear-gradient(135deg, #e0f0e0, #c8e0c8); } [data-color-scheme="light"] .dashboard-prod-card-placeholder--series { background: linear-gradient(135deg, #f0e0e0, #e0c8c8); } [data-color-scheme="light"] .dashboard-prod-card-placeholder--documentary { background: linear-gradient(135deg, #f0f0e0, #e0e0c8); } [data-color-scheme="light"] .dashboard-prod-card-placeholder--commercial { background: linear-gradient(135deg, #e8e0f0, #d8d0e0); } [data-color-scheme="light"] .dashboard-prod-card-placeholder--general, [data-color-scheme="light"] .dashboard-prod-card-placeholder--other { background: linear-gradient(135deg, #e8edf2, #dce3eb); } [data-color-scheme="light"] .dashboard-prod-card-placeholder--new { background: #ece8e1; } [data-color-scheme="light"] .dashboard-script-row:hover { background: #f5f7fa; } [data-color-scheme="light"] .dashboard-form-group select { color: #0f172a; border-color: rgba(0, 0, 0, 0.15); } [data-color-scheme="light"] .kanban-card:hover { background: #f5f7fa; } [data-color-scheme="light"] .kanban-card--has-frame { border-color: rgba(0, 0, 0, 0.1); } [data-color-scheme="light"] .kanban-card--has-frame .kanban-card-title a { color: #fff; } [data-color-scheme="light"] .kanban-card--has-frame .kanban-card-meta { color: rgba(255, 255, 255, 0.7); } [data-color-scheme="light"] .dashboard-script-row { border-color: rgba(0, 0, 0, 0.06); } [data-color-scheme="light"] .dashboard-kanban-header { background: #f8fafc; } [data-color-scheme="light"] .view-toggle-btn { background: rgba(0, 0, 0, 0.04); } [data-color-scheme="light"] .view-toggle-btn.active { background: rgba(26, 117, 210, 0.1); } [data-color-scheme="light"] .view-toggle-btn:hover { background: rgba(0, 0, 0, 0.06); } /* Dashboard sidebar text */ [data-color-scheme="light"] .sidebar-section-title, [data-color-scheme="light"] .sidebar-item, [data-color-scheme="light"] .sidebar-label, [data-color-scheme="light"] .sidebar-nav-item { color: #475569; } [data-color-scheme="light"] .sidebar-item:hover, [data-color-scheme="light"] .sidebar-nav-item:hover { background: rgba(0, 0, 0, 0.04); color: #0f172a; } [data-color-scheme="light"] .sidebar-item.active, [data-color-scheme="light"] .sidebar-nav-item.active { background: rgba(26, 117, 210, 0.08); color: #1a75d2; } /* Dashboard misc dark overrides */ [data-color-scheme="light"] .dashboard-prod-card--new { background: #f5f5f5; border-color: rgba(0, 0, 0, 0.12); } [data-color-scheme="light"] .dashboard-prod-card--new:hover { background: #eef2f7; } [data-color-scheme="light"] .dashboard-empty-state { color: #6b7280; } [data-color-scheme="light"] .delete-script-btn { background: #dc2626; color: #ffffff; } [data-color-scheme="light"] .modal-cancel-btn { background: #f0f0f0; color: #0f172a; border-color: rgba(0, 0, 0, 0.12); } /* ========================================================================= * MODALS — All modal types * ========================================================================= */ [data-color-scheme="light"] .modal-backdrop { background: rgba(0, 0, 0, 0.3); } [data-color-scheme="light"] .modal-content { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); color: #0f172a; } [data-color-scheme="light"] .modal-content h2, [data-color-scheme="light"] .modal-content h3, [data-color-scheme="light"] .modal-content h4 { color: #0f172a; } [data-color-scheme="light"] .modal-content label { color: #475569; } [data-color-scheme="light"] .save-as-modal, [data-color-scheme="light"] .diff-viewer-modal, [data-color-scheme="light"] .conflict-resolver-modal, [data-color-scheme="light"] .ai-modal-overlay { background: rgba(0, 0, 0, 0.3); } /* ========================================================================= * FORMS — Inputs, selects, textareas (global) * ========================================================================= */ [data-color-scheme="light"] input[type="text"], [data-color-scheme="light"] input[type="email"], [data-color-scheme="light"] input[type="password"], [data-color-scheme="light"] input[type="number"], [data-color-scheme="light"] input[type="url"], [data-color-scheme="light"] input[type="search"], [data-color-scheme="light"] select, [data-color-scheme="light"] textarea { background: #ffffff; border-color: rgba(0, 0, 0, 0.2); color: #0f172a; } [data-color-scheme="light"] input:focus, [data-color-scheme="light"] select:focus, [data-color-scheme="light"] textarea:focus { border-color: #1a75d2; box-shadow: 0 0 0 3px rgba(26, 117, 210, 0.15); } [data-color-scheme="light"] input::placeholder, [data-color-scheme="light"] textarea::placeholder { color: #9ca3af; } /* ========================================================================= * BUTTONS * ========================================================================= */ [data-color-scheme="light"] .btn-primary { background: #1a75d2; color: #ffffff; } [data-color-scheme="light"] .btn-cancel, [data-color-scheme="light"] .btn-secondary { background: #f0f0f0; color: #0f172a; border: 1px solid rgba(0, 0, 0, 0.15); } [data-color-scheme="light"] .btn-cancel:hover, [data-color-scheme="light"] .btn-secondary:hover { background: #e5e5e5; } /* ========================================================================= * CARDS * ========================================================================= */ [data-color-scheme="light"] .card-title { color: #0f172a; } /* ========================================================================= * SCROLLBAR * ========================================================================= */ [data-color-scheme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); } [data-color-scheme="light"] ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); } /* ========================================================================= * FULL-PAGE BACKGROUNDS — Admin, Profile, Onboarding, Wizard * ========================================================================= */ [data-color-scheme="light"] .admin-page { background: linear-gradient(135deg, #eef1f5 0%, #dce3eb 100%); } [data-color-scheme="light"] .profile-page { background: linear-gradient(135deg, #eef1f5 0%, #dce3eb 50%, #d0dae6 100%); } /* Onboarding & Wizard backgrounds: see ONBOARDING & PROFILE section below */ /* ========================================================================= * SCREENPLAY AREA — Fountain editor, preview, rendered screenplay * * The screenplay view is a 6-column grid per line: * [linenum | gutter | content (paper) | lined-script | gutter | linenum] * Dark defaults use #0A0A0A body, white paper strip, dark gutters/borders. * Light mode keeps the white paper but lightens everything around it. * ========================================================================= */ /* -- Screenplay canvas (outer container) --------------------------------- */ [data-color-scheme="light"] .screenplay-canvas { background: var(--color-bg, #f5f5f5); } /* -- Paper strip (.screenplay::before) ----------------------------------- */ [data-color-scheme="light"] .screenplay::before { box-shadow: 0 0 24px rgba(0, 0, 0, 0.08); } /* -- Script line grid rows ----------------------------------------------- */ [data-color-scheme="light"] .script-line:nth-child(odd) { background: rgba(0, 0, 0, 0.015); } [data-color-scheme="light"] .script-line:nth-child(even) { background: transparent; } [data-color-scheme="light"] .script-line:hover { background: rgba(26, 117, 210, 0.06) !important; } [data-color-scheme="light"] .script-line.selected { background: rgba(26, 117, 210, 0.10) !important; } [data-color-scheme="light"] .script-line.has-note { background: rgba(245, 158, 11, 0.08) !important; } /* -- Line numbers (left & right edges) ----------------------------------- */ [data-color-scheme="light"] .line-num { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.08); color: var(--color-text-muted, #6b7280); } [data-color-scheme="light"] .line-num:hover { color: #1a75d2 !important; background: rgba(26, 117, 210, 0.08); } [data-color-scheme="light"] .script-line.selected .line-num { color: #1a75d2; background: rgba(26, 117, 210, 0.12); } [data-color-scheme="light"] .script-line.has-note .line-num { color: #d97706; } /* -- Gutter slots (annotation indicator columns) ------------------------- */ [data-color-scheme="light"] .gutter-slot { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.08); } /* -- Gutter note cards --------------------------------------------------- */ [data-color-scheme="light"] .gutter-note-card { background: var(--color-card, #ffffff); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } [data-color-scheme="light"] .gutter-note-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* -- Line content -------------------------------------------------------- */ [data-color-scheme="light"] .line-content { color: var(--screenplay-text, #000000); } [data-color-scheme="light"] .line-title .line-content { color: #0f172a; } [data-color-scheme="light"] .line-note .line-content { color: #6b7280; } /* -- Screenplay caboose (stats bar at bottom) ---------------------------- */ [data-color-scheme="light"] .screenplay-caboose { background: var(--color-card, #ffffff); border-top-color: rgba(0, 0, 0, 0.1); } [data-color-scheme="light"] .caboose-stats { color: var(--color-text-muted, #6b7280); } [data-color-scheme="light"] .caboose-stat { color: var(--color-text, #0f172a); } [data-color-scheme="light"] .caboose-stat-sep { color: rgba(0, 0, 0, 0.2); } [data-color-scheme="light"] .caboose-nav-btn { color: var(--color-text, #475569); } [data-color-scheme="light"] .caboose-nav-btn:hover:not(.disabled) { color: #1a75d2; } /* -- Section header text (# ACT, ## Sequence, etc.) ---------------------- */ [data-color-scheme="light"] .line-section-h1 .section-header-text { color: #1a75d2; } [data-color-scheme="light"] .line-section-h2 .section-header-text { color: #125eae; } [data-color-scheme="light"] .line-section-h3 .section-header-text { color: #7c3aed; } [data-color-scheme="light"] .line-section-h4 .section-header-text, [data-color-scheme="light"] .line-section-h5 .section-header-text, [data-color-scheme="light"] .line-section-h6 .section-header-text { color: #6b7280; } /* -- Section label (gutter markers) -------------------------------------- */ [data-color-scheme="light"] .section-label { color: #1a75d2; } /* -- Fountain editor (source editing) ------------------------------------ */ [data-color-scheme="light"] .fountain-textarea { background: var(--editor-bg, #f7f3e8); color: var(--editor-text, #1f2937); } [data-color-scheme="light"] .fountain-textarea:focus { background: var(--editor-bg-focus, #fcfaf4); } [data-color-scheme="light"] .fountain-editor-status { background: var(--color-card, #ffffff); border-top-color: rgba(0, 0, 0, 0.1); } /* -- Fountain line numbers (legacy editor) ------------------------------- */ [data-color-scheme="light"] .fountain-line-numbers { background: var(--editor-gutter-bg, #ebe4d3); border-right-color: rgba(0, 0, 0, 0.1); color: var(--editor-gutter-text, #64748b); } [data-color-scheme="light"] .fountain-line-numbers .line-num:hover { color: #1a75d2; background: rgba(26, 117, 210, 0.08); } [data-color-scheme="light"] .fountain-line-numbers .line-num.highlighted { color: #1a75d2; background: rgba(26, 117, 210, 0.12); } @keyframes lineFlash-light { 0% { background: rgba(26, 117, 210, 0.3); color: #0f172a; } 100% { background: transparent; color: var(--editor-gutter-text, #64748b); } } [data-color-scheme="light"] .fountain-line-numbers .line-num.flash { animation: lineFlash-light 1s ease-out; } /* -- Fountain line info (status bar) ------------------------------------- */ [data-color-scheme="light"] #fountain-line-info { color: #6b7280; } /* -- Split-pane Fountain editor ------------------------------------------ */ [data-color-scheme="light"] .fountain-split-pane { background: var(--color-bg, #f5f5f5); } [data-color-scheme="light"] .fountain-split-left { background: var(--editor-bg, #f7f3e8); border-right-color: rgba(0, 0, 0, 0.1); } [data-color-scheme="light"] .fountain-split-handle { background: rgba(0, 0, 0, 0.04); } [data-color-scheme="light"] .fountain-split-handle:hover { background: rgba(0, 0, 0, 0.08); } [data-color-scheme="light"] .fountain-split-handle-grip { background: rgba(0, 0, 0, 0.15); } [data-color-scheme="light"] .fountain-split-toolbar { background: rgba(0, 0, 0, 0.04); border-bottom-color: rgba(0, 0, 0, 0.1); } [data-color-scheme="light"] .fountain-split-toolbar-label { color: var(--color-text-muted, #6b7280); } [data-color-scheme="light"] .fountain-split-close:hover { color: var(--color-text, #0f172a); background: rgba(0, 0, 0, 0.06); } /* -- Fountain edit button (above screenplay) ----------------------------- */ [data-color-scheme="light"] .fountain-edit-btn { color: var(--color-text-muted, #6b7280); } [data-color-scheme="light"] .fountain-edit-btn:hover { color: var(--color-text, #0f172a); border-color: rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.04); } /* -- Raw Fountain view --------------------------------------------------- */ [data-color-scheme="light"] .fountain-raw { background: #f7f3e8; color: #1f2937; } /* -- Selection toolbar (floating at bottom) ------------------------------ */ [data-color-scheme="light"] .line-selection-toolbar { background: var(--color-card, #ffffff); border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); } [data-color-scheme="light"] .selection-info { color: var(--color-text-muted, #6b7280); } /* -- Note indicator ------------------------------------------------------ */ [data-color-scheme="light"] .line-note-indicator { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); } /* -- Annotation indicators (gutter icons) -------------------------------- */ [data-color-scheme="light"] .annotation-indicator-camera svg { filter: drop-shadow(0 0 3px rgba(200, 80, 30, 0.3)); } [data-color-scheme="light"] .annotation-indicator-camera:hover svg { filter: drop-shadow(0 0 5px rgba(200, 80, 30, 0.5)); } /* -- Annotation tooltip -------------------------------------------------- */ [data-color-scheme="light"] .annotation-tooltip { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); color: #0f172a; } /* -- Screenplay toast ---------------------------------------------------- */ [data-color-scheme="light"] .screenplay-toast { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } /* -- Episode dropdown (header title picker) ------------------------------ */ [data-color-scheme="light"] .episode-dropdown { background: rgba(255, 255, 255, 0.98); border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); } [data-color-scheme="light"] .episode-dropdown-label { color: #6b7280; } [data-color-scheme="light"] .episode-dropdown-sort { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.12); color: #475569; } [data-color-scheme="light"] .episode-dropdown-sort:hover { border-color: rgba(26, 117, 210, 0.3); } /* -- Pipeline back button & title ---------------------------------------- */ [data-color-scheme="light"] .pipeline-back-btn { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.1); color: #6b7280; } [data-color-scheme="light"] .pipeline-back-btn:hover { background: rgba(0, 0, 0, 0.06); border-color: rgba(26, 117, 210, 0.3); color: #1a75d2; box-shadow: 0 0 8px rgba(26, 117, 210, 0.1); } [data-color-scheme="light"] .pipeline-title { color: #0f172a; } [data-color-scheme="light"] .pipeline-title:hover { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.1); } [data-color-scheme="light"] .pipeline-title-wrapper.open .pipeline-title { background: rgba(26, 117, 210, 0.06); border-color: rgba(26, 117, 210, 0.2); } [data-color-scheme="light"] .pipeline-title-chevron { color: #6b7280; } [data-color-scheme="light"] .pipeline-title-wrapper.open .pipeline-title-chevron { color: #1a75d2; } /* -- Scaffold modal (AI draft generation) -------------------------------- */ [data-color-scheme="light"] .scaffold-modal-overlay { background: rgba(0, 0, 0, 0.4); } [data-color-scheme="light"] .scaffold-modal { background: linear-gradient(135deg, #ffffff 0%, #eef2f7 100%); border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); } [data-color-scheme="light"] .scaffold-modal-header { background: rgba(0, 0, 0, 0.03); border-bottom-color: rgba(0, 0, 0, 0.08); } [data-color-scheme="light"] .scaffold-loading p { color: #6b7280; } [data-color-scheme="light"] .scaffold-loading .loading-spinner { border-color: rgba(26, 117, 210, 0.15); border-top-color: #1a75d2; } [data-color-scheme="light"] .scaffold-success, [data-color-scheme="light"] .draft-success { background: rgba(22, 163, 74, 0.08); border-color: rgba(22, 163, 74, 0.2); } [data-color-scheme="light"] .scaffold-success p, [data-color-scheme="light"] .scaffold-success .material-icons-outlined, [data-color-scheme="light"] .scaffold-success svg, [data-color-scheme="light"] .draft-success .material-icons-outlined, [data-color-scheme="light"] .scaffold-stats { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.06); } [data-color-scheme="light"] .beat-tag { background: rgba(0, 0, 0, 0.06); color: #475569; } [data-color-scheme="light"] .scene-number { color: #1a75d2; background: rgba(26, 117, 210, 0.08); } [data-color-scheme="light"] .fountain-toggle { color: #475569; border-color: rgba(0, 0, 0, 0.15); } [data-color-scheme="light"] .fountain-toggle:hover { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.25); } [data-color-scheme="light"] .fountain-content { color: #1f2937; background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.1); } [data-color-scheme="light"] .scaffold-actions { border-top-color: rgba(0, 0, 0, 0.08); } [data-color-scheme="light"] .scaffold-btn { color: #475569; background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.15); } [data-color-scheme="light"] .scaffold-btn:hover { background: rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.25); color: #0f172a; } /* -- Append bar (add content below screenplay) --------------------------- */ [data-color-scheme="light"] .append-bar-trigger { border-color: rgba(0, 0, 0, 0.15); color: #6b7280; } [data-color-scheme="light"] .append-bar-trigger:hover, [data-color-scheme="light"] .append-bar-trigger.active { border-color: #1a75d2; color: #1a75d2; background: rgba(26, 117, 210, 0.04); } [data-color-scheme="light"] .append-menu { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } [data-color-scheme="light"] .append-menu-item { color: #475569; } [data-color-scheme="light"] .append-menu-item:hover { background: rgba(0, 0, 0, 0.04); } [data-color-scheme="light"] .append-l2-back { border-bottom-color: rgba(0, 0, 0, 0.08); color: #6b7280; } [data-color-scheme="light"] .append-input, [data-color-scheme="light"] .append-select { background: #ffffff; border-color: rgba(0, 0, 0, 0.15); color: #0f172a; } [data-color-scheme="light"] .append-toggle { border-color: rgba(0, 0, 0, 0.15); color: #6b7280; } [data-color-scheme="light"] .append-char-item, [data-color-scheme="light"] .append-transition-item { color: #475569; } [data-color-scheme="light"] .append-char-item:hover, [data-color-scheme="light"] .append-transition-item:hover { background: rgba(0, 0, 0, 0.04); } /* -- Smart Fountain autocomplete tooltip --------------------------------- */ [data-color-scheme="light"] .cm-tooltip-autocomplete { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important; } /* -- YesNo tabs (global accept/reject) ----------------------------------- */ [data-color-scheme="light"] .yesno-tab { border-color: rgba(0, 0, 0, 0.12); background: rgba(255, 255, 255, 0.85); color: #0f172a; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); } /* -- Download toolbar (bulk media export) -------------------------------- */ [data-color-scheme="light"] .download-toolbar { background: #ffffff; border-top-color: rgba(0, 0, 0, 0.1); box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06); } [data-color-scheme="light"] .download-toolbar-count { color: #6b7280; } [data-color-scheme="light"] .download-toolbar-clear { color: #6b7280; } /* -- Interpolation panel ------------------------------------------------- */ [data-color-scheme="light"] .interpolation-panel { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); } /* -- Broadcast share URL input ------------------------------------------- */ [data-color-scheme="light"] .broadcast-share-url-input { background: #f5f5f5; border-color: rgba(0, 0, 0, 0.12); color: #0f172a; } /* -- Shot list broadcast popover ----------------------------------------- */ [data-color-scheme="light"] .sl-broadcast-popover { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } [data-color-scheme="light"] .sl-broadcast-popover-header { border-bottom-color: rgba(0, 0, 0, 0.08); color: #6b7280; } /* -- Empty state (screenplay canvas when no content) --------------------- */ [data-color-scheme="light"] .empty-state-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.1); } [data-color-scheme="light"] .empty-state-card:hover { border-color: #1a75d2; background: #f8fafc; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } [data-color-scheme="light"] .empty-state-card--import { border-color: rgba(139, 92, 246, 0.2); background: linear-gradient(135deg, rgba(139, 92, 246, 0.04) 0%, rgba(236, 72, 153, 0.04) 100%); } [data-color-scheme="light"] .empty-state-card--import:hover { border-color: rgba(139, 92, 246, 0.4); background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(236, 72, 153, 0.08) 100%); } /* -- Shot underlines (selected line in shot-underlines.css) -------------- */ [data-color-scheme="light"] .script-line.selected { background: rgba(13, 148, 136, 0.08); outline-color: rgba(13, 148, 136, 0.2); } /* -- Timeline sync (drag scrub & playback active states) ----------------- */ [data-color-scheme="light"] .screenplay-container.drag-over { outline-color: rgba(26, 117, 210, 0.3); } /* ========================================================================= * GENERIC DARK-BG OVERRIDES * ========================================================================= */ /* Tab/section backgrounds */ [data-color-scheme="light"] .tab-content { background: #ffffff; color: #0f172a; } /* Links */ [data-color-scheme="light"] a { color: #1a75d2; } [data-color-scheme="light"] a:hover { color: #125eae; } /* ========================================================================= * SHOT LIST PAGE * ========================================================================= */ [data-color-scheme="light"] .shot-list-page { --sl-page-bg: linear-gradient(180deg, #eaf3fb 0%, #f8f1e7 46%, #edf6ff 100%); --sl-surface: rgba(255, 255, 255, 0.86); --sl-surface-strong: #ffffff; --sl-surface-muted: #f2f6fb; --sl-surface-accent: #e8f0ff; --sl-border: rgba(15, 23, 42, 0.12); --sl-border-strong: rgba(26, 117, 210, 0.22); --sl-text: #0f172a; --sl-text-soft: #475569; --sl-text-muted: #64748b; --sl-text-dim: #94a3b8; --sl-accent: #1a75d2; --sl-accent-soft: rgba(26, 117, 210, 0.1); --sl-accent-soft-strong: rgba(26, 117, 210, 0.18); --sl-gold: #d97706; --sl-gold-soft: rgba(217, 119, 6, 0.12); --sl-danger: #dc2626; --sl-success: #15803d; background: var(--sl-page-bg) !important; } [data-color-scheme="light"] .sl-title, [data-color-scheme="light"] .sl-shot-number, [data-color-scheme="light"] .sl-line-heading, [data-color-scheme="light"] .sl-char-chip-name { color: var(--sl-text); } [data-color-scheme="light"] .sl-subtitle, [data-color-scheme="light"] .sl-shot-count, [data-color-scheme="light"] .sl-loading, [data-color-scheme="light"] .sl-empty, [data-color-scheme="light"] .sl-script-lines-badge, [data-color-scheme="light"] .sl-meta-scene, [data-color-scheme="light"] .sl-meta-lines, [data-color-scheme="light"] .sl-vp-label, [data-color-scheme="light"] .sl-field label, [data-color-scheme="light"] .sl-audio-player-label, [data-color-scheme="light"] .sl-char-picker-label, [data-color-scheme="light"] .sl-char-available-label, [data-color-scheme="light"] .sl-viewer-placeholder, [data-color-scheme="light"] .sl-viewer-snapshot-text, [data-color-scheme="light"] .sl-narration-player-label, [data-color-scheme="light"] .sl-strip-cell-audio-badge { color: var(--sl-text-muted); } [data-color-scheme="light"] .sl-header-link, [data-color-scheme="light"] .sl-scene-chip, [data-color-scheme="light"] .sl-strip-arrow, [data-color-scheme="light"] .sl-strip-expand-toggle, [data-color-scheme="light"] .sl-strip-cell, [data-color-scheme="light"] .sl-version-cell, [data-color-scheme="light"] .sl-shot-row, [data-color-scheme="light"] .sl-media-cell, [data-color-scheme="light"] .sl-vp-toggle-group, [data-color-scheme="light"] .sl-vp-toggle-btn, [data-color-scheme="light"] .sl-vp-text-wrap input, [data-color-scheme="light"] .sl-field select, [data-color-scheme="light"] .sl-field input, [data-color-scheme="light"] .sl-field textarea, [data-color-scheme="light"] .sl-field-custom-back, [data-color-scheme="light"] .sl-audio-tier-tab, [data-color-scheme="light"] .sl-audio-cell, [data-color-scheme="light"] .sl-audio-status-btn, [data-color-scheme="light"] .sl-char-chip, [data-color-scheme="light"] .sl-char-avail-chip { background: var(--sl-surface-muted); border-color: var(--sl-border); color: var(--sl-text-soft); } [data-color-scheme="light"] .sl-shot-grid, [data-color-scheme="light"] .sl-script-lines, [data-color-scheme="light"] .sl-boneyard-body, [data-color-scheme="light"] .sl-narration-player, [data-color-scheme="light"] .sl-video-params, [data-color-scheme="light"] .sl-meta-card, [data-color-scheme="light"] .sl-audio-player, [data-color-scheme="light"] .sl-char-active { background: var(--sl-surface); border-color: var(--sl-border); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .sl-viewer { background: linear-gradient(135deg, #dfe7f2 0%, #f7f4ec 100%); border: 1px solid var(--sl-border); box-shadow: 0 20px 44px rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .sl-viewer-video { background: #dbe5ef; } [data-color-scheme="light"] .sl-scene-chip:hover, [data-color-scheme="light"] .sl-header-link:hover, [data-color-scheme="light"] .sl-strip-arrow:hover:not(:disabled), [data-color-scheme="light"] .sl-strip-expand-toggle:hover, [data-color-scheme="light"] .sl-strip-cell:hover, [data-color-scheme="light"] .sl-version-cell:hover, [data-color-scheme="light"] .sl-shot-row:hover, [data-color-scheme="light"] .sl-media-cell:hover, [data-color-scheme="light"] .sl-vp-toggle-btn:hover, [data-color-scheme="light"] .sl-field-custom-back:hover, [data-color-scheme="light"] .sl-audio-tier-tab:hover, [data-color-scheme="light"] .sl-audio-cell:hover, [data-color-scheme="light"] .sl-audio-status-btn:hover, [data-color-scheme="light"] .sl-char-avail-chip:hover { background: var(--sl-surface-strong); border-color: var(--sl-border-strong); color: var(--sl-text); } [data-color-scheme="light"] .sl-scene-chip--active, [data-color-scheme="light"] .sl-strip-cell--active, [data-color-scheme="light"] .sl-version-cell--active, [data-color-scheme="light"] .sl-shot-row--active, [data-color-scheme="light"] .sl-media-cell--active, [data-color-scheme="light"] .sl-vp-toggle-btn--active, [data-color-scheme="light"] .sl-audio-tier-tab--active, [data-color-scheme="light"] .sl-audio-cell--active { background: var(--sl-accent-soft); border-color: var(--sl-accent); color: var(--sl-accent); } [data-color-scheme="light"] .sl-vp-toggle-btn--active:hover { background: var(--sl-accent-soft-strong); color: var(--sl-accent); } [data-color-scheme="light"] .sl-script-lines-text, [data-color-scheme="light"] .sl-line-dialogue { color: var(--sl-text-soft); } [data-color-scheme="light"] .sl-line-dialogue { border-left-color: color-mix(in srgb, var(--sl-char-color, var(--sl-accent)) 35%, transparent); } [data-color-scheme="light"] .sl-line-paren, [data-color-scheme="light"] .sl-line-transition, [data-color-scheme="light"] .sl-boneyard-block { color: var(--sl-text-muted); } [data-color-scheme="light"] .sl-line-action { color: var(--sl-text-soft); } [data-color-scheme="light"] .sl-line-narration { color: var(--sl-text); background: var(--sl-accent-soft); border-left-color: rgba(26, 117, 210, 0.4); } [data-color-scheme="light"] .sl-line-boneyard { color: var(--sl-text-dim); border-left-color: var(--sl-border); } [data-color-scheme="light"] .sl-word:hover { background: rgba(15, 23, 42, 0.05); } [data-color-scheme="light"] .sl-word--struck { color: var(--sl-text-dim) !important; } [data-color-scheme="light"] .sl-narration-btn, [data-color-scheme="light"] .sl-vp-generate-btn, [data-color-scheme="light"] .sl-add-shot-btn:hover, [data-color-scheme="light"] .sl-strip-cell--add:hover, [data-color-scheme="light"] .sl-shot-row--add:hover, [data-color-scheme="light"] .sl-audio-cell--action:hover { border-color: var(--sl-accent); color: var(--sl-accent); } [data-color-scheme="light"] .sl-narration-btn, [data-color-scheme="light"] .sl-vp-generate-btn { background: var(--sl-accent-soft); } [data-color-scheme="light"] .sl-refresh-snapshot-btn { border-color: rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.5); } [data-color-scheme="light"] .sl-refresh-snapshot-btn:hover { background: rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.25); color: rgba(0, 0, 0, 0.7); } [data-color-scheme="light"] .sl-vp-generate-btn { color: #ffffff; background: linear-gradient(135deg, #1a75d2 0%, #125eae 100%); box-shadow: 0 10px 20px rgba(26, 117, 210, 0.2); } [data-color-scheme="light"] .sl-vp-generate-btn:hover { background: linear-gradient(135deg, #125eae 0%, #1e40af 100%); } [data-color-scheme="light"] .sl-add-shot-btn, [data-color-scheme="light"] .sl-strip-cell--add, [data-color-scheme="light"] .sl-shot-row--add, [data-color-scheme="light"] .sl-media-cell--generate, [data-color-scheme="light"] .sl-media-cell--upload, [data-color-scheme="light"] .sl-audio-cell--action, [data-color-scheme="light"] .sl-char-avail-chip { background: transparent; border-color: rgba(100, 116, 139, 0.35); color: var(--sl-text-muted); } [data-color-scheme="light"] .sl-media-cell--generate:hover { border-color: var(--sl-gold); color: var(--sl-gold); } [data-color-scheme="light"] .sl-boneyard-toggle { background: var(--sl-gold-soft); border-color: rgba(217, 119, 6, 0.22); color: #9a6700; } [data-color-scheme="light"] .sl-boneyard-toggle:hover { background: rgba(217, 119, 6, 0.16); border-color: rgba(217, 119, 6, 0.3); } [data-color-scheme="light"] .sl-boneyard-chevron, [data-color-scheme="light"] .sl-boneyard-count { color: #9a6700; } [data-color-scheme="light"] .sl-boneyard-count { background: rgba(217, 119, 6, 0.14); } [data-color-scheme="light"] .sl-viewer-delete-btn, [data-color-scheme="light"] .sl-viewer-motion-btn, [data-color-scheme="light"] .sl-viewer-star-rating, [data-color-scheme="light"] .sl-av-sync-btn, [data-color-scheme="light"] .sl-media-download, [data-color-scheme="light"] .sl-audio-download, [data-color-scheme="light"] .sl-media-delete, [data-color-scheme="light"] .sl-media-cell-badge, [data-color-scheme="light"] .interpolation-video-badge, [data-color-scheme="light"] .sl-viewer-gen-details { background: rgba(248, 250, 252, 0.86); border-color: rgba(15, 23, 42, 0.12); color: var(--sl-text-soft); backdrop-filter: blur(16px); } [data-color-scheme="light"] .sl-viewer-delete-btn:hover, [data-color-scheme="light"] .sl-media-delete:hover { color: var(--sl-danger); border-color: rgba(220, 38, 38, 0.28); background: rgba(254, 242, 242, 0.94); } [data-color-scheme="light"] .sl-viewer-motion-btn:hover, [data-color-scheme="light"] .sl-viewer-motion-btn--generating, [data-color-scheme="light"] .sl-av-sync-btn:hover, [data-color-scheme="light"] .sl-av-sync-btn--active { color: var(--sl-accent); border-color: rgba(26, 117, 210, 0.28); background: rgba(239, 246, 255, 0.94); } [data-color-scheme="light"] .sl-star-btn { color: var(--sl-text-dim); } [data-color-scheme="light"] .sl-star-btn:hover, [data-color-scheme="light"] .sl-star-btn--filled { color: var(--sl-gold); } [data-color-scheme="light"] .sl-star-num, [data-color-scheme="light"] .sl-vp-range-val, [data-color-scheme="light"] .sl-audio-cell-badge, [data-color-scheme="light"] .sl-char-chip-remove { color: var(--sl-text-muted); } [data-color-scheme="light"] .sl-vp-switch-track, [data-color-scheme="light"] .sl-vp-range-wrap input[type="range"] { background: rgba(148, 163, 184, 0.35); } [data-color-scheme="light"] .sl-vp-switch input:checked + .sl-vp-switch-track { background: var(--sl-accent); } [data-color-scheme="light"] .sl-vp-switch-thumb { background: #ffffff; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18); } [data-color-scheme="light"] .sl-vp-range-wrap input[type="range"]::-webkit-slider-thumb, [data-color-scheme="light"] .sl-vp-range-wrap input[type="range"]::-moz-range-thumb { background: var(--sl-accent); } [data-color-scheme="light"] .sl-field select:focus, [data-color-scheme="light"] .sl-field input:focus, [data-color-scheme="light"] .sl-field textarea:focus, [data-color-scheme="light"] .sl-vp-text-wrap input:focus { border-color: var(--sl-accent); box-shadow: 0 0 0 3px rgba(26, 117, 210, 0.12); } [data-color-scheme="light"] .sl-char-active.sl-char-active--dragover, [data-color-scheme="light"] .sl-char-avail-chip:hover { background: var(--sl-surface-accent); } [data-color-scheme="light"] .sl-char-active:empty::before { color: var(--sl-text-dim); } [data-color-scheme="light"] .sl-char-chip { background: #eef2ff; border-color: rgba(99, 102, 241, 0.2); color: var(--sl-text-soft); } [data-color-scheme="light"] .sl-char-chip-badge { color: #6366f1; } [data-color-scheme="light"] .sl-char-chip-role { background: rgba(255, 255, 255, 0.72); border-color: rgba(99, 102, 241, 0.18); color: #4f46e5; } [data-color-scheme="light"] .sl-char-chip[data-role="speaking"] { background: #eaf8ee; border-color: rgba(22, 163, 74, 0.28); } [data-color-scheme="light"] .sl-char-chip[data-role="speaking"] .sl-char-chip-badge, [data-color-scheme="light"] .sl-audio-cell--circled, [data-color-scheme="light"] .sl-audio-btn--circle.sl-audio-status-btn--active, [data-color-scheme="light"] .sl-card-save-indicator { color: var(--sl-success); } [data-color-scheme="light"] .sl-char-chip[data-role="speaking"] .sl-char-chip-role { background: rgba(22, 163, 74, 0.08); border-color: rgba(22, 163, 74, 0.18); color: var(--sl-success); } [data-color-scheme="light"] .sl-char-chip[data-role="background"] { background: #f8fafc; border-color: rgba(148, 163, 184, 0.3); } [data-color-scheme="light"] .sl-char-chip[data-role="background"] .sl-char-chip-badge, [data-color-scheme="light"] .sl-char-chip[data-role="background"] .sl-char-chip-role { color: var(--sl-text-muted); } [data-color-scheme="light"] .sl-char-chip[data-role="background"] .sl-char-chip-role { background: rgba(148, 163, 184, 0.08); border-color: rgba(148, 163, 184, 0.16); } [data-color-scheme="light"] .sl-char-chip[data-role="os"] { background: #fff7e8; border-color: rgba(217, 119, 6, 0.24); } [data-color-scheme="light"] .sl-char-chip[data-role="os"] .sl-char-chip-badge, [data-color-scheme="light"] .sl-char-chip[data-role="os"] .sl-char-chip-role { color: #b45309; } [data-color-scheme="light"] .sl-char-chip[data-role="os"] .sl-char-chip-role { background: rgba(217, 119, 6, 0.08); border-color: rgba(217, 119, 6, 0.18); } [data-color-scheme="light"] .sl-char-chip[data-role="insert"] { background: #f5ecff; border-color: rgba(147, 51, 234, 0.22); } [data-color-scheme="light"] .sl-char-chip[data-role="insert"] .sl-char-chip-badge, [data-color-scheme="light"] .sl-char-chip[data-role="insert"] .sl-char-chip-role { color: #9333ea; } [data-color-scheme="light"] .sl-char-chip[data-role="insert"] .sl-char-chip-role { background: rgba(147, 51, 234, 0.08); border-color: rgba(147, 51, 234, 0.18); } [data-color-scheme="light"] .sl-audio-cell--selected, [data-color-scheme="light"] .sl-audio-btn--select.sl-audio-status-btn--active { color: var(--sl-gold); border-color: rgba(217, 119, 6, 0.32); background: rgba(217, 119, 6, 0.08); } [data-color-scheme="light"] .sl-audio-cell--rejected, [data-color-scheme="light"] .sl-audio-btn--reject.sl-audio-status-btn--active, [data-color-scheme="light"] .sl-card-save-indicator--error, [data-color-scheme="light"] .sl-meta-delete-btn:hover, [data-color-scheme="light"] .sl-audio-btn--delete:hover, [data-color-scheme="light"] .sl-char-chip-remove:hover { color: var(--sl-danger); border-color: rgba(220, 38, 38, 0.28); } /* ── Shot row labels, empty states, audio badges ── */ [data-color-scheme="light"] .sl-shot-row-label { color: var(--sl-text); } [data-color-scheme="light"] .sl-shot-row--active .sl-shot-row-label { color: var(--sl-accent); } [data-color-scheme="light"] .sl-shot-row-empty { color: var(--sl-text-dim); } [data-color-scheme="light"] .sl-shot-row-audio { color: var(--sl-text-dim); } [data-color-scheme="light"] .sl-shot-row--add .sl-shot-row-label { color: var(--sl-text-dim); } [data-color-scheme="light"] .sl-shot-row--add:hover .sl-shot-row-label { color: var(--sl-accent); } /* ── Strip cell label (shot number on thumbnails) ── */ [data-color-scheme="light"] .sl-strip-cell-label { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); } /* ── Expanded filmstrip wrapper ── */ [data-color-scheme="light"] .sl-filmstrip-wrapper--expanded .sl-strip-expand-toggle { color: var(--sl-accent); border-color: rgba(26, 117, 210, 0.3); } /* ── Character cue line ── */ [data-color-scheme="light"] .sl-line-character { color: var(--sl-char-color, var(--sl-text-soft)); border-left-color: var(--sl-char-color, var(--sl-border)); } /* ── Transition line (dark: #777) ── */ [data-color-scheme="light"] .sl-line-transition { color: var(--sl-text-muted); } /* ── Location bar ── */ [data-color-scheme="light"] .sl-location-bar { color: var(--sl-text-muted); } [data-color-scheme="light"] .sl-location-bar select { background: var(--sl-surface-muted); color: var(--sl-text); border-color: var(--sl-border); } [data-color-scheme="light"] .sl-location-bar .sl-location-label { color: var(--sl-text-dim); } [data-color-scheme="light"] .sl-location-bar .sl-location-world-badge { color: var(--sl-success); } /* ── Boneyard word hover ── */ [data-color-scheme="light"] .sl-boneyard-word:hover { background: rgba(217, 119, 6, 0.08); } [data-color-scheme="light"] .sl-boneyard-body ::selection { background: rgba(217, 119, 6, 0.18); } [data-color-scheme="light"] .sl-boneyard-block + .sl-boneyard-block { border-top-color: var(--sl-border); } /* ── Boneyard body border-left ── */ [data-color-scheme="light"] .sl-boneyard-body { border-left-color: rgba(217, 119, 6, 0.35); } /* ── Script lines text selection ── */ [data-color-scheme="light"] .sl-script-lines-text ::selection { background: rgba(26, 117, 210, 0.2); } /* ── Viewer toolbar buttons ── */ [data-color-scheme="light"] .sl-toolbar-btn { background: rgba(255, 255, 255, 0.8); border-color: rgba(15, 23, 42, 0.15); color: var(--sl-text-muted); backdrop-filter: blur(8px); } [data-color-scheme="light"] .sl-toolbar-btn:hover { background: rgba(255, 255, 255, 0.95); color: var(--sl-text); } [data-color-scheme="light"] .sl-toolbar-btn--enhance:hover { color: #7c3aed; border-color: rgba(124, 58, 237, 0.3); } [data-color-scheme="light"] .sl-toolbar-btn--extend:hover { color: var(--sl-accent); border-color: rgba(26, 117, 210, 0.3); } [data-color-scheme="light"] .sl-toolbar-btn--extend .sl-extend-dropdown-arrow { color: var(--sl-text-dim); } [data-color-scheme="light"] .sl-toolbar-btn--motion:hover { color: #0284c7; border-color: rgba(2, 132, 199, 0.3); } [data-color-scheme="light"] .sl-toolbar-btn--motion.sl-toolbar-btn--generating { color: #0284c7; } [data-color-scheme="light"] .sl-toolbar-btn--download:hover { color: var(--sl-text-soft); border-color: rgba(71, 85, 105, 0.3); } [data-color-scheme="light"] .sl-toolbar-btn--delete:hover { color: var(--sl-danger); border-color: rgba(220, 38, 38, 0.3); } [data-color-scheme="light"] .sl-toolbar-btn--parallax:hover { color: #0d9488; border-color: rgba(13, 148, 136, 0.3); } [data-color-scheme="light"] .sl-toolbar-btn--3d:hover { color: var(--sl-accent); border-color: rgba(26, 117, 210, 0.3); } [data-color-scheme="light"] .sl-toolbar-btn--3d.sl-toolbar-btn--loading::after { border-top-color: var(--sl-accent); } [data-color-scheme="light"] .sl-viewer-toolbar-divider { background: rgba(15, 23, 42, 0.1); } /* ── Media cell stitch ── */ [data-color-scheme="light"] .sl-media-cell--stitch { border-color: rgba(26, 117, 210, 0.3); color: var(--sl-accent); } [data-color-scheme="light"] .sl-media-cell--stitch:hover { border-color: rgba(26, 117, 210, 0.6); color: #125eae; } [data-color-scheme="light"] .sl-stitch-badge { background: rgba(26, 117, 210, 0.85); color: #ffffff; } /* ── Media cell upload (dark: rgba(255,255,255,0.3)) ── */ [data-color-scheme="light"] .sl-media-cell--upload { border-color: rgba(15, 23, 42, 0.2); } [data-color-scheme="light"] .sl-media-cell--upload:hover { border-color: rgba(15, 23, 42, 0.4); } /* ── Meta delete button ── */ [data-color-scheme="light"] .sl-meta-delete-btn { color: var(--sl-text-dim); } [data-color-scheme="light"] .sl-meta-delete-btn:hover { color: var(--sl-danger); background: rgba(220, 38, 38, 0.06); border-color: rgba(220, 38, 38, 0.2); } /* ── Form controls (dark: color #ddd) ── */ [data-color-scheme="light"] .sl-field select, [data-color-scheme="light"] .sl-field input, [data-color-scheme="light"] .sl-field textarea { color: var(--sl-text); } [data-color-scheme="light"] .sl-field input::placeholder, [data-color-scheme="light"] .sl-field textarea::placeholder { color: var(--sl-text-dim); } /* ── Custom field back button (dark: #999) ── */ [data-color-scheme="light"] .sl-field-custom-back { background: var(--sl-surface-muted); color: var(--sl-text-muted); } /* ── Video params text inputs (dark: color #ddd) ── */ [data-color-scheme="light"] .sl-vp-text-wrap input, [data-color-scheme="light"] .sl-vp-text-wrap textarea { color: var(--sl-text); } [data-color-scheme="light"] .sl-vp-text-wrap input::placeholder, [data-color-scheme="light"] .sl-vp-text-wrap textarea::placeholder { color: var(--sl-text-dim); } /* ── Audio status button (dark: color #999) ── */ [data-color-scheme="light"] .sl-audio-status-btn { background: var(--sl-surface-muted); color: var(--sl-text-muted); } [data-color-scheme="light"] .sl-audio-status-btn:hover { color: var(--sl-text); } /* ── Audio cell badge (dark: #999) ── */ [data-color-scheme="light"] .sl-audio-cell-badge { color: var(--sl-text-muted); } [data-color-scheme="light"] .sl-audio-cell--active .sl-audio-cell-badge { color: var(--sl-accent); } /* ── Enhance / Extend Modals ── */ [data-color-scheme="light"] .sl-modal-backdrop { background: rgba(15, 23, 42, 0.4); } [data-color-scheme="light"] .sl-modal { background: #ffffff; border-color: var(--sl-border); box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18); } [data-color-scheme="light"] .sl-modal-title { color: var(--sl-text); } [data-color-scheme="light"] .sl-modal-close { color: var(--sl-text-muted); } [data-color-scheme="light"] .sl-modal-close:hover { color: var(--sl-text); } [data-color-scheme="light"] .sl-modal-thumb { background: var(--sl-surface-muted); } [data-color-scheme="light"] .sl-modal-meta-primary { color: var(--sl-text-soft); } [data-color-scheme="light"] .sl-modal-meta-secondary { color: var(--sl-text-muted); } [data-color-scheme="light"] .sl-modal-credits { color: var(--sl-text-muted); } [data-color-scheme="light"] .sl-modal-btn--cancel { background: rgba(15, 23, 42, 0.06); color: var(--sl-text-soft); } [data-color-scheme="light"] .sl-modal-btn--cancel:hover { background: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .sl-modal-btn--primary { background: #4f46e5; color: #ffffff; } [data-color-scheme="light"] .sl-modal-btn--primary:hover { background: #4338ca; } /* ── Enhance modal specific ── */ [data-color-scheme="light"] .sl-enhance-slider-label { color: var(--sl-text-soft); } [data-color-scheme="light"] .sl-enhance-slider-value { color: #7c3aed; } [data-color-scheme="light"] .sl-enhance-slider { accent-color: #4f46e5; } [data-color-scheme="light"] .sl-enhance-hint { color: var(--sl-text-muted); } [data-color-scheme="light"] .sl-enhance-prompt-label { color: var(--sl-text-soft); } [data-color-scheme="light"] .sl-enhance-prompt-label span { color: var(--sl-text-muted); } [data-color-scheme="light"] .sl-enhance-prompt { background: var(--sl-surface-muted); border-color: var(--sl-border); color: var(--sl-text); } [data-color-scheme="light"] .sl-enhance-prompt::placeholder { color: var(--sl-text-dim); } [data-color-scheme="light"] .sl-enhance-archive-row label { color: var(--sl-text-soft); } /* ── Extend modal specific ── */ [data-color-scheme="light"] .sl-extend-field-label { color: var(--sl-text-soft); } [data-color-scheme="light"] .sl-extend-ratio-select { background: var(--sl-surface-muted); border-color: var(--sl-border); color: var(--sl-text); } [data-color-scheme="light"] .sl-extend-anchor-btn { background: var(--sl-surface-muted); border-color: var(--sl-border); color: var(--sl-text-soft); } [data-color-scheme="light"] .sl-extend-anchor-btn:hover { border-color: rgba(26, 117, 210, 0.3); color: var(--sl-text); } [data-color-scheme="light"] .sl-extend-anchor-btn--active { background: var(--sl-accent-soft); border-color: var(--sl-accent); color: var(--sl-accent); } /* ── 3D Splat Viewer ── */ [data-color-scheme="light"] .sl-splat-wrapper { background: #e8ecf1; } [data-color-scheme="light"] .sl-splat-loading { color: var(--sl-text-muted); } [data-color-scheme="light"] .sl-splat-controls { background: rgba(255, 255, 255, 0.88); border-color: var(--sl-border); backdrop-filter: blur(8px); } [data-color-scheme="light"] .sl-splat-ctrl-btn { background: rgba(15, 23, 42, 0.04); border-color: var(--sl-border); color: var(--sl-text-soft); } [data-color-scheme="light"] .sl-splat-ctrl-btn:hover { background: rgba(15, 23, 42, 0.08); color: var(--sl-text); } [data-color-scheme="light"] .sl-splat-ctrl-btn--active { background: var(--sl-accent-soft); border-color: rgba(26, 117, 210, 0.3); color: var(--sl-accent); } [data-color-scheme="light"] .sl-splat-ctrl-btn--exit:hover { color: var(--sl-danger); border-color: rgba(220, 38, 38, 0.25); } /* ── Parallax Preview ── */ [data-color-scheme="light"] .sl-parallax-badge { background: rgba(26, 117, 210, 0.12); border-color: rgba(26, 117, 210, 0.25); color: var(--sl-accent); } [data-color-scheme="light"] .sl-parallax-controls { background: rgba(255, 255, 255, 0.85); border-color: var(--sl-border); backdrop-filter: blur(8px); } [data-color-scheme="light"] .sl-parallax-chip { background: rgba(15, 23, 42, 0.05); border-color: var(--sl-border); color: var(--sl-text-soft); } [data-color-scheme="light"] .sl-parallax-chip:hover { background: var(--sl-accent-soft); border-color: rgba(26, 117, 210, 0.3); color: var(--sl-text); } [data-color-scheme="light"] .sl-parallax-chip--active { background: var(--sl-accent-soft-strong); border-color: rgba(26, 117, 210, 0.45); color: var(--sl-accent); } [data-color-scheme="light"] .sl-parallax-export-btn { background: rgba(21, 128, 61, 0.1); border-color: rgba(21, 128, 61, 0.3); color: var(--sl-success); } [data-color-scheme="light"] .sl-parallax-export-btn:hover { background: rgba(21, 128, 61, 0.18); color: #166534; } [data-color-scheme="light"] .sl-parallax-settings { background: rgba(255, 255, 255, 0.85); border-color: var(--sl-border); backdrop-filter: blur(8px); } [data-color-scheme="light"] .sl-parallax-slider-label { color: var(--sl-text-muted); } [data-color-scheme="light"] .sl-parallax-slider { background: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .sl-parallax-slider::-webkit-slider-thumb { background: var(--sl-accent); } [data-color-scheme="light"] .sl-parallax-slider::-moz-range-thumb { background: var(--sl-accent); } [data-color-scheme="light"] .sl-parallax-slider-value { color: var(--sl-text-soft); } [data-color-scheme="light"] .sl-parallax-select { background: rgba(15, 23, 42, 0.04); border-color: var(--sl-border); color: var(--sl-text-soft); } [data-color-scheme="light"] .sl-parallax-select:hover { border-color: rgba(26, 117, 210, 0.3); color: var(--sl-text); } /* ── 3D Progress Toast ── */ [data-color-scheme="light"] .sl-3d-progress-toast { background: rgba(255, 255, 255, 0.95); border-color: rgba(26, 117, 210, 0.2); color: var(--sl-text-soft); box-shadow: 0 4px 24px rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .sl-3d-progress-spinner { border-color: rgba(26, 117, 210, 0.15); border-top-color: var(--sl-accent); } [data-color-scheme="light"] .sl-3d-progress-timer { color: var(--sl-text-muted); } /* ── Strip arrow (dark: #bbb) ── */ [data-color-scheme="light"] .sl-strip-arrow { color: var(--sl-text-muted); } [data-color-scheme="light"] .sl-strip-arrow:hover:not(:disabled) { color: var(--sl-text); } /* ── Scrollbar styling ── */ [data-color-scheme="light"] .sl-scene-nav::-webkit-scrollbar-thumb, [data-color-scheme="light"] .sl-strip::-webkit-scrollbar-thumb, [data-color-scheme="light"] .sl-shot-grid::-webkit-scrollbar-thumb, [data-color-scheme="light"] .sl-shot-row-versions::-webkit-scrollbar-thumb, [data-color-scheme="light"] .sl-script-lines-text::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.15); } /* ── Viewer play overlay ── */ [data-color-scheme="light"] .sl-viewer-play-overlay:hover { opacity: 0.7; } /* ========================================================================= * PROFILE PAGE * ========================================================================= */ [data-color-scheme="light"] .profile-page { --profile-bg: radial-gradient(circle at top left, rgba(59, 130, 246, 0.16), transparent 38%), radial-gradient(circle at top right, rgba(245, 158, 11, 0.12), transparent 32%), linear-gradient(180deg, #eef4fb 0%, #f9f5eb 52%, #eef6ff 100%); --profile-surface: rgba(255, 255, 255, 0.76); --profile-surface-strong: rgba(255, 255, 255, 0.92); --profile-surface-muted: rgba(248, 250, 252, 0.84); --profile-border: rgba(15, 23, 42, 0.12); --profile-border-strong: rgba(26, 117, 210, 0.22); --profile-text: #0f172a; --profile-text-soft: #475569; --profile-text-muted: #64748b; background: var(--profile-bg); } [data-color-scheme="light"] .profile-page .settings-tabs, [data-color-scheme="light"] .profile-page .admin-section { border-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .profile-page .settings-tabs .tab { color: var(--profile-text-muted); } [data-color-scheme="light"] .profile-page .settings-tabs .tab:hover { color: var(--profile-text); background: rgba(255, 255, 255, 0.5); } [data-color-scheme="light"] .profile-page .settings-tabs .tab.active { color: #1a75d2; } [data-color-scheme="light"] .profile-page .profile-name, [data-color-scheme="light"] .profile-page .card-title, [data-color-scheme="light"] .profile-page .section-subtitle, [data-color-scheme="light"] .profile-page .profile-list-name, [data-color-scheme="light"] .profile-page .ai-provider-name, [data-color-scheme="light"] .profile-page .waitlist-item-name, [data-color-scheme="light"] .profile-page .profile-modal-title, [data-color-scheme="light"] .profile-page .prism-modal-title, [data-color-scheme="light"] .profile-page .master-edit-title, [data-color-scheme="light"] .profile-page .waitlist-toggle-title, [data-color-scheme="light"] .profile-page .info-value { color: var(--profile-text); text-shadow: none; } [data-color-scheme="light"] .profile-page .profile-email, [data-color-scheme="light"] .profile-page .info-label, [data-color-scheme="light"] .profile-page .date-relative, [data-color-scheme="light"] .profile-page .permission-item, [data-color-scheme="light"] .profile-page .section-hint, [data-color-scheme="light"] .profile-page .form-label, [data-color-scheme="light"] .profile-page .danger-zone-description, [data-color-scheme="light"] .profile-page .loading-indicator, [data-color-scheme="light"] .profile-page .profile-list-context, [data-color-scheme="light"] .profile-page .ai-provider-status, [data-color-scheme="light"] .profile-page .ai-provider-status .masked-key, [data-color-scheme="light"] .profile-page .ai-badges-hint, [data-color-scheme="light"] .profile-page .ai-badges-empty, [data-color-scheme="light"] .profile-page .form-label-compact, [data-color-scheme="light"] .profile-page .admin-tools-hint, [data-color-scheme="light"] .profile-page .master-edit-subtitle, [data-color-scheme="light"] .profile-page .waitlist-toggle-subtitle, [data-color-scheme="light"] .profile-page .waitlist-stat-label, [data-color-scheme="light"] .profile-page .waitlist-item-email, [data-color-scheme="light"] .profile-page .waitlist-item-date, [data-color-scheme="light"] .profile-page .profile-modal-close, [data-color-scheme="light"] .profile-page .monospace { color: var(--profile-text-soft); } [data-color-scheme="light"] .profile-page .profile-card, [data-color-scheme="light"] .profile-page .profile-list-item, [data-color-scheme="light"] .profile-page .ai-provider-item, [data-color-scheme="light"] .profile-page .image-model-info, [data-color-scheme="light"] .profile-page .provider-badge, [data-color-scheme="light"] .profile-page .btn-icon, [data-color-scheme="light"] .profile-page .ai-provider-badge, [data-color-scheme="light"] .profile-page .admin-tool-btn, [data-color-scheme="light"] .profile-page .waitlist-stat, [data-color-scheme="light"] .profile-page .waitlist-item, [data-color-scheme="light"] .profile-page .profile-modal, [data-color-scheme="light"] .profile-page .prism-modal, [data-color-scheme="light"] .profile-page .no-profiles-message, [data-color-scheme="light"] .profile-page .no-providers-message, [data-color-scheme="light"] .profile-page .waitlist-empty { background: var(--profile-surface); border-color: var(--profile-border); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08); color: var(--profile-text-soft); backdrop-filter: blur(18px) saturate(1.2); } [data-color-scheme="light"] .profile-page .profile-card:hover, [data-color-scheme="light"] .profile-page .profile-list-item:hover, [data-color-scheme="light"] .profile-page .ai-provider-item:hover, [data-color-scheme="light"] .profile-page .waitlist-item:hover, [data-color-scheme="light"] .profile-page .btn-icon:hover, [data-color-scheme="light"] .profile-page .admin-tool-btn:hover, [data-color-scheme="light"] .profile-page .ai-provider-badge:hover { background: var(--profile-surface-strong); border-color: var(--profile-border-strong); box-shadow: 0 22px 46px rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .profile-page .card-header, [data-color-scheme="light"] .profile-page .profile-section, [data-color-scheme="light"] .profile-page .profile-modal-header, [data-color-scheme="light"] .profile-page .profile-modal-footer, [data-color-scheme="light"] .profile-page .prism-modal-header, [data-color-scheme="light"] .profile-page .ai-key-drawer { border-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .profile-page .form-input, [data-color-scheme="light"] .profile-page .form-select, [data-color-scheme="light"] .profile-page .form-select-compact, [data-color-scheme="light"] .profile-page .form-input-compact { background: rgba(255, 255, 255, 0.94); border-color: rgba(15, 23, 42, 0.12); color: var(--profile-text); } [data-color-scheme="light"] .profile-page .form-input::placeholder { color: var(--profile-text-muted); } [data-color-scheme="light"] .profile-page .form-input:focus, [data-color-scheme="light"] .profile-page .form-select:focus { border-color: rgba(26, 117, 210, 0.42); background: #ffffff; box-shadow: 0 0 0 3px rgba(26, 117, 210, 0.1); } [data-color-scheme="light"] .profile-page .form-select option { background: #ffffff; color: #0f172a; } [data-color-scheme="light"] .profile-page .btn-secondary, [data-color-scheme="light"] .profile-page .admin-tool-btn, [data-color-scheme="light"] .profile-page .profile-modal-close, [data-color-scheme="light"] .profile-page .prism-modal-close { background: rgba(255, 255, 255, 0.72); border-color: rgba(15, 23, 42, 0.12); color: var(--profile-text-soft); } [data-color-scheme="light"] .profile-page .btn-secondary:hover, [data-color-scheme="light"] .profile-page .profile-modal-close:hover, [data-color-scheme="light"] .profile-page .prism-modal-close:hover { background: #ffffff; border-color: rgba(26, 117, 210, 0.22); color: var(--profile-text); } [data-color-scheme="light"] .profile-page .btn-icon.active, [data-color-scheme="light"] .profile-page .ai-provider-default-badge { background: rgba(26, 117, 210, 0.1); border-color: rgba(26, 117, 210, 0.24); color: #125eae; } [data-color-scheme="light"] .profile-page .profile-avatar-placeholder, [data-color-scheme="light"] .profile-page .waitlist-item-avatar-placeholder { background: linear-gradient(135deg, #1a75d2 0%, #125eae 58%, #f59e0b 120%); } [data-color-scheme="light"] .profile-page .avatar-glow { background: radial-gradient(circle, rgba(26, 117, 210, 0.18) 0%, rgba(245, 158, 11, 0.08) 48%, transparent 72%); } [data-color-scheme="light"] .profile-page .profile-modal, [data-color-scheme="light"] .profile-page .prism-modal { background: rgba(255, 255, 255, 0.9); } [data-color-scheme="light"] .profile-page .profile-modal-backdrop { background: rgba(15, 23, 42, 0.22); } [data-color-scheme="light"] .profile-page .prism-modal-backdrop { background: rgba(15, 23, 42, 0.24); } [data-color-scheme="light"] .profile-page .prism-modal { box-shadow: 0 30px 70px rgba(15, 23, 42, 0.18); } [data-color-scheme="light"] .profile-page .ai-provider-icon, [data-color-scheme="light"] .profile-page .provider-badge { background: rgba(15, 23, 42, 0.04); } [data-color-scheme="light"] .profile-page .ai-provider-badge { color: var(--profile-text-soft); } [data-color-scheme="light"] .profile-page .ai-provider-badge.configured, [data-color-scheme="light"] .profile-page .ai-provider-item.configured, [data-color-scheme="light"] .profile-page .waitlist-item.status-approved { border-color: rgba(22, 163, 74, 0.24); } [data-color-scheme="light"] .profile-page .ai-provider-badge.configured { background: rgba(22, 163, 74, 0.08); color: #166534; } [data-color-scheme="light"] .profile-page .ai-provider-badge.configured:hover, [data-color-scheme="light"] .profile-page .ai-provider-badge.system-provider.configured:hover { background: rgba(22, 163, 74, 0.12); border-color: rgba(22, 163, 74, 0.3); } [data-color-scheme="light"] .profile-page .ai-badge-dot { background: rgba(100, 116, 139, 0.28); } [data-color-scheme="light"] .profile-page .ai-badge-dot.active, [data-color-scheme="light"] .profile-page .ai-provider-status.configured, [data-color-scheme="light"] .profile-page .ai-badge-check, [data-color-scheme="light"] .profile-page .image-model-badge.recommended, [data-color-scheme="light"] .profile-page .waitlist-stat-count.approved, [data-color-scheme="light"] .profile-page .waitlist-item-status.approved { color: #15803d; } [data-color-scheme="light"] .profile-page .danger-zone-card { border-color: rgba(220, 38, 38, 0.24); background: rgba(254, 242, 242, 0.74); } [data-color-scheme="light"] .profile-page .toggle-slider, [data-color-scheme="light"] .profile-page .master-edit-slider { background: rgba(148, 163, 184, 0.24); border-color: rgba(15, 23, 42, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.44); } [data-color-scheme="light"] .profile-page .toggle-slider::before, [data-color-scheme="light"] .profile-page .master-edit-slider::after { background: #ffffff; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16); } /* ========================================================================= * CHARACTER GALLERY PAGE * ========================================================================= */ [data-color-scheme="light"] .character-gallery-page { background: radial-gradient(circle at top right, rgba(26, 117, 210, 0.14), transparent 34%), linear-gradient(180deg, #eef4fb 0%, #f8f2e7 54%, #eef6ff 100%); } [data-color-scheme="light"] .character-gallery-page .character-breadcrumb, [data-color-scheme="light"] .character-gallery-page .character-breadcrumb .breadcrumb-item, [data-color-scheme="light"] .character-gallery-page .character-breadcrumb .breadcrumb-link, [data-color-scheme="light"] .character-gallery-page .card-actor, [data-color-scheme="light"] .character-gallery-page .card-stat, [data-color-scheme="light"] .character-gallery-page .gallery-empty-state, [data-color-scheme="light"] .character-gallery-page .form-group label, [data-color-scheme="light"] .character-gallery-page .modal-close { color: #64748b; } [data-color-scheme="light"] .character-gallery-page .character-breadcrumb .breadcrumb-link:hover, [data-color-scheme="light"] .character-gallery-page .character-breadcrumb .breadcrumb-current, [data-color-scheme="light"] .character-gallery-page .gallery-title, [data-color-scheme="light"] .character-gallery-page .card-name, [data-color-scheme="light"] .character-gallery-page .modal-header h2 { color: #0f172a; } [data-color-scheme="light"] .character-gallery-page .gallery-search, [data-color-scheme="light"] .character-gallery-page .gallery-filter, [data-color-scheme="light"] .character-gallery-page .btn-secondary, [data-color-scheme="light"] .character-gallery-page .character-card, [data-color-scheme="light"] .character-gallery-page .modal-panel, [data-color-scheme="light"] .character-gallery-page .form-input { background: rgba(255, 255, 255, 0.82); border-color: rgba(15, 23, 42, 0.12); color: #0f172a; box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06); backdrop-filter: blur(16px) saturate(1.2); } [data-color-scheme="light"] .character-gallery-page .character-card:hover { background: rgba(255, 255, 255, 0.96); border-color: rgba(26, 117, 210, 0.24); box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .character-gallery-page .card-portrait-placeholder { background: linear-gradient(135deg, #eef3fb 0%, #f5f8fc 100%); color: rgba(100, 116, 139, 0.45); } [data-color-scheme="light"] .character-gallery-page .gallery-search::placeholder { color: #94a3b8; } [data-color-scheme="light"] .character-gallery-page .gallery-filter option, [data-color-scheme="light"] .character-gallery-page .form-input option { background: #ffffff; color: #0f172a; } [data-color-scheme="light"] .character-gallery-page .gallery-search:focus, [data-color-scheme="light"] .character-gallery-page .form-input:focus { border-color: rgba(26, 117, 210, 0.32); box-shadow: 0 0 0 3px rgba(26, 117, 210, 0.1); } [data-color-scheme="light"] .character-gallery-page .btn-primary { background: linear-gradient(135deg, #1a75d2 0%, #125eae 100%); box-shadow: 0 10px 20px rgba(26, 117, 210, 0.18); } [data-color-scheme="light"] .character-gallery-page .btn-primary:hover { background: linear-gradient(135deg, #125eae 0%, #1e40af 100%); } [data-color-scheme="light"] .character-gallery-page .btn-secondary:hover, [data-color-scheme="light"] .character-gallery-page .modal-close:hover { background: #ffffff; color: #0f172a; } [data-color-scheme="light"] .character-gallery-page .modal-overlay { background: rgba(15, 23, 42, 0.22); } [data-color-scheme="light"] .character-gallery-page .modal-header, [data-color-scheme="light"] .character-gallery-page .modal-footer { border-color: rgba(15, 23, 42, 0.08); } /* ========================================================================= * WAR ROOM PAGE * ========================================================================= */ /* ── Page background & custom properties ── */ [data-color-scheme="light"] .war-room-page { --wr-page-bg: radial-gradient(circle at top right, rgba(139, 92, 246, 0.12), transparent 32%), radial-gradient(circle at top left, rgba(59, 130, 246, 0.14), transparent 30%), linear-gradient(180deg, #eef4fb 0%, #f8f2ea 48%, #edf6ff 100%); --wr-surface: rgba(255, 255, 255, 0.8); --wr-surface-strong: rgba(255, 255, 255, 0.94); --wr-surface-muted: rgba(248, 250, 252, 0.82); --wr-border: rgba(15, 23, 42, 0.12); --wr-text: #0f172a; --wr-text-soft: #475569; --wr-text-muted: #64748b; background: var(--wr-page-bg); } /* ── Primary text (headings, titles, strong labels) ── */ [data-color-scheme="light"] .wr-title, [data-color-scheme="light"] .wr-panel-header h2, [data-color-scheme="light"] .wr-adv-title, [data-color-scheme="light"] .wr-theme-title, [data-color-scheme="light"] .wr-impl-group-header, [data-color-scheme="light"] .wr-drawer-entity-name, [data-color-scheme="light"] .wr-drawer-detail-value, [data-color-scheme="light"] .wr-drawer-section-header, [data-color-scheme="light"] .wr-drawer-action-text, [data-color-scheme="light"] .wr-briefing-section-header, [data-color-scheme="light"] .wr-briefing-action-text, [data-color-scheme="light"] .wr-matrix-tooltip-name { color: var(--wr-text); } /* ── Secondary text (labels, muted captions, metadata) ── */ [data-color-scheme="light"] .wr-subtitle, [data-color-scheme="light"] .wr-last-updated, [data-color-scheme="light"] .wr-stat-label, [data-color-scheme="light"] .wr-loading, [data-color-scheme="light"] .wr-chip, [data-color-scheme="light"] .wr-adv-date, [data-color-scheme="light"] .wr-matrix-labels, [data-color-scheme="light"] .wr-matrix-tick, [data-color-scheme="light"] .wr-matrix-quadrant, [data-color-scheme="light"] .wr-matrix-tooltip-detail, [data-color-scheme="light"] .wr-heatmap th, [data-color-scheme="light"] .wr-theme-specialists, [data-color-scheme="light"] .wr-theme-count, [data-color-scheme="light"] .wr-impl-group-count, [data-color-scheme="light"] .wr-impl-group-chevron, [data-color-scheme="light"] .wr-impl-source, [data-color-scheme="light"] .md-rendered, [data-color-scheme="light"] .md-rendered em, [data-color-scheme="light"] .wr-drawer-close, [data-color-scheme="light"] .wr-drawer-tab, [data-color-scheme="light"] .wr-drawer-loading, [data-color-scheme="light"] .wr-drawer-detail-label, [data-color-scheme="light"] .wr-drawer-chevron, [data-color-scheme="light"] .wr-drawer-no-data, [data-color-scheme="light"] .wr-drawer-pricing-table th, [data-color-scheme="light"] .wr-drawer-pricing-table td, [data-color-scheme="light"] .wr-drawer-strength-list li, [data-color-scheme="light"] .wr-drawer-weakness-list li, [data-color-scheme="light"] .wr-drawer-timeline-event, [data-color-scheme="light"] .wr-drawer-action-source, [data-color-scheme="light"] .wr-briefing-meta, [data-color-scheme="light"] .wr-briefing-loading-text, [data-color-scheme="light"] .wr-briefing-section-chevron, [data-color-scheme="light"] .wr-drawer-action-checkbox, [data-color-scheme="light"] .wr-category-refresh-btn { color: var(--wr-text-soft); } /* ── Glass-card surfaces ── */ [data-color-scheme="light"] .wr-stat-card, [data-color-scheme="light"] .wr-panel, [data-color-scheme="light"] .wr-chip, [data-color-scheme="light"] .wr-adv-item, [data-color-scheme="light"] .wr-theme-card, [data-color-scheme="light"] .wr-impl-group, [data-color-scheme="light"] .wr-drawer-details-grid, [data-color-scheme="light"] .wr-drawer-section, [data-color-scheme="light"] .wr-drawer-action-item, [data-color-scheme="light"] .wr-briefing-section { background: var(--wr-surface); border-color: var(--wr-border); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07); backdrop-filter: blur(18px) saturate(1.2); } /* ── Hover / active states ── */ [data-color-scheme="light"] .wr-stat-card:hover, [data-color-scheme="light"] .wr-chip:hover, [data-color-scheme="light"] .wr-chip.active, [data-color-scheme="light"] .wr-adv-item:hover, [data-color-scheme="light"] .wr-adv-item.expanded, [data-color-scheme="light"] .wr-impl-group-header:hover, [data-color-scheme="light"] .wr-drawer-section-header:hover, [data-color-scheme="light"] .wr-briefing-section-header:hover { background: var(--wr-surface-strong); } /* ── Refresh / action buttons ── */ [data-color-scheme="light"] .wr-refresh-btn { background: rgba(15, 23, 42, 0.06); color: var(--wr-text-soft); border-color: rgba(15, 23, 42, 0.14); } [data-color-scheme="light"] .wr-refresh-btn:hover:not(:disabled) { background: rgba(15, 23, 42, 0.1); color: var(--wr-text); border-color: rgba(15, 23, 42, 0.22); } [data-color-scheme="light"] .wr-category-refresh-btn:hover { color: #6d28d9; background: rgba(109, 40, 217, 0.08); } [data-color-scheme="light"] .wr-drawer-refresh-btn { background: rgba(109, 40, 217, 0.1); border-color: rgba(109, 40, 217, 0.22); color: #6d28d9; } [data-color-scheme="light"] .wr-drawer-refresh-btn:hover:not(:disabled) { background: rgba(109, 40, 217, 0.16); border-color: rgba(109, 40, 217, 0.35); } /* ── Stats row values ── */ /* ── Advisory feed badges (category colors on light bg) ── */ [data-color-scheme="light"] .wr-adv-badge { color: var(--wr-text); } [data-color-scheme="light"] .wr-adv-badge[data-category="creative_tools"] { background: rgba(139, 92, 246, 0.16); } [data-color-scheme="light"] .wr-adv-badge[data-category="distribution"] { background: rgba(59, 130, 246, 0.16); } [data-color-scheme="light"] .wr-adv-badge[data-category="social_creator"] { background: rgba(34, 197, 94, 0.16); } [data-color-scheme="light"] .wr-adv-badge[data-category="studios"] { background: rgba(249, 115, 22, 0.16); } [data-color-scheme="light"] .wr-adv-badge[data-category="competitive"] { background: rgba(239, 68, 68, 0.16); } [data-color-scheme="light"] .wr-adv-badge[data-category="market_intelligence"] { background: rgba(6, 182, 212, 0.16); } [data-color-scheme="light"] .wr-adv-badge.wr-clickable:hover { outline-color: rgba(15, 23, 42, 0.3); } /* ── Filter chip active state ── */ [data-color-scheme="light"] .wr-chip:hover, [data-color-scheme="light"] .wr-chip.active { background: rgba(109, 40, 217, 0.1); border-color: rgba(109, 40, 217, 0.3); color: #6d28d9; } /* ── Internal borders ── */ [data-color-scheme="light"] .wr-adv-content, [data-color-scheme="light"] .md-rendered .md-h1, [data-color-scheme="light"] .wr-drawer-header, [data-color-scheme="light"] .wr-drawer-pricing-table th, [data-color-scheme="light"] .wr-drawer-pricing-table td, [data-color-scheme="light"] .wr-drawer-strength-list li, [data-color-scheme="light"] .wr-drawer-weakness-list li, [data-color-scheme="light"] .wr-impl-item { border-color: rgba(15, 23, 42, 0.08); } /* ── Threat / Opportunity matrix ── */ [data-color-scheme="light"] .wr-matrix-grid { border-left-color: rgba(15, 23, 42, 0.16); border-bottom-color: rgba(15, 23, 42, 0.16); } [data-color-scheme="light"] .wr-matrix-gridline-h, [data-color-scheme="light"] .wr-matrix-gridline-v { background: rgba(15, 23, 42, 0.05); } [data-color-scheme="light"] .wr-matrix-dot { border-color: rgba(255, 255, 255, 0.95); box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .wr-matrix-dot:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16); } /* ── Tooltips & drawer panel ── */ [data-color-scheme="light"] .wr-matrix-tooltip, [data-color-scheme="light"] .wr-heatmap-tooltip, [data-color-scheme="light"] .wr-drawer-panel { background: rgba(255, 255, 255, 0.96); border-color: rgba(15, 23, 42, 0.12); color: var(--wr-text); box-shadow: 0 22px 48px rgba(15, 23, 42, 0.18); } /* ── Heatmap ── */ [data-color-scheme="light"] .wr-heatmap-row-label, [data-color-scheme="light"] .wr-theme-title, [data-color-scheme="light"] .md-rendered strong, [data-color-scheme="light"] .md-rendered .md-h1, [data-color-scheme="light"] .md-rendered .md-h2, [data-color-scheme="light"] .md-rendered .md-h3 { color: var(--wr-text); } [data-color-scheme="light"] .wr-heatmap-cell:hover { box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .wr-heatmap-cell.no-data { background: rgba(148, 163, 184, 0.14); } /* ── Theme bar ── */ [data-color-scheme="light"] .wr-theme-bar-track { background: rgba(148, 163, 184, 0.18); } [data-color-scheme="light"] .wr-theme-bar-fill { background: linear-gradient(90deg, #7c3aed 0%, #1a75d2 100%); } /* ── Links ── */ [data-color-scheme="light"] .md-rendered a, [data-color-scheme="light"] .wr-drawer-url-list a, [data-color-scheme="light"] .wr-heatmap-row-label.wr-clickable:hover { color: #1a75d2; } /* ── Markdown rendered (code) ── */ [data-color-scheme="light"] .md-rendered .md-inline-code { background: rgba(26, 117, 210, 0.08); color: #4338ca; } [data-color-scheme="light"] .md-rendered .md-code-block { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.08); color: var(--wr-text-soft); } /* ── Executive briefing panel ── */ [data-color-scheme="light"] .wr-panel-briefing { background: rgba(180, 131, 10, 0.04); border-left-color: #b8860b; } [data-color-scheme="light"] .wr-briefing-empty { color: var(--wr-text-muted); } [data-color-scheme="light"] .wr-briefing-empty strong { color: #92400e; } [data-color-scheme="light"] .wr-briefing-empty-icon { color: rgba(180, 131, 10, 0.5); } [data-color-scheme="light"] .wr-briefing-loading-spinner { border-color: rgba(180, 131, 10, 0.18); border-top-color: #b8860b; } /* ── Briefing action items ── */ [data-color-scheme="light"] .wr-briefing-action-item { background: rgba(109, 40, 217, 0.04); border-color: rgba(109, 40, 217, 0.12); } [data-color-scheme="light"] .wr-briefing-action-text strong { color: #6d28d9; } /* ── Drawer ── */ [data-color-scheme="light"] .wr-drawer-backdrop { background: rgba(15, 23, 42, 0.2); } [data-color-scheme="light"] .wr-drawer-close:hover, [data-color-scheme="light"] .wr-drawer-tab:hover { color: var(--wr-text); } [data-color-scheme="light"] .wr-drawer-tab.active { color: #6d28d9; border-bottom-color: #7c3aed; } [data-color-scheme="light"] .wr-drawer-detail { background: rgba(248, 250, 252, 0.6); } [data-color-scheme="light"] .wr-drawer-pricing-table tbody tr:nth-child(even) td { background: rgba(15, 23, 42, 0.025); } [data-color-scheme="light"] .wr-drawer-timeline-date { color: #6d28d9; } /* ── Drawer badges (category + threat/opp) ── */ [data-color-scheme="light"] .wr-drawer-badge { color: var(--wr-text); background: rgba(15, 23, 42, 0.06); border-color: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .wr-drawer-badge[data-category="creative_tools"] { background: rgba(139, 92, 246, 0.12); border-color: rgba(139, 92, 246, 0.24); } [data-color-scheme="light"] .wr-drawer-badge[data-category="distribution"] { background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.24); } [data-color-scheme="light"] .wr-drawer-badge[data-category="social_creator"] { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.24); } [data-color-scheme="light"] .wr-drawer-badge[data-category="studios"] { background: rgba(249, 115, 22, 0.12); border-color: rgba(249, 115, 22, 0.24); } [data-color-scheme="light"] .wr-drawer-badge[data-category="competitive"] { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.24); } [data-color-scheme="light"] .wr-drawer-badge[data-category="market_intelligence"] { background: rgba(6, 182, 212, 0.12); border-color: rgba(6, 182, 212, 0.24); } [data-color-scheme="light"] .wr-badge-wave { background: rgba(109, 40, 217, 0.08); border-color: rgba(109, 40, 217, 0.18); } [data-color-scheme="light"] .wr-badge-threat-high { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.22); color: #b91c1c; } [data-color-scheme="light"] .wr-badge-threat-medium { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.22); color: #92400e; } [data-color-scheme="light"] .wr-badge-threat-low { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.18); } [data-color-scheme="light"] .wr-badge-opp { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.18); } /* ── Intel badges (confidence + age) ── */ [data-color-scheme="light"] .wr-drawer-conf-badge { background: rgba(109, 40, 217, 0.08); color: #6d28d9; border-color: rgba(109, 40, 217, 0.18); } [data-color-scheme="light"] .wr-drawer-age-badge.fresh { background: rgba(22, 163, 74, 0.08); color: #15803d; border-color: rgba(22, 163, 74, 0.18); } [data-color-scheme="light"] .wr-drawer-age-badge.stale { background: rgba(220, 38, 38, 0.08); color: #b91c1c; border-color: rgba(220, 38, 38, 0.18); } /* ── Scrollbars ── */ [data-color-scheme="light"] .wr-drawer-body::-webkit-scrollbar-thumb, [data-color-scheme="light"] .wr-advisory-feed::-webkit-scrollbar-thumb, [data-color-scheme="light"] .wr-themes-container::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.3); } [data-color-scheme="light"] .wr-advisory-feed, [data-color-scheme="light"] .wr-themes-container { scrollbar-color: rgba(100, 116, 139, 0.3) transparent; } /* ========================================================================= * ADMIN PAGES * Comprehensive light mode for admin dashboard, tables, forms, navigation, * and all management panels (admin.css + admin sub-pages). * ========================================================================= */ /* ── 1. Page Layout & Variables ── */ [data-color-scheme="light"] .admin-page { --admin-bg: radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 28%), radial-gradient(circle at top right, rgba(139, 92, 246, 0.1), transparent 30%), linear-gradient(180deg, #eef4fb 0%, #f8f2e8 46%, #edf6ff 100%); --admin-surface: rgba(255, 255, 255, 0.82); --admin-surface-strong: rgba(255, 255, 255, 0.96); --admin-border: rgba(15, 23, 42, 0.12); --admin-text: #0f172a; --admin-text-soft: #475569; --admin-text-muted: #64748b; background: var(--admin-bg); } [data-color-scheme="light"] .admin-title { color: var(--admin-text); text-shadow: none; } [data-color-scheme="light"] .admin-subtitle { color: var(--admin-text-soft); } /* ── 2. Section Headers & Titles ── */ [data-color-scheme="light"] .admin-page .section-header h2, [data-color-scheme="light"] .admin-page .section-title, [data-color-scheme="light"] .admin-page .overview-card-value, [data-color-scheme="light"] .admin-page .user-card-name, [data-color-scheme="light"] .admin-page .waitlist-item-name, [data-color-scheme="light"] .admin-page .tenant-card-name, [data-color-scheme="light"] .admin-page .master-edit-title, [data-color-scheme="light"] .admin-page .waitlist-toggle-title, [data-color-scheme="light"] .admin-page .system-info-value, [data-color-scheme="light"] .admin-page .service-name, [data-color-scheme="light"] .admin-page .tenant-stat-count, [data-color-scheme="light"] .admin-page .financial-card-value, [data-color-scheme="light"] .admin-page .budget-allocation-amount, [data-color-scheme="light"] .admin-page .ai-cost-value, [data-color-scheme="light"] .admin-page .tier-breakdown-count, [data-color-scheme="light"] .admin-page .growth-metric-value, [data-color-scheme="light"] .admin-page .specialist-card-name, [data-color-scheme="light"] .admin-page .specialist-modal-title, [data-color-scheme="light"] .admin-page .tenant-modal-title, [data-color-scheme="light"] .admin-page .activity-details-header h3, [data-color-scheme="light"] .admin-page .tenant-detail-value, [data-color-scheme="light"] .admin-page .tenant-org-name, [data-color-scheme="light"] .admin-page .promotion-status-label, [data-color-scheme="light"] .admin-page .feature-override-name, [data-color-scheme="light"] .admin-page .budget-phase-value, [data-color-scheme="light"] .admin-page .health-card-title, [data-color-scheme="light"] .admin-page .chart-card-title, [data-color-scheme="light"] .admin-page .template-name, [data-color-scheme="light"] .admin-page .preview-header h3, [data-color-scheme="light"] .admin-page .ai-provider-card-name { color: var(--admin-text); text-shadow: none; } [data-color-scheme="light"] .admin-page .overview-card-title, [data-color-scheme="light"] .admin-page .section-desc, [data-color-scheme="light"] .admin-page .section-hint, [data-color-scheme="light"] .admin-page .loading-state, [data-color-scheme="light"] .admin-page .user-card-email, [data-color-scheme="light"] .admin-page .user-card-meta, [data-color-scheme="light"] .admin-page .active-toggle, [data-color-scheme="light"] .admin-page .beta-toggle, [data-color-scheme="light"] .admin-page .waitlist-toggle-subtitle, [data-color-scheme="light"] .admin-page .waitlist-stat-label, [data-color-scheme="light"] .admin-page .waitlist-item-email, [data-color-scheme="light"] .admin-page .waitlist-item-date, [data-color-scheme="light"] .admin-page .system-info-label, [data-color-scheme="light"] .admin-page .service-detail, [data-color-scheme="light"] .admin-page .form-label, [data-color-scheme="light"] .admin-page .master-edit-subtitle, [data-color-scheme="light"] .admin-page .tenant-card-slug, [data-color-scheme="light"] .admin-page .tenant-card-meta, [data-color-scheme="light"] .admin-page .tenant-detail-label, [data-color-scheme="light"] .admin-page .tenant-detail-value.mono, [data-color-scheme="light"] .admin-page .tenant-org-slug, [data-color-scheme="light"] .admin-page .financial-card-label, [data-color-scheme="light"] .admin-page .financial-card-sub, [data-color-scheme="light"] .admin-page .goal-target, [data-color-scheme="light"] .admin-page .tier-breakdown-name, [data-color-scheme="light"] .admin-page .tier-breakdown-revenue, [data-color-scheme="light"] .admin-page .budget-phase-label, [data-color-scheme="light"] .admin-page .budget-allocation-label, [data-color-scheme="light"] .admin-page .budget-allocation-percent, [data-color-scheme="light"] .admin-page .ai-cost-label, [data-color-scheme="light"] .admin-page .ai-cost-period, [data-color-scheme="light"] .admin-page .purchase-date, [data-color-scheme="light"] .admin-page .growth-metric-label, [data-color-scheme="light"] .admin-page .health-card-detail, [data-color-scheme="light"] .admin-page .chart-bar-label, [data-color-scheme="light"] .admin-page .chart-card-period, [data-color-scheme="light"] .admin-page .chart-loading, [data-color-scheme="light"] .admin-page .chart-empty, [data-color-scheme="light"] .admin-page .activity-column-title, [data-color-scheme="light"] .admin-page .activity-loading, [data-color-scheme="light"] .admin-page .activity-empty, [data-color-scheme="light"] .admin-page .activity-item-sub, [data-color-scheme="light"] .admin-page .specialist-card-display, [data-color-scheme="light"] .admin-page .specialist-category-label, [data-color-scheme="light"] .admin-page .specialist-detail-label, [data-color-scheme="light"] .admin-page .specialist-section-title, [data-color-scheme="light"] .admin-page .specialist-conv-meta, [data-color-scheme="light"] .admin-page .specialist-conv-empty, [data-color-scheme="light"] .admin-page .specialist-chat-welcome-sub, [data-color-scheme="light"] .admin-page .ai-providers-loading, [data-color-scheme="light"] .admin-page .ai-provider-card-models, [data-color-scheme="light"] .admin-page .ai-provider-card-default, [data-color-scheme="light"] .admin-page .ai-chat-empty, [data-color-scheme="light"] .admin-page .ai-chat-meta, [data-color-scheme="light"] .admin-page .template-subject, [data-color-scheme="light"] .admin-page .template-description, [data-color-scheme="light"] .admin-page .template-section-header, [data-color-scheme="light"] .admin-page .preview-meta, [data-color-scheme="light"] .admin-page .preview-empty, [data-color-scheme="light"] .admin-page .admin-hint, [data-color-scheme="light"] .admin-page .save-status, [data-color-scheme="light"] .admin-page .overview-section-title, [data-color-scheme="light"] .admin-page .promotion-detail-label, [data-color-scheme="light"] .admin-page .checkbox-label, [data-color-scheme="light"] .admin-page .internal-toggle-label, [data-color-scheme="light"] .admin-page .loading-indicator { color: var(--admin-text-soft); } /* ── 3. Tab Navigation ── */ [data-color-scheme="light"] .admin-page .settings-tabs .tab { background: rgba(255, 255, 255, 0.7); border-color: rgba(15, 23, 42, 0.12); color: var(--admin-text-muted); box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05); } [data-color-scheme="light"] .admin-page .settings-tabs .tab:hover { background: rgba(255, 255, 255, 0.9); } [data-color-scheme="light"] .admin-page .settings-tabs .tab.active { background: rgba(255, 255, 255, 0.95); box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.06); } /* ── 4. Tab Content Panels ── */ [data-color-scheme="light"] .admin-page .tab-content, [data-color-scheme="light"] .admin-page .tab-content[class*="content-spectrum-"] { background: linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(244, 248, 252, 0.96) 100%); border-color: rgba(15, 23, 42, 0.12); box-shadow: 0 24px 56px rgba(15, 23, 42, 0.08); backdrop-filter: blur(18px) saturate(1.15); } /* ── 5. Cards & Surfaces ── */ [data-color-scheme="light"] .admin-page .overview-card, [data-color-scheme="light"] .admin-page .overview-card-secondary, [data-color-scheme="light"] .admin-page .settings-section, [data-color-scheme="light"] .admin-page .user-card, [data-color-scheme="light"] .admin-page .waitlist-stat, [data-color-scheme="light"] .admin-page .waitlist-item, [data-color-scheme="light"] .admin-page .system-info-item, [data-color-scheme="light"] .admin-page .service-health-row, [data-color-scheme="light"] .admin-page .tenant-stat, [data-color-scheme="light"] .admin-page .tenant-card, [data-color-scheme="light"] .admin-page .financial-card, [data-color-scheme="light"] .admin-page .tier-breakdown-card, [data-color-scheme="light"] .admin-page .budget-allocation-item, [data-color-scheme="light"] .admin-page .ai-cost-item, [data-color-scheme="light"] .admin-page .purchase-item, [data-color-scheme="light"] .admin-page .growth-metric, [data-color-scheme="light"] .admin-page .health-card, [data-color-scheme="light"] .admin-page .chart-card, [data-color-scheme="light"] .admin-page .activity-column, [data-color-scheme="light"] .admin-page .activity-item, [data-color-scheme="light"] .admin-page .feedback-card, [data-color-scheme="light"] .admin-page .feature-override-card, [data-color-scheme="light"] .admin-page .promotion-status, [data-color-scheme="light"] .admin-page .specialist-card, [data-color-scheme="light"] .admin-page .ai-provider-card, [data-color-scheme="light"] .admin-page .ai-collapsible-section, [data-color-scheme="light"] .admin-page .routing-profile-card, [data-color-scheme="light"] .admin-page .ar-settings-section, [data-color-scheme="light"] .admin-page .ar-candidate-card, [data-color-scheme="light"] .admin-page .ar-run-card, [data-color-scheme="light"] .admin-page .knowledge-section, [data-color-scheme="light"] .admin-page .advisory-item, [data-color-scheme="light"] .admin-page .tenant-org-item { background: var(--admin-surface); border-color: var(--admin-border); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07); backdrop-filter: blur(16px) saturate(1.15); } [data-color-scheme="light"] .admin-page .overview-card:hover, [data-color-scheme="light"] .admin-page .user-card:hover, [data-color-scheme="light"] .admin-page .waitlist-item:hover, [data-color-scheme="light"] .admin-page .tenant-card:hover, [data-color-scheme="light"] .admin-page .specialist-card:hover, [data-color-scheme="light"] .admin-page .ai-provider-card:hover, [data-color-scheme="light"] .admin-page .feedback-card:hover, [data-color-scheme="light"] .admin-page .feature-override-card:hover { background: var(--admin-surface-strong); border-color: rgba(26, 117, 210, 0.22); box-shadow: 0 22px 48px rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .admin-page .user-card, [data-color-scheme="light"] .admin-page .tenant-card, [data-color-scheme="light"] .admin-page .specialist-card, [data-color-scheme="light"] .admin-page .ai-provider-card { box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .admin-page .user-card:hover, [data-color-scheme="light"] .admin-page .tenant-card:hover, [data-color-scheme="light"] .admin-page .specialist-card:hover, [data-color-scheme="light"] .admin-page .ai-provider-card:hover { box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .admin-page .overview-card-secondary .overview-card-value { color: var(--admin-text-soft); } /* ── 6. Form Elements ── */ [data-color-scheme="light"] .admin-page .form-input, [data-color-scheme="light"] .admin-page .form-select, [data-color-scheme="light"] .admin-page .role-select, [data-color-scheme="light"] .admin-page .tenant-plan-select, [data-color-scheme="light"] .admin-page .escalate-select, [data-color-scheme="light"] .admin-page .ar-select, [data-color-scheme="light"] .admin-page .ar-input, [data-color-scheme="light"] .admin-page .routing-editor-select, [data-color-scheme="light"] .admin-page .routing-profile-tier-select { background: rgba(255, 255, 255, 0.94); border-color: rgba(15, 23, 42, 0.12); color: var(--admin-text); } [data-color-scheme="light"] .admin-page .form-input::placeholder, [data-color-scheme="light"] .admin-page .specialist-chat-textarea::placeholder, [data-color-scheme="light"] .admin-page .ai-chat-input::placeholder { color: var(--admin-text-muted); } [data-color-scheme="light"] .admin-page .form-input:hover, [data-color-scheme="light"] .admin-page .form-select:hover, [data-color-scheme="light"] .admin-page .role-select:hover, [data-color-scheme="light"] .admin-page .tenant-plan-select:hover { background: #ffffff; border-color: rgba(15, 23, 42, 0.18); } [data-color-scheme="light"] .admin-page .form-input:focus, [data-color-scheme="light"] .admin-page .form-select:focus, [data-color-scheme="light"] .admin-page .role-select:focus, [data-color-scheme="light"] .admin-page .tenant-plan-select:focus, [data-color-scheme="light"] .admin-page .specialist-chat-textarea:focus { border-color: rgba(26, 117, 210, 0.32); box-shadow: 0 0 0 3px rgba(26, 117, 210, 0.1); } [data-color-scheme="light"] .admin-page .form-select option, [data-color-scheme="light"] .admin-page .role-select option, [data-color-scheme="light"] .admin-page .tenant-plan-select option { background: #ffffff; color: #0f172a; } /* ── 7. Buttons ── */ [data-color-scheme="light"] .admin-page .btn { border-color: rgba(15, 23, 42, 0.12); color: var(--admin-text-soft); } [data-color-scheme="light"] .admin-page .btn-primary { background: rgba(26, 117, 210, 0.1); border-color: rgba(26, 117, 210, 0.3); color: #125eae; } [data-color-scheme="light"] .admin-page .btn-primary:hover { background: rgba(26, 117, 210, 0.18); border-color: rgba(26, 117, 210, 0.45); } [data-color-scheme="light"] .admin-page .btn-secondary { background: rgba(255, 255, 255, 0.74); border-color: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .admin-page .btn-secondary:hover { background: rgba(255, 255, 255, 0.92); border-color: rgba(15, 23, 42, 0.18); } [data-color-scheme="light"] .admin-page .btn-warning { background: rgba(217, 119, 6, 0.08); border-color: rgba(217, 119, 6, 0.3); color: #b45309; } [data-color-scheme="light"] .admin-page .btn-warning:hover { background: rgba(217, 119, 6, 0.15); border-color: rgba(217, 119, 6, 0.45); } [data-color-scheme="light"] .admin-page .btn-danger, [data-color-scheme="light"] .admin-page .btn-delete { background: rgba(220, 38, 38, 0.06); border-color: rgba(220, 38, 38, 0.25); color: #dc2626; } [data-color-scheme="light"] .admin-page .btn-danger:hover, [data-color-scheme="light"] .admin-page .btn-delete:hover { background: rgba(220, 38, 38, 0.12); border-color: rgba(220, 38, 38, 0.4); } [data-color-scheme="light"] .admin-page .btn-archive { background: rgba(100, 116, 139, 0.06); border-color: rgba(100, 116, 139, 0.25); color: #475569; } [data-color-scheme="light"] .admin-page .btn-archive:hover { background: rgba(100, 116, 139, 0.12); border-color: rgba(100, 116, 139, 0.4); } [data-color-scheme="light"] .admin-page .quick-action-btn { background: rgba(109, 40, 217, 0.06); border-color: rgba(109, 40, 217, 0.2); color: #6d28d9; } [data-color-scheme="light"] .admin-page .quick-action-btn:hover { background: rgba(109, 40, 217, 0.12); border-color: rgba(109, 40, 217, 0.35); color: #5b21b6; } /* ── 8. Toggle Switches ── */ [data-color-scheme="light"] .admin-page .toggle-slider { background: rgba(148, 163, 184, 0.24); } [data-color-scheme="light"] .admin-page .toggle-slider::before { background: #ffffff; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16); } [data-color-scheme="light"] .admin-page .internal-toggle { background: rgba(255, 255, 255, 0.6); border-color: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .admin-page .internal-toggle:hover { background: rgba(255, 255, 255, 0.8); border-color: rgba(15, 23, 42, 0.18); } [data-color-scheme="light"] .admin-page .internal-toggle:has(input:checked) { background: rgba(100, 116, 139, 0.1); border-color: rgba(100, 116, 139, 0.25); } [data-color-scheme="light"] .admin-page .ar-toggle-track { background: rgba(148, 163, 184, 0.3); } /* ── 9. User Cards ── */ [data-color-scheme="light"] .admin-page .user-card-inactive { border-color: rgba(220, 38, 38, 0.2); } [data-color-scheme="light"] .admin-page .user-card-current { border-color: rgba(26, 117, 210, 0.3); background: rgba(26, 117, 210, 0.04); } [data-color-scheme="light"] .admin-page .current-user-badge { background: rgba(26, 117, 210, 0.08); border-color: rgba(26, 117, 210, 0.2); color: #125eae; } [data-color-scheme="light"] .admin-page .member-count { background: rgba(26, 117, 210, 0.1); color: #1a75d2; } /* ── 10. Empty, Error, Loading States ── */ [data-color-scheme="light"] .admin-page .empty-state { color: var(--admin-text-muted); } [data-color-scheme="light"] .admin-page .empty-state h3 { color: var(--admin-text-soft); } [data-color-scheme="light"] .admin-page .error-message { background: rgba(220, 38, 38, 0.06); border-color: rgba(220, 38, 38, 0.2); color: #dc2626; } [data-color-scheme="light"] .admin-page .error-message p { color: rgba(220, 38, 38, 0.7); } [data-color-scheme="light"] .admin-page .spinner { border-color: rgba(15, 23, 42, 0.1); border-top-color: var(--admin-text-soft); } [data-color-scheme="light"] .admin-page .waitlist-empty { color: var(--admin-text-muted); background: rgba(15, 23, 42, 0.02); border-color: rgba(15, 23, 42, 0.08); } /* ── 11. Waitlist ── */ [data-color-scheme="light"] .admin-page .waitlist-stat-count { color: #a16207; } [data-color-scheme="light"] .admin-page .waitlist-stat-count.approved { color: #16a34a; } [data-color-scheme="light"] .admin-page .waitlist-stat-count.rejected { color: #dc2626; } [data-color-scheme="light"] .admin-page .waitlist-item.status-approved { border-color: rgba(22, 163, 74, 0.25); } [data-color-scheme="light"] .admin-page .waitlist-item.status-rejected { border-color: rgba(220, 38, 38, 0.2); } [data-color-scheme="light"] .admin-page .waitlist-item-status.pending { background: rgba(217, 119, 6, 0.08); color: #a16207; border-color: rgba(217, 119, 6, 0.2); } [data-color-scheme="light"] .admin-page .waitlist-item-status.approved { background: rgba(22, 163, 74, 0.08); color: #16a34a; border-color: rgba(22, 163, 74, 0.2); } [data-color-scheme="light"] .admin-page .waitlist-item-status.rejected { background: rgba(220, 38, 38, 0.06); color: #dc2626; border-color: rgba(220, 38, 38, 0.2); } /* ── 12. System Info & Service Health ── */ [data-color-scheme="light"] .admin-page .system-info-value.env-production { color: #dc2626; } [data-color-scheme="light"] .admin-page .system-info-value.env-local { color: #1a75d2; } [data-color-scheme="light"] .admin-page .service-status-dot.status-unconfigured { background: rgba(15, 23, 42, 0.15); } /* ── 13. Tenant Tab ── */ [data-color-scheme="light"] .admin-page .tenant-stat-count.plan-free { color: #64748b; } [data-color-scheme="light"] .admin-page .tenant-stat-count.plan-indie { color: #16a34a; } [data-color-scheme="light"] .admin-page .tenant-stat-count.plan-team { color: #1a75d2; } [data-color-scheme="light"] .admin-page .tenant-stat-count.plan-studio { color: #7c3aed; } [data-color-scheme="light"] .admin-page .tenant-stat-count.plan-enterprise { color: #d97706; } [data-color-scheme="light"] .admin-page .tenant-stat-count.plan-beta { color: #db2777; } [data-color-scheme="light"] .admin-page .plan-badge.plan-free { color: #475569; background: rgba(100, 116, 139, 0.1); border-color: rgba(100, 116, 139, 0.25); } [data-color-scheme="light"] .admin-page .plan-badge.plan-indie { color: #16a34a; background: rgba(22, 163, 74, 0.08); border-color: rgba(22, 163, 74, 0.2); } [data-color-scheme="light"] .admin-page .plan-badge.plan-team { color: #1a75d2; background: rgba(26, 117, 210, 0.08); border-color: rgba(26, 117, 210, 0.2); } [data-color-scheme="light"] .admin-page .plan-badge.plan-studio { color: #7c3aed; background: rgba(124, 58, 237, 0.08); border-color: rgba(124, 58, 237, 0.2); } [data-color-scheme="light"] .admin-page .plan-badge.plan-enterprise { color: #d97706; background: rgba(217, 119, 6, 0.08); border-color: rgba(217, 119, 6, 0.2); } [data-color-scheme="light"] .admin-page .beta-badge { color: #db2777; background: rgba(219, 39, 119, 0.06); border-color: rgba(219, 39, 119, 0.2); } [data-color-scheme="light"] .admin-page .internal-badge { color: #475569; background: rgba(100, 116, 139, 0.08); border-color: rgba(100, 116, 139, 0.2); } [data-color-scheme="light"] .admin-page .tenant-trial-badge { color: #d97706; background: rgba(217, 119, 6, 0.06); border-color: rgba(217, 119, 6, 0.2); } [data-color-scheme="light"] .admin-page .tenant-card-archived { background: rgba(220, 38, 38, 0.03); border-color: rgba(220, 38, 38, 0.15); } /* ── 14. Modals ── */ [data-color-scheme="light"] .admin-page .tenant-modal-overlay, [data-color-scheme="light"] .admin-page .specialist-modal-overlay, [data-color-scheme="light"] .admin-page .activity-details-overlay { background: rgba(15, 23, 42, 0.25); backdrop-filter: blur(6px); } [data-color-scheme="light"] .admin-page .tenant-modal, [data-color-scheme="light"] .admin-page .specialist-modal, [data-color-scheme="light"] .admin-page .activity-details-modal { background: #ffffff; border-color: rgba(15, 23, 42, 0.12); box-shadow: 0 25px 50px rgba(15, 23, 42, 0.15); } [data-color-scheme="light"] .admin-page .tenant-modal-close, [data-color-scheme="light"] .admin-page .activity-details-close { color: var(--admin-text-muted); } [data-color-scheme="light"] .admin-page .tenant-modal-close:hover, [data-color-scheme="light"] .admin-page .activity-details-close:hover { color: var(--admin-text); } /* ── 15. Features Tab ── */ [data-color-scheme="light"] .admin-page .feature-override-card.state-enabled { border-color: rgba(22, 163, 74, 0.3); background: rgba(22, 163, 74, 0.04); } [data-color-scheme="light"] .admin-page .feature-override-card.state-disabled { border-color: rgba(220, 38, 38, 0.3); background: rgba(220, 38, 38, 0.04); } [data-color-scheme="light"] .admin-page .tri-state-toggle { background: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .admin-page .tri-state-btn { color: var(--admin-text-muted); } [data-color-scheme="light"] .admin-page .tri-state-btn:hover { background: rgba(15, 23, 42, 0.06); color: var(--admin-text-soft); } /* ── 16. Financials Tab ── */ [data-color-scheme="light"] .admin-page .financial-card-primary { background: rgba(22, 163, 74, 0.05); border-color: rgba(22, 163, 74, 0.2); } [data-color-scheme="light"] .admin-page .financial-card-primary .financial-card-value { color: #16a34a; } [data-color-scheme="light"] .admin-page .goal-current { color: #16a34a; } [data-color-scheme="light"] .admin-page .purchase-buyer { color: var(--admin-text); } [data-color-scheme="light"] .admin-page .purchase-amount { color: #16a34a; } [data-color-scheme="light"] .admin-page .purchase-credits { background: rgba(124, 58, 237, 0.08); color: #7c3aed; } [data-color-scheme="light"] .admin-page .tier-breakdown-card.tier-free .tier-breakdown-count { color: #64748b; } [data-color-scheme="light"] .admin-page .tier-breakdown-card.tier-indie .tier-breakdown-count { color: #16a34a; } [data-color-scheme="light"] .admin-page .tier-breakdown-card.tier-team .tier-breakdown-count { color: #1a75d2; } [data-color-scheme="light"] .admin-page .tier-breakdown-card.tier-studio .tier-breakdown-count { color: #7c3aed; } [data-color-scheme="light"] .admin-page .tier-breakdown-card.tier-enterprise .tier-breakdown-count { color: #d97706; } [data-color-scheme="light"] .admin-page .budget-allocation-item.budget-salary .budget-allocation-amount { color: #16a34a; } [data-color-scheme="light"] .admin-page .budget-allocation-item.budget-ai .budget-allocation-amount { color: #7c3aed; } [data-color-scheme="light"] .admin-page .budget-allocation-item.budget-infra .budget-allocation-amount { color: #1a75d2; } [data-color-scheme="light"] .admin-page .budget-allocation-item.budget-reinvest .budget-allocation-amount { color: #d97706; } [data-color-scheme="light"] .admin-page .budget-phase.phase-bootstrap .budget-phase-value { color: #64748b; } [data-color-scheme="light"] .admin-page .budget-phase.phase-growth .budget-phase-value { color: #d97706; } [data-color-scheme="light"] .admin-page .budget-phase.phase-sustainable .budget-phase-value { color: #16a34a; } [data-color-scheme="light"] .admin-page .budget-allocation-icon { background: rgba(15, 23, 42, 0.04); } [data-color-scheme="light"] .admin-page .growth-metric-value { color: #16a34a; } /* ── 17. Feedback Tab ── */ [data-color-scheme="light"] .admin-page .feedback-actions .btn-primary { color: #ffffff; } [data-color-scheme="light"] .admin-page .feedback-actions .btn-accent { color: #ffffff; } [data-color-scheme="light"] .admin-page .feedback-escalated { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.2); color: #059669; } [data-color-scheme="light"] .admin-page .feedback-status-badge.status-new { color: #1a75d2; } [data-color-scheme="light"] .admin-page .feedback-status-badge.status-acknowledged { color: #d97706; } [data-color-scheme="light"] .admin-page .feedback-status-badge.status-in_progress { color: #7c3aed; } [data-color-scheme="light"] .admin-page .feedback-status-badge.status-resolved { color: #059669; } [data-color-scheme="light"] .admin-page .feedback-status-badge.status-wont_fix { color: #64748b; } /* ── 18. Activity Tab ── */ [data-color-scheme="light"] .admin-page #tab-activity .activity-list { border-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .admin-page #tab-activity .activity-item { border-bottom-color: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .admin-page #tab-activity .activity-item:hover:not(.activity-header) { background: rgba(15, 23, 42, 0.02); } [data-color-scheme="light"] .admin-page #tab-activity .activity-item.activity-header { background: rgba(15, 23, 42, 0.03); color: var(--admin-text-muted); border-bottom-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .admin-page #tab-activity .activity-time { color: var(--admin-text-muted); } [data-color-scheme="light"] .admin-page #tab-activity .activity-user { color: var(--admin-text-soft); } [data-color-scheme="light"] .admin-page #tab-activity .activity-resource-type { color: var(--admin-text-soft); } [data-color-scheme="light"] .admin-page #tab-activity .activity-resource-id { color: var(--admin-text-muted); } [data-color-scheme="light"] .admin-page #tab-activity .activity-ip { color: rgba(15, 23, 42, 0.35); } [data-color-scheme="light"] .admin-page #tab-activity .activity-action-badge.action-user { color: #1a75d2; } [data-color-scheme="light"] .admin-page #tab-activity .activity-action-badge.action-script { color: #16a34a; } [data-color-scheme="light"] .admin-page #tab-activity .activity-action-badge.action-annotation { color: #d97706; } [data-color-scheme="light"] .admin-page #tab-activity .activity-action-badge.action-org { color: #7c3aed; } [data-color-scheme="light"] .admin-page #tab-activity .activity-action-badge.action-production { color: #db2777; } [data-color-scheme="light"] .admin-page #tab-activity .activity-action-badge.action-ai { color: #0891b2; } [data-color-scheme="light"] .admin-page #tab-activity .activity-action-badge.action-other { color: #64748b; } [data-color-scheme="light"] .admin-page .activity-details-label { color: var(--admin-text-muted); } [data-color-scheme="light"] .admin-page .activity-details-value { color: var(--admin-text); } [data-color-scheme="light"] .admin-page .activity-details-section h4 { color: var(--admin-text-soft); } [data-color-scheme="light"] .admin-page .activity-details-json { background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.08); color: var(--admin-text-soft); } [data-color-scheme="light"] .admin-page .activity-item-main { color: var(--admin-text); } [data-color-scheme="light"] .admin-page .activity-item-badge.beta { color: #7c3aed; } [data-color-scheme="light"] .admin-page .activity-item-badge.new { color: #16a34a; } [data-color-scheme="light"] .admin-page .activity-item-badge.bug { color: #dc2626; } [data-color-scheme="light"] .admin-page .activity-item-badge.feature_request { color: #1a75d2; } /* ── 19. Email Templates Tab ── */ [data-color-scheme="light"] .admin-page .email-templates-sidebar, [data-color-scheme="light"] .admin-page .email-templates-preview { background: rgba(255, 255, 255, 0.82); border-color: var(--admin-border); } [data-color-scheme="light"] .admin-page .email-templates-sidebar h3 { color: var(--admin-text); } [data-color-scheme="light"] .admin-page .template-item { background: rgba(255, 255, 255, 0.6); border-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .admin-page .template-item:hover { background: rgba(255, 255, 255, 0.9); border-color: rgba(15, 23, 42, 0.14); } [data-color-scheme="light"] .admin-page .template-item.active { background: rgba(26, 117, 210, 0.06); border-color: rgba(26, 117, 210, 0.25); } [data-color-scheme="light"] .admin-page .template-badge-system { background: rgba(26, 117, 210, 0.08); color: #1a75d2; } [data-color-scheme="light"] .admin-page .template-badge-announcement { background: rgba(22, 163, 74, 0.08); color: #16a34a; } [data-color-scheme="light"] .admin-page .preview-meta strong { color: var(--admin-text); } /* ── 20. Save Status ── */ [data-color-scheme="light"] .admin-page .save-status.success { color: #16a34a; } [data-color-scheme="light"] .admin-page .save-status.error { color: #dc2626; } /* ── 21. Charts ── */ [data-color-scheme="light"] .admin-page .chart-bar-container { background: rgba(15, 23, 42, 0.04); } [data-color-scheme="light"] .admin-page .chart-bar-value { color: var(--admin-text-soft); } [data-color-scheme="light"] .admin-page .goal-progress-bar { background: rgba(15, 23, 42, 0.06); } /* ── 22. Health Badges ── */ [data-color-scheme="light"] .admin-page .health-badge.healthy { color: #16a34a; } [data-color-scheme="light"] .admin-page .health-badge.warning { color: #d97706; } [data-color-scheme="light"] .admin-page .health-badge.critical { color: #dc2626; } [data-color-scheme="light"] .admin-page .health-badge.not_configured { color: #64748b; } [data-color-scheme="light"] .admin-page .health-badge.error { color: #dc2626; } /* ── 23. Specialists Tab ── */ [data-color-scheme="light"] .admin-page .specialist-detail-value { color: var(--admin-text); } [data-color-scheme="light"] .admin-page .specialist-conv-title { color: var(--admin-text); } [data-color-scheme="light"] .admin-page .specialist-chat-welcome-title { color: var(--admin-text-soft); } [data-color-scheme="light"] .admin-page .specialist-tab { color: var(--admin-text-muted); } [data-color-scheme="light"] .admin-page .specialist-tab:hover { color: var(--admin-text-soft); background: rgba(15, 23, 42, 0.04); } [data-color-scheme="light"] .admin-page .specialist-tab.active { color: var(--admin-text); background: rgba(15, 23, 42, 0.06); border-color: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .admin-page .specialist-chat-sidebar { background: rgba(15, 23, 42, 0.02); } [data-color-scheme="light"] .admin-page .specialist-conv-new-btn { background: rgba(99, 102, 241, 0.08); border-color: rgba(99, 102, 241, 0.2); color: #4f46e5; } [data-color-scheme="light"] .admin-page .specialist-conv-new-btn:hover { background: rgba(99, 102, 241, 0.14); } [data-color-scheme="light"] .admin-page .specialist-conv-item.active { background: rgba(99, 102, 241, 0.06); border-left-color: rgba(99, 102, 241, 0.5); } [data-color-scheme="light"] .admin-page .specialist-conv-item:hover { background: rgba(15, 23, 42, 0.03); } [data-color-scheme="light"] .admin-page .specialist-conv-delete:hover { color: #dc2626; background: rgba(220, 38, 38, 0.06); } [data-color-scheme="light"] .admin-page .specialist-chat-message.user { background: rgba(99, 102, 241, 0.08); border-color: rgba(99, 102, 241, 0.2); color: var(--admin-text); } [data-color-scheme="light"] .admin-page .specialist-chat-message.assistant { background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.08); color: var(--admin-text); } [data-color-scheme="light"] .admin-page .specialist-chat-message.error { background: rgba(220, 38, 38, 0.04); border-color: rgba(220, 38, 38, 0.15); color: #dc2626; } [data-color-scheme="light"] .admin-page .specialist-chat-input { border-top-color: rgba(15, 23, 42, 0.1); background: rgba(15, 23, 42, 0.02); } [data-color-scheme="light"] .admin-page .specialist-chat-textarea { background: rgba(255, 255, 255, 0.9); border-color: rgba(15, 23, 42, 0.12); color: var(--admin-text); } [data-color-scheme="light"] .admin-page .specialist-chat-send { background: rgba(99, 102, 241, 0.1); border-color: rgba(99, 102, 241, 0.25); color: #4f46e5; } [data-color-scheme="light"] .admin-page .specialist-chat-send:hover:not(:disabled) { background: rgba(99, 102, 241, 0.18); } [data-color-scheme="light"] .admin-page .specialist-insights-btn { background: rgba(22, 163, 74, 0.06); border-color: rgba(22, 163, 74, 0.2); color: #16a34a; } [data-color-scheme="light"] .admin-page .specialist-insights-btn:hover:not(:disabled) { background: rgba(22, 163, 74, 0.12); border-color: rgba(22, 163, 74, 0.3); } [data-color-scheme="light"] .admin-page .specialist-chat-typing { background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .admin-page .typing-dot { background: rgba(15, 23, 42, 0.25); } [data-color-scheme="light"] .admin-page .knowledge-content, [data-color-scheme="light"] .admin-page .advisory-content { background: rgba(15, 23, 42, 0.02); border-top-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .admin-page .knowledge-section-header:hover, [data-color-scheme="light"] .admin-page .advisory-header:hover { background: rgba(15, 23, 42, 0.02); } [data-color-scheme="light"] .admin-page .knowledge-chevron { color: var(--admin-text-muted); } [data-color-scheme="light"] .admin-page .knowledge-title { color: var(--admin-text); } [data-color-scheme="light"] .admin-page .knowledge-age { color: var(--admin-text-muted); } [data-color-scheme="light"] .admin-page .knowledge-lines { color: rgba(15, 23, 42, 0.35); } [data-color-scheme="light"] .admin-page .advisory-filename { color: var(--admin-text-soft); } [data-color-scheme="light"] .admin-page .advisory-date { color: var(--admin-text-muted); } [data-color-scheme="light"] .admin-page .knowledge-confidence { color: #1a75d2; } [data-color-scheme="light"] .admin-page .knowledge-confidence.conf-high { color: #16a34a; } [data-color-scheme="light"] .admin-page .knowledge-confidence.conf-medium { color: #d97706; } [data-color-scheme="light"] .admin-page .knowledge-confidence.conf-low { color: #dc2626; } [data-color-scheme="light"] .admin-page .knowledge-age.stale { color: #dc2626; } [data-color-scheme="light"] .admin-page .specialist-keyword { background: rgba(124, 58, 237, 0.06); color: #7c3aed; border-color: rgba(124, 58, 237, 0.15); } [data-color-scheme="light"] .admin-page .specialist-schema-name { color: var(--admin-text-soft); background: rgba(15, 23, 42, 0.03); } [data-color-scheme="light"] .admin-page .specialist-url-link { color: #1a75d2; } [data-color-scheme="light"] .admin-page .threat-badge { color: #dc2626; } [data-color-scheme="light"] .admin-page .threat-badge.threat-low { color: #16a34a; } [data-color-scheme="light"] .admin-page .threat-badge.threat-medium { color: #d97706; } [data-color-scheme="light"] .admin-page .threat-badge.threat-high { color: #dc2626; } [data-color-scheme="light"] .admin-page .opportunity-badge { color: #1a75d2; } [data-color-scheme="light"] .admin-page .opportunity-badge.opp-low { color: #64748b; } [data-color-scheme="light"] .admin-page .opportunity-badge.opp-medium { color: #1a75d2; } [data-color-scheme="light"] .admin-page .opportunity-badge.opp-high { color: #16a34a; } [data-color-scheme="light"] .admin-page .opportunity-badge.opp-very-high { color: #7c3aed; } [data-color-scheme="light"] .admin-page .specialist-advisory-badge { color: #d97706; } [data-color-scheme="light"] .admin-page .specialist-api-badge { color: #16a34a; } [data-color-scheme="light"] .admin-page .specialist-detail-value.threat-low { color: #16a34a; } [data-color-scheme="light"] .admin-page .specialist-detail-value.threat-medium { color: #d97706; } [data-color-scheme="light"] .admin-page .specialist-detail-value.threat-high { color: #dc2626; } [data-color-scheme="light"] .admin-page .specialist-detail-value.opp-low { color: #64748b; } [data-color-scheme="light"] .admin-page .specialist-detail-value.opp-medium { color: #1a75d2; } [data-color-scheme="light"] .admin-page .specialist-detail-value.opp-high { color: #16a34a; } [data-color-scheme="light"] .admin-page .specialist-detail-value.opp-very-high { color: #7c3aed; } [data-color-scheme="light"] .admin-page .specialist-fresh-count { color: #16a34a !important; } [data-color-scheme="light"] .admin-page .specialist-stale-count { color: #dc2626 !important; } [data-color-scheme="light"] .admin-page .specialist-advisory-count { color: #d97706 !important; } /* ── 24. AI Controls Tab ── */ [data-color-scheme="light"] .admin-page .ai-provider-gateway-badge { background: rgba(26, 117, 210, 0.06); color: #1a75d2; border-color: rgba(26, 117, 210, 0.15); } [data-color-scheme="light"] .admin-page .ai-chat-sidebar { background: rgba(255, 255, 255, 0.6); border-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .admin-page .ai-chat-control-group .form-label { color: var(--admin-text-muted); } [data-color-scheme="light"] .admin-page .ai-chat-system-toggle { color: var(--admin-text-muted); } [data-color-scheme="light"] .admin-page .ai-chat-system-toggle:hover { color: var(--admin-text); } [data-color-scheme="light"] .admin-page .ai-chat-window { border-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .admin-page .ai-chat-message-user { background: rgba(26, 117, 210, 0.06); border-color: rgba(26, 117, 210, 0.12); color: var(--admin-text); } [data-color-scheme="light"] .admin-page .ai-chat-message-assistant { background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.08); color: var(--admin-text); } [data-color-scheme="light"] .admin-page .ai-chat-message-error { background: rgba(220, 38, 38, 0.04); border-color: rgba(220, 38, 38, 0.15); color: #dc2626; } [data-color-scheme="light"] .admin-page .ai-chat-message-loading { background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .admin-page .ai-chat-loading-dot { background: rgba(15, 23, 42, 0.2); } [data-color-scheme="light"] .admin-page .ai-chat-input-row { border-top-color: rgba(15, 23, 42, 0.1); background: rgba(15, 23, 42, 0.02); } [data-color-scheme="light"] .admin-page .ai-chat-message-content h2, [data-color-scheme="light"] .admin-page .ai-chat-message-content h3, [data-color-scheme="light"] .admin-page .ai-chat-message-content h4 { color: var(--admin-text); } [data-color-scheme="light"] .admin-page .ai-chat-code-block { background: rgba(15, 23, 42, 0.04); } [data-color-scheme="light"] .admin-page .ai-chat-inline-code { background: rgba(26, 117, 210, 0.06); color: #1a75d2; } [data-color-scheme="light"] .admin-page .ai-section-toggle { background: rgba(255, 255, 255, 0.9); } [data-color-scheme="light"] .admin-page .ai-section-toggle:hover { background: rgba(255, 255, 255, 0.98); } /* ── 25. Markdown Rendered Content ── */ [data-color-scheme="light"] .admin-page .md-rendered { color: var(--admin-text-soft); } [data-color-scheme="light"] .admin-page .md-rendered .md-h1 { color: var(--admin-text); border-bottom-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .admin-page .md-rendered .md-h2 { color: var(--admin-text); } [data-color-scheme="light"] .admin-page .md-rendered .md-h3 { color: var(--admin-text); } [data-color-scheme="light"] .admin-page .md-rendered strong { color: var(--admin-text); } [data-color-scheme="light"] .admin-page .md-rendered em { color: var(--admin-text-soft); } [data-color-scheme="light"] .admin-page .md-rendered a { color: #1a75d2; } [data-color-scheme="light"] .admin-page .md-rendered .md-inline-code { background: rgba(124, 58, 237, 0.06); color: #7c3aed; } [data-color-scheme="light"] .admin-page .md-rendered .md-code-block { background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.08); color: var(--admin-text-soft); } /* ── 26. Autoresearch Tab ── */ [data-color-scheme="light"] .admin-page .ar-toggle-btn.active { color: #7c3aed; } [data-color-scheme="light"] .admin-page .ar-filter-btn.active { color: #7c3aed; } [data-color-scheme="light"] .admin-page .ar-card-key { color: #7c3aed; } [data-color-scheme="light"] .admin-page .ar-run-id { color: #7c3aed; } [data-color-scheme="light"] .admin-page .ar-status-indicator.ar-enabled { background: rgba(22, 163, 74, 0.08); color: #16a34a; } [data-color-scheme="light"] .admin-page .score-excellent { color: #16a34a; } [data-color-scheme="light"] .admin-page .score-good { color: #1a75d2; } [data-color-scheme="light"] .admin-page .score-fair { color: #d97706; } [data-color-scheme="light"] .admin-page .score-poor { color: #dc2626; } [data-color-scheme="light"] .admin-page .delta-positive { color: #16a34a; } [data-color-scheme="light"] .admin-page .delta-negative { color: #dc2626; } [data-color-scheme="light"] .admin-page .status-pending { color: #d97706; } [data-color-scheme="light"] .admin-page .status-approved { color: #16a34a; } [data-color-scheme="light"] .admin-page .status-rejected { color: #dc2626; } [data-color-scheme="light"] .admin-page .ar-btn-approve { color: #16a34a; } [data-color-scheme="light"] .admin-page .ar-btn-apply { color: #7c3aed; } [data-color-scheme="light"] .admin-page .ar-btn-reject { color: #dc2626; } [data-color-scheme="light"] .admin-page .ar-error-tag { color: #dc2626; } [data-color-scheme="light"] .admin-page .ar-diff-candidate .ar-diff-header { background: rgba(124, 58, 237, 0.04); } [data-color-scheme="light"] .admin-page .ar-meta-notes pre { background: rgba(15, 23, 42, 0.03); color: var(--admin-text-soft); } /* ── 27. Promotion & Misc ── */ [data-color-scheme="light"] .admin-page .promotion-detail-value { color: var(--admin-text); } [data-color-scheme="light"] .admin-page .toast-notification { box-shadow: 0 4px 20px rgba(15, 23, 42, 0.15); } [data-color-scheme="light"] .admin-page .skeleton { background: linear-gradient(90deg, rgba(15, 23, 42, 0.04) 25%, rgba(15, 23, 42, 0.08) 50%, rgba(15, 23, 42, 0.04) 75%); background-size: 200% 100%; } /* ── 28. Admin Sub-page CSS (council, branding, playground, pipelines, prompt-manager, context-blocks, observability) ── */ /* ========================================================================= * 28a. COUNCIL DASHBOARD * ========================================================================= */ /* Stats */ [data-color-scheme="light"] .council-stat { background: rgba(255, 255, 255, 0.85); border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .council-stat-count { color: #0f172a; } [data-color-scheme="light"] .council-stat-label { color: #64748b; } /* Goals */ [data-color-scheme="light"] .council-goal { border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .council-goal-header { background: rgba(255, 255, 255, 0.7); border-bottom-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .council-goal-header:hover { background: rgba(255, 255, 255, 0.85); } [data-color-scheme="light"] .council-goal-chevron { border-top-color: #94a3b8; } [data-color-scheme="light"] .council-goal-status-cancelled { background: rgba(15, 23, 42, 0.06); color: #94a3b8; border-color: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .council-goal-title { color: #0f172a; } /* Directives */ [data-color-scheme="light"] .council-directive { border-bottom-color: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .council-directive-header { background: rgba(255, 255, 255, 0.5); } [data-color-scheme="light"] .council-directive-icon { color: #94a3b8; } [data-color-scheme="light"] .council-directive-title { color: #334155; } [data-color-scheme="light"] .council-directive-status { color: #94a3b8; } /* Tasks */ [data-color-scheme="light"] .council-task { background: rgba(255, 255, 255, 0.6); border-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .council-task-title { color: #334155; } [data-color-scheme="light"] .council-task-status { color: #94a3b8; } [data-color-scheme="light"] .council-task-category, [data-color-scheme="light"] .council-task-status-in-progress { background: rgba(99, 102, 241, 0.05); } [data-color-scheme="light"] .council-task-status-needs-review { background: rgba(245, 158, 11, 0.06); } [data-color-scheme="light"] .council-task-status-failed { background: rgba(239, 68, 68, 0.05); } /* Buttons */ [data-color-scheme="light"] .council-btn { border-color: rgba(15, 23, 42, 0.15); background: rgba(255, 255, 255, 0.7); color: #334155; } [data-color-scheme="light"] .council-btn:hover { background: rgba(255, 255, 255, 0.9); } /* Activity feed */ [data-color-scheme="light"] .council-activity h3 { color: #475569; } [data-color-scheme="light"] .council-activity-item { border-bottom-color: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .council-activity-action { color: #475569; } /* Empty state */ [data-color-scheme="light"] .council-empty { color: #94a3b8; } [data-color-scheme="light"] .council-empty code { background: rgba(255, 255, 255, 0.7); border-color: rgba(15, 23, 42, 0.1); color: #475569; } /* Result modal */ [data-color-scheme="light"] .council-result-overlay { background: rgba(15, 23, 42, 0.4); } [data-color-scheme="light"] .council-result-content { background: #ffffff; border-color: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .council-result-header { background: #f8fafc; border-bottom-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .council-result-header h3 { color: #0f172a; } [data-color-scheme="light"] .council-result-close { color: #94a3b8; } [data-color-scheme="light"] .council-result-close:hover { color: #0f172a; } [data-color-scheme="light"] .council-result-body { color: #334155; } [data-color-scheme="light"] .council-result-notes { border-left-color: rgba(99, 102, 241, 0.4); background: rgba(99, 102, 241, 0.04); } /* Modal sections & actions */ [data-color-scheme="light"] .council-modal-section { border-bottom-color: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .council-modal-section-label { color: #94a3b8; } [data-color-scheme="light"] .council-modal-actions { background: #f8fafc; border-top-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .council-modal-textarea { background: #ffffff; border-color: rgba(15, 23, 42, 0.12); color: #0f172a; } [data-color-scheme="light"] .council-modal-textarea:focus { border-color: rgba(99, 102, 241, 0.5); } /* Review form */ [data-color-scheme="light"] .council-review-form { background: rgba(99, 102, 241, 0.03); border-left-color: rgba(99, 102, 241, 0.35); } [data-color-scheme="light"] .council-review-summary { color: #0f172a; } [data-color-scheme="light"] .council-review-files { color: #475569; } [data-color-scheme="light"] .council-review-files-label { color: #94a3b8; } [data-color-scheme="light"] .council-review-files code { background: rgba(15, 23, 42, 0.06); color: #334155; } [data-color-scheme="light"] .council-review-item { background: rgba(255, 255, 255, 0.6); border-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .council-review-verify { color: #334155; } [data-color-scheme="light"] .council-review-question-label { color: #334155; } [data-color-scheme="light"] .council-review-input label { color: #334155; } [data-color-scheme="light"] .council-review-field { background: #ffffff; border-color: rgba(15, 23, 42, 0.12); color: #0f172a; } [data-color-scheme="light"] .council-review-field:focus { border-color: rgba(99, 102, 241, 0.5); } [data-color-scheme="light"] .council-section-toggle:hover { color: #475569; } /* ========================================================================= * 28b. BRANDING PAGE * ========================================================================= */ /* Container & panels */ [data-color-scheme="light"] .br-container { background: #f5f7fb; } [data-color-scheme="light"] .br-sidebar { background: #ffffff; border-right-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .br-main { background: #f5f7fb; } [data-color-scheme="light"] .br-detail { background: #ffffff; border-left-color: rgba(15, 23, 42, 0.1); } /* Sidebar header */ /* Nav items */ [data-color-scheme="light"] .br-nav-item:hover { background: rgba(15, 23, 42, 0.04); } [data-color-scheme="light"] .br-nav-item--active { background: rgba(26, 117, 210, 0.06); } [data-color-scheme="light"] .br-nav-item--active:hover { background: rgba(26, 117, 210, 0.09); } [data-color-scheme="light"] .br-nav-item--active .br-nav-label { color: #0f172a; } /* Placeholder */ [data-color-scheme="light"] .br-main-placeholder h2 { color: #475569; } /* Section header */ [data-color-scheme="light"] .br-section-title { color: #0f172a; } [data-color-scheme="light"] .br-section-desc { color: #64748b; } /* Forms */ [data-color-scheme="light"] .br-form-input { background: #ffffff; border-color: rgba(15, 23, 42, 0.12); color: #0f172a; } [data-color-scheme="light"] .br-form-input:focus { border-color: rgba(124, 58, 237, 0.4); } [data-color-scheme="light"] .br-form-input::placeholder { color: #94a3b8; } [data-color-scheme="light"] select.br-form-input { background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(15,23,42,0.3)'/%3E%3C/svg%3E"); } [data-color-scheme="light"] select.br-form-input option { background: #ffffff; color: #0f172a; } /* Color picker */ [data-color-scheme="light"] .br-color-swatch { border-color: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .br-color-hex { background: #ffffff; border-color: rgba(15, 23, 42, 0.12); color: #0f172a; } [data-color-scheme="light"] .br-color-hex:focus { border-color: rgba(124, 58, 237, 0.4); } /* Slider */ [data-color-scheme="light"] .br-slider { background: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .br-slider::-webkit-slider-thumb { border-color: #ffffff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2); } [data-color-scheme="light"] .br-slider-value { color: #475569; } /* Upload zone */ [data-color-scheme="light"] .br-upload-zone { border-color: rgba(15, 23, 42, 0.15); } [data-color-scheme="light"] .br-upload-zone:hover { border-color: rgba(124, 58, 237, 0.3); background: rgba(124, 58, 237, 0.03); } [data-color-scheme="light"] .br-upload-zone--dragover { border-color: rgba(124, 58, 237, 0.5); background: rgba(124, 58, 237, 0.06); } [data-color-scheme="light"] .br-upload-zone--has-logo { border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .br-upload-hint { color: #64748b; } /* Preview frame */ [data-color-scheme="light"] .br-preview-label { color: #64748b; } [data-color-scheme="light"] .br-preview-frame { border-color: rgba(15, 23, 42, 0.1); background-color: #e2e8f0; } [data-color-scheme="light"] .br-preview-empty { color: #94a3b8; } /* Preview button */ [data-color-scheme="light"] .br-preview-btn { background: rgba(124, 58, 237, 0.08); border-color: rgba(124, 58, 237, 0.2); color: #7c3aed; } [data-color-scheme="light"] .br-preview-btn:hover { background: rgba(124, 58, 237, 0.14); border-color: rgba(124, 58, 237, 0.35); } /* Save row */ /* Detail panel */ [data-color-scheme="light"] .br-detail-header { border-bottom-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .br-detail-title { color: #334155; } [data-color-scheme="light"] .br-detail-close:hover { color: #334155; } [data-color-scheme="light"] .br-detail-preview { border-color: rgba(15, 23, 42, 0.1); background: #e2e8f0; } [data-color-scheme="light"] .br-detail-meta { color: #64748b; } [data-color-scheme="light"] .br-detail-link { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.1); color: #475569; } [data-color-scheme="light"] .br-detail-link:hover { background: rgba(15, 23, 42, 0.08); border-color: rgba(15, 23, 42, 0.15); color: #0f172a; } [data-color-scheme="light"] .br-detail-regen { background: rgba(124, 58, 237, 0.08); border-color: rgba(124, 58, 237, 0.2); color: #7c3aed; } [data-color-scheme="light"] .br-detail-regen:hover { background: rgba(124, 58, 237, 0.14); } /* Generate buttons */ [data-color-scheme="light"] .br-generate-btn { background: rgba(124, 58, 237, 0.08); border-color: rgba(124, 58, 237, 0.2); color: #7c3aed; } [data-color-scheme="light"] .br-generate-btn:hover { background: rgba(124, 58, 237, 0.14); border-color: rgba(124, 58, 237, 0.35); } [data-color-scheme="light"] .br-generate-btn--secondary { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.1); color: #475569; } [data-color-scheme="light"] .br-generate-btn--secondary:hover { background: rgba(15, 23, 42, 0.08); border-color: rgba(15, 23, 42, 0.15); color: #0f172a; } /* Type checkboxes */ [data-color-scheme="light"] .br-type-check { color: #475569; } /* Asset grid */ [data-color-scheme="light"] .br-asset-card { background: #ffffff; border-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .br-asset-card:hover { border-color: rgba(15, 23, 42, 0.15); background: #f8fafc; } [data-color-scheme="light"] .br-asset-card--selected { border-color: rgba(124, 58, 237, 0.35); } [data-color-scheme="light"] .br-asset-thumb { background: #e2e8f0; } [data-color-scheme="light"] .br-asset-type { color: #475569; } [data-color-scheme="light"] .br-asset-format { background: rgba(15, 23, 42, 0.05); color: #64748b; } [data-color-scheme="light"] .br-asset-empty { color: #94a3b8; } /* Info box */ [data-color-scheme="light"] .br-info-box { background: rgba(26, 117, 210, 0.05); border-color: rgba(26, 117, 210, 0.12); color: #1a75d2; } /* Toggle */ [data-color-scheme="light"] .br-toggle { color: #475569; } /* ========================================================================= * 28c. PLAYGROUND * ========================================================================= */ /* Header */ /* Export button */ [data-color-scheme="light"] .pg-export-all-btn { color: #475569; background: rgba(255, 255, 255, 0.7); border-color: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .pg-export-all-btn:hover { color: #0f172a; background: #ffffff; border-color: rgba(15, 23, 42, 0.2); } /* Toolbar */ [data-color-scheme="light"] .pg-toolbar { background: rgba(255, 255, 255, 0.7); border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .pg-tool-btn { color: #475569; background: rgba(255, 255, 255, 0.6); border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .pg-tool-btn:hover { color: #0f766e; background: rgba(13, 148, 136, 0.06); border-color: rgba(13, 148, 136, 0.2); } [data-color-scheme="light"] .pg-tool-icon { color: #0f766e; } /* Empty state */ [data-color-scheme="light"] .pg-empty-state { color: #94a3b8; border-color: rgba(15, 23, 42, 0.1); } /* Card */ [data-color-scheme="light"] .pg-card { background: #ffffff; border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .pg-card:hover { border-color: rgba(15, 23, 42, 0.18); } [data-color-scheme="light"] .pg-card-header { background: #f8fafc; border-bottom-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .pg-card-title .pg-card-type-icon { color: #0f766e; } [data-color-scheme="light"] .pg-card-btn:hover { color: #0f172a; background: rgba(15, 23, 42, 0.05); border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .pg-btn-wide.active { color: #0f766e; background: rgba(13, 148, 136, 0.08); border-color: rgba(13, 148, 136, 0.2); } [data-color-scheme="light"] .pg-btn-close:hover { color: #dc2626; background: rgba(220, 38, 38, 0.06); border-color: rgba(220, 38, 38, 0.15); } [data-color-scheme="light"] .pg-card-body { background: #f5f7fb; } /* Drag states */ [data-color-scheme="light"] .pg-card--dragging { box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.25); } [data-color-scheme="light"] .pg-card--dragover { border-color: rgba(13, 148, 136, 0.4); box-shadow: 0 0 12px rgba(13, 148, 136, 0.1); } /* ---- Prompt Templates Lab ---- */ [data-color-scheme="light"] .pg-promptlab-shell { background: radial-gradient(circle at 8% 0%, rgba(13, 148, 136, 0.08), transparent 40%), radial-gradient(circle at 92% 0%, rgba(26, 117, 210, 0.07), transparent 38%), #f5f7fb; } [data-color-scheme="light"] .pg-promptlab-topbar { border-bottom-color: rgba(15, 23, 42, 0.08); background: rgba(255, 255, 255, 0.6); } [data-color-scheme="light"] .pg-promptlab-layout-toggle { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .pg-promptlab-layout-btn:hover { color: #0f172a; background: rgba(15, 23, 42, 0.05); } [data-color-scheme="light"] .pg-promptlab-layout-btn.is-active { color: #ffffff; background: linear-gradient(120deg, #0d9488, #1a75d2); } [data-color-scheme="light"] .pg-promptlab-label { color: #64748b; } [data-color-scheme="light"] .pg-promptlab-key-picker { border-color: rgba(15, 23, 42, 0.15); background: #ffffff; color: #0f172a; } [data-color-scheme="light"] .pg-promptlab-meta { border-bottom-color: rgba(15, 23, 42, 0.06); background: rgba(255, 255, 255, 0.4); } [data-color-scheme="light"] .pg-promptlab-current { color: #0f172a; } [data-color-scheme="light"] .pg-promptlab-chip { border-color: rgba(15, 23, 42, 0.12); background: rgba(15, 23, 42, 0.04); color: #334155; } [data-color-scheme="light"] .pg-promptlab-chip strong { color: #64748b; } /* Panes */ [data-color-scheme="light"] .pg-promptlab-list-pane, [data-color-scheme="light"] .pg-promptlab-editor-pane, [data-color-scheme="light"] .pg-promptlab-preview-pane, [data-color-scheme="light"] .pg-promptlab-flow-editor, [data-color-scheme="light"] .pg-promptlab-flow-preview, [data-color-scheme="light"] .pg-promptlab-diff-col { border-color: rgba(15, 23, 42, 0.1); background: #ffffff; } [data-color-scheme="light"] .pg-promptlab-list-controls { background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95)); border-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .pg-promptlab-search-label { color: #64748b; } [data-color-scheme="light"] .pg-promptlab-search-input { border-color: rgba(15, 23, 42, 0.12); background: #ffffff; color: #0f172a; } [data-color-scheme="light"] .pg-promptlab-search-input:focus { outline-color: rgba(13, 148, 136, 0.4); } [data-color-scheme="light"] .pg-promptlab-filter-btn { border-color: rgba(15, 23, 42, 0.1); background: rgba(15, 23, 42, 0.03); color: #475569; } [data-color-scheme="light"] .pg-promptlab-filter-btn:hover { background: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .pg-promptlab-filter-btn.is-active { color: #0f766e; border-color: rgba(13, 148, 136, 0.5); background: rgba(13, 148, 136, 0.1); } [data-color-scheme="light"] .pg-promptlab-list-group-title { color: #64748b; } /* List items */ [data-color-scheme="light"] .pg-promptlab-item { border-color: rgba(15, 23, 42, 0.08); background: rgba(15, 23, 42, 0.02); color: #0f172a; } [data-color-scheme="light"] .pg-promptlab-item:hover { border-color: rgba(13, 148, 136, 0.35); background: rgba(13, 148, 136, 0.05); } [data-color-scheme="light"] .pg-promptlab-item.is-active { border-color: rgba(13, 148, 136, 0.55); background: rgba(13, 148, 136, 0.08); box-shadow: 0 0 0 1px rgba(13, 148, 136, 0.2); } [data-color-scheme="light"] .pg-promptlab-item-override { color: #059669; border-color: rgba(5, 150, 105, 0.3); background: rgba(5, 150, 105, 0.08); } [data-color-scheme="light"] .pg-promptlab-item-draft { color: #b45309; border-color: rgba(180, 83, 9, 0.3); background: rgba(180, 83, 9, 0.08); } [data-color-scheme="light"] .pg-promptlab-list-empty { color: #64748b; border-color: rgba(15, 23, 42, 0.1); } /* Pane titles */ [data-color-scheme="light"] .pg-promptlab-pane-title { color: #0f172a; } /* Editor */ [data-color-scheme="light"] .pg-promptlab-editor { border-color: rgba(15, 23, 42, 0.1); background: #ffffff; color: #1e293b; } [data-color-scheme="light"] .pg-promptlab-editor-readonly { color: #475569; background: #f8fafc; } /* Preview */ [data-color-scheme="light"] .pg-promptlab-preview { border-color: rgba(15, 23, 42, 0.08); background: #f8fafc; color: #334155; } /* Placeholders */ [data-color-scheme="light"] .pg-promptlab-placeholder-chip { border-color: rgba(26, 117, 210, 0.35); background: rgba(26, 117, 210, 0.08); color: #1a75d2; } [data-color-scheme="light"] .pg-promptlab-placeholder-chip:hover { background: rgba(26, 117, 210, 0.15); } [data-color-scheme="light"] .pg-promptlab-placeholder-empty { color: #94a3b8; } /* Flow board */ [data-color-scheme="light"] .pg-promptlab-flow-col { border-color: rgba(15, 23, 42, 0.1); background: rgba(255, 255, 255, 0.8); } [data-color-scheme="light"] .pg-promptlab-flow-col.is-current-column { border-color: rgba(26, 117, 210, 0.4); box-shadow: 0 0 0 1px rgba(26, 117, 210, 0.2); } [data-color-scheme="light"] .pg-promptlab-flow-node { border-left-color: rgba(26, 117, 210, 0.4); } /* Compare panel */ [data-color-scheme="light"] .pg-promptlab-compare-sidebar, [data-color-scheme="light"] .pg-promptlab-compare-reference { border-color: rgba(15, 23, 42, 0.1); background: #ffffff; } [data-color-scheme="light"] .pg-promptlab-neighbor-slot { border-color: rgba(15, 23, 42, 0.08); background: rgba(15, 23, 42, 0.02); } [data-color-scheme="light"] .pg-promptlab-neighbor-heading { color: #64748b; } [data-color-scheme="light"] .pg-promptlab-neighbor-empty { color: #94a3b8; } [data-color-scheme="light"] .pg-promptlab-neighbor-card { border-color: rgba(15, 23, 42, 0.1); background: rgba(15, 23, 42, 0.03); } [data-color-scheme="light"] .pg-promptlab-neighbor-card.is-reference { border-color: rgba(26, 117, 210, 0.4); box-shadow: 0 0 0 1px rgba(26, 117, 210, 0.15); } [data-color-scheme="light"] .pg-promptlab-neighbor-label { color: #0f172a; } [data-color-scheme="light"] .pg-promptlab-neighbor-key, [data-color-scheme="light"] .pg-promptlab-neighbor-meta { color: #64748b; } [data-color-scheme="light"] .pg-promptlab-mini-btn { border-color: rgba(15, 23, 42, 0.15); background: rgba(15, 23, 42, 0.04); color: #334155; } [data-color-scheme="light"] .pg-promptlab-mini-btn:hover { background: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .pg-promptlab-mini-btn-compare { border-color: rgba(13, 148, 136, 0.3); color: #0f766e; background: rgba(13, 148, 136, 0.08); } [data-color-scheme="light"] .pg-promptlab-compare-meta { color: #475569; } /* Diff */ [data-color-scheme="light"] .pg-promptlab-diff-stats { color: #0f172a; border-color: rgba(15, 23, 42, 0.1); background: rgba(15, 23, 42, 0.03); } /* Footer */ [data-color-scheme="light"] .pg-promptlab-footer { border-top-color: rgba(15, 23, 42, 0.08); background: rgba(255, 255, 255, 0.6); } [data-color-scheme="light"] .pg-promptlab-status-msg { color: #475569; } [data-color-scheme="light"] .pg-promptlab-status-msg.is-success { color: #059669; } [data-color-scheme="light"] .pg-promptlab-status-msg.is-error { color: #dc2626; } [data-color-scheme="light"] .pg-promptlab-status-msg.is-neutral { color: #1a75d2; } [data-color-scheme="light"] .pg-promptlab-shortcut-hint { color: #94a3b8; } /* Promptlab buttons */ [data-color-scheme="light"] .pg-promptlab-btn-muted { background: rgba(15, 23, 42, 0.05); border-color: rgba(15, 23, 42, 0.12); color: #334155; } [data-color-scheme="light"] .pg-promptlab-btn-muted:hover { background: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .pg-promptlab-btn-primary { background: linear-gradient(130deg, #0d9488, #1a75d2); color: #ffffff; border-color: rgba(13, 148, 136, 0.6); } [data-color-scheme="light"] .pg-promptlab-btn-danger { background: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.25); color: #dc2626; } [data-color-scheme="light"] .pg-promptlab-btn-danger:hover { background: rgba(220, 38, 38, 0.14); } /* Notes */ [data-color-scheme="light"] .pg-promptlab-notes-input { border-color: rgba(15, 23, 42, 0.12); background: #ffffff; color: #1e293b; } /* ---- Pipeline Editor Card ---- */ [data-color-scheme="light"] .pg-pipeline-shell { background: radial-gradient(circle at 12% 0%, rgba(26, 117, 210, 0.06), transparent 40%), radial-gradient(circle at 88% 0%, rgba(124, 58, 237, 0.05), transparent 38%), #f5f7fb; } [data-color-scheme="light"] .pg-pipeline-topbar { border-bottom-color: rgba(15, 23, 42, 0.08); background: rgba(255, 255, 255, 0.6); } [data-color-scheme="light"] .pg-pipeline-select { border-color: rgba(15, 23, 42, 0.15); background: #ffffff; color: #0f172a; } [data-color-scheme="light"] .pg-pipeline-btn-muted { background: rgba(15, 23, 42, 0.05); border-color: rgba(15, 23, 42, 0.12); color: #334155; } [data-color-scheme="light"] .pg-pipeline-btn-muted:hover { background: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .pg-pipeline-btn-primary { background: linear-gradient(130deg, #1a75d2, #7c3aed); color: #ffffff; border-color: rgba(26, 117, 210, 0.6); } [data-color-scheme="light"] .pg-pipeline-btn-danger { background: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.25); color: #dc2626; } [data-color-scheme="light"] .pg-pipeline-btn-danger:hover { background: rgba(220, 38, 38, 0.14); } [data-color-scheme="light"] .pg-pipeline-dirty { color: #b45309; border-color: rgba(180, 83, 9, 0.3); background: rgba(180, 83, 9, 0.08); } [data-color-scheme="light"] .pg-pipeline-empty { color: #94a3b8; border-color: rgba(15, 23, 42, 0.1); } /* Pipeline stages */ [data-color-scheme="light"] .pg-pipeline-stage { border-color: rgba(15, 23, 42, 0.1); background: rgba(255, 255, 255, 0.8); } [data-color-scheme="light"] .pg-pipeline-stage-header { border-bottom-color: rgba(15, 23, 42, 0.06); background: rgba(15, 23, 42, 0.03); } [data-color-scheme="light"] .pg-pipeline-stage-label { color: #475569; } [data-color-scheme="light"] .pg-pipeline-stage-label:hover { color: #1a75d2; } [data-color-scheme="light"] .pg-pipeline-stage-rename { border-color: rgba(26, 117, 210, 0.4); background: #ffffff; color: #0f172a; } [data-color-scheme="light"] .pg-pipeline-stage-remove { color: #94a3b8; } [data-color-scheme="light"] .pg-pipeline-stage-remove:hover { color: #dc2626; } /* Pipeline nodes */ [data-color-scheme="light"] .pg-pipeline-node { border-color: rgba(15, 23, 42, 0.08); background: rgba(15, 23, 42, 0.02); } [data-color-scheme="light"] .pg-pipeline-node:hover { border-color: rgba(26, 117, 210, 0.25); background: rgba(26, 117, 210, 0.04); } [data-color-scheme="light"] .pg-pipeline-node--selected { border-color: rgba(26, 117, 210, 0.5); background: rgba(26, 117, 210, 0.07); box-shadow: 0 0 0 1px rgba(26, 117, 210, 0.2); } [data-color-scheme="light"] .pg-pipeline-node--process .pg-pipeline-node-icon { color: #1a75d2; } [data-color-scheme="light"] .pg-pipeline-node-label { color: #334155; } /* Add buttons */ [data-color-scheme="light"] .pg-pipeline-add-node { border-color: rgba(15, 23, 42, 0.12); color: #94a3b8; } [data-color-scheme="light"] .pg-pipeline-add-node:hover { border-color: rgba(26, 117, 210, 0.3); color: #1a75d2; background: rgba(26, 117, 210, 0.04); } [data-color-scheme="light"] .pg-pipeline-add-stage { border-color: rgba(15, 23, 42, 0.12); color: #94a3b8; } [data-color-scheme="light"] .pg-pipeline-add-stage:hover { border-color: rgba(26, 117, 210, 0.3); color: #1a75d2; background: rgba(26, 117, 210, 0.04); } /* Add node menu */ [data-color-scheme="light"] .pg-pipeline-add-menu { background: #ffffff; border-color: rgba(15, 23, 42, 0.12); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15); } [data-color-scheme="light"] .pg-pipeline-add-menu-header { color: #64748b; } [data-color-scheme="light"] .pg-pipeline-add-menu-item { color: #334155; } [data-color-scheme="light"] .pg-pipeline-add-menu-item:hover { background: rgba(26, 117, 210, 0.06); color: #0f172a; } [data-color-scheme="light"] .pg-pipeline-add-menu-item--process { color: #1a75d2; border-top-color: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .pg-pipeline-add-menu-item--process:hover { background: rgba(26, 117, 210, 0.08); } /* Node detail */ [data-color-scheme="light"] .pg-pipeline-node-detail { border-top-color: rgba(15, 23, 42, 0.08); background: rgba(255, 255, 255, 0.6); } [data-color-scheme="light"] .pg-pipeline-detail-close { color: #94a3b8; } [data-color-scheme="light"] .pg-pipeline-detail-close:hover { color: #dc2626; } [data-color-scheme="light"] .pg-pipeline-detail-label { color: #64748b; } [data-color-scheme="light"] .pg-pipeline-detail-input { border-color: rgba(15, 23, 42, 0.15); background: #ffffff; color: #0f172a; } [data-color-scheme="light"] .pg-pipeline-detail-input:focus { outline-color: rgba(26, 117, 210, 0.4); } /* Status bar */ [data-color-scheme="light"] .pg-pipeline-status { border-top-color: rgba(15, 23, 42, 0.06); color: #475569; background: rgba(255, 255, 255, 0.4); } [data-color-scheme="light"] .pg-pipeline-status.is-success { color: #059669; } [data-color-scheme="light"] .pg-pipeline-status.is-error { color: #dc2626; } [data-color-scheme="light"] .pg-pipeline-status.is-neutral { color: #1a75d2; } /* ========================================================================= * 28d. PIPELINES ADMIN PAGE * ========================================================================= */ /* Container & panels */ [data-color-scheme="light"] .pl-container { background: #f5f7fb; } [data-color-scheme="light"] .pl-sidebar { background: #ffffff; border-right-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .pl-main { background: #f5f7fb; } [data-color-scheme="light"] .pl-detail { background: #ffffff; border-left-color: rgba(15, 23, 42, 0.1); } /* Sidebar header */ /* New pipeline button */ [data-color-scheme="light"] .pl-new-btn { border-color: rgba(15, 23, 42, 0.15); color: #64748b; } [data-color-scheme="light"] .pl-new-btn:hover { border-color: rgba(124, 58, 237, 0.3); color: #7c3aed; background: rgba(124, 58, 237, 0.04); } /* Pipeline list item */ [data-color-scheme="light"] .pl-pipeline:hover { background: rgba(15, 23, 42, 0.04); } [data-color-scheme="light"] .pl-pipeline--active { background: rgba(124, 58, 237, 0.05); border-left-color: #7c3aed; } [data-color-scheme="light"] .pl-pipeline--active:hover { background: rgba(124, 58, 237, 0.08); } [data-color-scheme="light"] .pl-pipeline-name { color: #0f172a; } /* Badges */ [data-color-scheme="light"] .pl-badge--default { background: rgba(124, 58, 237, 0.1); color: #7c3aed; border-color: rgba(124, 58, 237, 0.2); } /* Main area */ [data-color-scheme="light"] .pl-main-placeholder-hint { color: #94a3b8; } /* Topbar */ [data-color-scheme="light"] .pl-topbar { background: #ffffff; border-bottom-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .pl-topbar-name { color: #0f172a; } [data-color-scheme="light"] .pl-topbar-name:hover { border-bottom-color: rgba(15, 23, 42, 0.15); } [data-color-scheme="light"] .pl-topbar-name:focus { border-bottom-color: rgba(124, 58, 237, 0.4); background: #f8fafc; } [data-color-scheme="light"] .pl-topbar-btn--delete { background: rgba(220, 38, 38, 0.06); color: #dc2626; border-color: rgba(220, 38, 38, 0.15); } [data-color-scheme="light"] .pl-topbar-btn--delete:hover { background: rgba(220, 38, 38, 0.12); } /* Legend */ [data-color-scheme="light"] .pl-legend { background: #ffffff; border-bottom-color: rgba(15, 23, 42, 0.05); } /* Stages area */ [data-color-scheme="light"] .pl-stages-empty { color: #94a3b8; border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .pl-generate-btn { background: rgba(124, 58, 237, 0.08); border-color: rgba(124, 58, 237, 0.2); color: #7c3aed; } [data-color-scheme="light"] .pl-generate-btn:hover { background: rgba(124, 58, 237, 0.14); border-color: rgba(124, 58, 237, 0.35); } /* Stage column */ [data-color-scheme="light"] .pl-stage { background: rgba(255, 255, 255, 0.85); border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .pl-stage--dragover { border-color: rgba(124, 58, 237, 0.35); box-shadow: 0 0 12px rgba(124, 58, 237, 0.06); } [data-color-scheme="light"] .pl-stage-header { border-bottom-color: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .pl-stage-label:hover { color: #0f172a; } [data-color-scheme="light"] .pl-stage-rename { background: #ffffff; border-color: rgba(124, 58, 237, 0.4); color: #0f172a; } [data-color-scheme="light"] .pl-stage-remove { color: #94a3b8; } [data-color-scheme="light"] .pl-stage-remove:hover { color: #dc2626; background: rgba(220, 38, 38, 0.06); } /* Node card */ [data-color-scheme="light"] .pl-node { background: rgba(15, 23, 42, 0.02); border-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .pl-node:hover { background: rgba(15, 23, 42, 0.05); border-color: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .pl-node--selected { background: rgba(124, 58, 237, 0.06); border-color: rgba(124, 58, 237, 0.3); } [data-color-scheme="light"] .pl-node-label { color: #334155; } /* Add buttons */ [data-color-scheme="light"] .pl-add-node { border-color: rgba(15, 23, 42, 0.1); color: #94a3b8; } [data-color-scheme="light"] .pl-add-node:hover { border-color: rgba(124, 58, 237, 0.25); color: #7c3aed; background: rgba(124, 58, 237, 0.03); } [data-color-scheme="light"] .pl-add-stage { border-color: rgba(15, 23, 42, 0.1); color: #94a3b8; } [data-color-scheme="light"] .pl-add-stage:hover { border-color: rgba(124, 58, 237, 0.25); color: #7c3aed; background: rgba(124, 58, 237, 0.03); } /* Add node menu */ [data-color-scheme="light"] .pl-add-menu { background: #ffffff; border-color: rgba(15, 23, 42, 0.12); box-shadow: 0 4px 24px rgba(15, 23, 42, 0.15); } [data-color-scheme="light"] .pl-add-menu-header { color: #64748b; } [data-color-scheme="light"] .pl-add-menu-item { color: #334155; } [data-color-scheme="light"] .pl-add-menu-item:hover { background: rgba(124, 58, 237, 0.06); color: #0f172a; } [data-color-scheme="light"] .pl-add-menu-item--process { color: #b45309; border-top-color: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .pl-add-menu-item--process:hover { background: rgba(180, 83, 9, 0.06); } [data-color-scheme="light"] .pl-add-menu-item--new-block { color: #1a75d2; } [data-color-scheme="light"] .pl-add-menu-item--new-block:hover { background: rgba(26, 117, 210, 0.06); } /* Detail panel */ [data-color-scheme="light"] .pl-detail-title-row { border-bottom-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .pl-detail-title { color: #334155; } [data-color-scheme="light"] .pl-detail-close:hover { color: #334155; } [data-color-scheme="light"] .pl-detail-label { color: #64748b; } [data-color-scheme="light"] .pl-detail-input { background: #ffffff; border-color: rgba(15, 23, 42, 0.12); color: #0f172a; } [data-color-scheme="light"] .pl-detail-input:focus { border-color: rgba(124, 58, 237, 0.4); } [data-color-scheme="light"] select.pl-detail-input { background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(15,23,42,0.3)'/%3E%3C/svg%3E"); } [data-color-scheme="light"] select.pl-detail-input option { background: #ffffff; color: #0f172a; } [data-color-scheme="light"] .pl-detail-delete { background: rgba(220, 38, 38, 0.06); border-color: rgba(220, 38, 38, 0.12); color: #dc2626; } [data-color-scheme="light"] .pl-detail-delete:hover { background: rgba(220, 38, 38, 0.12); } /* Schema editor */ [data-color-scheme="light"] .pl-schema-editor { border-top-color: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .pl-schema-film-msg { color: #64748b; } [data-color-scheme="light"] .pl-schema-header { color: #64748b; } [data-color-scheme="light"] .pl-schema-badge { background: rgba(15, 23, 42, 0.05); color: #64748b; } [data-color-scheme="light"] .pl-schema-field-row { border-bottom-color: rgba(15, 23, 42, 0.04); } [data-color-scheme="light"] .pl-schema-field-name { color: #334155; } [data-color-scheme="light"] .pl-schema-field-type { background: rgba(15, 23, 42, 0.05); color: #64748b; } [data-color-scheme="light"] .pl-schema-field-remove-btn { color: #94a3b8; } [data-color-scheme="light"] .pl-schema-field-remove-btn:hover { color: #dc2626; } [data-color-scheme="light"] .pl-schema-restore-btn { border-color: rgba(15, 23, 42, 0.1); color: #64748b; } [data-color-scheme="light"] .pl-schema-restore-btn:hover { border-color: rgba(26, 117, 210, 0.4); color: #1a75d2; } [data-color-scheme="light"] .pl-schema-override-header { color: #94a3b8; } [data-color-scheme="light"] .pl-schema-add-field-btn { border-color: rgba(15, 23, 42, 0.1); color: #94a3b8; } [data-color-scheme="light"] .pl-schema-add-field-btn:hover { border-color: rgba(124, 58, 237, 0.25); color: #7c3aed; } [data-color-scheme="light"] .pl-schema-edit-global-btn { border-color: rgba(15, 23, 42, 0.08); background: rgba(15, 23, 42, 0.02); color: #64748b; } [data-color-scheme="light"] .pl-schema-edit-global-btn:hover { background: rgba(15, 23, 42, 0.05); border-color: rgba(124, 58, 237, 0.2); color: #475569; } /* Schema modal */ [data-color-scheme="light"] .pl-schema-modal-overlay { background: rgba(15, 23, 42, 0.4); } [data-color-scheme="light"] .pl-schema-modal { background: #ffffff; border-color: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .pl-schema-modal h3 { color: #0f172a; } [data-color-scheme="light"] .pl-schema-modal-label { color: #64748b; } [data-color-scheme="light"] .pl-schema-modal-textarea { background: #f8fafc; color: #0f172a; border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .pl-schema-modal-textarea:focus { border-color: rgba(124, 58, 237, 0.4); } [data-color-scheme="light"] .pl-schema-modal-cancel { border-color: rgba(15, 23, 42, 0.12); color: #64748b; } [data-color-scheme="light"] .pl-schema-modal-cancel:hover { border-color: rgba(15, 23, 42, 0.2); color: #334155; } /* Empty state */ [data-color-scheme="light"] .pl-empty { color: #94a3b8; } /* ========================================================================= * 28e. PROMPT MANAGER * ========================================================================= */ /* Root */ [data-color-scheme="light"] .pm-root { border-color: rgba(15, 23, 42, 0.1); background: #f5f7fb; } /* Sidebar */ [data-color-scheme="light"] .pm-sidebar { background: #ffffff; border-right-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .pm-brand-row { border-bottom-color: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .pm-subtitle { color: #64748b; } /* Search */ [data-color-scheme="light"] .pm-search input { border-color: rgba(15, 23, 42, 0.12); background: #f8fafc; color: #0f172a; } [data-color-scheme="light"] .pm-search input:focus { border-color: #1a75d2; box-shadow: 0 0 0 2px rgba(26, 117, 210, 0.15); } [data-color-scheme="light"] .pm-search input::placeholder { color: #94a3b8; } /* Filters */ [data-color-scheme="light"] .pm-filter-btn { border-color: rgba(15, 23, 42, 0.1); background: rgba(15, 23, 42, 0.03); color: #475569; } [data-color-scheme="light"] .pm-filter-btn:hover { color: #0f172a; border-color: rgba(15, 23, 42, 0.2); } [data-color-scheme="light"] .pm-filter-btn.active { color: #1a75d2; border-color: rgba(26, 117, 210, 0.5); background: rgba(26, 117, 210, 0.08); } /* Stats */ [data-color-scheme="light"] .pm-stat-pill { border-color: rgba(15, 23, 42, 0.08); background: rgba(15, 23, 42, 0.03); color: #475569; } /* Categories */ [data-color-scheme="light"] .pm-category { border-color: rgba(15, 23, 42, 0.06); background: rgba(15, 23, 42, 0.02); } [data-color-scheme="light"] .pm-category-header:hover { background: rgba(15, 23, 42, 0.04); } [data-color-scheme="light"] .pm-category-name { color: #0f172a; } /* Prompt buttons */ [data-color-scheme="light"] .pm-prompt-btn { color: #334155; } [data-color-scheme="light"] .pm-prompt-btn:hover { background: rgba(15, 23, 42, 0.05); color: #0f172a; } [data-color-scheme="light"] .pm-prompt-btn.active { background: linear-gradient(135deg, rgba(26, 117, 210, 0.1), rgba(13, 148, 136, 0.08)); color: #0f172a; box-shadow: inset 0 0 0 1px rgba(26, 117, 210, 0.15); } [data-color-scheme="light"] .pm-prompt-key { color: #94a3b8; } /* Token chip */ [data-color-scheme="light"] .pm-token-chip { color: #475569; background: rgba(15, 23, 42, 0.05); border-color: rgba(15, 23, 42, 0.1); } /* Tags */ [data-color-scheme="light"] .pm-tag-json { background: rgba(124, 58, 237, 0.08); color: #7c3aed; border-color: rgba(124, 58, 237, 0.25); } [data-color-scheme="light"] .pm-tag-override { background: rgba(180, 83, 9, 0.08); color: #b45309; border-color: rgba(180, 83, 9, 0.25); } [data-color-scheme="light"] .pm-tag-dirty { background: rgba(220, 38, 38, 0.08); color: #dc2626; border-color: rgba(220, 38, 38, 0.25); } /* Sidebar footer */ [data-color-scheme="light"] .pm-sidebar-footer { color: #94a3b8; border-top-color: rgba(15, 23, 42, 0.06); background: #f8fafc; } /* Workspace */ [data-color-scheme="light"] .pm-workspace { background: #f5f7fb; } [data-color-scheme="light"] .pm-topbar { border-bottom-color: rgba(15, 23, 42, 0.08); background: rgba(255, 255, 255, 0.85); } /* KPIs */ [data-color-scheme="light"] .pm-kpi { border-color: rgba(15, 23, 42, 0.08); background: #ffffff; } [data-color-scheme="light"] .pm-kpi-label { color: #64748b; } /* Top actions */ [data-color-scheme="light"] .pm-shortcut-hint { color: #94a3b8; } [data-color-scheme="light"] .pm-switch { color: #475569; } /* Editor */ [data-color-scheme="light"] .pm-editor-empty, [data-color-scheme="light"] .pm-editor-loading { color: #94a3b8; } [data-color-scheme="light"] .pm-breadcrumb { color: #94a3b8; } [data-color-scheme="light"] .pm-key-pill { background: rgba(15, 23, 42, 0.06); border-color: rgba(15, 23, 42, 0.1); color: #475569; } [data-color-scheme="light"] .pm-token-count strong { color: #0f172a; } /* Actions bar */ [data-color-scheme="light"] .pm-actions { border-color: rgba(15, 23, 42, 0.08); background: rgba(255, 255, 255, 0.7); } /* Buttons */ [data-color-scheme="light"] .pm-btn-primary { background: #1a75d2; color: #ffffff; border-color: rgba(26, 117, 210, 0.5); } [data-color-scheme="light"] .pm-btn-primary:hover:not([disabled]) { background: #125eae; } [data-color-scheme="light"] .pm-btn-primary-soft { background: rgba(26, 117, 210, 0.1); color: #1a75d2; border-color: rgba(26, 117, 210, 0.25); } [data-color-scheme="light"] .pm-btn-primary-soft:hover:not([disabled]) { background: rgba(26, 117, 210, 0.16); } [data-color-scheme="light"] .pm-btn-secondary { background: rgba(15, 23, 42, 0.06); color: #334155; border-color: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .pm-btn-secondary:hover:not([disabled]) { background: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .pm-btn-ghost { color: #475569; border-color: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .pm-btn-ghost:hover:not([disabled]) { color: #0f172a; border-color: rgba(15, 23, 42, 0.2); } [data-color-scheme="light"] .pm-btn-warn { background: rgba(180, 83, 9, 0.08); color: #b45309; border-color: rgba(180, 83, 9, 0.25); } [data-color-scheme="light"] .pm-btn-warn:hover:not([disabled]) { background: rgba(180, 83, 9, 0.14); } /* Status */ [data-color-scheme="light"] .pm-status { color: #94a3b8; } [data-color-scheme="light"] .pm-status.success { color: #059669; } [data-color-scheme="light"] .pm-status.error { color: #dc2626; } /* Textareas & Preview */ [data-color-scheme="light"] .pm-textarea, [data-color-scheme="light"] .pm-preview, [data-color-scheme="light"] .pm-context-textarea { border-color: rgba(15, 23, 42, 0.1); background: #ffffff; color: #1e293b; } [data-color-scheme="light"] .pm-textarea:focus, [data-color-scheme="light"] .pm-context-textarea:focus, [data-color-scheme="light"] .pm-placeholder-search:focus, [data-color-scheme="light"] .pm-context-picker select:focus { border-color: rgba(26, 117, 210, 0.5); box-shadow: 0 0 0 2px rgba(26, 117, 210, 0.12); } [data-color-scheme="light"] .pm-preview { color: #334155; border-style: dashed; } [data-color-scheme="light"] .pm-template-meta { color: #64748b; } /* Pane labels */ [data-color-scheme="light"] .pm-pane-label { color: #64748b; } /* Panels */ [data-color-scheme="light"] .pm-panel { border-color: rgba(15, 23, 42, 0.08); background: rgba(255, 255, 255, 0.7); } [data-color-scheme="light"] .pm-panel-title { color: #475569; } /* Placeholder search */ [data-color-scheme="light"] .pm-placeholder-search { border-color: rgba(15, 23, 42, 0.1); background: #ffffff; color: #0f172a; } /* Chips */ [data-color-scheme="light"] .pm-chip { border-color: rgba(15, 23, 42, 0.1); background: rgba(15, 23, 42, 0.03); color: #475569; } [data-color-scheme="light"] .pm-chip:hover { color: #1a75d2; border-color: rgba(26, 117, 210, 0.4); background: rgba(26, 117, 210, 0.06); } [data-color-scheme="light"] .pm-chip.in-use { color: #059669; border-color: rgba(5, 150, 105, 0.4); background: rgba(5, 150, 105, 0.06); } /* Quality scores */ [data-color-scheme="light"] .pm-quality-label { color: #64748b; } [data-color-scheme="light"] .pm-quality-score.good { color: #059669; } [data-color-scheme="light"] .pm-quality-score.ok { color: #b45309; } [data-color-scheme="light"] .pm-quality-score.poor { color: #dc2626; } [data-color-scheme="light"] .pm-quality-list { color: #475569; } [data-color-scheme="light"] .pm-quality-item.good { color: #059669; } [data-color-scheme="light"] .pm-quality-item.warn { color: #b45309; } [data-color-scheme="light"] .pm-quality-item.error { color: #dc2626; } /* Default panel */ [data-color-scheme="light"] .pm-default-panel { border-color: rgba(15, 23, 42, 0.08); background: rgba(255, 255, 255, 0.7); } [data-color-scheme="light"] .pm-default-panel summary { color: #475569; } [data-color-scheme="light"] .pm-default-view { border-color: rgba(15, 23, 42, 0.08); background: #f8fafc; color: #334155; } /* Context section */ [data-color-scheme="light"] .pm-context-section { border-color: rgba(15, 23, 42, 0.08); background: rgba(255, 255, 255, 0.7); } [data-color-scheme="light"] .pm-context-section summary { color: #475569; } [data-color-scheme="light"] .pm-context-picker select { border-color: rgba(15, 23, 42, 0.1); background: #ffffff; color: #0f172a; } /* JSON editors */ [data-color-scheme="light"] .pm-json-editor { border-color: rgba(15, 23, 42, 0.08); background: rgba(255, 255, 255, 0.7); } [data-color-scheme="light"] .pm-hint { color: #64748b; } /* Style cards */ [data-color-scheme="light"] .pm-style-card { border-color: rgba(15, 23, 42, 0.08); background: rgba(255, 255, 255, 0.6); } [data-color-scheme="light"] .pm-style-card input, [data-color-scheme="light"] .pm-style-card textarea, [data-color-scheme="light"] .pm-shot-body input, [data-color-scheme="light"] .pm-mood-item textarea, [data-color-scheme="light"] .pm-setting-row input, [data-color-scheme="light"] .pm-setting-row select, [data-color-scheme="light"] .pm-ab-routing input, [data-color-scheme="light"] .pm-ab-routing select, [data-color-scheme="light"] .pm-keyword-input { border-color: rgba(15, 23, 42, 0.1); background: #ffffff; color: #0f172a; } [data-color-scheme="light"] .pm-style-card input:focus, [data-color-scheme="light"] .pm-style-card textarea:focus, [data-color-scheme="light"] .pm-shot-body input:focus, [data-color-scheme="light"] .pm-mood-item textarea:focus, [data-color-scheme="light"] .pm-setting-row input:focus, [data-color-scheme="light"] .pm-setting-row select:focus, [data-color-scheme="light"] .pm-ab-routing input:focus, [data-color-scheme="light"] .pm-ab-routing select:focus, [data-color-scheme="light"] .pm-keyword-input:focus { border-color: rgba(26, 117, 210, 0.5); box-shadow: 0 0 0 2px rgba(26, 117, 210, 0.12); } /* Shot sections */ [data-color-scheme="light"] .pm-shot-section { border-color: rgba(15, 23, 42, 0.08); background: rgba(15, 23, 42, 0.02); } [data-color-scheme="light"] .pm-shot-header { color: #0f172a; background: rgba(15, 23, 42, 0.03); } [data-color-scheme="light"] .pm-shot-body label { color: #64748b; } /* Keyword tags */ [data-color-scheme="light"] .pm-keyword-tag { color: #1a75d2; border-color: rgba(26, 117, 210, 0.35); background: rgba(26, 117, 210, 0.06); } [data-color-scheme="light"] .pm-keyword-tag button { color: #64748b; } [data-color-scheme="light"] .pm-keyword-tag button:hover { color: #dc2626; } /* Mood items */ [data-color-scheme="light"] .pm-mood-item { border-color: rgba(15, 23, 42, 0.08); background: rgba(255, 255, 255, 0.6); } [data-color-scheme="light"] .pm-mood-label { color: #475569; } /* Settings */ [data-color-scheme="light"] .pm-setting-row label, [data-color-scheme="light"] .pm-section-label { color: #64748b; } /* A/B routing */ [data-color-scheme="light"] .pm-ab-field-note { color: #64748b; } [data-color-scheme="light"] .pm-ab-category-card, [data-color-scheme="light"] .pm-ab-global-section { border-color: rgba(15, 23, 42, 0.08); background: rgba(255, 255, 255, 0.7); } [data-color-scheme="light"] .pm-ab-category-title { color: #0f172a; } [data-color-scheme="light"] .pm-ab-category-note { color: #64748b; } /* ========================================================================= * 28f. CONTEXT BLOCKS * ========================================================================= */ [data-color-scheme="light"] .cb-loading, [data-color-scheme="light"] .cb-empty { color: #94a3b8; } [data-color-scheme="light"] .cb-error { color: #dc2626; } [data-color-scheme="light"] .cb-pipeline-badge { background: rgba(26, 117, 210, 0.08); color: #1a75d2; } [data-color-scheme="light"] .cb-script-select { border-color: rgba(15, 23, 42, 0.12); background: #ffffff; color: #0f172a; } /* Accordion */ [data-color-scheme="light"] .cb-accordion { border-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .cb-accordion:hover { border-color: rgba(15, 23, 42, 0.15); } [data-color-scheme="light"] .cb-accordion-header { background: rgba(255, 255, 255, 0.6); } [data-color-scheme="light"] .cb-accordion-header:hover { background: rgba(255, 255, 255, 0.85); } [data-color-scheme="light"] .cb-accordion-arrow { color: #94a3b8; } [data-color-scheme="light"] .cb-accordion-title { color: #0f172a; } /* Form fields */ [data-color-scheme="light"] .cb-label { color: #64748b; } [data-color-scheme="light"] .cb-input, [data-color-scheme="light"] .cb-list-input, [data-color-scheme="light"] .cb-textarea, [data-color-scheme="light"] .cb-select { background: #ffffff; border-color: rgba(15, 23, 42, 0.1); color: #0f172a; color-scheme: light; } [data-color-scheme="light"] .cb-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='rgba(15,23,42,0.4)' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); } [data-color-scheme="light"] .cb-select option { background: #ffffff; color: #0f172a; } [data-color-scheme="light"] .cb-input:focus, [data-color-scheme="light"] .cb-list-input:focus, [data-color-scheme="light"] .cb-textarea:focus, [data-color-scheme="light"] .cb-select:focus { border-color: rgba(26, 117, 210, 0.4); } [data-color-scheme="light"] .cb-input--error, [data-color-scheme="light"] .cb-input--error:focus { border-color: rgba(220, 38, 38, 0.4); } [data-color-scheme="light"] .cb-field-error { color: #dc2626; } /* Buttons */ [data-color-scheme="light"] .cb-remove-btn:hover { background: rgba(220, 38, 38, 0.08); color: #dc2626; } [data-color-scheme="light"] .cb-add-btn { border-color: rgba(15, 23, 42, 0.15); color: #64748b; } [data-color-scheme="light"] .cb-add-btn:hover { border-color: rgba(26, 117, 210, 0.25); color: #1a75d2; } /* Entry rows */ [data-color-scheme="light"] .cb-entry-row { background: rgba(255, 255, 255, 0.5); border-color: rgba(15, 23, 42, 0.06); } /* Sub-lists */ [data-color-scheme="light"] .cb-sub-label { color: #94a3b8; } /* Nested dicts */ [data-color-scheme="light"] .cb-nested { border-color: rgba(15, 23, 42, 0.06); background: rgba(15, 23, 42, 0.02); } [data-color-scheme="light"] .cb-nested-legend { color: #475569; } /* Read-only */ [data-color-scheme="light"] .cb-accordion--readonly { border-color: rgba(124, 58, 237, 0.1); } [data-color-scheme="light"] .cb-accordion--readonly:hover { border-color: rgba(124, 58, 237, 0.2); } [data-color-scheme="light"] .cb-auto-badge { background: rgba(124, 58, 237, 0.08); color: #7c3aed; } [data-color-scheme="light"] .cb-source-hint { color: #94a3b8; border-bottom-color: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .cb-json-preview { background: #f8fafc; } [data-color-scheme="light"] .cb-form--readonly .cb-input, [data-color-scheme="light"] .cb-form--readonly .cb-list-input, [data-color-scheme="light"] .cb-form--readonly .cb-textarea, [data-color-scheme="light"] .cb-form--readonly .cb-select { border-color: rgba(15, 23, 42, 0.06); } /* Visual style section */ [data-color-scheme="light"] .cb-content-context-header { border-top-color: rgba(15, 23, 42, 0.08); } /* ========================================================================= * 28g. OBSERVABILITY DASHBOARD * ========================================================================= */ /* Method badges — readable in light mode */ [data-color-scheme="light"] .obs-method-get { background: rgba(22, 163, 74, 0.12); color: #16a34a; } [data-color-scheme="light"] .obs-method-post { background: rgba(26, 117, 210, 0.12); color: #1a75d2; } [data-color-scheme="light"] .obs-method-put { background: rgba(180, 83, 9, 0.12); color: #b45309; } [data-color-scheme="light"] .obs-method-delete { background: rgba(220, 38, 38, 0.12); color: #dc2626; } [data-color-scheme="light"] .obs-bad { color: #dc2626; } [data-color-scheme="light"] .obs-warn { color: #b45309; } [data-color-scheme="light"] .obs-ai-error { color: #dc2626; background: rgba(220, 38, 38, 0.06); } /* ========================================================================= * ORGANIZATION CENTER * ========================================================================= */ /* Variable overrides for .org-center live in organization_center.html (component owns its own --org-* vars for both dark and light). Below: glassmorphism polish that only applies in light mode. */ [data-color-scheme="light"] .org-stat-card, [data-color-scheme="light"] .org-section-card { box-shadow: 0 18px 38px rgba(15, 23, 42, 0.07); backdrop-filter: blur(16px) saturate(1.15); } /* ========================================================================= * INSPECTOR SIDEBAR * ========================================================================= */ /* ── Container & Border ── */ [data-color-scheme="light"] .inspector { background: #f8fafc; border-left-color: rgba(15, 23, 42, 0.12); } /* ── Resize Handle ── */ [data-color-scheme="light"] .inspector-resize-handle:hover, [data-color-scheme="light"] .inspector-resize-handle:active { background: #1a75d2; } /* ── Tab Bar ── */ [data-color-scheme="light"] .inspector-tab-bar { background: #f0f4f8; border-bottom-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .inspector-tab { color: #64748b; } [data-color-scheme="light"] .inspector-tab:hover { color: #1e293b; background: rgba(0, 0, 0, 0.04); } [data-color-scheme="light"] .inspector-tab.is-active { color: #1a75d2; } [data-color-scheme="light"] .inspector-tab.is-active::after { background: #1a75d2; } /* ── Close Button (mobile) ── */ [data-color-scheme="light"] .inspector-close-btn { color: #94a3b8; border-left-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .inspector-close-btn:hover { color: #1e293b; } /* ── Tab Content Pane ── */ [data-color-scheme="light"] .inspector-tab-content { background: #f8fafc; } /* ── Section Headers ── */ [data-color-scheme="light"] .inspector-section { border-bottom-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .inspector-section-header { color: #334155; } [data-color-scheme="light"] .inspector-section-header:hover { background: rgba(0, 0, 0, 0.03); } [data-color-scheme="light"] .inspector-section-empty { color: #94a3b8; } /* ── Breakdown Section ── */ [data-color-scheme="light"] .inspector-breakdown-label { color: #64748b; } [data-color-scheme="light"] .inspector-breakdown-value { color: #1e293b; } /* ── Scene Header ── */ [data-color-scheme="light"] .inspector-scene-header-heading { color: #0f172a; } [data-color-scheme="light"] .inspector-scene-header-stats { color: #64748b; } [data-color-scheme="light"] .inspector-scene-header-paradigm { background: rgba(26, 117, 210, 0.08); color: #1a75d2; border-color: rgba(26, 117, 210, 0.18); } /* ── Scene Characters ── */ [data-color-scheme="light"] .inspector-scene-character-chip { background: rgba(0, 0, 0, 0.03); border-color: rgba(15, 23, 42, 0.1); color: #334155; } [data-color-scheme="light"] .inspector-scene-character-chip:hover { background: rgba(0, 0, 0, 0.06); border-color: rgba(15, 23, 42, 0.16); } [data-color-scheme="light"] .inspector-scene-character-chip--speaking { border-color: rgba(26, 117, 210, 0.25); } [data-color-scheme="light"] .inspector-scene-character-avatar { background: rgba(26, 117, 210, 0.1); color: #1a75d2; } [data-color-scheme="light"] .inspector-scene-character-mood { color: #94a3b8; } /* ── Scene Location ── */ [data-color-scheme="light"] .inspector-scene-location-name { color: #1e293b; } [data-color-scheme="light"] .inspector-scene-location-address, [data-color-scheme="light"] .inspector-scene-location-hint { color: #64748b; } /* ── Scene Intelligence ── */ [data-color-scheme="light"] .inspector-scene-intelligence-label { color: #64748b; } [data-color-scheme="light"] .inspector-scene-intelligence-value { color: #1e293b; } /* ── Shot List & Gallery ── */ [data-color-scheme="light"] .inspector-shot-item, [data-color-scheme="light"] .inspector-shot-card { background: rgba(0, 0, 0, 0.03); border-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .inspector-shot-label { color: #1e293b; } [data-color-scheme="light"] .inspector-shot-type { color: #64748b; } [data-color-scheme="light"] .inspector-shot-card-label { color: #1e293b; } [data-color-scheme="light"] .inspector-shot-card-type { background: rgba(15, 23, 42, 0.06); color: #64748b; } [data-color-scheme="light"] .inspector-shot-card-btn { border-color: rgba(234, 88, 12, 0.25); background: rgba(234, 88, 12, 0.06); color: #c2410c; } [data-color-scheme="light"] .inspector-shot-card-btn:hover { background: rgba(234, 88, 12, 0.12); border-color: rgba(234, 88, 12, 0.4); } [data-color-scheme="light"] .inspector-shot-auto-btn { border-color: rgba(234, 88, 12, 0.3); background: rgba(234, 88, 12, 0.06); color: #c2410c; } [data-color-scheme="light"] .inspector-shot-auto-btn:hover { background: rgba(234, 88, 12, 0.12); } [data-color-scheme="light"] .inspector-shot-card-empty, [data-color-scheme="light"] .inspector-shot-card-lines { color: #94a3b8; } [data-color-scheme="light"] .inspector-shot-card-meta { border-top-color: rgba(15, 23, 42, 0.06); color: #94a3b8; } [data-color-scheme="light"] .inspector-shot-gallery-orphan-header { border-top-color: rgba(15, 23, 42, 0.08); color: #64748b; } [data-color-scheme="light"] .inspector-shot-gallery-empty-hint { color: #94a3b8; } /* Shot card active highlight */ [data-color-scheme="light"] .inspector-shot-card--active { border-color: rgba(26, 117, 210, 0.35); box-shadow: 0 0 0 1px rgba(26, 117, 210, 0.2), 0 0 12px rgba(26, 117, 210, 0.08); background: rgba(26, 117, 210, 0.04); } [data-color-scheme="light"] .inspector-shot-card--active .inspector-shot-card-num, [data-color-scheme="light"] .inspector-shot-card--active .inspector-shot-card-lines { color: #1a75d2; } /* Shot frame strip */ [data-color-scheme="light"] .inspector-shot-frame-strip::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.2); } [data-color-scheme="light"] .inspector-shot-frame-strip-thumb--active { border-color: #1a75d2; } /* Shot card highlight animation */ @keyframes shot-card-highlight-light { 0% { background: rgba(13, 148, 136, 0.15); border-color: rgba(13, 148, 136, 0.35); } 100% { background: rgba(0, 0, 0, 0.03); border-color: rgba(15, 23, 42, 0.08); } } [data-color-scheme="light"] .inspector-shot-card--highlight { animation-name: shot-card-highlight-light; } /* Storyboard viewer inside inspector -- dark surround is intentional for image presentation, but controls need to stay readable */ [data-color-scheme="light"] .inspector-storyboard-viewer { background: #e2e8f0; } [data-color-scheme="light"] .inspector-storyboard-img, [data-color-scheme="light"] .inspector-shot-frame-thumb, [data-color-scheme="light"] .inspector-live-player { background: #cbd5e1; } [data-color-scheme="light"] .inspector-storyboard-nav { background: rgba(15, 23, 42, 0.6); } /* Keep storyboard nav controls white-on-dark (overlay pattern) */ [data-color-scheme="light"] .inspector-storyboard-hint { color: #94a3b8; } /* ── Character Section ── */ [data-color-scheme="light"] .inspector-character-card { background: rgba(0, 0, 0, 0.03); } [data-color-scheme="light"] .inspector-character-name { color: #0f172a; } [data-color-scheme="light"] .inspector-character-role { color: #64748b; } [data-color-scheme="light"] .inspector-character-bio { color: #475569; } [data-color-scheme="light"] .inspector-character-stats .inspector-stat { background: rgba(0, 0, 0, 0.03); } [data-color-scheme="light"] .inspector-stat-value { color: #0f172a; } [data-color-scheme="light"] .inspector-stat-label { color: #64748b; } [data-color-scheme="light"] .inspector-appearance-item { color: #64748b; } [data-color-scheme="light"] .inspector-appearance-item:hover { background: rgba(0, 0, 0, 0.04); color: #1e293b; } [data-color-scheme="light"] .inspector-appearance-num { color: #94a3b8; } /* ── Story Section ── */ [data-color-scheme="light"] .inspector-story-label { color: #475569; } [data-color-scheme="light"] .inspector-story-value { background: rgba(0, 0, 0, 0.03); color: #1e293b; } [data-color-scheme="light"] .inspector-story-editable:hover { border-color: rgba(15, 23, 42, 0.12); background: rgba(0, 0, 0, 0.04); } [data-color-scheme="light"] .inspector-story-editable.is-empty::before { color: #94a3b8; } [data-color-scheme="light"] .inspector-story-textarea { color: #1e293b; background: #ffffff; border-color: rgba(15, 23, 42, 0.16); } [data-color-scheme="light"] .inspector-story-textarea:focus { background: #ffffff; border-color: #1a75d2; box-shadow: 0 0 0 3px rgba(26, 117, 210, 0.12); } [data-color-scheme="light"] .inspector-story-textarea::placeholder { color: #94a3b8; } [data-color-scheme="light"] .inspector-story-ai-btn { border-color: rgba(26, 117, 210, 0.25); background: rgba(26, 117, 210, 0.06); color: #1a75d2; } [data-color-scheme="light"] .inspector-story-ai-btn:hover:not(:disabled) { background: rgba(26, 117, 210, 0.12); border-color: rgba(26, 117, 210, 0.4); } [data-color-scheme="light"] .inspector-story-divider { background: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .inspector-story-scaffold-btn { border-color: rgba(22, 163, 74, 0.3); color: #15803d; } [data-color-scheme="light"] .inspector-story-scaffold-btn:hover:not(:disabled) { background: rgba(22, 163, 74, 0.08); border-color: rgba(22, 163, 74, 0.5); } [data-color-scheme="light"] .inspector-story-draft-btn { border-color: rgba(147, 51, 234, 0.3); color: #7c3aed; } [data-color-scheme="light"] .inspector-story-draft-btn:hover:not(:disabled) { background: rgba(147, 51, 234, 0.08); border-color: rgba(147, 51, 234, 0.5); } /* ── Script Intelligence ── */ [data-color-scheme="light"] .si-ring-counter { color: #0f172a; } [data-color-scheme="light"] .si-ring-num { color: #1a75d2; } [data-color-scheme="light"] .si-ring-sep, [data-color-scheme="light"] .si-ring-den, [data-color-scheme="light"] .si-ring-label, [data-color-scheme="light"] .si-hint { color: #64748b; } [data-color-scheme="light"] .si-group-title { color: #475569; border-bottom-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .si-field-name { color: #1e293b; } [data-color-scheme="light"] .si-field-row--clickable .si-field-name { color: #64748b; } [data-color-scheme="light"] .si-field-row--clickable:hover { background: rgba(0, 0, 0, 0.04); } [data-color-scheme="light"] .si-character-avatar { border-color: rgba(15, 23, 42, 0.12); background: rgba(15, 23, 42, 0.08); color: #475569; } [data-color-scheme="light"] .si-character-avatar:hover { box-shadow: 0 0 0 2px rgba(26, 117, 210, 0.15); } [data-color-scheme="light"] .si-dot--empty { background: rgba(15, 23, 42, 0.12); } /* ── AI Section ── */ [data-color-scheme="light"] .inspector-ai-btn { border-color: rgba(15, 23, 42, 0.12); color: #334155; } [data-color-scheme="light"] .inspector-ai-btn:hover { background: rgba(26, 117, 210, 0.06); border-color: #1a75d2; color: #1a75d2; } [data-color-scheme="light"] .inspector-ai-response { background: rgba(0, 0, 0, 0.03); color: #1e293b; } /* ── Character Chat (AI Tab) ── */ [data-color-scheme="light"] .inspector-chat-picker select { color: #1e293b; background: #ffffff; border-color: rgba(15, 23, 42, 0.16); } [data-color-scheme="light"] .inspector-chat-picker select:focus { border-color: #1a75d2; box-shadow: 0 0 0 3px rgba(26, 117, 210, 0.12); } [data-color-scheme="light"] .inspector-chat-picker-dot { background: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .inspector-chat-messages::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.2); } [data-color-scheme="light"] .inspector-chat-empty-initial { background: rgba(15, 23, 42, 0.08); color: #475569; } [data-color-scheme="light"] .inspector-chat-empty-text { color: #94a3b8; } [data-color-scheme="light"] .inspector-chat-bubble--user { background: rgba(26, 117, 210, 0.1); color: #1e293b; } [data-color-scheme="light"] .inspector-chat-bubble--character { background: rgba(0, 0, 0, 0.04); color: #1e293b; border-left-color: var(--inspector-chat-char-color, rgba(15, 23, 42, 0.12)); } [data-color-scheme="light"] .inspector-chat-typing { background: rgba(0, 0, 0, 0.04); } [data-color-scheme="light"] .inspector-chat-typing-dot { background: #94a3b8; } [data-color-scheme="light"] .inspector-chat-input { color: #1e293b; background: #ffffff; border-color: rgba(15, 23, 42, 0.16); } [data-color-scheme="light"] .inspector-chat-input:focus { border-color: #1a75d2; box-shadow: 0 0 0 3px rgba(26, 117, 210, 0.12); } [data-color-scheme="light"] .inspector-chat-input::placeholder { color: #94a3b8; } [data-color-scheme="light"] .inspector-chat-send-btn { border-color: rgba(15, 23, 42, 0.12); color: #334155; } [data-color-scheme="light"] .inspector-chat-send-btn:hover:not(:disabled) { background: rgba(26, 117, 210, 0.06); border-color: #1a75d2; color: #1a75d2; } /* ── Schedule Section ── */ [data-color-scheme="light"] .inspector-schedule-label { color: #64748b; } [data-color-scheme="light"] .inspector-schedule-value { color: #1e293b; } /* ── Live Stream ── */ [data-color-scheme="light"] .inspector-live-expand-link { color: #1a75d2; } /* ── Inspector Scrollbar ── */ [data-color-scheme="light"] .inspector-tab-content::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.18); } [data-color-scheme="light"] .inspector-tab-content::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.04); } /* ── Annotations Tab ── */ [data-color-scheme="light"] .inspector-annotations-filters { border-bottom-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .inspector-annotations-chip { border-color: rgba(15, 23, 42, 0.12); color: #64748b; } [data-color-scheme="light"] .inspector-annotations-chip:hover { border-color: rgba(15, 23, 42, 0.22); color: #334155; } [data-color-scheme="light"] .inspector-annotations-chip.active { border-color: #1a75d2; color: #1e293b; background: rgba(26, 117, 210, 0.08); } [data-color-scheme="light"] .inspector-annotations-resolved-toggle input { accent-color: #1a75d2; } [data-color-scheme="light"] .inspector-annotations-create-btn { border-color: rgba(15, 23, 42, 0.16); color: #64748b; } [data-color-scheme="light"] .inspector-annotations-create-btn:hover { border-color: #1a75d2; color: #1a75d2; background: rgba(26, 117, 210, 0.04); } [data-color-scheme="light"] .inspector-annotations-create-form { background: rgba(0, 0, 0, 0.03); } [data-color-scheme="light"] .inspector-annotations-create-context { color: #475569; background: rgba(0, 0, 0, 0.04); } [data-color-scheme="light"] .inspector-annotations-create-dropdowns select { background: #ffffff; border-color: rgba(15, 23, 42, 0.16); color: #1e293b; } [data-color-scheme="light"] .inspector-annotations-create-text { background: #ffffff; border-color: rgba(15, 23, 42, 0.16); color: #1e293b; } [data-color-scheme="light"] .inspector-annotations-create-text:focus { border-color: #1a75d2; box-shadow: 0 0 0 3px rgba(26, 117, 210, 0.12); } [data-color-scheme="light"] .inspector-annotations-btn.primary { background: #1a75d2; color: #ffffff; } [data-color-scheme="light"] .inspector-annotations-btn.secondary { background: rgba(0, 0, 0, 0.06); color: #475569; } [data-color-scheme="light"] .inspector-annotations-btn.secondary:hover { background: rgba(0, 0, 0, 0.1); } [data-color-scheme="light"] .inspector-annotations-empty { color: #94a3b8; } /* Annotation scene groups */ [data-color-scheme="light"] .inspector-annotations-scene-group { border-bottom-color: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .inspector-annotations-scene-header:hover { background: rgba(0, 0, 0, 0.03); } [data-color-scheme="light"] .inspector-annotations-chevron { color: #94a3b8; } [data-color-scheme="light"] .inspector-annotations-scene-title { color: #334155; } [data-color-scheme="light"] .inspector-annotations-scene-count { color: #94a3b8; } /* Annotation cards */ [data-color-scheme="light"] .inspector-annotations-card { background: rgba(0, 0, 0, 0.03); border-left-color: #94a3b8; } [data-color-scheme="light"] .inspector-annotations-card:hover { background: rgba(0, 0, 0, 0.06); } @keyframes card-highlight-fade-light { 0% { background: rgba(26, 117, 210, 0.12); } 100% { background: rgba(0, 0, 0, 0.03); box-shadow: none; } } [data-color-scheme="light"] .inspector-annotations-card.highlighted { background: rgba(26, 117, 210, 0.1); box-shadow: 0 0 0 1px rgba(26, 117, 210, 0.2); animation: card-highlight-fade-light 2s ease forwards; } [data-color-scheme="light"] .inspector-annotations-card-line { color: #94a3b8; } [data-color-scheme="light"] .inspector-annotations-card-time { color: #94a3b8; } [data-color-scheme="light"] .inspector-annotations-card-body { color: #1e293b; } [data-color-scheme="light"] .inspector-annotations-reply-link { color: #94a3b8; } [data-color-scheme="light"] .inspector-annotations-card-actions { border-top-color: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .inspector-annotations-action-btn { color: #94a3b8; } /* Annotation replies */ [data-color-scheme="light"] .inspector-annotations-replies { border-top-color: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .inspector-annotations-reply-meta { color: #94a3b8; } [data-color-scheme="light"] .inspector-annotations-reply-text { color: #1e293b; } [data-color-scheme="light"] .inspector-annotations-reply-input { background: #ffffff; border-color: rgba(15, 23, 42, 0.16); color: #1e293b; } [data-color-scheme="light"] .inspector-annotations-reply-input:focus { border-color: #1a75d2; box-shadow: 0 0 0 3px rgba(26, 117, 210, 0.12); } /* @Mention autocomplete dropdown */ [data-color-scheme="light"] .mention-autocomplete-dropdown { background: #ffffff; border-color: rgba(15, 23, 42, 0.12); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .mention-autocomplete-item:hover, [data-color-scheme="light"] .mention-autocomplete-item.selected { background: rgba(26, 117, 210, 0.08); } [data-color-scheme="light"] .mention-autocomplete-name { color: #1e293b; } [data-color-scheme="light"] .mention-autocomplete-dept { color: #94a3b8; } /* ── Interpolation Badges ── */ [data-color-scheme="light"] .inspector-interp-selectable { outline-color: rgba(26, 117, 210, 0.35); } [data-color-scheme="light"] .inspector-interp-selectable:hover { outline-color: rgba(26, 117, 210, 0.65); } /* ========================================================================= * VIEWER PANEL * ========================================================================= */ [data-color-scheme="light"] .viewer-panel { background: #eef2f7; border-bottom-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .viewer-panel__toolbar { background: #e2e8f0; border-bottom-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .viewer-panel__scene { color: #64748b; } [data-color-scheme="light"] .viewer-panel__scene--active { color: #1e293b; } [data-color-scheme="light"] .viewer-panel__btn { color: #64748b; } [data-color-scheme="light"] .viewer-panel__btn:hover { background: rgba(15, 23, 42, 0.06); color: #0f172a; border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .viewer-panel__btn:disabled:hover { background: transparent; color: #64748b; } [data-color-scheme="light"] .viewer-panel__close { border-color: rgba(15, 23, 42, 0.1); color: #64748b; } [data-color-scheme="light"] .viewer-panel__close:hover { background: rgba(15, 23, 42, 0.06); color: #334155; } [data-color-scheme="light"] .viewer-panel__close kbd { background: rgba(15, 23, 42, 0.06); border-color: rgba(15, 23, 42, 0.12); color: #94a3b8; } [data-color-scheme="light"] .viewer-instance { background: #f1f5f9; } [data-color-scheme="light"] .viewer-instance__header { background: #e2e8f0; border-bottom-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .viewer-instance__select { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.12); color: #334155; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%2364748b' stroke-width='1.5'/%3E%3C/svg%3E"); } [data-color-scheme="light"] .viewer-instance__select:hover { border-color: rgba(15, 23, 42, 0.2); background-color: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .viewer-instance__active-label { color: #94a3b8; } [data-color-scheme="light"] .viewer-instance__remove { color: #94a3b8; } [data-color-scheme="light"] .viewer-instance__remove:hover { background: rgba(220, 38, 38, 0.08); color: #dc2626; } [data-color-scheme="light"] .viewer-instance__content { background: #e2e8f0; } [data-color-scheme="light"] .viewer-instance__shot-label { background: rgba(255, 255, 255, 0.85); color: #334155; } [data-color-scheme="light"] .viewer-instance__shot-card-number { color: #475569; } [data-color-scheme="light"] .viewer-instance__shot-card-type, [data-color-scheme="light"] .viewer-instance__shot-card-desc { color: #64748b; } [data-color-scheme="light"] .viewer-instance__placeholder-number { color: #475569; } [data-color-scheme="light"] .viewer-instance__placeholder-heading { color: #64748b; } [data-color-scheme="light"] .viewer-instance__badge { color: #94a3b8; border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .viewer-instance__timeline-timecode { color: #64748b; } /* ========================================================================= * NODE CANVAS * ========================================================================= */ [data-color-scheme="light"] { --node-bg: #ffffff; --node-bg-hover: #f8fafc; --node-border: rgba(15, 23, 42, 0.14); --node-border-selected: #1a75d2; --node-header-bg: #f1f5f9; --node-text: #0f172a; --node-text-muted: #64748b; --node-port-bg: #cbd5e1; --node-port-connected: #1a75d2; --node-connection: #94a3b8; --node-connection-active: #1a75d2; --canvas-bg: #f5f5f5; --canvas-grid: rgba(15, 23, 42, 0.04); --toolbar-bg: #ffffff; --toolbar-border: rgba(15, 23, 42, 0.1); --palette-bg: #ffffff; --minimap-bg: rgba(255, 255, 255, 0.8); } [data-color-scheme="light"] .node-box:hover { border-color: rgba(15, 23, 42, 0.22); } [data-color-scheme="light"] .node-box.selected { box-shadow: 0 0 0 2px rgba(26, 117, 210, 0.2), 0 4px 12px rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .node-box { box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .toolbar-btn:hover:not(:disabled) { background: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .node-btn:hover { background: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .palette-close:hover, [data-color-scheme="light"] .inspector-close:hover { background: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .node-display-json, [data-color-scheme="light"] .export-preview { background: #f1f5f9; } [data-color-scheme="light"] .node-display-notice { background: rgba(15, 23, 42, 0.03); } [data-color-scheme="light"] .nodes2-palette, [data-color-scheme="light"] .nodes2-context-menu, [data-color-scheme="light"] .nodes2-inspector { box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .minimap-viewport { background: rgba(26, 117, 210, 0.08); } /* ========================================================================= * DISCOVERY FLOW * ========================================================================= */ /* Discovery mostly uses token vars that cascade from light.css root overrides. Below: fix rgba(255,255,255,...) patterns that assume dark backgrounds. */ [data-color-scheme="light"] .discovery-sidebar { background: rgba(15, 23, 42, 0.03); } [data-color-scheme="light"] .discovery-nav-item:hover { background: rgba(15, 23, 42, 0.04); } [data-color-scheme="light"] .discovery-nav-item.active { background: rgba(26, 117, 210, 0.06); } [data-color-scheme="light"] .discovery-input { background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .discovery-input:focus { box-shadow: 0 0 0 3px rgba(26, 117, 210, 0.12); } [data-color-scheme="light"] .discovery-method-chip { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .discovery-method-chip:hover { background: rgba(15, 23, 42, 0.06); border-color: rgba(15, 23, 42, 0.16); } [data-color-scheme="light"] .discovery-method-chip-count { background: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .discovery-tone-chip { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .discovery-tone-chip:hover { border-color: rgba(15, 23, 42, 0.18); background: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .discovery-tone-chip.selected { background: rgba(26, 117, 210, 0.1); border-color: rgba(26, 117, 210, 0.3); } [data-color-scheme="light"] .discovery-toggle-chip { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .discovery-relationship-web, [data-color-scheme="light"] .discovery-stakes-meter { background: rgba(15, 23, 42, 0.02); border-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .rel-node-label-bg { fill: rgba(255, 255, 255, 0.88); } [data-color-scheme="light"] .rel-connection { stroke: rgba(15, 23, 42, 0.18); } [data-color-scheme="light"] .stakes-grid-line { stroke: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .discovery-timeline-bar { background: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .discovery-pin { border-color: #ffffff; } [data-color-scheme="light"] .discovery-pin-card, [data-color-scheme="light"] .discovery-beat-section, [data-color-scheme="light"] .discovery-beat-card, [data-color-scheme="light"] .discovery-character-card, [data-color-scheme="light"] .discovery-summary-section, [data-color-scheme="light"] .discovery-source-card, [data-color-scheme="light"] .discovery-claim-row, [data-color-scheme="light"] .discovery-segment-card, [data-color-scheme="light"] .discovery-theme-position-card { background: rgba(15, 23, 42, 0.02); border-color: rgba(15, 23, 42, 0.08); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .discovery-pin-card:hover, [data-color-scheme="light"] .discovery-beat-card:hover, [data-color-scheme="light"] .discovery-character-card:hover, [data-color-scheme="light"] .discovery-source-card:hover, [data-color-scheme="light"] .discovery-segment-card:hover, [data-color-scheme="light"] .discovery-theme-position-card:hover { border-color: rgba(15, 23, 42, 0.14); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .discovery-beat-character-select { background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .discovery-beat-character-select option { background: #ffffff; color: #0f172a; } [data-color-scheme="light"] .discovery-add-btn { border-color: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .discovery-add-btn:hover { border-color: rgba(15, 23, 42, 0.2); background: rgba(15, 23, 42, 0.02); } [data-color-scheme="light"] .discovery-beat-list.drag-over { background: rgba(26, 117, 210, 0.04); outline-color: rgba(26, 117, 210, 0.2); } /* ========================================================================= * CONTEXT MENUS (screenplay) * ========================================================================= */ [data-color-scheme="light"] .screenplay-context-menu { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); color: #1e293b; } /* ========================================================================= * STORYBOARD * ========================================================================= */ /* ── Page container & grid area ── */ [data-color-scheme="light"] .sb-container { background: #f5f5f5; } [data-color-scheme="light"] .sb-grid-area { background: #f5f5f5; } /* ── Toolbar ── */ [data-color-scheme="light"] .sb-toolbar { background: #ffffff; border-top-color: rgba(15, 23, 42, 0.1); border-bottom-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .sb-filter-select { background-color: #f8fafc; border-color: rgba(15, 23, 42, 0.14); color: #0f172a; } [data-color-scheme="light"] .sb-filter-select:focus { border-color: #FF6B35; } [data-color-scheme="light"] .sb-view-toggle { background: rgba(15, 23, 42, 0.05); } [data-color-scheme="light"] .sb-view-btn:hover:not(:disabled) { background: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .sb-view-btn--active { background: rgba(255, 107, 53, 0.12); } /* ── Batch action bar ── */ [data-color-scheme="light"] .sb-batch-bar { background: rgba(255, 107, 53, 0.06); border-bottom-color: rgba(255, 107, 53, 0.15); } [data-color-scheme="light"] .sb-batch-toggle--active { background: rgba(255, 107, 53, 0.1); border-color: rgba(255, 107, 53, 0.3); } [data-color-scheme="light"] .sb-batch-action--archive { border-color: rgba(245, 158, 11, 0.25); } [data-color-scheme="light"] .sb-batch-action--archive:hover:not(:disabled) { background: rgba(245, 158, 11, 0.1); } [data-color-scheme="light"] .sb-batch-action--delete { border-color: rgba(239, 83, 80, 0.25); } [data-color-scheme="light"] .sb-batch-action--delete:hover:not(:disabled) { background: rgba(239, 83, 80, 0.1); } /* ── Scene sections ── */ [data-color-scheme="light"] .sb-scene-header { border-bottom-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .sb-scene-header:hover { border-bottom-color: rgba(15, 23, 42, 0.18); } /* ── Frame cards ── */ [data-color-scheme="light"] .sb-card { background: #ffffff; border-color: rgba(15, 23, 42, 0.08); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .sb-card:hover { border-color: rgba(15, 23, 42, 0.18); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .sb-card--selected { border-color: #FF6B35; box-shadow: 0 0 0 1px rgba(255, 107, 53, 0.3); } [data-color-scheme="light"] .sb-card-thumb { background: #e2e8f0; } [data-color-scheme="light"] .sb-card-thumb-placeholder { background: linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 100%); } /* Card badges — keep opaque on light backgrounds */ [data-color-scheme="light"] .sb-card-archived-badge { background: rgba(15, 23, 42, 0.6); color: #f59e0b; } [data-color-scheme="light"] .sb-card-play-badge { background: rgba(15, 23, 42, 0.45); } [data-color-scheme="light"] .sb-card-duration { background: rgba(15, 23, 42, 0.6); color: #ffffff; } /* Card info area */ [data-color-scheme="light"] .sb-card-info { background: #ffffff; } /* ── Shot rows ── */ [data-color-scheme="light"] .sb-shot-row { border-bottom-color: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .sb-shot-strip { scrollbar-color: rgba(15, 23, 42, 0.15) transparent; } [data-color-scheme="light"] .sb-shot-strip::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.15); } /* ── Detail panel ── */ [data-color-scheme="light"] .sb-detail-panel { background: #ffffff; border-left-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .sb-detail-header { border-bottom-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .sb-detail-close:hover { background: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .sb-detail-image-wrap:hover::after { background: rgba(15, 23, 42, 0.7); color: #ffffff; } [data-color-scheme="light"] .sb-detail-video { background: #1e293b; } [data-color-scheme="light"] .sb-detail-meta td { border-bottom-color: rgba(15, 23, 42, 0.06); } /* Detail rating */ [data-color-scheme="light"] .sb-detail-rating-num { border-color: rgba(15, 23, 42, 0.12); color: #475569; } [data-color-scheme="light"] .sb-detail-rating-num:hover { background: rgba(255, 107, 53, 0.1); border-color: rgba(255, 107, 53, 0.3); } [data-color-scheme="light"] .sb-detail-rating-num:disabled:hover { background: transparent; border-color: rgba(15, 23, 42, 0.12); color: #475569; } [data-color-scheme="light"] .sb-detail-rating-num--active { color: #ffffff; } /* Detail prompt */ [data-color-scheme="light"] .sb-detail-prompt-text { background: rgba(15, 23, 42, 0.04); color: #4b5563; } /* Detail actions */ [data-color-scheme="light"] .sb-detail-actions { border-top-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .sb-detail-action { border-color: rgba(15, 23, 42, 0.14); } [data-color-scheme="light"] .sb-detail-action:hover { background: rgba(15, 23, 42, 0.05); } [data-color-scheme="light"] .sb-detail-action--delete { border-color: rgba(239, 83, 80, 0.25); } [data-color-scheme="light"] .sb-detail-action--delete:hover { background: rgba(239, 83, 80, 0.08); } [data-color-scheme="light"] .sb-detail-action--primary { background: rgba(255, 107, 53, 0.1); border-color: rgba(255, 107, 53, 0.25); } [data-color-scheme="light"] .sb-detail-action--primary:hover { background: rgba(255, 107, 53, 0.18); } /* Resize handle */ [data-color-scheme="light"] .sb-resize-handle::after { background: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .sb-resize-handle:hover::after, [data-color-scheme="light"] .sb-resize-handle--active::after { background: rgba(255, 107, 53, 0.4); } [data-color-scheme="light"] .sb-resize-handle--active::after { background: #FF6B35; } /* ── Loading & empty states ── */ [data-color-scheme="light"] .sb-spinner { border-color: rgba(15, 23, 42, 0.12); border-top-color: #FF6B35; } /* ── Enhance dialog ── */ [data-color-scheme="light"] .sb-enhance-hint { background: #f8fafc; } [data-color-scheme="light"] .sb-enhance-modifier { background: #ffffff; border-color: rgba(15, 23, 42, 0.12); color: #0f172a; } [data-color-scheme="light"] .sb-enhance-submit { color: #ffffff; } [data-color-scheme="light"] .sb-enhance-cancel { background: #e2e8f0; color: #475569; } [data-color-scheme="light"] .sb-enhance-cancel:hover { background: #cbd5e1; } /* Enhance badges & parent links */ [data-color-scheme="light"] .sb-detail-badge--enhanced { background: rgba(167, 139, 250, 0.08); } [data-color-scheme="light"] .sb-detail-parent-link:hover { background: #e2e8f0; } /* ── Extend dialog ── */ [data-color-scheme="light"] .sb-extend-dialog-content { background: #ffffff; border-color: rgba(15, 23, 42, 0.14); color: #0f172a; box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18); } [data-color-scheme="light"] .sb-extend-dialog-content select, [data-color-scheme="light"] .sb-extend-dialog-content textarea { background: #f8fafc; border-color: rgba(15, 23, 42, 0.14); color: #0f172a; } [data-color-scheme="light"] .sb-extend-anchor { background: #f8fafc; border-color: rgba(15, 23, 42, 0.14); color: #475569; } [data-color-scheme="light"] .sb-extend-cancel { background: transparent; color: #475569; border-color: rgba(15, 23, 42, 0.14); } /* Extend/toggle buttons */ [data-color-scheme="light"] .sb-detail-toggle-btn { border-color: rgba(15, 23, 42, 0.14); background: #f8fafc; color: #475569; } [data-color-scheme="light"] .sb-detail-toggle-btn:hover { border-color: rgba(26, 117, 210, 0.3); color: #0f172a; } [data-color-scheme="light"] .sb-detail-toggle-btn--revert:hover { border-color: rgba(217, 119, 6, 0.3); } /* ── Grid context menu ── */ [data-color-scheme="light"] .sb-grid-context-menu { background: #ffffff; border-color: rgba(15, 23, 42, 0.12); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .sb-grid-context-menu-item { color: #0f172a; } [data-color-scheme="light"] .sb-grid-context-menu-item:hover { background: rgba(15, 23, 42, 0.04); } [data-color-scheme="light"] .sb-grid-context-menu-item--delete:hover { background: rgba(239, 68, 68, 0.08); } /* ── Composite layers & controls ── */ [data-color-scheme="light"] .sb-detail-composite-section { background: rgba(167, 139, 250, 0.05); border-color: rgba(167, 139, 250, 0.12); } [data-color-scheme="light"] .sb-detail-composite-layer { background: rgba(15, 23, 42, 0.03); } [data-color-scheme="light"] .sb-detail-composite-layer--expanded { background: rgba(167, 139, 250, 0.06); } [data-color-scheme="light"] .sb-detail-composite-layer-header:hover { background: rgba(15, 23, 42, 0.04); } [data-color-scheme="light"] .sb-detail-composite-layer-text { color: #0f172a; } [data-color-scheme="light"] .sb-detail-composite-layer-delete { color: #94a3b8; } [data-color-scheme="light"] .sb-detail-composite-layer-delete:hover { color: #dc2626; } [data-color-scheme="light"] .sb-layer-input { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.12); color: #0f172a; } [data-color-scheme="light"] .sb-layer-input:focus { border-color: rgba(167, 139, 250, 0.4); } [data-color-scheme="light"] .sb-layer-select { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.12); color: #0f172a; } [data-color-scheme="light"] .sb-layer-select:focus { border-color: rgba(167, 139, 250, 0.4); } [data-color-scheme="light"] .sb-layer-slider { background: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .sb-layer-color { border-color: rgba(15, 23, 42, 0.15); } [data-color-scheme="light"] .sb-detail-layer-controls { border-top-color: rgba(167, 139, 250, 0.1); } /* Depth summary & controls */ [data-color-scheme="light"] .sb-detail-depth-summary { background: rgba(15, 23, 42, 0.02); border-color: rgba(167, 139, 250, 0.12); } [data-color-scheme="light"] .sb-detail-depth-summary--ready { background: rgba(167, 139, 250, 0.04); } [data-color-scheme="light"] .sb-detail-depth-summary--active { border-color: rgba(196, 181, 253, 0.3); } [data-color-scheme="light"] .sb-detail-depth-stat { background: rgba(15, 23, 42, 0.04); color: #475569; } /* Depth presets */ [data-color-scheme="light"] .sb-layer-depth-preset { border-color: rgba(167, 139, 250, 0.2); color: #6b7280; } [data-color-scheme="light"] .sb-layer-depth-preset:hover { border-color: rgba(167, 139, 250, 0.4); color: #7c3aed; } [data-color-scheme="light"] .sb-layer-depth-preset.active { background: rgba(167, 139, 250, 0.14); border-color: rgba(167, 139, 250, 0.4); color: #7c3aed; } [data-color-scheme="light"] .sb-layer-backboard-section { border-top-color: rgba(167, 139, 250, 0.12); } [data-color-scheme="light"] .sb-layer-control-group { border-left-color: rgba(167, 139, 250, 0.2); } /* Inline composite actions */ [data-color-scheme="light"] .sb-detail-action--composite { background: rgba(167, 139, 250, 0.08); border-color: rgba(167, 139, 250, 0.2); } [data-color-scheme="light"] .sb-detail-action--composite:hover { background: rgba(167, 139, 250, 0.14); } [data-color-scheme="light"] .sb-detail-action--inline { border-color: rgba(167, 139, 250, 0.2); } [data-color-scheme="light"] .sb-detail-action--inline:hover { background: rgba(167, 139, 250, 0.1); } [data-color-scheme="light"] .sb-detail-action--inline.active { background: rgba(167, 139, 250, 0.14); border-color: rgba(167, 139, 250, 0.35); } [data-color-scheme="light"] .sb-detail-action--apply { background: rgba(167, 139, 250, 0.1); border-color: rgba(167, 139, 250, 0.3); } [data-color-scheme="light"] .sb-detail-action--apply:hover { background: rgba(167, 139, 250, 0.18); } /* ── Split pane (Inspector storyboard) ── */ [data-color-scheme="light"] .split-pane-header { background: #ffffff; border-bottom-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .split-pane-close:hover, [data-color-scheme="light"] .split-pane-gang-toggle:hover { background: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .split-pane-frame { background: #f8fafc; border-color: transparent; } [data-color-scheme="light"] .split-pane-frame:hover { background: rgba(15, 23, 42, 0.04); } [data-color-scheme="light"] .split-pane-frame.is-active { background: rgba(255, 107, 53, 0.06); box-shadow: 0 0 0 1px rgba(255, 107, 53, 0.2); } [data-color-scheme="light"] .split-pane-frame-thumb { background: #e2e8f0; } [data-color-scheme="light"] .split-pane-frame-thumb-placeholder { background: linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 100%); } /* Thumbnail overlay buttons — keep dark for contrast on images */ [data-color-scheme="light"] .split-pane-frame-overlay-btn { background: rgba(15, 23, 42, 0.55); color: #ffffff; } [data-color-scheme="light"] .split-pane-frame-overlay-btn:hover { background: #FF6B35; color: #ffffff; } /* Stacked frame treatment */ [data-color-scheme="light"] .split-pane-frame--stacked { box-shadow: 3px 3px 0 0 rgba(15, 23, 42, 0.06), 6px 6px 0 0 rgba(15, 23, 42, 0.03); } /* Frame action bar */ [data-color-scheme="light"] .split-pane-frame-action-bar { border-bottom-color: rgba(15, 23, 42, 0.06); background: rgba(15, 23, 42, 0.03); } [data-color-scheme="light"] .split-pane-frame-action-btn:hover { background: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .split-pane-frame-action-btn--delete:hover { background: rgba(239, 83, 80, 0.08); } /* Rating picker popup */ [data-color-scheme="light"] .split-pane-rating-picker { background: #ffffff; border-color: rgba(15, 23, 42, 0.14); box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .split-pane-rating-num { border-color: rgba(15, 23, 42, 0.12); color: #475569; } [data-color-scheme="light"] .split-pane-rating-num:hover { background: rgba(255, 107, 53, 0.1); border-color: rgba(255, 107, 53, 0.3); } [data-color-scheme="light"] .split-pane-rating-num--active { color: #ffffff; } [data-color-scheme="light"] .split-pane-rating-clear:hover { background: rgba(15, 23, 42, 0.06); } /* Version dots */ [data-color-scheme="light"] .split-pane-frame-version-strip::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.15); } [data-color-scheme="light"] .split-pane-frame-version-dot { border-color: rgba(15, 23, 42, 0.12); background: rgba(15, 23, 42, 0.04); } [data-color-scheme="light"] .split-pane-frame-version-dot:hover { border-color: rgba(15, 23, 42, 0.25); } /* Shot headers */ [data-color-scheme="light"] .split-pane-shot-header { border-top-color: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .split-pane-shot-header.is-active { background: rgba(255, 107, 53, 0.04); } /* Seed display */ [data-color-scheme="light"] .split-pane-frame-seed--clickable:hover { background: rgba(15, 23, 42, 0.06); } /* Loading spinner */ [data-color-scheme="light"] .split-pane-spinner { border-color: rgba(15, 23, 42, 0.12); border-top-color: #FF6B35; } /* Gutter tooltip */ [data-color-scheme="light"] .storyboard-gutter-tooltip { background: #ffffff; border-color: rgba(15, 23, 42, 0.14); box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12); } /* Lightbox — keep dark surround for image presentation */ /* Mobile detail panel shadow */ @media (max-width: 640px) { [data-color-scheme="light"] .sb-detail-panel { box-shadow: -4px 0 20px rgba(15, 23, 42, 0.12); } } /* ========================================================================= * CHARACTER PROFILE PAGE * ========================================================================= */ [data-color-scheme="light"] .character-profile-page { background: radial-gradient(circle at top left, rgba(26, 117, 210, 0.14), transparent 34%), linear-gradient(135deg, #eef4fb 0%, #f8f2e8 50%, #edf6ff 100%); } [data-color-scheme="light"] .character-profile-page .character-breadcrumb, [data-color-scheme="light"] .character-profile-page .breadcrumb-item, [data-color-scheme="light"] .character-profile-page .breadcrumb-link { color: #64748b; } [data-color-scheme="light"] .character-profile-page .breadcrumb-link:hover, [data-color-scheme="light"] .character-profile-page .breadcrumb-current { color: #0f172a; } [data-color-scheme="light"] .char-profile-header, [data-color-scheme="light"] .char-profile-tabs, [data-color-scheme="light"] .char-profile-card, [data-color-scheme="light"] .char-profile-section, [data-color-scheme="light"] .char-detail-card, [data-color-scheme="light"] .char-stat-block, [data-color-scheme="light"] .char-rel-card, [data-color-scheme="light"] .char-gallery-card, [data-color-scheme="light"] .char-voice-card, [data-color-scheme="light"] .char-timeline-item { background: rgba(255, 255, 255, 0.82); border-color: rgba(15, 23, 42, 0.12); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07); backdrop-filter: blur(16px) saturate(1.15); } [data-color-scheme="light"] .char-profile-name, [data-color-scheme="light"] .char-section-title, [data-color-scheme="light"] .char-detail-value, [data-color-scheme="light"] .char-stat-value, [data-color-scheme="light"] .char-rel-name, [data-color-scheme="light"] .char-gallery-card-label { color: #0f172a; } [data-color-scheme="light"] .char-profile-role, [data-color-scheme="light"] .char-detail-label, [data-color-scheme="light"] .char-stat-label, [data-color-scheme="light"] .char-rel-type, [data-color-scheme="light"] .char-timeline-date, [data-color-scheme="light"] .char-profile-bio, [data-color-scheme="light"] .char-profile-tab { color: #475569; } [data-color-scheme="light"] .char-profile-tab:hover { color: #0f172a; background: rgba(255, 255, 255, 0.5); } [data-color-scheme="light"] .char-profile-tab.active { color: #1a75d2; } [data-color-scheme="light"] .char-detail-card:hover, [data-color-scheme="light"] .char-rel-card:hover, [data-color-scheme="light"] .char-gallery-card:hover { background: rgba(255, 255, 255, 0.94); border-color: rgba(26, 117, 210, 0.22); } [data-color-scheme="light"] .char-portrait-placeholder { background: linear-gradient(135deg, #eef3fb 0%, #f5f8fc 100%); color: rgba(100, 116, 139, 0.45); } [data-color-scheme="light"] .char-profile-edit-btn, [data-color-scheme="light"] .char-profile-btn-secondary { background: rgba(255, 255, 255, 0.72); border-color: rgba(15, 23, 42, 0.12); color: #475569; } [data-color-scheme="light"] .char-profile-edit-btn:hover, [data-color-scheme="light"] .char-profile-btn-secondary:hover { background: #ffffff; border-color: rgba(26, 117, 210, 0.22); color: #0f172a; } /* ========================================================================= * TOGGLE BUTTON STYLING * ========================================================================= */ .color-scheme-toggle { background: transparent; border: none; cursor: pointer; padding: 6px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.7); transition: color 0.2s, background 0.2s; } .color-scheme-toggle:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); } [data-color-scheme="light"] .color-scheme-toggle { color: rgba(0, 0, 0, 0.5); } [data-color-scheme="light"] .color-scheme-toggle:hover { color: #0f172a; background: rgba(0, 0, 0, 0.06); } /* ========================================================================= * HCT TAB BAR * ========================================================================= */ /* Back-button nav (header) */ [data-color-scheme="light"] .prism-back-btn { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.6); } [data-color-scheme="light"] .prism-back-btn:hover { background: rgba(0, 0, 0, 0.08); border-color: var(--color-cyan); color: var(--color-cyan); } /* Tab bar */ [data-color-scheme="light"] .hct-tab-bar { background: var(--overlay-8); } [data-color-scheme="light"] .hct-tab.active { background: var(--color-blue); color: #fff; } /* ========================================================================= * DVR MODULE * Video container intentionally stays dark (#000) for proper playback. * ========================================================================= */ /* Controls bar & take selector backgrounds */ [data-color-scheme="light"] .dvr-scrubber-track { background: #d1d9e6; } [data-color-scheme="light"] .dvr-scrubber-handle { border-color: #0f172a; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); } [data-color-scheme="light"] .dvr-btn:hover { background: #d1d9e6; color: #0f172a; } [data-color-scheme="light"] .dvr-btn:active { color: #ffffff; } [data-color-scheme="light"] .dvr-speed-select { background: #e3e9f2; border-color: rgba(15, 23, 42, 0.14); color: #475569; } [data-color-scheme="light"] .dvr-scene-label { color: #0f172a; } /* Timeline tooltip */ [data-color-scheme="light"] .dvr-timeline-tooltip { background: #ffffff; border-color: rgba(15, 23, 42, 0.14); color: #0f172a; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1); } /* Take selector */ [data-color-scheme="light"] .dvr-take-selector-header { background: #eef2f7; border-bottom-color: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .dvr-take-scene-group { border-bottom-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .dvr-take-selector-loading, [data-color-scheme="light"] .dvr-take-item.active { background: var(--accent-primary, #1a75d2); color: #ffffff; } [data-color-scheme="light"] .dvr-take-duration, /* Angle switcher */ [data-color-scheme="light"] .angle-button { background: #eef2f7; border-color: transparent; } [data-color-scheme="light"] .angle-button:hover { background: #e3e9f2; border-color: rgba(15, 23, 42, 0.14); } [data-color-scheme="light"] .angle-button.active { color: #ffffff; } [data-color-scheme="light"] .angle-icon, [data-color-scheme="light"] .angle-info { border-top-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .segment-count, /* Quality selector */ [data-color-scheme="light"] .quality-display-button { background: #e3e9f2; border-color: rgba(15, 23, 42, 0.14); } [data-color-scheme="light"] .quality-dropdown { background: #ffffff; border-color: rgba(15, 23, 42, 0.14); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .quality-option:hover { background: #f0f4f8; } [data-color-scheme="light"] .quality-option.active { background: var(--accent-primary, #1a75d2); color: #ffffff; } [data-color-scheme="light"] .quality-option.active .quality-option-desc { color: rgba(255, 255, 255, 0.8); } [data-color-scheme="light"] .quality-separator { background: rgba(15, 23, 42, 0.1); } /* ========================================================================= * PRODUCTION SYNC * Status bar colors (rolling red, cut green, etc.) are intentionally * preserved — they are semantic and must remain visible in both modes. * ========================================================================= */ /* Session info panel */ [data-color-scheme="light"] .production-sync-panel { background: #ffffff; border-color: rgba(15, 23, 42, 0.14); box-shadow: 0 4px 20px rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .production-sync-panel__header { background: rgba(15, 23, 42, 0.04); border-bottom-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .production-sync-panel__title { color: #0f172a; } [data-color-scheme="light"] .production-sync-panel__close { color: #64748b; } [data-color-scheme="light"] .production-sync-panel__close:hover { color: #0f172a; } /* Status control buttons */ [data-color-scheme="light"] .production-sync-btn { border-color: rgba(15, 23, 42, 0.14); background: #ffffff; color: #334155; } [data-color-scheme="light"] .production-sync-btn:hover { background: #f0f4f8; } /* Keyboard shortcuts hint */ [data-color-scheme="light"] .production-sync-shortcuts { color: #64748b; border-top-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .production-sync-shortcuts kbd { background: rgba(15, 23, 42, 0.06); border-color: rgba(15, 23, 42, 0.14); color: #334155; } /* Toast notification — rolling/action/cut keep their semantic colors, but default dark background gets lighter backdrop for legibility */ [data-color-scheme="light"] .production-sync-toast { background: rgba(15, 23, 42, 0.88); } /* Session panel (modal) */ [data-color-scheme="light"] .session-panel-backdrop { background: rgba(15, 23, 42, 0.3); } [data-color-scheme="light"] .session-panel { background: #ffffff; border-color: rgba(15, 23, 42, 0.14); box-shadow: 0 20px 60px rgba(15, 23, 42, 0.16); } [data-color-scheme="light"] .session-panel__header { background: rgba(15, 23, 42, 0.04); border-bottom-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .session-panel__title { color: #0f172a; } [data-color-scheme="light"] .session-panel__close { color: #64748b; } [data-color-scheme="light"] .session-panel__close:hover { color: #0f172a; background: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .session-panel__section { border-bottom-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .session-panel__section-header h3 { color: #64748b; } [data-color-scheme="light"] .session-panel__refresh-btn { color: #64748b; } [data-color-scheme="light"] .session-panel__refresh-btn:hover { color: #0f172a; } /* Active session highlight */ [data-color-scheme="light"] .session-panel__active-session { background: rgba(26, 117, 210, 0.06); } [data-color-scheme="light"] .session-panel__session-name { color: #0f172a; } [data-color-scheme="light"] .session-panel__session-meta { color: #64748b; } /* Status control buttons in session panel */ [data-color-scheme="light"] .session-panel__status-btn { background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.14); color: #334155; } [data-color-scheme="light"] .session-panel__status-btn:hover { background: rgba(15, 23, 42, 0.06); } /* Session list items */ [data-color-scheme="light"] .session-panel__session-item { background: rgba(15, 23, 42, 0.02); border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .session-panel__session-item:hover { background: rgba(15, 23, 42, 0.04); } [data-color-scheme="light"] .session-item__name { color: #0f172a; } [data-color-scheme="light"] .session-item__meta { color: #64748b; } /* Loading/empty/error states */ [data-color-scheme="light"] .session-panel__loading, [data-color-scheme="light"] .session-panel__empty, [data-color-scheme="light"] .session-panel__error { color: #64748b; } /* Create session form inputs */ [data-color-scheme="light"] .session-panel__form-group input, [data-color-scheme="light"] .session-panel__form-group select { background: #f8fafc; border-color: rgba(15, 23, 42, 0.14); color: #0f172a; } [data-color-scheme="light"] .session-panel__form-group input::placeholder { color: #94a3b8; } [data-color-scheme="light"] .session-panel__form-group label { color: #64748b; } /* Buttons */ [data-color-scheme="light"] .session-panel__btn--primary { background: var(--accent-primary, #1a75d2); color: #ffffff; } [data-color-scheme="light"] .session-panel__btn--secondary { background: #f0f4f8; color: #334155; } [data-color-scheme="light"] .session-panel__btn--secondary:hover { background: #e3e9f2; } [data-color-scheme="light"] .session-panel__btn--danger { background: rgba(220, 38, 38, 0.08); color: #dc2626; } [data-color-scheme="light"] .session-panel__btn--danger:hover { background: rgba(220, 38, 38, 0.14); } /* Header sync button */ [data-color-scheme="light"] .production-sync-header-btn { border-color: rgba(15, 23, 42, 0.14); color: #64748b; } [data-color-scheme="light"] .production-sync-header-btn:hover { background: rgba(15, 23, 42, 0.06); color: #0f172a; border-color: #94a3b8; } [data-color-scheme="light"] .production-sync-status-dot { border-color: #f5f5f5; } /* Footer session info */ [data-color-scheme="light"] .footer-session-info { color: #64748b; } /* ========================================================================= * DISCOVERY FLOW — additional overrides * (Base discovery overrides are above; these cover the container, * sidebar title, nav numbers, overlay, phase nav buttons, and * pin/skip button patterns that use rgba(255,255,255,...) fallbacks.) * ========================================================================= */ [data-color-scheme="light"] #discovery-container { background: #f5f5f5; color: #0f172a; } [data-color-scheme="light"] .discovery-nav-item.active { color: var(--accent-primary, #1a75d2); } [data-color-scheme="light"] .discovery-nav-number { border-color: rgba(15, 23, 42, 0.14); } [data-color-scheme="light"] .discovery-skip-btn { color: #64748b; border-color: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .discovery-skip-btn:hover { color: #334155; border-color: rgba(15, 23, 42, 0.2); } /* Phase bottom navigation buttons */ [data-color-scheme="light"] .discovery-nav-btn--back { color: #475569; border-color: rgba(15, 23, 42, 0.14); } [data-color-scheme="light"] .discovery-nav-btn--back:hover { color: #0f172a; border-color: rgba(15, 23, 42, 0.2); } /* Save indicator */ [data-color-scheme="light"] .discovery-save-indicator { color: #94a3b8; } [data-color-scheme="light"] .discovery-save-spinner { border-color: rgba(26, 117, 210, 0.2); border-top-color: var(--accent-primary, #1a75d2); } /* Completion overlay */ [data-color-scheme="light"] .discovery-complete-overlay { background: #f5f5f5; } [data-color-scheme="light"] .discovery-complete-text { color: #0f172a; } /* Pin hint text */ [data-color-scheme="light"] .discovery-pin-hint { color: #94a3b8; } /* Pin label input */ [data-color-scheme="light"] .discovery-pin-label-input { color: #0f172a; border-bottom-color: rgba(15, 23, 42, 0.16); } /* Method chip active count */ [data-color-scheme="light"] .discovery-method-chip.active .discovery-method-chip-count { background: rgba(255, 255, 255, 0.35); } /* Method description text */ /* Method loading text */ [data-color-scheme="light"] .discovery-method-loading { color: #94a3b8; } /* Remove pin button */ [data-color-scheme="light"] .discovery-remove-pin-btn { color: #475569; border-color: rgba(15, 23, 42, 0.12); } /* ========================================================================= * CHARACTER DESIGNER PAGE * Three-panel layout: nav + content + preview. * ========================================================================= */ /* Page background */ [data-color-scheme="light"] .character-designer-page { --cd-bg: radial-gradient(circle at top left, rgba(26, 117, 210, 0.12), transparent 34%), linear-gradient(135deg, #eef4fb 0%, #f8f2e8 50%, #edf6ff 100%); --cd-accent: #1a75d2; --cd-accent-muted: rgba(26, 117, 210, 0.35); --cd-ai-purple: #7c3aed; --cd-border: rgba(15, 23, 42, 0.1); --cd-surface: rgba(15, 23, 42, 0.03); --cd-surface-hover: rgba(15, 23, 42, 0.06); --cd-text: #1e293b; --cd-text-muted: #64748b; --cd-text-dim: #94a3b8; } /* Nav panel */ [data-color-scheme="light"] .cd-nav { background: rgba(15, 23, 42, 0.03); border-right-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .cd-nav-item { color: #64748b; } [data-color-scheme="light"] .cd-nav-item:hover { color: #0f172a; background: rgba(15, 23, 42, 0.04); } [data-color-scheme="light"] .cd-nav-item.active { color: #1a75d2; background: rgba(26, 117, 210, 0.06); border-left-color: #1a75d2; } [data-color-scheme="light"] .cd-nav-fill-dot { background: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .cd-nav-fill-dot.filled { background: rgba(26, 117, 210, 0.6); } [data-color-scheme="light"] .cd-nav-footer { border-top-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .cd-ai-fill-btn { background: rgba(124, 58, 237, 0.05); border-color: rgba(124, 58, 237, 0.2); color: #7c3aed; } [data-color-scheme="light"] .cd-ai-fill-btn:hover { background: rgba(124, 58, 237, 0.1); border-color: rgba(124, 58, 237, 0.35); } [data-color-scheme="light"] .cd-nav-toggle { color: #94a3b8; border-bottom-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .cd-nav-toggle:hover { color: #64748b; } /* Content panel — blocks */ [data-color-scheme="light"] .cd-block { background: rgba(255, 255, 255, 0.72); border-color: rgba(15, 23, 42, 0.1); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .cd-block-header:hover { background: rgba(15, 23, 42, 0.03); } [data-color-scheme="light"] .cd-block-chevron { color: #94a3b8; } [data-color-scheme="light"] .cd-block-title { color: #475569; } /* Preview panel */ [data-color-scheme="light"] .cd-preview { background: rgba(15, 23, 42, 0.03); border-left-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .cd-preview-portrait-placeholder { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .cd-preview-portrait-placeholder .portrait-initial { color: #94a3b8; } [data-color-scheme="light"] .cd-preview-upload { background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.12); color: #64748b; } [data-color-scheme="light"] .cd-preview-upload:hover { background: rgba(15, 23, 42, 0.06); color: #0f172a; } [data-color-scheme="light"] .cd-preview-generate { background: rgba(124, 58, 237, 0.06); border-color: rgba(124, 58, 237, 0.2); color: #7c3aed; } [data-color-scheme="light"] .cd-preview-generate:hover { background: rgba(124, 58, 237, 0.12); border-color: rgba(124, 58, 237, 0.35); } [data-color-scheme="light"] .cd-preview-section-title { color: #94a3b8; border-bottom-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .cd-preview-stat-label { color: #64748b; } [data-color-scheme="light"] .cd-preview-stat-value { color: #1e293b; } [data-color-scheme="light"] .cd-preview-stat-value.empty { color: #94a3b8; } [data-color-scheme="light"] .cd-preview-check { color: #64748b; } [data-color-scheme="light"] .cd-preview-check-dot { background: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .cd-preview-check-dot.filled { background: rgba(22, 163, 74, 0.7); } [data-color-scheme="light"] .cd-preview-delete { border-top-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .cd-preview-delete .char-delete-btn { color: #64748b; border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .cd-preview-delete .char-delete-btn:hover { color: #dc2626; border-color: rgba(220, 38, 38, 0.3); background: rgba(220, 38, 38, 0.04); } /* Identity row */ [data-color-scheme="light"] .cd-preview-identity .cd-header-actor { color: #64748b; } /* Resize handles */ [data-color-scheme="light"] .cd-resize-handle::after { background: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .cd-resize-handle:hover::after, [data-color-scheme="light"] .cd-resize-handle.active::after { background: rgba(26, 117, 210, 0.4); } [data-color-scheme="light"] .cd-resize-handle.active::after { background: #1a75d2; } /* Mobile nav */ [data-color-scheme="light"] .cd-mobile-nav { background: rgba(15, 23, 42, 0.03); border-bottom-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .cd-mobile-nav-item { background: rgba(15, 23, 42, 0.04); color: #64748b; } [data-color-scheme="light"] .cd-mobile-nav-item.active { background: rgba(26, 117, 210, 0.08); color: #1a75d2; } /* Editable fields */ [data-color-scheme="light"] .editable-textarea { background: rgba(255, 255, 255, 0.72); border-color: rgba(15, 23, 42, 0.1); color: #1e293b; } [data-color-scheme="light"] .editable-textarea:hover { border-color: rgba(15, 23, 42, 0.18); } [data-color-scheme="light"] .editable-textarea:focus, [data-color-scheme="light"] .editable-textarea.editing { border-color: rgba(26, 117, 210, 0.35); background: rgba(255, 255, 255, 0.88); } /* Attributes grid */ [data-color-scheme="light"] .attr-category-header { color: #64748b; border-bottom-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .attr-label { color: #64748b; } [data-color-scheme="light"] .attr-input, [data-color-scheme="light"] .attr-select { background: rgba(255, 255, 255, 0.72); border-color: rgba(15, 23, 42, 0.1); color: #1e293b; } [data-color-scheme="light"] .attr-input:focus, [data-color-scheme="light"] .attr-select:focus { border-color: rgba(26, 117, 210, 0.4); background: rgba(255, 255, 255, 0.92); } [data-color-scheme="light"] .attr-input::placeholder { color: #94a3b8; } [data-color-scheme="light"] .attr-select option { background: #ffffff; color: #0f172a; } [data-color-scheme="light"] .attr-select { background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='rgba(15,23,42,0.35)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); } /* Interest tags */ [data-color-scheme="light"] .interest-tag { background: rgba(26, 117, 210, 0.08); color: #1e293b; border-color: rgba(26, 117, 210, 0.18); } [data-color-scheme="light"] .interest-tag .remove-interest { color: #94a3b8; } [data-color-scheme="light"] .interest-tag .remove-interest:hover { color: #dc2626; } [data-color-scheme="light"] .interest-input { background: rgba(255, 255, 255, 0.72); border-color: rgba(15, 23, 42, 0.1); color: #0f172a; } /* Relationships */ [data-color-scheme="light"] .relationship-card { background: rgba(255, 255, 255, 0.72); border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .relationship-card:hover { border-color: rgba(26, 117, 210, 0.22); background: rgba(255, 255, 255, 0.88); } [data-color-scheme="light"] .rel-portrait-placeholder { background: rgba(15, 23, 42, 0.06); color: #94a3b8; } [data-color-scheme="light"] .rel-type { color: #64748b; } [data-color-scheme="light"] .rel-remove:hover { color: #dc2626; } /* Department notes */ [data-color-scheme="light"] .dept-note label { color: #64748b; } /* Stats */ [data-color-scheme="light"] .stats-content { color: #475569; } [data-color-scheme="light"] .stat-card { background: rgba(255, 255, 255, 0.72); border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .stat-value { color: #0f172a; } [data-color-scheme="light"] .stat-label { color: #64748b; } /* Section labels/hints/empty states */ [data-color-scheme="light"] .section-hint { color: #94a3b8; } [data-color-scheme="light"] .section-empty { color: #94a3b8; } /* Gallery filter bar */ [data-color-scheme="light"] .gallery-filter-bar { background: rgba(255, 255, 255, 0.72); border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .gallery-filter-chip { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.1); color: #475569; } [data-color-scheme="light"] .gallery-filter-chip:hover { background: rgba(15, 23, 42, 0.06); color: #0f172a; } [data-color-scheme="light"] .gallery-filter-chip.active { background: rgba(26, 117, 210, 0.1); border-color: rgba(26, 117, 210, 0.3); color: #125eae; } [data-color-scheme="light"] .gallery-filter-sep { background: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .gallery-sort-select { background: rgba(255, 255, 255, 0.72); border-color: rgba(15, 23, 42, 0.1); color: #475569; } /* Gallery section headers */ [data-color-scheme="light"] .gallery-section-header { border-bottom-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .gallery-section-title { color: #334155; } [data-color-scheme="light"] .gallery-section-badge { background: rgba(26, 117, 210, 0.08); color: #125eae; } [data-color-scheme="light"] .gallery-scene-label { color: #94a3b8; border-top-color: rgba(15, 23, 42, 0.06); } /* Gallery cards */ [data-color-scheme="light"] .gallery-media-card { background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .gallery-media-card:hover { border-color: rgba(26, 117, 210, 0.25); } [data-color-scheme="light"] .gallery-upload-card { border-color: rgba(15, 23, 42, 0.12); color: #94a3b8; } [data-color-scheme="light"] .gallery-upload-card:hover { border-color: rgba(26, 117, 210, 0.25); color: #475569; } [data-color-scheme="light"] .gallery-upload-card.gallery-drag-over { border-color: rgba(26, 117, 210, 0.45); background: rgba(26, 117, 210, 0.08); color: #1a75d2; } [data-color-scheme="light"] .gallery-upload-progress { border-color: rgba(26, 117, 210, 0.25); background: rgba(26, 117, 210, 0.06); } [data-color-scheme="light"] .gallery-upload-progress-overall-pct, [data-color-scheme="light"] .gallery-upload-progress-item-stage { color: #1a75d2; } [data-color-scheme="light"] .gallery-section-empty { color: #94a3b8; } /* Gallery profile pin */ [data-color-scheme="light"] .gallery-profile-pin { background: rgba(15, 23, 42, 0.02); border-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .gallery-profile-pin .pin-meta h4 { color: #0f172a; } [data-color-scheme="light"] .gallery-profile-pin .pin-meta p { color: #64748b; } /* Intelligence scene list */ [data-color-scheme="light"] .intel-scene-row:hover { background: rgba(15, 23, 42, 0.03); } [data-color-scheme="light"] .intel-scene-num { color: #1a75d2; } [data-color-scheme="light"] .intel-scene-heading { color: #1e293b; } [data-color-scheme="light"] .intel-scene-meta { color: #64748b; } /* Modals in character designer/profile */ [data-color-scheme="light"] .character-designer-page .modal-panel, [data-color-scheme="light"] .character-profile-page .modal-panel { background: #ffffff; border-color: rgba(15, 23, 42, 0.14); box-shadow: 0 20px 60px rgba(15, 23, 42, 0.16); } [data-color-scheme="light"] .character-designer-page .modal-header, [data-color-scheme="light"] .character-profile-page .modal-header { border-bottom-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .character-designer-page .modal-footer, [data-color-scheme="light"] .character-profile-page .modal-footer { border-top-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .character-designer-page .modal-close, [data-color-scheme="light"] .character-profile-page .modal-close { color: #64748b; } [data-color-scheme="light"] .character-designer-page .modal-close:hover, [data-color-scheme="light"] .character-profile-page .modal-close:hover { color: #0f172a; } [data-color-scheme="light"] .character-designer-page .form-group label, [data-color-scheme="light"] .character-designer-page .form-input, [data-color-scheme="light"] .character-profile-page .form-input { background: #f8fafc; border-color: rgba(15, 23, 42, 0.14); color: #0f172a; } [data-color-scheme="light"] .character-designer-page .form-input option, [data-color-scheme="light"] .character-profile-page .form-input option { background: #ffffff; color: #0f172a; } [data-color-scheme="light"] .character-designer-page .btn-primary, [data-color-scheme="light"] .character-profile-page .btn-primary { background: rgba(26, 117, 210, 0.88); color: #ffffff; } [data-color-scheme="light"] .character-designer-page .btn-primary:hover, [data-color-scheme="light"] .character-profile-page .btn-primary:hover { background: #1a75d2; } [data-color-scheme="light"] .character-designer-page .btn-secondary, [data-color-scheme="light"] .character-profile-page .btn-secondary { background: #f0f4f8; border-color: rgba(15, 23, 42, 0.12); color: #334155; } [data-color-scheme="light"] .character-designer-page .btn-secondary:hover, [data-color-scheme="light"] .character-profile-page .btn-secondary:hover { background: #e3e9f2; color: #0f172a; } /* Delete confirm modal */ [data-color-scheme="light"] .btn-danger { background: rgba(220, 38, 38, 0.88); color: #ffffff; } [data-color-scheme="light"] .btn-danger:hover { background: #dc2626; } /* AI sparkle & enrich buttons */ [data-color-scheme="light"] .ai-sparkle-btn { color: rgba(124, 58, 237, 0.4); } [data-color-scheme="light"] .ai-sparkle-btn:hover { color: #7c3aed; background: rgba(124, 58, 237, 0.08); } [data-color-scheme="light"] .ai-sparkle-btn.loading { color: rgba(124, 58, 237, 0.6); } [data-color-scheme="light"] .ai-enrich-btn { background: rgba(124, 58, 237, 0.05); border-color: rgba(124, 58, 237, 0.2); color: #7c3aed; } [data-color-scheme="light"] .ai-enrich-btn:hover { background: rgba(124, 58, 237, 0.1); border-color: rgba(124, 58, 237, 0.35); } [data-color-scheme="light"] .ai-enrich-btn .spinner { border-color: rgba(124, 58, 237, 0.2); border-top-color: #7c3aed; } /* AI credit tooltip */ [data-color-scheme="light"] .ai-credit-tooltip { background: rgba(255, 255, 255, 0.96); border-color: rgba(124, 58, 237, 0.2); color: #1e293b; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .ai-credit-tooltip::before { background: rgba(255, 255, 255, 0.96); border-left-color: rgba(124, 58, 237, 0.2); border-top-color: rgba(124, 58, 237, 0.2); } /* Voice casting panel */ [data-color-scheme="light"] .vc-select { background: rgba(255, 255, 255, 0.72); border-color: rgba(15, 23, 42, 0.1); color: #1e293b; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } [data-color-scheme="light"] .vc-select option { background: #ffffff; color: #0f172a; } [data-color-scheme="light"] .vc-select optgroup { color: #7c3aed; } [data-color-scheme="light"] .vc-voice-right .voice-preview-btn { background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.1); color: #94a3b8; } [data-color-scheme="light"] .vc-voice-right .voice-preview-btn:hover { background: rgba(26, 117, 210, 0.06); border-color: rgba(26, 117, 210, 0.25); color: #1a75d2; } [data-color-scheme="light"] .vc-voice-right .voice-preview-btn.playing { background: rgba(26, 117, 210, 0.08); border-color: rgba(26, 117, 210, 0.3); color: #1a75d2; } [data-color-scheme="light"] .vc-textarea { background: rgba(255, 255, 255, 0.72); border-color: rgba(15, 23, 42, 0.08); color: #334155; } [data-color-scheme="light"] .vc-textarea:focus { border-color: rgba(26, 117, 210, 0.35); color: #0f172a; } /* Voice reference card */ [data-color-scheme="light"] .vr-card { background: rgba(26, 117, 210, 0.03); border-color: rgba(26, 117, 210, 0.1); } [data-color-scheme="light"] .vr-meta { color: #94a3b8; } [data-color-scheme="light"] .vr-form-group label { color: #475569; } [data-color-scheme="light"] .vr-form-group textarea { background: rgba(255, 255, 255, 0.72); border-color: rgba(15, 23, 42, 0.1); color: #1e293b; } /* Chat (DM) — character conversations */ [data-color-scheme="light"] .char-chat-layout { background: rgba(15, 23, 42, 0.02); border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .char-chat-sidebar { background: rgba(15, 23, 42, 0.03); border-right-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .char-chat-sidebar-header { border-bottom-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .char-conv-new-btn { border-color: rgba(124, 58, 237, 0.25); color: #7c3aed; } [data-color-scheme="light"] .char-conv-new-btn:hover { background: rgba(124, 58, 237, 0.06); border-color: rgba(124, 58, 237, 0.4); } [data-color-scheme="light"] .char-conv-item:hover { background: rgba(15, 23, 42, 0.03); } [data-color-scheme="light"] .char-conv-item.active { background: rgba(124, 58, 237, 0.06); border-left-color: rgba(124, 58, 237, 0.5); } [data-color-scheme="light"] .char-conv-item.active .char-conv-title { color: #0f172a; } [data-color-scheme="light"] .char-conv-delete:hover { color: #dc2626; } [data-color-scheme="light"] .chat-intro { color: #94a3b8; } [data-color-scheme="light"] .chat-intro-portrait { background: rgba(15, 23, 42, 0.04); } [data-color-scheme="light"] .chat-intro-initial { color: #94a3b8; } [data-color-scheme="light"] .chat-bubble.user { background: rgba(124, 58, 237, 0.08); border-color: rgba(124, 58, 237, 0.18); color: #1e293b; } [data-color-scheme="light"] .chat-bubble.assistant { background: rgba(255, 255, 255, 0.72); border-color: rgba(15, 23, 42, 0.1); color: #1e293b; } [data-color-scheme="light"] .chat-typing { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .chat-typing span { background: #94a3b8; } [data-color-scheme="light"] .chat-input-bar { border-top-color: rgba(15, 23, 42, 0.08); background: rgba(15, 23, 42, 0.02); } [data-color-scheme="light"] .chat-input { background: rgba(255, 255, 255, 0.72); border-color: rgba(15, 23, 42, 0.1); color: #0f172a; } [data-color-scheme="light"] .chat-input:focus { border-color: rgba(124, 58, 237, 0.3); } [data-color-scheme="light"] .chat-send-btn { background: rgba(124, 58, 237, 0.8); color: #ffffff; } [data-color-scheme="light"] .chat-send-btn:hover { background: #7c3aed; } /* Character tabs (old profile page) */ [data-color-scheme="light"] .char-tab { color: #64748b; } [data-color-scheme="light"] .char-tab:hover { color: #0f172a; } [data-color-scheme="light"] .char-tab.active { color: #0f172a; border-bottom-color: #1a75d2; } [data-color-scheme="light"] .char-tabs { border-bottom-color: rgba(15, 23, 42, 0.1); } /* AI fill bar */ [data-color-scheme="light"] .ai-fill-all-btn { background: rgba(124, 58, 237, 0.05); border-color: rgba(124, 58, 237, 0.2); color: #7c3aed; } [data-color-scheme="light"] .ai-fill-all-btn:hover { background: rgba(124, 58, 237, 0.1); border-color: rgba(124, 58, 237, 0.35); } [data-color-scheme="light"] .ai-fill-all-btn .spinner { border-color: rgba(124, 58, 237, 0.2); border-top-color: #7c3aed; } /* Character page header card */ [data-color-scheme="light"] .char-profile-header { background: rgba(255, 255, 255, 0.82); border-color: rgba(15, 23, 42, 0.1); backdrop-filter: blur(16px); } [data-color-scheme="light"] .char-actor { color: #475569; } [data-color-scheme="light"] .char-portrait-placeholder { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.12); } /* Nav arrows in header */ [data-color-scheme="light"] .char-nav-arrow { background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.12); color: #64748b; } [data-color-scheme="light"] .char-nav-arrow:hover { background: rgba(26, 117, 210, 0.06); border-color: rgba(26, 117, 210, 0.25); color: #1a75d2; } /* Voice strip (shared between profile/designer) */ [data-color-scheme="light"] .char-voice-strip { background: rgba(15, 23, 42, 0.02); border-color: rgba(15, 23, 42, 0.08); } /* Tag chips in lightbox */ [data-color-scheme="light"] .tag-chip { background: #f0f4f8; color: #475569; } [data-color-scheme="light"] .tag-input { border-color: rgba(15, 23, 42, 0.14); color: #0f172a; } /* ========================================================================= * GETTING STARTED CHECKLIST * ========================================================================= */ [data-color-scheme="light"] #getting-started-card { background: linear-gradient(135deg, rgba(26, 117, 210, 0.06) 0%, rgba(124, 58, 237, 0.06) 100%); border-color: rgba(26, 117, 210, 0.2); } [data-color-scheme="light"] #getting-started-card.all-complete { background: linear-gradient(135deg, rgba(22, 163, 74, 0.06) 0%, rgba(16, 185, 129, 0.06) 100%); border-color: rgba(22, 163, 74, 0.25); } [data-color-scheme="light"] #getting-started-card .checklist-item { background: rgba(255, 255, 255, 0.7); } [data-color-scheme="light"] #getting-started-card .checklist-item:hover { background: rgba(255, 255, 255, 0.9); } [data-color-scheme="light"] #getting-started-card .checklist-dismiss:hover { background: rgba(15, 23, 42, 0.04); } /* Celebration modal */ [data-color-scheme="light"] .celebration-content { background: #ffffff; box-shadow: 0 25px 50px rgba(15, 23, 42, 0.14); } [data-color-scheme="light"] .celebration-next-steps { background: #f0f4f8; } /* ========================================================================= * MOTION CONTROL DIALOG * ========================================================================= */ [data-color-scheme="light"] .motion-control-dialog { background: #ffffff; color: #334155; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .motion-control-dialog .dialog-header { border-bottom-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .motion-control-dialog .close-btn { color: #64748b; } [data-color-scheme="light"] .motion-control-dialog .close-btn:hover { background: #f0f4f8; } [data-color-scheme="light"] .motion-control-dialog .input-section label { color: #334155; } [data-color-scheme="light"] .motion-control-dialog .help-text { color: #64748b; } [data-color-scheme="light"] .motion-control-dialog .file-input-group input[type="url"] { border-color: rgba(15, 23, 42, 0.14); } [data-color-scheme="light"] .motion-control-dialog .radio-group label { border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .motion-control-dialog .radio-group label:hover { background: #f8fafc; } [data-color-scheme="light"] .motion-control-dialog .radio-group small { color: #64748b; } [data-color-scheme="light"] .motion-control-dialog #motion-prompt { border-color: rgba(15, 23, 42, 0.14); } [data-color-scheme="light"] .motion-control-dialog #model-tier { border-color: rgba(15, 23, 42, 0.14); background: #ffffff; } [data-color-scheme="light"] .motion-control-dialog .cost-estimate { background: rgba(26, 117, 210, 0.06); border-color: rgba(26, 117, 210, 0.18); color: #125eae; } [data-color-scheme="light"] .motion-control-dialog .dialog-footer { border-top-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .motion-control-dialog .btn-secondary { background: #f0f4f8; border-color: rgba(15, 23, 42, 0.14); color: #334155; } [data-color-scheme="light"] .motion-control-dialog .btn-secondary:hover { background: #e3e9f2; } [data-color-scheme="light"] .motion-control-dialog .btn-primary { background: var(--accent-primary, #1a75d2); color: #ffffff; } [data-color-scheme="light"] .motion-control-dialog .btn-primary:hover:not(:disabled) { background: #125eae; } [data-color-scheme="light"] .motion-control-dialog .btn-primary:disabled { background: #cbd5e1; } /* Video picker */ [data-color-scheme="light"] .pick-video-btn { background: #f0f4f8; color: #334155; border-color: rgba(15, 23, 42, 0.14); } [data-color-scheme="light"] .pick-video-btn:hover { background: #e3e9f2; } [data-color-scheme="light"] .video-picker { background: #f8fafc; border-color: rgba(15, 23, 42, 0.14); } [data-color-scheme="light"] .video-picker-card { background: #ffffff; } [data-color-scheme="light"] .video-picker-card:hover { border-color: var(--accent-primary, #1a75d2); } /* Video thumb stays dark for contrast */ [data-color-scheme="light"] .video-picker-empty { color: #94a3b8; } /* ========================================================================= * TIMELINE PANEL (NLE) * ========================================================================= */ /* -- Token overrides for tl-* custom properties -------------------------- */ [data-color-scheme="light"] { --tl-bg: rgba(245, 247, 250, 0.95); --tl-border: rgba(15, 23, 42, 0.1); --tl-text: rgba(15, 23, 42, 0.7); --tl-text-dim: rgba(15, 23, 42, 0.4); --tl-text-bright: rgba(15, 23, 42, 0.92); --tl-handle-grip: rgba(15, 23, 42, 0.12); --tl-handle-grip-hover: rgba(26, 117, 210, 0.3); --tl-button-border: rgba(15, 23, 42, 0.1); --tl-button-hover-bg: rgba(26, 117, 210, 0.08); --tl-button-hover-border: rgba(26, 117, 210, 0.22); --tl-button-active-bg: rgba(26, 117, 210, 0.14); --tl-menu-border: rgba(15, 23, 42, 0.12); --tl-int-color: rgba(59, 130, 246, 0.1); --tl-ext-color: rgba(245, 158, 11, 0.1); --tl-int-border: rgba(59, 130, 246, 0.25); --tl-ext-border: rgba(245, 158, 11, 0.25); --tl-forced-color: rgba(168, 85, 247, 0.08); --tl-forced-border: rgba(168, 85, 247, 0.2); } /* Panel container */ [data-color-scheme="light"] .tl-panel { background: var(--tl-bg); border-bottom-color: #1a75d2; } /* Panel header */ [data-color-scheme="light"] .tl-panel-header { border-bottom-color: var(--tl-border); } /* -- Buttons -------------------------------------------------------------- */ [data-color-scheme="light"] .tl-btn { color: rgba(15, 23, 42, 0.6); border-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .tl-btn:hover { color: rgba(15, 23, 42, 0.85); background: rgba(26, 117, 210, 0.08); border-color: rgba(26, 117, 210, 0.22); } /* -- Export dropdown ------------------------------------------------------ */ [data-color-scheme="light"] .tl-export-menu { background: rgba(255, 255, 255, 0.96); border-color: rgba(15, 23, 42, 0.12); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } [data-color-scheme="light"] .tl-export-item { color: rgba(15, 23, 42, 0.7); } [data-color-scheme="light"] .tl-export-item:hover { background: rgba(26, 117, 210, 0.06); color: rgba(15, 23, 42, 0.9); } [data-color-scheme="light"] .tl-export-divider { border-top-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .tl-export-empty { color: rgba(15, 23, 42, 0.35); } [data-color-scheme="light"] .tl-render-progress-bar { background: rgba(15, 23, 42, 0.06); } /* -- Timecode ruler ------------------------------------------------------- */ [data-color-scheme="light"] .tl-ruler { border-bottom-color: var(--tl-border); } /* -- Track backgrounds ---------------------------------------------------- */ [data-color-scheme="light"] .tl-video-track, [data-color-scheme="light"] .tl-audio-track { border-top-color: var(--tl-border); } /* -- Track resize handle -------------------------------------------------- */ [data-color-scheme="light"] .tl-track-resize-handle { border-top-color: var(--tl-border); border-bottom-color: var(--tl-border); } /* -- Lane labels ---------------------------------------------------------- */ [data-color-scheme="light"] .tl-lane-label { background: var(--tl-bg); border-right-color: var(--tl-border); } [data-color-scheme="light"] .tl-lane { border-bottom-color: var(--tl-border); } /* -- Resize handle (bottom of panel) ------------------------------------- */ [data-color-scheme="light"] .tl-handle--bottom:hover::after { background: rgba(15, 23, 42, 0.3); } /* -- Scene blocks --------------------------------------------------------- */ [data-color-scheme="light"] .tl-scene-block:not([data-int-ext]) { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .tl-scene-block:hover { border-color: #1a75d2; box-shadow: 0 0 8px rgba(26, 117, 210, 0.2); } [data-color-scheme="light"] .tl-scene-block.is-active { border-color: #1a75d2; box-shadow: 0 0 12px rgba(26, 117, 210, 0.25); } /* Scene number label text shadow for light bg */ [data-color-scheme="light"] .tl-scene-num { color: rgba(15, 23, 42, 0.7); text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5); } /* -- Storyboard thumbnails ------------------------------------------------ */ [data-color-scheme="light"] .tl-frame-badge { background: rgba(255, 255, 255, 0.85); color: rgba(15, 23, 42, 0.85); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } /* -- Playhead (keep red but add contrast shadow) -------------------------- */ [data-color-scheme="light"] .tl-playhead { box-shadow: 0 0 4px rgba(255, 46, 59, 0.3); } /* -- Info bar -------------------------------------------------------------- */ [data-color-scheme="light"] .tl-info-bar { border-top-color: var(--tl-border); } /* -- Toggle button (footer) ----------------------------------------------- */ [data-color-scheme="light"] .tl-toggle-btn { color: rgba(15, 23, 42, 0.5); } [data-color-scheme="light"] .tl-toggle-btn:hover { color: #1a75d2; background: rgba(26, 117, 210, 0.06); } [data-color-scheme="light"] .tl-toggle-btn.is-active { color: #1a75d2; } /* -- Loading state -------------------------------------------------------- */ [data-color-scheme="light"] .tl-loading-spinner { border-color: rgba(15, 23, 42, 0.08); border-top-color: #1a75d2; } /* -- Shot clips ----------------------------------------------------------- */ [data-color-scheme="light"] .tl-shot-clip { background: rgba(15, 23, 42, 0.05); border-color: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .tl-shot-clip:hover { border-color: #1a75d2; box-shadow: 0 0 6px rgba(26, 117, 210, 0.2); } [data-color-scheme="light"] .tl-shot-clip.is-active-shot { border-color: #1a75d2; box-shadow: 0 0 10px rgba(26, 117, 210, 0.3); } [data-color-scheme="light"] .tl-shot-label { color: rgba(15, 23, 42, 0.85); text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); } /* -- Video clips ---------------------------------------------------------- */ [data-color-scheme="light"] .tl-video-clip { background: rgba(120, 80, 200, 0.12); border-color: rgba(120, 80, 200, 0.25); } [data-color-scheme="light"] .tl-video-clip:hover { border-color: rgba(120, 80, 200, 0.5); box-shadow: 0 0 6px rgba(120, 80, 200, 0.2); } [data-color-scheme="light"] .tl-video-play-icon { color: rgba(15, 23, 42, 0.7); } [data-color-scheme="light"] .tl-clip-label { color: rgba(15, 23, 42, 0.85); text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); } [data-color-scheme="light"] .tl-video-spinner { border-color: rgba(120, 80, 200, 0.15); border-top-color: rgba(120, 80, 200, 0.6); } /* -- Audio clips (table reads) -------------------------------------------- */ [data-color-scheme="light"] .tl-audio-clip { background: rgba(76, 175, 80, 0.08); border-color: rgba(76, 175, 80, 0.22); } [data-color-scheme="light"] .tl-audio-clip:hover { background: rgba(76, 175, 80, 0.14); border-color: rgba(76, 175, 80, 0.4); box-shadow: 0 0 6px rgba(76, 175, 80, 0.15); } [data-color-scheme="light"] .tl-audio-clip.is-playing { background: rgba(76, 175, 80, 0.18); border-color: rgba(76, 175, 80, 0.5); } [data-color-scheme="light"] .tl-audio-waveform { background: repeating-linear-gradient( 90deg, transparent 0px, transparent 2px, rgba(76, 175, 80, 0.08) 2px, rgba(76, 175, 80, 0.08) 3px ); } [data-color-scheme="light"] .tl-audio-label { color: rgba(21, 128, 61, 0.8); } /* Shot audio clips */ [data-color-scheme="light"] .tl-audio-clip--shot { background: rgba(42, 170, 96, 0.1); border-color: rgba(42, 170, 96, 0.3); } [data-color-scheme="light"] .tl-audio-clip--shot:hover { background: rgba(42, 170, 96, 0.16); border-color: rgba(42, 170, 96, 0.5); } [data-color-scheme="light"] .tl-audio-clip--shot .tl-audio-waveform { background: repeating-linear-gradient( 90deg, transparent 0px, transparent 2px, rgba(42, 170, 96, 0.1) 2px, rgba(42, 170, 96, 0.1) 3px ); } [data-color-scheme="light"] .tl-audio-clip--shot .tl-audio-label { color: rgba(21, 128, 61, 0.85); } /* Table read fallback clips */ [data-color-scheme="light"] .tl-audio-clip--tableread { background: rgba(59, 130, 246, 0.06); border-color: rgba(59, 130, 246, 0.2); } [data-color-scheme="light"] .tl-audio-clip--tableread:hover { background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.35); } [data-color-scheme="light"] .tl-audio-clip--tableread .tl-audio-waveform { background: repeating-linear-gradient( 90deg, transparent 0px, transparent 2px, rgba(59, 130, 246, 0.06) 2px, rgba(59, 130, 246, 0.06) 3px ); } [data-color-scheme="light"] .tl-audio-clip--tableread .tl-audio-label { color: rgba(26, 117, 210, 0.7); } /* Empty audio slot */ [data-color-scheme="light"] .tl-audio-clip--empty .tl-audio-label { color: rgba(15, 23, 42, 0.2); } /* -- Audio lane label ----------------------------------------------------- */ [data-color-scheme="light"] .tl-lane--audio .tl-lane-label { color: rgba(21, 128, 61, 0.7); } [data-color-scheme="light"] .tl-lane--audio .tl-lane-label svg { fill: rgba(21, 128, 61, 0.5); } /* -- Auto-shot placeholders ----------------------------------------------- */ [data-color-scheme="light"] .tl-shot-clip--auto .tl-shot-placeholder { color: rgba(15, 23, 42, 0.4); } /* -- Frame clips (transport) ---------------------------------------------- */ [data-color-scheme="light"] .tl-frame-clip { background: rgba(15, 23, 42, 0.06); border-color: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .tl-frame-clip:hover { border-color: #1a75d2; box-shadow: 0 0 8px rgba(26, 117, 210, 0.2); } [data-color-scheme="light"] .tl-frame-clip.is-active-frame { border-color: #ff2e3b; box-shadow: 0 0 8px rgba(255, 46, 59, 0.3), 0 0 16px rgba(255, 46, 59, 0.12); } /* -- Transport display ---------------------------------------------------- */ [data-color-scheme="light"] .tl-transport-timecode { color: rgba(15, 23, 42, 0.9); } [data-color-scheme="light"] .tl-transport-status[data-state="stopped"] { color: rgba(15, 23, 42, 0.4); background: rgba(15, 23, 42, 0.05); } [data-color-scheme="light"] .tl-transport-status[data-state="playing"] { color: #15803d; background: rgba(22, 163, 74, 0.1); } [data-color-scheme="light"] .tl-transport-status[data-state="reverse"] { color: #b45309; background: rgba(217, 119, 6, 0.1); } /* -- Video info label ----------------------------------------------------- */ [data-color-scheme="light"] .tl-info-video { color: rgba(120, 80, 200, 0.8); } /* -- Pre-edit clips ------------------------------------------------------- */ [data-color-scheme="light"] .tl-video-clip--pre-edit { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .tl-video-clip--pre-edit:hover { border-color: rgba(15, 23, 42, 0.25); } /* -- Recording indicator -------------------------------------------------- */ [data-color-scheme="light"] .tl-recording-clip { background: rgba(255, 40, 40, 0.08); border-color: rgba(220, 38, 38, 0.4); } [data-color-scheme="light"] .tl-recording-clip.is-processing { background: rgba(245, 158, 11, 0.06); border-color: rgba(217, 119, 6, 0.3); } /* -- Dialogue highlight during playback ----------------------------------- */ [data-color-scheme="light"] .script-line.tl-dialogue-active { border-left-color: rgba(21, 128, 61, 0.5) !important; background: rgba(76, 175, 80, 0.04); } /* ========================================================================= * TIMELINE (procedural — nodes2 system, top-level timeline.css) * ========================================================================= */ /* Override the @media (prefers-color-scheme: dark) rules that target the procedural timeline, since we use data-attribute switching, not prefers. */ [data-color-scheme="light"] .timeline-clip-label { color: rgba(0, 0, 0, 0.7); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3); } [data-color-scheme="light"] .timeline-tooltip { background: #ffffff; color: #0f172a; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } [data-color-scheme="light"] .tooltip-info, [data-color-scheme="light"] .tooltip-location, [data-color-scheme="light"] .tooltip-time { color: #64748b; } /* ========================================================================= * SHOT LIST COCKPIT * ========================================================================= */ /* ── Page-level custom properties ── */ [data-color-scheme="light"] .shot-list-page .sl-container.sl-cockpit { --sl-bg-deep: #eef4fb; --sl-bg-mid: #f2f6fb; --sl-surface: rgba(255, 255, 255, 0.86); --sl-surface-raised: rgba(255, 255, 255, 0.94); --sl-surface-soft: rgba(248, 250, 252, 0.82); --sl-border: rgba(15, 23, 42, 0.12); --sl-border-strong: rgba(26, 117, 210, 0.22); --sl-text-strong: #0f172a; --sl-text: #1e293b; --sl-muted: #64748b; --sl-accent: #1a75d2; --sl-accent-soft: rgba(26, 117, 210, 0.1); } /* ── Topbar ── */ [data-color-scheme="light"] .sl-topbar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.94) 100%); border-color: rgba(15, 23, 42, 0.12); box-shadow: 0 18px 54px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6); } [data-color-scheme="light"] .sl-topbar-eyebrow, [data-color-scheme="light"] .sl-panel-eyebrow { color: #1a75d2; } [data-color-scheme="light"] .sl-topbar-label { color: #64748b; } /* ── Scene nav chips ── */ [data-color-scheme="light"] .sl-topbar .sl-scene-nav { border-color: rgba(15, 23, 42, 0.12); background: rgba(15, 23, 42, 0.03); scrollbar-color: rgba(100, 116, 139, 0.3) transparent; } [data-color-scheme="light"] .sl-cockpit .sl-scene-chip { color: #64748b; } [data-color-scheme="light"] .sl-cockpit .sl-scene-chip:hover { border-color: rgba(15, 23, 42, 0.16); color: #1e293b; background: rgba(15, 23, 42, 0.04); } [data-color-scheme="light"] .sl-cockpit .sl-scene-chip--active { background: linear-gradient(180deg, rgba(26, 117, 210, 0.12) 0%, rgba(26, 117, 210, 0.06) 100%); border-color: rgba(26, 117, 210, 0.28); color: #1a75d2; } /* ── Shot count badge ── */ [data-color-scheme="light"] .sl-cockpit .sl-shot-count { border-color: rgba(26, 117, 210, 0.22); background: rgba(26, 117, 210, 0.08); color: #125eae; } /* ── Header links / actions ── */ [data-color-scheme="light"] .sl-cockpit .sl-header-link { border-color: rgba(15, 23, 42, 0.12); background: rgba(15, 23, 42, 0.03); color: #475569; } [data-color-scheme="light"] .sl-cockpit .sl-header-link:hover { border-color: rgba(26, 117, 210, 0.24); background: rgba(26, 117, 210, 0.06); color: #125eae; } /* ── Panels ── */ [data-color-scheme="light"] .sl-cockpit .sl-panel { border-color: rgba(15, 23, 42, 0.12); background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.94) 100%); box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5); } [data-color-scheme="light"] .sl-cockpit .sl-panel--tray { border-color: rgba(26, 117, 210, 0.18); background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.96) 100%); } [data-color-scheme="light"] .sl-cockpit .sl-panel-header { border-bottom-color: rgba(15, 23, 42, 0.1); background: linear-gradient(180deg, rgba(15, 23, 42, 0.02) 0%, transparent 100%); } [data-color-scheme="light"] .sl-cockpit .sl-panel-title { color: #0f172a; } /* ── Nav panel (left sidebar) ── */ [data-color-scheme="light"] .sl-cockpit-nav-summary { border-color: rgba(15, 23, 42, 0.1); background: linear-gradient(180deg, rgba(15, 23, 42, 0.025) 0%, rgba(15, 23, 42, 0.01) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); } [data-color-scheme="light"] .sl-cockpit-nav-kicker { color: #1a75d2; } [data-color-scheme="light"] .sl-cockpit-nav-title { color: #0f172a; } [data-color-scheme="light"] .sl-cockpit-nav-meta { color: #64748b; } [data-color-scheme="light"] .sl-cockpit-nav-control, [data-color-scheme="light"] .sl-cockpit-nav-link, [data-color-scheme="light"] .sl-cockpit-scene-action { border-color: rgba(15, 23, 42, 0.12); background: rgba(15, 23, 42, 0.03); color: #475569; } [data-color-scheme="light"] .sl-cockpit-nav-control:hover:not(:disabled), [data-color-scheme="light"] .sl-cockpit-nav-link:hover, [data-color-scheme="light"] .sl-cockpit-scene-action:hover { background: rgba(26, 117, 210, 0.06); border-color: rgba(26, 117, 210, 0.24); color: #125eae; } [data-color-scheme="light"] .sl-cockpit-nav-position { color: #64748b; } [data-color-scheme="light"] .sl-cockpit-nav-scroll { scrollbar-color: rgba(100, 116, 139, 0.28) transparent; } [data-color-scheme="light"] .sl-cockpit-nav-empty { border-color: rgba(15, 23, 42, 0.14); background: rgba(15, 23, 42, 0.02); color: #64748b; } /* ── Scene groups ── */ [data-color-scheme="light"] button.sl-cockpit-scene-main:hover .sl-cockpit-scene-title { color: #0f172a; } [data-color-scheme="light"] .sl-cockpit-scene-badge { background: rgba(26, 117, 210, 0.08); border-color: rgba(26, 117, 210, 0.2); color: #125eae; } [data-color-scheme="light"] .sl-cockpit-scene-title { color: #0f172a; } [data-color-scheme="light"] .sl-cockpit-scene-meta { color: #64748b; } [data-color-scheme="light"] .sl-cockpit-scene-action--primary { background: rgba(26, 117, 210, 0.08); border-color: rgba(26, 117, 210, 0.22); color: #125eae; } [data-color-scheme="light"] .sl-cockpit-scene-empty { border-color: rgba(15, 23, 42, 0.12); background: rgba(15, 23, 42, 0.02); color: #64748b; } /* ── Shot cards ── */ [data-color-scheme="light"] .sl-cockpit-shot-card { border-color: rgba(15, 23, 42, 0.1); background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(248, 250, 252, 0.6) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); } [data-color-scheme="light"] .sl-cockpit-shot-card:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%); border-color: rgba(26, 117, 210, 0.18); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); } [data-color-scheme="light"] .sl-cockpit-shot-card--active { border-color: rgba(26, 117, 210, 0.38); background: linear-gradient(180deg, rgba(26, 117, 210, 0.08) 0%, rgba(26, 117, 210, 0.03) 100%); box-shadow: inset 0 0 0 1px rgba(26, 117, 210, 0.06), 0 10px 24px rgba(15, 23, 42, 0.1); } /* ── Shot thumbnail ── */ [data-color-scheme="light"] .sl-cockpit-shot-thumb { background: radial-gradient(circle at top, rgba(26, 117, 210, 0.1), transparent 42%), linear-gradient(180deg, #e2e8f0 0%, #d1d5db 100%); border-color: rgba(15, 23, 42, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); } [data-color-scheme="light"] .sl-cockpit-shot-thumb-empty { color: #94a3b8; } /* ── Shot badges ── */ [data-color-scheme="light"] .sl-cockpit-shot-badge { background: rgba(255, 255, 255, 0.82); border-color: rgba(15, 23, 42, 0.14); color: #1e293b; } [data-color-scheme="light"] .sl-cockpit-shot-media-badge { background: rgba(26, 117, 210, 0.12); border-color: rgba(26, 117, 210, 0.22); color: #125eae; } /* ── Shot body / text ── */ [data-color-scheme="light"] .sl-cockpit-shot-title { color: #0f172a; } [data-color-scheme="light"] .sl-cockpit-shot-rating { color: #d97706; } [data-color-scheme="light"] .sl-cockpit-shot-subtitle { color: #64748b; } [data-color-scheme="light"] .sl-cockpit-shot-chip { border-color: rgba(15, 23, 42, 0.1); background: rgba(15, 23, 42, 0.04); color: #475569; } [data-color-scheme="light"] .sl-cockpit-shot-chip--accent { background: rgba(26, 117, 210, 0.08); border-color: rgba(26, 117, 210, 0.18); color: #125eae; } /* ── Stage panel viewer ── */ [data-color-scheme="light"] .sl-panel--stage .sl-viewer { border-color: rgba(15, 23, 42, 0.12); background: radial-gradient(circle at top, rgba(26, 117, 210, 0.08), transparent 36%), linear-gradient(180deg, #dfe7f2 0%, #e8edf4 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -20px 48px rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .sl-panel--stage .sl-viewer-star-rating, [data-color-scheme="light"] .sl-panel--stage .sl-av-sync-btn { background: rgba(255, 255, 255, 0.82); border-color: rgba(15, 23, 42, 0.12); color: #475569; } [data-color-scheme="light"] .sl-panel--stage .sl-viewer-placeholder { color: #94a3b8; } [data-color-scheme="light"] .sl-panel--stage .sl-viewer-snapshot-text { color: #64748b; } /* ── Stage: viewer caption chips ── */ [data-color-scheme="light"] .sl-viewer-caption-chip { border-color: rgba(15, 23, 42, 0.12); background: rgba(15, 23, 42, 0.04); color: #475569; } [data-color-scheme="light"] .sl-viewer-caption-chip--primary { border-color: rgba(26, 117, 210, 0.2); background: rgba(26, 117, 210, 0.08); color: #125eae; } /* ── Stage: takes section ── */ [data-color-scheme="light"] .sl-stage-takes { border-color: rgba(15, 23, 42, 0.1); background: linear-gradient(180deg, rgba(15, 23, 42, 0.025) 0%, rgba(15, 23, 42, 0.01) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); } [data-color-scheme="light"] .sl-stage-takes-label { color: #0f172a; } [data-color-scheme="light"] .sl-stage-takes-note { color: #64748b; } [data-color-scheme="light"] .sl-stage-takes-shortcut { color: #1e293b; } [data-color-scheme="light"] .sl-stage-takes-shortcut span { border-color: rgba(15, 23, 42, 0.14); background: rgba(15, 23, 42, 0.04); } /* ── Hotkey chips ── */ [data-color-scheme="light"] .sl-hotkey-chip { border-color: rgba(15, 23, 42, 0.12); background: rgba(15, 23, 42, 0.03); color: #475569; } [data-color-scheme="light"] .sl-hotkey-key { border-color: rgba(26, 117, 210, 0.2); background: rgba(26, 117, 210, 0.08); color: #125eae; } [data-color-scheme="light"] .sl-hotkey-label { color: #475569; } /* ── Stage: media row ── */ [data-color-scheme="light"] .sl-panel--stage .sl-media-cell { border-color: rgba(15, 23, 42, 0.12); background: #e8edf4; } [data-color-scheme="light"] .sl-panel--stage .sl-media-cell:hover { border-color: rgba(26, 117, 210, 0.24); } [data-color-scheme="light"] .sl-panel--stage .sl-media-cell--active { border-color: rgba(26, 117, 210, 0.6); box-shadow: 0 0 0 1px rgba(26, 117, 210, 0.14); } [data-color-scheme="light"] .sl-panel--stage .sl-media-row { scrollbar-color: rgba(100, 116, 139, 0.24) transparent; } /* ── Inspector panel ── */ [data-color-scheme="light"] .sl-cockpit .sl-inspector-section-label { color: #64748b; } [data-color-scheme="light"] .sl-cockpit .sl-inspector-section-note, [data-color-scheme="light"] .sl-cockpit-inspector-section-note { color: #64748b; } [data-color-scheme="light"] .sl-cockpit .sl-panel--inspector .sl-meta-card { border-color: rgba(15, 23, 42, 0.1); background: rgba(15, 23, 42, 0.025); } /* ── Inspector: meta summary (sticky header) ── */ [data-color-scheme="light"] .sl-cockpit-meta-summary { border-bottom-color: rgba(15, 23, 42, 0.08); background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.88) 100%); } [data-color-scheme="light"] .sl-cockpit-meta-title { color: #0f172a; } [data-color-scheme="light"] .sl-cockpit-meta-subtitle { color: #64748b; } [data-color-scheme="light"] .sl-cockpit-meta-save-state { color: #64748b; } [data-color-scheme="light"] .sl-meta-delete-btn--cockpit { border-color: rgba(15, 23, 42, 0.1); background: rgba(15, 23, 42, 0.03); } /* ── Inspector: meta pills ── */ [data-color-scheme="light"] .sl-cockpit-meta-pill { border-color: rgba(15, 23, 42, 0.1); background: rgba(15, 23, 42, 0.04); color: #475569; } [data-color-scheme="light"] .sl-cockpit-meta-pill--primary { border-color: rgba(26, 117, 210, 0.2); background: rgba(26, 117, 210, 0.08); color: #125eae; } [data-color-scheme="light"] .sl-cockpit-meta-pill--accent { border-color: rgba(22, 163, 74, 0.22); background: rgba(22, 163, 74, 0.08); color: #15803d; } [data-color-scheme="light"] .sl-cockpit-meta-pill--rating { border-color: rgba(217, 119, 6, 0.22); background: rgba(217, 119, 6, 0.08); color: #b45309; } [data-color-scheme="light"] .sl-cockpit-meta-pill--muted { color: #64748b; } /* ── Inspector: action buttons ── */ [data-color-scheme="light"] .sl-cockpit-inspector-action { border-color: rgba(15, 23, 42, 0.12); background: rgba(15, 23, 42, 0.03); color: #475569; } [data-color-scheme="light"] .sl-cockpit-inspector-action:hover:not(:disabled) { background: rgba(26, 117, 210, 0.06); border-color: rgba(26, 117, 210, 0.24); color: #125eae; } [data-color-scheme="light"] .sl-cockpit-inspector-action--accent { border-color: rgba(26, 117, 210, 0.2); background: rgba(26, 117, 210, 0.08); color: #125eae; } /* ── Inspector: sections ── */ [data-color-scheme="light"] .sl-cockpit-inspector-section { border-color: rgba(15, 23, 42, 0.08); background: linear-gradient(180deg, rgba(15, 23, 42, 0.02) 0%, rgba(15, 23, 42, 0.01) 100%); } [data-color-scheme="light"] .sl-cockpit-inspector-section-title { color: #0f172a; } /* ── Inspector: form fields ── */ [data-color-scheme="light"] .sl-panel--inspector .sl-field select, [data-color-scheme="light"] .sl-panel--inspector .sl-field input, [data-color-scheme="light"] .sl-panel--inspector .sl-field textarea, [data-color-scheme="light"] .sl-panel--inspector .sl-vp-text-wrap input { background: #ffffff; border-color: rgba(15, 23, 42, 0.14); } [data-color-scheme="light"] .sl-panel--inspector .sl-char-picker { border-color: rgba(15, 23, 42, 0.08); background: rgba(15, 23, 42, 0.02); } [data-color-scheme="light"] .sl-panel--inspector .sl-video-params { border-color: rgba(15, 23, 42, 0.1); background: rgba(15, 23, 42, 0.02); } /* ── Tray panel ── */ [data-color-scheme="light"] .sl-cockpit .sl-panel--tray .sl-panel-title { color: #0f172a; } [data-color-scheme="light"] .sl-context-note { color: #64748b; } /* ── Tray: tabs ── */ [data-color-scheme="light"] .sl-tray-tab { border-color: rgba(15, 23, 42, 0.1); background: rgba(15, 23, 42, 0.025); color: #64748b; } [data-color-scheme="light"] .sl-tray-tab:hover { color: #1e293b; border-color: rgba(15, 23, 42, 0.18); } [data-color-scheme="light"] .sl-tray-tab--active { color: #125eae; border-color: rgba(26, 117, 210, 0.28); background: linear-gradient(180deg, rgba(26, 117, 210, 0.1) 0%, rgba(26, 117, 210, 0.05) 100%); box-shadow: inset 0 0 0 1px rgba(26, 117, 210, 0.06); } [data-color-scheme="light"] .sl-tray-tab-key { border-color: rgba(15, 23, 42, 0.12); background: rgba(15, 23, 42, 0.04); color: #0f172a; } [data-color-scheme="light"] .sl-tray-tab-note { color: #64748b; } [data-color-scheme="light"] .sl-tray-tab--active .sl-tray-tab-key { border-color: rgba(26, 117, 210, 0.22); background: rgba(26, 117, 210, 0.1); color: #125eae; } [data-color-scheme="light"] .sl-tray-tab--active .sl-tray-tab-note { color: #475569; } /* ── Tray: script lines ── */ [data-color-scheme="light"] .sl-panel--tray .sl-script-lines { background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(248, 250, 252, 0.6) 100%); border-color: rgba(26, 117, 210, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); } [data-color-scheme="light"] .sl-script-lines-title { color: #0f172a; } [data-color-scheme="light"] .sl-script-lines-note { color: #64748b; } [data-color-scheme="light"] .sl-panel--tray .sl-script-lines-badge { border-color: rgba(26, 117, 210, 0.18); background: rgba(26, 117, 210, 0.08); color: #125eae; } [data-color-scheme="light"] .sl-panel--tray .sl-line-action { color: #475569; } [data-color-scheme="light"] .sl-panel--tray .sl-line-dialogue { color: #1e293b; } [data-color-scheme="light"] .sl-panel--tray .sl-line-paren { color: #64748b; } /* ── Tray: boneyard ── */ [data-color-scheme="light"] .sl-panel--tray .sl-boneyard { border-color: rgba(217, 119, 6, 0.18); background: linear-gradient(180deg, rgba(217, 119, 6, 0.04) 0%, rgba(217, 119, 6, 0.02) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); } [data-color-scheme="light"] .sl-boneyard-title { color: #b45309; } [data-color-scheme="light"] .sl-boneyard-note { color: #92400e; } [data-color-scheme="light"] .sl-panel--tray .sl-boneyard-count { background: rgba(217, 119, 6, 0.12); color: #92400e; } [data-color-scheme="light"] .sl-panel--tray .sl-boneyard-body { border-color: rgba(217, 119, 6, 0.14); background: rgba(217, 119, 6, 0.03); } [data-color-scheme="light"] .sl-panel--tray .sl-boneyard-block { color: #78350f; } [data-color-scheme="light"] .sl-panel--tray .sl-boneyard-word.sl-word--struck { color: #92400e !important; text-decoration-color: rgba(217, 119, 6, 0.6); } /* ── Tray: audio row ── */ [data-color-scheme="light"] .sl-panel--tray .sl-audio-row { border-color: rgba(15, 23, 42, 0.08); background: rgba(255, 255, 255, 0.6); } /* ── Tray: media cells ── */ [data-color-scheme="light"] .sl-panel--tray .sl-media-cell, [data-color-scheme="light"] .sl-panel--tray .sl-audio-cell { border-color: rgba(15, 23, 42, 0.1); background: #e8edf4; } /* ── Loading / empty states ── */ [data-color-scheme="light"] .sl-cockpit .sl-loading, [data-color-scheme="light"] .sl-cockpit .sl-empty { color: #64748b; } /* ── Scrollbar overrides for cockpit panels ── */ [data-color-scheme="light"] .sl-cockpit-nav-scroll::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.3); } [data-color-scheme="light"] .sl-cockpit-nav-scroll::-webkit-scrollbar-track { background: rgba(100, 116, 139, 0.06); } [data-color-scheme="light"] .sl-panel-body--inspector::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.3); } [data-color-scheme="light"] .sl-panel-body--inspector::-webkit-scrollbar-track { background: rgba(100, 116, 139, 0.06); } [data-color-scheme="light"] .sl-panel--tray .sl-script-lines-text::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.3); } [data-color-scheme="light"] .sl-panel--tray .sl-boneyard-body::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.3); } /* ========================================================================= * ONBOARDING & PROFILE — Wizard steps, forms, cards, success states * ========================================================================= */ /* --------------------------------------------------------------------------- * Onboarding Wizard — Container & Header * --------------------------------------------------------------------------- */ [data-color-scheme="light"] .onboarding-page, [data-color-scheme="light"] .onboarding-wizard { background: linear-gradient(135deg, #f5f7fb 0%, #eef2f7 50%, #e8edf2 100%); } [data-color-scheme="light"] .wizard-header { border-bottom-color: rgba(15, 23, 42, 0.1); } /* Progress dots */ [data-color-scheme="light"] .progress-dot { background: rgba(15, 23, 42, 0.14); } [data-color-scheme="light"] .progress-dot.active { background: #1a75d2; box-shadow: 0 0 8px rgba(26, 117, 210, 0.35); } [data-color-scheme="light"] .progress-dot.completed { background: #16a34a; } /* --------------------------------------------------------------------------- * Onboarding Wizard — Step Content * --------------------------------------------------------------------------- */ [data-color-scheme="light"] .step-title { color: #0f172a; } /* --------------------------------------------------------------------------- * Onboarding Wizard — Intent Buttons (Step 1) * --------------------------------------------------------------------------- */ [data-color-scheme="light"] .intent-btn { background: rgba(255, 255, 255, 0.82); border-color: rgba(15, 23, 42, 0.12); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .intent-btn:hover { border-color: #1a75d2; background: rgba(26, 117, 210, 0.05); box-shadow: 0 4px 16px rgba(26, 117, 210, 0.1); } [data-color-scheme="light"] .intent-btn.selected { border-color: #1a75d2; background: rgba(26, 117, 210, 0.08); box-shadow: 0 0 20px rgba(26, 117, 210, 0.15); } [data-color-scheme="light"] .intent-icon { background: rgba(26, 117, 210, 0.08); color: #1a75d2; } [data-color-scheme="light"] .intent-title { color: #0f172a; } [data-color-scheme="light"] .intent-desc { color: #64748b; } /* Disabled state when terms not accepted */ [data-color-scheme="light"] .intent-buttons.disabled .intent-btn { background: rgba(255, 255, 255, 0.5); } /* --------------------------------------------------------------------------- * Onboarding Wizard — Terms Acceptance * --------------------------------------------------------------------------- */ [data-color-scheme="light"] .terms-acceptance { background: rgba(26, 117, 210, 0.04); border-color: rgba(26, 117, 210, 0.18); } [data-color-scheme="light"] .terms-acceptance.accepted { background: rgba(22, 163, 74, 0.04); border-color: rgba(22, 163, 74, 0.22); } [data-color-scheme="light"] .checkmark { background: #ffffff; border-color: rgba(15, 23, 42, 0.22); } [data-color-scheme="light"] .terms-checkbox-label:hover .checkmark { border-color: #1a75d2; } [data-color-scheme="light"] .terms-checkbox:checked ~ .checkmark { background: #1a75d2; border-color: #1a75d2; } [data-color-scheme="light"] .terms-text a { color: #1a75d2; } [data-color-scheme="light"] .terms-hint { color: #64748b; } [data-color-scheme="light"] .terms-acceptance.accepted .terms-hint { color: #15803d; } /* --------------------------------------------------------------------------- * Onboarding Wizard — Form Elements (Setup form, Step 2+) * --------------------------------------------------------------------------- */ [data-color-scheme="light"] .onboarding-wizard .form-label, [data-color-scheme="light"] .project-wizard .form-label { color: #334155; } [data-color-scheme="light"] .onboarding-wizard .form-input, [data-color-scheme="light"] .onboarding-wizard .form-select, [data-color-scheme="light"] .onboarding-wizard .form-textarea, [data-color-scheme="light"] .project-wizard .form-input, [data-color-scheme="light"] .project-wizard .form-select, [data-color-scheme="light"] .project-wizard .form-textarea { background: rgba(255, 255, 255, 0.92); border-color: rgba(15, 23, 42, 0.14); color: #0f172a; } [data-color-scheme="light"] .onboarding-wizard .form-input:focus, [data-color-scheme="light"] .onboarding-wizard .form-select:focus, [data-color-scheme="light"] .onboarding-wizard .form-textarea:focus, [data-color-scheme="light"] .project-wizard .form-input:focus, [data-color-scheme="light"] .project-wizard .form-select:focus, [data-color-scheme="light"] .project-wizard .form-textarea:focus { border-color: rgba(26, 117, 210, 0.48); background: #ffffff; box-shadow: 0 0 0 3px rgba(26, 117, 210, 0.1); } [data-color-scheme="light"] .onboarding-wizard .form-input::placeholder, [data-color-scheme="light"] .onboarding-wizard .form-textarea::placeholder, [data-color-scheme="light"] .project-wizard .form-input::placeholder, [data-color-scheme="light"] .project-wizard .form-textarea::placeholder { color: #94a3b8; } [data-color-scheme="light"] .onboarding-wizard .form-input.error, [data-color-scheme="light"] .project-wizard .form-input.error { border-color: #dc2626; } [data-color-scheme="light"] .onboarding-wizard .form-error, [data-color-scheme="light"] .project-wizard .form-error { color: #dc2626; } [data-color-scheme="light"] .onboarding-wizard .form-hint, [data-color-scheme="light"] .project-wizard .form-hint { color: #64748b; } [data-color-scheme="light"] .onboarding-wizard .form-select option, [data-color-scheme="light"] .project-wizard .form-select option { background: #ffffff; color: #0f172a; } /* --------------------------------------------------------------------------- * Onboarding Wizard — AI Credits Card (Step 3) * --------------------------------------------------------------------------- */ [data-color-scheme="light"] .credits-balance-card { background: linear-gradient(135deg, rgba(26, 117, 210, 0.06) 0%, rgba(22, 163, 74, 0.04) 100%); border-color: rgba(26, 117, 210, 0.2); } [data-color-scheme="light"] .credits-icon { background: rgba(26, 117, 210, 0.1); color: #1a75d2; } [data-color-scheme="light"] .credits-label { color: #64748b; } [data-color-scheme="light"] .credits-plan { color: #1a75d2; } [data-color-scheme="light"] .credits-feature-item { background: rgba(15, 23, 42, 0.03); } [data-color-scheme="light"] .credits-feature-item:hover { background: rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .credits-note { background: rgba(15, 23, 42, 0.025); border-color: rgba(15, 23, 42, 0.08); color: #64748b; } [data-color-scheme="light"] .credits-note a { color: #1a75d2; } /* --------------------------------------------------------------------------- * Onboarding Wizard — Character Cards (Step 5) * --------------------------------------------------------------------------- */ [data-color-scheme="light"] .character-card { background: rgba(255, 255, 255, 0.82); border-color: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .character-card:focus-within { border-color: rgba(26, 117, 210, 0.42); } [data-color-scheme="light"] .onboarding-wizard .btn-icon, [data-color-scheme="light"] .project-wizard .btn-icon { border-color: rgba(15, 23, 42, 0.12); color: #64748b; } [data-color-scheme="light"] .onboarding-wizard .btn-icon:hover, [data-color-scheme="light"] .project-wizard .btn-icon:hover { background: rgba(220, 38, 38, 0.06); border-color: #dc2626; color: #dc2626; } /* --------------------------------------------------------------------------- * Onboarding Wizard — Generation Summary (Step 6) * --------------------------------------------------------------------------- */ [data-color-scheme="light"] .generation-summary { background: rgba(255, 255, 255, 0.82); border-color: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .generation-summary h3 { color: #64748b; } [data-color-scheme="light"] .free-draft-notice { color: #15803d; } /* --------------------------------------------------------------------------- * Onboarding Wizard — Success State (Step 7) * --------------------------------------------------------------------------- */ [data-color-scheme="light"] .success-icon { background: rgba(22, 163, 74, 0.08); color: #16a34a; } /* --------------------------------------------------------------------------- * Onboarding Wizard — Screenplay Preview * --------------------------------------------------------------------------- */ [data-color-scheme="light"] .screenplay-preview { background: rgba(255, 255, 255, 0.9); border-color: rgba(15, 23, 42, 0.12); } /* --------------------------------------------------------------------------- * Onboarding Wizard — Training Plan * --------------------------------------------------------------------------- */ [data-color-scheme="light"] .training-plan { background: rgba(255, 255, 255, 0.82); border-color: rgba(15, 23, 42, 0.12); } [data-color-scheme="light"] .training-summary { color: #64748b; } [data-color-scheme="light"] .training-item { border-left-color: rgba(26, 117, 210, 0.32); } [data-color-scheme="light"] .training-item-action { color: #64748b; } /* --------------------------------------------------------------------------- * Onboarding Wizard — Loading Overlay * --------------------------------------------------------------------------- */ [data-color-scheme="light"] .wizard-loading { background: rgba(248, 250, 252, 0.96); } [data-color-scheme="light"] .loading-spinner { border-color: rgba(15, 23, 42, 0.12); border-top-color: #1a75d2; } [data-color-scheme="light"] .loading-text { color: #64748b; } /* --------------------------------------------------------------------------- * Onboarding Wizard — Navigation Buttons * --------------------------------------------------------------------------- */ [data-color-scheme="light"] .onboarding-wizard .btn-text, [data-color-scheme="light"] .project-wizard .btn-text { color: #64748b; } [data-color-scheme="light"] .onboarding-wizard .btn-text:hover:not(:disabled), [data-color-scheme="light"] .project-wizard .btn-text:hover:not(:disabled) { color: #0f172a; } [data-color-scheme="light"] .onboarding-wizard .skip-link, [data-color-scheme="light"] .project-wizard .skip-link { color: #64748b; } [data-color-scheme="light"] .onboarding-wizard .skip-link:hover, [data-color-scheme="light"] .project-wizard .skip-link:hover { color: #0f172a; } /* Preview mode banner */ [data-color-scheme="light"] .preview-mode-banner { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #451a03; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } [data-color-scheme="light"] .preview-mode-banner .btn-sm { background: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.4); color: #451a03; } [data-color-scheme="light"] .preview-mode-banner .btn-sm:hover { background: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.6); } /* --------------------------------------------------------------------------- * Project Wizard — Container & Org Selection * --------------------------------------------------------------------------- */ [data-color-scheme="light"] .wizard-page, [data-color-scheme="light"] .project-wizard { background: linear-gradient(135deg, #f5f7fb 0%, #eef2f7 50%, #e8edf2 100%); } [data-color-scheme="light"] .project-wizard .wizard-header { border-bottom-color: rgba(15, 23, 42, 0.1); } [data-color-scheme="light"] .cancel-link { color: #64748b; } /* Org selection cards */ [data-color-scheme="light"] .org-card { background: rgba(255, 255, 255, 0.82); border-color: rgba(15, 23, 42, 0.12); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); } [data-color-scheme="light"] .org-card:hover { border-color: #1a75d2; background: rgba(26, 117, 210, 0.04); box-shadow: 0 4px 16px rgba(26, 117, 210, 0.1); } [data-color-scheme="light"] .org-card.selected { border-color: #1a75d2; background: rgba(26, 117, 210, 0.08); box-shadow: 0 0 20px rgba(26, 117, 210, 0.15); } [data-color-scheme="light"] .org-card-icon { background: rgba(26, 117, 210, 0.08); color: #1a75d2; } [data-color-scheme="light"] .org-card-icon--new { background: rgba(22, 163, 74, 0.08); color: #16a34a; } [data-color-scheme="light"] .org-card--new { border-color: rgba(15, 23, 42, 0.14); } [data-color-scheme="light"] .org-card--new:hover { border-color: #16a34a; background: rgba(22, 163, 74, 0.04); } [data-color-scheme="light"] .org-card--new.selected { border-color: #16a34a; background: rgba(22, 163, 74, 0.08); box-shadow: 0 0 20px rgba(22, 163, 74, 0.12); } [data-color-scheme="light"] .org-card-name { color: #0f172a; } [data-color-scheme="light"] .org-card-desc { color: #64748b; } /* --------------------------------------------------------------------------- * Profile Page — Extended Overrides * * Supplements the existing PROFILE PAGE section with elements that were * missing or used hardcoded dark-mode rgba(255,...) values. * --------------------------------------------------------------------------- */ /* Role badges */ [data-color-scheme="light"] .profile-page .profile-role-badge.role-admin { background: rgba(220, 38, 38, 0.08); color: #b91c1c; border-color: rgba(220, 38, 38, 0.22); box-shadow: none; } [data-color-scheme="light"] .profile-page .profile-role-badge.role-editor { background: rgba(26, 117, 210, 0.08); color: #125eae; border-color: rgba(26, 117, 210, 0.22); box-shadow: none; } [data-color-scheme="light"] .profile-page .profile-role-badge.role-viewer { background: rgba(100, 116, 139, 0.08); color: #475569; border-color: rgba(100, 116, 139, 0.22); box-shadow: none; } /* Form checkbox styling */ [data-color-scheme="light"] .profile-page .form-checkbox { accent-color: #1a75d2; } [data-color-scheme="light"] .profile-page .form-checkbox-label { color: #334155; } /* Button refinements */ [data-color-scheme="light"] .profile-page .btn-primary { background: linear-gradient(135deg, #1a75d2 0%, #125eae 100%); box-shadow: 0 4px 12px rgba(26, 117, 210, 0.2); } [data-color-scheme="light"] .profile-page .btn-primary:hover { box-shadow: 0 6px 16px rgba(26, 117, 210, 0.28); } [data-color-scheme="light"] .profile-page .btn-danger { background: rgba(220, 38, 38, 0.08); color: #dc2626; border-color: rgba(220, 38, 38, 0.22); } [data-color-scheme="light"] .profile-page .btn-danger:hover { background: rgba(220, 38, 38, 0.14); } /* AI test result boxes */ [data-color-scheme="light"] .profile-page .ai-test-result.success { background: rgba(22, 163, 74, 0.06); border-color: rgba(22, 163, 74, 0.2); color: #15803d; } [data-color-scheme="light"] .profile-page .ai-test-result.error { background: rgba(220, 38, 38, 0.06); border-color: rgba(220, 38, 38, 0.2); color: #b91c1c; } [data-color-scheme="light"] .profile-page .ai-test-result.loading { background: rgba(26, 117, 210, 0.06); border-color: rgba(26, 117, 210, 0.2); color: #125eae; } /* Image model badges */ [data-color-scheme="light"] .profile-page .image-model-badge { color: #475569; } [data-color-scheme="light"] .profile-page .image-model-badge.legacy { color: #b45309; } [data-color-scheme="light"] .profile-page .image-model-badge.gpu { color: #125eae; } /* Waitlist status badges */ [data-color-scheme="light"] .profile-page .waitlist-item-status.pending { background: rgba(217, 119, 6, 0.08); color: #b45309; border-color: rgba(217, 119, 6, 0.22); } [data-color-scheme="light"] .profile-page .waitlist-item-status.approved { background: rgba(22, 163, 74, 0.06); color: #15803d; border-color: rgba(22, 163, 74, 0.2); } [data-color-scheme="light"] .profile-page .waitlist-item-status.rejected { background: rgba(220, 38, 38, 0.06); color: #b91c1c; border-color: rgba(220, 38, 38, 0.2); } /* Waitlist stat counts */ [data-color-scheme="light"] .profile-page .waitlist-stat-count { color: #b45309; } [data-color-scheme="light"] .profile-page .waitlist-stat-count.rejected { color: #dc2626; } /* Master creator toggle - checked state */ [data-color-scheme="light"] .profile-page .master-edit-toggle input:checked + .master-edit-slider { background: rgba(217, 119, 6, 0.14); border-color: rgba(217, 119, 6, 0.28); } /* Profile modal backdrop & modal background */ [data-color-scheme="light"] .profile-page .profile-modal-body, [data-color-scheme="light"] .profile-page .prism-modal-body { color: #334155; } /* Provider badge specific colors for light mode */ [data-color-scheme="light"] .profile-page .provider-badge.provider-google { background: rgba(66, 133, 244, 0.08); border-color: rgba(66, 133, 244, 0.2); color: #125eae; } [data-color-scheme="light"] .profile-page .ai-provider-icon.anthropic { background: rgba(217, 119, 87, 0.1); } [data-color-scheme="light"] .profile-page .ai-provider-icon.openai { background: rgba(16, 163, 127, 0.1); } [data-color-scheme="light"] .profile-page .ai-provider-icon.google { background: rgba(66, 133, 244, 0.1); } /* Toast notifications */ [data-color-scheme="light"] .profile-page .toast-success { background: #16a34a; color: #ffffff; } [data-color-scheme="light"] .profile-page .toast-error { background: #dc2626; color: #ffffff; } /* Admin tools */ [data-color-scheme="light"] .profile-page .admin-tool-btn { border-color: rgba(15, 23, 42, 0.12); color: #334155; } [data-color-scheme="light"] .profile-page .admin-tool-btn:hover { background: rgba(255, 255, 255, 0.92); border-color: rgba(26, 117, 210, 0.22); color: #0f172a; } /* Prism modal inside profile - header border */ [data-color-scheme="light"] .profile-page .prism-modal-header { border-bottom-color: rgba(15, 23, 42, 0.1); } /* ========================================================================= * SMOOTH TRANSITION (added via JS on toggle, not on page load) * ========================================================================= */ .color-scheme-transitioning, .color-scheme-transitioning * { transition: background-color 0.3s ease, color 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; }