:root {
  --bg: #0f1419;
  --panel: #1a2330;
  --ink: #e8eef6;
  --muted: #9aa8b8;
  --line: #2a3646;
  --accent: #3d8bfd;
  --accent-ink: #061018;
  --hit-bg: #14351f;
  --hit-ink: #8ee0a8;
  --pub-bg: #1b2c44;
  --ok: #1e3d2a;
  --ok-ink: #b6ecc6;
  --warn: #3d3214;
  --warn-ink: #f3d48a;
  --err: #3d1a1a;
  --err-ink: #f5b4b4;
  --crit: #4a1515;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.45;
}
.login-body {
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}
.login-card, .panel, .results {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem;
}
.login-card { width: min(420px, 100%); }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0 0 0.35rem;
}
h1 { margin: 0 0 0.4rem; font-size: 1.45rem; font-weight: 650; }
.lead, .hint, .meta, .who { color: var(--muted); font-size: 0.92rem; }
form { display: grid; gap: 0.45rem; }
label { font-size: 0.85rem; color: var(--muted); margin-top: 0.4rem; }
input {
  background: #0f1722;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
  font: inherit;
}
input:focus { outline: 2px solid var(--accent); border-color: transparent; }
button {
  margin-top: 0.8rem;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 8px;
  padding: 0.7rem 1rem;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
button.linkish {
  background: transparent;
  color: var(--accent);
  padding: 0.2rem 0.4rem;
  margin: 0;
  font-weight: 600;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  padding: 1.25rem 1.5rem 0.5rem;
}
.topbar-right { display: flex; align-items: center; gap: 0.8rem; }
.panel, .results, .banner { margin: 1rem 1.5rem; }
.search-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.8rem 1rem;
  align-items: end;
}
.field { display: grid; gap: 0.35rem; }
.field-submit button { margin: 0; width: 100%; }
.optional { font-weight: 400; opacity: 0.8; }
.banner {
  border-radius: 8px;
  padding: 0.75rem 1rem;
  background: #1c2430;
  border: 1px solid var(--line);
}
.banner.error { background: var(--err); color: var(--err-ink); border-color: transparent; }
.banner.warning, .banner.warn { background: var(--warn); color: var(--warn-ink); border-color: transparent; }
.banner.ok { background: var(--ok); color: var(--ok-ink); border-color: transparent; }
.banner.critical { background: var(--crit); color: var(--err-ink); border-color: transparent; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
th { color: var(--muted); font-weight: 600; }
td.num, th.num { text-align: right; }
td.hit { background: var(--hit-bg); color: var(--hit-ink); font-weight: 650; }
td.pub { background: var(--pub-bg); }