/* ============================================================ holdsite Builder — UI Theme Mirrors the visual system used by the marketing homepage and demo: dark-navy bg, gradient accents, Fraunces serif display, Inter UI body. Selectors here are kept identical to the original builder.css so app.js never needs to know the styling was rewritten. ============================================================ */ :root { --bg: #0B1020; --bg-soft: #111634; --bg-soft-2: #0F1530; --bg-card: #161D3D; --bg-input: rgba(255, 255, 255, 0.04); --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --border-glow: rgba(124, 92, 255, 0.4); --text: #F5F7FF; --text-muted: rgba(245, 247, 255, 0.65); --text-dim: rgba(245, 247, 255, 0.4); --accent: #7C5CFF; --accent-2: #FF7AC6; --accent-3: #5BE8C7; --accent-glow: rgba(124, 92, 255, 0.35); --gradient: linear-gradient(135deg, #7C5CFF 0%, #FF7AC6 50%, #5BE8C7 100%); --gradient-2: linear-gradient(135deg, #7C5CFF 0%, #FF7AC6 100%); --gradient-text: linear-gradient(120deg, #FFFFFF 0%, #C7B8FF 40%, #FF7AC6 80%); --gradient-success: linear-gradient(135deg, #5BE8C7 0%, #2EBFAA 100%); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3); --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.4); --shadow-glow: 0 8px 32px var(--accent-glow); } /* ============================================================ BUILDER THEME OVERRIDES Applied via [data-builder-theme] on . Only the variables that differ from the dark-navy default need to be declared here — all other rules pick up the new values automatically because the rest of the stylesheet reads from vars. ============================================================ */ /* ── Midnight ── deep black, no navy tint, same purple accent */ [data-builder-theme="midnight"] { --bg: #050507; --bg-soft: #0c0c10; --bg-soft-2: #080809; --bg-card: #101014; --bg-input: rgba(255, 255, 255, 0.03); --border: rgba(255, 255, 255, 0.06); --border-strong: rgba(255, 255, 255, 0.12); --border-glow: rgba(124, 92, 255, 0.35); --text: #e8eaf0; --text-muted: rgba(232, 234, 240, 0.6); --text-dim: rgba(232, 234, 240, 0.35); --shadow-sm: 0 2px 8px rgba(0,0,0,0.4); --shadow-md: 0 8px 24px rgba(0,0,0,0.55); --shadow-lg: 0 24px 64px rgba(0,0,0,0.7); } /* ── Light ── warm grey shell, dark text, purple accent */ [data-builder-theme="light"] { --bg: #f0f2f5; --bg-soft: #e6e9ee; --bg-soft-2: #dde1e8; --bg-card: #ffffff; --bg-input: rgba(0, 0, 0, 0.04); --border: rgba(0, 0, 0, 0.10); --border-strong: rgba(0, 0, 0, 0.20); --border-glow: rgba(124, 92, 255, 0.4); --text: #1a1c24; --text-muted: rgba(26, 28, 36, 0.60); --text-dim: rgba(26, 28, 36, 0.38); --accent-glow: rgba(124, 92, 255, 0.20); --gradient-text: linear-gradient(120deg, #1a1c24 0%, #7C5CFF 60%, #FF7AC6 100%); --shadow-sm: 0 2px 8px rgba(0,0,0,0.07); --shadow-md: 0 8px 24px rgba(0,0,0,0.10); --shadow-lg: 0 24px 64px rgba(0,0,0,0.14); } /* Light-mode translucent header / chat panel backgrounds */ [data-builder-theme="light"] .builder-header { background: rgba(240, 242, 245, 0.85); } [data-builder-theme="light"] .chat-panel { background: rgba(240, 242, 245, 0.75); } [data-builder-theme="light"] .chat-input-form { background: rgba(240, 242, 245, 0.9); } [data-builder-theme="light"] .preview-header { background: rgba(230, 233, 238, 0.85); } [data-builder-theme="light"] .toggle-btn:hover { background: rgba(0, 0, 0, 0.06); } [data-builder-theme="light"] .toggle-btn.active { background: rgba(124, 92, 255, 0.15); box-shadow: 0 0 0 1px rgba(124, 92, 255, 0.35); } [data-builder-theme="light"] .msg-bubble { background: #ffffff; border-color: rgba(0,0,0,0.10); } [data-builder-theme="light"] .message.user .msg-bubble { background: rgba(124, 92, 255, 0.08); border-color: rgba(124, 92, 255, 0.22); } [data-builder-theme="light"] .page-switcher { background: var(--bg); border-bottom-color: rgba(0,0,0,0.10); } [data-builder-theme="light"] .page-switcher-tab { color: rgba(26,28,36,0.55); } [data-builder-theme="light"] .page-switcher-tab:hover { background: rgba(0,0,0,0.04); color: rgba(26,28,36,0.9); } [data-builder-theme="light"] .page-switcher-tab.active { background: rgba(124,92,255,0.08); border-color: rgba(0,0,0,0.10); border-bottom-color: rgba(124,92,255,0.08); } [data-builder-theme="light"] .page-switcher-add { border-color: rgba(0,0,0,0.15); color: rgba(26,28,36,0.45); } [data-builder-theme="light"] .rp-tile { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.10); } [data-builder-theme="light"] .rp-tile:hover { background: rgba(0,0,0,0.07); border-color: rgba(0,0,0,0.16); } [data-builder-theme="light"] .rp-thumb { background: rgba(0,0,0,0.08); color: rgba(26,28,36,0.25); } [data-builder-theme="light"] .rp-open-btn { background: rgba(124,92,255,0.10); border-color: rgba(124,92,255,0.35); color: #6a3fd3; } [data-builder-theme="light"] body::before { opacity: 0.12; } [data-builder-theme="light"] .preview-container { background-image: radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px); } [data-builder-theme="light"] .chat-attach-btn { background: rgba(0,0,0,0.05) !important; color: rgba(26,28,36,0.55) !important; border-color: rgba(0,0,0,0.12) !important; } [data-builder-theme="light"] .sv-modal { background: #f8f9fb; border-color: rgba(0,0,0,0.12); } [data-builder-theme="light"] .sv-modal-header { background: #eef0f4; border-color: rgba(0,0,0,0.10); } [data-builder-theme="light"] .sv-modal-title { color: #1a1c24; } [data-builder-theme="light"] .sv-modal-desc { color: rgba(26,28,36,0.5); } [data-builder-theme="light"] .sv-close-btn { color: rgba(26,28,36,0.4); } [data-builder-theme="light"] .sv-close-btn:hover { color: #1a1c24; background: rgba(0,0,0,0.06); } [data-builder-theme="light"] .sv-file-tree { background: #f0f2f5; border-color: rgba(0,0,0,0.10); } [data-builder-theme="light"] .sv-file-item { color: rgba(26,28,36,0.6); } [data-builder-theme="light"] .sv-file-item:hover { background: rgba(0,0,0,0.05); color: #1a1c24; } [data-builder-theme="light"] .sv-file-item.is-active { background: rgba(124,92,255,0.12); color: #5b35c4; } [data-builder-theme="light"] .sv-code-pane { background: #fff; } [data-builder-theme="light"] .sv-code-toolbar { background: #eef0f4; border-color: rgba(0,0,0,0.08); } [data-builder-theme="light"] .sv-active-filename { color: rgba(26,28,36,0.55); } [data-builder-theme="light"] .sv-pre { background: #fff !important; color: #1a1c24; } [data-builder-theme="light"] .phase-tracker { background: rgba(240,242,245,0.95); border-bottom-color: rgba(124,92,255,0.15); } [data-builder-theme="light"] .phase-tracker-label { color: rgba(26,28,36,0.4); } [data-builder-theme="light"] .phase-step { color: rgba(26,28,36,0.4); } [data-builder-theme="light"] .phase-step + .phase-step::before { background: rgba(0,0,0,0.10); } [data-builder-theme="light"] .phase-step .phase-step-icon { border-color: rgba(0,0,0,0.20); } [data-builder-theme="light"] .phase-tracker-dismiss { color: rgba(26,28,36,0.25); } [data-builder-theme="light"] .phase-tracker-dismiss:hover { color: rgba(26,28,36,0.6); } [data-builder-theme="light"] .sitemap-sidebar { background: var(--bg-soft); } [data-builder-theme="light"] .recent-projects-toggle:hover { background: rgba(0,0,0,0.05); } /* ── Dark Green (Forest) ── */ [data-builder-theme="dark-green"] { --bg: #0a1a0f; --bg-soft: #0f2117; --bg-soft-2: #0c1c12; --bg-card: #122318; --bg-input: rgba(255, 255, 255, 0.04); --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.14); --border-glow: rgba(52, 211, 100, 0.4); --text: #e8f5ee; --text-muted: rgba(232, 245, 238, 0.62); --text-dim: rgba(232, 245, 238, 0.38); --accent: #34d364; --accent-2: #7fffd4; --accent-3: #a3e635; --accent-glow: rgba(52, 211, 100, 0.30); --gradient: linear-gradient(135deg, #34d364 0%, #7fffd4 50%, #a3e635 100%); --gradient-2: linear-gradient(135deg, #34d364 0%, #7fffd4 100%); --gradient-text: linear-gradient(120deg, #e8f5ee 0%, #34d364 40%, #7fffd4 80%); --gradient-success: linear-gradient(135deg, #34d364 0%, #1aad4d 100%); --shadow-glow: 0 8px 32px rgba(52,211,100,0.28); } /* ── Dark Red (Crimson) ── */ [data-builder-theme="dark-red"] { --bg: #150808; --bg-soft: #1e0d0d; --bg-soft-2: #190a0a; --bg-card: #220f0f; --bg-input: rgba(255, 255, 255, 0.04); --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.14); --border-glow: rgba(239, 68, 68, 0.45); --text: #f5e8e8; --text-muted: rgba(245, 232, 232, 0.62); --text-dim: rgba(245, 232, 232, 0.38); --accent: #ef4444; --accent-2: #fb923c; --accent-3: #f472b6; --accent-glow: rgba(239, 68, 68, 0.30); --gradient: linear-gradient(135deg, #ef4444 0%, #fb923c 50%, #f472b6 100%); --gradient-2: linear-gradient(135deg, #ef4444 0%, #fb923c 100%); --gradient-text: linear-gradient(120deg, #f5e8e8 0%, #ef4444 40%, #fb923c 80%); --gradient-success: linear-gradient(135deg, #34d364 0%, #1aad4d 100%); --shadow-glow: 0 8px 32px rgba(239,68,68,0.28); } /* ── Vibrant (code-editor chaos) ── */ [data-builder-theme="vibrant"] { --bg: #0d0d0d; --bg-soft: #141414; --bg-soft-2: #111111; --bg-card: #1a1a1a; --bg-input: rgba(255, 255, 255, 0.05); --border: rgba(0, 255, 128, 0.12); --border-strong: rgba(0, 255, 128, 0.25); --border-glow: rgba(0, 255, 128, 0.45); --text: #00ff80; --text-muted: rgba(0, 255, 128, 0.65); --text-dim: rgba(0, 255, 128, 0.35); --accent: #00bfff; --accent-2: #ff6ac1; --accent-3: #ffe66d; --accent-glow: rgba(0, 191, 255, 0.30); --gradient: linear-gradient(135deg, #00ff80 0%, #00bfff 50%, #ff6ac1 100%); --gradient-2: linear-gradient(135deg, #00bfff 0%, #ff6ac1 100%); --gradient-text: linear-gradient(120deg, #00ff80 0%, #00bfff 50%, #ff6ac1 100%); --gradient-success: linear-gradient(135deg, #00ff80 0%, #00cc66 100%); --shadow-glow: 0 8px 32px rgba(0,191,255,0.30); --shadow-sm: 0 2px 8px rgba(0,0,0,0.5); --shadow-md: 0 8px 24px rgba(0,0,0,0.6); --shadow-lg: 0 24px 64px rgba(0,0,0,0.7); } [data-builder-theme="vibrant"] .builder-header { background: rgba(13,13,13,0.85); border-bottom-color: rgba(0,255,128,0.12); } [data-builder-theme="vibrant"] .chat-panel { background: rgba(13,13,13,0.7); } [data-builder-theme="vibrant"] .chat-input-form { background: rgba(13,13,13,0.85); border-top-color: rgba(0,255,128,0.12); } [data-builder-theme="vibrant"] .preview-header { background: rgba(13,13,13,0.7); border-bottom-color: rgba(0,255,128,0.12); } [data-builder-theme="vibrant"] .msg-bubble { background: #1a1a1a; border-color: rgba(0,255,128,0.15); } [data-builder-theme="vibrant"] .message.user .msg-bubble { background: rgba(0,255,128,0.05); border-color: rgba(0,255,128,0.25); } [data-builder-theme="vibrant"] .download-btn, [data-builder-theme="vibrant"] .goals-continue, [data-builder-theme="vibrant"] .chat-input-form button:not(:disabled):not(.clear-chat-btn):not(.chat-attach-btn) { background: var(--gradient-2); } [data-builder-theme="vibrant"] .sv-modal { background: #111; border-color: rgba(0,255,128,0.15); } [data-builder-theme="vibrant"] .sv-modal-header { background: #191919; border-color: rgba(0,255,128,0.10); } [data-builder-theme="vibrant"] .sv-modal-title { color: #00ff80; } [data-builder-theme="vibrant"] .sv-file-tree { background: #0d0d0d; border-color: rgba(0,255,128,0.10); } [data-builder-theme="vibrant"] .sv-file-item { color: rgba(0,255,128,0.55); } [data-builder-theme="vibrant"] .sv-file-item:hover { color: #00ff80; background: rgba(0,255,128,0.06); } [data-builder-theme="vibrant"] .sv-file-item.is-active { background: rgba(0,191,255,0.12); color: #00bfff; } [data-builder-theme="vibrant"] .sv-code-pane { background: #111; } [data-builder-theme="vibrant"] .sv-code-toolbar { background: #181818; border-color: rgba(0,255,128,0.08); } [data-builder-theme="vibrant"] .sv-active-filename { color: rgba(0,255,128,0.5); } [data-builder-theme="vibrant"] .sv-pre { background: #111 !important; } [data-builder-theme="vibrant"] .preview-container { background-image: radial-gradient(circle, rgba(0,255,128,0.04) 1px, transparent 1px); } [data-builder-theme="vibrant"] body::before { background: radial-gradient(ellipse, rgba(0,191,255,0.12) 0%, transparent 60%); } [data-builder-theme="vibrant"] .rsl-toast { background-color: #161616; border-color: rgba(0,255,128,0.15); } [data-builder-theme="vibrant"] .rsl-toast-body { background-color: #161616; color: #00ff80; } [data-builder-theme="vibrant"] .phase-tracker { background: rgba(13,13,13,0.95); border-bottom-color: rgba(0,255,128,0.15); } [data-builder-theme="vibrant"] .sitemap-sidebar { background: var(--bg-soft); } /* ── Retro CRT Terminal ── phosphor amber/green on near-black */ [data-builder-theme="crt"] { --bg: #0a0e00; --bg-soft: #0e1400; --bg-soft-2: #0b1000; --bg-card: #111800; --bg-input: rgba(180, 255, 80, 0.04); --border: rgba(180, 255, 80, 0.14); --border-strong: rgba(180, 255, 80, 0.28); --border-glow: rgba(180, 255, 80, 0.5); --text: #b4ff50; --text-muted: rgba(180, 255, 80, 0.62); --text-dim: rgba(180, 255, 80, 0.35); --accent: #b4ff50; --accent-2: #ffee00; --accent-3: #00ffaa; --accent-glow: rgba(180, 255, 80, 0.30); --gradient: linear-gradient(135deg, #b4ff50 0%, #ffee00 50%, #00ffaa 100%); --gradient-2: linear-gradient(135deg, #b4ff50 0%, #00ffaa 100%); --gradient-text: linear-gradient(120deg, #b4ff50 0%, #ffee00 50%, #00ffaa 100%); --gradient-success: linear-gradient(135deg, #b4ff50 0%, #00ffaa 100%); --shadow-glow: 0 8px 32px rgba(180,255,80,0.25); --shadow-sm: 0 2px 8px rgba(0,0,0,0.6); --shadow-md: 0 8px 24px rgba(0,0,0,0.7); --shadow-lg: 0 24px 64px rgba(0,0,0,0.8); --radius-sm: 2px; --radius-md: 2px; --radius-lg: 2px; --radius-xl: 2px; } /* CRT: monospace font throughout */ [data-builder-theme="crt"] body, [data-builder-theme="crt"] .chat-input-form textarea, [data-builder-theme="crt"] .msg-bubble, [data-builder-theme="crt"] .chat-input-form button, [data-builder-theme="crt"] .download-btn, [data-builder-theme="crt"] .source-btn, [data-builder-theme="crt"] .goals-title, [data-builder-theme="crt"] .header-left h1 { font-family: 'VT323', monospace; letter-spacing: 0.04em; } [data-builder-theme="crt"] body { font-size: 1.25rem; } [data-builder-theme="crt"] .msg-bubble { font-size: 1.2rem; } [data-builder-theme="crt"] .header-left h1 { font-size: 1.9rem; } /* Scanline + phosphor overlay on the whole viewport */ [data-builder-theme="crt"] body::before { background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.18) 2px, rgba(0, 0, 0, 0.18) 4px ); width: 100%; height: 100%; top: 0; left: 0; transform: none; filter: none; opacity: 1; pointer-events: none; z-index: 99998; border-radius: 0; } /* Phosphor glow on text */ [data-builder-theme="crt"] .msg-bubble, [data-builder-theme="crt"] .msg-name, [data-builder-theme="crt"] .header-left h1 { text-shadow: 0 0 8px rgba(180,255,80,0.7), 0 0 2px rgba(180,255,80,0.9); } /* Boxy hard borders everywhere */ [data-builder-theme="crt"] .builder-header { background: #0a0e00; border-bottom: 2px solid rgba(180,255,80,0.4); } [data-builder-theme="crt"] .chat-panel { background: #0a0e00; border-right: 1px solid rgba(180,255,80,0.18); } [data-builder-theme="crt"] .chat-input-form { background: #0a0e00; border-top: 1px solid rgba(180,255,80,0.18); } [data-builder-theme="crt"] .preview-header { background: #0a0e00; border-bottom: 1px solid rgba(180,255,80,0.18); } [data-builder-theme="crt"] .msg-bubble { background: #0e1400; border: 1px solid rgba(180,255,80,0.2); border-radius: 0; } [data-builder-theme="crt"] .message.user .msg-bubble { background: rgba(180,255,80,0.06); border-color: rgba(180,255,80,0.35); border-radius: 0; } [data-builder-theme="crt"] .page-switcher { background: #0a0e00; border-bottom-color: rgba(180,255,80,0.18); } [data-builder-theme="crt"] .page-switcher-tab { color: rgba(180,255,80,0.5); } [data-builder-theme="crt"] .page-switcher-tab:hover { color: #b4ff50; background: rgba(180,255,80,0.05); } [data-builder-theme="crt"] .page-switcher-tab.active { color: #b4ff50; border-color: rgba(180,255,80,0.2); } [data-builder-theme="crt"] .page-switcher-add { border-color: rgba(180,255,80,0.2); color: rgba(180,255,80,0.4); } [data-builder-theme="crt"] .preview-container { background-color: #0b1000; background-image: radial-gradient(circle, rgba(180,255,80,0.04) 1px, transparent 1px); } [data-builder-theme="crt"] .download-btn, [data-builder-theme="crt"] .goals-continue, [data-builder-theme="crt"] .chat-input-form button:not(:disabled):not(.clear-chat-btn):not(.chat-attach-btn) { background: rgba(180,255,80,0.12); color: #b4ff50; border: 1px solid rgba(180,255,80,0.5); box-shadow: 0 0 12px rgba(180,255,80,0.2); border-radius: 0; font-family: 'VT323', monospace; } [data-builder-theme="crt"] .goal-card, [data-builder-theme="crt"] .mode-card, [data-builder-theme="crt"] .rp-tile, [data-builder-theme="crt"] .component-card { border-radius: 0; border-color: rgba(180,255,80,0.2); } [data-builder-theme="crt"] .phase-tracker { background: rgba(10,14,0,0.97); border-bottom-color: rgba(180,255,80,0.2); } [data-builder-theme="crt"] .sv-modal { background: #0a0e00; border: 1px solid rgba(180,255,80,0.3); border-radius: 0; } [data-builder-theme="crt"] .sv-modal-header { background: #0e1400; border-color: rgba(180,255,80,0.18); } [data-builder-theme="crt"] .sv-modal-title { color: #b4ff50; font-family: 'VT323', monospace; font-size: 1.2rem; } [data-builder-theme="crt"] .sv-file-tree { background: #0a0e00; border-color: rgba(180,255,80,0.14); } [data-builder-theme="crt"] .sv-file-item { color: rgba(180,255,80,0.55); font-family: 'VT323', monospace; } [data-builder-theme="crt"] .sv-file-item:hover { color: #b4ff50; background: rgba(180,255,80,0.06); } [data-builder-theme="crt"] .sv-file-item.is-active { background: rgba(180,255,80,0.12); color: #b4ff50; } [data-builder-theme="crt"] .sv-code-pane { background: #0b1000; } [data-builder-theme="crt"] .sv-code-toolbar { background: #0e1400; border-color: rgba(180,255,80,0.10); } [data-builder-theme="crt"] .sv-pre { background: #0b1000 !important; } [data-builder-theme="crt"] .rsl-toast { background-color: #0e1400; border-color: rgba(180,255,80,0.2); border-radius: 0; } [data-builder-theme="crt"] .rsl-toast-body { color: #b4ff50; background-color: #0e1400; } [data-builder-theme="crt"] .sitemap-sidebar { background: #0e1400; } [data-builder-theme="crt"] .preview-loader-text { font-family: 'VT323', monospace; font-size: 1.3rem; letter-spacing: 0.08em; } [data-builder-theme="crt"] body::before { z-index: 99998; } /* Flicker animation — subtle, fires every few seconds */ @keyframes crt-flicker { 0%,100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: 0.85; } 94% { opacity: 1; } 96% { opacity: 0.9; } 97% { opacity: 1; } } [data-builder-theme="crt"] .builder-wrapper { animation: crt-flicker 6s step-end infinite; } /* ── Luxury Executive ── black marble + brushed gold */ [data-builder-theme="luxury"] { --bg: #0e0e0e; --bg-soft: #141414; --bg-soft-2: #111111; --bg-card: #1a1a1a; --bg-input: rgba(201, 168, 76, 0.05); --border: rgba(201, 168, 76, 0.12); --border-strong: rgba(201, 168, 76, 0.25); --border-glow: rgba(201, 168, 76, 0.45); --text: #f0ece4; --text-muted: rgba(240, 236, 228, 0.58); --text-dim: rgba(240, 236, 228, 0.32); --accent: #c9a84c; --accent-2: #e8cc88; --accent-3: #a8855a; --accent-glow: rgba(201, 168, 76, 0.20); --gradient: linear-gradient(135deg, #c9a84c 0%, #e8cc88 50%, #a8855a 100%); --gradient-2: linear-gradient(135deg, #b8943a 0%, #e8cc88 100%); --gradient-text: linear-gradient(120deg, #f0ece4 0%, #e8cc88 50%, #c9a84c 100%); --gradient-success: linear-gradient(135deg, #5BE8C7 0%, #2EBFAA 100%); --shadow-glow: 0 8px 32px rgba(201,168,76,0.15); --shadow-sm: 0 2px 12px rgba(0,0,0,0.5); --shadow-md: 0 8px 32px rgba(0,0,0,0.6); --shadow-lg: 0 32px 80px rgba(0,0,0,0.75); --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; } /* Luxury: refined serif-ish feel, tighter spacing */ [data-builder-theme="luxury"] .header-left h1 { font-size: 1.2rem; letter-spacing: 0.12em; font-weight: 700; text-transform: uppercase; } [data-builder-theme="luxury"] .control-label { letter-spacing: 0.16em; } [data-builder-theme="luxury"] .builder-header { background: rgba(14,14,14,0.92); border-bottom: 1px solid rgba(201,168,76,0.18); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } [data-builder-theme="luxury"] .chat-panel { background: rgba(14,14,14,0.75); border-right: 1px solid rgba(201,168,76,0.10); } [data-builder-theme="luxury"] .chat-input-form { background: rgba(14,14,14,0.90); border-top: 1px solid rgba(201,168,76,0.12); } [data-builder-theme="luxury"] .preview-header { background: rgba(14,14,14,0.85); border-bottom: 1px solid rgba(201,168,76,0.12); } [data-builder-theme="luxury"] .msg-bubble { background: #1a1a1a; border: 1px solid rgba(201,168,76,0.12); } [data-builder-theme="luxury"] .message.user .msg-bubble { background: rgba(201,168,76,0.06); border-color: rgba(201,168,76,0.22); } [data-builder-theme="luxury"] .download-btn { background: linear-gradient(135deg, #b8943a 0%, #e8cc88 100%); color: #0e0e0e; font-weight: 700; letter-spacing: 0.08em; box-shadow: 0 4px 20px rgba(201,168,76,0.25); } [data-builder-theme="luxury"] .goals-continue, [data-builder-theme="luxury"] .chat-input-form button:not(:disabled):not(.clear-chat-btn):not(.chat-attach-btn) { background: linear-gradient(135deg, #b8943a 0%, #e8cc88 100%); color: #0e0e0e; font-weight: 700; } [data-builder-theme="luxury"] .page-switcher { background: #0e0e0e; border-bottom-color: rgba(201,168,76,0.12); } [data-builder-theme="luxury"] .page-switcher-tab { color: rgba(240,236,228,0.45); } [data-builder-theme="luxury"] .page-switcher-tab:hover { color: rgba(240,236,228,0.85); background: rgba(201,168,76,0.04); } [data-builder-theme="luxury"] .page-switcher-tab.active { color: #c9a84c; border-color: rgba(201,168,76,0.15); } [data-builder-theme="luxury"] .page-switcher-add { border-color: rgba(201,168,76,0.18); color: rgba(201,168,76,0.45); } [data-builder-theme="luxury"] .preview-container { background-color: #111; background-image: radial-gradient(circle, rgba(201,168,76,0.03) 1px, transparent 1px); } [data-builder-theme="luxury"] body::before { background: radial-gradient(ellipse, rgba(201,168,76,0.06) 0%, transparent 60%); opacity: 0.8; } [data-builder-theme="luxury"] .goal-card, [data-builder-theme="luxury"] .mode-card, [data-builder-theme="luxury"] .rp-tile, [data-builder-theme="luxury"] .component-card { border-color: rgba(201,168,76,0.12); } [data-builder-theme="luxury"] .goal-card:hover, [data-builder-theme="luxury"] .mode-card:hover, [data-builder-theme="luxury"] .component-card:hover { border-color: rgba(201,168,76,0.35); box-shadow: 0 4px 20px rgba(201,168,76,0.10); } [data-builder-theme="luxury"] .phase-tracker { background: rgba(14,14,14,0.97); border-bottom-color: rgba(201,168,76,0.15); } [data-builder-theme="luxury"] .sv-modal { background: #111; border-color: rgba(201,168,76,0.2); } [data-builder-theme="luxury"] .sv-modal-header { background: #191919; border-color: rgba(201,168,76,0.14); } [data-builder-theme="luxury"] .sv-modal-title { color: #c9a84c; letter-spacing: 0.08em; } [data-builder-theme="luxury"] .sv-file-tree { background: #0e0e0e; border-color: rgba(201,168,76,0.12); } [data-builder-theme="luxury"] .sv-file-item { color: rgba(240,236,228,0.5); } [data-builder-theme="luxury"] .sv-file-item:hover { color: #f0ece4; background: rgba(201,168,76,0.05); } [data-builder-theme="luxury"] .sv-file-item.is-active { background: rgba(201,168,76,0.10); color: #c9a84c; } [data-builder-theme="luxury"] .sv-code-pane { background: #111; } [data-builder-theme="luxury"] .sv-code-toolbar { background: #181818; border-color: rgba(201,168,76,0.08); } [data-builder-theme="luxury"] .sv-pre { background: #111 !important; } [data-builder-theme="luxury"] .rsl-toast { background-color: #1a1a1a; border-color: rgba(201,168,76,0.18); } [data-builder-theme="luxury"] .rsl-toast-body { color: #f0ece4; background-color: #1a1a1a; } [data-builder-theme="luxury"] .sitemap-sidebar { background: #141414; } [data-builder-theme="luxury"] .toggle-btn.active { background: rgba(201,168,76,0.15); box-shadow: 0 0 0 1px rgba(201,168,76,0.35); } /* ── Notepad ── warm tan paper, brown ink */ [data-builder-theme="notepad"] { --bg: #f5f0e8; --bg-soft: #ede7d9; --bg-soft-2: #e8e1d2; --bg-card: #faf7f2; --bg-input: rgba(101, 67, 33, 0.05); --border: rgba(101, 67, 33, 0.15); --border-strong: rgba(101, 67, 33, 0.28); --border-glow: rgba(101, 67, 33, 0.45); --text: #2c1a0e; --text-muted: rgba(44, 26, 14, 0.58); --text-dim: rgba(44, 26, 14, 0.35); --accent: #7b4f2e; --accent-2: #a0522d; --accent-3: #5c7a3e; --accent-glow: rgba(123, 79, 46, 0.20); --gradient: linear-gradient(135deg, #7b4f2e 0%, #a0522d 50%, #5c7a3e 100%); --gradient-2: linear-gradient(135deg, #7b4f2e 0%, #a0522d 100%); --gradient-text: linear-gradient(120deg, #2c1a0e 0%, #7b4f2e 60%, #a0522d 100%); --gradient-success: linear-gradient(135deg, #5c7a3e 0%, #4a6230 100%); --shadow-glow: 0 8px 32px rgba(123,79,46,0.15); --shadow-sm: 0 2px 8px rgba(44,26,14,0.10); --shadow-md: 0 8px 24px rgba(44,26,14,0.14); --shadow-lg: 0 24px 64px rgba(44,26,14,0.18); } /* Notepad: typewriter font for display, keep Inter for UI readability */ [data-builder-theme="notepad"] .header-left h1 { font-family: 'Special Elite', serif; font-size: 1.3rem; letter-spacing: 0.02em; } [data-builder-theme="notepad"] .goals-title { font-family: 'Special Elite', serif; } /* Ruled lines in the chat messages area */ [data-builder-theme="notepad"] .chat-messages { background-image: repeating-linear-gradient( transparent, transparent 27px, rgba(101, 67, 33, 0.10) 27px, rgba(101, 67, 33, 0.10) 28px ); background-attachment: local; } /* Left red margin line */ [data-builder-theme="notepad"] .chat-panel { background: rgba(245,240,232,0.8); border-right: 1px solid rgba(101,67,33,0.15); position: relative; } [data-builder-theme="notepad"] .builder-header { background: rgba(237,231,217,0.92); border-bottom: 2px solid rgba(101,67,33,0.18); } [data-builder-theme="notepad"] .chat-input-form { background: rgba(237,231,217,0.95); border-top: 1px solid rgba(101,67,33,0.15); } [data-builder-theme="notepad"] .preview-header { background: rgba(232,225,210,0.92); border-bottom: 1px solid rgba(101,67,33,0.15); } [data-builder-theme="notepad"] .msg-bubble { background: #faf7f2; border: 1px solid rgba(101,67,33,0.18); box-shadow: 1px 2px 6px rgba(44,26,14,0.07); } [data-builder-theme="notepad"] .message.user .msg-bubble { background: rgba(123,79,46,0.07); border-color: rgba(123,79,46,0.22); } [data-builder-theme="notepad"] .download-btn, [data-builder-theme="notepad"] .goals-continue, [data-builder-theme="notepad"] .chat-input-form button:not(:disabled):not(.clear-chat-btn):not(.chat-attach-btn) { background: linear-gradient(135deg, #7b4f2e 0%, #a0522d 100%); color: #faf7f2; box-shadow: 0 2px 8px rgba(123,79,46,0.25); } [data-builder-theme="notepad"] .page-switcher { background: #f5f0e8; border-bottom-color: rgba(101,67,33,0.15); } [data-builder-theme="notepad"] .page-switcher-tab { color: rgba(44,26,14,0.45); } [data-builder-theme="notepad"] .page-switcher-tab:hover { color: #2c1a0e; background: rgba(101,67,33,0.05); } [data-builder-theme="notepad"] .page-switcher-tab.active { color: #7b4f2e; border-color: rgba(101,67,33,0.18); } [data-builder-theme="notepad"] .page-switcher-add { border-color: rgba(101,67,33,0.20); color: rgba(101,67,33,0.45); } [data-builder-theme="notepad"] .preview-container { background-color: #e8e1d2; background-image: radial-gradient(circle, rgba(101,67,33,0.06) 1px, transparent 1px); } [data-builder-theme="notepad"] body::before { background: radial-gradient(ellipse, rgba(123,79,46,0.08) 0%, transparent 60%); opacity: 0.5; } [data-builder-theme="notepad"] .goal-card, [data-builder-theme="notepad"] .mode-card, [data-builder-theme="notepad"] .component-card { background: #faf7f2; border-color: rgba(101,67,33,0.15); } [data-builder-theme="notepad"] .goal-card:hover, [data-builder-theme="notepad"] .mode-card:hover, [data-builder-theme="notepad"] .component-card:hover { border-color: rgba(123,79,46,0.40); box-shadow: 1px 3px 12px rgba(44,26,14,0.10); } [data-builder-theme="notepad"] .rp-tile { background: rgba(101,67,33,0.05); border-color: rgba(101,67,33,0.15); } [data-builder-theme="notepad"] .rp-tile:hover { background: rgba(101,67,33,0.09); border-color: rgba(101,67,33,0.25); } [data-builder-theme="notepad"] .rp-thumb { background: rgba(101,67,33,0.10); color: rgba(44,26,14,0.30); } [data-builder-theme="notepad"] .rp-open-btn { background: rgba(123,79,46,0.10); border-color: rgba(123,79,46,0.35); color: #7b4f2e; } [data-builder-theme="notepad"] .toggle-btn:hover { background: rgba(101,67,33,0.07); } [data-builder-theme="notepad"] .toggle-btn.active { background: rgba(123,79,46,0.15); box-shadow: 0 0 0 1px rgba(123,79,46,0.35); } [data-builder-theme="notepad"] .chat-attach-btn { background: rgba(101,67,33,0.07) !important; color: rgba(44,26,14,0.55) !important; border-color: rgba(101,67,33,0.15) !important; } [data-builder-theme="notepad"] .phase-tracker { background: rgba(237,231,217,0.97); border-bottom-color: rgba(101,67,33,0.18); } [data-builder-theme="notepad"] .phase-tracker-label { color: rgba(44,26,14,0.38); } [data-builder-theme="notepad"] .phase-step { color: rgba(44,26,14,0.40); } [data-builder-theme="notepad"] .phase-step + .phase-step::before { background: rgba(101,67,33,0.15); } [data-builder-theme="notepad"] .sitemap-sidebar { background: #ede7d9; border-color: rgba(101,67,33,0.15); } [data-builder-theme="notepad"] .sv-modal { background: #faf7f2; border-color: rgba(101,67,33,0.20); } [data-builder-theme="notepad"] .sv-modal-header { background: #ede7d9; border-color: rgba(101,67,33,0.15); } [data-builder-theme="notepad"] .sv-modal-title { color: #2c1a0e; } [data-builder-theme="notepad"] .sv-modal-desc { color: rgba(44,26,14,0.50); } [data-builder-theme="notepad"] .sv-close-btn { color: rgba(44,26,14,0.40); } [data-builder-theme="notepad"] .sv-close-btn:hover { color: #2c1a0e; background: rgba(101,67,33,0.07); } [data-builder-theme="notepad"] .sv-file-tree { background: #f5f0e8; border-color: rgba(101,67,33,0.12); } [data-builder-theme="notepad"] .sv-file-item { color: rgba(44,26,14,0.55); } [data-builder-theme="notepad"] .sv-file-item:hover { color: #2c1a0e; background: rgba(101,67,33,0.06); } [data-builder-theme="notepad"] .sv-file-item.is-active { background: rgba(123,79,46,0.12); color: #7b4f2e; } [data-builder-theme="notepad"] .sv-code-pane { background: #faf7f2; } [data-builder-theme="notepad"] .sv-code-toolbar { background: #ede7d9; border-color: rgba(101,67,33,0.10); } [data-builder-theme="notepad"] .sv-active-filename { color: rgba(44,26,14,0.50); } [data-builder-theme="notepad"] .sv-pre { background: #faf7f2 !important; color: #2c1a0e; } [data-builder-theme="notepad"] .rsl-toast { background-color: #faf7f2; border-color: rgba(101,67,33,0.20); } [data-builder-theme="notepad"] .rsl-toast-body { color: #2c1a0e; background-color: #faf7f2; } [data-builder-theme="notepad"] .recent-projects-toggle:hover { background: rgba(101,67,33,0.06); } /* ── Darcula (PhpStorm) ── charcoal + warm orange keyword accent */ [data-builder-theme="darcula"] { --bg: #2b2b2b; --bg-soft: #313335; --bg-soft-2: #2d2f31; --bg-card: #3c3f41; --bg-input: rgba(255, 255, 255, 0.04); --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --border-glow: rgba(204, 120, 50, 0.5); --text: #a9b7c6; --text-muted: rgba(169, 183, 198, 0.65); --text-dim: rgba(169, 183, 198, 0.38); --accent: #cc7832; --accent-2: #6897bb; --accent-3: #6a8759; --accent-glow: rgba(204, 120, 50, 0.28); --gradient: linear-gradient(135deg, #cc7832 0%, #6897bb 50%, #6a8759 100%); --gradient-2: linear-gradient(135deg, #cc7832 0%, #e8a96e 100%); --gradient-text: linear-gradient(120deg, #a9b7c6 0%, #cc7832 50%, #e8a96e 100%); --gradient-success: linear-gradient(135deg, #6a8759 0%, #4e6e3a 100%); --shadow-glow: 0 8px 32px rgba(204,120,50,0.22); --shadow-sm: 0 2px 8px rgba(0,0,0,0.35); --shadow-md: 0 8px 24px rgba(0,0,0,0.45); --shadow-lg: 0 24px 64px rgba(0,0,0,0.6); } [data-builder-theme="darcula"] .builder-header { background: rgba(43,43,43,0.92); border-bottom: 1px solid rgba(204,120,50,0.20); } [data-builder-theme="darcula"] .chat-panel { background: rgba(43,43,43,0.78); border-right: 1px solid rgba(255,255,255,0.07); } [data-builder-theme="darcula"] .chat-input-form { background: rgba(43,43,43,0.92); border-top: 1px solid rgba(255,255,255,0.07); } [data-builder-theme="darcula"] .preview-header { background: rgba(49,51,53,0.88); border-bottom: 1px solid rgba(255,255,255,0.07); } [data-builder-theme="darcula"] .msg-bubble { background: #3c3f41; border-color: rgba(255,255,255,0.09); } [data-builder-theme="darcula"] .message.user .msg-bubble { background: rgba(204,120,50,0.08); border-color: rgba(204,120,50,0.25); } [data-builder-theme="darcula"] .download-btn, [data-builder-theme="darcula"] .goals-continue, [data-builder-theme="darcula"] .chat-input-form button:not(:disabled):not(.clear-chat-btn):not(.chat-attach-btn) { background: linear-gradient(135deg, #cc7832 0%, #e8a96e 100%); color: #2b2b2b; font-weight: 700; } [data-builder-theme="darcula"] .page-switcher { background: #2b2b2b; border-bottom-color: rgba(255,255,255,0.08); } [data-builder-theme="darcula"] .page-switcher-tab { color: rgba(169,183,198,0.5); } [data-builder-theme="darcula"] .page-switcher-tab:hover { color: #a9b7c6; background: rgba(255,255,255,0.04); } [data-builder-theme="darcula"] .page-switcher-tab.active { color: #cc7832; border-color: rgba(204,120,50,0.22); } [data-builder-theme="darcula"] .page-switcher-add { border-color: rgba(255,255,255,0.14); color: rgba(169,183,198,0.4); } [data-builder-theme="darcula"] .preview-container { background-image: radial-gradient(circle, rgba(204,120,50,0.04) 1px, transparent 1px); } [data-builder-theme="darcula"] body::before { background: radial-gradient(ellipse, rgba(104,151,187,0.10) 0%, transparent 60%); } [data-builder-theme="darcula"] .toggle-btn.active { background: rgba(204,120,50,0.15); box-shadow: 0 0 0 1px rgba(204,120,50,0.38); } [data-builder-theme="darcula"] .phase-tracker { background: rgba(43,43,43,0.97); border-bottom-color: rgba(204,120,50,0.18); } [data-builder-theme="darcula"] .sv-modal { background: #2b2b2b; border-color: rgba(204,120,50,0.22); } [data-builder-theme="darcula"] .sv-modal-header { background: #313335; border-color: rgba(255,255,255,0.08); } [data-builder-theme="darcula"] .sv-modal-title { color: #cc7832; } [data-builder-theme="darcula"] .sv-file-tree { background: #2b2b2b; border-color: rgba(255,255,255,0.08); } [data-builder-theme="darcula"] .sv-file-item { color: rgba(169,183,198,0.60); } [data-builder-theme="darcula"] .sv-file-item:hover { color: #a9b7c6; background: rgba(255,255,255,0.04); } [data-builder-theme="darcula"] .sv-file-item.is-active { background: rgba(104,151,187,0.14); color: #6897bb; } [data-builder-theme="darcula"] .sv-code-pane { background: #2b2b2b; } [data-builder-theme="darcula"] .sv-code-toolbar { background: #313335; border-color: rgba(255,255,255,0.07); } [data-builder-theme="darcula"] .sv-active-filename { color: rgba(169,183,198,0.50); } [data-builder-theme="darcula"] .sv-pre { background: #2b2b2b !important; } [data-builder-theme="darcula"] .rsl-toast { background-color: #3c3f41; border-color: rgba(204,120,50,0.20); } [data-builder-theme="darcula"] .rsl-toast-body { color: #a9b7c6; background-color: #3c3f41; } [data-builder-theme="darcula"] .sitemap-sidebar { background: var(--bg-soft); } /* ── One Dark (VS Code / Atom) ── blue-grey + electric cyan accent */ [data-builder-theme="one-dark"] { --bg: #282c34; --bg-soft: #21252b; --bg-soft-2: #1d2026; --bg-card: #2c313c; --bg-input: rgba(255, 255, 255, 0.04); --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.13); --border-glow: rgba(97, 175, 239, 0.45); --text: #abb2bf; --text-muted: rgba(171, 178, 191, 0.62); --text-dim: rgba(171, 178, 191, 0.36); --accent: #61afef; --accent-2: #c678dd; --accent-3: #98c379; --accent-glow: rgba(97, 175, 239, 0.25); --gradient: linear-gradient(135deg, #61afef 0%, #c678dd 50%, #98c379 100%); --gradient-2: linear-gradient(135deg, #61afef 0%, #c678dd 100%); --gradient-text: linear-gradient(120deg, #abb2bf 0%, #61afef 45%, #c678dd 85%); --gradient-success: linear-gradient(135deg, #98c379 0%, #6a9e50 100%); --shadow-glow: 0 8px 32px rgba(97,175,239,0.20); --shadow-sm: 0 2px 8px rgba(0,0,0,0.35); --shadow-md: 0 8px 24px rgba(0,0,0,0.45); --shadow-lg: 0 24px 64px rgba(0,0,0,0.6); } [data-builder-theme="one-dark"] .builder-header { background: rgba(33,37,43,0.92); border-bottom: 1px solid rgba(97,175,239,0.14); } [data-builder-theme="one-dark"] .chat-panel { background: rgba(40,44,52,0.78); border-right: 1px solid rgba(255,255,255,0.06); } [data-builder-theme="one-dark"] .chat-input-form { background: rgba(33,37,43,0.92); border-top: 1px solid rgba(255,255,255,0.06); } [data-builder-theme="one-dark"] .preview-header { background: rgba(29,32,38,0.88); border-bottom: 1px solid rgba(255,255,255,0.06); } [data-builder-theme="one-dark"] .msg-bubble { background: #2c313c; border-color: rgba(255,255,255,0.08); } [data-builder-theme="one-dark"] .message.user .msg-bubble { background: rgba(97,175,239,0.07); border-color: rgba(97,175,239,0.22); } [data-builder-theme="one-dark"] .download-btn, [data-builder-theme="one-dark"] .goals-continue, [data-builder-theme="one-dark"] .chat-input-form button:not(:disabled):not(.clear-chat-btn):not(.chat-attach-btn) { background: linear-gradient(135deg, #61afef 0%, #c678dd 100%); color: #1d2026; font-weight: 700; } [data-builder-theme="one-dark"] .page-switcher { background: #21252b; border-bottom-color: rgba(255,255,255,0.07); } [data-builder-theme="one-dark"] .page-switcher-tab { color: rgba(171,178,191,0.48); } [data-builder-theme="one-dark"] .page-switcher-tab:hover { color: #abb2bf; background: rgba(255,255,255,0.04); } [data-builder-theme="one-dark"] .page-switcher-tab.active { color: #61afef; border-color: rgba(97,175,239,0.20); } [data-builder-theme="one-dark"] .page-switcher-add { border-color: rgba(255,255,255,0.12); color: rgba(171,178,191,0.38); } [data-builder-theme="one-dark"] .preview-container { background-image: radial-gradient(circle, rgba(97,175,239,0.04) 1px, transparent 1px); } [data-builder-theme="one-dark"] body::before { background: radial-gradient(ellipse, rgba(198,120,221,0.09) 0%, transparent 60%); } [data-builder-theme="one-dark"] .toggle-btn.active { background: rgba(97,175,239,0.14); box-shadow: 0 0 0 1px rgba(97,175,239,0.35); } [data-builder-theme="one-dark"] .phase-tracker { background: rgba(33,37,43,0.97); border-bottom-color: rgba(97,175,239,0.16); } [data-builder-theme="one-dark"] .sv-modal { background: #21252b; border-color: rgba(97,175,239,0.20); } [data-builder-theme="one-dark"] .sv-modal-header { background: #282c34; border-color: rgba(255,255,255,0.07); } [data-builder-theme="one-dark"] .sv-modal-title { color: #61afef; } [data-builder-theme="one-dark"] .sv-file-tree { background: #21252b; border-color: rgba(255,255,255,0.07); } [data-builder-theme="one-dark"] .sv-file-item { color: rgba(171,178,191,0.58); } [data-builder-theme="one-dark"] .sv-file-item:hover { color: #abb2bf; background: rgba(255,255,255,0.04); } [data-builder-theme="one-dark"] .sv-file-item.is-active { background: rgba(198,120,221,0.12); color: #c678dd; } [data-builder-theme="one-dark"] .sv-code-pane { background: #282c34; } [data-builder-theme="one-dark"] .sv-code-toolbar { background: #21252b; border-color: rgba(255,255,255,0.06); } [data-builder-theme="one-dark"] .sv-active-filename { color: rgba(171,178,191,0.48); } [data-builder-theme="one-dark"] .sv-pre { background: #282c34 !important; } [data-builder-theme="one-dark"] .rsl-toast { background-color: #2c313c; border-color: rgba(97,175,239,0.18); } [data-builder-theme="one-dark"] .rsl-toast-body { color: #abb2bf; background-color: #2c313c; } [data-builder-theme="one-dark"] .sitemap-sidebar { background: var(--bg-soft); } /* ── Solarized Dark ── teal base + warm yellow accent */ [data-builder-theme="solarized"] { --bg: #002b36; --bg-soft: #073642; --bg-soft-2: #00303e; --bg-card: #073e4d; --bg-input: rgba(131, 148, 150, 0.07); --border: rgba(131, 148, 150, 0.14); --border-strong: rgba(131, 148, 150, 0.26); --border-glow: rgba(181, 137, 0, 0.5); --text: #839496; --text-muted: rgba(131, 148, 150, 0.72); --text-dim: rgba(131, 148, 150, 0.42); --accent: #b58900; --accent-2: #2aa198; --accent-3: #268bd2; --accent-glow: rgba(181, 137, 0, 0.25); --gradient: linear-gradient(135deg, #b58900 0%, #2aa198 50%, #268bd2 100%); --gradient-2: linear-gradient(135deg, #b58900 0%, #cb9a00 100%); --gradient-text: linear-gradient(120deg, #839496 0%, #b58900 45%, #2aa198 85%); --gradient-success: linear-gradient(135deg, #2aa198 0%, #1a7a72 100%); --shadow-glow: 0 8px 32px rgba(181,137,0,0.20); --shadow-sm: 0 2px 8px rgba(0,0,0,0.40); --shadow-md: 0 8px 24px rgba(0,0,0,0.52); --shadow-lg: 0 24px 64px rgba(0,0,0,0.65); } [data-builder-theme="solarized"] .builder-header { background: rgba(7,54,66,0.94); border-bottom: 1px solid rgba(181,137,0,0.18); } [data-builder-theme="solarized"] .chat-panel { background: rgba(0,43,54,0.80); border-right: 1px solid rgba(131,148,150,0.12); } [data-builder-theme="solarized"] .chat-input-form { background: rgba(7,54,66,0.94); border-top: 1px solid rgba(131,148,150,0.12); } [data-builder-theme="solarized"] .preview-header { background: rgba(0,48,62,0.90); border-bottom: 1px solid rgba(131,148,150,0.12); } [data-builder-theme="solarized"] .msg-bubble { background: #073642; border-color: rgba(131,148,150,0.16); } [data-builder-theme="solarized"] .message.user .msg-bubble { background: rgba(181,137,0,0.08); border-color: rgba(181,137,0,0.28); } [data-builder-theme="solarized"] .download-btn, [data-builder-theme="solarized"] .goals-continue, [data-builder-theme="solarized"] .chat-input-form button:not(:disabled):not(.clear-chat-btn):not(.chat-attach-btn) { background: linear-gradient(135deg, #b58900 0%, #cb9a00 100%); color: #002b36; font-weight: 700; } [data-builder-theme="solarized"] .page-switcher { background: #002b36; border-bottom-color: rgba(131,148,150,0.14); } [data-builder-theme="solarized"] .page-switcher-tab { color: rgba(131,148,150,0.52); } [data-builder-theme="solarized"] .page-switcher-tab:hover { color: #839496; background: rgba(131,148,150,0.05); } [data-builder-theme="solarized"] .page-switcher-tab.active { color: #b58900; border-color: rgba(181,137,0,0.22); } [data-builder-theme="solarized"] .page-switcher-add { border-color: rgba(131,148,150,0.20); color: rgba(131,148,150,0.40); } [data-builder-theme="solarized"] .preview-container { background-image: radial-gradient(circle, rgba(42,161,152,0.05) 1px, transparent 1px); } [data-builder-theme="solarized"] body::before { background: radial-gradient(ellipse, rgba(38,139,210,0.09) 0%, transparent 60%); } [data-builder-theme="solarized"] .toggle-btn.active { background: rgba(181,137,0,0.15); box-shadow: 0 0 0 1px rgba(181,137,0,0.40); } [data-builder-theme="solarized"] .phase-tracker { background: rgba(7,54,66,0.97); border-bottom-color: rgba(181,137,0,0.18); } [data-builder-theme="solarized"] .sv-modal { background: #002b36; border-color: rgba(181,137,0,0.22); } [data-builder-theme="solarized"] .sv-modal-header { background: #073642; border-color: rgba(131,148,150,0.12); } [data-builder-theme="solarized"] .sv-modal-title { color: #b58900; } [data-builder-theme="solarized"] .sv-file-tree { background: #002b36; border-color: rgba(131,148,150,0.12); } [data-builder-theme="solarized"] .sv-file-item { color: rgba(131,148,150,0.62); } [data-builder-theme="solarized"] .sv-file-item:hover { color: #839496; background: rgba(131,148,150,0.06); } [data-builder-theme="solarized"] .sv-file-item.is-active { background: rgba(42,161,152,0.14); color: #2aa198; } [data-builder-theme="solarized"] .sv-code-pane { background: #002b36; } [data-builder-theme="solarized"] .sv-code-toolbar { background: #073642; border-color: rgba(131,148,150,0.10); } [data-builder-theme="solarized"] .sv-active-filename { color: rgba(131,148,150,0.50); } [data-builder-theme="solarized"] .sv-pre { background: #002b36 !important; } [data-builder-theme="solarized"] .rsl-toast { background-color: #073642; border-color: rgba(181,137,0,0.20); } [data-builder-theme="solarized"] .rsl-toast-body { color: #839496; background-color: #073642; } [data-builder-theme="solarized"] .sitemap-sidebar { background: var(--bg-soft); } /* ── Sugarplum Pop ── glossy pink boutique theme */ [data-builder-theme="sugarplum-pop"] { --bg: #1b0715; --bg-soft: #2a0f22; --bg-soft-2: #24101f; --bg-card: #35162b; --bg-input: rgba(255, 214, 232, 0.07); --border: rgba(255, 214, 232, 0.12); --border-strong: rgba(255, 214, 232, 0.24); --border-glow: rgba(255, 91, 168, 0.55); --text: #fff4fa; --text-muted: rgba(255, 244, 250, 0.68); --text-dim: rgba(255, 244, 250, 0.42); --accent: #ff5ba8; --accent-2: #ffc1dc; --accent-3: #bba7ff; --accent-glow: rgba(255, 91, 168, 0.34); --gradient: linear-gradient(135deg, #ff5ba8 0%, #ffc1dc 45%, #bba7ff 100%); --gradient-2: linear-gradient(135deg, #ff4fa3 0%, #ffb6d5 100%); --gradient-text: linear-gradient(120deg, #fff4fa 0%, #ffc1dc 38%, #ff5ba8 72%, #bba7ff 100%); --gradient-success: linear-gradient(135deg, #8ff7d0 0%, #5bd7b3 100%); --shadow-glow: 0 10px 36px rgba(255, 91, 168, 0.28); --shadow-sm: 0 2px 10px rgba(27, 7, 21, 0.36); --shadow-md: 0 10px 30px rgba(27, 7, 21, 0.48); --shadow-lg: 0 28px 72px rgba(27, 7, 21, 0.68); --radius-sm: 12px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 28px; } /* Main chrome */ [data-builder-theme="sugarplum-pop"] .builder-header { background: linear-gradient(180deg, rgba(42,15,34,0.96), rgba(27,7,21,0.90)); border-bottom: 1px solid rgba(255,193,220,0.20); box-shadow: 0 8px 28px rgba(255,91,168,0.10); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } [data-builder-theme="sugarplum-pop"] .header-left h1 { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.02em; } [data-builder-theme="sugarplum-pop"] .chat-panel { background: radial-gradient(circle at 20% 0%, rgba(255,91,168,0.12), transparent 34%), linear-gradient(180deg, rgba(42,15,34,0.84), rgba(27,7,21,0.76)); border-right: 1px solid rgba(255,193,220,0.13); } [data-builder-theme="sugarplum-pop"] .chat-input-form { background: rgba(42,15,34,0.94); border-top: 1px solid rgba(255,193,220,0.16); box-shadow: 0 -12px 34px rgba(255,91,168,0.08); } [data-builder-theme="sugarplum-pop"] .preview-header { background: rgba(42,15,34,0.88); border-bottom: 1px solid rgba(255,193,220,0.13); } /* Chat messages */ [data-builder-theme="sugarplum-pop"] .msg-bubble { background: rgba(53,22,43,0.92); border: 1px solid rgba(255,193,220,0.14); box-shadow: 0 8px 24px rgba(27,7,21,0.28); } [data-builder-theme="sugarplum-pop"] .message.user .msg-bubble { background: linear-gradient(135deg, rgba(255,91,168,0.22), rgba(255,193,220,0.10)); border-color: rgba(255,91,168,0.34); box-shadow: 0 8px 28px rgba(255,91,168,0.14); } [data-builder-theme="sugarplum-pop"] .msg-avatar.ai { background: rgba(255,193,220,0.12); color: #ffc1dc; border: 1px solid rgba(255,193,220,0.22); } [data-builder-theme="sugarplum-pop"] .msg-avatar.user { background: var(--gradient-2); color: #1b0715; } /* Primary buttons */ [data-builder-theme="sugarplum-pop"] .download-btn, [data-builder-theme="sugarplum-pop"] .goals-continue, [data-builder-theme="sugarplum-pop"] .chat-input-form button:not(:disabled):not(.clear-chat-btn):not(.chat-attach-btn) { background: var(--gradient-2); color: #1b0715; font-weight: 800; box-shadow: 0 8px 28px rgba(255,91,168,0.30); border: 1px solid rgba(255,244,250,0.28); } [data-builder-theme="sugarplum-pop"] .download-btn:hover, [data-builder-theme="sugarplum-pop"] .goals-continue:hover, [data-builder-theme="sugarplum-pop"] .chat-input-form button:not(:disabled):not(.clear-chat-btn):not(.chat-attach-btn):hover { filter: brightness(1.08) saturate(1.08); box-shadow: 0 10px 36px rgba(255,91,168,0.42); } /* Inputs */ [data-builder-theme="sugarplum-pop"] .chat-input-form textarea, [data-builder-theme="sugarplum-pop"] input, [data-builder-theme="sugarplum-pop"] textarea, [data-builder-theme="sugarplum-pop"] select { background: rgba(255,244,250,0.06); border-color: rgba(255,193,220,0.15); color: var(--text); } [data-builder-theme="sugarplum-pop"] .chat-input-form textarea:focus, [data-builder-theme="sugarplum-pop"] input:focus, [data-builder-theme="sugarplum-pop"] textarea:focus, [data-builder-theme="sugarplum-pop"] select:focus { border-color: rgba(255,91,168,0.55); box-shadow: 0 0 0 3px rgba(255,91,168,0.16); } /* Page switcher */ [data-builder-theme="sugarplum-pop"] .page-switcher { background: #1b0715; border-bottom-color: rgba(255,193,220,0.14); } [data-builder-theme="sugarplum-pop"] .page-switcher-tab { color: rgba(255,244,250,0.50); } [data-builder-theme="sugarplum-pop"] .page-switcher-tab:hover { color: #fff4fa; background: rgba(255,193,220,0.07); } [data-builder-theme="sugarplum-pop"] .page-switcher-tab.active { color: #ffc1dc; background: rgba(255,91,168,0.12); border-color: rgba(255,91,168,0.24); border-bottom-color: rgba(255,91,168,0.12); } [data-builder-theme="sugarplum-pop"] .page-switcher-add { border-color: rgba(255,193,220,0.20); color: rgba(255,193,220,0.55); } [data-builder-theme="sugarplum-pop"] .page-switcher-add:hover { border-color: rgba(255,91,168,0.45); color: #ff8fc4; background: rgba(255,91,168,0.10); } /* Preview area */ [data-builder-theme="sugarplum-pop"] .preview-container { background-color: #24101f; background-image: radial-gradient(circle at 20% 20%, rgba(255,91,168,0.10), transparent 28%), radial-gradient(circle at 80% 10%, rgba(187,167,255,0.08), transparent 30%), radial-gradient(circle, rgba(255,193,220,0.045) 1px, transparent 1px); background-size: auto, auto, 24px 24px; } [data-builder-theme="sugarplum-pop"] body::before { background: radial-gradient(ellipse at 20% 0%, rgba(255,91,168,0.16), transparent 58%), radial-gradient(ellipse at 80% 20%, rgba(187,167,255,0.10), transparent 60%); opacity: 1; } /* Cards / mode panels */ [data-builder-theme="sugarplum-pop"] .goal-card, [data-builder-theme="sugarplum-pop"] .mode-card, [data-builder-theme="sugarplum-pop"] .component-card, [data-builder-theme="sugarplum-pop"] .rp-tile { background: rgba(53,22,43,0.82); border-color: rgba(255,193,220,0.14); box-shadow: 0 6px 22px rgba(27,7,21,0.24); } [data-builder-theme="sugarplum-pop"] .goal-card:hover, [data-builder-theme="sugarplum-pop"] .mode-card:hover, [data-builder-theme="sugarplum-pop"] .component-card:hover, [data-builder-theme="sugarplum-pop"] .rp-tile:hover { background: rgba(70,27,56,0.90); border-color: rgba(255,91,168,0.36); box-shadow: 0 10px 34px rgba(255,91,168,0.16); transform: translateY(-1px); } [data-builder-theme="sugarplum-pop"] .rp-thumb { background: rgba(255,193,220,0.12); color: rgba(255,244,250,0.45); } [data-builder-theme="sugarplum-pop"] .rp-open-btn { background: rgba(255,91,168,0.14); border-color: rgba(255,91,168,0.36); color: #ffc1dc; } /* Toggle buttons */ [data-builder-theme="sugarplum-pop"] .toggle-btn:hover { background: rgba(255,193,220,0.08); } [data-builder-theme="sugarplum-pop"] .toggle-btn.active { background: rgba(255,91,168,0.16); box-shadow: 0 0 0 1px rgba(255,91,168,0.42); color: #ffc1dc; } [data-builder-theme="sugarplum-pop"] .chat-attach-btn { background: rgba(255,193,220,0.08) !important; color: rgba(255,244,250,0.68) !important; border-color: rgba(255,193,220,0.16) !important; } [data-builder-theme="sugarplum-pop"] .chat-attach-btn:hover { background: rgba(255,91,168,0.14) !important; color: #ffc1dc !important; border-color: rgba(255,91,168,0.36) !important; } /* Phase tracker */ [data-builder-theme="sugarplum-pop"] .phase-tracker { background: rgba(42,15,34,0.97); border-bottom-color: rgba(255,91,168,0.20); box-shadow: 0 8px 26px rgba(255,91,168,0.08); } [data-builder-theme="sugarplum-pop"] .phase-tracker-label { color: rgba(255,244,250,0.42); } [data-builder-theme="sugarplum-pop"] .phase-step { color: rgba(255,244,250,0.46); } [data-builder-theme="sugarplum-pop"] .phase-step.active { color: #ffc1dc; } [data-builder-theme="sugarplum-pop"] .phase-step.done { color: #8ff7d0; } [data-builder-theme="sugarplum-pop"] .phase-step + .phase-step::before { background: rgba(255,193,220,0.14); } [data-builder-theme="sugarplum-pop"] .phase-step .phase-step-icon { border-color: rgba(255,193,220,0.24); } [data-builder-theme="sugarplum-pop"] .phase-tracker-dismiss { color: rgba(255,244,250,0.35); } [data-builder-theme="sugarplum-pop"] .phase-tracker-dismiss:hover { color: #ffc1dc; } /* Source viewer / modal */ [data-builder-theme="sugarplum-pop"] .sv-modal { background: radial-gradient(circle at top left, rgba(255,91,168,0.10), transparent 34%), #24101f; border-color: rgba(255,91,168,0.24); box-shadow: 0 30px 90px rgba(27,7,21,0.78); } [data-builder-theme="sugarplum-pop"] .sv-modal-header { background: rgba(42,15,34,0.96); border-color: rgba(255,193,220,0.13); } [data-builder-theme="sugarplum-pop"] .sv-modal-title { color: #ffc1dc; } [data-builder-theme="sugarplum-pop"] .sv-modal-desc { color: rgba(255,244,250,0.52); } [data-builder-theme="sugarplum-pop"] .sv-close-btn { color: rgba(255,244,250,0.42); } [data-builder-theme="sugarplum-pop"] .sv-close-btn:hover { color: #fff4fa; background: rgba(255,193,220,0.08); } [data-builder-theme="sugarplum-pop"] .sv-file-tree { background: #1b0715; border-color: rgba(255,193,220,0.12); } [data-builder-theme="sugarplum-pop"] .sv-file-item { color: rgba(255,244,250,0.58); } [data-builder-theme="sugarplum-pop"] .sv-file-item:hover { color: #fff4fa; background: rgba(255,193,220,0.07); } [data-builder-theme="sugarplum-pop"] .sv-file-item.is-active { background: rgba(255,91,168,0.14); color: #ffc1dc; } [data-builder-theme="sugarplum-pop"] .sv-code-pane { background: #1b0715; } [data-builder-theme="sugarplum-pop"] .sv-code-toolbar { background: #2a0f22; border-color: rgba(255,193,220,0.10); } [data-builder-theme="sugarplum-pop"] .sv-active-filename { color: rgba(255,244,250,0.52); } [data-builder-theme="sugarplum-pop"] .sv-pre { background: #1b0715 !important; color: #fff4fa; } /* Toasts */ [data-builder-theme="sugarplum-pop"] .rsl-toast { background-color: #35162b; border-color: rgba(255,91,168,0.24); box-shadow: 0 10px 34px rgba(255,91,168,0.18); } [data-builder-theme="sugarplum-pop"] .rsl-toast-body { color: #fff4fa; background-color: #35162b; } /* Sitemap / sidebars */ [data-builder-theme="sugarplum-pop"] .sitemap-sidebar { background: radial-gradient(circle at top, rgba(255,91,168,0.08), transparent 35%), var(--bg-soft); border-color: rgba(255,193,220,0.12); } [data-builder-theme="sugarplum-pop"] .recent-projects-toggle:hover { background: rgba(255,193,220,0.08); } /* Loader */ [data-builder-theme="sugarplum-pop"] .preview-loader-text, [data-builder-theme="sugarplum-pop"] .preview-loader-phase { color: #ffc1dc; text-shadow: 0 0 18px rgba(255,91,168,0.28); } /* Small decorative sparkle layer */ [data-builder-theme="sugarplum-pop"] .builder-wrapper::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle, rgba(255,244,250,0.28) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(255,193,220,0.20) 0 1px, transparent 1.5px); background-size: 80px 80px, 120px 120px; background-position: 12px 18px, 60px 40px; opacity: 0.18; mask-image: linear-gradient(to bottom, black, transparent 70%); } /* ── Event Horizon ── cinematic deep-space command interface */ [data-builder-theme="event-horizon"] { --bg: #050816; --bg-soft: #0b1023; --bg-soft-2: #09101f; --bg-card: #11182d; --bg-input: rgba(68, 215, 255, 0.055); --border: rgba(150, 220, 255, 0.10); --border-strong: rgba(150, 220, 255, 0.22); --border-glow: rgba(68, 215, 255, 0.55); --text: #eaf7ff; --text-muted: rgba(234, 247, 255, 0.66); --text-dim: rgba(234, 247, 255, 0.38); --accent: #44d7ff; --accent-2: #7b61ff; --accent-3: #78ffd6; --accent-glow: rgba(68, 215, 255, 0.30); --gradient: linear-gradient(135deg, #44d7ff 0%, #7b61ff 52%, #78ffd6 100%); --gradient-2: linear-gradient(135deg, #44d7ff 0%, #7b61ff 100%); --gradient-text: linear-gradient(120deg, #ffffff 0%, #44d7ff 42%, #7b61ff 78%, #78ffd6 100%); --gradient-success: linear-gradient(135deg, #78ffd6 0%, #33d6ff 100%); --shadow-glow: 0 10px 38px rgba(68, 215, 255, 0.24); --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.38); --shadow-md: 0 10px 32px rgba(0, 0, 0, 0.50); --shadow-lg: 0 30px 84px rgba(0, 0, 0, 0.72); --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 26px; } /* Cinematic space atmosphere */ [data-builder-theme="event-horizon"] body::before { background: radial-gradient(ellipse at 18% 8%, rgba(68,215,255,0.14), transparent 48%), radial-gradient(ellipse at 85% 20%, rgba(123,97,255,0.16), transparent 52%), radial-gradient(ellipse at 55% 90%, rgba(120,255,214,0.08), transparent 56%); opacity: 1; } /* Slow elegant energy pulse */ @keyframes horizonPulse { 0%, 100% { box-shadow: 0 0 0 rgba(68,215,255,0), 0 8px 28px rgba(68,215,255,0.18); } 50% { box-shadow: 0 0 22px rgba(68,215,255,0.28), 0 10px 38px rgba(123,97,255,0.24); } } /* Main chrome */ [data-builder-theme="event-horizon"] .builder-header { background: linear-gradient(180deg, rgba(11,16,35,0.96), rgba(5,8,22,0.88)); border-bottom: 1px solid rgba(68,215,255,0.20); box-shadow: 0 10px 34px rgba(68,215,255,0.08); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); } [data-builder-theme="event-horizon"] .header-left h1 { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: 0.02em; text-shadow: 0 0 24px rgba(68,215,255,0.18); } [data-builder-theme="event-horizon"] .chat-panel { background: radial-gradient(circle at 20% 0%, rgba(68,215,255,0.10), transparent 34%), radial-gradient(circle at 90% 30%, rgba(123,97,255,0.10), transparent 38%), linear-gradient(180deg, rgba(11,16,35,0.84), rgba(5,8,22,0.78)); border-right: 1px solid rgba(150,220,255,0.11); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } [data-builder-theme="event-horizon"] .chat-input-form { background: rgba(9,16,31,0.94); border-top: 1px solid rgba(68,215,255,0.16); box-shadow: 0 -14px 34px rgba(68,215,255,0.06); } [data-builder-theme="event-horizon"] .preview-header { background: rgba(9,16,31,0.88); border-bottom: 1px solid rgba(68,215,255,0.14); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } /* Chat messages */ [data-builder-theme="event-horizon"] .msg-bubble { background: linear-gradient(180deg, rgba(17,24,45,0.92), rgba(11,16,35,0.92)); border: 1px solid rgba(150,220,255,0.12); box-shadow: 0 10px 28px rgba(0,0,0,0.32); } [data-builder-theme="event-horizon"] .message.user .msg-bubble { background: linear-gradient(135deg, rgba(68,215,255,0.18), rgba(123,97,255,0.13)); border-color: rgba(68,215,255,0.34); box-shadow: 0 10px 32px rgba(68,215,255,0.12); } [data-builder-theme="event-horizon"] .msg-avatar.ai { background: rgba(68,215,255,0.10); color: #44d7ff; border: 1px solid rgba(68,215,255,0.26); } [data-builder-theme="event-horizon"] .msg-avatar.user { background: var(--gradient-2); color: #050816; } /* Primary buttons */ [data-builder-theme="event-horizon"] .download-btn, [data-builder-theme="event-horizon"] .goals-continue, [data-builder-theme="event-horizon"] .chat-input-form button:not(:disabled):not(.clear-chat-btn):not(.chat-attach-btn) { background: var(--gradient-2); color: #050816; font-weight: 800; border: 1px solid rgba(234,247,255,0.24); box-shadow: 0 9px 30px rgba(68,215,255,0.26); } [data-builder-theme="event-horizon"] .download-btn:hover, [data-builder-theme="event-horizon"] .goals-continue:hover, [data-builder-theme="event-horizon"] .chat-input-form button:not(:disabled):not(.clear-chat-btn):not(.chat-attach-btn):hover { filter: brightness(1.08) saturate(1.12); animation: horizonPulse 2.6s ease-in-out infinite; } /* Inputs */ [data-builder-theme="event-horizon"] .chat-input-form textarea, [data-builder-theme="event-horizon"] input, [data-builder-theme="event-horizon"] textarea, [data-builder-theme="event-horizon"] select { background: rgba(68,215,255,0.055); border-color: rgba(150,220,255,0.14); color: var(--text); } [data-builder-theme="event-horizon"] .chat-input-form textarea:focus, [data-builder-theme="event-horizon"] input:focus, [data-builder-theme="event-horizon"] textarea:focus, [data-builder-theme="event-horizon"] select:focus { border-color: rgba(68,215,255,0.58); box-shadow: 0 0 0 3px rgba(68,215,255,0.14); } /* Page switcher */ [data-builder-theme="event-horizon"] .page-switcher { background: #050816; border-bottom-color: rgba(68,215,255,0.13); } [data-builder-theme="event-horizon"] .page-switcher-tab { color: rgba(234,247,255,0.48); } [data-builder-theme="event-horizon"] .page-switcher-tab:hover { color: #eaf7ff; background: rgba(68,215,255,0.06); } [data-builder-theme="event-horizon"] .page-switcher-tab.active { color: #44d7ff; background: rgba(68,215,255,0.11); border-color: rgba(68,215,255,0.28); border-bottom-color: rgba(68,215,255,0.11); box-shadow: inset 0 -1px 0 rgba(68,215,255,0.40), 0 0 18px rgba(68,215,255,0.10); animation: horizonPulse 4s ease-in-out infinite; } [data-builder-theme="event-horizon"] .page-switcher-add { border-color: rgba(150,220,255,0.18); color: rgba(150,220,255,0.50); } [data-builder-theme="event-horizon"] .page-switcher-add:hover { border-color: rgba(68,215,255,0.45); color: #44d7ff; background: rgba(68,215,255,0.09); } /* Preview area: nebula + coordinate grid + stars */ [data-builder-theme="event-horizon"] .preview-container { background-color: #050816; background-image: radial-gradient(circle at 18% 22%, rgba(68,215,255,0.11), transparent 28%), radial-gradient(circle at 78% 12%, rgba(123,97,255,0.13), transparent 31%), radial-gradient(circle at 50% 78%, rgba(120,255,214,0.07), transparent 34%), linear-gradient(rgba(68,215,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(68,215,255,0.035) 1px, transparent 1px), radial-gradient(circle, rgba(234,247,255,0.16) 0 1px, transparent 1.4px); background-size: auto, auto, auto, 44px 44px, 44px 44px, 90px 90px; background-position: center, center, center, 0 0, 0 0, 18px 26px; } /* Floating holographic cards */ [data-builder-theme="event-horizon"] .goal-card, [data-builder-theme="event-horizon"] .mode-card, [data-builder-theme="event-horizon"] .component-card, [data-builder-theme="event-horizon"] .rp-tile { background: linear-gradient(180deg, rgba(17,24,45,0.82), rgba(9,16,31,0.78)); border-color: rgba(150,220,255,0.13); box-shadow: 0 8px 26px rgba(0,0,0,0.30); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } [data-builder-theme="event-horizon"] .goal-card:hover, [data-builder-theme="event-horizon"] .mode-card:hover, [data-builder-theme="event-horizon"] .component-card:hover, [data-builder-theme="event-horizon"] .rp-tile:hover { background: linear-gradient(180deg, rgba(22,32,60,0.90), rgba(11,16,35,0.84)); border-color: rgba(68,215,255,0.36); box-shadow: 0 12px 38px rgba(68,215,255,0.12); transform: translateY(-1px); } [data-builder-theme="event-horizon"] .rp-thumb { background: rgba(68,215,255,0.10); color: rgba(234,247,255,0.48); border: 1px solid rgba(68,215,255,0.16); } [data-builder-theme="event-horizon"] .rp-open-btn { background: rgba(68,215,255,0.12); border-color: rgba(68,215,255,0.34); color: #44d7ff; } /* Toggle buttons */ [data-builder-theme="event-horizon"] .toggle-btn:hover { background: rgba(68,215,255,0.07); } [data-builder-theme="event-horizon"] .toggle-btn.active { background: rgba(68,215,255,0.15); box-shadow: 0 0 0 1px rgba(68,215,255,0.40), 0 0 18px rgba(68,215,255,0.10); color: #44d7ff; } [data-builder-theme="event-horizon"] .chat-attach-btn { background: rgba(68,215,255,0.07) !important; color: rgba(234,247,255,0.68) !important; border-color: rgba(150,220,255,0.14) !important; } [data-builder-theme="event-horizon"] .chat-attach-btn:hover { background: rgba(68,215,255,0.13) !important; color: #44d7ff !important; border-color: rgba(68,215,255,0.36) !important; } /* Phase tracker */ [data-builder-theme="event-horizon"] .phase-tracker { background: linear-gradient(180deg, rgba(11,16,35,0.98), rgba(5,8,22,0.96)); border-bottom-color: rgba(68,215,255,0.19); box-shadow: 0 8px 28px rgba(68,215,255,0.07); } [data-builder-theme="event-horizon"] .phase-tracker-label { color: rgba(234,247,255,0.42); } [data-builder-theme="event-horizon"] .phase-step { color: rgba(234,247,255,0.46); } [data-builder-theme="event-horizon"] .phase-step.active { color: #44d7ff; } [data-builder-theme="event-horizon"] .phase-step.done { color: #78ffd6; } [data-builder-theme="event-horizon"] .phase-step + .phase-step::before { background: rgba(68,215,255,0.16); } [data-builder-theme="event-horizon"] .phase-step .phase-step-icon { border-color: rgba(68,215,255,0.28); } [data-builder-theme="event-horizon"] .phase-tracker-dismiss { color: rgba(234,247,255,0.35); } [data-builder-theme="event-horizon"] .phase-tracker-dismiss:hover { color: #44d7ff; } /* Source viewer / modal */ [data-builder-theme="event-horizon"] .sv-modal { background: radial-gradient(circle at top left, rgba(68,215,255,0.10), transparent 32%), radial-gradient(circle at bottom right, rgba(123,97,255,0.12), transparent 38%), #050816; border-color: rgba(68,215,255,0.24); box-shadow: 0 32px 96px rgba(0,0,0,0.82), 0 0 40px rgba(68,215,255,0.08); } [data-builder-theme="event-horizon"] .sv-modal-header { background: rgba(11,16,35,0.96); border-color: rgba(150,220,255,0.12); } [data-builder-theme="event-horizon"] .sv-modal-title { color: #44d7ff; text-shadow: 0 0 18px rgba(68,215,255,0.22); } [data-builder-theme="event-horizon"] .sv-modal-desc { color: rgba(234,247,255,0.52); } [data-builder-theme="event-horizon"] .sv-close-btn { color: rgba(234,247,255,0.42); } [data-builder-theme="event-horizon"] .sv-close-btn:hover { color: #eaf7ff; background: rgba(68,215,255,0.08); } [data-builder-theme="event-horizon"] .sv-file-tree { background: #050816; border-color: rgba(150,220,255,0.12); } [data-builder-theme="event-horizon"] .sv-file-item { color: rgba(234,247,255,0.58); } [data-builder-theme="event-horizon"] .sv-file-item:hover { color: #eaf7ff; background: rgba(68,215,255,0.06); } [data-builder-theme="event-horizon"] .sv-file-item.is-active { background: rgba(68,215,255,0.13); color: #44d7ff; } [data-builder-theme="event-horizon"] .sv-code-pane { background: #050816; } [data-builder-theme="event-horizon"] .sv-code-toolbar { background: #0b1023; border-color: rgba(150,220,255,0.10); } [data-builder-theme="event-horizon"] .sv-active-filename { color: rgba(234,247,255,0.52); } [data-builder-theme="event-horizon"] .sv-pre { background: #050816 !important; color: #eaf7ff; } /* Toasts */ [data-builder-theme="event-horizon"] .rsl-toast { background-color: #11182d; border-color: rgba(68,215,255,0.24); box-shadow: 0 12px 38px rgba(68,215,255,0.16); } [data-builder-theme="event-horizon"] .rsl-toast-body { color: #eaf7ff; background-color: #11182d; } /* Sitemap / sidebars */ [data-builder-theme="event-horizon"] .sitemap-sidebar { background: radial-gradient(circle at top, rgba(68,215,255,0.08), transparent 35%), var(--bg-soft); border-color: rgba(150,220,255,0.12); } [data-builder-theme="event-horizon"] .recent-projects-toggle:hover { background: rgba(68,215,255,0.07); } /* Loader */ [data-builder-theme="event-horizon"] .preview-loader-text, [data-builder-theme="event-horizon"] .preview-loader-phase { color: #44d7ff; text-shadow: 0 0 22px rgba(68,215,255,0.34); } /* Subtle starfield overlay */ [data-builder-theme="event-horizon"] .builder-wrapper::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle, rgba(234,247,255,0.34) 0 1px, transparent 1.4px), radial-gradient(circle, rgba(68,215,255,0.24) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(123,97,255,0.22) 0 1px, transparent 1.5px); background-size: 96px 96px, 140px 140px, 190px 190px; background-position: 12px 18px, 70px 44px, 130px 90px; opacity: 0.16; mask-image: linear-gradient(to bottom, black, transparent 78%); } /* Thin holographic edge highlights. .builder-header and .chat-input-form have no base position, so scope a positioning context to this theme (don't touch the shared base rules). .preview-header is already position:relative. */ [data-builder-theme="event-horizon"] .builder-header, [data-builder-theme="event-horizon"] .chat-input-form { position: relative; } [data-builder-theme="event-horizon"] .builder-header::after, [data-builder-theme="event-horizon"] .preview-header::after, [data-builder-theme="event-horizon"] .chat-input-form::before { content: ''; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(68,215,255,0.55), rgba(123,97,255,0.35), transparent); } [data-builder-theme="event-horizon"] .builder-header::after, [data-builder-theme="event-horizon"] .preview-header::after { bottom: 0; } [data-builder-theme="event-horizon"] .chat-input-form::before { top: 0; } /* ── Bricktopia ── colorful kid-friendly creative builder theme */ [data-builder-theme="bricktopia"] { --bg: #102a63; --bg-soft: #173a82; --bg-soft-2: #0d2356; --bg-card: #214b9b; --bg-input: rgba(255, 255, 255, 0.10); --border: rgba(255, 255, 255, 0.16); --border-strong: rgba(255, 255, 255, 0.28); --border-glow: rgba(255, 210, 64, 0.55); --text: #fffdf5; --text-muted: rgba(255, 253, 245, 0.76); --text-dim: rgba(255, 253, 245, 0.48); --accent: #ffd23f; --accent-2: #ff4d4d; --accent-3: #38d66b; --accent-glow: rgba(255, 210, 63, 0.32); --gradient: linear-gradient(135deg, #ffd23f 0%, #ff4d4d 38%, #38d66b 72%, #7c5cff 100%); --gradient-2: linear-gradient(135deg, #ffd23f 0%, #ff8a3d 100%); --gradient-text: linear-gradient(120deg, #fffdf5 0%, #ffd23f 38%, #ff4d4d 68%, #38d66b 100%); --gradient-success: linear-gradient(135deg, #38d66b 0%, #20b85a 100%); --shadow-glow: 0 10px 32px rgba(255, 210, 63, 0.24); --shadow-sm: 0 3px 0 rgba(5, 20, 54, 0.50), 0 2px 10px rgba(5, 20, 54, 0.22); --shadow-md: 0 5px 0 rgba(5, 20, 54, 0.42), 0 10px 26px rgba(5, 20, 54, 0.32); --shadow-lg: 0 8px 0 rgba(5, 20, 54, 0.38), 0 26px 64px rgba(5, 20, 54, 0.46); --radius-sm: 14px; --radius-md: 18px; --radius-lg: 24px; --radius-xl: 30px; } /* Main chrome */ [data-builder-theme="bricktopia"] .builder-header { background: linear-gradient(180deg, rgba(23,58,130,0.97), rgba(16,42,99,0.94)); border-bottom: 3px solid rgba(255,210,63,0.65); box-shadow: 0 6px 0 rgba(5,20,54,0.40), 0 14px 34px rgba(5,20,54,0.30); } [data-builder-theme="bricktopia"] .header-left h1 { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; letter-spacing: -0.03em; text-shadow: none; } [data-builder-theme="bricktopia"] .chat-panel { background: radial-gradient(circle at 18% 10%, rgba(255,210,63,0.16), transparent 34%), radial-gradient(circle at 88% 18%, rgba(255,77,77,0.13), transparent 34%), linear-gradient(180deg, rgba(23,58,130,0.88), rgba(13,35,86,0.84)); border-right: 3px solid rgba(255,255,255,0.12); } [data-builder-theme="bricktopia"] .chat-input-form { background: rgba(13,35,86,0.96); border-top: 3px solid rgba(255,210,63,0.42); box-shadow: 0 -8px 0 rgba(5,20,54,0.22); } [data-builder-theme="bricktopia"] .preview-header { background: rgba(23,58,130,0.94); border-bottom: 3px solid rgba(255,255,255,0.12); } /* Friendly bubbles */ [data-builder-theme="bricktopia"] .msg-bubble { background: rgba(33,75,155,0.96); border: 2px solid rgba(255,255,255,0.16); box-shadow: 0 4px 0 rgba(5,20,54,0.30), 0 10px 22px rgba(5,20,54,0.22); } [data-builder-theme="bricktopia"] .message.user .msg-bubble { background: linear-gradient(135deg, rgba(255,210,63,0.22), rgba(255,138,61,0.12)); border-color: rgba(255,210,63,0.48); box-shadow: 0 4px 0 rgba(160,98,12,0.35), 0 10px 24px rgba(255,210,63,0.14); } [data-builder-theme="bricktopia"] .msg-avatar.ai { background: #38d66b; color: #08294b; border: 2px solid rgba(255,255,255,0.35); font-weight: 900; } [data-builder-theme="bricktopia"] .msg-avatar.user { background: #ffd23f; color: #102a63; border: 2px solid rgba(255,255,255,0.45); font-weight: 900; } /* Primary buttons */ [data-builder-theme="bricktopia"] .download-btn, [data-builder-theme="bricktopia"] .goals-continue, [data-builder-theme="bricktopia"] .chat-input-form button:not(:disabled):not(.clear-chat-btn):not(.chat-attach-btn) { background: var(--gradient-2); color: #102a63; font-weight: 900; border: 2px solid rgba(255,255,255,0.42); box-shadow: 0 5px 0 rgba(168,104,0,0.55), 0 12px 26px rgba(255,210,63,0.22); } [data-builder-theme="bricktopia"] .download-btn:hover, [data-builder-theme="bricktopia"] .goals-continue:hover, [data-builder-theme="bricktopia"] .chat-input-form button:not(:disabled):not(.clear-chat-btn):not(.chat-attach-btn):hover { filter: brightness(1.05) saturate(1.08); transform: translateY(-1px); box-shadow: 0 6px 0 rgba(168,104,0,0.55), 0 16px 32px rgba(255,210,63,0.30); } [data-builder-theme="bricktopia"] .download-btn:active, [data-builder-theme="bricktopia"] .goals-continue:active, [data-builder-theme="bricktopia"] .chat-input-form button:not(:disabled):not(.clear-chat-btn):not(.chat-attach-btn):active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(168,104,0,0.55), 0 8px 18px rgba(255,210,63,0.22); } /* Inputs */ [data-builder-theme="bricktopia"] .chat-input-form textarea, [data-builder-theme="bricktopia"] input, [data-builder-theme="bricktopia"] textarea, [data-builder-theme="bricktopia"] select { background: rgba(255,255,255,0.10); border: 2px solid rgba(255,255,255,0.16); color: var(--text); } [data-builder-theme="bricktopia"] .chat-input-form textarea::placeholder, [data-builder-theme="bricktopia"] input::placeholder, [data-builder-theme="bricktopia"] textarea::placeholder { color: rgba(255,253,245,0.48); } [data-builder-theme="bricktopia"] .chat-input-form textarea:focus, [data-builder-theme="bricktopia"] input:focus, [data-builder-theme="bricktopia"] textarea:focus, [data-builder-theme="bricktopia"] select:focus { border-color: rgba(255,210,63,0.70); box-shadow: 0 0 0 4px rgba(255,210,63,0.18); } /* Page switcher */ [data-builder-theme="bricktopia"] .page-switcher { background: #0d2356; border-bottom: 3px solid rgba(255,255,255,0.12); } [data-builder-theme="bricktopia"] .page-switcher-tab { color: rgba(255,253,245,0.58); font-weight: 800; } [data-builder-theme="bricktopia"] .page-switcher-tab:hover { color: #fffdf5; background: rgba(255,255,255,0.08); } [data-builder-theme="bricktopia"] .page-switcher-tab.active { color: #102a63; background: #ffd23f; border-color: rgba(255,255,255,0.35); border-bottom-color: #ffd23f; box-shadow: 0 -3px 0 rgba(255,255,255,0.24) inset, 0 4px 0 rgba(168,104,0,0.42); } [data-builder-theme="bricktopia"] .page-switcher-add { border: 2px dashed rgba(255,210,63,0.42); color: rgba(255,210,63,0.72); } [data-builder-theme="bricktopia"] .page-switcher-add:hover { color: #102a63; background: #ffd23f; border-style: solid; } /* Preview area: building mat grid */ [data-builder-theme="bricktopia"] .preview-container { background-color: #0d2356; background-image: radial-gradient(circle at 20% 18%, rgba(255,210,63,0.16), transparent 25%), radial-gradient(circle at 82% 14%, rgba(255,77,77,0.13), transparent 25%), radial-gradient(circle at 60% 82%, rgba(56,214,107,0.12), transparent 28%), radial-gradient(circle, rgba(255,255,255,0.13) 0 2px, transparent 2.5px), linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: auto, auto, auto, 32px 32px, 32px 32px, 32px 32px; background-position: center, center, center, 8px 8px, 0 0, 0 0; } /* Soft playful background */ [data-builder-theme="bricktopia"] body::before { background: radial-gradient(ellipse at 18% 8%, rgba(255,210,63,0.14), transparent 46%), radial-gradient(ellipse at 82% 12%, rgba(255,77,77,0.10), transparent 48%), radial-gradient(ellipse at 50% 100%, rgba(56,214,107,0.10), transparent 50%); opacity: 1; } /* Cards */ [data-builder-theme="bricktopia"] .goal-card, [data-builder-theme="bricktopia"] .mode-card, [data-builder-theme="bricktopia"] .component-card, [data-builder-theme="bricktopia"] .rp-tile { background: rgba(33,75,155,0.92); border: 2px solid rgba(255,255,255,0.16); box-shadow: 0 5px 0 rgba(5,20,54,0.36), 0 14px 30px rgba(5,20,54,0.24); } [data-builder-theme="bricktopia"] .goal-card:hover, [data-builder-theme="bricktopia"] .mode-card:hover, [data-builder-theme="bricktopia"] .component-card:hover, [data-builder-theme="bricktopia"] .rp-tile:hover { background: rgba(41,90,178,0.96); border-color: rgba(255,210,63,0.52); box-shadow: 0 6px 0 rgba(5,20,54,0.34), 0 18px 36px rgba(255,210,63,0.12); transform: translateY(-1px); } [data-builder-theme="bricktopia"] .rp-thumb { background: rgba(255,255,255,0.12); color: rgba(255,253,245,0.48); border: 2px solid rgba(255,255,255,0.12); } [data-builder-theme="bricktopia"] .rp-open-btn { background: rgba(255,210,63,0.18); border-color: rgba(255,210,63,0.45); color: #ffd23f; font-weight: 900; } /* Toggles */ [data-builder-theme="bricktopia"] .toggle-btn:hover { background: rgba(255,255,255,0.08); } [data-builder-theme="bricktopia"] .toggle-btn.active { background: #ffd23f; color: #102a63; box-shadow: 0 0 0 2px rgba(255,255,255,0.24), 0 4px 0 rgba(168,104,0,0.40); font-weight: 900; } [data-builder-theme="bricktopia"] .chat-attach-btn { background: rgba(255,255,255,0.10) !important; color: rgba(255,253,245,0.76) !important; border-color: rgba(255,255,255,0.16) !important; } [data-builder-theme="bricktopia"] .chat-attach-btn:hover { background: rgba(255,210,63,0.18) !important; color: #ffd23f !important; border-color: rgba(255,210,63,0.48) !important; } /* Phase tracker */ [data-builder-theme="bricktopia"] .phase-tracker { background: rgba(13,35,86,0.98); border-bottom: 3px solid rgba(255,210,63,0.35); box-shadow: 0 6px 0 rgba(5,20,54,0.26); } [data-builder-theme="bricktopia"] .phase-tracker-label { color: rgba(255,253,245,0.48); font-weight: 800; } [data-builder-theme="bricktopia"] .phase-step { color: rgba(255,253,245,0.52); font-weight: 800; } [data-builder-theme="bricktopia"] .phase-step.active { color: #ffd23f; } [data-builder-theme="bricktopia"] .phase-step.done { color: #38d66b; } [data-builder-theme="bricktopia"] .phase-step + .phase-step::before { background: rgba(255,255,255,0.16); } [data-builder-theme="bricktopia"] .phase-step .phase-step-icon { border-color: rgba(255,255,255,0.24); } [data-builder-theme="bricktopia"] .phase-tracker-dismiss { color: rgba(255,253,245,0.42); } [data-builder-theme="bricktopia"] .phase-tracker-dismiss:hover { color: #ffd23f; } /* Source viewer / modal */ [data-builder-theme="bricktopia"] .sv-modal { background: radial-gradient(circle at top left, rgba(255,210,63,0.13), transparent 32%), radial-gradient(circle at bottom right, rgba(56,214,107,0.10), transparent 36%), #102a63; border: 3px solid rgba(255,210,63,0.32); box-shadow: 0 8px 0 rgba(5,20,54,0.45), 0 30px 84px rgba(5,20,54,0.60); } [data-builder-theme="bricktopia"] .sv-modal-header { background: #173a82; border-bottom: 3px solid rgba(255,255,255,0.12); } [data-builder-theme="bricktopia"] .sv-modal-title { color: #ffd23f; font-weight: 900; } [data-builder-theme="bricktopia"] .sv-modal-desc { color: rgba(255,253,245,0.62); } [data-builder-theme="bricktopia"] .sv-close-btn { color: rgba(255,253,245,0.58); } [data-builder-theme="bricktopia"] .sv-close-btn:hover { color: #102a63; background: #ffd23f; } [data-builder-theme="bricktopia"] .sv-file-tree { background: #0d2356; border-color: rgba(255,255,255,0.14); } [data-builder-theme="bricktopia"] .sv-file-item { color: rgba(255,253,245,0.68); } [data-builder-theme="bricktopia"] .sv-file-item:hover { color: #fffdf5; background: rgba(255,255,255,0.08); } [data-builder-theme="bricktopia"] .sv-file-item.is-active { background: rgba(255,210,63,0.18); color: #ffd23f; } [data-builder-theme="bricktopia"] .sv-code-pane { background: #0d2356; } [data-builder-theme="bricktopia"] .sv-code-toolbar { background: #173a82; border-color: rgba(255,255,255,0.12); } [data-builder-theme="bricktopia"] .sv-active-filename { color: rgba(255,253,245,0.62); } [data-builder-theme="bricktopia"] .sv-pre { background: #0d2356 !important; color: #fffdf5; } /* Toasts */ [data-builder-theme="bricktopia"] .rsl-toast { background-color: #214b9b; border: 2px solid rgba(255,210,63,0.36); box-shadow: 0 5px 0 rgba(5,20,54,0.35), 0 14px 32px rgba(255,210,63,0.14); } [data-builder-theme="bricktopia"] .rsl-toast-body { color: #fffdf5; background-color: #214b9b; } /* Sitemap / sidebars */ [data-builder-theme="bricktopia"] .sitemap-sidebar { background: radial-gradient(circle at top, rgba(255,210,63,0.12), transparent 34%), var(--bg-soft); border-color: rgba(255,255,255,0.14); } [data-builder-theme="bricktopia"] .recent-projects-toggle:hover { background: rgba(255,255,255,0.08); } /* Loader */ [data-builder-theme="bricktopia"] .preview-loader-text, [data-builder-theme="bricktopia"] .preview-loader-phase { color: #ffd23f; text-shadow: 0 0 18px rgba(255,210,63,0.28); font-weight: 900; } /* Subtle building-block dot overlay */ [data-builder-theme="bricktopia"] .builder-wrapper::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.14) 0 2px, transparent 2.5px), radial-gradient(circle, rgba(255,210,63,0.12) 0 2px, transparent 2.5px); background-size: 40px 40px, 64px 64px; background-position: 8px 8px, 20px 20px; opacity: 0.20; mask-image: linear-gradient(to bottom, black, transparent 72%); } /* ============================================================ BUILDER MODALS — variable-driven theming RSL's modal.css hardcodes .modal { background:#fff; color:#333 } and only recolors under [data-theme="dark"] — which the builder never sets (it uses [data-builder-theme]). Result: every builder-side RSL modal (Add Page, nav-link edit, CSV import, etc.) rendered white-on-light → invisible text on dark builder themes. These rules point the modal surfaces at the builder theme variables so EVERY theme — current and future — themes its modals automatically with zero per-theme blocks. builder.css is loaded only in the builder document (not the preview iframe), so these .modal rules never reach the AI-generated site's own modals. ============================================================ */ .modal { background: var(--bg-card) !important; color: var(--text) !important; } .modal-header { border-bottom-color: var(--border) !important; } .modal-title, .modal-header h2 { color: var(--text) !important; } .modal-header .close-modal, .modal-close { color: var(--text-muted) !important; } .modal-header .close-modal:hover, .modal-close:hover { color: var(--text) !important; background-color: var(--bg-input) !important; } .modal-body, .modal-body p { color: var(--text) !important; } .modal-footer { border-top-color: var(--border) !important; } /* Inputs inside builder modals (some use inline styles, but cover the rest) */ .modal-body input, .modal-body textarea, .modal-body select { background: var(--bg-input); border-color: var(--border); color: var(--text); } .modal-body input::placeholder, .modal-body textarea::placeholder { color: var(--text-dim); } /* Themed scrollbar for scrollable builder modals (Brand, nav-link, CSV import…) — matches the chat panel / footer builder bars. The scroll container is .modal itself (RSL sets .modal { overflow:auto }); .modal-body is included too in case any modal scrolls there instead. */ .modal, .modal-body { scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg-input); } .modal::-webkit-scrollbar, .modal-body::-webkit-scrollbar { width: 8px; height: 8px; } .modal::-webkit-scrollbar-track, .modal-body::-webkit-scrollbar-track { background: var(--bg-input); border-radius: 4px; } .modal::-webkit-scrollbar-thumb, .modal-body::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; } .modal::-webkit-scrollbar-thumb:hover, .modal-body::-webkit-scrollbar-thumb:hover { background: var(--accent-2); } /* ============================================================ BUILDER ALERTS / CONFIRM / PROMPT — surface theming only RSL's alerts.css hardcodes .alert { background:#fff } with #333/#666 text, so RSL.Alerts.confirm/prompt/alert dialogs (Clear Chat, etc.) render as a white box with dark text — unreadable on dark builder themes. We theme ONLY the SURFACE (box bg, neutral title/body, neutral buttons, input) via theme variables. We deliberately DO NOT touch the SEMANTIC colors — the .rsl-alert-{success,danger,warning,info} colored top-bar and their typed .alert-title colors carry MEANING (a danger dialog must stay red on every theme), so those are left to RSL. Specificity is intentional: RSL's base neutral title is `.alert .alert-title` (0,2,0); we match it WITHOUT !important so the higher-specificity typed rule `.alert.rsl-alert-danger .alert-title` (0,3,0) still wins and keeps its semantic color. builder.css loads AFTER alerts.css, so same-specificity surface rules win on source order. builder.css never reaches the preview iframe, so the AI site's own alerts are unaffected. ============================================================ */ .alert { background-color: var(--bg-card); color: var(--text); } /* Neutral title/body — typed (.rsl-alert-*) titles keep their semantic color via higher specificity; no !important here on purpose. */ .alert .alert-title { color: var(--text); } .alert .alert-text { color: var(--text-muted); } /* Neutral Cancel button → theme surface (RSL default is flat grey #6c757d). Confirm/OK buttons are LEFT semantic (blue/red/etc) — not overridden. */ .alert .alert-btn.alert-cancel { background-color: var(--bg-input); border-color: var(--border-strong); color: var(--text); } .alert .alert-btn.alert-cancel:hover { background-color: var(--bg-soft); border-color: var(--border-strong); color: var(--text); } /* Prompt input field */ .alert .alert-input { background: var(--bg-input); border-color: var(--border); color: var(--text); } .alert .alert-input::placeholder { color: var(--text-dim); } .alert .alert-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } /* ============================================================ THEME PICKER — popup + swatches ============================================================ */ .theme-picker-popup { position: fixed; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 0.875rem; min-width: 220px; box-shadow: var(--shadow-lg); z-index: 99999; } .theme-picker-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: 0.625rem; } .theme-picker-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; } .theme-swatch { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.5rem 0.35rem; background: transparent; border: 1.5px solid transparent; border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; transition: border-color 0.15s, background 0.15s; } .theme-swatch:hover { background: var(--bg-input); border-color: var(--border-strong); } .theme-swatch.is-active { border-color: var(--accent); background: var(--bg-input); } .swatch-bg { display: block; width: 32px; height: 22px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.3); box-sizing: border-box; } .swatch-name { font-size: 0.65rem; font-weight: 600; color: var(--text-muted); text-align: center; white-space: nowrap; } .theme-swatch.is-active .swatch-name { color: var(--text); } /* Reset and base */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; padding: 0; line-height: 1.5; overflow-x: hidden; } /* Subtle ambient glow behind the app — gives the dark canvas depth */ body::before { content: ''; position: fixed; top: -30%; left: 50%; transform: translateX(-50%); width: 1400px; height: 1000px; background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 60%); filter: blur(100px); z-index: 0; pointer-events: none; opacity: 0.6; } ::selection { background: var(--accent); color: white; } /* Main wrapper - full viewport */ .builder-wrapper { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100vh; background: transparent; border-radius: 0; box-shadow: none; overflow: hidden; } /* ============================================================ HEADER ============================================================ */ .builder-header { display: flex; justify-content: space-between; align-items: center; background: rgba(11, 16, 32, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text); padding: 0.875rem 1.5rem; flex-shrink: 0; border-bottom: 1px solid var(--border); } .header-left { display: flex; flex-direction: column; gap: 0.125rem; } .header-left h1 { font-family: 'Fraunces', serif; font-weight: 900; font-size: 1.375rem; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .header-left p { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; } /* Header Controls */ .header-controls { display: flex; gap: 1.25rem; align-items: center; } .control-group { display: flex; align-items: center; gap: 0.5rem; } .control-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--text-dim); } /* Collapse toggle — user opt-in icon-only mode for the action buttons. Off by default; toggled by adding .controls-collapsed to .builder-header. Hides the text labels on the .source-btn-family buttons (Brand, Nav, Pages, Help, Source, Undo, Redo, Download) but keeps their icons + title tooltips. The Layout/Preview toggles are already icon-only. */ .builder-header.controls-collapsed .header-controls .source-btn span, .builder-header.controls-collapsed .header-controls .brand-panel-btn span, .builder-header.controls-collapsed .header-controls .nav-builder-btn span, .builder-header.controls-collapsed .header-controls .sitemap-toggle-btn span, .builder-header.controls-collapsed .header-controls .download-btn span { display: none; } .builder-header.controls-collapsed .header-controls .source-btn, .builder-header.controls-collapsed .header-controls .brand-panel-btn, .builder-header.controls-collapsed .header-controls .nav-builder-btn, .builder-header.controls-collapsed .header-controls .sitemap-toggle-btn, .builder-header.controls-collapsed .header-controls .download-btn { padding-left: 0.55rem; padding-right: 0.55rem; } /* The collapse button itself — same family as .source-btn. */ .controls-collapse-btn .controls-collapse-expand { display: none; } .builder-header.controls-collapsed .controls-collapse-btn .controls-collapse-expand { display: inline; } .builder-header.controls-collapsed .controls-collapse-btn .controls-collapse-collapse { display: none; } .toggle-buttons { display: flex; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; } .toggle-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 28px; border: none; background: transparent; color: var(--text-muted); border-radius: 6px; cursor: pointer; transition: all 0.15s ease; } .toggle-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); } .toggle-btn.active { background: rgba(124, 92, 255, 0.2); color: var(--text); box-shadow: 0 0 0 1px rgba(124, 92, 255, 0.4); } /* Download Button */ .download-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.1rem; background: var(--gradient-2); color: white; border: none; border-radius: 999px; font-size: 0.875rem; font-weight: 600; font-family: inherit; cursor: pointer; box-shadow: 0 4px 16px var(--accent-glow); transition: transform 0.2s, box-shadow 0.2s; } .download-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 24px var(--accent-glow); } .download-btn:disabled { background: var(--bg-input); color: var(--text-dim); cursor: not-allowed; box-shadow: none; border: 1px solid var(--border); } .download-btn svg { flex-shrink: 0; } /* ============================================================ MAIN BUILDER LAYOUT ============================================================ */ .builder-main { display: flex; flex: 1; overflow: hidden; background: var(--bg); position: relative; z-index: 1; } .builder-main.layout-horizontal { flex-direction: row; } .builder-main.layout-vertical { flex-direction: column; } /* ============================================================ CHAT PANEL ============================================================ */ .chat-panel { display: flex; flex-direction: column; background: rgba(11, 16, 32, 0.6); border-right: 1px solid var(--border); min-height: 0; } .layout-horizontal .chat-panel { width: 40%; min-width: 360px; max-width: 520px; } .layout-vertical .chat-panel { height: 50%; min-height: 200px; border-right: none; border-bottom: 1px solid var(--border); } /* Messages area */ .chat-messages { flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; scroll-behavior: smooth; } .chat-messages { scrollbar-width: thin; scrollbar-color: var(--accent) rgba(255,255,255,0.04); } .chat-messages::-webkit-scrollbar { width: 8px; } .chat-messages::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); border-radius: 4px; } .chat-messages::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; } .chat-messages::-webkit-scrollbar-thumb:hover { background: var(--accent-2); } /* ============================================================ MESSAGES — demo-style avatar + name + bubble The outer .message.ai/.message.user is a transparent container (other code targets it for streaming hooks, contrast checks, etc.). The visible chrome lives on .msg-bubble inside. ============================================================ */ .message { max-width: 100%; padding: 0; background: none; border: none; line-height: 1.55; font-size: 0.9rem; /* Preserve line breaks from multi-paragraph pastes (textarea-based chat input). pre-wrap respects \n while still wrapping long lines. */ white-space: normal; word-wrap: break-word; animation: msg-in 0.4s ease-out backwards; } @keyframes msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .message-row { display: flex; gap: 0.625rem; align-items: flex-start; } .msg-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.7rem; flex-shrink: 0; user-select: none; } .msg-avatar.user { background: var(--gradient-success); color: var(--bg); } .msg-avatar.ai { background: var(--gradient-2); color: white; box-shadow: 0 0 12px rgba(124, 92, 255, 0.4); } .msg-content { flex: 1; min-width: 0; } .msg-name { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 0.25rem; } .msg-bubble { background: var(--bg-card); border: 1px solid var(--border); padding: 0.75rem 0.9rem; border-radius: 12px; border-top-left-radius: 4px; color: var(--text); white-space: pre-wrap; word-wrap: break-word; /* Force long URLs / unbreakable strings to break at any char so the bubble can never overflow its column. word-wrap: break-word alone doesn't break inside long words — overflow-wrap: anywhere does. Required for both AI and user bubbles (pasted URLs are the common trigger). */ overflow-wrap: anywhere; word-break: break-word; box-shadow: var(--shadow-sm); } /* User messages: right-aligned, accent color, avatar on the right */ .message.user .message-row { flex-direction: row-reverse; } .message.user .msg-content { display: flex; flex-direction: column; align-items: flex-end; } .message.user .msg-name { text-align: right; } .message.user .msg-bubble { background: rgba(91, 232, 199, 0.1); border-color: rgba(91, 232, 199, 0.28); border-radius: 12px; border-top-right-radius: 4px; border-top-left-radius: 12px; /* fit-content shrinks the bubble to its text width on short messages (so the bubble doesn't span full column). But fit-content also lets the bubble grow to its intrinsic content width — when the user pastes a long URL with no whitespace, that intrinsic width can be 1000+px and overflow the chat panel. Cap with max-width: 100% so the bubble can never exceed its column, and force long URLs to break at any character boundary via overflow-wrap: anywhere. */ max-width: min(fit-content, 100%); overflow-wrap: anywhere; word-break: break-word; } /* Inline action chip rendered below an AI bubble. Currently used for the "Try a different approach" regenerate prompt on dataset-driven builds. Sits flush with the bubble's left edge, smaller than a real button so it reads as a follow-up suggestion, not a primary CTA. */ .msg-action-chip { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; padding: 0.4rem 0.7rem; font-size: 0.8125rem; font-weight: 500; color: var(--text); background: rgba(124, 92, 255, 0.08); border: 1px solid rgba(124, 92, 255, 0.32); border-radius: 999px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease; } .msg-action-chip:hover { background: rgba(124, 92, 255, 0.16); border-color: rgba(124, 92, 255, 0.5); } .msg-action-chip:active { transform: translateY(1px); } .msg-action-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .msg-action-chip-icon { display: inline-block; font-size: 0.95rem; line-height: 1; color: var(--accent); } /* Loading bubble — italic, muted */ .msg-bubble.is-loading { color: var(--text-muted); font-style: italic; } /* While text is streaming in via SSE, show a blinking gradient cursor at the end of the bubble so the user can see the AI is actively typing. */ .message.ai.streaming .msg-bubble::after { content: '▋'; display: inline-block; margin-left: 2px; animation: rsl-streaming-cursor 1s steps(1) infinite; color: var(--accent-2); } @keyframes rsl-streaming-cursor { 50% { opacity: 0; } } /* Inline links inside messages (markdown might emit these) */ .message a { color: var(--accent-3); text-decoration: none; border-bottom: 1px dashed rgba(91, 232, 199, 0.4); } .message a:hover { border-bottom-style: solid; } /* ============================================================ CHAT INPUT ============================================================ */ .chat-input-form { display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.875rem 1rem; background: rgba(11, 16, 32, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--border); } .chat-input-form textarea { flex: 1; padding: 0.625rem 0.875rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text); font-size: 0.9rem; font-family: inherit; line-height: 1.4; resize: none; overflow-y: auto; max-height: 9rem; min-height: 2.5rem; transition: border-color 0.2s, box-shadow 0.2s, height 0.05s; box-sizing: border-box; } .chat-input-form textarea::placeholder { color: var(--text-dim); } .chat-input-form textarea { scrollbar-width: thin; scrollbar-color: var(--accent) transparent; } .chat-input-form textarea::-webkit-scrollbar { width: 4px; } .chat-input-form textarea::-webkit-scrollbar-track { background: transparent; } .chat-input-form textarea::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; } .chat-input-form textarea::-webkit-scrollbar-thumb:hover { background: var(--accent-2, var(--accent)); } .chat-input-form textarea:focus { outline: none; border-color: var(--border-glow); box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.15); } .chat-input-form textarea:disabled { background: rgba(255, 255, 255, 0.02); cursor: not-allowed; opacity: 0.7; } .chat-input-form button { padding: 0.625rem 1.25rem; background: var(--gradient-2); color: white; border: none; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 600; font-family: inherit; cursor: pointer; box-shadow: 0 4px 16px var(--accent-glow); transition: transform 0.2s, box-shadow 0.2s; } .chat-input-form button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px var(--accent-glow); } .chat-input-form button:disabled { background: var(--bg-input); color: var(--text-dim); cursor: not-allowed; transform: none; box-shadow: none; border: 1px solid var(--border); } /* Stop generation button — shown only while streaming, replaces Send visually */ .stop-generation-btn { display: none; background: transparent !important; color: #e05555 !important; border: 1px solid #e05555 !important; box-shadow: none !important; font-weight: 600; letter-spacing: 0.02em; transition: background 0.15s, color 0.15s; } .stop-generation-btn:not([hidden]) { display: inline-flex; } .stop-generation-btn:hover:not(:disabled) { background: rgba(224, 85, 85, 0.12) !important; transform: none !important; box-shadow: none !important; } /* === Chat attach (paperclip) menu — Phase 1 of HTML re-upload feature. Lives at the left of the chat input form. Opens a small popup with "Upload existing site" option that triggers the hidden file input. */ .chat-attach-wrapper { position: relative; flex: 0 0 auto; } .clear-chat-btn { background: transparent !important; color: var(--text-dim) !important; border: 1px solid var(--border) !important; box-shadow: none !important; font-size: 0.78rem !important; padding: 0 0.65rem !important; height: 2.5rem; border-radius: var(--radius-sm); flex: 0 0 auto; white-space: nowrap; transition: color 0.15s ease, border-color 0.15s ease; } .clear-chat-btn:hover:not(:disabled) { color: var(--text) !important; border-color: var(--text-dim) !important; background: transparent !important; transform: none !important; box-shadow: none !important; } .chat-attach-btn { /* Override the generic .chat-input-form button gradient — this is an icon button, not the primary Send action. */ background: var(--bg-input) !important; color: var(--text-muted) !important; border: 1px solid var(--border) !important; box-shadow: none !important; padding: 0 !important; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .chat-attach-btn:hover:not(:disabled) { background: rgba(124, 92, 255, 0.1) !important; border-color: rgba(124, 92, 255, 0.32) !important; color: var(--text) !important; transform: none !important; box-shadow: none !important; } .chat-attach-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .chat-attach-menu { position: absolute; bottom: calc(100% + 0.5rem); left: 0; min-width: 18rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); z-index: 50; padding: 0.25rem; } .chat-attach-menu.hidden { display: none; } .chat-attach-menu-item { /* Plain button — override .chat-input-form button gradient. */ background: transparent !important; color: var(--text) !important; border: none !important; box-shadow: none !important; padding: 0.6rem 0.7rem !important; width: 100%; display: flex; align-items: flex-start; gap: 0.7rem; text-align: left; border-radius: calc(var(--radius-sm) - 2px); cursor: pointer; font-weight: 500; transition: background 0.12s ease; } .chat-attach-menu-item:hover:not(:disabled) { background: rgba(124, 92, 255, 0.12) !important; transform: none !important; } .chat-attach-menu-icon { font-size: 1.1rem; line-height: 1.4; flex: 0 0 auto; } .chat-attach-menu-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; } .chat-attach-menu-title { font-size: 0.875rem; font-weight: 600; color: var(--text); } .chat-attach-menu-desc { font-size: 0.75rem; color: var(--text-muted); font-weight: 400; } /* === Session recovery banner. Shown on page load when a same-session autosave exists (reload / crash / "conversation too long" error). Fixed at the top of the viewport, above everything. */ .session-recovery-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 100000; background: var(--gradient-2); color: white; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); animation: session-recovery-slidein 0.25s ease-out; } @keyframes session-recovery-slidein { from { transform: translateY(-100%); } to { transform: translateY(0); } } .session-recovery-content { max-width: 900px; margin: 0 auto; padding: 0.7rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .session-recovery-text { font-size: 0.875rem; font-weight: 500; } .session-recovery-buttons { display: flex; gap: 0.5rem; flex: 0 0 auto; } .session-recovery-btn { padding: 0.4rem 1rem; border-radius: var(--radius-sm); font-size: 0.8125rem; font-weight: 600; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.4); transition: background 0.15s ease; } .session-recovery-btn.session-recovery-resume { background: white; color: var(--accent); border-color: white; } .session-recovery-btn.session-recovery-resume:hover { background: rgba(255, 255, 255, 0.9); } .session-recovery-btn.session-recovery-discard { background: transparent; color: white; } .session-recovery-btn.session-recovery-discard:hover { background: rgba(255, 255, 255, 0.15); } /* ============================================================ PREVIEW PANEL ============================================================ */ .preview-panel { flex: 1; display: flex; flex-direction: column; background: var(--bg-soft); overflow: hidden; } .preview-header { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; background: rgba(11, 16, 32, 0.6); border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); /* anchor for the absolutely-positioned coachmark; z-index ensures the coachmark paints above the sibling preview-container / iframe */ position: relative; z-index: 2; } /* Stack label + subtitle vertically inside the header */ .preview-title-group { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .preview-title { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); display: flex; align-items: center; gap: 0.5rem; } .preview-title::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-3); box-shadow: 0 0 6px var(--accent-3); } /* Always-visible discoverability hint under the LIVE EDIT label. */ .preview-subtitle { font-size: 0.6875rem; color: var(--text-muted); letter-spacing: 0.02em; /* Indent to align with the label text (past the dot indicator). */ padding-left: calc(6px + 0.5rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* First-build coachmark — one-shot popover anchored under the LIVE EDIT label. Hidden by default; app.js toggles .hidden on first build. */ .live-edit-coachmark { position: absolute; top: calc(100% + 8px); left: 1rem; z-index: 9999; max-width: 360px; background: linear-gradient(135deg, #7C5CFF 0%, #4f3bb8 100%); color: #fff; border-radius: 10px; padding: 0.85rem 1rem; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08); animation: live-edit-coachmark-in 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .live-edit-coachmark.hidden { display: none; } @keyframes live-edit-coachmark-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .live-edit-coachmark-arrow { position: absolute; top: -6px; left: 24px; width: 12px; height: 12px; background: #7C5CFF; transform: rotate(45deg); border-radius: 2px; } .live-edit-coachmark-body { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.8125rem; line-height: 1.4; position: relative; } .live-edit-coachmark-body strong { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.01em; } .live-edit-coachmark-body span { color: rgba(255, 255, 255, 0.92); } .live-edit-coachmark-dismiss { align-self: flex-start; margin-top: 0.25rem; background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); padding: 0.35rem 0.9rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; cursor: pointer; letter-spacing: 0.02em; transition: background 0.15s ease; } .live-edit-coachmark-dismiss:hover { background: rgba(255, 255, 255, 0.28); } .live-edit-coachmark-dismiss:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* =================================================================== Guided Tour (Help walkthrough) Shares the coachmark's visual language but uses position:fixed so a single bubble can follow any anchor element anywhere on screen. See plans/guided-tour-v0.1.md. =================================================================== */ /* Dimmed backdrop behind the tour (click = skip). The spotlight cut-out on the active element is a v1.1 enhancement; v1 just dims the page. */ .gt-backdrop { position: fixed; inset: 0; z-index: 100000; background: rgba(8, 10, 24, 0.55); opacity: 0; transition: opacity 0.25s ease; } .gt-backdrop.gt-visible { opacity: 1; } .gt-backdrop.gt-hidden { display: none; } /* The highlighted element gets lifted above the backdrop + ringed. */ .gt-spotlight { position: relative; z-index: 100001 !important; box-shadow: 0 0 0 3px #5B7FFF, 0 0 0 9px rgba(91, 127, 255, 0.35), 0 12px 40px rgba(0, 0, 0, 0.45); border-radius: 10px; transition: box-shadow 0.2s ease; } .gt-bubble { position: fixed; z-index: 100002; width: 340px; max-width: calc(100vw - 32px); background: linear-gradient(135deg, #7C5CFF 0%, #4f3bb8 100%); color: #fff; border-radius: 12px; padding: 1.1rem 1.2rem 1rem; box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08); font-size: 0.8125rem; line-height: 1.45; animation: live-edit-coachmark-in 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .gt-bubble.gt-hidden { display: none; } /* Informational (non-anchored) stops center on screen, no arrow. */ .gt-bubble.gt-info { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: 400px; } .gt-arrow { position: absolute; width: 12px; height: 12px; background: #7C5CFF; transform: rotate(45deg); border-radius: 2px; } .gt-bubble.gt-info .gt-arrow { display: none; } .gt-title { font-family: 'Fraunces', Georgia, serif; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.4rem; } .gt-body { color: rgba(255, 255, 255, 0.92); margin: 0 0 0.9rem; } .gt-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .gt-progress { font-size: 0.72rem; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.03em; } .gt-controls { display: flex; gap: 0.4rem; } .gt-btn { background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); padding: 0.4rem 0.95rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; font-family: 'Inter', system-ui, sans-serif; cursor: pointer; letter-spacing: 0.02em; transition: background 0.15s ease; } .gt-btn:hover { background: rgba(255, 255, 255, 0.3); } .gt-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .gt-btn-primary { background: #fff; color: #4f3bb8; border-color: #fff; } .gt-btn-primary:hover { background: rgba(255, 255, 255, 0.88); } .gt-skip { position: absolute; top: 0.7rem; right: 0.8rem; background: none; border: none; color: rgba(255, 255, 255, 0.55); font-size: 0.72rem; font-weight: 500; cursor: pointer; padding: 0.2rem; transition: color 0.15s ease; } .gt-skip:hover { color: rgba(255, 255, 255, 0.9); } /* Help button in the header — same family as .source-btn, but never disabled (the tour must run before the first build). */ #tour-help-btn { /* inherits .source-btn styling */ } /* Compact the subtitle on very narrow viewports so the header doesn't wrap or push the viewport-size chip off-screen. */ @media (max-width: 600px) { .preview-subtitle { display: none; } } .viewport-size { font-size: 0.7rem; color: var(--text-muted); background: var(--bg-input); border: 1px solid var(--border); padding: 0.2rem 0.55rem; border-radius: 999px; font-family: 'SF Mono', Menlo, monospace; font-weight: 500; } /* Page-switcher tab strip (multipage Phase 1.5.c — 2026-05-16). Sits directly above the preview-container. Hidden when site is single-page (siteState.manifest.pages.length < 2). Tab chips look browser-tabby — active tab gets brand-primary accent + bolder weight. "+ Add page" button on the right uses a subtle ghost style. */ .page-switcher { display: flex; align-items: center; gap: 4px; padding: 6px 12px; background: var(--bg, #0B1020); border-bottom: 1px solid rgba(255, 255, 255, 0.08); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; min-height: 40px; flex-shrink: 0; } .page-switcher::-webkit-scrollbar { height: 6px; } .page-switcher::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 3px; } .page-switcher-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid transparent; border-radius: 6px 6px 0 0; background: transparent; color: rgba(255, 255, 255, 0.6); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; position: relative; top: 1px; /* sits ON the bottom-border line */ font-family: inherit; } .page-switcher-tab:hover { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.95); } .page-switcher-tab.active { background: var(--bg-input, rgba(255, 255, 255, 0.04)); color: var(--accent, #7C5CFF); font-weight: 600; border-color: rgba(255, 255, 255, 0.08); border-bottom-color: var(--bg-input, rgba(255, 255, 255, 0.04)); cursor: default; } .page-switcher-tab.active:hover { background: var(--bg-input, rgba(255, 255, 255, 0.04)); } .page-switcher-add { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: 1px dashed rgba(255, 255, 255, 0.15); border-radius: 6px; background: transparent; color: rgba(255, 255, 255, 0.55); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; font-family: inherit; } .page-switcher-tab ~ .page-switcher-add { margin-left: 6px; } .page-switcher-add:hover { background: rgba(124, 92, 255, 0.1); color: var(--accent, #7C5CFF); border-color: var(--accent, #7C5CFF); border-style: solid; } /* Per-tab delete (×) button. Hidden when not hovering the tab so the strip stays clean, fades in on tab hover. Click triggers confirm then SiteState.deletePage. Home tab does not render this button (see PageSwitcher.render — !isHome). */ .page-switcher-tab-delete { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, 0.4); font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s; user-select: none; /* Slight visual lift so the × sits above the letter baseline */ margin-top: -1px; } .page-switcher-tab:hover .page-switcher-tab-delete { opacity: 0.7; } .page-switcher-tab-delete:hover { opacity: 1 !important; background: rgba(239, 68, 68, 0.2); color: rgb(248, 113, 113); } /* The active tab keeps its delete affordance visible at low opacity even without hover, so the user always sees a way out of the page. */ .page-switcher-tab.active .page-switcher-tab-delete { opacity: 0.5; } .page-switcher-tab.active .page-switcher-tab-delete:hover { opacity: 1 !important; } /* ── Phase Tracker ──────────────────────────────────────────────────────────── Persistent build-phase plan strip. Appears when the AI sends a HARD STOP multi-phase plan (game/app complexity). Hidden by default; PhaseTracker module in app.js drives it. ──────────────────────────────────────────────────────────────────────────── */ .phase-tracker { display: flex; align-items: center; gap: 0; padding: 0 16px; background: rgba(17, 20, 40, 0.95); border-bottom: 1px solid rgba(124, 92, 255, 0.2); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; min-height: 44px; flex-shrink: 0; } .phase-tracker[hidden] { display: none; } .phase-tracker::-webkit-scrollbar { height: 4px; } .phase-tracker::-webkit-scrollbar-thumb { background: rgba(124, 92, 255, 0.25); border-radius: 2px; } .phase-tracker-label { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; padding-right: 14px; border-right: 1px solid rgba(255, 255, 255, 0.08); margin-right: 12px; flex-shrink: 0; } .phase-tracker-steps { display: flex; align-items: center; gap: 4px; } .phase-step { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; white-space: nowrap; color: rgba(255, 255, 255, 0.45); transition: background 0.2s, color 0.2s; cursor: default; position: relative; } /* Connector between steps */ .phase-step + .phase-step::before { content: ''; position: absolute; left: -4px; top: 50%; transform: translateY(-50%); width: 4px; height: 1px; background: rgba(255, 255, 255, 0.1); } /* Upcoming: dim with empty circle */ .phase-step .phase-step-icon { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 9px; transition: border-color 0.2s, background 0.2s; } /* Active: spinning gradient ring + purple text */ .phase-step.active { color: var(--accent, #7C5CFF); background: rgba(124, 92, 255, 0.1); } .phase-step.active .phase-step-icon { border-color: var(--accent, #7C5CFF); background: rgba(124, 92, 255, 0.15); animation: phase-spin 1.2s linear infinite; } @keyframes phase-spin { 0% { box-shadow: 0 0 0 0 rgba(124,92,255,0.6), 2px 0 0 0 rgba(124,92,255,0.15); } 50% { box-shadow: 0 0 0 0 rgba(124,92,255,0.15), -2px 0 0 0 rgba(124,92,255,0.6); } 100% { box-shadow: 0 0 0 0 rgba(124,92,255,0.6), 2px 0 0 0 rgba(124,92,255,0.15); } } /* Done: checkmark icon, green tint */ .phase-step.done { color: rgba(255, 255, 255, 0.55); } .phase-step.done .phase-step-icon { border-color: #34d399; background: rgba(52, 211, 153, 0.12); color: #34d399; } /* Dismiss button */ .phase-tracker-dismiss { margin-left: auto; padding-left: 12px; flex-shrink: 0; background: none; border: none; color: rgba(255, 255, 255, 0.25); font-size: 16px; cursor: pointer; line-height: 1; transition: color 0.15s; font-family: inherit; } .phase-tracker-dismiss:hover { color: rgba(255, 255, 255, 0.6); } /* Preview Container - wrapper for centering the iframe */ .preview-container { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 1rem; overflow: hidden; /* Positioning context for absolutely-positioned children (the preview loader overlays at inset:0 inside this container; without position:relative the inset:0 would resolve against a higher ancestor and bleed over the chat panel). */ position: relative; background: var(--bg-soft-2); /* Subtle dot grid backdrop for the empty preview canvas */ background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 22px 22px; background-position: 0 0; } /* Preview Frame - the actual preview area */ .preview-frame { display: none; flex: 1; background: white; border: none; box-shadow: var(--shadow-lg); border-radius: var(--radius-md); transition: width 0.3s ease; } .preview-frame.active { display: block; } /* Custom microsite mode — iframe is sized at 1280×800 and CSS-scaled to fit. JS sets explicit width/height/transform; we just suppress flex sizing and the width transition so they don't fight. */ .preview-frame.microsite-mode { flex: none; transition: none; border-radius: var(--radius-md); } /* Viewport sizes - width varies, flex: 1 handles height */ .preview-container.viewport-mobile .preview-frame { width: 375px; max-width: calc(100% - 2rem); } .preview-container.viewport-tablet .preview-frame { width: 768px; max-width: calc(100% - 2rem); } .preview-container.viewport-desktop .preview-frame { width: calc(100% - 2rem); } /* Scroll-driven sites: wheel events on the preview are relayed to the iframe's contentWindow via scrollBy() in preview.js — no CSS changes needed here. */ /* Preview Placeholder - shown before any site is built */ .preview-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem; color: var(--text-muted); } .preview-placeholder svg { margin-bottom: 1rem; opacity: 0.35; color: var(--accent); } .preview-placeholder p { font-size: 1.0625rem; margin-bottom: 0.4rem; color: var(--text); font-family: 'Fraunces', serif; font-weight: 700; } .preview-placeholder .preview-hint { font-size: 0.875rem; color: var(--text-muted); font-family: 'Inter', sans-serif; font-weight: 500; } .preview-placeholder.hidden { display: none; } /* ============================================================ PREVIEW LOADER — gradient orbs while AI is building ============================================================ Fills the preview container while the AI is generating JSON for a build/refinement. Hidden by default; PreviewLoader.show()/hide() in app.js drive visibility. Designed to feel like ambient "loading energy" rather than a fake-skeleton — the rendered site is too structurally variable for a meaningful skeleton. */ .preview-loader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; z-index: 5; pointer-events: none; overflow: hidden; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--bg) 40%, transparent) 0%, color-mix(in srgb, var(--bg) 85%, transparent) 80%); opacity: 0; transition: opacity 0.4s ease; } .preview-loader:not(.hidden) { opacity: 1; } .preview-loader.hidden { display: none; } /* The orb stage sets a fixed-size canvas for the orbs to orbit in. Center the stage so orbs can rotate around its center. */ .preview-loader-stage { position: relative; width: 320px; height: 320px; } .preview-loader-orb { position: absolute; top: 50%; left: 50%; width: 180px; height: 180px; border-radius: 50%; filter: blur(45px); mix-blend-mode: screen; opacity: 0.85; /* transform-origin is set to the orb's own center; the rotation around the stage center is achieved by setting margin-top/left to half the orb's size and then translating via the animation. */ margin-top: -90px; margin-left: -90px; } /* Each orb gets a different color, animation duration, and starting angle so the interference pattern is non-repeating and ambient. Using long durations (8-14s) keeps the motion calm — anything faster feels like a spinner rather than ambient atmosphere. */ .preview-loader-orb-1 { background: radial-gradient(circle, #7C5CFF 0%, #5B3FFF 60%, transparent 80%); animation: preview-loader-orbit-1 9s linear infinite; } .preview-loader-orb-2 { background: radial-gradient(circle, #FF6B9D 0%, #FF3D7F 60%, transparent 80%); animation: preview-loader-orbit-2 11s linear infinite; animation-delay: -2s; } .preview-loader-orb-3 { background: radial-gradient(circle, #4FC3F7 0%, #00B8D9 60%, transparent 80%); animation: preview-loader-orbit-3 13s linear infinite; animation-delay: -5s; } .preview-loader-orb-4 { background: radial-gradient(circle, #FFB74D 0%, #FF8A00 60%, transparent 80%); animation: preview-loader-orbit-4 14s linear infinite; animation-delay: -7s; opacity: 0.6; } /* Each orb has its own orbit path. Different radii + counter-rotating pairs (1+3 clockwise, 2+4 counter-clockwise) create swirling interference that never quite repeats. translate goes BEFORE rotate so the orb orbits around the stage center rather than spinning in place. */ @keyframes preview-loader-orbit-1 { from { transform: rotate(0deg) translate(75px) rotate(0deg); } to { transform: rotate(360deg) translate(75px) rotate(-360deg); } } @keyframes preview-loader-orbit-2 { from { transform: rotate(0deg) translate(95px) rotate(0deg); } to { transform: rotate(-360deg) translate(95px) rotate(360deg); } } @keyframes preview-loader-orbit-3 { from { transform: rotate(60deg) translate(60px) rotate(0deg); } to { transform: rotate(420deg) translate(60px) rotate(-360deg); } } @keyframes preview-loader-orbit-4 { from { transform: rotate(180deg) translate(110px) rotate(0deg); } to { transform: rotate(-180deg) translate(110px) rotate(360deg); } } /* Phase text: the morphing copy below the orbs. */ .preview-loader-text { display: flex; align-items: baseline; gap: 0.5rem; color: var(--text); font-family: 'Inter', system-ui, sans-serif; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); transition: opacity 0.3s ease; } .preview-loader-phase { /* Inline-block so we can measure and crossfade phase changes via JS without layout shift. Width set via JS to the widest expected phrase so phrase swaps don't jitter the dots. */ display: inline-block; } .preview-loader-phase.swap { opacity: 0; } .preview-loader-dots { display: inline-flex; gap: 4px; } .preview-loader-dots span { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: preview-loader-dot-pulse 1.4s ease-in-out infinite; } .preview-loader-dots span:nth-child(2) { animation-delay: 0.2s; } .preview-loader-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes preview-loader-dot-pulse { 0%, 60%, 100% { opacity: 0.25; transform: scale(0.85); } 30% { opacity: 1; transform: scale(1.1); } } /* Respect prefers-reduced-motion: keep the orbs static, dim the dots, skip the rotation. The user still sees "something is happening" via the phase text changes. */ @media (prefers-reduced-motion: reduce) { .preview-loader-orb { animation: none; } .preview-loader-dots span { animation: none; opacity: 0.6; } } /* ============================================================ RESPONSIVE ============================================================ */ /* Toolbar two-row mode: on screens narrower than ~1300px the growing action-button row would otherwise overflow / clip off the right edge (Undo/Redo/Download getting cut off). Above 1300px nothing changes — single row exactly as designed. Below it, the logo stays top-left and the controls wrap onto their own full-width second row. The 900px rule below takes over for the centered/stacked small-screen layout. */ @media (max-width: 1300px) and (min-width: 901px) { .builder-header { flex-wrap: wrap; gap: 0.6rem 1rem; } .header-controls { width: 100%; flex-wrap: wrap; gap: 0.6rem 1rem; justify-content: flex-start; } } @media (max-width: 900px) { .builder-header { flex-direction: column; gap: 0.75rem; padding: 1rem; } .header-left { text-align: center; align-items: center; } .header-controls { width: 100%; justify-content: center; flex-wrap: wrap; } /* Force vertical layout on smaller screens */ .builder-main.layout-horizontal { flex-direction: column; } .layout-horizontal .chat-panel { width: 100%; max-width: none; height: 50%; border-right: none; border-bottom: 1px solid var(--border); } } @media (max-width: 600px) { body { padding: 0; } .builder-wrapper { height: 100vh; border-radius: 0; } .header-controls { gap: 0.6rem; } .control-label { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .message { opacity: 1; transform: none; } } /* ============================================================ GOALS PANEL — first-load planning prompt ============================================================ */ .goals-panel { display: flex; flex-direction: column; flex: auto; overflow-y: auto; padding: 1.25rem; background: transparent; /* Firefox scrollbar styling */ scrollbar-width: thin; scrollbar-color: var(--accent) transparent; } /* Webkit (Chrome / Safari / Edge) — make the scrollbar noticeably more visible than the default thin-grey-on-dark. The goals panel is a one-time discoverability surface; users need to see "there's more below" before they engage with the cards. Wider thumb + brand-color gradient does the job without dominating the panel. */ .goals-panel::-webkit-scrollbar { width: 10px; } .goals-panel::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); border-radius: 5px; margin: 0.5rem 0; } .goals-panel::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent) 0%, var(--accent-3) 100%); border-radius: 5px; } .goals-panel::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent-3) 100%); } .goals-panel.hidden { display: none; } .goals-header { text-align: center; margin-bottom: 0.875rem; } .goals-title { font-family: 'Fraunces', serif; font-size: 1.375rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; margin: 0 0 0.4rem 0; line-height: 1.2; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .goals-subtitle { font-size: 0.85rem; color: var(--text-muted); margin: 0; line-height: 1.45; } .goals-skip { width: 100%; padding: 0.55rem 0.75rem; background: var(--bg-input); color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); font-size: 0.8125rem; font-weight: 500; font-family: inherit; cursor: pointer; margin-bottom: 0.875rem; transition: all 0.15s ease; } .goals-skip:hover { border-color: var(--border-glow); color: var(--text); background: var(--accent-glow); } .goals-skip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .goals-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; margin-bottom: 0.875rem; } .goal-card { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.65rem 0.7rem; text-align: left; cursor: pointer; color: var(--text); display: flex; flex-direction: column; gap: 0.25rem; transition: all 0.15s ease; font-family: inherit; } .goal-card:hover { border-color: var(--border-glow); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(124, 92, 255, 0.12); } .goal-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .goal-card[aria-pressed="true"] { border-color: var(--accent); background: linear-gradient(135deg, rgba(124, 92, 255, 0.12) 0%, rgba(255, 122, 198, 0.08) 100%); box-shadow: 0 4px 20px rgba(124, 92, 255, 0.18); } .goal-card[aria-pressed="true"]::after { content: '✓'; position: absolute; top: 6px; right: 8px; color: var(--accent-3); font-weight: 700; font-size: 0.85rem; } .goal-icon { font-size: 1.25rem; line-height: 1; } .goal-name { font-size: 0.8125rem; font-weight: 600; color: var(--text); line-height: 1.25; } .goal-desc { font-size: 0.7rem; color: var(--text-muted); line-height: 1.35; } .goals-continue { width: 100%; padding: 0.8rem; background: var(--gradient-2); color: white; border: none; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 600; font-family: inherit; cursor: pointer; box-shadow: 0 4px 16px var(--accent-glow); transition: all 0.15s ease; margin-top: auto; } .goals-continue:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 24px var(--accent-glow); } .goals-continue:focus-visible { outline: 2px solid var(--accent-3); outline-offset: 2px; } .goals-continue:disabled { background: var(--bg-input); color: var(--text-dim); cursor: not-allowed; opacity: 0.7; box-shadow: none; border: 1px solid var(--border); } /* ============================================================ AMBITION SLIDER — 3-stop radio group styled as slider ============================================================ */ .ambition-slider { margin-top: 0.25rem; margin-bottom: 1rem; padding: 0.875rem 1rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); } .ambition-header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; } .ambition-title { font-size: 0.8125rem; font-weight: 600; color: var(--text); } .ambition-hint { font-size: 0.7rem; color: var(--text-muted); line-height: 1.2; } .ambition-track { display: grid; grid-template-columns: 1fr 1fr 1fr; position: relative; gap: 0; align-items: start; } .ambition-track::before { content: ""; position: absolute; top: 7px; left: 12%; right: 12%; height: 2px; background: var(--border); z-index: 0; } .ambition-stop { appearance: none; background: transparent; border: none; padding: 0; margin: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; font-family: inherit; color: var(--text-muted); position: relative; z-index: 1; transition: color 0.15s ease; } .ambition-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--bg-soft); border: 2px solid var(--border-strong); transition: all 0.15s ease; display: block; } .ambition-label { font-size: 0.7rem; font-weight: 500; line-height: 1.2; text-align: center; } .ambition-stop:hover .ambition-dot { border-color: var(--accent); transform: scale(1.1); } .ambition-stop:focus-visible { outline: none; } .ambition-stop:focus-visible .ambition-dot { box-shadow: 0 0 0 3px var(--accent-glow); } .ambition-stop.is-selected { color: var(--text); } .ambition-stop.is-selected .ambition-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); } .ambition-stop.is-selected .ambition-label { font-weight: 600; } /* Vertical layout — slider is compact in shorter chat area */ .layout-vertical .ambition-slider { padding: 0.625rem 0.75rem; margin-top: 0.75rem; } .layout-vertical .ambition-hint { display: none; } .layout-vertical .ambition-label { font-size: 0.65rem; } /* Vertical layout — goals panel in shorter chat area */ .layout-vertical .goals-panel { padding: 1rem; } .layout-vertical .goals-grid { grid-template-columns: repeat(4, 1fr); } .layout-vertical .goal-card { padding: 0.5rem 0.45rem; } .layout-vertical .goal-name { font-size: 0.7rem; } .layout-vertical .goal-desc { display: none; } /* ============================================================ GOALS PANEL — view switching ============================================================ */ /* .goals-view is a normal block child of the scrolling .goals-panel. It does NOT participate in flex sizing — letting it be flex:1 inside a flex-column scroll container traps its content against its own shrunk height and the panel's overflow-y never kicks in. Net effect: bottom buttons get clipped without a scrollbar appearing. Make .goals-panel the sole scroll authority; the views inside it stack naturally and the panel scrolls when content overflows. */ .goals-view { display: block; } .goals-view.hidden { display: none; } /* ============================================================ MODE CHOOSER — top-of-panel "Website vs Dashboard" selector ============================================================ Two equally-weighted cards. Website is .is-active by default. Clicking a card toggles the mode and reveals the relevant sub-view below. Always visible at the top of the goals panel — the user's FIRST decision is which product they're building. */ .mode-chooser { margin-bottom: 1.25rem; } /* ============================================================ Recent projects — shown between mode chooser and goal cards when localStorage has saved sites. Hidden when empty. ============================================================ */ .recent-projects-section { margin-bottom: 1rem; } .recent-projects-toggle { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.4rem 0.5rem; border-radius: 6px; cursor: pointer; transition: background 0.12s; } .recent-projects-toggle:hover { background: rgba(255,255,255,0.05); } .recent-projects-title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted, #8e9ab0); } .recent-projects-chevron { width: 14px; height: 14px; color: var(--text-muted, #8e9ab0); transition: transform 0.18s ease; flex-shrink: 0; } .recent-projects-toggle[aria-expanded="true"] .recent-projects-chevron { transform: rotate(180deg); } .recent-projects-list { display: none; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; padding: 0 0.25rem; } .recent-projects-list.is-open { display: flex; } .rp-tile { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .rp-tile:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); } .rp-thumb { width: 48px; height: 36px; border-radius: 5px; background: rgba(255,255,255,0.07); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; font-size: 1.25rem; color: rgba(255,255,255,0.3); } .rp-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; } .rp-info { flex: 1 1 0; min-width: 0; } .rp-name { font-size: 0.875rem; font-weight: 600; color: var(--text, #F5F7FF); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rp-meta { font-size: 0.7rem; color: var(--text-muted, #8e9ab0); margin-top: 0.1rem; } .rp-open-btn { padding: 0.3rem 0.75rem; font-size: 0.75rem; font-weight: 600; border-radius: 6px; border: 1px solid rgba(124,92,255,0.5); background: rgba(124,92,255,0.15); color: #b8a4ff; cursor: pointer; white-space: nowrap; transition: background 0.15s; flex-shrink: 0; } .rp-open-btn:hover { background: rgba(124,92,255,0.3); } .rp-forget-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; border: none; background: transparent; color: var(--text-muted, #8e9ab0); cursor: pointer; flex-shrink: 0; font-size: 1rem; transition: background 0.15s, color 0.15s; } .rp-forget-btn:hover { background: rgba(255,80,80,0.12); color: #ff6b6b; } .mode-chooser-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.625rem; color: var(--text); text-align: center; letter-spacing: -0.01em; } .mode-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .mode-card { /* Reset button defaults */ appearance: none; font-family: inherit; cursor: pointer; /* Card layout */ display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; padding: 0.75rem 0.8rem; background: var(--bg-input); border: 1.5px solid var(--border); border-radius: var(--radius-md); color: var(--text); text-align: left; transition: all 0.15s ease; position: relative; } .mode-card:hover { border-color: var(--accent); background: var(--accent-glow); transform: translateY(-1px); } .mode-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .mode-card.is-active { border-color: var(--accent); background: var(--accent-glow); box-shadow: 0 0 0 1px var(--accent), 0 4px 12px var(--accent-glow); } .mode-card.is-active::before { content: "✓"; position: absolute; top: 0.5rem; right: 0.625rem; color: var(--accent); font-size: 0.85rem; font-weight: 700; } .mode-card-icon { font-size: 1.65rem; line-height: 1; } .mode-card-title { font-size: 0.95rem; font-weight: 700; color: var(--text); line-height: 1.2; } .mode-card-desc { font-size: 0.72rem; color: var(--text-muted); line-height: 1.35; } /* Very narrow — stack to single column */ @media (max-width: 360px) { .mode-cards { grid-template-columns: 1fr; } } /* App mode hint list */ .app-mode-hints { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.25rem 0 1.25rem; } .app-mode-hint-item { font-size: 0.85rem; color: var(--text-muted); padding: 0.5rem 0.75rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); line-height: 1.4; } /* Vertical layout — compact the cards a bit */ .layout-vertical .mode-cards { gap: 0.5rem; } .layout-vertical .mode-card { padding: 0.6rem 0.7rem; } .layout-vertical .mode-card-icon { font-size: 1.3rem; } .layout-vertical .mode-card-title { font-size: 0.85rem; } .layout-vertical .mode-card-desc { font-size: 0.65rem; } /* ----------- Inspired-by row (Phase 3 reference inspiration) ----------- */ .inspired-by-row { margin-top: 1rem; padding: 0.875rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; gap: 0.5rem; } .inspired-by-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text); letter-spacing: 0.01em; } .inspired-by-optional { font-weight: 400; color: var(--text-muted); } .inspired-by-controls { display: flex; gap: 0.5rem; align-items: stretch; } .inspired-by-input { flex: 1; min-width: 0; padding: 0.5rem 0.7rem; background: var(--bg); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-size: 0.8rem; font-family: inherit; outline: none; transition: border-color 0.15s ease; } .inspired-by-input:focus { border-color: var(--accent); } .inspired-by-input::placeholder { color: var(--text-muted); opacity: 0.8; } .inspired-by-screenshot-wrap { flex-shrink: 0; } .inspired-by-screenshot-btn { display: flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.7rem; height: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 7px; color: var(--text-muted); font-size: 0.78rem; font-family: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .inspired-by-screenshot-btn:hover { border-color: var(--accent); color: var(--accent); } .inspired-by-screenshot-btn.has-image { border-color: #22c55e; color: #22c55e; background: rgba(34, 197, 94, 0.07); } .inspired-by-screenshot-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .inspired-by-screenshot-icon { font-size: 0.9rem; line-height: 1; } .inspired-by-hint { font-size: 0.73rem; color: var(--text-muted); margin: 0; line-height: 1.4; } /* ------------------------------------------------------------------ */ .goals-mode-toggle { width: 100%; margin-top: 0.875rem; padding: 0.6rem; background: transparent; color: var(--text-muted); border: none; border-top: 1px solid var(--border); font-size: 0.8125rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: color 0.15s ease; } /* Blank page opt-in link (Phase 2, item 6b). Subdued text-link weight — never competes with Skip / Continue. */ .goals-blank-link { display: block; width: 100%; margin-top: 0.5rem; padding: 0.35rem 0; background: transparent; color: var(--text-dim, #8892a4); border: none; font-size: 0.75rem; font-family: inherit; cursor: pointer; text-align: center; text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s ease; } .goals-blank-link:hover { color: var(--text-muted, #a0aec0); } .goals-blank-link[hidden] { display: none; } .goals-mode-toggle:hover { color: var(--accent-3); } .goals-mode-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .goals-back { width: 100%; padding: 0.5rem; background: transparent; color: var(--accent-3); border: none; font-size: 0.8125rem; font-weight: 500; font-family: inherit; cursor: pointer; text-align: left; margin-bottom: 0.75rem; transition: color 0.15s ease; } .goals-back:hover { color: var(--text); text-decoration: underline; } .goals-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ============================================================ DATA VIEW (CSV/Excel/JSON upload for dashboards) ============================================================ */ /* Drop zone (empty state) */ .data-drop-zone { border: 2px dashed var(--border); border-radius: var(--radius-md); padding: 2rem 1rem; text-align: center; background: var(--bg-input); cursor: pointer; transition: all 0.15s ease; margin-bottom: 1rem; } .data-drop-zone:hover, .data-drop-zone.dragover { border-color: var(--accent); background: rgba(124, 92, 255, 0.06); } .data-drop-zone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .data-drop-icon { font-size: 2.5rem; margin-bottom: 0.5rem; line-height: 1; } .data-drop-title { margin: 0.25rem 0; font-size: 0.95rem; font-weight: 600; color: var(--text); } .data-drop-hint { margin: 0; font-size: 0.8rem; color: var(--text-muted); } /* Sample picker */ .data-samples { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; padding: 0.625rem 0.875rem; background: rgba(255, 255, 255, 0.02); border-radius: var(--radius-sm); border: 1px solid var(--border); } .data-samples-label { color: var(--text-muted); font-size: 0.8rem; } .data-sample-btn { background: var(--bg-input); border: 1px solid var(--border); color: var(--text); padding: 0.4rem 0.875rem; border-radius: 999px; font-family: inherit; font-size: 0.8rem; cursor: pointer; transition: border-color 0.15s ease; } .data-sample-btn:hover { border-color: var(--accent); } .data-sample-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Parsing state */ .data-parsing { text-align: center; padding: 2rem 1rem; color: var(--text-muted); } .data-parsing.hidden { display: none; } .data-spinner { display: inline-block; width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: data-spin 0.8s linear infinite; margin-bottom: 0.75rem; } @keyframes data-spin { to { transform: rotate(360deg); } } /* Error state */ .data-error { background: rgba(255, 122, 138, 0.08); border: 1px solid rgba(255, 122, 138, 0.3); border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 1rem; } .data-error.hidden { display: none; } .data-error-msg { color: #FFB4BD; margin: 0 0 0.75rem; font-size: 0.875rem; line-height: 1.4; } .data-retry-btn { background: var(--bg-input); border: 1px solid var(--border); color: var(--text); padding: 0.5rem 1rem; border-radius: var(--radius-sm); font-family: inherit; font-size: 0.85rem; cursor: pointer; } .data-retry-btn:hover { border-color: var(--accent); } /* Detected state — column preview */ .data-detected.hidden { display: none; } .data-file-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--bg-input); border-radius: var(--radius-sm); margin-bottom: 0.875rem; flex-wrap: wrap; } .data-file-name { font-weight: 600; color: var(--text); font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; } .data-file-meta { color: var(--text-muted); font-size: 0.8rem; } .data-warnings { background: rgba(255, 180, 68, 0.08); border-left: 3px solid #FFB444; padding: 0.6rem 0.875rem; border-radius: 4px; margin-bottom: 0.875rem; font-size: 0.8rem; color: var(--text-muted); } .data-warnings.hidden { display: none; } .data-warnings ul { margin: 0.25rem 0 0; padding-left: 1.25rem; } .data-columns-intro { color: var(--text-muted); font-size: 0.8rem; margin: 0 0 0.625rem; } /* Column rows (clickable to open editor) */ .data-columns-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; } .data-column-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; text-align: left; width: 100%; font-family: inherit; color: var(--text); } .data-column-row:hover { border-color: var(--accent); background: rgba(124, 92, 255, 0.04); } .data-column-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .data-column-name { font-weight: 600; font-size: 0.875rem; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .data-column-type { flex: 0 0 auto; font-size: 0.7rem; padding: 0.15rem 0.55rem; border-radius: 999px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .data-type-date { background: rgba(91, 232, 199, 0.15); color: var(--accent-3); } .data-type-number { background: rgba(124, 92, 255, 0.15); color: var(--accent); } .data-type-category { background: rgba(255, 180, 68, 0.15); color: #FFB444; } .data-type-text { background: rgba(255, 255, 255, 0.06); color: var(--text-muted); } .data-type-boolean { background: rgba(255, 122, 198, 0.15); color: var(--accent-2); } .data-type-email, .data-type-url { background: rgba(91, 232, 199, 0.1); color: var(--accent-3); } .data-type-unknown { background: rgba(255, 255, 255, 0.05); color: var(--text-dim); font-style: italic; } .data-column-subtype { flex: 0 0 auto; font-size: 0.7rem; padding: 0.1rem 0.45rem; border-radius: 4px; background: rgba(255, 255, 255, 0.06); color: var(--text-muted); } .data-column-cardinality { flex: 0 0 auto; font-size: 0.75rem; color: var(--text-dim); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .data-column-edit-hint { flex: 0 0 auto; font-size: 0.7rem; color: var(--text-dim); } /* Action row at bottom */ .data-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; } .data-actions .goals-continue { margin-top: 0; } /* Column editor popover */ .data-column-editor-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); z-index: 1500; display: flex; align-items: center; justify-content: center; padding: 1rem; } .data-column-editor-backdrop.hidden { display: none; } .data-column-editor { background: var(--bg-soft); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 1.25rem; max-width: 360px; width: 100%; box-shadow: var(--shadow-lg); } .data-column-editor h3 { margin: 0 0 0.25rem; font-size: 1rem; color: var(--text); } .data-column-editor .editor-subtitle { margin: 0 0 1rem; font-size: 0.8rem; color: var(--text-muted); } .data-column-editor .editor-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.875rem; } .data-column-editor .editor-label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .data-column-editor select { width: 100%; padding: 0.5rem 0.75rem; background: var(--bg-input); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.875rem; } .data-column-editor .editor-checks { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; } .data-column-editor .editor-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text); cursor: pointer; } .data-column-editor .editor-check input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; } .data-column-editor .editor-actions { display: flex; gap: 0.5rem; } .data-column-editor .editor-actions button { flex: 1; padding: 0.6rem; border-radius: var(--radius-sm); font-family: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; border: none; } .data-column-editor .editor-save { background: var(--gradient-2); color: white; } .data-column-editor .editor-cancel { background: var(--bg-input); color: var(--text); border: 1px solid var(--border); } /* Vertical-layout compact tweaks */ .layout-vertical .data-drop-zone { padding: 1.25rem 1rem; } .layout-vertical .data-drop-icon { font-size: 1.75rem; } .layout-vertical .data-column-cardinality { display: none; } /* ============================================================ COMP / DESIGN UPLOAD VIEW (View 4 in goals panel) ============================================================ */ .comp-drop-zone { border: 2px dashed var(--border); border-radius: var(--radius-md); padding: 2rem 1rem; text-align: center; background: var(--bg-input); cursor: pointer; transition: all 0.15s ease; margin-bottom: 0.875rem; } .comp-drop-zone:hover, .comp-drop-zone.dragover { border-color: var(--accent); background: rgba(124, 92, 255, 0.06); } .comp-drop-zone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .comp-drop-icon { font-size: 2.5rem; margin-bottom: 0.5rem; line-height: 1; } .comp-drop-title { margin: 0.25rem 0; font-size: 0.95rem; font-weight: 600; color: var(--text); } .comp-drop-hint { margin: 0; font-size: 0.8rem; color: var(--text-muted); } .comp-framing { font-size: 0.8rem; color: var(--text-muted); line-height: 1.55; margin: 0.25rem 0 0; padding: 0.625rem 0.875rem; background: rgba(255, 255, 255, 0.02); border-radius: var(--radius-sm); border: 1px solid var(--border); } /* Preview state */ .comp-preview-wrap { margin-bottom: 1rem; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); background: var(--bg-input); } .comp-preview-img { width: 100%; max-height: 220px; object-fit: contain; display: block; background: #111; padding: 0.5rem; box-sizing: border-box; } .comp-preview-meta { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.875rem; border-top: 1px solid var(--border); gap: 0.5rem; } .comp-preview-name { font-size: 0.8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } /* Error state */ .comp-error { background: rgba(255, 122, 138, 0.08); border: 1px solid rgba(255, 122, 138, 0.3); border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 1rem; } .comp-error.hidden { display: none; } .comp-error-msg { color: #FFB4BD; margin: 0 0 0.75rem; font-size: 0.875rem; } /* Vertical layout tweaks */ .layout-vertical .comp-drop-zone { padding: 1.25rem 1rem; } .layout-vertical .comp-drop-icon { font-size: 1.75rem; } /* ============================================================ COMPONENT PICKER (power-user view) ============================================================ */ .component-search-row { margin-bottom: 0.6rem; } .component-search { width: 100%; padding: 0.6rem 0.85rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.85rem; font-family: inherit; background: var(--bg-input); color: var(--text); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .component-search::placeholder { color: var(--text-dim); } .component-search:focus { outline: none; border-color: var(--border-glow); box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.15); } .component-categories { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.75rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); } .component-cat-btn { padding: 0.32rem 0.75rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: 999px; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); cursor: pointer; transition: all 0.15s ease; font-family: inherit; } .component-cat-btn:hover { border-color: var(--border-glow); color: var(--text); } .component-cat-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .component-cat-btn.active { background: var(--gradient-2); border-color: transparent; color: white; box-shadow: 0 2px 12px var(--accent-glow); } .components-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; margin-bottom: 0.75rem; overflow-y: auto; max-height: calc(100vh - 380px); padding-right: 0.25rem; } .components-grid { scrollbar-width: thin; scrollbar-color: var(--accent) rgba(255,255,255,0.04); } .components-grid::-webkit-scrollbar { width: 8px; } .components-grid::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); border-radius: 4px; } .components-grid::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; } .components-grid::-webkit-scrollbar-thumb:hover { background: var(--accent-2); } .component-card { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.55rem 0.6rem; text-align: left; cursor: pointer; color: var(--text); display: flex; flex-direction: column; gap: 0.2rem; transition: all 0.12s ease; font-family: inherit; } .component-card:hover { border-color: var(--border-glow); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124, 92, 255, 0.12); } .component-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .component-card[aria-pressed="true"] { border-color: var(--accent); background: linear-gradient(135deg, rgba(124, 92, 255, 0.12) 0%, rgba(255, 122, 198, 0.06) 100%); } .component-card[aria-pressed="true"]::after { content: '✓'; position: absolute; top: 4px; right: 6px; color: var(--accent-3); font-weight: 700; font-size: 0.75rem; } .component-card.hidden { display: none; } .component-card-name { font-size: 0.78rem; font-weight: 600; color: var(--text); line-height: 1.2; } .component-card-desc { font-size: 0.66rem; color: var(--text-muted); line-height: 1.3; } .components-empty { grid-column: 1 / -1; text-align: center; padding: 1.5rem 0.5rem; color: var(--text-dim); font-size: 0.825rem; font-style: italic; } /* Vertical layout — components grid expands across full width */ .layout-vertical .components-grid { grid-template-columns: repeat(4, 1fr); max-height: calc(50vh - 280px); } .layout-vertical .component-card-desc { display: none; } /* ============================================================ SOURCE BUTTON ============================================================ */ .source-btn { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; background: var(--bg-input); color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; font-size: 0.8rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .source-btn:hover:not(:disabled) { background: var(--bg-soft); color: var(--text); border-color: var(--border-strong); } .source-btn:disabled { opacity: 0.4; cursor: not-allowed; } .source-btn svg { flex-shrink: 0; } /* Stacked-panels edit mode toggle button */ .sp-edit-mode-btn { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; background: var(--bg-input); color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; font-size: 0.8rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .sp-edit-mode-btn:hover { background: var(--bg-soft); color: var(--text); border-color: var(--border-strong); } .sp-edit-mode-btn.active { background: #f59e0b22; color: #d97706; border-color: #d97706; } .sp-edit-mode-btn svg { flex-shrink: 0; } /* ============================================================ SOURCE VIEWER MODAL ============================================================ */ .sv-modal-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(0, 0, 0, 0.72); display: flex; align-items: center; justify-content: center; padding: 2vh 2vw; animation: sv-fade-in 0.15s ease; } .sv-modal-overlay[hidden] { display: none !important; } @keyframes sv-fade-in { from { opacity: 0; } to { opacity: 1; } } .sv-modal { background: #0d1117; border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; width: min(80vw, 1100px); height: min(85vh, 800px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,0.7); animation: sv-slide-in 0.18s ease; } @keyframes sv-slide-in { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Header */ .sv-modal-header { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.08); background: #111827; flex-shrink: 0; } .sv-modal-title { font-size: 0.95rem; font-weight: 600; color: #f5f7ff; margin: 0; font-family: inherit; } .sv-modal-desc { font-size: 0.75rem; color: rgba(245,247,255,0.5); margin: 0; flex: 1; } .sv-close-btn { background: none; border: none; color: rgba(245,247,255,0.5); cursor: pointer; padding: 0.25rem; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background 0.15s; flex-shrink: 0; } .sv-close-btn:hover { color: #f5f7ff; background: rgba(255,255,255,0.08); } /* Body: two-column */ .sv-modal-body { display: flex; flex: 1; overflow: hidden; } /* File tree (left) */ .sv-file-tree { width: 210px; flex-shrink: 0; background: #0d1117; border-right: 1px solid rgba(255,255,255,0.08); overflow-y: auto; padding: 0.75rem 0; } .sv-file-list { list-style: none; margin: 0; padding: 0; } .sv-file-item { display: flex; align-items: baseline; gap: 0.4rem; padding: 0.45rem 1rem; font-size: 0.78rem; font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; color: rgba(245,247,255,0.65); cursor: pointer; border: none; background: none; width: 100%; text-align: left; transition: background 0.12s, color 0.12s; border-radius: 0; } .sv-file-item:hover { background: rgba(255,255,255,0.05); color: #f5f7ff; } .sv-file-item.is-active { background: rgba(124,92,255,0.18); color: #c5b3ff; } .sv-file-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sv-file-item-size { font-size: 0.68rem; color: rgba(245,247,255,0.35); flex-shrink: 0; } /* Code pane (right) */ .sv-code-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #161b22; } .sv-code-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 1rem; background: #1c2333; border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; } .sv-active-filename { font-size: 0.78rem; font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; color: rgba(245,247,255,0.6); } .sv-copy-btn { font-size: 0.75rem; font-family: inherit; font-weight: 500; padding: 0.3rem 0.8rem; background: rgba(124,92,255,0.15); color: #c5b3ff; border: 1px solid rgba(124,92,255,0.35); border-radius: 6px; cursor: pointer; transition: background 0.15s; } .sv-copy-btn:hover { background: rgba(124,92,255,0.28); } .sv-copy-btn.copied { background: rgba(91,232,199,0.15); color: #5be8c7; border-color: rgba(91,232,199,0.35); } .sv-code-container { flex: 1; overflow: auto; position: relative; } /* Loading / empty states */ .sv-loading, .sv-empty-state { padding: 2rem; color: rgba(245,247,255,0.4); font-size: 0.85rem; font-family: inherit; } .sv-loading { font-style: italic; } /* Override Prism tomorrow theme to fit our container */ .sv-pre { margin: 0 !important; border-radius: 0 !important; background: #161b22 !important; font-size: 0.78rem !important; line-height: 1.6 !important; font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace !important; min-height: 100%; tab-size: 2; } /* Line numbers gutter */ .sv-pre.line-numbers .line-numbers-rows { background: #1c2333 !important; border-right: 1px solid rgba(255,255,255,0.07) !important; } /* Large-file notice */ .sv-size-warning { display: inline-block; margin: 0.75rem 1rem; padding: 0.4rem 0.8rem; background: rgba(255,200,0,0.12); border: 1px solid rgba(255,200,0,0.3); border-radius: 6px; font-size: 0.75rem; color: #ffd76b; } /* Hide utility for source viewer elements */ #sv-loading.hidden, #sv-empty-state.hidden, #sv-pre.hidden { display: none !important; } /* Screen-reader only */ .sv-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Responsive: full-screen on small displays */ @media (max-width: 768px) { .sv-modal { width: 100vw; height: 100dvh; border-radius: 0; border: none; } .sv-file-tree { width: 160px; } .sv-modal-desc { display: none; } } /* ── Nav-link edit modal colour override ─────────────────────────────────── The builder page uses --text: #F5F7FF (near-white) on a dark background. The RSL modal is white-background, so inherited text would be invisible. Scope every text/input/label/radio inside the modal to dark colours, bypassing the builder's CSS variable cascade. ───────────────────────────────────────────────────────────────────────── */ #nav-link-edit-modal .modal { color: #1a1a2e; } #nav-link-edit-modal .modal-header h2, #nav-link-edit-modal .modal-header #modalTitle { color: #111827; font-size: 1rem; font-weight: 700; } #nav-link-edit-modal .modal-body label, #nav-link-edit-modal .modal-body input[type="text"], #nav-link-edit-modal .modal-body input[type="radio"], #nav-link-edit-modal .modal-body .rsl-select-wrapper, #nav-link-edit-modal .modal-body .rsl-select-trigger, #nav-link-edit-modal .modal-body .rsl-select-search, #nav-link-edit-modal .modal-body .rsl-select-option { color: #1a1a2e; } #nav-link-edit-modal .modal-body input[type="text"] { background: #fff; border: 1px solid #d1d5db; border-radius: 6px; padding: 0.5rem 0.65rem; font-size: 0.9rem; width: 100%; box-sizing: border-box; } #nav-link-edit-modal .modal-body input[type="text"]:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); } #nav-link-edit-modal .modal-body .rsl-select-wrapper { background: #fff; border-color: #d1d5db; } #nav-link-edit-modal .modal-body .rsl-select-option:hover, #nav-link-edit-modal .modal-body .rsl-select-option.is-focused { background: #f3f4f6; color: #1a1a2e; } #nav-link-edit-modal .modal-body .rsl-select-option.is-selected { background: #ede9fe; color: #4c1d95; } #nav-link-edit-modal .modal-footer .btn:not(.btn-primary) { color: #374151; background: #f9fafb; border: 1px solid #d1d5db; } #nav-link-edit-modal .modal-footer .btn:not(.btn-primary):hover { background: #f3f4f6; } /* Inline Link Edit Modal — same dark-bg override pattern as nav-link-edit. */ #link-edit-modal .modal { color: #1a1a2e; } #link-edit-modal .modal-header h2, #link-edit-modal .modal-header #leLinkModalTitle { color: #111827; font-size: 1rem; font-weight: 700; } #link-edit-modal .modal-body label, #link-edit-modal .modal-body input[type="text"], #link-edit-modal .modal-body input[type="radio"], #link-edit-modal .modal-body .rsl-select-wrapper, #link-edit-modal .modal-body .rsl-select-trigger, #link-edit-modal .modal-body .rsl-select-search, #link-edit-modal .modal-body .rsl-select-option { color: #1a1a2e; } #link-edit-modal .modal-body input[type="text"] { background: #fff; border: 1px solid #d1d5db; border-radius: 6px; padding: 0.5rem 0.65rem; font-size: 0.9rem; width: 100%; box-sizing: border-box; } #link-edit-modal .modal-body input[type="text"]:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); } #link-edit-modal .modal-body .rsl-select-wrapper { background: #fff; border-color: #d1d5db; } #link-edit-modal .modal-body .rsl-select-option:hover, #link-edit-modal .modal-body .rsl-select-option.is-focused { background: #f3f4f6; color: #1a1a2e; } #link-edit-modal .modal-body .rsl-select-option.is-selected { background: #ede9fe; color: #4c1d95; } #link-edit-modal .modal-footer .btn:not(.btn-primary) { color: #374151; background: #f9fafb; border: 1px solid #d1d5db; } #link-edit-modal .modal-footer .btn:not(.btn-primary):hover { background: #f3f4f6; } /* Nav CSV Import Modal (Phase 1.5.b) — same dark-bg override pattern as nav-link-edit. Builder sets --text: #F5F7FF globally; RSL modal has white bg; force dark text. */ #nav-csv-import-modal .modal { color: #1a1a2e; } #nav-csv-import-modal .modal-header h2, #nav-csv-import-modal .modal-header #nciModalTitle { color: #111827; font-size: 1rem; font-weight: 700; } #nav-csv-import-modal .modal-body label, #nav-csv-import-modal .modal-body p, #nav-csv-import-modal .modal-body textarea, #nav-csv-import-modal .modal-body button, #nav-csv-import-modal .modal-body input[type="text"] { color: #1a1a2e; } #nav-csv-import-modal .modal-body textarea { background: #fff; border-color: #d1d5db; } #nav-csv-import-modal .modal-body textarea:focus { border-color: #7C5CFF; outline: none; } #nav-csv-import-modal .modal-body table th, #nav-csv-import-modal .modal-body table td { color: #1f2937; } #nav-csv-import-modal .modal-footer .btn:not(.btn-primary) { color: #374151; background: #f9fafb; border: 1px solid #d1d5db; } #nav-csv-import-modal .modal-footer .btn:not(.btn-primary):hover { background: #f3f4f6; } /* ============================================================ SITEMAP SIDEBAR (Phase 2) Third column in the builder-main flex row. Slides in from between the chat panel and preview panel. Hidden until the user toggles it OR the site grows to 2+ pages (auto-opens). Width is narrow enough to keep preview usable; wide enough to show full page titles + action icons without truncation. ============================================================ */ /* Toggle button in header — same shape as source-btn / download-btn */ .sitemap-toggle-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-size: 0.8125rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; } .sitemap-toggle-btn:hover:not(:disabled) { background: rgba(124, 92, 255, 0.12); border-color: var(--accent); color: var(--accent); } .sitemap-toggle-btn.active { background: rgba(124, 92, 255, 0.15); border-color: var(--accent); color: var(--accent); } .sitemap-toggle-btn:disabled { opacity: 0.35; cursor: not-allowed; } /* Sidebar panel — overflow:visible so action button tooltips (positioned absolutely to the right) can escape into the preview panel. Width is constrained by min/max-width; flex children handle their own clipping. */ .sitemap-sidebar { width: 220px; min-width: 220px; max-width: 220px; display: flex; flex-direction: column; background: var(--bg-soft, #111634); border-right: 1px solid var(--border); overflow: visible; flex-shrink: 0; /* Collapse animation — width-based so the flex siblings reflow smoothly */ transition: width 0.2s ease, min-width 0.2s ease, opacity 0.2s ease; } .sitemap-sidebar[hidden] { display: none; } /* Header row: "Pages" title + close button */ .sitemap-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .sitemap-sidebar-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); } .sitemap-sidebar-close { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: transparent; border: none; border-radius: 4px; color: var(--text-dim); cursor: pointer; transition: background 0.12s, color 0.12s; padding: 0; } .sitemap-sidebar-close:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); } /* Search / filter row */ .sitemap-search-row { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .sitemap-search-icon { color: var(--text-dim); flex-shrink: 0; } .sitemap-search-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-size: 0.78rem; font-family: inherit; padding: 0; line-height: 1.4; } .sitemap-search-input::placeholder { color: var(--text-dim); } /* Hide browser's native clear button — we clear on Escape */ .sitemap-search-input::-webkit-search-cancel-button { display: none; } /* Page list */ .sitemap-page-list { list-style: none; padding: 6px 0; margin: 0; flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent; } .sitemap-page-list::-webkit-scrollbar { width: 4px; } .sitemap-page-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; } /* Individual page row */ .sitemap-page-row { display: flex; align-items: center; gap: 0; padding: 0 6px 0 0; cursor: pointer; border-left: 2px solid transparent; transition: background 0.12s, border-color 0.12s; position: relative; } .sitemap-page-row:hover { background: rgba(255, 255, 255, 0.04); } .sitemap-page-row.active { background: rgba(124, 92, 255, 0.1); border-left-color: var(--accent); } /* Page icon + text block — grows to fill, triggers page switch on click */ .sitemap-page-row-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 7px 4px 7px 10px; /* Entire main area is the click target for page switching */ } .sitemap-page-icon { flex-shrink: 0; width: 14px; height: 14px; color: var(--text-dim); opacity: 0.7; } .sitemap-page-row.active .sitemap-page-icon { color: var(--accent); opacity: 1; } .sitemap-page-info { display: flex; flex-direction: column; min-width: 0; } .sitemap-page-title { font-size: 0.8125rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .sitemap-page-row.active .sitemap-page-title { color: var(--text); font-weight: 600; } .sitemap-page-slug { font-size: 0.6875rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: Menlo, Monaco, monospace; line-height: 1.3; } /* Action icons — shown on row hover */ .sitemap-page-actions { display: flex; align-items: center; gap: 1px; opacity: 0; transition: opacity 0.12s; flex-shrink: 0; } .sitemap-page-row:hover .sitemap-page-actions, .sitemap-page-row:focus-within .sitemap-page-actions { opacity: 1; } .sitemap-action-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: transparent; border: none; border-radius: 4px; color: var(--text-dim); cursor: pointer; transition: background 0.12s, color 0.12s; padding: 0; font-family: inherit; position: relative; } .sitemap-action-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); } .sitemap-action-btn.delete:hover { background: rgba(239, 68, 68, 0.15); color: #f87171; } /* Sitemap action button tooltip — singleton #sm-tip div positioned by JS using getBoundingClientRect + position:fixed, so it escapes all overflow clipping on the sidebar, page list, and page rows. */ #sm-tip { position: fixed; background: rgba(15, 15, 25, 0.92); color: #e2e8f0; font-size: 11px; font-weight: 500; line-height: 1; padding: 4px 8px; border-radius: 5px; white-space: nowrap; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,0.35); z-index: 99999; opacity: 0; transition: opacity 0.12s ease; } /* Home badge */ .sitemap-home-badge { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: rgba(124, 92, 255, 0.18); color: var(--accent); padding: 1px 5px; border-radius: 3px; flex-shrink: 0; align-self: center; margin-right: 2px; } /* Section-visibility indicator: page has device-conditional sections */ .sitemap-vis-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 0.6rem; font-weight: 700; background: rgba(124, 92, 255, 0.16); color: var(--accent); padding: 1px 5px; border-radius: 3px; flex-shrink: 0; align-self: center; margin-right: 2px; } .sitemap-vis-badge svg { display: block; } /* Footer: Add page button */ .sitemap-sidebar-footer { padding: 8px; border-top: 1px solid var(--border); flex-shrink: 0; } .sitemap-add-page-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 7px 10px; background: transparent; border: 1px dashed rgba(255, 255, 255, 0.15); border-radius: var(--radius-sm); color: var(--text-dim); font-size: 0.8125rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .sitemap-add-page-btn:hover { background: rgba(124, 92, 255, 0.1); color: var(--accent); border-color: var(--accent); border-style: solid; } /* ── Brand Panel ──────────────────────────────────────────────────── */ #brand-panel .modal { color: #1a1a2e; /* Override base .modal overflow:auto so the footer sticks to the bottom. Only the .modal-body scrolls; header and footer are always visible. */ overflow: hidden; display: flex; flex-direction: column; } #brand-panel .modal-body { overflow-y: auto; flex: 1 1 auto; } #brand-panel .modal-footer { flex: 0 0 auto; } #brand-panel .modal-header h2, #brand-panel #brandPanelTitle { color: #111827; font-size: 1rem; font-weight: 700; } #brand-panel .modal-footer .btn:not(.btn-primary) { color: #374151; } #brand-panel .modal-footer .btn:not(.btn-primary):hover { background: #f3f4f6; } /* Bespoke heads-up note at the top of the Brand panel — compact, accent-tinted, theme-driven so it reads on every builder theme. */ .bp-note { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 18px; padding: 9px 11px; border-radius: 8px; background: var(--accent-glow); border: 1px solid var(--border-glow); color: var(--text); font-size: 0.78rem; line-height: 1.45; } .bp-note .bp-note-icon { flex-shrink: 0; line-height: 1.45; } .bp-note strong { font-weight: 700; color: var(--text); } .bp-section { margin-bottom: 20px; } .bp-section-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px; } .bp-field-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .bp-field-label { font-size: 0.82rem; color: var(--text); font-weight: 500; width: 72px; flex-shrink: 0; } .bp-picker-wrap { flex: 1; min-width: 0; } .bp-clear-btn { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-muted); font-size: 0.85rem; font-weight: 700; cursor: pointer; padding: 3px 7px; line-height: 1; border-radius: 4px; flex-shrink: 0; } .bp-clear-btn:hover { color: var(--text); background: var(--bg-soft); border-color: var(--border-strong); } .bp-select-wrap { flex: 1; } .bp-font-input { width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-input); color: var(--text); font-size: 0.85rem; font-family: inherit; } .bp-font-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .bp-font-input-row { margin-bottom: 6px; } .bp-font-select { width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-input); color: var(--text); font-size: 0.85rem; font-family: inherit; cursor: pointer; } .bp-font-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; } /* Native