:root{
  --bg:#0b0f1a; --bg2:#121826; --card:#151c2c; --line:#232c40;
  --txt:#e6edf6; --muted:#8b97ad; --accent:#4f9dff; --accent2:#7c5cff;
  --ok:#2ecc71; --warn:#ffb020; --danger:#ff5c6c;
  --radius:16px; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 50% -10%,#182240 0%,var(--bg) 60%);
  color:var(--txt);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;
}
.wrap{max-width:1080px;margin:0 auto;padding:32px 20px 60px}

/* hero */
.hero{text-align:center;padding:28px 12px 8px}
.hero-label{color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-size:12px}
.hero-ip{
  font-family:var(--mono);font-size:clamp(28px,6vw,52px);font-weight:700;
  margin:8px 0 14px;display:flex;gap:12px;align-items:center;justify-content:center;
  word-break:break-all;
}
.hero-ip .copy{
  background:var(--card);border:1px solid var(--line);color:var(--muted);
  border-radius:10px;font-size:18px;width:40px;height:40px;cursor:pointer;flex:none;
  transition:.15s;
}
.hero-ip .copy:hover{color:var(--txt);border-color:var(--accent)}
.badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:6px}
.badge{
  font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);
  background:var(--bg2);color:var(--muted);
}
.badge.ok{color:var(--ok);border-color:#1e6b43}
.badge.warn{color:var(--warn);border-color:#7a5410}
.badge.bad{color:var(--danger);border-color:#7a2530}
.badge.muted{color:var(--muted)}
.ok-text{color:var(--ok)}
.bad-text{color:var(--danger)}
.muted-inline{color:var(--muted);font-size:.9em}
.hero-note{color:var(--muted);font-size:13px;margin-top:6px}
.hero-note code{color:var(--txt)}
.hero-note a{color:var(--accent);text-decoration:none}
.warn-text{color:var(--warn)}

/* lookup form */
.lookup{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:14px auto 2px;max-width:560px}
.lookup input{
  flex:1 1 320px;min-width:0;background:var(--bg2);border:1px solid var(--line);
  color:var(--txt);border-radius:10px;padding:10px 14px;font-size:14px;font-family:var(--mono);
}
.lookup input:focus{outline:none;border-color:var(--accent)}
.lookup input::placeholder{color:var(--muted);font-family:inherit}
.lookup button{
  background:var(--accent);border:0;color:#06122b;font-weight:600;
  border-radius:10px;padding:10px 18px;font-size:14px;cursor:pointer;
}
.lookup button:hover{filter:brightness(1.08)}
.lookup-mine{align-self:center;color:var(--muted);text-decoration:none;font-size:13px}
.lookup-mine:hover{color:var(--txt)}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:20px}
.card{
  background:linear-gradient(180deg,var(--card),var(--bg2));
  border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;
}
.card h2{margin:0 0 12px;font-size:15px;letter-spacing:.01em}
.card h3{margin:16px 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.map-card{padding:0;overflow:hidden;margin-top:20px}
#map{height:340px;width:100%;background:var(--bg2)}
/* dark map from light OSM tiles (tiles only: marker, popup, controls keep their colors) */
#map .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.95) contrast(.9) saturate(.6)}
.map-cap{padding:10px 16px;color:var(--muted);font-size:12.5px;border-top:1px solid var(--line)}

/* definition lists */
dl{margin:0;display:flex;flex-direction:column;gap:2px}
dl.cols{display:grid;grid-template-columns:1fr 1fr;gap:2px 24px}
dl>div{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.05)}
dl>div:last-child{border-bottom:0}
dt{color:var(--muted);font-size:13px}
dd{margin:0;word-break:break-word}
dd.strong,.strong{font-weight:600}
.mono dd,.mono dt{font-family:var(--mono);font-size:12.5px}
.empty{color:var(--muted);font-size:13px}
code{background:var(--bg);padding:2px 6px;border-radius:6px;font-family:var(--mono);font-size:12px}

details summary{cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary h2::before{content:"▸ ";color:var(--accent)}
details[open] summary h2::before{content:"▾ "}

.foot{text-align:center;color:var(--muted);font-size:13px;margin-top:28px}
.foot a{color:var(--accent);text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot .ts{display:block;margin-top:6px;font-size:11px;opacity:.6}

.leaflet-container{background:var(--bg2)!important}
@media (max-width:520px){
  dl.cols{grid-template-columns:1fr}
  dl>div{grid-template-columns:110px 1fr}
}