@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700&display=swap');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design Tokens (same as landing) ── */
:root {
  --sage:         #4a7c59;
  --sage-dark:    #3d6b4a;
  --sage-deep:    #1a3326;
  --sage-light:   hsl(145, 25%, 96%);
  --sage-mid:     hsl(145, 20%, 88%);
  --sage-subtle:  hsl(145, 15%, 94%);
  --ink:          #0f1a14;
  --slate-700:    #334155;
  --slate-600:    #475569;
  --slate-500:    #64748b;
  --slate-400:    #94a3b8;
  --slate-300:    #cbd5e1;
  --slate-200:    #e2e8f0;
  --slate-100:    #f1f5f9;
  --slate-50:     #f8fafc;
  --white:        #ffffff;
  --green-600:    #16a34a;
  --red-600:      #dc2626;
  --amber-600:    #d97706;
  --font-body:    'Satoshi', system-ui, -apple-system, sans-serif;
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-mono:    'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  --nav-h:        64px;
  --sidebar-w:    260px;
  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Base ── */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul, ol { padding-left: 0; }

/* ── Top Nav ── */
.doc-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--slate-200);
  transition: box-shadow 0.2s;
}
.doc-nav-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}
.doc-nav-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.doc-nav-brand img { width: 28px; height: 28px; }
.doc-nav-separator {
  width: 1px;
  height: 18px;
  background: var(--slate-200);
  flex-shrink: 0;
}
.doc-nav-section {
  font-size: 13px;
  font-weight: 600;
  color: var(--sage);
}
.doc-nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  list-style: none;
}
.doc-nav-links a {
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-500);
  transition: color 0.15s;
}
.doc-nav-links a:hover { color: var(--ink); }
.doc-nav-links a.active { color: var(--sage); font-weight: 600; }
.btn-nav-doc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  background: var(--sage);
  padding: 7px 16px;
  border-radius: 8px;
  transition: background 0.15s;
  white-space: nowrap;
}
.btn-nav-doc:hover { background: var(--sage-dark); }

/* ── Page Shell ── */
.doc-shell {
  display: flex;
  padding-top: var(--nav-h);
  min-height: 100vh;
}

/* ── Sidebar ── */
.doc-sidebar {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--slate-50);
  border-right: 1px solid var(--slate-200);
  overflow-y: auto;
  padding: 28px 16px 48px;
  flex-shrink: 0;
}
.doc-sidebar::-webkit-scrollbar { width: 4px; }
.doc-sidebar::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 4px; }

.sidebar-section { margin-bottom: 28px; }
.sidebar-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-400);
  padding: 0 8px;
  margin-bottom: 6px;
}
.sidebar-nav { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-600);
  transition: background 0.12s, color 0.12s;
}
.sidebar-nav a:hover { background: var(--white); color: var(--ink); }
.sidebar-nav a.active {
  background: var(--sage-light);
  color: var(--sage);
  font-weight: 600;
}
.sidebar-nav a svg { flex-shrink: 0; opacity: 0.6; }
.sidebar-nav a.active svg { opacity: 1; }
.sidebar-divider { height: 1px; background: var(--slate-200); margin: 8px 0; }

/* ── Content ── */
.doc-content {
  flex: 1;
  margin-left: var(--sidebar-w);
  max-width: 820px;
  padding: 52px 56px 80px;
}

/* ── Article Typography ── */
.doc-page-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 12px;
}
.doc-page-desc {
  font-size: 17px;
  color: var(--slate-500);
  line-height: 1.65;
  margin-bottom: 48px;
  max-width: 580px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--slate-200);
}
.doc-section {
  margin-bottom: 56px;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.doc-section h2 {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.doc-section h2 .section-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--sage-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sage);
  flex-shrink: 0;
}
.doc-section h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 28px 0 10px;
}
.doc-section p { color: var(--slate-600); margin-bottom: 14px; line-height: 1.7; }
.doc-section p:last-child { margin-bottom: 0; }

/* ── Steps ── */
.doc-steps { display: flex; flex-direction: column; gap: 0; margin: 20px 0; }
.doc-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--slate-100);
}
.doc-step:last-child { border-bottom: none; }
.step-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.doc-step-body strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.doc-step-body p { margin: 0; font-size: 13px; color: var(--slate-500); }

/* ── Info / Tip / Warning cards ── */
.doc-callout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 10px;
  margin: 20px 0;
  font-size: 13px;
  line-height: 1.6;
}
.doc-callout.tip    { background: var(--sage-light); border: 1px solid rgba(74,124,89,0.25); color: var(--sage-dark); }
.doc-callout.info   { background: hsl(210,50%,96%);  border: 1px solid hsl(210,40%,85%); color: hsl(210,50%,30%); }
.doc-callout.warn   { background: hsl(40,80%,96%);   border: 1px solid hsl(40,60%,80%); color: hsl(35,70%,30%); }
.doc-callout.danger { background: hsl(0,60%,97%);    border: 1px solid hsl(0,60%,85%); color: hsl(0,60%,35%); }
.doc-callout svg { flex-shrink: 0; margin-top: 1px; }
.doc-callout p { margin: 0; }

