diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index c052cf9..431004b 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -1,454 +1,546 @@
-@import url('https://fonts.googleapis.com/css2?family=TeleNeo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
-@import "tw-animate-css";
-@import "tailwindcss";
-
-@custom-variant dark (&:is(.dark *));
-
-
-/* Light mode (default) */
+/* ── Design Tokens ──────────────────────────────── */
 :root {
-  --t-bg: #ffffff;
-  --t-bg-card: #ffffff;
-  --t-bg-hover: #f8f8fc;
-  --t-bg-elevated: #fafafa;
-  --t-border: #e8e8f0;
-  --t-border-light: #d0d0d8;
-  --t-text: #1a1a2e;
-  --t-text2: #4a4a5a;
-  --t-text3: #7a7a8a;
-  --t-green: #00b89c;
-  --t-orange: #ff7700;
-  --t-accent-glow: rgba(226,0,116,0.08);
-  --t-pattern-opacity: 0.04;
-  --background: var(--t-bg);
-  --foreground: var(--t-text);
-  --card: var(--t-bg-card);
-  --card-foreground: var(--t-text);
-  --popover: var(--t-bg-card);
-  --popover-foreground: var(--t-text);
-  --primary: #e20074;
-  --primary-foreground: #ffffff;
-  --secondary: var(--t-bg-hover);
-  --secondary-foreground: var(--t-text);
-  --muted: var(--t-bg-hover);
-  --muted-foreground: var(--t-text3);
-  --accent: rgba(226, 0, 116, 0.08);
-  --accent-foreground: #e20074;
-  --destructive: #ff4444;
-  --border: var(--t-border);
-  --input: var(--t-border);
-  --ring: rgba(226, 0, 116, 0.35);
-  --chart-1: #e20074;
-  --chart-2: #be0060;
-  --chart-3: #00b89c;
-  --chart-4: #ff7700;
-  --chart-5: #4a4a5a;
-  --radius: 0.625rem;
-  --sidebar: var(--t-bg-card);
-  --sidebar-foreground: var(--t-text);
-  --sidebar-primary: #e20074;
-  --sidebar-primary-foreground: #ffffff;
-  --sidebar-accent: var(--t-bg-hover);
-  --sidebar-accent-foreground: var(--t-text);
-  --sidebar-border: var(--t-border);
-  --sidebar-ring: rgba(226, 0, 116, 0.35);
+  --rail-bg: #ffffff;
+  --rail-surface: #f7f8fa;
+  --rail-fg: #111827;
+  --rail-muted: #8b929e;
+  --rail-border: #e8eaed;
+  --rail-hover: rgba(0,0,0,.04);
+  --rail-active: rgba(226,0,116,.07);
+
+  --bg: #f2f4f7;
+  --surface: #ffffff;
+  --fg: #111827;
+  --muted: #6b7280;
+  --border: #e5e7eb;
+  --border-strong: #d1d5db;
+
+  --accent: #e20074;
+  --accent-dim: rgba(226,0,116,.10);
+  --accent-hover: #c8006a;
+  --success: #16a34a;
+  --success-bg: rgba(22,163,74,.08);
+  --warn: #d97706;
+  --warn-bg: rgba(217,119,6,.08);
+  --danger: #dc2626;
+  --danger-bg: rgba(220,38,38,.08);
+  --info: #2563eb;
+  --info-bg: rgba(37,99,235,.08);
+
+  --font-display: "TeleNeoWeb-Bold", "Inter", -apple-system, sans-serif;
+  --font-body: "TeleNeoWeb-Regular", "Inter", -apple-system, sans-serif;
+  --font-mono: ui-monospace, "JetBrains Mono", Menlo, monospace;
+
+  --sidebar-w: 232px;
+  --topbar-h: 54px;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-pill: 9999px;
+  --shadow-card: 0 1px 4px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
 }
 
-/* Dark mode */
-.dark {
-  --t-bg: #0a0a12;
-  --t-bg-card: #12121f;
-  --t-bg-hover: #1a1a2e;
-  --t-bg-elevated: #1e1e30;
-  --t-border: #2a2a40;
-  --t-border-light: #4a4a60;
-  --t-text: #ffffff;
-  --t-text2: #c0c0d0;
-  --t-text3: #9a9aaa;
-  --t-green: #00d4aa;
-  --t-orange: #ff8800;
-  --t-accent-glow: rgba(226,0,116,0.12);
-  --t-pattern-opacity: 0.03;
-  --background: var(--t-bg);
-  --foreground: var(--t-text);
-  --card: var(--t-bg-card);
-  --card-foreground: var(--t-text);
-  --popover: var(--t-bg-card);
-  --popover-foreground: var(--t-text);
-  --primary: #e20074;
-  --primary-foreground: #ffffff;
-  --secondary: var(--t-bg-hover);
-  --secondary-foreground: var(--t-text);
-  --muted: var(--t-bg-hover);
-  --muted-foreground: var(--t-text3);
-  --accent: rgba(226, 0, 116, 0.14);
-  --accent-foreground: #ff7abf;
-  --destructive: #ff4444;
-  --border: var(--t-border);
-  --input: var(--t-border-light);
-  --ring: rgba(226, 0, 116, 0.45);
-  --chart-1: #e20074;
-  --chart-2: #f04090;
-  --chart-3: #00d4aa;
-  --chart-4: #ff8800;
-  --chart-5: #c0c0d0;
-  --sidebar: var(--t-bg-card);
-  --sidebar-foreground: var(--t-text);
-  --sidebar-primary: #e20074;
-  --sidebar-primary-foreground: #ffffff;
-  --sidebar-accent: var(--t-bg-hover);
-  --sidebar-accent-foreground: var(--t-text);
-  --sidebar-border: var(--t-border);
-  --sidebar-ring: rgba(226, 0, 116, 0.45);
-}
-
-/* Dim mode — Indigo Dusk: deep navy-purple mid-tone between dark and light */
-.dim {
-  --t-bg: #1e1b2e;
-  --t-bg-card: #252237;
-  --t-bg-hover: #2d2945;
-  --t-bg-elevated: #292541;
-  --t-border: #3a3650;
-  --t-border-light: #504c6e;
-  --t-text: #f0eeff;
-  --t-text2: #b8b4d8;
-  --t-text3: #7a7698;
-  --t-green: #00c4a0;
-  --t-orange: #ff8820;
-  --t-accent-glow: rgba(226,0,116,0.14);
-  --t-pattern-opacity: 0.04;
-  --background: var(--t-bg);
-  --foreground: var(--t-text);
-  --card: var(--t-bg-card);
-  --card-foreground: var(--t-text);
-  --popover: var(--t-bg-card);
-  --popover-foreground: var(--t-text);
-  --primary: #e20074;
-  --primary-foreground: #ffffff;
-  --secondary: var(--t-bg-hover);
-  --secondary-foreground: var(--t-text);
-  --muted: var(--t-bg-hover);
-  --muted-foreground: var(--t-text3);
-  --accent: rgba(226, 0, 116, 0.12);
-  --accent-foreground: #f04090;
-  --destructive: #ff4444;
-  --border: var(--t-border);
-  --input: var(--t-border-light);
-  --ring: rgba(226, 0, 116, 0.40);
-  --sidebar: var(--t-bg-card);
-  --sidebar-foreground: var(--t-text);
-  --sidebar-primary: #e20074;
-  --sidebar-primary-foreground: #ffffff;
-  --sidebar-accent: var(--t-bg-hover);
-  --sidebar-accent-foreground: var(--t-text);
-  --sidebar-border: var(--t-border);
-  --sidebar-ring: rgba(226, 0, 116, 0.40);
-}
-
-/* Base styles */
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html, body, #root {
-  height: 100%;
+[data-theme="dark"] {
+  --rail-bg: #1a1a2e;
+  --rail-surface: #16213e;
+  --rail-fg: #f0f0f0;
+  --rail-muted: #8b929e;
+  --rail-border: #2d3748;
+  --rail-hover: rgba(255,255,255,.06);
+  --rail-active: rgba(226,0,116,.15);
+
+  --bg: #0f0f1a;
+  --surface: #1a1a2e;
+  --fg: #f0f0f0;
+  --muted: #9ca3af;
+  --border: #2d3748;
+  --border-strong: #4a5568;
 }
 
+/* ── Base Reset ─────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { height: 100%; }
 body {
-  font-family: 'TeleNeo', 'Segoe UI', system-ui, sans-serif;
-  overflow-x: hidden;
-  font-feature-settings: 'kern' 1;
-  color: #1a1a2e;
-  background: #ffffff;
+  height: 100%;
+  font-family: var(--font-body);
+  background: var(--bg);
+  color: var(--fg);
+  line-height: 1.5;
   -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+}
+#root { height: 100%; }
+
+/* ── Utility Classes ────────────────────────────── */
+.status {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+}
+.status::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.status.ok   { color: var(--success); background: var(--success-bg); }
+.status.ok::before { background: var(--success); }
+.status.warn { color: var(--warn); background: var(--warn-bg); }
+.status.warn::before { background: var(--warn); }
+.status.risk { color: var(--danger); background: var(--danger-bg); }
+.status.risk::before { background: var(--danger); }
+.status.info { color: var(--info); background: var(--info-bg); }
+.status.info::before { background: var(--info); }
+
+.card {
+  background: var(--surface);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-card);
+  padding: 16px 18px;
 }
 
