*,*::before,*::after { box-sizing: border-box; }
:root {
  --bg: #07070a; --bg-elev: #101015; --bg-elev2: #16161d;
  --line: #1f1f28; --line-strong: #2a2a36;
  --text: #ececf1; --text-dim: #8a8a99; --text-faint: #4d4d59;
  --accent: #7c5cff; --accent-2: #2dd4ff;
  --green: #3ddc97; --red: #ff6b6b; --amber: #f7c948;
}
html,body { margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100vh; line-height:1.55; }
a { color:inherit; text-decoration:none; }
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 600px at 15% -10%, rgba(124,92,255,.14), transparent 60%),
    radial-gradient(700px 500px at 95% 0%, rgba(45,212,255,.09), transparent 60%);
}
main, header, footer { position:relative; z-index:1; }

/* Nav (shared with auth pages) */
.nav { display:flex; align-items:center; justify-content:space-between;
  padding:1.25rem 2rem; max-width:1200px; margin:0 auto; }
.brand { display:flex; align-items:center; gap:.6rem; font-weight:600; letter-spacing:-.02em; }
.brand .logo { width:24px; height:24px; border-radius:6px;
  background:conic-gradient(from 200deg at 50% 50%, var(--accent), var(--accent-2), var(--accent));
  box-shadow:0 0 24px rgba(124,92,255,.45); }
.nav-right { display:flex; gap:1.25rem; color:var(--text-dim); font-size:.9rem; align-items:center; }
.nav-right a:hover, .nav-right button:hover { color:var(--text); }
.nav-cta { padding:.45rem .85rem; border-radius:8px;
  background:#fff; color:#0a0a0c !important; font-weight:600; font-size:.85rem; }
.nav-cta:hover { transform:translateY(-1px); }

/* Doc layout */
.doc { max-width:760px; margin:2rem auto 4rem; padding:0 1.5rem; }
.doc h1 { font-size:clamp(2rem, 4vw, 2.8rem); letter-spacing:-0.03em; margin:.5rem 0 .25rem;
  font-weight:600; }
.doc .lead { color:var(--text-dim); font-size:1rem; margin:0 0 2.5rem; }
.doc h2 { font-size:1.15rem; margin:2.5rem 0 .75rem; font-weight:600; letter-spacing:-.01em; }
.doc h3 { font-size:.95rem; margin:1.5rem 0 .5rem; font-weight:600; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.05em; }
.doc p { margin:.75rem 0; color:#d4d4dc; }
.doc ul, .doc ol { margin:.75rem 0; padding-left:1.4rem; color:#d4d4dc; }
.doc li { margin:.35rem 0; }
.doc code { background:#0c0c10; padding:.12rem .35rem; border-radius:4px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85em; color:#cfcfd9; }
.doc pre { background:#0c0c10; border:1px solid var(--line); border-radius:8px;
  padding:.85rem 1rem; overflow-x:auto; font-family:ui-monospace,monospace; font-size:.82rem;
  color:#d4d4dc; line-height:1.55; }
.doc hr { border:none; border-top:1px solid var(--line); margin:3rem 0; }
.doc .meta { color:var(--text-faint); font-size:.8rem; }
.doc strong { color:var(--text); }
.doc a:not(.brand) { color:var(--accent-2); }
.doc a:not(.brand):hover { text-decoration:underline; }

/* Shared footer */
.site-footer {
  border-top:1px solid var(--line); margin-top:5rem;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.01));
}
.site-footer .inner {
  max-width:1100px; margin:0 auto; padding:3rem 2rem 2rem;
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:2.5rem;
}
.site-footer .col h4 {
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint); margin:0 0 .85rem; font-weight:600;
}
.site-footer .col a { display:block; color:var(--text-dim); font-size:.88rem;
  padding:.2rem 0; transition:color .12s ease; }
.site-footer .col a:hover { color:var(--text); }
.site-footer .about { color:var(--text-dim); font-size:.85rem; line-height:1.6; max-width:300px; }
.site-footer .about .brand-line { color:var(--text); font-weight:600; margin-bottom:.5rem;
  letter-spacing:-.02em; display:flex; align-items:center; gap:.5rem; }
.site-footer .about .brand-line .logo { width:18px; height:18px; }
.site-footer .bottom {
  max-width:1100px; margin:0 auto; padding:1.5rem 2rem;
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--line); color:var(--text-faint); font-size:.78rem;
}
.site-footer .bottom .status-pill {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.2rem .55rem; border-radius:999px; background:rgba(61,220,151,.08);
  border:1px solid rgba(61,220,151,.2); color:var(--green); font-size:.72rem;
}
.site-footer .bottom .status-pill .dot {
  width:6px; height:6px; border-radius:50%; background:var(--green);
  box-shadow:0 0 8px var(--green);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(.85)} }

@media (max-width:780px) {
  .site-footer .inner { grid-template-columns:1fr 1fr; gap:2rem; }
  .site-footer .about { grid-column: 1 / -1; }
  .site-footer .bottom { flex-direction:column; gap:.75rem; padding:1.25rem 1.5rem; }
}

/* Mobile hamburger nav */
.nav-toggle {
  display:none; background:transparent; border:1px solid var(--line);
  color:var(--text); width:40px; height:40px; border-radius:8px;
  cursor:pointer; padding:0; align-items:center; justify-content:center;
  transition:border-color .15s ease;
}
.nav-toggle:hover { border-color:var(--text-faint); }
.nav-toggle svg { display:block; }

@media (max-width:720px) {
  header.nav {
    position:relative; padding:1rem 1.25rem; flex-wrap:wrap;
  }
  .nav-toggle { display:inline-flex; }
  .nav-right {
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg-elev); border-bottom:1px solid var(--line);
    border-top:1px solid var(--line); padding:.5rem 0;
    z-index:100; box-shadow:0 12px 32px -16px rgba(0,0,0,.6);
  }
  .nav-right.open { display:flex; }
  .nav-right > a, .nav-right > button {
    padding:.85rem 1.5rem; border-bottom:1px solid var(--line);
    text-align:left; font-size:.95rem; color:var(--text);
  }
  .nav-right > a:last-child, .nav-right > button:last-child { border-bottom:none; }
  .nav-right .nav-cta {
    margin:.5rem 1.5rem; text-align:center; border-radius:8px;
    padding:.75rem 1rem;
  }
  /* doc layout breathing room on phones */
  .doc { padding:0 1rem; margin:1.5rem auto 3rem; }
  .doc h1 { font-size:1.7rem; }
  .doc pre { font-size:.78rem; padding:.7rem .85rem; }
}

/* General mobile helpers — long IDs/URLs wrap */
@media (max-width:560px) {
  code, pre { word-break:break-word; overflow-wrap:anywhere; }
}