:root {
  --bg-0: #060b1a;
  --bg-1: #0d1b3e;
  --bg-2: #091525;
  --sky: #38bdf8;
  --indigo: #818cf8;
  --emerald: #34d399;
  --violet: #a78bfa;
  --glass: rgba(10, 16, 35, 0.72);
  --text: #e6edff;
  --muted: #8fa3c8;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; }
body {
  font-family: 'Segoe UI', 'Poppins', Roboto, Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(135deg, var(--bg-0) 0%, var(--bg-1) 35%, var(--bg-2) 65%, #060d1f 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* ── Interactive grid canvas ─────────────────────────────────────────── */
#grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* ── Floating gradient orbs ──────────────────────────────────────────── */
.orb { position: fixed; border-radius: 50%; filter: blur(90px); opacity: .55; z-index: 0; pointer-events: none; animation: drift 18s ease-in-out infinite; }
.orb-1 { width: 420px; height: 420px; top: -120px; left: -100px; background: radial-gradient(circle, rgba(56,189,248,.35), transparent 70%); }
.orb-2 { width: 380px; height: 380px; bottom: -100px; right: -80px; background: radial-gradient(circle, rgba(129,140,248,.32), transparent 70%); animation-delay: -6s; }
.orb-3 { width: 320px; height: 320px; top: 40%; left: 55%; background: radial-gradient(circle, rgba(52,211,153,.22), transparent 70%); animation-delay: -12s; }
.orb-4 { width: 300px; height: 300px; top: 20%; right: 20%; background: radial-gradient(circle, rgba(167,139,250,.2), transparent 70%); animation-delay: -9s; }
@keyframes drift {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(40px,-30px) scale(1.08); }
  66% { transform: translate(-30px,25px) scale(.95); }
}

/* ── Static fine grid overlay ────────────────────────────────────────── */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(56,189,248,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.035) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%);
}

.topbar, main, footer { position: relative; z-index: 2; }

/* ── Top bar ─────────────────────────────────────────────────────────── */
.topbar { display: flex; align-items: center; justify-content: space-between; max-width: 1120px; margin: 0 auto; padding: 22px 26px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand .logo {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 22px rgba(15,60,160,.35);
}
.brand .logo img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; display: block; }
.brand .wordmark { font-weight: 700; font-size: 1.15rem; letter-spacing: .3px; }
.brand .wordmark span { background: linear-gradient(90deg, #38bdf8, #818cf8, #34d399, #a78bfa); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 6s linear infinite; }
.topbar nav a { color: var(--muted); text-decoration: none; font-size: .92rem; margin-left: 22px; transition: color .2s; }
.topbar nav a:hover { color: var(--sky); }
.topbar nav a.active { color: var(--sky); }
@keyframes shine { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }

/* ── Main / document card ────────────────────────────────────────────── */
main { max-width: 1120px; margin: 0 auto; padding: 40px 26px 60px; }
.doc-wrap { max-width: 860px; margin: 0 auto; }
.doc-card {
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  padding: 44px 42px;
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 70px rgba(0,0,0,.4), 0 0 60px rgba(56,189,248,.06);
}
.doc-card h1 {
  font-size: clamp(1.8rem, 4.5vw, 2.5rem); font-weight: 800; letter-spacing: -.5px; line-height: 1.15;
  background: linear-gradient(90deg, #ffffff 0%, #c7dbff 40%, #7dd3fc 70%, #a78bfa 100%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
}
.doc-card .meta { color: var(--muted); font-size: .88rem; margin: 10px 0 28px; }
.doc-card h2 {
  color: #9fc6ff; font-size: 1.18rem; margin: 32px 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.doc-card p, .doc-card li { color: #c3d2ee; font-size: .97rem; line-height: 1.75; }
.doc-card ul { margin: 8px 0 8px 22px; }
.doc-card li { margin: 4px 0; }
.doc-card code { color: #7dd3fc; background: rgba(56,189,248,.08); padding: 2px 7px; border-radius: 6px; font-size: .88rem; font-family: 'Consolas','Menlo',monospace; }
.doc-card a { color: #7dd3fc; text-decoration: none; }
.doc-card a:hover { color: #a5e3ff; }
.doc-card strong { color: #eaf1ff; }

/* Scope / permissions cards */
.scope-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 18px 0; }
.scope { border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 16px; background: rgba(255,255,255,.03); }
.scope code { display: block; margin-bottom: 6px; word-break: break-all; }
.scope span { color: var(--muted); font-size: .86rem; line-height: 1.5; }
.scope span strong { color: #eaf1ff; }

.back { text-align: center; margin-top: 30px; }
.back a { color: var(--muted); text-decoration: none; font-size: .92rem; transition: color .2s; }
.back a:hover { color: var(--sky); }

/* ── Footer ──────────────────────────────────────────────────────────── */
footer { text-align: center; padding: 30px 20px 34px; color: var(--muted); font-size: .88rem; border-top: 1px solid rgba(255,255,255,.06); }
footer a { color: #9fc6ff; text-decoration: none; margin: 0 12px; transition: color .2s; }
footer a:hover { color: var(--sky); }

@media (max-width: 640px) {
  .doc-card { padding: 30px 22px; }
  .topbar { padding: 18px 18px; }
}