[x-cloak] { display: none !important; }
* { font-family: 'Inter', system-ui, sans-serif; }
.font-mono, pre, code, .data-font { font-family: 'JetBrains Mono', monospace !important; }

/* Dark theme (default) */
:root, [data-theme="dark"] {
  --bg-base: #09090b;
  --bg-surface: #111114;
  --bg-card: #18181c;
  --bg-card-hover: #222228;
  --bg-elevated: #2a2a32;
  --border: #2a2a35;
  --border-active: #4a4a5e;
  --accent: #8b5cf6;
  --accent-dim: #7c3aed;
  --accent-glow: rgba(139, 92, 246, 0.12);
  --accent-secondary: #38bdf8;
  --text-primary: #ededf0;
  --text-secondary: #a0a0b0;
  --text-muted: #606070;
  --chart-grid: #2a2a35;
  --chart-text: #606070;
  --chart-text-label: #a0a0b0;
  /* Semantic status colors */
  --success-fg: #86efac;
  --success-bg: rgba(34,197,94,0.15);
  --success-border: rgba(34,197,94,0.2);
  --error-fg: #fca5a5;
  --error-bg: rgba(239,68,68,0.15);
  --error-border: rgba(239,68,68,0.2);
  --warning-fg: #fbbf24;
  --warning-border: rgba(251,191,36,0.3);
  /* Chat bubbles */
  --chat-user-fg: #c4b5fd;
  --chat-user-bg: rgba(139,92,246,0.08);
  --chat-user-border: rgba(139,92,246,0.15);
  --chat-system-fg: #86efac;
  --chat-system-bg: rgba(52,211,153,0.06);
  --chat-system-border: rgba(52,211,153,0.12);
  /* Diff */
  --diff-old-fg: #fca5a5;
  --diff-old-bg: rgba(239,68,68,0.15);
  --diff-new-fg: #86efac;
  --diff-new-bg: rgba(34,197,94,0.15);
  /* Stored/pending indicators */
  --indicator-stored: #34d399;
  --indicator-pending: #fbbf24;
  /* Status badges & status colors */
  --badge-core-bg: rgba(16,185,129,0.15);
  --badge-core-fg: #34d399;
  --badge-dream-bg: rgba(217,119,6,0.15);
  --badge-dream-fg: #fbbf24;
  --badge-forgotten-bg: rgba(234,88,12,0.15);
  --badge-forgotten-fg: #fb923c;
  --badge-archive-bg: rgba(107,114,128,0.15);
  --badge-archive-fg: #94a3b8;
  --color-danger: #ef4444;
  /* Indicator dots */
  --dot-embedded: #818cf8;
  --dot-emotion: #f472b6;
  --dot-occurred: #38bdf8;
  --dot-foresight: #fbbf24;
  --dot-cara: #34d399;
  /* Lane header dots */
  --lane-facts: #38bdf8;
  --lane-short: #818cf8;
  --lane-working: #c084fc;
  --lane-long: #f472b6;
  --lane-midterm: #fb923c;
  --lane-general: #34d399;
  --lane-linked: #fbbf24;
  /* Fact type badge */
  --fact-experience: #c084fc;
  /* CARA action colors */
  --cara-reinforce: #10b981;
  --cara-contradict: #ef4444;
  --cara-weaken: #fbbf24;
  /* Phase labels */
  --phase-prep-bg: rgba(139,92,246,0.12);
  --phase-persist-bg: rgba(59,130,246,0.12);
  --phase-enrich-bg: rgba(20,184,166,0.12);
  --phase-enrich-fg: #14b8a6;
  /* Modal overlay */
  --overlay-bg: rgba(0,0,0,0.7);
  /* Radar chart fill */
  --radar-fill: rgba(139, 92, 246, 0.15);
}

