body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; margin:0; background:#0b0f14; color:#e8eef7}
.wrap{max-width:1100px; margin:0 auto; padding:24px}
.hero{padding:28px; border-radius:18px; background:linear-gradient(135deg,#122033,#0b0f14); border:1px solid rgba(255,255,255,.08)}
h1{margin:0 0 8px; font-size:34px}
.sub{margin:0 0 18px; color:#b8c4d6}
.row{display:flex; gap:12px; flex-wrap:wrap}
input,button{border-radius:12px; border:1px solid rgba(255,255,255,.12); background:#0e1622; color:#e8eef7; padding:12px 14px; font-size:14px}
input{flex:1; min-width:240px}
button{cursor:pointer}
button:hover{filter:brightness(1.1)}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:16px}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid{grid-template-columns:1fr}}
.card{padding:14px; border-radius:16px; background:#0e1622; border:1px solid rgba(255,255,255,.08)}
.pill{display:inline-flex; gap:8px; align-items:center; padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); cursor:pointer; user-select:none}
.pill.active{background:rgba(0,200,140,.18); border-color:rgba(0,200,140,.35)}
.section{margin-top:22px}
.title{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.muted{color:#a9b7cc}
a{color:#8ad0ff; text-decoration:none}
.results{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px}
@media (max-width:900px){.results{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.results{grid-template-columns:1fr}}
.rtitle{margin:0 0 6px; font-weight:650}
.meta{font-size:12px; color:#a9b7cc}
.warn{background:rgba(255,160,0,.12); border:1px solid rgba(255,160,0,.25); padding:10px 12px; border-radius:12px}
.ok{background:rgba(0,200,140,.12); border:1px solid rgba(0,200,140,.25); padding:10px 12px; border-radius:12px}
.topbar{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.small{font-size:12px}