:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1e222b;
  --line: #2a2f3a;
  --text: #e7eaf0;
  --muted: #9aa3b2;
  --accent: #e2574c;
  --accent-2: #f59b76;
  --word: #4a7bff;
  --ok: #4ade80;
  --warn: #fbbf24;
  --err: #f87171;
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
}

h1, h2, h3 { margin: 0; font-weight: 600; }

a { color: inherit; }

button, select, input {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
}

button { cursor: pointer; }
button:hover:not(:disabled) { border-color: #3b4250; }
button:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: 0;
  color: #2a0d09;
  font-weight: 700;
  padding: 10px 16px;
}
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }

.muted { color: var(--muted); }
.row { display: flex; gap: 8px; align-items: center; }
.wrap { flex-wrap: wrap; }

.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

.badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}