principles-disciple 1.72.0 → 1.74.0

package/ui/src/styles.css

@@ -1,2020 +0,0 @@
-/* ==========================================================================
-   Principles Console - Design System
-   Warm Natural × Soft UI Evolution
-   ========================================================================== */
-
-/* Google Fonts - display=swap for non-blocking font loading */
-@import url('https://fonts.googleapis.com/css2?family=Calistoga&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
-
-/* ==========================================================================
-   CSS Variables - Design Tokens
-   ========================================================================== */
-
-:root {
-  /* Background Layers - 暖奶油色系 */
-  --bg-base: #FAF7F2;
-  --bg-elevated: #FFFFFF;
-  --bg-sunken: #F0EBE3;
-
-  /* Accent - 深橄榄绿 (柔和版本) */
-  --accent: #4A7C6F;
-  --accent-hover: #3D6A5E;
-  --accent-soft: rgba(74, 124, 111, 0.1);
-  --accent-muted: rgba(74, 124, 111, 0.06);
-
-  /* Earth Tones - 大地色系 */
-  --earth-brown: #8B7355;
-  --earth-tan: #C4A882;
-  --earth-cream: #E8DFD0;
-  --earth-warm: #D4C4A8;
-
-  /* Text Hierarchy */
-  --text-primary: #2D2A26;
-  --text-secondary: #6B6560;
-  --text-tertiary: #9A948C;
-
-  /* Borders & Dividers */
-  --border: rgba(139, 115, 85, 0.15);
-  --border-hover: rgba(139, 115, 85, 0.25);
-
-  /* Status Colors */
-  --success: #4A7C6F;
-  --warning: #B8860B;
-  --error: #C45C4A;
-  --info: #5B8BA0;
-
-  /* Cards & Surfaces */
-  --card-bg: #FFFFFF;
-  --card-radius: 16px;
-
-  /* Shadows */
-  --shadow-sm: 0 1px 2px rgba(139, 115, 85, 0.05);
-  --shadow-md: 0 2px 8px rgba(139, 115, 85, 0.08), 0 4px 16px rgba(139, 115, 85, 0.04);
-  --shadow-lg: 0 4px 12px rgba(139, 115, 85, 0.12), 0 8px 24px rgba(139, 115, 85, 0.06);
-
-  /* Typography */
-  --font-display: 'Calistoga', serif;
-  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
-
-  /* Spacing */
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-5: 20px;
-  --space-6: 24px;
-  --space-8: 32px;
-  --space-10: 40px;
-  --space-12: 48px;
-
-  /* Border Radius */
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
-  --radius-full: 9999px;
-
-  /* Animation */
-  --duration-fast: 150ms;
-  --duration-normal: 200ms;
-  --duration-slow: 300ms;
-  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
-  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-/* ==========================================================================
-   Dark Mode — system preference + manual toggle via [data-theme]
-   ========================================================================== */
-
-[data-theme="dark"] {
-  --bg-base: #1A1917;
-  --bg-elevated: #242220;
-  --bg-sunken: #131311;
-  --accent: #6BA394;
-  --accent-hover: #7DB5A8;
-  --accent-soft: rgba(107, 163, 148, 0.15);
-  --accent-muted: rgba(107, 163, 148, 0.08);
-  --earth-brown: #A08E74;
-  --earth-tan: #9A8A70;
-  --earth-cream: #3D3830;
-  --earth-warm: #4A4238;
-  --text-primary: #F5F2ED;
-  --text-secondary: #A8A29A;
-  --text-tertiary: #706B65;
-  --border: rgba(160, 142, 116, 0.2);
-  --border-hover: rgba(160, 142, 116, 0.35);
-  --card-bg: #242220;
-  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
-  --shadow-md: 0 2px 8px rgba(0,0,0,0.25), 0 4px 16px rgba(0,0,0,0.12);
-  --shadow-lg: 0 4px 12px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.15);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) {
-    --bg-base: #1A1917;
-    --bg-elevated: #242220;
-    --bg-sunken: #131311;
-    --accent: #6BA394;
-    --accent-hover: #7DB5A8;
-    --accent-soft: rgba(107, 163, 148, 0.15);
-    --accent-muted: rgba(107, 163, 148, 0.08);
-    --earth-brown: #A08E74;
-    --earth-tan: #9A8A70;
-    --earth-cream: #3D3830;
-    --earth-warm: #4A4238;
-    --text-primary: #F5F2ED;
-    --text-secondary: #A8A29A;
-    --text-tertiary: #706B65;
-    --border: rgba(160, 142, 116, 0.2);
-    --border-hover: rgba(160, 142, 116, 0.35);
-    --card-bg: #242220;
-    --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
-    --shadow-md: 0 2px 8px rgba(0,0,0,0.25), 0 4px 16px rgba(0,0,0,0.12);
-    --shadow-lg: 0 4px 12px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.15);
-  }
-
-  .spinner {
-    border-color: rgba(255,255,255,0.1);
-    border-top-color: var(--accent);
-  }
-
-  .auth-checking {
-    background: var(--bg-base);
-  }
-
-  .auth-checking-content {
-    color: var(--text-primary);
-  }
-}
-
-/* ==========================================================================
-   Base Styles
-   ========================================================================== */
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  font-size: 16px;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  font-family: var(--font-body);
-  font-size: 15px;
-  line-height: 1.6;
-  color: var(--text-primary);
-  background: var(--bg-base);
-  min-height: 100vh;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-button {
-  font-family: inherit;
-  cursor: pointer;
-  border: none;
-  background: none;
-}
-
-input, select {
-  font-family: inherit;
-  font-size: inherit;
-}
-
-/* ==========================================================================
-   App Shell Layout
-   ========================================================================== */
-
-.app-shell {
-  display: grid;
-  grid-template-columns: 260px minmax(0, 1fr);
-  min-height: 100dvh;
-}
-
-/* Skip to content link for keyboard accessibility */
-.skip-link {
-  position: absolute;
-  top: -40px;
-  left: 0;
-  background: var(--accent);
-  color: white;
-  padding: var(--space-2) var(--space-4);
-  z-index: 9999;
-  border-radius: 0 0 var(--radius-md) 0;
-  font-size: 14px;
-  font-weight: 500;
-  transition: top var(--duration-fast) var(--ease-out);
-}
-
-.skip-link:focus {
-  top: 0;
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
-/* ==========================================================================
-   Sidebar
-   ========================================================================== */
-
-.sidebar {
-  display: flex;
-  flex-direction: column;
-  padding: var(--space-6);
-  background: var(--card-bg);
-  border-right: 1px solid var(--border);
-  position: sticky;
-  top: 0;
-  height: 100vh;
-  overflow-y: auto;
-}
-
-.brand {
-  margin-bottom: var(--space-8);
-}
-
-.brand-logo {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  margin-bottom: var(--space-3);
-}
-
-.brand-logo .logo-icon {
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--accent-soft);
-  border-radius: var(--radius-md);
-  color: var(--accent);
-}
-
-.brand-logo .logo-icon svg {
-  width: 22px;
-  height: 22px;
-}
-
-.brand h1 {
-  font-family: var(--font-display);
-  font-size: 22px;
-  font-weight: 400;
-  color: var(--text-primary);
-  margin-bottom: var(--space-1);
-}
-
-.brand p {
-  font-size: 13px;
-  color: var(--text-tertiary);
-}
-
-.eyebrow {
-  display: inline-block;
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--accent);
-  margin-bottom: var(--space-2);
-}
-
-/* Navigation */
-.nav {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  flex: 1;
-}
-
-.nav-link {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  padding: var(--space-3) var(--space-4);
-  border-radius: var(--radius-lg);
-  color: var(--text-secondary);
-  font-size: 14px;
-  font-weight: 500;
-  transition: all var(--duration-fast) var(--ease-out);
-  position: relative;
-}
-
-.nav-link:hover {
-  background: var(--accent-muted);
-  color: var(--text-primary);
-}
-
-.nav-link.active {
-  background: var(--accent-soft);
-  color: var(--accent);
-}
-
-.nav-link.active::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 3px;
-  height: 20px;
-  background: var(--accent);
-  border-radius: 0 2px 2px 0;
-}
-
-.nav-icon {
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.nav-icon svg {
-  width: 18px;
-  height: 18px;
-  stroke-width: 1.75;
-}
-
-/* Sidebar Footer */
-.sidebar-footer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  padding-top: var(--space-6);
-  border-top: 1px solid var(--border);
-  margin-top: var(--space-6);
-}
-
-.export-link,
-.logout-button {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  padding: var(--space-3) var(--space-4);
-  border-radius: var(--radius-lg);
-  color: var(--text-secondary);
-  font-size: 14px;
-  font-weight: 500;
-  transition: all var(--duration-fast) var(--ease-out);
-}
-
-.export-link:hover {
-  background: var(--accent-muted);
-  color: var(--text-primary);
-}
-
-.logout-button:hover {
-  background: rgba(196, 92, 74, 0.08);
-  color: var(--error);
-}
-
-/* ==========================================================================
-   Main Content
-   ========================================================================== */
-
-.content {
-  padding: var(--space-6) var(--space-8);
-  min-height: 100vh;
-}
-
-.page {
-  display: grid;
-  gap: var(--space-6);
-  animation: page-enter var(--duration-slow) var(--ease-out);
-}
-
-@keyframes page-enter {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: var(--space-4);
-  flex-wrap: wrap;
-}
-
-.page-header h2 {
-  font-family: var(--font-display);
-  font-size: 26px;
-  font-weight: 400;
-  color: var(--text-primary);
-  margin: 0;
-}
-
-.page-header .meta {
-  font-size: 13px;
-  color: var(--text-tertiary);
-  text-align: right;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-3);
-  align-items: center;
-}
-
-.refresh-indicator {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  color: var(--accent);
-  font-size: 12px;
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-
-/* ==========================================================================
-   Grid Layouts
-   ========================================================================== */
-
-.grid {
-  display: grid;
-  gap: var(--space-5);
-}
-
-.two-columns {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.wide-right {
-  grid-template-columns: minmax(300px, 1.1fr) minmax(340px, 1.3fr);
-}
-
-.kpi-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: var(--space-4);
-}
-
-/* ==========================================================================
-   Panel / Card
-   ========================================================================== */
-
-.panel {
-  background: var(--card-bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-xl);
-  padding: var(--space-5);
-  box-shadow: var(--shadow-md);
-  transition: all var(--duration-normal) var(--ease-out);
-}
-
-.panel:hover {
-  box-shadow: var(--shadow-lg);
-}
-
-.panel h3 {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin-bottom: var(--space-4);
-}
-
-.panel h4 {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin: var(--space-4) 0 var(--space-3);
-}
-
-.panel.error {
-  background: rgba(196, 92, 74, 0.05);
-  border-color: rgba(196, 92, 74, 0.2);
-  color: var(--error);
-}
-
-/* KPI Panel */
-.panel.kpi {
-  padding: var(--space-4) var(--space-5);
-}
-
-.panel.kpi .label {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--text-tertiary);
-  margin-bottom: var(--space-2);
-}
-
-.panel.kpi .value {
-  font-family: var(--font-mono);
-  font-size: 28px;
-  font-weight: 500;
-  color: var(--text-primary);
-  line-height: 1.2;
-}
-
-.panel.kpi .sub {
-  font-size: 12px;
-  color: var(--text-tertiary);
-  margin-top: var(--space-1);
-}
-
-/* ==========================================================================
-   Row Cards & List Items
-   ========================================================================== */
-
-.trend-list,
-.stack,
-.detail-stack,
-.list-table {
-  display: grid;
-  gap: var(--space-3);
-}
-
-.row-card,
-.trend-row,
-.table-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--space-4);
-  padding: var(--space-3) var(--space-4);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  background: var(--bg-elevated);
-  transition: all var(--duration-fast) var(--ease-out);
-}
-
-.trend-row:hover,
-.row-card:hover,
-.table-row:hover {
-  background: var(--accent-muted);
-  border-color: var(--border-hover);
-}
-
-.table-row {
-  width: 100%;
-  text-align: left;
-  cursor: pointer;
-}
-
-.table-row.active {
-  background: var(--accent-soft);
-  border-color: var(--accent);
-}
-
-.row-card > div {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-}
-
-.row-card strong,
-.table-row strong {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-.row-card span,
-.table-row span,
-.trend-row span {
-  font-size: 13px;
-  color: var(--text-tertiary);
-}
-
-.row-card.vertical {
-  display: grid;
-  gap: var(--space-2);
-}
-
-.align-right {
-  text-align: right;
-}
-
-/* ==========================================================================
-   Badges & Pills
-   ========================================================================== */
-
-.badge {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1);
-  padding: var(--space-1) var(--space-3);
-  border-radius: var(--radius-full);
-  background: var(--accent-soft);
-  color: var(--accent);
-  font-size: 12px;
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-.badge.success {
-  background: rgba(74, 124, 111, 0.12);
-  color: var(--success);
-}
-
-.badge.warning {
-  background: rgba(184, 134, 11, 0.12);
-  color: var(--warning);
-}
-
-.badge.error {
-  background: rgba(196, 92, 74, 0.12);
-  color: var(--error);
-}
-
-.badge.info {
-  background: rgba(91, 139, 160, 0.12);
-  color: var(--info);
-}
-
-.pill-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-2);
-}
-
-/* ==========================================================================
-   Buttons
-   ========================================================================== */
-
-button,
-.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-2);
-  padding: var(--space-3) var(--space-5);
-  border-radius: var(--radius-md);
-  font-size: 14px;
-  font-weight: 500;
-  transition: all var(--duration-fast) var(--ease-out);
-}
-
-.button-primary {
-  background: var(--accent);
-  color: white;
-  border: none;
-}
-
-.button-primary:hover {
-  background: var(--accent-hover);
-  box-shadow: var(--shadow-lg);
-}
-
-.button-secondary {
-  background: transparent;
-  color: var(--text-primary);
-  border: 1px solid var(--border);
-}
-
-.button-secondary:hover {
-  background: var(--bg-sunken);
-  border-color: var(--border-hover);
-}
-
-.button-ghost {
-  background: transparent;
-  color: var(--text-secondary);
-  border: none;
-}
-
-.button-ghost:hover {
-  background: var(--accent-muted);
-  color: var(--text-primary);
-}
-
-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-button:focus-visible,
-.nav-link:focus-visible,
-select:focus-visible,
-input:focus-visible,
-.table-row:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
-.button-row {
-  display: flex;
-  gap: var(--space-3);
-}
-
-/* ==========================================================================
-   Filters & Select
-   ========================================================================== */
-
-.filters {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-3);
-  margin-bottom: var(--space-4);
-}
-
-.filters label {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  font-size: 13px;
-  color: var(--text-secondary);
-}
-
-select {
-  padding: var(--space-2) var(--space-3);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  background: var(--bg-elevated);
-  color: var(--text-primary);
-  font-size: 13px;
-  cursor: pointer;
-  transition: border-color var(--duration-fast) var(--ease-out);
-}
-
-select:hover {
-  border-color: var(--border-hover);
-}
-
-select:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-soft);
-}
-
-/* ==========================================================================
-   Timeline
-   ========================================================================== */
-
-.timeline {
-  position: relative;
-  padding-left: var(--space-8);
-}
-
-.timeline::before {
-  content: '';
-  position: absolute;
-  left: 11px;
-  top: 16px;
-  bottom: 16px;
-  width: 2px;
-  background: var(--border);
-  border-radius: 1px;
-}
-
-.timeline-item {
-  position: relative;
-  padding: var(--space-3) 0 var(--space-3) 28px;
-  display: grid;
-  gap: var(--space-1);
-}
-
-.timeline-marker {
-  position: absolute;
-  left: 5px;
-  top: 16px;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  border: 3px solid white;
-  box-shadow: var(--shadow-sm);
-  z-index: 1;
-}
-
-.timeline-time {
-  font-size: 12px;
-  font-family: var(--font-mono);
-  color: var(--text-tertiary);
-}
-
-.timeline-stage {
-  font-weight: 600;
-  font-size: 14px;
-}
-
-.timeline-summary {
-  font-size: 13px;
-  color: var(--text-secondary);
-  line-height: 1.5;
-}
-
-/* ==========================================================================
-   Detail Panel
-   ========================================================================== */
-
-.detail-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: var(--space-4);
-  margin-bottom: var(--space-5);
-  padding-bottom: var(--space-4);
-  border-bottom: 1px solid var(--border);
-}
-
-.detail-header h3 {
-  font-size: 18px;
-  font-weight: 600;
-  margin: 0;
-}
-
-.detail-header p {
-  font-size: 13px;
-  color: var(--text-tertiary);
-  margin: var(--space-1) 0 0;
-}
-
-.detail-stack {
-  display: grid;
-  gap: var(--space-4);
-}
-
-.detail-stack article {
-  padding-top: var(--space-4);
-  border-top: 1px solid var(--border);
-}
-
-.detail-stack article:first-child {
-  padding-top: 0;
-  border-top: none;
-}
-
-/* ==========================================================================
-   Forms & Inputs
-   ========================================================================== */
-
-.form-group {
-  display: grid;
-  gap: var(--space-2);
-}
-
-.form-group label {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--text-primary);
-}
-
-.form-group input {
-  padding: var(--space-3) var(--space-4);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  font-size: 15px;
-  background: var(--bg-elevated);
-  color: var(--text-primary);
-  transition: all var(--duration-fast) var(--ease-out);
-}
-
-.form-group input:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-soft);
-}
-
-.form-group input::placeholder {
-  color: var(--text-tertiary);
-}
-
-.form-hint {
-  font-size: 12px;
-  color: var(--text-tertiary);
-}
-
-.form-hint code {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  background: var(--accent-soft);
-  padding: 2px 6px;
-  border-radius: var(--radius-sm);
-}
-
-.form-error {
-  padding: var(--space-3) var(--space-4);
-  background: rgba(196, 92, 74, 0.08);
-  border: 1px solid rgba(196, 92, 74, 0.2);
-  border-radius: var(--radius-md);
-  color: var(--error);
-  font-size: 14px;
-}
-
-/* ==========================================================================
-   Auth & Login
-   ========================================================================== */
-
-.auth-checking {
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--bg-base);
-}
-
-.auth-checking-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-4);
-  color: var(--text-tertiary);
-}
-
-.loading-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-4);
-  padding: var(--space-10);
-  color: var(--text-tertiary);
-  font-size: 14px;
-}
-
-.loading-state .spinner {
-  width: 28px;
-  height: 28px;
-}
-
-.login-page {
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--bg-base);
-  padding: var(--space-5);
-}
-
-.login-container {
-  width: 100%;
-  max-width: 400px;
-  background: var(--card-bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-xl);
-  padding: var(--space-8);
-  box-shadow: var(--shadow-lg);
-}
-
-.login-header {
-  text-align: center;
-  margin-bottom: var(--space-8);
-}
-
-.login-logo {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-3);
-  margin-bottom: var(--space-4);
-}
-
-.login-logo .logo-icon {
-  width: 56px;
-  height: 56px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--accent-soft);
-  border-radius: var(--radius-lg);
-  color: var(--accent);
-}
-
-.login-logo .logo-icon svg {
-  width: 32px;
-  height: 32px;
-}
-
-.login-logo h1 {
-  font-family: var(--font-display);
-  font-size: 24px;
-  font-weight: 400;
-  color: var(--text-primary);
-}
-
-.login-subtitle {
-  font-size: 14px;
-  color: var(--text-tertiary);
-}
-
-.login-form {
-  display: grid;
-  gap: var(--space-5);
-}
-
-.login-button {
-  width: 100%;
-  padding: var(--space-4);
-  background: var(--accent);
-  color: white;
-  border: none;
-  border-radius: var(--radius-md);
-  font-size: 15px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all var(--duration-fast) var(--ease-out);
-}
-
-.login-button:hover:not(:disabled) {
-  background: var(--accent-hover);
-  transform: translateY(-1px);
-}
-
-.login-button:active {
-  transform: scale(0.98);
-}
-
-.login-footer {
-  margin-top: var(--space-6);
-  padding-top: var(--space-5);
-  border-top: 1px solid var(--border);
-}
-
-.login-footer h4 {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: var(--space-3);
-}
-
-.login-footer ol {
-  font-size: 13px;
-  color: var(--text-secondary);
-  line-height: 1.8;
-  padding-left: var(--space-5);
-}
-
-.login-footer code {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  background: var(--accent-soft);
-  padding: 2px 6px;
-  border-radius: var(--radius-sm);
-  color: var(--accent);
-}
-
-/* ==========================================================================
-   Spinner
-   ========================================================================== */
-
-.spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid var(--border);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-.spinner-small {
-  width: 16px;
-  height: 16px;
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  border-top-color: white;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-  display: inline-block;
-  margin-right: var(--space-2);
-  vertical-align: middle;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* ==========================================================================
-   Pre / Code
-   ========================================================================== */
-
-pre {
-  font-family: var(--font-mono);
-  font-size: 12px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  background: var(--bg-sunken);
-  padding: var(--space-3) var(--space-4);
-  border-radius: var(--radius-md);
-  color: var(--text-primary);
-}
-
-.muted {
-  color: var(--text-tertiary);
-  font-size: 13px;
-}
-
-/* ==========================================================================
-   Back Button
-   ========================================================================== */
-
-.back-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: var(--radius-md);
-  background: var(--bg-sunken);
-  color: var(--text-secondary);
-  transition: all var(--duration-fast) var(--ease-out);
-  flex-shrink: 0;
-}
-
-.back-button:hover {
-  background: var(--accent-soft);
-  color: var(--accent);
-}
-
-/* ==========================================================================
-   Empty State
-   ========================================================================== */
-
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-8) var(--space-4);
-  text-align: center;
-  color: var(--text-tertiary);
-}
-
-.empty-state-icon {
-  margin-bottom: var(--space-4);
-  color: var(--text-tertiary);
-  opacity: 0.6;
-}
-
-.empty-state-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--text-secondary);
-  margin-bottom: var(--space-2);
-}
-
-.empty-state-desc {
-  font-size: 13px;
-  color: var(--text-tertiary);
-  max-width: 280px;
-  line-height: 1.5;
-}
-
-.empty-state-action {
-  margin-top: var(--space-4);
-}
-
-/* ==========================================================================
-   Pagination
-   ========================================================================== */
-
-.pagination {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding-top: var(--space-4);
-  font-size: 13px;
-  color: var(--text-tertiary);
-}
-
-/* ==========================================================================
-   Responsive
-   ========================================================================== */
-
-@media (max-width: 1200px) {
-  .kpi-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 1024px) {
-  .app-shell {
-    grid-template-columns: 1fr;
-  }
-
-  .sidebar {
-    position: relative;
-    height: auto;
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-    flex-direction: row;
-    flex-wrap: wrap;
-    padding: var(--space-4);
-  }
-
-  .brand {
-    margin-bottom: 0;
-    margin-right: var(--space-6);
-  }
-
-  .nav {
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: var(--space-2);
-  }
-
-  .nav-link.active::before {
-    display: none;
-  }
-
-  .sidebar-footer {
-    flex-direction: row;
-    margin-left: auto;
-    padding-top: 0;
-    border-top: none;
-    margin-top: 0;
-  }
-
-  .two-columns,
-  .wide-right {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 640px) {
-  .content {
-    padding: var(--space-4);
-  }
-
-  .kpi-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .page-header {
-    flex-direction: column;
-  }
-
-  .page-header .meta {
-    text-align: left;
-  }
-
-  .login-container {
-    padding: var(--space-6);
-  }
-}
-
-/* Mobile: sidebar becomes a top nav bar */
-@media (max-width: 768px) {
-  .app-shell {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto 1fr;
-  }
-
-  .sidebar {
-    position: sticky;
-    top: 0;
-    height: auto;
-    width: 100%;
-    flex-direction: row;
-    align-items: center;
-    padding: var(--space-3) var(--space-4);
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-    z-index: 100;
-    overflow-x: auto;
-    overflow-y: visible;
-  }
-
-  .brand {
-    display: none;
-  }
-
-  .nav {
-    flex-direction: row;
-    flex: none;
-    gap: var(--space-1);
-  }
-
-  .nav-link {
-    padding: var(--space-2) var(--space-3);
-    font-size: 13px;
-    white-space: nowrap;
-  }
-
-  .nav-link::before {
-    display: none;
-  }
-
-  .nav-icon svg {
-    width: 16px;
-    height: 16px;
-  }
-
-  .sidebar-footer {
-    flex-direction: row;
-    padding-top: 0;
-    padding-left: var(--space-3);
-    border-top: none;
-    border-left: 1px solid var(--border);
-    margin-top: 0;
-    margin-left: auto;
-    gap: var(--space-1);
-  }
-
-  .export-link span:last-child,
-  .logout-button span:last-child,
-  .theme-toggle span:last-child {
-    display: none;
-  }
-
-  .theme-toggle {
-    padding: var(--space-2) var(--space-3);
-  }
-
-  .content {
-    padding: var(--space-4);
-    min-height: calc(100dvh - 60px);
-  }
-}
-
-/* ==========================================================================
-   Reduced Motion
-   ========================================================================== */
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-  /* EXCEPT page transitions — keep them instant */
-  .page {
-    animation: none !important;
-  }
-  /* Keep skeleton shimmer for loading states */
-  .skeleton,
-  .skeleton::before,
-  .skeleton::after {
-    animation: none !important;
-  }
-}
-
-/* ==========================================================================
-   Charts
-   ========================================================================== */
-
-/* Sparkline */
-.sparkline {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.sparkline-empty,
-.chart-empty {
-  color: var(--text-tertiary);
-  font-size: 12px;
-}
-
-.sparkline-animated .sparkline-line {
-  stroke-dasharray: 200;
-  stroke-dashoffset: 200;
-  animation: sparkline-draw 0.6s ease-out forwards;
-}
-
-.sparkline-animated .sparkline-area {
-  opacity: 0;
-  animation: sparkline-fade 0.4s ease-out 0.3s forwards;
-}
-
-@keyframes sparkline-draw {
-  to {
-    stroke-dashoffset: 0;
-  }
-}
-
-@keyframes sparkline-fade {
-  to {
-    opacity: 1;
-  }
-}
-
-/* Mini Bar Chart */
-.mini-bar-chart .bar {
-  transition: opacity var(--duration-fast) var(--ease-out);
-}
-
-.mini-bar-chart:hover .bar {
-  opacity: 0.8;
-}
-
-.mini-bar-chart:hover .bar:hover {
-  opacity: 1;
-}
-
-/* Grouped Bar Chart */
-.grouped-bar-chart .bar {
-  transition: opacity var(--duration-fast) var(--ease-out);
-}
-
-.grouped-bar-chart:hover .bar {
-  opacity: 0.8;
-}
-
-.grouped-bar-chart:hover .bar:hover {
-  opacity: 1;
-}
-
-/* Donut Chart */
-.donut-chart-wrapper {
-  display: flex;
-  align-items: center;
-  gap: var(--space-4);
-}
-
-.donut-chart {
-  flex-shrink: 0;
-}
-
-.donut-segment {
-  transition: opacity var(--duration-fast) var(--ease-out);
-}
-
-.donut-chart:hover .donut-segment {
-  opacity: 0.8;
-}
-
-.donut-chart:hover .donut-segment:hover {
-  opacity: 1;
-}
-
-.donut-total {
-  font-family: var(--font-mono);
-  font-size: 16px;
-  font-weight: 600;
-  fill: var(--text-primary);
-}
-
-.donut-label {
-  font-size: 10px;
-  fill: var(--text-tertiary);
-}
-
-.donut-legend {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.legend-item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  font-size: 12px;
-}
-
-.legend-color {
-  width: 10px;
-  height: 10px;
-  border-radius: var(--radius-sm);
-  flex-shrink: 0;
-}
-
-.legend-label {
-  color: var(--text-secondary);
-  flex: 1;
-}
-
-.legend-value {
-  font-family: var(--font-mono);
-  color: var(--text-primary);
-  font-weight: 500;
-}
-
-/* Time Range Selector */
-.time-range-selector {
-  display: inline-flex;
-  background: var(--bg-sunken);
-  border-radius: var(--radius-md);
-  padding: 2px;
-}
-
-.time-range-option {
-  padding: var(--space-1) var(--space-3);
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--text-secondary);
-  background: transparent;
-  border: none;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: all var(--duration-fast) var(--ease-out);
-}
-
-.time-range-option:hover {
-  color: var(--text-primary);
-}
-
-.time-range-option.active {
-  background: var(--card-bg);
-  color: var(--accent);
-  box-shadow: var(--shadow-sm);
-}
-
-/* Stat Card */
-.stat-card {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--space-4) var(--space-5);
-  background: var(--card-bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-md);
-  transition: all var(--duration-normal) var(--ease-out);
-}
-
-.stat-card:hover {
-  box-shadow: var(--shadow-lg);
-}
-
-.stat-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-}
-
-.stat-label {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--text-tertiary);
-}
-
-.stat-value {
-  font-family: var(--font-mono);
-  font-size: 28px;
-  font-weight: 500;
-  color: var(--text-primary);
-  line-height: 1.2;
-}
-
-.stat-trend-label {
-  font-size: 11px;
-  color: var(--text-tertiary);
-}
-
-.stat-sparkline {
-  flex-shrink: 0;
-}
-
-/* Trend Indicator */
-.trend-indicator {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.trend-up {
-  color: var(--success);
-}
-
-.trend-down {
-  color: var(--error);
-}
-
-.trend-neutral {
-  color: var(--text-tertiary);
-}
-
-.trend-percent {
-  font-family: var(--font-mono);
-}
-
-/* ==========================================================================
-   Collapsible Panel
-   ========================================================================== */
-
-.collapsible-panel {
-  overflow: hidden;
-}
-
-.collapsible-panel .panel-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-  margin-bottom: 0;
-  padding: var(--space-5);
-  transition: background var(--duration-fast) var(--ease-out);
-}
-
-.collapsible-panel .panel-header:hover {
-  background: var(--accent-muted);
-}
-
-.collapsible-panel .panel-header-left {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-}
-
-.collapsible-panel .panel-header h3 {
-  margin: 0;
-}
-
-.collapse-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: var(--radius-md);
-  background: var(--bg-sunken);
-  color: var(--text-secondary);
-  transition: all var(--duration-fast) var(--ease-out);
-}
-
-.collapse-toggle:hover {
-  background: var(--accent-soft);
-  color: var(--accent);
-}
-
-.collapsible-panel .panel-content {
-  padding: 0 var(--space-5) var(--space-5);
-}
-
-.collapsible-panel.collapsed {
-  box-shadow: var(--shadow-sm);
-}
-
-.collapsible-panel.collapsed .panel-header {
-  border-bottom: none;
-}
-
-/* ========================================================================
- * New Chart Components (Phase: WebUI Redesign)
- * BulletChart, GaugeChart, PrincipleStack, QueueBar
- * ======================================================================== */
-
-/* BulletChart - GFI with threshold zones */
-.bullet-chart {
-  display: flex;
-  flex-direction: column;
-}
-
-.bullet-labels {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 2px;
-  font-size: 0.7rem;
-  color: var(--text-secondary);
-  user-select: none;
-}
-
-/* GaugeChart - Trust semi-circle arc */
-.gauge-chart svg text {
-  font-family: inherit;
-}
-
-/* Panel header improvements */
-.panel-header-left {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.panel-header-left h3 {
-  margin: 0;
-}
-
-/* Responsive grid for health panels */
-@media (max-width: 768px) {
-  .grid {
-    grid-template-columns: 1fr !important;
-  }
-}
-
-/* ==========================================================================
-   Thinking Models Page — New styles for v1.10 polish pass
-   ========================================================================== */
-
-/* Typography utility classes */
-.text-xs { font-size: var(--text-xs, 0.65rem); }
-.text-sm { font-size: var(--text-sm, 0.7rem); }
-.text-base { font-size: var(--text-base, 0.75rem); }
-.text-lg { font-size: var(--text-lg, 0.8rem); }
-.text-xl { font-size: var(--text-xl, 0.85rem); }
-.text-semibold { font-weight: 600; }
-.text-error { color: var(--error); }
-
-/* Section title (replaces inline fontWeight + fontSize on h3/h4) */
-.section-title {
-  font-size: var(--text-xl, 0.85rem);
-  font-weight: 600;
-  color: var(--text-primary);
-  margin-bottom: var(--space-2);
-}
-
-/* Search + Sort + Filter controls */
-.sort-button {
-  display: flex;
-  align-items: center;
-  gap: var(--space-1);
-  padding: 6px 10px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--bg-panel, var(--bg-elevated));
-  color: var(--text-secondary);
-  cursor: pointer;
-  font-size: var(--text-base);
-  transition: all var(--duration-fast) var(--ease-out);
-}
-
-.sort-button:hover {
-  border-color: var(--border-hover);
-  color: var(--text-primary);
-}
-
-.filter-button {
-  padding: 3px 8px;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  background: transparent;
-  color: var(--text-secondary);
-  cursor: pointer;
-  font-size: var(--text-sm);
-  transition: all var(--duration-fast) var(--ease-out);
-}
-
-.filter-button:hover {
-  border-color: var(--border-hover);
-}
-
-.filter-button.active {
-  border-color: var(--accent);
-  background: rgba(91, 139, 160, 0.15);
-  color: var(--accent);
-}
-
-/* Compare button bar */
-.compare-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--space-2) var(--space-3);
-  margin-bottom: var(--space-2);
-  background: rgba(91, 139, 160, 0.08);
-  border-radius: 6px;
-  border: 1px solid var(--border);
-}
-
-.compare-button {
-  display: flex;
-  align-items: center;
-  gap: var(--space-1);
-  padding: 4px 12px;
-  border: none;
-  border-radius: 4px;
-  background: var(--accent);
-  color: #fff;
-  cursor: pointer;
-  font-size: var(--text-base);
-  font-weight: 600;
-  transition: background var(--duration-fast) var(--ease-out);
-}
-
-.compare-button:hover {
-  background: var(--accent-hover);
-}
-
-/* Model list button (replaces inline style button) */
-.model-list-button {
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  color: inherit;
-  text-align: left;
-}
-
-.hits-count {
-  font-weight: 600;
-  font-size: var(--text-xl, 0.85rem);
-}
-
-.scenario-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 180px;
-  display: block;
-}
-
-/* Code blocks for trigger / anti-pattern */
-.code-block {
-  font-size: var(--text-base);
-  white-space: pre-wrap;
-  word-break: break-word;
-  padding: var(--space-2) var(--space-3);
-  border-radius: 6px;
-  display: block;
-  line-height: 1.5;
-  font-family: var(--font-mono);
-}
-
-.code-block-trigger {
-  background: var(--bg-sunken);
-}
-
-.code-block-antipattern {
-  background: rgba(220, 53, 69, 0.08);
-  color: var(--error);
-}
-
-/* Event context helpers */
-.event-context-tool {
-  font-size: var(--text-sm);
-  color: var(--text-secondary);
-  display: flex;
-  align-items: center;
-  gap: var(--space-1);
-}
-
-.event-context-pain {
-  font-size: var(--text-sm);
-  color: var(--error);
-  display: flex;
-  align-items: center;
-  gap: var(--space-1);
-}
-
-.event-context-principle {
-  font-size: var(--text-sm);
-  color: var(--info);
-  display: flex;
-  align-items: center;
-  gap: var(--space-1);
-}
-
-.matched-pattern {
-  font-size: var(--text-xs);
-  color: var(--text-secondary);
-  background: var(--bg-sunken);
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-family: var(--font-mono);
-}
-
-.event-trigger-excerpt {
-  font-size: var(--text-sm);
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-/* Heatmap table */
-.heatmap-table {
-  border-collapse: collapse;
-  width: 100%;
-}
-
-.heatmap-header {
-  text-align: center;
-  padding: 4px 6px;
-  border-bottom: 1px solid var(--border);
-  color: var(--text-secondary);
-}
-
-.heatmap-scenario {
-  font-size: var(--text-xs);
-  writing-mode: vertical-lr;
-  transform: rotate(180deg);
-  height: 80px;
-}
-
-.heatmap-sticky {
-  position: sticky;
-  left: 0;
-  background: var(--bg-panel, var(--bg-elevated));
-  z-index: 1;
-  text-align: left;
-  padding: 6px 8px;
-  font-size: var(--text-base);
-  font-weight: 600;
-  min-width: 100px;
-}
-
-.heatmap-model {
-  font-weight: 500;
-  font-size: var(--text-base);
-  padding: 4px 8px;
-  border-top: 1px solid var(--border);
-}
-
-.heatmap-cell {
-  text-align: center;
-  padding: 4px 6px;
-  font-size: var(--text-sm);
-  border-top: 1px solid var(--border);
-  color: var(--text-primary);
-}
-
-/* Loader spin animation (reuses existing .spinner keyframes) */
-.spin {
-  animation: spin 0.8s linear infinite;
-}
-
-/* Loading placeholder for empty model definitions grid */
-.loading-placeholder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-6);
-  color: var(--text-secondary);
-  gap: var(--space-2);
-}
-
-/* Text alignment utility */
-.text-center { text-align: center; }
-
-/* Stage badge (EvolutionPage) */
-.stage-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1);
-  padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-lg);
-  font-size: var(--text-lg, 0.8rem);
-  font-weight: 600;
-  background: var(--accent);
-  color: #fff;
-  border: 2px solid var(--accent);
-}
-
-.stage-badge svg {
-  width: 16px;
-  height: 16px;
-}
-
-/* Sample pre blocks (SamplesPage) */
-.sample-pre {
-  white-space: pre-wrap;
-  word-break: break-word;
-  background: var(--bg-sunken);
-  padding: var(--space-3);
-  border-radius: var(--radius-md);
-  font-family: var(--font-mono);
-  font-size: var(--text-sm);
-  overflow-x: auto;
-  max-width: 100%;
-}
-
-/* GFI big number (FeedbackPage) */
-.gfi-big-number {
-  font-size: 3rem;
-  font-weight: 700;
-  line-height: 1;
-}
-
-/* Progress bar (shared component pattern) */
-.progress-bar {
-  width: 100%;
-  height: 8px;
-  background: var(--bg-sunken);
-  border-radius: 4px;
-  overflow: hidden;
-  margin-top: var(--space-2);
-}
-
-.progress-bar-fill {
-  height: 100%;
-  border-radius: 4px;
-  transition: width 0.3s ease;
-}
-
-/* GateMonitor trust/EP big numbers */
-.stat-big-number {
-  font-size: 1.5rem;
-  font-weight: 700;
-  line-height: 1;
-}
-
-/* EvolutionPage icon alignment */
-.panel h3 svg {
-  vertical-align: middle;
-  margin-right: var(--space-1);
-}
-