:root {
  color-scheme: light dark;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --text: #1c1f24;
  --muted: #6b7280;
  --border: #e2e5ea;
  /* Matched to the logo's own teal, 2026-08-30 (was a generic blue #2563eb) - explicit user
     request, sampled directly from wwwroot/img/logo.png's icon (median of the teal pixels, not
     eyeballed) so the site and the logo are actually the same brand color, not just similar.
     Verified WCAG contrast doesn't regress vs the blue it replaces: 4.97:1 on white here
     (blue was 5.17:1); the dark-mode value below is 5.77:1 against the dark background and
     3.14:1 for white button text on it (blue was 5.61:1 / 3.23:1) - essentially the same
     accessibility profile, just recolored. */
  --accent: #047d7b;
  --ok: #15803d;
  --warn: #b45309;
  --err: #b91c1c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --panel: #1d2026;
    --text: #e7e9ec;
    --muted: #9aa1ac;
    --border: #2b2f37;
    --accent: #10a394;
    --ok: #4ade80;
    --warn: #fbbf24;
    --err: #f87171;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

h1 {
  font-size: 1.4rem;
  margin: 0 0 1.25rem;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}

.field-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.field-row label {
  font-size: 0.85rem;
  color: var(--muted);
  min-width: 4.5rem;
}

.field-row input[type="text"] {
  flex: 1 1 220px;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
}

.field-row input[type="text"]:disabled {
  opacity: 0.6;
}

button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.status {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
}

.status-idle { color: var(--muted); }
.status-progress { color: var(--accent); }
.status-ok { color: var(--ok); }
.status-error { color: var(--err); }

.results {
  list-style: none;
  margin: 0;
  padding: 0;
}

.results li {
  padding: 0.6rem 0.1rem;
  border-bottom: 1px solid var(--border);
}

.results li:last-child { border-bottom: none; }

.result-name {
  font-weight: 600;
}

.result-type {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.72rem;
  vertical-align: middle;
}

.result-preview {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.results-empty {
  color: var(--muted);
  font-size: 0.85rem;
}