/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ──────────────────────────────────────────────────────── */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #0f172a;
  color: #e2e8f0;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }

/* ── Site header ───────────────────────────────────────────────── */
.site-header {
  background: #0a0f1e;
  border-bottom: 1px solid #1e293b;
  padding: 0.75rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site-header .brand { color: #38bdf8; font-weight: 600; font-size: 0.95rem; }
.header-left { display: flex; gap: 1.75rem; align-items: center; }
.site-header nav { display: flex; gap: 1.5rem; align-items: center; }
.site-header nav a { color: #64748b; font-size: 0.85rem; }
.site-header nav a:hover { color: #e2e8f0; }
.site-header nav a.nav-active { color: #e2e8f0; font-weight: 500; }
.nav-main { color: #94a3b8; font-size: 0.95rem; }
.nav-main:hover { color: #e2e8f0; }
.nav-main.nav-active { color: #e2e8f0; font-weight: 600; }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s;
  font-family: inherit;
}
.btn:hover { opacity: 0.85; }
.btn-primary { background: #38bdf8; color: #0f172a; font-weight: 600; }
.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.78rem; }
.btn-outline { background: transparent; color: #94a3b8; border: 1px solid #334155; }
.btn-danger { background: transparent; color: #f87171; border: 1px solid #f87171; padding: 0.3rem 0.65rem; font-size: 0.78rem; }
.btn-danger:hover { background: #f87171; color: #0f172a; opacity: 1; }
.btn-done { background: transparent; color: #34d399; border: 1px solid #34d399; padding: 0.3rem 0.65rem; font-size: 0.78rem; }
.btn-done:hover { background: #34d399; color: #0f172a; opacity: 1; }
.btn-abandon { background: transparent; color: #fb923c; border: 1px solid #fb923c; padding: 0.3rem 0.65rem; font-size: 0.78rem; }
.btn-abandon:hover { background: #fb923c; color: #0f172a; opacity: 1; }
.btn-ghost { background: transparent; color: #64748b; border: 1px solid #334155; }
.btn-ghost:hover { color: #e2e8f0; opacity: 1; }
.btn-text { background: none; border: none; color: #64748b; font-size: 0.8rem; cursor: pointer; font-family: inherit; padding: 0; }
.btn-text:hover { color: #e2e8f0; }

/* ── Form fields ───────────────────────────────────────────────── */
.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-size: 0.78rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.4rem;
}
.field input[type="text"],
.field input[type="number"],
.field input[type="password"],
.field select {
  width: 100%;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #e2e8f0;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  font-family: inherit;
}
.field input:focus,
.field select:focus { outline: none; border-color: #38bdf8; }

/* ── Errors ────────────────────────────────────────────────────── */
.errorlist { list-style: none; color: #f87171; font-size: 0.8rem; margin-top: 0.3rem; }
.error-banner {
  background: #450a0a;
  border: 1px solid #f87171;
  border-radius: 8px;
  color: #fca5a5;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.5rem;
}

/* ── Light theme ───────────────────────────────────────────────── */
body[data-theme="light"] { background: #f8fafc; color: #0f172a; }
body[data-theme="light"] .site-header { background: #ffffff; border-color: #e2e8f0; }
body[data-theme="light"] .site-header .brand { color: #0284c7; }
body[data-theme="light"] .site-header nav a { color: #64748b; }
body[data-theme="light"] .nav-main { color: #475569; }
body[data-theme="light"] .btn-primary { background: #0284c7; }
body[data-theme="light"] .btn-outline { color: #64748b; border-color: #cbd5e1; }
body[data-theme="light"] .field input[type="text"],
body[data-theme="light"] .field input[type="number"],
body[data-theme="light"] .field input[type="password"],
body[data-theme="light"] .field select {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}