:root {
  --color-navy:       #1a1a2e;
  --color-navy-80:    #252540;
  --color-orange:     #ff6b35;
  --color-indigo:     #5c6bc0;
  --color-indigo-dk:  #4a5ab0;
  --color-bg:         #f4f5f7;
  --color-surface:    #ffffff;
  --color-border:     #e0e0e0;
  --color-border-lt:  #f0f0f0;
  --color-text:       #1a1a2e;
  --color-text-muted: #666;
  --color-text-faint: #999;
  --color-success:    #4caf50;
  --color-danger:     #f44336;
  --color-warn:       #ff9800;

  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;

  --font-xs:   11px;
  --font-sm:   12px;
  --font-md:   13px;
  --font-base: 14px;
  --font-lg:   16px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.12);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--font-base);
  background: var(--color-bg);
  margin: 0;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
}
code {
  font-family: monospace;
  font-size: var(--font-sm);
  background: var(--color-border-lt);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}
.divider { margin: 0 0 var(--space-lg); border: none; border-top: 1px solid #eee; }