/* ============================================================================ AI-themed UI themes — full visual identity (font + pattern + glow + accent) Activated via . Defined as additive layers on top of the base :root palette in style.css. ============================================================================ */ /* Fonts (loaded once; only used when their theme is active) */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Serif:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Sans:wght@400;500;600;700&family=Orbitron:wght@500;700;900&family=Geist+Mono:wght@400;500&family=Inter+Tight:wght@400;500;600;700&display=swap'); /* ─── Shared keyframes for AI themes ───────────────────────────────────── */ @keyframes ai-aurora-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes ai-pulse-glow { 0%, 100% { box-shadow: 0 0 0 0 var(--primary-glow, rgba(99,102,241,.5)); } 50% { box-shadow: 0 0 24px 4px var(--primary-glow, rgba(99,102,241,.5)); } } @keyframes ai-scanline { 0% { transform: translateY(-100%); } 100% { transform: translateY(100vh); } } @keyframes ai-grid-drift { 0% { background-position: 0 0; } 100% { background-position: 40px 40px; } } @keyframes ai-flicker { 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; } 20%, 22%, 24%, 55% { opacity: .85; } } /* ============================================================================ THEME 1 · CURSOR — IDE-grade dark slate, electric blue, mono headlines ============================================================================ */ html[data-theme="cursor"] { --bg: #0a0d12; --bg-secondary: #11151c; --bg-tertiary: #161b24; --card-bg: rgba(22, 27, 36, 0.85); --sidebar-bg: #0a0d12; --text: #e4e7eb; --text-muted: #8a93a3; --primary: #4d9fff; --primary-dim: rgba(77, 159, 255, 0.10); --primary-glow: rgba(77, 159, 255, 0.35); --accent: #c084fc; --success: #4ade80; --warning: #fbbf24; --danger: #f87171; --border: rgba(148, 163, 184, 0.12); --border-glow: rgba(77, 159, 255, 0.30); --radius: 6px; --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', 'JetBrains Mono', 'Fira Code', monospace; } html[data-theme="cursor"] body { font-family: var(--font-sans); background: var(--bg); background-image: radial-gradient(circle at 20% 0%, rgba(77, 159, 255, 0.08) 0, transparent 50%), radial-gradient(circle at 80% 100%, rgba(192, 132, 252, 0.06) 0, transparent 50%), linear-gradient(rgba(148,163,184,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.025) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px; } html[data-theme="cursor"] h1, html[data-theme="cursor"] h2, html[data-theme="cursor"] h3 { font-family: var(--font-mono); letter-spacing: -0.02em; font-weight: 500; } html[data-theme="cursor"] code, html[data-theme="cursor"] .pve-grid, html[data-theme="cursor"] .pve-tasks-table { font-family: var(--font-mono); } html[data-theme="cursor"] .card, html[data-theme="cursor"] .stat-card { backdrop-filter: blur(8px); border: 1px solid var(--border); } html[data-theme="cursor"] .btn-primary { background: linear-gradient(180deg, #4d9fff, #2a7fdc); border: 1px solid rgba(77,159,255,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 0 0 1px rgba(77,159,255,.25); } html[data-theme="cursor"] .nav-item.active, html[data-theme="cursor"] .subtab-btn.active { background: linear-gradient(90deg, rgba(77,159,255,.18), transparent); border-left: 2px solid #4d9fff; } html[data-theme="cursor"] input:focus, html[data-theme="cursor"] textarea:focus, html[data-theme="cursor"] select:focus { outline: none; border-color: #4d9fff; box-shadow: 0 0 0 3px rgba(77,159,255,.15); } /* ============================================================================ THEME 2 · ANTHROPIC — warm cream paper, terracotta, serif elegance ============================================================================ */ html[data-theme="anthropic"] { --bg: #f5f0e8; --bg-secondary: #ebe4d6; --bg-tertiary: #e0d6c2; --card-bg: #fdfaf3; --sidebar-bg: #2d2520; --text: #2d2520; --text-muted: #786a5b; --primary: #c1502e; --primary-dim: rgba(193, 80, 46, 0.10); --primary-glow: rgba(193, 80, 46, 0.25); --accent: #8b6f47; --success: #4a7c59; --warning: #d97706; --danger: #b91c1c; --border: rgba(45, 37, 32, 0.12); --border-glow: rgba(193, 80, 46, 0.35); --radius: 4px; --font-sans: 'IBM Plex Sans', Georgia, serif; --font-serif: 'IBM Plex Serif', 'Times New Roman', serif; } html[data-theme="anthropic"] body { font-family: var(--font-sans); color: var(--text); background: var(--bg); /* Subtle paper grain via repeating noise */ background-image: radial-gradient(circle at 1px 1px, rgba(45,37,32,.04) 1px, transparent 0); background-size: 4px 4px; } html[data-theme="anthropic"] h1, html[data-theme="anthropic"] h2, html[data-theme="anthropic"] h3, html[data-theme="anthropic"] .page-header h2 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.01em; } html[data-theme="anthropic"] .sidebar { } html[data-theme="anthropic"] .sidebar .nav-label, html[data-theme="anthropic"] .sidebar .nav-icon, html[data-theme="anthropic"] #user-email, html[data-theme="anthropic"] .theme-picker-label { } html[data-theme="anthropic"] .card, html[data-theme="anthropic"] .stat-card { background: var(--card-bg); border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(45,37,32,.04), 0 4px 12px rgba(45,37,32,.04); border-radius: 4px; } html[data-theme="anthropic"] .btn-primary { background: var(--primary); color: #fdfaf3; border: 1px solid #a13d1f; border-radius: 4px; font-weight: 500; } html[data-theme="anthropic"] .btn-primary:hover { background: #a13d1f; transform: none; box-shadow: 0 2px 8px rgba(193,80,46,.3); } html[data-theme="anthropic"] table { background: var(--card-bg); } html[data-theme="anthropic"] table thead th { background: #ebe4d6; color: #2d2520; } html[data-theme="anthropic"] input, html[data-theme="anthropic"] select, html[data-theme="anthropic"] textarea { background: #fdfaf3; border: 1px solid #d4c8b3; color: #2d2520; border-radius: 4px; } /* ============================================================================ THEME 3 · V0 — Vercel pure black, geometric, magenta-cyan gradient ============================================================================ */ html[data-theme="v0"] { --bg: #000000; --bg-secondary: #0a0a0a; --bg-tertiary: #111111; --card-bg: #0a0a0a; --sidebar-bg: #000000; --text: #fafafa; --text-muted: #888888; --primary: #ffffff; --primary-dim: rgba(255, 255, 255, 0.08); --primary-glow: rgba(255, 255, 255, 0.20); --accent: #ec4899; --success: #22c55e; --warning: #eab308; --danger: #ef4444; --border: #262626; --border-glow: #404040; --radius: 8px; --font-sans: 'Geist', 'Inter Tight', -apple-system, sans-serif; --font-mono: 'Geist Mono', 'JetBrains Mono', monospace; } html[data-theme="v0"] body { font-family: var(--font-sans); background: #000; background-image: radial-gradient(circle at 50% 0%, rgba(236,72,153,.08), transparent 40%), radial-gradient(circle at 0% 100%, rgba(34,211,238,.06), transparent 40%), radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 24px 24px; } html[data-theme="v0"] h1, html[data-theme="v0"] h2, html[data-theme="v0"] h3 { font-weight: 700; letter-spacing: -0.04em; } html[data-theme="v0"] .card, html[data-theme="v0"] .stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; position: relative; overflow: hidden; } html[data-theme="v0"] .stat-card::before { background: linear-gradient(90deg, #ec4899, #22d3ee, #ec4899); background-size: 200% 100%; animation: ai-aurora-shift 6s ease infinite; opacity: 1; height: 1px; } html[data-theme="v0"] .btn-primary { background: #fff; color: #000; border: 1px solid #fff; border-radius: 8px; font-weight: 600; letter-spacing: -0.01em; } html[data-theme="v0"] .btn-primary:hover { background: #ec4899; border-color: #ec4899; color: #fff; transform: none; box-shadow: 0 0 0 4px rgba(236,72,153,.2); } html[data-theme="v0"] code { background: #111; color: #ec4899; font-family: var(--font-mono); } html[data-theme="v0"] .nav-item.active { background: #fff; color: #000 !important; border-radius: 6px; } html[data-theme="v0"] .nav-item.active .nav-label, html[data-theme="v0"] .nav-item.active .nav-icon { color: #000 !important; } /* ============================================================================ THEME 4 · PERPLEXITY — deep teal, mint, frosted glass ============================================================================ */ html[data-theme="perplexity"] { --bg: #0a1612; --bg-secondary: #0f1f1a; --bg-tertiary: #142a23; --card-bg: rgba(20, 42, 35, 0.55); --sidebar-bg: #0a1612; --text: #e8f5f1; --text-muted: #7fa39a; --primary: #20d4a0; --primary-dim: rgba(32, 212, 160, 0.10); --primary-glow: rgba(32, 212, 160, 0.40); --accent: #5eead4; --success: #20d4a0; --warning: #fbbf24; --danger: #ef4444; --border: rgba(94, 234, 212, 0.15); --border-glow: rgba(94, 234, 212, 0.45); --radius: 12px; --font-sans: 'Inter Tight', -apple-system, sans-serif; } html[data-theme="perplexity"] body { font-family: var(--font-sans); background: #0a1612; background-image: radial-gradient(ellipse at top, rgba(32,212,160,.12), transparent 50%), radial-gradient(ellipse at bottom right, rgba(94,234,212,.08), transparent 50%); } html[data-theme="perplexity"] .card, html[data-theme="perplexity"] .stat-card { background: var(--card-bg); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid var(--border); border-radius: 12px; position: relative; } html[data-theme="perplexity"] .stat-card::before { content: ''; position: absolute; inset: 0; border-radius: 12px; padding: 1px; background: linear-gradient(135deg, rgba(94,234,212,.4), transparent 50%, rgba(32,212,160,.3)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } html[data-theme="perplexity"] .btn-primary { background: linear-gradient(135deg, #20d4a0, #5eead4); color: #0a1612; font-weight: 600; border: none; border-radius: 10px; box-shadow: 0 4px 14px rgba(32,212,160,.35); } html[data-theme="perplexity"] .btn-primary:hover { box-shadow: 0 6px 20px rgba(32,212,160,.5); transform: translateY(-1px); color: #0a1612; } html[data-theme="perplexity"] h2, html[data-theme="perplexity"] h3 { letter-spacing: -0.02em; } /* ============================================================================ THEME 5 · SYNTHWAVE — neon pink/cyan on indigo, scanlines, retro AI ============================================================================ */ html[data-theme="synthwave"] { --bg: #0d0221; --bg-secondary: #150538; --bg-tertiary: #1f0a4a; --card-bg: rgba(31, 10, 74, 0.65); --sidebar-bg: #0d0221; --text: #fdf4ff; --text-muted: #a78bfa; --primary: #ff2e88; --primary-dim: rgba(255, 46, 136, 0.12); --primary-glow: rgba(255, 46, 136, 0.55); --accent: #00f5ff; --success: #00ffa3; --warning: #ffea00; --danger: #ff2e88; --border: rgba(255, 46, 136, 0.25); --border-glow: rgba(0, 245, 255, 0.55); --radius: 4px; --font-sans: 'Space Grotesk', sans-serif; --font-display: 'Orbitron', sans-serif; } html[data-theme="synthwave"] body { font-family: var(--font-sans); color: var(--text); background: #0d0221; background-image: /* Horizon glow */ radial-gradient(ellipse 100% 60% at 50% 100%, rgba(255,46,136,.20), transparent 60%), radial-gradient(ellipse 80% 50% at 50% 100%, rgba(0,245,255,.15), transparent 70%), /* Perspective grid (purely CSS) */ linear-gradient(rgba(255,46,136,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0,245,255,.08) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px; animation: ai-grid-drift 20s linear infinite; position: relative; } html[data-theme="synthwave"] body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background: linear-gradient(180deg, transparent 0%, rgba(255,46,136,.05) 50%, transparent 100%); height: 4px; animation: ai-scanline 8s linear infinite; } html[data-theme="synthwave"] h1, html[data-theme="synthwave"] h2, html[data-theme="synthwave"] h3, html[data-theme="synthwave"] .page-header h2 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; background: linear-gradient(180deg, #ff2e88 0%, #00f5ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 30px rgba(255, 46, 136, 0.4); } html[data-theme="synthwave"] .card, html[data-theme="synthwave"] .stat-card { background: var(--card-bg); backdrop-filter: blur(10px); border: 1px solid var(--border); box-shadow: 0 0 0 1px rgba(255,46,136,.15), 0 0 30px rgba(255,46,136,.10); } html[data-theme="synthwave"] .stat-card .value { color: #00f5ff; text-shadow: 0 0 12px rgba(0,245,255,.6), 0 0 24px rgba(0,245,255,.3); font-family: var(--font-display); } html[data-theme="synthwave"] .btn-primary { background: linear-gradient(135deg, #ff2e88, #b026ff); color: #fff; border: 1px solid #ff2e88; box-shadow: 0 0 14px rgba(255,46,136,.55), inset 0 1px 0 rgba(255,255,255,.2); text-shadow: 0 0 6px rgba(255,255,255,.4); } html[data-theme="synthwave"] .btn-primary:hover { box-shadow: 0 0 24px rgba(255,46,136,.8), inset 0 1px 0 rgba(255,255,255,.3); color: #fff; } html[data-theme="synthwave"] a { color: #00f5ff; text-shadow: 0 0 6px rgba(0,245,255,.4); } html[data-theme="synthwave"] code { color: #00f5ff; background: rgba(0,245,255,.08); } /* ============================================================================ THEME 6 · AURORA — animated borealis, glassmorphism, deep navy ============================================================================ */ html[data-theme="aurora"] { --bg: #050817; --bg-secondary: #0a1030; --bg-tertiary: #111a4a; --card-bg: rgba(17, 26, 74, 0.40); --sidebar-bg: #050817; --text: #e0e7ff; --text-muted: #818cf8; --primary: #818cf8; --primary-dim: rgba(129, 140, 248, 0.12); --primary-glow: rgba(129, 140, 248, 0.45); --accent: #c4b5fd; --success: #34d399; --warning: #fbbf24; --danger: #f87171; --border: rgba(196, 181, 253, 0.18); --border-glow: rgba(129, 140, 248, 0.50); --radius: 14px; --font-sans: 'Inter Tight', -apple-system, sans-serif; } html[data-theme="aurora"] body { font-family: var(--font-sans); background: #050817; position: relative; overflow-x: hidden; } html[data-theme="aurora"] body::before { content: ''; position: fixed; inset: -50%; z-index: -1; background: radial-gradient(ellipse 60% 40% at 30% 20%, rgba(129,140,248,.45), transparent 50%), radial-gradient(ellipse 50% 35% at 70% 30%, rgba(52,211,153,.30), transparent 50%), radial-gradient(ellipse 55% 40% at 50% 70%, rgba(244,114,182,.25), transparent 50%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(34,211,238,.25), transparent 50%); background-size: 200% 200%; animation: ai-aurora-shift 20s ease-in-out infinite; filter: blur(60px); opacity: 0.7; } html[data-theme="aurora"] .card, html[data-theme="aurora"] .stat-card { background: var(--card-bg); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 8px 32px rgba(5,8,23,.4); } html[data-theme="aurora"] h1, html[data-theme="aurora"] h2, html[data-theme="aurora"] h3 { background: linear-gradient(135deg, #e0e7ff, #c4b5fd 60%, #34d399); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; letter-spacing: -0.02em; } html[data-theme="aurora"] .btn-primary { background: linear-gradient(135deg, #818cf8, #c4b5fd); color: #050817; border: 1px solid rgba(196,181,253,.5); font-weight: 600; border-radius: 10px; box-shadow: 0 4px 20px rgba(129,140,248,.4), inset 0 1px 0 rgba(255,255,255,.4); } html[data-theme="aurora"] .btn-primary:hover { background: linear-gradient(135deg, #a78bfa, #ddd6fe); color: #050817; box-shadow: 0 8px 30px rgba(129,140,248,.6); transform: translateY(-1px); } html[data-theme="aurora"] .nav-item.active { background: linear-gradient(90deg, rgba(129,140,248,.25), transparent); border-left: 2px solid #c4b5fd; } html[data-theme="aurora"] .stat-card .value { background: linear-gradient(135deg, #e0e7ff, #34d399); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============================================================================ Theme picker swatches (preview chips in dropdown) ============================================================================ */ .sw-cursor { background: linear-gradient(135deg, #0a0d12 50%, #4d9fff 50%); } .sw-anthropic { background: linear-gradient(135deg, #f5f0e8 50%, #c1502e 50%); } .sw-v0 { background: linear-gradient(135deg, #000 50%, #ec4899 50%); } .sw-perplexity { background: linear-gradient(135deg, #0a1612 50%, #20d4a0 50%); } .sw-synthwave { background: linear-gradient(135deg, #0d0221 30%, #ff2e88 65%, #00f5ff 100%); } .sw-aurora { background: linear-gradient(135deg, #050817 30%, #818cf8 60%, #34d399 100%); } /* Reduce motion overrides */ html[data-motion="reduced"][data-theme="synthwave"] body, html[data-motion="reduced"][data-theme="aurora"] body::before { animation: none !important; } html[data-motion="reduced"][data-theme="synthwave"] body::before { display: none; } /* ============================================================================ ✨ NEW THEMES — set 2 (10 additions, dev-favorite palettes) Each theme just rewrites the base CSS-variable palette; component CSS in style.css already consumes those vars so we don't need per-theme overrides for cards, sidebar, tables etc. Keep contrast ratios ≥ 4.5:1 for body text. ============================================================================ */ /* THEME · DRACULA — classic developer palette (WCAG AA on body+muted) */ html[data-theme="dracula"] { --bg:#282a36; --bg-secondary:#21222c; --bg-tertiary:#1e1f29; --card-bg:rgba(40,42,54,.92); --sidebar-bg:#21222c; --text:#f8f8f2; --text-muted:#bdc0d6; --primary:#bd93f9; --primary-dim:rgba(189,147,249,.14); --primary-glow:rgba(189,147,249,.45); --accent:#ff79c6; --success:#50fa7b; --warning:#f1fa8c; --danger:#ff5555; --border:rgba(248,248,242,.10); --border-glow:rgba(189,147,249,.40); --radius:8px; } html[data-theme="dracula"] .btn-primary { background:linear-gradient(180deg,#bd93f9,#a479e0); border-color:#bd93f9; color:#1e1f29; font-weight:600; } html[data-theme="dracula"] .nav-item.active { background:linear-gradient(90deg,rgba(255,121,198,.15),transparent); border-left:2px solid #ff79c6; } /* THEME · TOKYO NIGHT — neon midnight blue, popular VSCode theme */ html[data-theme="tokyo-night"] { --bg:#1a1b26; --bg-secondary:#16161e; --bg-tertiary:#13141c; --card-bg:rgba(26,27,38,.92); --sidebar-bg:#16161e; --text:#c0caf5; --text-muted:#8a93b8; --primary:#7aa2f7; --primary-dim:rgba(122,162,247,.12); --primary-glow:rgba(122,162,247,.45); --accent:#bb9af7; --success:#9ece6a; --warning:#e0af68; --danger:#f7768e; --border:rgba(192,202,245,.10); --border-glow:rgba(122,162,247,.40); --radius:6px; } html[data-theme="tokyo-night"] body { background-image:radial-gradient(ellipse 80% 60% at 50% -10%, rgba(122,162,247,.08), transparent 70%); } html[data-theme="tokyo-night"] .stat-card .value { color:#7aa2f7; } /* THEME · GITHUB DIM — corporate-friendly muted dark */ html[data-theme="github-dim"] { --bg:#22272e; --bg-secondary:#1c2128; --bg-tertiary:#1c2128; --card-bg:rgba(34,39,46,.95); --sidebar-bg:#1c2128; --text:#adbac7; --text-muted:#768390; --primary:#539bf5; --primary-dim:rgba(83,155,245,.12); --primary-glow:rgba(83,155,245,.30); --accent:#dcbdfb; --success:#57ab5a; --warning:#daaa3f; --danger:#e5534b; --border:rgba(205,217,229,.10); --border-glow:rgba(83,155,245,.30); --radius:6px; --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Inter Tight',sans-serif; } html[data-theme="github-dim"] .btn-primary { background:#347d39; border-color:#46954a; color:#fff; } html[data-theme="github-dim"] .btn-primary:hover { background:#46954a; } /* THEME · MONOKAI — retro coder, high-saturation accents */ html[data-theme="monokai"] { --bg:#272822; --bg-secondary:#1e1f1c; --bg-tertiary:#1a1b17; --card-bg:rgba(39,40,34,.92); --sidebar-bg:#1e1f1c; --text:#f8f8f2; --text-muted:#a6a69c; --primary:#a6e22e; --primary-dim:rgba(166,226,46,.12); --primary-glow:rgba(166,226,46,.40); --accent:#fd971f; --success:#a6e22e; --warning:#e6db74; --danger:#f92672; --border:rgba(248,248,242,.10); --border-glow:rgba(166,226,46,.35); --radius:4px; --font-mono:'JetBrains Mono','Fira Code',monospace; } html[data-theme="monokai"] code, html[data-theme="monokai"] pre { font-family:var(--font-mono); } /* THEME · GRUVBOX — warm earth tones */ html[data-theme="gruvbox"] { --bg:#282828; --bg-secondary:#1d2021; --bg-tertiary:#3c3836; --card-bg:rgba(40,40,40,.94); --sidebar-bg:#1d2021; --text:#ebdbb2; --text-muted:#a89984; --primary:#fabd2f; --primary-dim:rgba(250,189,47,.14); --primary-glow:rgba(250,189,47,.40); --accent:#fe8019; --success:#b8bb26; --warning:#fabd2f; --danger:#fb4934; --border:rgba(235,219,178,.12); --border-glow:rgba(250,189,47,.35); --radius:4px; } html[data-theme="gruvbox"] .btn-primary { background:#d79921; color:#1d2021; border-color:#fabd2f; font-weight:600; } /* THEME · CATPPUCCIN MOCHA — pastel cozy */ html[data-theme="catppuccin"] { --bg:#1e1e2e; --bg-secondary:#181825; --bg-tertiary:#11111b; --card-bg:rgba(30,30,46,.92); --sidebar-bg:#181825; --text:#cdd6f4; --text-muted:#a6adc8; --primary:#cba6f7; --primary-dim:rgba(203,166,247,.14); --primary-glow:rgba(203,166,247,.40); --accent:#f5c2e7; --success:#a6e3a1; --warning:#f9e2af; --danger:#f38ba8; --border:rgba(205,214,244,.10); --border-glow:rgba(203,166,247,.40); --radius:8px; } html[data-theme="catppuccin"] .stat-card .value { background:linear-gradient(135deg,#cba6f7,#f5c2e7); -webkit-background-clip:text; background-clip:text; color:transparent; } /* THEME · ROSE PINE — rose gold + violet */ html[data-theme="rosepine"] { --bg:#191724; --bg-secondary:#1f1d2e; --bg-tertiary:#26233a; --card-bg:rgba(25,23,36,.92); --sidebar-bg:#1f1d2e; --text:#e0def4; --text-muted:#a8a4c8; --primary:#c4a7e7; --primary-dim:rgba(196,167,231,.14); --primary-glow:rgba(196,167,231,.40); --accent:#ebbcba; --success:#9ccfd8; --warning:#f6c177; --danger:#eb6f92; --border:rgba(224,222,244,.10); --border-glow:rgba(196,167,231,.40); --radius:8px; --font-sans:'Inter Tight','Space Grotesk',-apple-system,sans-serif; } /* THEME · OCEANIC — teal slate, calming for long ops sessions */ html[data-theme="oceanic"] { --bg:#0f2027; --bg-secondary:#0a1820; --bg-tertiary:#08131a; --card-bg:rgba(15,32,39,.92); --sidebar-bg:#0a1820; --text:#e0f2f1; --text-muted:#90b4b8; --primary:#26d0ce; --primary-dim:rgba(38,208,206,.12); --primary-glow:rgba(38,208,206,.40); --accent:#4facfe; --success:#10b981; --warning:#f59e0b; --danger:#ef4444; --border:rgba(224,242,241,.10); --border-glow:rgba(38,208,206,.40); --radius:8px; } html[data-theme="oceanic"] body { background-image:linear-gradient(180deg,#0f2027 0%,#203a43 60%,#2c5364 100%); background-attachment:fixed; } /* THEME · TERMINAL — pure black, matrix green, JetBrains Mono everywhere */ html[data-theme="terminal"] { --bg:#000000; --bg-secondary:#050505; --bg-tertiary:#0a0a0a; --card-bg:rgba(0,0,0,.95); --sidebar-bg:#000; --text:#33ff66; --text-muted:#22aa44; --primary:#00ff88; --primary-dim:rgba(0,255,136,.10); --primary-glow:rgba(0,255,136,.50); --accent:#00ffaa; --success:#00ff88; --warning:#ffff33; --danger:#ff3366; --border:rgba(0,255,136,.18); --border-glow:rgba(0,255,136,.50); --radius:0; --font-sans:'JetBrains Mono','Fira Code',monospace; --font-mono:'JetBrains Mono','Fira Code',monospace; } html[data-theme="terminal"] body { font-family:var(--font-mono); text-shadow:0 0 2px rgba(0,255,136,.20); } html[data-theme="terminal"] .card, html[data-theme="terminal"] .stat-card { border:1px solid var(--border); box-shadow:0 0 12px rgba(0,255,136,.06) inset; } /* THEME · DISCORD — Blurple corporate dark */ html[data-theme="discord"] { --bg:#36393f; --bg-secondary:#2f3136; --bg-tertiary:#202225; --card-bg:rgba(54,57,63,.96); --sidebar-bg:#2f3136; --text:#dcddde; --text-muted:#a3a6aa; --primary:#5865f2; --primary-dim:rgba(88,101,242,.14); --primary-glow:rgba(88,101,242,.45); --accent:#eb459e; --success:#3ba55d; --warning:#faa61a; --danger:#ed4245; --border:rgba(255,255,255,.08); --border-glow:rgba(88,101,242,.40); --radius:8px; --font-sans:'gg sans','Inter Tight',-apple-system,sans-serif; } html[data-theme="discord"] .btn-primary { background:#5865f2; border-color:#5865f2; } html[data-theme="discord"] .btn-primary:hover { background:#4752c4; } /* THEME · SAKURA — soft pink/rose Light theme (good contrast for daytime) */ html[data-theme="sakura"] { --bg:#fff5f7; --bg-secondary:#ffe9ee; --bg-tertiary:#fbd9e3; --card-bg:rgba(255,255,255,0.96); --sidebar-bg:#fde2e8; --text:#3d1a26; --text-muted:#7a4a5a; --primary:#d4426e; --primary-dim:rgba(212,66,110,.10); --primary-glow:rgba(212,66,110,.30); --accent:#c084fc; --success:#15803d; --warning:#b45309; --danger:#b91c1c; --border:rgba(61,26,38,.10); --border-glow:rgba(212,66,110,.35); --radius:10px; } html[data-theme="sakura"] body { background:var(--bg); color:var(--text); } html[data-theme="sakura"] .card { background:var(--card-bg); color:var(--text); } html[data-theme="sakura"] table, html[data-theme="sakura"] table td, html[data-theme="sakura"] table th { color:var(--text) !important; border-color:rgba(61,26,38,.15) !important; } html[data-theme="sakura"] .stat-card .label, html[data-theme="sakura"] .stat-card .sub, html[data-theme="sakura"] .form-group label { color:var(--text-muted) !important; } html[data-theme="sakura"] input, html[data-theme="sakura"] select, html[data-theme="sakura"] textarea { background:#fff; color:var(--text); border:1px solid var(--border); } /* ─── Swatch chips for new themes ─── */ .sw-dracula { background: linear-gradient(135deg, #282a36 50%, #bd93f9 50%); } .sw-tokyo-night { background: linear-gradient(135deg, #1a1b26 50%, #7aa2f7 50%); } .sw-github-dim { background: linear-gradient(135deg, #22272e 50%, #539bf5 50%); } .sw-monokai { background: linear-gradient(135deg, #272822 50%, #f92672 50%); } .sw-gruvbox { background: linear-gradient(135deg, #282828 50%, #fabd2f 50%); } .sw-catppuccin { background: linear-gradient(135deg, #1e1e2e 50%, #cba6f7 50%); } .sw-rosepine { background: linear-gradient(135deg, #191724 50%, #ebbcba 50%); } .sw-oceanic { background: linear-gradient(135deg, #0f2027 50%, #26d0ce 50%); } .sw-terminal { background: linear-gradient(135deg, #000 50%, #00ff88 50%); } .sw-discord { background: linear-gradient(135deg, #2f3136 50%, #5865f2 50%); } .sw-sakura { background: linear-gradient(135deg, #fde2e8 50%, #d4426e 50%); } /* ─── Light-mode safety: ensure text + borders contrast properly when the chosen palette is bright. Apply the same body-fix used by `light`. ── */ html[data-theme="sakura"] body, html[data-theme="sakura"] .main-content { background: var(--bg); color: var(--text); } /* ──────────────────────────────────────────────────────────── Anthropic theme — sidebar-footer contrast hardening. The Anthropic palette pairs a dark sidebar (#2d2520) with a warm-cream content area, but generic .btn-sm / #user-balance / .theme-picker-menu rules inherited the LIGHT --text token (#2d2520) which made them invisible on the dark sidebar. Override every element inside .sidebar-footer to use the warm-cream foreground tokens instead. ──────────────────────────────────────────────────────────── */ html[data-theme="anthropic"] .sidebar-footer { border-top: 1px solid rgba(245, 240, 232, 0.12); background: linear-gradient(180deg, rgba(45, 37, 32, 0.0) 0%, rgba(0, 0, 0, 0.25) 100%); color: #f5f0e8; } html[data-theme="anthropic"] .sidebar-footer #user-info { background: rgba(245, 240, 232, 0.07); color: #f5f0e8; } html[data-theme="anthropic"] .sidebar-footer #user-email { color: #f5f0e8; } html[data-theme="anthropic"] .sidebar-footer #user-balance, html[data-theme="anthropic"] .sidebar-footer .balance { background: rgba(193, 80, 46, 0.18); color: #f5d6c5; border: 1px solid rgba(193, 80, 46, 0.45); } html[data-theme="anthropic"] .sidebar-footer .btn, html[data-theme="anthropic"] .sidebar-footer .btn-sm, html[data-theme="anthropic"] .sidebar-footer .ctrl-btn, html[data-theme="anthropic"] .sidebar-footer a.btn-sm { background: rgba(245, 240, 232, 0.06); color: #f5f0e8; border: 1px solid rgba(245, 240, 232, 0.18); } html[data-theme="anthropic"] .sidebar-footer .btn:hover, html[data-theme="anthropic"] .sidebar-footer .btn-sm:hover, html[data-theme="anthropic"] .sidebar-footer .ctrl-btn:hover, html[data-theme="anthropic"] .sidebar-footer a.btn-sm:hover { background: rgba(193, 80, 46, 0.22); border-color: rgba(193, 80, 46, 0.55); color: #fdfaf3; } html[data-theme="anthropic"] .sidebar-footer #logout-btn { background: rgba(185, 28, 28, 0.18); color: #fecaca; border: 1px solid rgba(185, 28, 28, 0.45); } html[data-theme="anthropic"] .sidebar-footer #logout-btn:hover { background: rgba(185, 28, 28, 0.32); color: #fff; } html[data-theme="anthropic"] .sidebar-footer .theme-picker-btn { background: rgba(245, 240, 232, 0.06); color: #f5f0e8; border: 1px solid rgba(245, 240, 232, 0.18); } html[data-theme="anthropic"] .sidebar-footer .theme-picker-btn .theme-picker-label, html[data-theme="anthropic"] .sidebar-footer .theme-picker-btn .theme-picker-caret { color: #f5f0e8; } /* The theme picker menu pops *over* the dark sidebar — keep it readable. */ html[data-theme="anthropic"] #theme-picker-menu { background: #1d1714; color: #f5f0e8; border: 1px solid rgba(245, 240, 232, 0.15); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55); } html[data-theme="anthropic"] #theme-picker-menu li[role="option"] { color: #f5f0e8; } html[data-theme="anthropic"] #theme-picker-menu li[role="option"] small { color: #b8a892; } html[data-theme="anthropic"] #theme-picker-menu li[role="option"]:hover, html[data-theme="anthropic"] #theme-picker-menu li[role="option"][aria-selected="true"] { background: rgba(193, 80, 46, 0.22); color: #ffe4d2; } html[data-theme="anthropic"] #theme-picker-menu li.theme-section { color: #b8a892 !important; border-top: 1px solid rgba(245, 240, 232, 0.12); }