*, *::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 {
  /* v2 dark-teal palette */
  --bg:          #080f0d;
  --bg-card:     #0c1612;
  --bg-raised:   #101c18;
  --bg-hover:    #142420;
  --bg-subtle:   rgba(255,255,255,0.025);
  --bg-inset:    rgba(255,255,255,0.04);
  --border:      rgba(255,255,255,0.06);
  --border-bright: rgba(255,255,255,0.12);
  --border-subtle: rgba(255,255,255,0.04);
  --text:        #e8e9f0;
  --text-muted:  rgba(232,233,240,0.55);
  --text-subtle: rgba(232,233,240,0.28);
  /* Teal accent */
  --accent:      #14b8a6;
  --accent-light: #2dd4bf;
  --accent-hover: #10a89a;
  --accent-bg:   rgba(20,184,166,0.12);
  --accent-border: rgba(20,184,166,0.3);
  --accent-fg:   #ffffff;
  --teal:        #34d399;
  --teal-bg:     rgba(52,211,153,0.1);
  --danger:      #f43f5e;
  --danger-bg:   rgba(244,63,94,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: #060d0b;
  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;
}