:root {
  --primary: #2563EB; --bg: #f8f9fb; --card: #fff; --text: #18181b;
  --muted: #71717a; --border: #e4e4e7; --danger: #dc2626; --ok: #16a34a; --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0b0b0f; --card:#18181b; --text:#f4f4f5; --muted:#a1a1aa; --border:#27272a; }
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased;
}
h1,h2,h3 { margin: 0 0 .5rem; }
button {
  font: inherit; cursor: pointer; border: none; border-radius: 10px; padding: .6rem 1rem;
  background: var(--primary); color: #fff; font-weight: 600;
}
button.ghost { background: transparent; color: var(--primary); border: 1px solid var(--border); }
button.danger { background: var(--danger); }
button:disabled { opacity: .55; cursor: default; }
input, select, textarea {
  font: inherit; width: 100%; padding: .6rem .7rem; border: 1px solid var(--border);
  border-radius: 10px; background: var(--card); color: var(--text); margin-bottom: .6rem;
}
label { font-size: .82rem; color: var(--muted); display: block; margin-bottom: .2rem; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-bottom: .8rem; }
.muted { color: var(--muted); font-size: .85rem; }
.row { display: flex; gap: .6rem; align-items: center; }
.between { justify-content: space-between; }
.pill { font-size: .72rem; padding: .15rem .5rem; border-radius: 999px; background: var(--border); }
.pill.ok { background: #dcfce7; color: #166534; }
.pill.warn { background: #fef9c3; color: #854d0e; }
.avatar { width: 40px; height: 40px; border-radius: 999px; background: var(--primary); color:#fff;
  display: grid; place-items: center; font-weight: 700; flex: 0 0 auto; }
.center-screen { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.auth-box { width: 100%; max-width: 380px; }
.error { color: var(--danger); font-size: .85rem; min-height: 1.2em; }
.empty { text-align: center; color: var(--muted); padding: 2rem 1rem; }