/* ===== APIs & Back-End — "API console" concept ===== */
:root{
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --wire: rgba(255,255,255,.12);
  --term: #080b16;
  --ok: #6ee7b7;
  --cy: #7dd3fc;
  --amber: #fbbf24;
}
body.api{background:var(--bg);color:var(--ink)}
.api main{position:relative}
.api main::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/72px 72px,
             radial-gradient(ellipse at 50% -10%,rgba(67,104,250,.2),transparent 55%)}

/* client bar */
.api-bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:12px;
  padding:10px 18px;background:rgba(7,10,24,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.8rem}
.api-bar__brand{display:flex;align-items:center;gap:8px;font-weight:700;font-family:Inter,system-ui,sans-serif}
.api-bar__brand .brand__mark{color:var(--accent-2)}
.api-bar__method{color:var(--ok);border:1px solid var(--wire);border-radius:6px;padding:3px 8px}
.api-bar__path{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.api-bar__status{margin-left:auto;color:var(--ok);white-space:nowrap}
.api-bar__status::before{content:"● "}

/* section scaffold */
.api-section{padding:52px 0}
.api-eyebrow{font-family:var(--mono);font-size:.8rem;color:var(--muted);margin-bottom:14px}
.api-eyebrow::before{content:"→ ";color:var(--cy)}
.api-section h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.api-section > .container > p{max-width:600px;margin:14px 0 0;color:var(--muted)}

/* hero: request / response */
.api-hero{padding:44px 0 20px}
.api-hero h1{font-size:clamp(2.3rem,5.4vw,3.7rem);letter-spacing:-.02em}
.api-hero__sub{max-width:48ch;margin:18px 0 0;color:var(--muted);font-size:1.03rem}
.api-hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.api-rr{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.rr{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.rr__bar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.rr__bar .tag{color:var(--cy)}
.rr__bar .code{color:var(--ok)}
.rr pre{margin:0;padding:18px;font-family:var(--mono);font-size:.82rem;line-height:1.75;color:var(--muted);overflow-x:auto;background:var(--term)}
.rr pre .k{color:var(--cy)}
.rr pre .s{color:var(--ok)}
.rr pre .m{color:var(--accent-2)}

/* endpoint list */
.endpoints{list-style:none;font-family:var(--mono);margin-top:24px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.endpoints li{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:16px 18px;border-bottom:1px solid var(--wire)}
.endpoints li:last-child{border-bottom:0}
.endpoints li:hover{background:rgba(255,255,255,.03)}
.endpoints .v{font-size:.72rem;font-weight:700;padding:2px 7px;border-radius:5px;color:#080b16}
.endpoints .v.get{background:var(--cy)}
.endpoints .v.post{background:var(--ok)}
.endpoints .v.put{background:var(--amber)}
.endpoints .path{color:var(--ink);font-size:.9rem}
.endpoints .desc{color:var(--muted);font-family:Inter,system-ui,sans-serif;font-size:.86rem;flex:1 1 240px}

/* request log (approach) */
.log{margin-top:26px;background:var(--term);border:1px solid var(--line);border-radius:14px;
  font-family:var(--mono);font-size:.85rem;line-height:1.9;padding:20px 22px;overflow-x:auto}
.log div{white-space:pre;color:var(--muted)}
.log .t{color:#6b6b7a}
.log .s{color:var(--ok)}
.log .n{color:var(--cy)}

/* what you get: payload + headers */
.api-cols{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-top:24px}
.api-cols pre{margin:0;padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  font-family:var(--mono);font-size:.84rem;line-height:1.85;color:var(--muted);overflow-x:auto}
.api-cols pre .k{color:var(--cy)}
.api-cols pre .s{color:var(--ok)}
.api-cols h4{font-family:var(--mono);font-size:.78rem;color:var(--muted);margin-bottom:10px}

/* related */
.api-links{list-style:none;font-family:var(--mono);margin-top:20px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.api-links a{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--wire);color:var(--ink);font-size:.9rem;transition:background .15s,padding-left .15s}
.api-links li:last-child a{border-bottom:0}
.api-links a:hover{background:rgba(255,255,255,.04);padding-left:24px}
.api-links .v{font-size:.72rem;font-weight:700;padding:2px 7px;border-radius:5px;background:var(--cy);color:#080b16}
.api-links .note{font-family:Inter,system-ui,sans-serif;font-size:.82rem;color:var(--muted);margin-left:auto}

.api-cta{padding:80px 0 96px;text-align:center}
.api-cta h2{font-size:clamp(2rem,4.5vw,3rem)}
.api-cta p{color:var(--muted);max-width:44ch;margin:14px auto 26px}

@media(max-width:900px){
  .api-rr,.api-cols{grid-template-columns:1fr}
  .api-bar__path{display:none}
}