-/* Dark mode body */
-.dark body,
-body.dark-mode {
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 12px;
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  font-family: var(--font-body);
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--fg);
+  transition: background 0.15s, color 0.15s;
+  white-space: nowrap;
+}
+.btn:hover { background: var(--bg); }
+.btn.primary {
+  background: var(--accent);
   color: #fff;
-  background: #0a0a12;
+  border-color: var(--accent);
+}
+.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
+.btn.sm { height: 28px; font-size: 12px; padding: 0 10px; }
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* ── App Shell ──────────────────────────────────── */
+.app-shell {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+}
+.content-area {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
-/* Dim mode body */
-.dim body,
-body.dim-mode {
-  color: #f0eeff;
-  background: #1e1b2e;
+/* ── Sidebar ────────────────────────────────────── */
+.sidebar {
+  width: var(--sidebar-w);
+  min-height: 100vh;
+  background: var(--rail-bg);
+  border-right: 1px solid var(--rail-border);
+  display: flex;
+  flex-direction: column;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow: hidden;
+  flex-shrink: 0;
 }
 
-/* Selection */
-::selection {
-  background: rgba(226, 0, 116, 0.3);
+.sidebar-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 18px 16px 14px;
+  border-bottom: 1px solid var(--rail-border);
+}
+.brand-mark {
+  width: 32px; height: 32px;
+  background: var(--accent);
+  color: #fff;
+  border-radius: 8px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 11px; font-weight: 700; font-family: var(--font-display);
+  flex-shrink: 0;
+}
+.brand-name { font-size: 13px; font-weight: 700; font-family: var(--font-display); color: var(--rail-fg); }
+.brand-sub  { font-size: 10px; color: var(--rail-muted); }
+
+.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 0; }
+
+.nav-group { margin-bottom: 4px; }
+.nav-group-label {
+  font-size: 10px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.06em;
+  color: var(--rail-muted);
+  padding: 8px 16px 4px;
 }
 
-/* Scrollbar */
-::-webkit-scrollbar {
-  width: 8px;
+.nav-item {
+  display: flex; align-items: center; gap: 9px;
+  height: 36px; padding: 0 14px 0 16px;
+  text-decoration: none;
+  color: var(--rail-fg);
+  font-size: 13px;
+  border-left: 3px solid transparent;
+  transition: background 0.12s, color 0.12s;
+  position: relative;
+}
+.nav-item:hover { background: var(--rail-hover); }
+.nav-item.active {
+  background: var(--rail-active);
+  color: var(--accent);
+  border-left-color: var(--accent);
+  font-weight: 600;
+}
+.nav-icon { display: flex; align-items: center; color: inherit; flex-shrink: 0; }
+.nav-label { flex: 1; }
+.nav-badge {
+  font-size: 10px; font-weight: 700; font-family: var(--font-mono);
+  background: var(--accent-dim); color: var(--accent);
+  padding: 1px 6px; border-radius: var(--radius-pill);
 }
 
-::-webkit-scrollbar-track {
-  background: transparent;
+.sidebar-footer {
+  display: flex; align-items: center; gap: 8px;
+  padding: 12px 14px;
+  border-top: 1px solid var(--rail-border);
+}
+.sidebar-user { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
+.user-avatar {
+  width: 28px; height: 28px;
+  background: var(--accent-dim); color: var(--accent);
+  border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 10px; font-weight: 700; flex-shrink: 0;
+}
+.user-name { font-size: 12px; font-weight: 600; color: var(--rail-fg); }
+.user-role { font-size: 10px; color: var(--rail-muted); }
+
+.theme-btn {
+  width: 28px; height: 28px;
+  border: 1px solid var(--rail-border);
+  background: var(--rail-surface);
+  color: var(--rail-muted);
+  border-radius: var(--radius-sm);
+  display: flex; align-items: center; justify-content: center;
+  cursor: pointer; flex-shrink: 0;
+  transition: background 0.12s;
+}
+.theme-btn:hover { background: var(--rail-hover); color: var(--rail-fg); }
+
+/* ── Topbar ─────────────────────────────────────── */
+.topbar {
+  height: var(--topbar-h);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 22px;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+  flex-shrink: 0;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+.topbar-left { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
+.topbar-title { font-size: 15px; font-weight: 700; font-family: var(--font-display); color: var(--fg); }
+.topbar-sub { font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
+.topbar-actions { display: flex; align-items: center; gap: 8px; }
+
+/* ── Page Content ───────────────────────────────── */
+.page-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
 }
 
-::-webkit-scrollbar-thumb {
-  background: linear-gradient(180deg, #e20074, #be0060);
-  border-radius: 4px;
-}
+/* ── Search Box ─────────────────────────────────── */
+.search-box { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); font-size: 13px; color: var(--muted); }
+.search-box input { border: none; background: transparent; outline: none; font-size: 13px; color: var(--fg); width: 160px; }
 
-/* Monospace font class */
-.mono {
-  font-family: 'JetBrains Mono', monospace;
-}
+/* ── Filter Bar / Chips ─────────────────────────── */
+.filter-bar { display: flex; align-items: center; gap: 12px; padding: 10px 22px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
+.chip-group { display: flex; gap: 6px; flex-wrap: wrap; }
+.chip { height: 26px; padding: 0 10px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: transparent; font-size: 11px; font-weight: 500; cursor: pointer; color: var(--muted); transition: all 0.12s; }
+.chip:hover { border-color: var(--accent); color: var(--accent); }
+.chip.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); font-weight: 600; }
+.filter-sep { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }
 
-/* Smooth transitions for theme */
-* {
-  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
-}
+/* ── Page Footer (live dot) ─────────────────────── */
+.page-footer { padding: 12px 22px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); background: var(--surface); flex-shrink: 0; }
+.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px var(--success-bg); animation: pulse 2s ease-in-out infinite; }
+@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
 
-/* Exclude buttons from auto-transition for custom hover effects */
-button, input {
-  transition: none;
-}
+/* ── Overview Page ──────────────────────────────── */
+.overview-page { padding: 32px; max-width: 900px; display: flex; flex-direction: column; gap: 32px; }
 
-/* Shell navigation manages its own transition timing. */
-[data-shell-tab='true'] {
-  transition: color 0.2s ease-out;
-}
+.overview-hero { display: flex; flex-direction: column; gap: 12px; }
+.hero-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
+.hero-title { font-size: 32px; font-weight: 700; font-family: var(--font-display); line-height: 1.15; }
+.hero-desc { font-size: 14px; color: var(--muted); max-width: 480px; line-height: 1.6; }
+.hero-actions { display: flex; gap: 10px; padding-top: 4px; }
 
-/* T-Systems Button Style */
-.t-btn,
-.t-btn:hover {
-  transition: all 0.3s ease;
-}
+.overview-summary { display: flex; align-items: center; gap: 0; }
+.summary-item { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; padding: 14px; }
+.summary-num { font-size: 22px; font-weight: 700; font-family: var(--font-display); color: var(--accent); }
+.summary-label { font-size: 11px; color: var(--muted); }
+.summary-divider { width: 1px; height: 40px; background: var(--border); flex-shrink: 0; }
 
-.t-btn {
-  background: linear-gradient(135deg, #e20074 0%, #be0060 100%);
-}
+.section-title { font-size: 13px; font-weight: 700; font-family: var(--font-display); color: var(--fg); margin-bottom: 14px; }
 
-.t-btn:hover {
-  background: linear-gradient(135deg, #f0208a 0%, #d01070 100%);
-  box-shadow: 0 4px 20px rgba(226,0,116,0.4);
-  transform: translateY(-1px);
-}
+.workflow-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
+.workflow-step { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
+.step-num { font-size: 10px; font-weight: 700; font-family: var(--font-mono); color: var(--accent); }
+.step-label { font-size: 13px; font-weight: 700; font-family: var(--font-display); }
+.step-desc { font-size: 11px; color: var(--muted); line-height: 1.4; }
 
-/* T-Systems Gradient Background */
-.t-gradient-bg {
-  background: linear-gradient(135deg, #0a0a12 0%, #1a1a2e 50%, #0a0a12 100%);
-}
+.screen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
+.screen-card { text-align: left; cursor: pointer; border: none; transition: box-shadow 0.15s; display: flex; flex-direction: column; gap: 6px; }
+.screen-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.10), 0 0 0 2px var(--accent-dim); }
+.screen-icon { width: 36px; height: 36px; background: var(--accent-dim); color: var(--accent); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
+.screen-label { font-size: 13px; font-weight: 700; font-family: var(--font-display); }
+.screen-desc { font-size: 12px; color: var(--muted); line-height: 1.4; }
 
-/* Magenta Glow */
-.magenta-glow {
-  box-shadow: 0 0 20px rgba(226,0,116,0.15), 0 0 40px rgba(226,0,116,0.05);
-}
+/* ── Status Page ────────────────────────────────── */
+.status-page { display: flex; flex-direction: column; height: 100%; }
 
-/* Card gradient for dark mode */
-.dark .t-card-gradient {
-  background: linear-gradient(180deg, #12121f, #0a0a12);
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  background: var(--surface);
+  box-shadow: var(--shadow-card);
+  margin-bottom: 20px;
 }
-
-/* Card gradient for dim mode */
-.dim .t-card-gradient {
-  background: linear-gradient(180deg, #e8e5f4, #f0eef8);
+.stat-cell {
+  padding: 18px 22px;
+  border-right: 1px solid var(--border);
+  display: flex; flex-direction: column; gap: 4px;
 }
+.stat-cell:last-child { border-right: none; }
+.stat-value { font-size: 26px; font-weight: 700; font-family: var(--font-display); }
+.stat-label { font-size: 11px; color: var(--muted); }
+.stat-cell.danger .stat-value { color: var(--danger); }
 
-/* Card gradient for light mode */
-:not(.dark):not(.dim) .t-card-gradient {
-  background: linear-gradient(180deg, #ffffff, #fafafa);
+.panel-grid { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: 16px; }
+.panel-left, .panel-right { display: flex; flex-direction: column; gap: 16px; }
+
+.card-header { font-size: 12px; font-weight: 700; font-family: var(--font-display); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
+
+.task-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
+.task-info { flex: 1; min-width: 0; }
+.task-name { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
+.task-progress-bar { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
+.task-progress-fill { height: 100%; background: var(--accent); border-radius: 2px; }
+
+.program-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border); }
+.program-pct { font-size: 12px; font-weight: 700; font-family: var(--font-mono); color: var(--muted); }
+
+.kpi-strip { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
+.kpi-item { display: flex; align-items: center; gap: 10px; }
+.kpi-label { font-size: 11px; color: var(--muted); width: 130px; flex-shrink: 0; }
+.kpi-bar { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
+.kpi-fill { height: 100%; background: var(--accent); border-radius: 2px; }
+.kpi-value { font-size: 11px; font-weight: 700; font-family: var(--font-mono); color: var(--fg); width: 36px; text-align: right; flex-shrink: 0; }
+
+.service-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--border); }
+.service-name { font-size: 13px; }
+
+.event-row { padding: 10px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; }
+.event-date { font-size: 10px; font-family: var(--font-mono); color: var(--muted); }
+.event-title { font-size: 13px; font-weight: 600; }
+.event-summary { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+
+/* ── Perception Page ────────────────────────────── */
+.perception-page { display: flex; flex-direction: column; height: 100%; }
+
+.stats-bar { display: flex; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
+.sbar-cell { flex: 1; padding: 14px 22px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; }
+.sbar-cell:last-child { border-right: none; }
+.sbar-val { font-size: 22px; font-weight: 700; font-family: var(--font-display); }
+.sbar-lbl { font-size: 11px; color: var(--muted); }
+.sbar-cell.danger .sbar-val { color: var(--danger); }
+.sbar-cell.warn   .sbar-val { color: var(--warn); }
+.sbar-cell.accent .sbar-val { color: var(--accent); }
+
+.perception-split { display: grid; grid-template-columns: 360px 1fr; flex: 1; overflow: hidden; }
+
+.feed-pane { overflow-y: auto; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 0; }
+.ev-card { padding: 14px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.12s; border-left: 3px solid transparent; }
+.ev-card:hover { background: var(--bg); }
+.ev-card.selected { border-left-color: var(--accent); background: var(--accent-dim); box-shadow: inset 0 0 0 1px var(--accent-dim); }
+.ev-top { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
+.ev-std { font-size: 10px; font-family: var(--font-mono); color: var(--muted); }
+.ev-title { font-size: 13px; font-weight: 600; line-height: 1.35; margin-bottom: 5px; }
+.ev-summary { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; }
+.ev-bottom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.ev-date { font-size: 10px; font-family: var(--font-mono); color: var(--muted); }
+.ev-tags { display: flex; gap: 4px; flex-wrap: wrap; }
+.ev-tag { font-size: 10px; padding: 1px 6px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--muted); }
+.impact-dot { font-size: 10px; font-weight: 700; margin-left: auto; }
+.impact-high   { color: var(--danger); }
+.impact-medium { color: var(--warn); }
+.impact-low    { color: var(--success); }
+
+.source-tag { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: var(--radius-pill); background: var(--accent-dim); color: var(--accent); }
+
+.analysis-pane { overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
+.analysis-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--muted); font-size: 13px; }
+.empty-ring { width: 56px; height: 56px; border-radius: 50%; border: 2px dashed var(--border); }
+
+.detail-card { display: flex; flex-direction: column; gap: 10px; }
+.detail-header { display: flex; align-items: center; gap: 8px; }
+.detail-title { font-size: 15px; font-weight: 700; font-family: var(--font-display); }
+.detail-summary { font-size: 13px; color: var(--muted); line-height: 1.6; }
+.detail-actions { display: flex; gap: 8px; padding-top: 4px; }
+
+.docs-card { display: flex; flex-direction: column; gap: 0; }
+.doc-row { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
+.doc-score { font-size: 11px; font-weight: 700; font-family: var(--font-mono); color: var(--success); width: 34px; flex-shrink: 0; padding-top: 1px; }
+.doc-info {}
+.doc-name { font-size: 12px; font-weight: 600; margin-bottom: 3px; }
+.doc-clause { font-size: 10px; font-family: var(--font-mono); color: var(--muted); margin-left: 5px; }
+.doc-snippet { font-size: 11px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+
+.ai-card .ai-output { font-size: 13px; line-height: 1.7; white-space: pre-wrap; font-family: var(--font-mono); }
+.blink-cursor { animation: blink 1s step-end infinite; }
+@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
+
+/* ── Documents Page ─────────────────────────────── */
+.docs-page { display: flex; flex-direction: column; height: 100%; }
+
+.docs-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
+.select-input { height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: 12px; color: var(--fg); outline: none; cursor: pointer; }
+
+.batch-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--accent-dim); border: 1px solid var(--accent); border-radius: var(--radius-sm); margin-bottom: 12px; font-size: 13px; color: var(--accent); font-weight: 600; }
+.risk-btn { color: var(--danger); border-color: var(--danger-bg); }
+
+.docs-table { background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden; }
+.table-header {
+  display: grid;
+  grid-template-columns: 28px 1.4fr 0.8fr 0.85fr 0.85fr 0.75fr 0.75fr;
+  gap: 12px;
+  padding: 10px 14px;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
+  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
+  align-items: center;
 }
-
-/* Light mode shadow for cards */
-:not(.dark):not(.dim) .t-card-shadow {
-  box-shadow: 0 2px 8px rgba(226,0,116,0.04);
+.table-row {
+  display: grid;
+  grid-template-columns: 28px 1.4fr 0.8fr 0.85fr 0.85fr 0.75fr 0.75fr;
+  gap: 12px;
+  padding: 11px 14px;
+  border-bottom: 1px solid var(--border);
+  font-size: 13px;
+  align-items: center;
+  transition: background 0.1s;
 }
+.table-row:last-child { border-bottom: none; }
+.table-row:hover { background: var(--bg); }
+.table-row.row-selected { background: var(--accent-dim); }
+.doc-name-cell { font-weight: 500; }
+.cell-mono { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
+.cell-muted { font-size: 12px; color: var(--muted); }
+.row-actions { display: flex; gap: 10px; }
+.text-link { background: none; border: none; font-size: 12px; color: var(--accent); cursor: pointer; font-weight: 500; padding: 0; }
+.text-link:hover { text-decoration: underline; }
+.danger-link { color: var(--danger); }
 
-:not(.dark):not(.dim) .t-card-shadow-lg {
-  box-shadow: 0 4px 16px rgba(226,0,116,0.08);
-}
+/* ── Compliance Page ────────────────────────────── */
+.compliance-page { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
 
-/* Accent glow */
-.t-accent-glow {
-  box-shadow: 0 0 12px rgba(226,0,116,0.5), 0 0 24px rgba(226,0,116,0.2);
-}
+.compliance-hero { padding: 20px 24px 0; flex-shrink: 0; }
+.compliance-title { font-size: 18px; font-weight: 700; font-family: var(--font-display); margin-bottom: 4px; }
+.compliance-desc { font-size: 13px; color: var(--muted); }
 
-/* High risk glow */
-.t-risk-high-glow {
-  box-shadow: 0 0 8px rgba(255,68,68,0.3);
-}
+.compliance-workspace { display: grid; grid-template-columns: 0.95fr 1.25fr 0.9fr; gap: 14px; padding: 16px 24px 24px; flex: 1; overflow: hidden; min-height: 0; }
 
-/* Medium risk glow */
-.t-risk-medium-glow {
-  box-shadow: 0 0 6px rgba(255,136,0,0.2);
-}
+.comp-col { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
+.col-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 0 2px 4px; flex-shrink: 0; }
 
-/* Low risk glow */
-.t-risk-low-glow {
-  box-shadow: 0 0 4px rgba(0,212,170,0.15);
-}
+.source-item { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
+.source-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.source-std { font-size: 13px; font-weight: 700; font-family: var(--font-display); }
+.source-helper { font-size: 11px; color: var(--muted); }
+.source-scores { display: flex; gap: 5px; flex-wrap: wrap; }
+.score-pill { font-size: 10px; font-family: var(--font-mono); padding: 2px 6px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--muted); }
 
-/* Pulse glow animation */
-@keyframes pulse-glow {
-  0%, 100% {
-    box-shadow: 0 0 12px rgba(226,0,116,0.5), 0 0 24px rgba(226,0,116,0.2);
-  }
-  50% {
-    box-shadow: 0 0 16px rgba(226,0,116,0.7), 0 0 32px rgba(226,0,116,0.3);
-  }
-}
+.para-card { flex-shrink: 0; }
+.para-text { font-size: 13px; line-height: 1.7; color: var(--fg); }
+.para-text mark { background: rgba(226,0,116,.15); color: var(--accent); padding: 0 2px; border-radius: 2px; }
 
-.animate-pulse-glow {
-  animation: pulse-glow 2s infinite;
-}
+.stages-card { flex-shrink: 0; }
+.stage-row { padding: 8px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 5px; }
+.stage-label-row { display: flex; justify-content: space-between; align-items: center; }
+.stage-label { font-size: 12px; }
+.stage-pct { font-size: 11px; font-family: var(--font-mono); color: var(--muted); }
+.stage-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
+.stage-fill { height: 100%; border-radius: 2px; }
+.stage-fill.stage-ok   { background: var(--success); }
+.stage-fill.stage-warn { background: var(--warn); }
+.stage-fill.stage-info { background: var(--info); }
 
-@keyframes pulse-glow {
-  0%, 100% {
-    box-shadow: 0 0 12px rgba(226,0,116,0.5), 0 0 24px rgba(226,0,116,0.2);
-  }
-  50% {
-    box-shadow: 0 0 16px rgba(226,0,116,0.7), 0 0 32px rgba(226,0,116,0.3);
-  }
-}
+.finding-item { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
+.finding-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
+.finding-title { font-size: 13px; font-weight: 600; line-height: 1.3; }
+.finding-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }
 
-/* Slide up animation */
-@keyframes slideUp {
-  0% {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
+.conclusion-box { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
+.conclusion-text { font-size: 12px; line-height: 1.6; color: var(--fg); }
+.action-items { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
+.action-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
+.action-label { color: var(--muted); }
+.action-value { font-weight: 600; }
+.risk-text { color: var(--danger); }
 
-.animate-slide-up {
-  animation: slideUp 0.3s ease;
-}
+/* ── Chat Page ──────────────────────────────────── */
+.chat-page { display: flex; flex-direction: column; height: 100%; }
+.chat-body { display: grid; grid-template-columns: 280px minmax(0,1fr) 320px; flex: 1; overflow: hidden; min-height: 0; }
 
-/* Slide in animation */
-@keyframes slideIn {
-  0% {
-    transform: translateX(100%);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
+.history-pane { border-right: 1px solid var(--border); overflow-y: auto; padding: 14px 0; background: var(--surface); display: flex; flex-direction: column; gap: 0; }
+.history-header, .quick-header { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 10px 16px 6px; }
+.history-item { padding: 8px 16px; cursor: pointer; border-radius: 0; transition: background 0.1s; }
+.history-item:hover { background: var(--bg); }
+.history-title { font-size: 12px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.history-date { font-size: 10px; font-family: var(--font-mono); color: var(--muted); margin-top: 2px; }
+.quick-item { background: none; border: none; text-align: left; padding: 8px 16px; font-size: 12px; color: var(--muted); cursor: pointer; line-height: 1.4; transition: color 0.1s, background 0.1s; }
+.quick-item:hover { color: var(--accent); background: var(--accent-dim); }
 
-.animate-slide-in {
-  animation: slideIn 0.3s ease-out forwards;
-}
+.chat-main { display: flex; flex-direction: column; overflow: hidden; }
+.messages { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
+.message { display: flex; gap: 10px; align-items: flex-end; }
+.msg-user { flex-direction: row-reverse; }
+.msg-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; background: var(--accent-dim); color: var(--accent); }
+.msg-avatar.user-av { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
+.msg-bubble { max-width: 72%; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.6; }
+.msg-assistant .msg-bubble { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
+.msg-user .msg-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
 
-/* Slide out animation */
-@keyframes slideOut {
-  0% {
-    transform: translateX(0);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}
+.composer { padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
+.quick-chips { display: flex; gap: 6px; flex-wrap: wrap; }
+.composer-row { display: flex; gap: 8px; align-items: flex-end; }
+.composer-input { flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); font-size: 13px; font-family: var(--font-body); color: var(--fg); resize: none; outline: none; line-height: 1.5; }
+.composer-input:focus { border-color: var(--accent); }
 
-.animate-slide-out {
-  animation: slideOut 0.3s ease-in forwards;
-}
-
-/* Pulse animation for processing steps */
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.8;
-    transform: scale(0.95);
-  }
-}
-
-.animate-pulse {
-  animation: pulse 0.6s ease-in-out infinite;
-}
-
-/* Spin animation for loading icons */
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.animate-spin {
-  animation: spin 1s linear infinite;
-}
-
-/* Custom utility classes */
-@layer utilities {
-  .gradient-accent {
-    background: linear-gradient(135deg, #e20074 0%, #be0060 100%);
-  }
-
-  .gradient-accent-hover {
-    background: linear-gradient(135deg, #f0208a 0%, #d01070 100%);
-  }
-}
-
-@theme inline {
-  --font-heading: 'TeleNeo', 'Segoe UI', system-ui, sans-serif;
-  --font-sans: 'TeleNeo', 'Segoe UI', system-ui, sans-serif;
-  --font-mono: 'JetBrains Mono', monospace;
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --color-foreground: var(--foreground);
-  --color-background: var(--background);
-  --radius-sm: calc(var(--radius) * 0.6);
-  --radius-md: calc(var(--radius) * 0.8);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) * 1.4);
-  --radius-2xl: calc(var(--radius) * 1.8);
-  --radius-3xl: calc(var(--radius) * 2.2);
-  --radius-4xl: calc(var(--radius) * 2.6);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-  html {
-    @apply font-sans;
-  }
-}
+.citation-rail { border-left: 1px solid var(--border); overflow-y: auto; padding: 14px 0; background: var(--surface); }
+.citation-header { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 0 16px 8px; }
+.citation-item { display: flex; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
+.cit-score { font-size: 11px; font-weight: 700; font-family: var(--font-mono); color: var(--success); width: 34px; flex-shrink: 0; padding-top: 1px; }
+.cit-name { font-size: 12px; font-weight: 600; margin-bottom: 3px; }
+.cit-clause { font-size: 10px; font-family: var(--font-mono); color: var(--muted); margin-left: 5px; }
+.cit-snippet { font-size: 11px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; }