:root{
  --bg:#0f1b2d; --panel:#16263d; --line:#24405f; --ink:#eaf2fb; --muted:#9db4d0;
  --accent:#ff7a2f; --accent2:#2f8bff; --ok:#39c07a; --warn:#ffcf5c;
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;background:var(--panel);border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:19px}
.tag{font-size:11px;background:var(--accent);color:#1a0d00;padding:2px 8px;border-radius:20px;vertical-align:middle;margin-left:6px;font-weight:700}
.status{font-size:13px;color:var(--muted)}
main{max-width:1060px;margin:0 auto;padding:26px 20px 60px}
.intro h1{margin:.2em 0;font-size:26px}
.intro p{color:var(--muted);max-width:68ch}
.droogloop{margin-top:10px;font-weight:600}
.badge-droog{color:var(--warn)} .badge-live{color:var(--ok)}
.groups{margin-top:26px;display:grid;gap:26px}
.group h3{margin:0 0 10px;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent2)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;transition:.15s}
.tile:hover{border-color:var(--accent);transform:translateY(-2px)}
.tile .k{font-weight:700}
.tile .cap{color:var(--muted);font-size:13px;margin:3px 0 8px}
.tile .n{font-size:12px;color:var(--accent2)}
.drawer{position:fixed;top:0;right:0;width:min(560px,100%);height:100%;background:var(--panel);border-left:1px solid var(--line);box-shadow:-12px 0 40px rgba(0,0,0,.4);padding:20px;overflow:auto}
.drawer-head{display:flex;justify-content:space-between;align-items:center}
.drawer-head button{background:none;border:0;color:var(--ink);font-size:26px;cursor:pointer}
.eps{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px}
.eps th,.eps td{text-align:left;padding:7px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.m{font-weight:700;font-size:11px;padding:1px 6px;border-radius:5px}
.m.GET{background:#143b2a;color:var(--ok)} .m.POST{background:#3b2a14;color:var(--warn)}
.route{font-size:11px;color:var(--muted)}
.try{background:var(--accent2);border:0;color:#fff;border-radius:6px;padding:4px 9px;cursor:pointer;font-size:12px}
.result{margin-top:14px;background:#0b1626;border:1px solid var(--line);border-radius:8px;padding:12px;white-space:pre-wrap;font-size:12px;color:var(--warn)}
.muted{color:var(--muted)}
footer{text-align:center;color:var(--muted);font-size:12px;padding:20px}
@media(max-width:560px){.intro h1{font-size:22px}}