:root {
  --bg: #12141a;
  --fg: #e6e6e6;
  --muted: #8b93a7;
  --net: #7ec4ff;
  --host: #ffcf7e;
  --accent: #f38ba8;
  --line: #262a35;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  max-width: 62rem;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.55 system-ui, sans-serif;
}

h1 { margin: 0; font-family: var(--mono); font-size: 1.9rem; }
header p { color: var(--muted); max-width: 46rem; }
.muted { color: var(--muted); font-size: 0.9rem; }

.tabs { display: flex; gap: 0.25rem; margin: 1.5rem 0 0; }
.tabs button {
  background: none; border: 1px solid var(--line); border-bottom: none;
  color: var(--muted); padding: 0.5rem 1rem; cursor: pointer;
  font: inherit; border-radius: 6px 6px 0 0;
}
.tabs button[aria-selected="true"] { color: var(--fg); background: var(--line); }

.panel { border: 1px solid var(--line); padding: 1.25rem; border-radius: 0 6px 6px 6px; }
form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; }
label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.25rem; }
input {
  background: #0d0f14; border: 1px solid var(--line); color: var(--fg);
  padding: 0.5rem 0.65rem; border-radius: 4px; font: 0.95rem var(--mono);
  min-width: 16rem;
}
button[type="submit"] {
  background: var(--net); color: #0d0f14; border: 0; border-radius: 4px;
  padding: 0.55rem 1.1rem; font: 600 0.95rem system-ui, sans-serif; cursor: pointer;
}

#result { display: block; margin-top: 1.5rem; overflow-x: auto; }

table.rows { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 0.88rem; }
table.rows caption { text-align: left; color: var(--muted); padding-bottom: 0.4rem; }
table.rows th { text-align: left; color: var(--muted); font-weight: 500; padding: 0.2rem 1.5rem 0.2rem 0; white-space: nowrap; }
table.rows td { padding: 0.2rem 1.5rem 0.2rem 0; white-space: nowrap; }
table.rows tr.divider td, table.rows tr.divider th { border-top: 1px solid var(--line); padding-top: 0.7rem; }

.bin .net { color: var(--net); }
.bin .host { color: var(--host); }
.tags { color: var(--accent); }

.error {
  border-left: 3px solid var(--accent); padding: 0.6rem 0.9rem;
  background: #1d151a; font-family: var(--mono); font-size: 0.9rem;
}

footer { margin-top: 3rem; border-top: 1px solid var(--line); padding-top: 1rem; }
footer h2 { font-size: 1rem; margin: 0.75rem 0 0.25rem; }
footer a { color: var(--net); }
pre { font-family: var(--mono); font-size: 0.82rem; color: var(--muted); overflow-x: auto; }

@media (max-width: 40rem) {
  input { min-width: 100%; }
}