:root{
    --bg:#0f1115; --card:#151922; --text:#e5e7eb; --muted:#98a2b3; --border:#1f2430; --accent:#60a5fa;
    --ok:#22c55e; --warn:#f59e0b; --err:#ef4444;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,Segoe UI,Arial}
  .wrap{max-width:1100px;margin:40px auto;padding:0 16px}
  header{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px}
  h1{font-size:22px;margin:0}
  .toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  input[type="search"], select{
    background:#0c0f14;border:1px solid var(--border);color:var(--text);
    border-radius:10px;padding:8px 10px;min-width:220px;outline:none;
  }
  .count{color:var(--muted);font-size:12px;margin-left:6px}
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
  a.card{
    display:block;background:var(--card);border:1px solid var(--border);border-radius:14px;
    padding:14px;text-decoration:none;color:inherit;transition:transform .18s ease, border-color .18s ease;
  }
  a.card:hover{border-color:var(--accent);transform:translateY(-2px)}
  .top{display:flex;align-items:center;gap:10px}
  .emoji{font-size:22px}
  .name{font-weight:600}
  .desc{color:var(--muted);font-size:12px;margin-top:6px}
  .meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
  .host{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:75%}
  .status{display:flex;align-items:center;gap:6px}
  .dot{width:8px;height:8px;border-radius:50%;background:var(--warn)}
  .dot.ok{background:var(--ok)}
  .dot.err{background:var(--err)}
  @media (prefers-reduced-motion: reduce){ a.card{transition:none} }