:root {
  --bg: #0f1117;
  --panel: #1a1d26;
  --border: #2a2f3a;
  --text: #e6e8ee;
  --muted: #9aa3b2;
  --accent: #4f8cff;
  --sidebar-w: 176px;
  --sidebar-collapsed-w: 48px;
  --topbar-h: 48px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
}

/* ── Base form controls ─────────────────────────────────────────────── */

select, button, input[type="search"] {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: 0.875rem;
}

input[type="search"] {
  width: 180px;
  outline: none;
}
input[type="search"]:focus { border-color: var(--accent); }
input[type="search"]::placeholder { color: var(--muted); }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

button { cursor: pointer; }
button:hover { border-color: var(--accent); }

label { font-size: 0.875rem; color: var(--muted); }

/* ── Shared utility classes ──────────────────────────────────────────── */

.mono  { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; }
.dim   { color: var(--muted); }
.error { color: #ff7a7a; }
.wrap  { max-width: 280px; white-space: normal; word-break: break-word; font-size: 0.82rem; color: var(--muted); }

.count-pill {
  background: var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 500;
}

details > summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 0.85rem;
  user-select: none;
  list-style: none;
}
details > summary::before { content: "+ "; }
details[open] > summary::before { content: "- "; }
details[open] > summary { margin-bottom: 0.4rem; }