/* ===== Settings page + GLOBAL light theme ===== */ /* ---- Light theme (global variable swap; applied via data-theme on ) ---- */ :root[data-theme="light"] { --bg: #f5f6f8; --bg-elev: #ffffff; --bg-elev-2: #eef0f4; --bg-input: #ffffff; --border: #d0d5e0; --border-soft: #e3e6ed; --text: #1b1e26; --text-dim: #525866; --text-faint: #8a909c; --shadow: 0 10px 30px rgba(15, 20, 40, 0.12); } /* ---- Targeted light-mode fixes for rules that hardcode dark values ---- */ :root[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c6cbd6; } /* white-stripe overlays are invisible on white — flip to dark overlays */ :root[data-theme="light"] .stub { background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(20, 25, 45, 0.025) 10px, rgba(20, 25, 45, 0.025) 20px); } :root[data-theme="light"] .data-table tr:hover td { background: rgba(20, 25, 45, 0.03); } /* warm/danger chips: brighten-on-dark hexes lack contrast on white */ :root[data-theme="light"] .chip.warn { color: #a06300; border-color: #cf9433; background: rgba(199, 138, 26, 0.1); } :root[data-theme="light"] .chip.danger { color: #c93b3b; border-color: #c93b3b; background: rgba(201, 59, 59, 0.08); } /* canvas surface: hardcoded near-black gradient + white grid dots */ :root[data-theme="light"] .canvas-viewport { background: radial-gradient(circle at center, #f0f1f5 0%, #e4e7ee 100%); } :root[data-theme="light"] .canvas-grid { background-image: radial-gradient(rgba(20, 25, 45, 0.1) 1px, transparent 1px); } :root[data-theme="light"] .canvas-hint { background: rgba(255, 255, 255, 0.7); color: var(--text-dim); } /* active color-dot ring was white-on-white */ :root[data-theme="light"] .color-dot.active { border-color: #1b1e26; } /* ---- Settings page ---- */ /* theme segmented control */ .theme-seg { display: inline-flex; background: var(--bg-elev-2); border: 1px solid var(--border-soft); border-radius: 9px; padding: 3px; gap: 3px; } .theme-opt { background: none; border: none; color: var(--text-dim); font-size: 13px; font-weight: 500; padding: 7px 16px; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; } .theme-opt:hover { color: var(--text); } .theme-opt.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } /* accent swatches */ .swatch-row { display: flex; gap: 10px; flex-wrap: wrap; padding: 4px 0; } .swatch { width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0; display: grid; place-items: center; color: rgba(0, 0, 0, 0.75); transition: transform 0.1s; } .swatch:hover { transform: scale(1.12); } .swatch.active { box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 4px var(--text); } /* AI key status */ .chip.key-ok { color: var(--accent-2); border-color: var(--accent-2); background: rgba(84, 214, 163, 0.08); } .settings-note { color: var(--text-faint); font-size: 12.5px; line-height: 1.55; margin: 12px 0 0; } .settings-note a { color: var(--accent); text-decoration: none; } .settings-note a:hover { text-decoration: underline; } /* workspace stats grid */ .ws-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; } .ws-stat { background: var(--bg-elev-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 12px; } .ws-stat-val { font-size: 18px; font-weight: 700; } .ws-stat-label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; } /* danger zone */ .danger-zone { margin-top: 18px; border: 1px solid var(--danger); border-radius: var(--radius); background: rgba(255, 107, 107, 0.05); padding: 14px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .danger-zone .dz-title { font-weight: 600; font-size: 13.5px; color: var(--danger); } .danger-zone .dz-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; } .danger-zone > div:first-child { flex: 1; min-width: 220px; } /* about list */ .about-list { list-style: none; margin: 0; padding: 0; } .about-list li { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--border-soft); } .about-list li:last-child { border-bottom: none; } .about-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .about-list li.live .about-dot { background: var(--accent-2); } .about-list li.stubbed .about-dot { background: var(--text-faint); } .about-tag { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; padding: 2px 8px; border-radius: 20px; background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text-dim); } .about-list li.live .about-tag { color: var(--accent-2); border-color: var(--accent-2); background: rgba(84, 214, 163, 0.08); }