/* ── Code blocks ── */
.doc-code {
  background: #141f18;
  border-radius: 10px;
  padding: 18px 20px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: #c5e0cf;
  overflow-x: auto;
  margin: 16px 0;
  -webkit-overflow-scrolling: touch;
}
.doc-code .ck { color: #7dc99e; }
.doc-code .cs { color: #f0c070; }
.doc-code .cc { color: rgba(255,255,255,0.35); }
code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--slate-100);
  color: var(--sage-dark);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--slate-200);
}

/* ── Tables ── */
.doc-table-wrap { overflow-x: auto; margin: 20px 0; border-radius: 10px; border: 1px solid var(--slate-200); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead tr { background: var(--slate-50); }
th { padding: 10px 14px; text-align: left; font-weight: 700; color: var(--slate-700); border-bottom: 1px solid var(--slate-200); white-space: nowrap; }
td { padding: 10px 14px; color: var(--slate-600); border-bottom: 1px solid var(--slate-100); }
tr:last-child td { border-bottom: none; }

/* ── Format badges ── */
.fmt-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  background: var(--slate-100);
  color: var(--slate-600);
  border: 1px solid var(--slate-200);
  padding: 2px 7px;
  border-radius: 4px;
  margin: 2px;
}

/* ── UI labels ── */
.ui-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--slate-300);
  padding: 2px 9px;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* ── Key caps ── */
kbd {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--slate-700);
  background: var(--white);
  border: 1px solid var(--slate-300);
  border-bottom-width: 2px;
  padding: 2px 7px;
  border-radius: 5px;
  line-height: 1.4;
}

/* ── Feature grid on index ── */
.doc-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0;
}
.doc-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.doc-card:hover {
  border-color: var(--sage-mid);
  box-shadow: 0 3px 16px rgba(74,124,89,0.08);
  transform: translateY(-1px);
}
.doc-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--sage-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sage);
  flex-shrink: 0;
}
.doc-card-body strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
}
.doc-card-body p { font-size: 12px; color: var(--slate-500); margin: 0; line-height: 1.5; }

/* ── In-page nav (table of contents on right) ── */
.doc-toc {
  position: fixed;
  top: calc(var(--nav-h) + 48px);
  right: 24px;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.doc-toc-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-400);
  margin-bottom: 6px;
}
.doc-toc a {
  font-size: 12px;
  color: var(--slate-400);
  padding: 3px 8px;
  border-left: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s;
  line-height: 1.5;
}
.doc-toc a:hover { color: var(--slate-700); }
.doc-toc a.active { color: var(--sage); border-left-color: var(--sage); font-weight: 600; }

/* ── Breadcrumb ── */
.doc-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--slate-400);
  margin-bottom: 24px;
}
.doc-breadcrumb a { color: var(--sage); transition: color 0.12s; }
.doc-breadcrumb a:hover { color: var(--sage-dark); }
.doc-breadcrumb svg { color: var(--slate-300); }

/* ── Page navigation (prev/next) ── */
.doc-page-nav {
  display: flex;
  gap: 16px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--slate-200);
}
.doc-page-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.doc-page-nav a:hover { border-color: var(--sage-mid); box-shadow: 0 2px 12px rgba(74,124,89,0.08); }
.doc-page-nav .nav-dir { font-size: 11px; color: var(--slate-400); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.doc-page-nav .nav-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.doc-page-nav .next { text-align: right; }

/* ── Footer ── */
.doc-footer {
  background: var(--ink);
  padding: 32px 24px;
  margin-left: var(--sidebar-w);
}
.doc-footer-inner {
  max-width: 820px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.doc-footer-brand { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--white); }
.doc-footer-logo { width: 22px; height: 22px; }
.doc-footer-links { display: flex; gap: 20px; flex: 1; }
.doc-footer-links a { font-size: 12px; color: rgba(255,255,255,0.38); transition: color 0.15s; }
.doc-footer-links a:hover { color: rgba(255,255,255,0.75); }
.doc-footer-copy { font-size: 11px; color: rgba(255,255,255,0.22); margin-left: auto; }

/* ── Status badge ── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 100px;
}
.status-badge.green { background: hsl(145,50%,92%); color: hsl(145,50%,25%); }
.status-badge.gray  { background: var(--slate-100); color: var(--slate-500); }
.status-badge.red   { background: hsl(0,60%,95%); color: hsl(0,60%,35%); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.status-dot.green { background: var(--green-600); }
.status-dot.gray  { background: var(--slate-400); }
.status-dot.red   { background: var(--red-600); }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .doc-toc { display: none; }
  .doc-content { padding: 40px 40px 64px; }
}
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }
  .doc-sidebar { display: none; }
  .doc-content { margin-left: 0; padding: 28px 20px 56px; }
  .doc-footer { margin-left: 0; }
  .doc-nav-links { display: none; }
  .doc-card-grid { grid-template-columns: 1fr; }
  .doc-page-nav { flex-direction: column; }
  .doc-footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .doc-footer-copy { margin-left: 0; }
}