*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--text);
}

input, textarea, button, select {
  font-family: inherit;
}

/* ── Design system (dark only — no light mode in v1) ─────────────────────── */
:root {
  --bg:          #0f0f12;
  --bg-subtle:   rgba(255,255,255,0.025);
  --bg-inset:    rgba(255,255,255,0.04);
  --border:      rgba(255,255,255,0.08);
  --border-subtle: rgba(255,255,255,0.05);
  --text:        #eeeef2;
  --text-muted:  rgba(255,255,255,0.35);
  --text-subtle: rgba(255,255,255,0.22);
  --accent:      #e8a22a;
  --accent-hover: #f0b740;
  --accent-bg:   rgba(232,162,42,0.1);
  --accent-border: rgba(232,162,42,0.28);
  --accent-fg:   #0f0f12;
  --teal:        #4dba85;
  --teal-bg:     rgba(61,200,120,0.1);
  --danger:      #e07070;
  --danger-bg:   rgba(220,80,80,0.1);
}

/* ── Responsive Layout ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Ensure main content doesn't overlap bottom nav */
  body {
    padding-bottom: 60px; /* Height of bottom nav */
  }
}

/* Bottom Navigation Bar */
nav[style*="position: fixed"] {
  display: flex;
  background: #0b0b0e;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 8px 16px;
}

/* Bottom Nav Items */
button[style*="flex-direction: column"] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  transition: color 0.12s;
}

button[style*="flex-direction: column"][style*="color: rgb(232, 162, 42)"] {
  color: #e8a22a;
}