/* FAK LABS Markets — Swiss design tokens (shared with the Markets site) */
:root{
  --red:#E30613; --ink:#0a0a0a; --mut:#6b7280; --line:#e7e7e7; --bg:#fafafa;
  --card:#ffffff; --up:#16a34a;
  --font:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body{font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
.mono{font-family:var(--mono)}
.muted{color:var(--mut)}

/* topbar + brand (matches markets site) */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:10px}
.sq{width:16px;height:16px;background:var(--red);display:inline-block}
.word{font-weight:800;letter-spacing:.12em;font-size:15px}
.prod{font-size:11px;font-weight:700;letter-spacing:.28em;color:var(--mut);border-left:1px solid var(--line);padding-left:10px}
.status{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--mut);border:1px solid var(--line);padding:6px 13px;border-radius:999px;background:#fff}
.status .dot{width:8px;height:8px;border-radius:50%;background:#d1d5db}
.status.ok{color:var(--up);border-color:var(--up)}
.status.ok .dot{background:var(--up)}
.status.bad{color:var(--red);border-color:var(--red)}
.status.bad .dot{background:var(--red)}

/* layout */
.wrap{max-width:1180px;margin:0 auto;padding:22px 18px 40px;display:flex;flex-direction:column;gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px}
.card h2{font-size:16px;margin-bottom:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card p.muted{font-size:13.5px;margin-bottom:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:760px){.grid2{grid-template-columns:1fr}}

/* method badges */
.method{font-size:11px;font-weight:800;letter-spacing:.1em;color:#fff;padding:4px 9px;border-radius:5px}
.method.get{background:#0a0a0a}
.method.post{background:#1d4ed8}

/* inputs + buttons */
.row{display:flex;gap:10px;flex-wrap:wrap}
.textin{width:100%;padding:11px 13px;font-size:14px;font-family:var(--font);border:1px solid var(--line);border-radius:8px;outline:none;background:#fff;margin-bottom:10px;color:var(--ink)}
.textin.mono{font-size:13px}
textarea.textin{resize:vertical}
.textin:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(227,6,19,.08)}
.btn{padding:10px 18px;background:var(--red);color:#fff;border:0;border-radius:8px;font-family:var(--font);font-size:13.5px;font-weight:700;cursor:pointer}
.btn:hover{filter:brightness(.94)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--ink)}

/* response viewer */
.resp-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.pill{font-size:12px;font-weight:800;padding:5px 12px;border-radius:999px;background:#f3f4f6;color:var(--mut)}
.pill.ok{background:rgba(22,163,74,.12);color:var(--up)}
.pill.bad{background:rgba(227,6,19,.08);color:var(--red)}
pre{background:#0a0a0a;color:#e8e8e8;padding:16px 18px;border-radius:10px;overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
pre .k{color:#7CFC9A} pre .s{color:#fbbf24} pre .n{color:#7dd3fc}
pre .b{color:#f472b6} pre .nl{color:#9ca3af}

footer{text-align:center;color:var(--mut);font-size:13px;padding:26px;border-top:1px solid var(--line)}
footer b{color:var(--ink)}