/* Merkdex — shared inner-page theme */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg-deep:#060a11;
  --bg-base:#0a0f1a;
  --bg-surface:#111827;
  --bg-elevated:#1a2332;
  --bg-card:#141c2b;
  --border:#1e2d42;
  --border-subtle:#162033;
  --text-primary:#e8edf5;
  --text-secondary:#8b9dc3;
  --text-muted:#4a5f82;
  --accent:#00d4aa;
  --accent-bright:#00ffd0;
  --accent-glow:rgba(0,212,170,0.15);
  --amber:#f0b429;
  --red:#ef4444;
  --green:#00d4aa;
  --font-display:Georgia,'Times New Roman','Palatino Linotype',serif;
  --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-mono:'SF Mono','Cascadia Code','Fira Code','JetBrains Mono',Menlo,Consolas,monospace;
}

html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--bg-deep);
  color:var(--text-primary);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

body::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* Nav */
nav{
  padding:16px 24px;
  border-bottom:1px solid var(--border-subtle);
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(6,10,17,0.95);
  backdrop-filter:blur(20px);
  position:sticky;top:0;z-index:100;
}
.nav-logo{
  font-family:var(--font-mono);font-size:18px;font-weight:700;
  color:var(--text-primary);text-decoration:none;letter-spacing:-0.5px;
}
.nav-logo span{color:var(--accent)}
.nav-back{
  font-family:var(--font-mono);font-size:13px;
  color:var(--text-muted);text-decoration:none;
  transition:color 0.2s;
}
.nav-back:hover{color:var(--accent)}

/* Main content */
main{max-width:800px;margin:4rem auto;padding:0 24px;flex:1;width:100%}
h1{
  font-family:var(--font-display);
  font-size:2.2rem;font-weight:700;
  color:var(--text-primary);
  margin-bottom:.5rem;
  letter-spacing:-0.5px;
}
.meta{color:var(--text-muted);font-size:.875rem;margin-bottom:2.5rem;font-family:var(--font-mono)}
.badge{
  display:inline-block;
  background:var(--accent-glow);
  border:1px solid var(--accent);
  color:var(--accent);
  font-family:var(--font-mono);font-size:.75rem;font-weight:600;
  padding:.3rem .7rem;border-radius:4px;margin-bottom:2rem;
  letter-spacing:.5px;
}
h2{
  font-family:var(--font-mono);font-size:1rem;font-weight:600;
  color:var(--accent);margin:2.5rem 0 .75rem;
  text-transform:uppercase;letter-spacing:.5px;
}
p{color:var(--text-secondary);line-height:1.8;margin-bottom:.875rem}
ul{padding-left:1.25rem;margin-bottom:.875rem}
li{color:var(--text-secondary);line-height:1.8;margin-bottom:.25rem}
strong{color:var(--text-primary)}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-bright);text-decoration:underline}

/* Cards (docs) */
.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:8px;
  padding:1.5rem;margin-bottom:1.25rem;
}
.card h2{margin-top:0;font-size:.9rem}
.endpoint{
  font-family:var(--font-mono);font-size:.875rem;
  background:var(--bg-deep);
  border:1px solid var(--border);
  border-radius:6px;padding:.875rem 1rem;
  margin:.5rem 0 .75rem;color:var(--text-primary);
}
.method{color:var(--accent);font-weight:700;margin-right:.5rem}

/* Status page */
.status-banner{
  background:var(--bg-card);
  border:1px solid var(--accent);
  border-radius:8px;padding:1.5rem;
  display:flex;align-items:center;gap:1rem;margin-bottom:2rem;
}
.dot{
  width:12px;height:12px;border-radius:50%;
  background:var(--accent);flex-shrink:0;
  box-shadow:0 0 10px var(--accent);
}
.status-banner h2{font-size:1rem;color:var(--accent);margin:0;text-transform:none;letter-spacing:0}
.status-banner p{color:var(--text-muted);font-size:.8rem;margin:.25rem 0 0}
.services{display:flex;flex-direction:column;gap:.625rem}
.service{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:6px;padding:.875rem 1.25rem;
  display:flex;align-items:center;justify-content:space-between;
}
.service-name{font-family:var(--font-mono);font-size:.875rem;color:var(--text-secondary)}
.service-ok{font-family:var(--font-mono);font-size:.75rem;color:var(--accent);
  display:flex;align-items:center;gap:.4rem}
.service-ok::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block}
.updated{color:var(--text-muted);font-family:var(--font-mono);font-size:.75rem;text-align:center;margin-top:2rem}

/* Footer */
footer{
  border-top:1px solid var(--border-subtle);
  padding:2rem 24px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1rem;
}
.footer-brand{
  font-family:var(--font-mono);font-size:.9rem;font-weight:700;
  color:var(--text-primary);
}
.footer-brand span{color:var(--accent)}
.footer-links{display:flex;gap:24px}
.footer-links a{
  font-family:var(--font-mono);font-size:.75rem;
  color:var(--text-muted);text-decoration:none;
  transition:color .2s;
}
.footer-links a:hover{color:var(--accent)}

@media(max-width:600px){
  h1{font-size:1.6rem}
  main{margin:2rem auto;padding:0 16px}
  footer{flex-direction:column;align-items:flex-start}
}