:root { --bg:#0b132b; --fg:#eaeef5; --muted:#a7b1c2; --card:#16213e; --accent:#50c4e9; }
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,Segoe UI,Roboto}
a{color:var(--accent);text-decoration:none}
.hero,.subhero{padding:48px 20px; text-align:center; background:linear-gradient(180deg,#0b132b,#111);}
.hero h1,.subhero h1{margin:0 0 6px 0;font-size:40px}
nav a{margin:0 10px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;padding:20px}
.card{background:var(--card);border-radius:14px;padding:16px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;padding:10px 20px}
input[type=search]{padding:10px;border-radius:10px;border:1px solid #2a3b66;background:#0f1a39;color:var(--fg);min-width:260px}
select{padding:10px;border-radius:10px;background:#0f1a39;color:var(--fg);border:1px solid #2a3b66}
.badge{display:inline-block;padding:.1rem .5rem;border:1px solid #2a3b66;border-radius:999px;margin-right:.25rem;color:var(--muted);font-size:12px}
.meta{color:var(--muted);font-size:12px}
#api-status.ok{border-left:4px solid #2ecc71;padding-left:12px}
#api-status.warn{border-left:4px solid #f1c40f;padding-left:12px}
#api-status.err{border-left:4px solid #e74c3c;padding-left:12px}