/* Light theme */
[data-theme="light"] {
  --bg-base: #f8f9fb;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f3f4f6;
  --bg-elevated: #e5e7eb;
  --border: #e2e4e9;
  --border-active: #c5c8d0;
  --accent: #7c3aed;
  --accent-dim: #6d28d9;
  --accent-glow: rgba(124, 58, 237, 0.08);
  --accent-secondary: #0284c7;
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #9ca3af;
  --chart-grid: #e5e7eb;
  --chart-text: #9ca3af;
  --chart-text-label: #6b7280;
  /* Semantic status colors */
  --success-fg: #16a34a;
  --success-bg: rgba(22,163,74,0.08);
  --success-border: rgba(22,163,74,0.2);
  --error-fg: #dc2626;
  --error-bg: rgba(220,38,38,0.06);
  --error-border: rgba(220,38,38,0.15);
  --warning-fg: #d97706;
  --warning-border: rgba(217,119,6,0.3);
  /* Chat bubbles */
  --chat-user-fg: #6d28d9;
  --chat-user-bg: rgba(109,40,217,0.06);
  --chat-user-border: rgba(109,40,217,0.15);
  --chat-system-fg: #16a34a;
  --chat-system-bg: rgba(22,163,74,0.04);
  --chat-system-border: rgba(22,163,74,0.12);
  /* Diff */
  --diff-old-fg: #dc2626;
  --diff-old-bg: rgba(220,38,38,0.06);
  --diff-new-fg: #16a34a;
  --diff-new-bg: rgba(22,163,74,0.06);
  /* Stored/pending indicators */
  --indicator-stored: #16a34a;
  --indicator-pending: #d97706;
  /* Status badges & status colors */
  --badge-core-bg: rgba(22,163,74,0.1);
  --badge-core-fg: #16a34a;
  --badge-dream-bg: rgba(217,119,6,0.1);
  --badge-dream-fg: #d97706;
  --badge-forgotten-bg: rgba(234,88,12,0.1);
  --badge-forgotten-fg: #ea580c;
  --badge-archive-bg: rgba(107,114,128,0.1);
  --badge-archive-fg: #6b7280;
  --color-danger: #dc2626;
  /* Indicator dots (darker for light bg) */
  --dot-embedded: #6366f1;
  --dot-emotion: #ec4899;
  --dot-occurred: #0284c7;
  --dot-foresight: #d97706;
  --dot-cara: #16a34a;
  /* Lane header dots */
  --lane-facts: #0284c7;
  --lane-short: #6366f1;
  --lane-working: #9333ea;
  --lane-long: #db2777;
  --lane-midterm: #ea580c;
  --lane-general: #16a34a;
  --lane-linked: #d97706;
  /* Fact type badge */
  --fact-experience: #9333ea;
  /* CARA action colors */
  --cara-reinforce: #059669;
  --cara-contradict: #dc2626;
  --cara-weaken: #d97706;
  /* Phase labels */
  --phase-prep-bg: rgba(124,58,237,0.1);
  --phase-persist-bg: rgba(37,99,235,0.1);
  --phase-enrich-bg: rgba(13,148,136,0.1);
  --phase-enrich-fg: #0d9488;
  /* Modal overlay */
  --overlay-bg: rgba(0,0,0,0.4);
  /* Radar chart fill */
  --radar-fill: rgba(124, 58, 237, 0.12);
}

body { background: var(--bg-base); color: var(--text-primary); transition: background 0.2s, color 0.2s; }

