/* ═══ Base / Reset / Variables ═══ */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy: #1A3A5C;
  --teal: #0D9488;
  --teal-light: #E1F5EE;
  --amber: #D97706;
  --amber-light: #FEF3C7;
  --coral: #BE3A4A;
  --coral-light: #FAECE7;
  --slate: #64748B;

  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-tertiary: #94a3b8;
  --border-primary: #e2e8f0;
  --border-secondary: #cbd5e1;
  --border-tertiary: #e2e8f0;
  --radius-md: 8px;
  --radius-lg: 12px;

  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Courier New', monospace;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  min-height: 600px;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.app {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ── SCREENS ─────────────────────── */
.screen { display: none; flex: 1; }
.screen.active { display: flex; }