principles-disciple 1.8.1 → 1.8.2

package/ui/src/styles.css

@@ -0,0 +1,1661 @@
+/* ==========================================================================
+   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;
+}