/* Fontes (Space Grotesk / IBM Plex Mono) */
@font-face{font-family:"Space Grotesk";font-style:normal;font-display:swap;font-weight:300 700;src:url("fonts/space-grotesk-latin-wght-normal-BhU9QXUp.woff2") format("woff2-variations")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-mono-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-mono-600.woff2") format("woff2")}

:root{
  --bg:#070b10;--panel:#0d1520;--line:#17222f;--line2:#1f2d3d;
  --txt:#d6e2ee;--dim:#7d8fa3;--mute:#4d5f73;
  --accent:#034cff;--accent2:#12b3ff;--warn:#ffb92e;--err:#fc533a;
  --mono:'IBM Plex Mono','JetBrains Mono',Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:'Space Grotesk','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:14px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#1c2836;border-radius:6px;border:2px solid var(--bg)}
button{cursor:pointer;border:none;background:none;color:inherit;font-family:inherit}
code,pre{font-family:var(--mono)}

.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:13px 22px;border-bottom:1px solid var(--line);background:rgba(10,17,25,.9);backdrop-filter:blur(8px);flex-wrap:wrap;gap:10px}
.brand{display:flex;align-items:center;gap:9px;color:var(--accent);font-size:14px;letter-spacing:.06em}
.brand span{color:var(--dim)}.brand b{color:var(--txt)}
.brand em{font-style:normal;font-size:10px;color:var(--mute);border:1px solid var(--line2);padding:2px 7px;border-radius:20px}
.topright{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.topright input{background:#0a121a;border:1px solid var(--line2);border-radius:8px;padding:8px 12px;
  font-family:var(--mono);font-size:12px;color:var(--txt);outline:none;width:230px}
.topright input:focus{border-color:var(--accent)}
.ghost{font-size:11.5px;padding:7px 12px;border:1px solid var(--line2);border-radius:8px;color:var(--dim);background:#0a131c;text-decoration:none}
.ghost:hover{border-color:#0a5c46;color:var(--accent)}

.layout{display:grid;grid-template-columns:250px 1fr;min-height:calc(100vh - 56px)}
.side{border-right:1px solid var(--line);padding:18px 12px;position:sticky;top:56px;align-self:start;max-height:calc(100vh - 56px);overflow-y:auto}
.side h4{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:14px 10px 6px}
.side a{display:block;padding:7px 10px;border-radius:7px;color:var(--dim);text-decoration:none;font-size:12.5px;transition:.12s}
.side a:hover{background:#101a25;color:var(--txt)}
.side a .m{font-family:var(--mono);font-size:9.5px;padding:1px 6px;border-radius:4px;margin-right:8px;font-weight:600}
.m.get{background:#0e2b24;color:var(--accent)}.m.post{background:#0f2233;color:var(--accent2)}
.m.patch{background:#2a2313;color:var(--warn)}.m.delete{background:#2a161c;color:var(--err)}

.content{padding:26px 30px 80px;max-width:1000px;min-width:0}
.hero h1{font-size:26px;letter-spacing:.02em;margin-bottom:8px}
.hero p{color:var(--dim);line-height:1.6;white-space:pre-line;margin-bottom:18px}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.qbox{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-width:0}
.qlabel{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.qbox code{font-size:12px;color:var(--accent);word-break:break-all}

.ep{border:1px solid var(--line);border-radius:12px;margin-top:14px;overflow:hidden;background:var(--panel)}
.ep-head{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer}
.ep-head:hover{background:#0a131c}
.ep-head .m{font-family:var(--mono);font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;min-width:60px;text-align:center}
.ep-head .p{font-family:var(--mono);font-size:13px;color:var(--txt)}
.ep-head .s{margin-left:auto;color:var(--dim);font-size:12.5px}
.ep-body{display:none;padding:0 16px 16px;border-top:1px solid var(--line)}
.ep.open .ep-body{display:block}
.sec{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin:16px 0 8px}
pre{background:#050c12;border:1px solid var(--line);border-radius:9px;padding:13px;overflow-x:auto;
  font-size:12px;color:#c9d8ff;line-height:1.5;max-height:340px}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.row input{flex:1;min-width:140px;background:#0a121a;border:1px solid var(--line2);border-radius:8px;padding:9px 12px;
  font-family:var(--mono);font-size:12px;color:var(--txt);outline:none}
.row input:focus{border-color:#0a5c46}
.run{padding:9px 20px;border-radius:8px;font-weight:600;background:linear-gradient(180deg,#034cff,#00b37c);color:#04140f}
.run:disabled{opacity:.5;cursor:wait}
.res{margin-top:10px}
.res .code{font-family:var(--mono);font-size:11px;padding:6px 10px;border-radius:6px;display:inline-block;margin-bottom:8px}
.code.ok{background:#0e2b24;color:var(--accent)}.code.bad{background:#2a161c;color:var(--err)}
.badge{font-family:var(--mono);font-size:10.5px;color:var(--mute);background:#0d1822;border:1px solid var(--line2);
  padding:2px 8px;border-radius:20px;margin-left:8px}
@media(max-width:820px){.layout{grid-template-columns:1fr}.side{display:none}.quick{grid-template-columns:1fr}}