[data-theme="light"] .glow-core { box-shadow: 0 0 0 1px rgba(16,185,129,0.3), 0 1px 3px rgba(16,185,129,0.08); }
[data-theme="light"] .glow-dream { box-shadow: 0 0 0 1px rgba(217,119,6,0.3), 0 1px 3px rgba(217,119,6,0.08); }
[data-theme="light"] .glow-forgotten { box-shadow: 0 0 0 1px rgba(234,88,12,0.3), 0 1px 3px rgba(234,88,12,0.08); }
[data-theme="light"] .glow-archive { box-shadow: 0 0 0 1px rgba(107,114,128,0.25), 0 1px 2px rgba(107,114,128,0.06); }
[data-theme="light"] .breathe-high { animation: breathe-high-light 3s ease-in-out infinite; }
[data-theme="light"] .breathe-med { animation: breathe-med-light 4s ease-in-out infinite; }
[data-theme="light"] .breathe-low { animation: breathe-low-light 5s ease-in-out infinite; }
@keyframes breathe-high-light {
  0%, 100% { box-shadow: 0 0 0 1px rgba(16,185,129,0.25), 0 1px 4px rgba(16,185,129,0.06); }
  50% { box-shadow: 0 0 0 1px rgba(16,185,129,0.4), 0 2px 8px rgba(16,185,129,0.12); }
}
@keyframes breathe-med-light {
  0%, 100% { box-shadow: 0 0 0 1px rgba(217,119,6,0.25), 0 1px 4px rgba(217,119,6,0.06); }
  50% { box-shadow: 0 0 0 1px rgba(217,119,6,0.4), 0 2px 8px rgba(217,119,6,0.1); }
}
@keyframes breathe-low-light {
  0%, 100% { box-shadow: 0 0 0 1px rgba(220,38,38,0.2), 0 1px 4px rgba(220,38,38,0.04); }
  50% { box-shadow: 0 0 0 1px rgba(220,38,38,0.35), 0 2px 8px rgba(220,38,38,0.08); }
}

.focus-accent:focus { border-color: var(--accent) !important; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-active); }

.glow-core { box-shadow: 0 0 0 1px rgba(52,211,153,0.35), 0 0 10px rgba(52,211,153,0.08); }
.glow-dream { box-shadow: 0 0 0 1px rgba(251,191,36,0.35), 0 0 10px rgba(251,191,36,0.08); }
.glow-forgotten { box-shadow: 0 0 0 1px rgba(251,146,60,0.35), 0 0 10px rgba(251,146,60,0.08); }
.glow-archive { box-shadow: 0 0 0 1px rgba(148,163,184,0.25), 0 0 6px rgba(148,163,184,0.04); }

@keyframes pulse-glow { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
.live-dot { animation: pulse-glow 2s ease-in-out infinite; }

@keyframes slide-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.animate-in { animation: slide-in 0.2s ease-out; }

@keyframes highlight-flash { 0%,100% { background:transparent; } 50% { background:rgba(139,92,246,0.08); } }
.entry-highlight { animation: highlight-flash 0.8s ease-in-out 2; }

.tab-active { position: relative; }
.tab-active::after {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:22px; background:var(--accent); border-radius:0 3px 3px 0;
}

canvas { max-width: 100%; }

.pipeline-stage {
  padding: 8px 12px; border-radius: 8px;
  background: var(--bg-card); border: 1px solid var(--border);
  transition: all 0.15s;
}
.pipeline-stage:hover { transform: translateY(-1px); background: var(--bg-card-hover); }

.phase-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: 4px;
}

/* Breathing animation for entries based on confidence */
@keyframes breathe-high {
  0%, 100% { box-shadow: 0 0 0 1px rgba(52,211,153,0.35), 0 0 10px rgba(52,211,153,0.08); }
  50% { box-shadow: 0 0 0 1px rgba(52,211,153,0.5), 0 0 16px rgba(52,211,153,0.15); }
}
@keyframes breathe-med {
  0%, 100% { box-shadow: 0 0 0 1px rgba(251,191,36,0.35), 0 0 8px rgba(251,191,36,0.06); }
  50% { box-shadow: 0 0 0 1px rgba(251,191,36,0.5), 0 0 14px rgba(251,191,36,0.12); }
}
@keyframes breathe-low {
  0%, 100% { box-shadow: 0 0 0 1px rgba(239,68,68,0.3), 0 0 6px rgba(239,68,68,0.05); }
  50% { box-shadow: 0 0 0 1px rgba(239,68,68,0.5), 0 0 12px rgba(239,68,68,0.1); }
}
.breathe-high { animation: breathe-high 3s ease-in-out infinite; }
.breathe-med { animation: breathe-med 4s ease-in-out infinite; }
.breathe-low { animation: breathe-low 5s ease-in-out infinite; }

/* Decay transition badge */
.decay-transition {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 6px; font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
  .breathe-high, .breathe-med, .breathe-low,
  .live-dot, .animate-in, .entry-highlight {
    animation: none !important;
  }
  * { transition-duration: 0.01ms !important; }
}