/* wdetection — design tokens from DESIGN.md (dark, cyan-neon, mono KPIs) */
:root {
  --bg: #121212;
  --surface: #1E1E1E;
  --surface-2: #252525;
  --border: #2C2C2E;
  --accent: #00E5FF;
  --alert: #FF453A;
  --alert-bg: #3A1C1C;
  --ok: #32D74B;
  --text: #FFFFFF;
  --text-2: #98989D;
  --radius: 16px;
  --pad: 20px;
  --gap: 16px;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Layout ---------- */
.app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

/* Sticky scan bar */
.scanbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(18, 18, 18, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
  margin-bottom: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.brand svg { width: 26px; height: 26px; color: var(--accent); }
.brand h1 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.3px;
}
.brand .tag { color: var(--text-2); font-size: 12px; margin-left: auto; }

.scan-form {
  display: flex;
  gap: 8px;
}
.scan-form input {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-size: 16px; /* 16px avoids iOS zoom-on-focus */
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.15s;
}
.scan-form input:focus { border-color: var(--accent); }
.scan-form button {
  background: var(--accent);
  color: #003038;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  padding: 0 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: filter 0.15s;
}
.scan-form button:hover { filter: brightness(1.1); }
.scan-form button:disabled { opacity: 0.5; cursor: default; }
.scan-form button svg { width: 18px; height: 18px; }

/* Tabs: choose which lookup to run (only the active one is fetched) */
.tabs {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 15px;
  cursor: pointer;
  white-space: nowrap;
  flex: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tab:hover { color: var(--text); }
.tab .tab-ic { display: inline-flex; }
.tab .tab-ic svg { width: 15px; height: 15px; }
.tab.is-active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(0, 229, 255, 0.08);
}

/* Single active panel (the others are hidden via [hidden]) */
#results { display: block; }
.panel[hidden] { display: none; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad);
  min-height: 120px;
}
.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.card-head svg { width: 22px; height: 22px; color: var(--accent); flex: none; }
.card-head h2 { font-size: 16px; font-weight: 600; margin: 0; }
.card-head .sub { color: var(--text-2); font-size: 12px; margin-left: auto; font-family: var(--font-mono); }

.empty-hint {
  color: var(--text-2);
  text-align: center;
  padding: 32px 0;
}

/* KPI / monospace metric */
.kpi {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  word-break: break-all;
}
.kpi-sub { color: var(--text-2); font-size: 13px; margin-top: 4px; }

/* Chips (tech) */
.cat-group { margin-bottom: 16px; }
.cat-group:last-child { margin-bottom: 0; }
.cat-label {
  color: var(--text-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 13px;
}
.chip-logo {
  width: 15px;
  height: 15px;
  object-fit: contain;
  flex: none;
  display: block;
}
.chip .ver {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 12px;
}
.chip .conf {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
}
.chip .conf.mid { background: var(--accent); }
.chip .conf.low { background: var(--text-2); }

/* Tables */
table.t { width: 100%; border-collapse: collapse; }
table.t td {
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-size: 13px;
}
table.t tr:last-child td { border-bottom: none; }
table.t tr:hover td { background: var(--surface-2); }
table.t td.k { color: var(--text-2); width: 38%; white-space: nowrap; }
table.t td.v { font-family: var(--font-mono); word-break: break-word; }

/* Badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-mono);
  border: 1px solid var(--border);
}
.badge.ok { color: var(--ok); border-color: rgba(50,215,75,0.4); }
.badge.cdn { color: var(--accent); border-color: rgba(0,229,255,0.4); }
.badge.warn { color: var(--alert); border-color: rgba(255,69,58,0.4); }

/* Alert / error box */
.alert {
  background: var(--alert-bg);
  border-left: 4px solid var(--alert);
  color: var(--alert);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
}
.note {
  color: var(--text-2);
  font-size: 12px;
  margin-top: 12px;
  font-style: italic;
}

/* Host list (reverse-IP) */
.hostlist {
  margin-top: 10px;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.hostlist .h {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
}
.hostlist .h:last-child { border-bottom: none; }

/* DNS record sections */
.dns-rt { margin-bottom: 14px; }
.dns-rt:last-child { margin-bottom: 0; }
.dns-rt .rt-label {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 12px;
  margin-bottom: 4px;
}
.dns-rt .rt-val { font-family: var(--font-mono); font-size: 12px; word-break: break-all; }
.dns-rt .rt-val div { padding: 2px 0; }

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
  border-radius: 8px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.sk-line { height: 12px; margin-bottom: 10px; }
.sk-line.w70 { width: 70%; } .sk-line.w50 { width: 50%; } .sk-line.w90 { width: 90%; }

.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.25); border-top-color: var(--accent); border-radius: 50%; animation: rot 0.7s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }

.footer {
  text-align: center;
  color: var(--text-2);
  font-size: 12px;
  margin-top: 32px;
}
.flag { font-size: 18px; margin-right: 6px; }
.muted { color: var(--text-2); }