:root{
  --n-bg:#0b0f1a; --n-fg:#e8ecf7; --n-muted:#9aa3b2; --n-primary:#21c1eb;
  --n-card:#0f1626; --n-border:#1f2a3d; --n-ok:#00d97e; --n-warn:#ffcc66; --n-bad:#ff5c77;
  --n-chip:#142033; --n-code:#0b1020;
}

.n-product{ padding: 18px 0 40px; }
.n-wrap{ max-width:1100px; margin:0 auto; padding: 0 16px; width:100%; }
.n-hero{
  border:1px solid var(--n-border);
  background:linear-gradient(180deg, rgba(33,193,235,.10), rgba(15,22,38,.95));
  border-radius:18px;
  padding:18px;
  margin-top: 8px;
}
.n-hero h1{ margin:0 0 6px 0; font-size:28px; line-height:1.2; }
.n-hero p{ margin:0; color:var(--n-muted); max-width: 920px; }
.n-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border:1px solid var(--n-border);
  border-radius:999px; color:var(--n-muted); font-size:13px;
  background:rgba(20,32,51,.65);
}

.n-chips{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }
.n-chip{ padding:6px 10px; border-radius:999px; border:1px solid var(--n-border); color:var(--n-muted); font-size:13px; background:#0b1020; }
.n-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px; margin-top:16px; }
.n-card{ border:1px solid var(--n-border); background:var(--n-card); border-radius:16px; padding:16px; }
.n-col-6{ grid-column:span 6; }
.n-col-12{ grid-column:span 12; }
@media (max-width: 900px){ .n-col-6,.n-col-12{ grid-column:span 12; } }

.n-card h2,.n-card h3{ margin:0 0 10px 0; }
.n-small{ color:var(--n-muted); font-size:13px; }
.n-mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; overflow-wrap:anywhere; word-break:break-word; }

.n-endpoint{
  margin-top:6px; padding:10px 12px; border-radius:12px;
  border:1px solid var(--n-border); background:var(--n-code);
}
.n-endpoint .n-label{ color:var(--n-muted); font-size:12px; margin-bottom:6px; }

.n-btnrow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.n-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px; border-radius:12px; border:1px solid var(--n-border);
  background:rgba(33,193,235,.10); color:var(--n-fg);
  font-weight:650; cursor:pointer;
}
.n-btn.n-ghost{ background:transparent; }
.n-btn.n-small{ padding:8px 10px; font-size:13px; }

.n-status{
  margin-top:10px; padding:10px 12px; border-radius:12px;
  border:1px solid var(--n-border); background:var(--n-code);
  color:var(--n-muted);
}
.n-ok{ color:var(--n-ok); } .n-warn{ color:var(--n-warn); } .n-bad{ color:var(--n-bad); }

.n-product pre{
  margin:10px 0 0; padding:12px; border-radius:12px;
  border:1px solid var(--n-border); background:var(--n-code);
  overflow:auto; position:relative;
}
.n-copy{
  position:absolute; top:10px; right:10px;
  padding:6px 10px; border-radius:10px;
  border:1px solid var(--n-border);
  background:transparent; color:var(--n-fg);
  font-weight:650; cursor:pointer; font-size:12px;
}