:root{
  --blue:#2563eb;
  --blue-dark:#1d4ed8;
  --blue-light:#eff6ff;
  --ink:#0f172a;
  --gray-900:#0f172a;
  --gray-700:#334155;
  --gray-500:#64748b;
  --gray-300:#cbd5e1;
  --gray-200:#e2e8f0;
  --gray-100:#f1f5f9;
  --gray-50:#f8fafc;
  --white:#ffffff;
  --green:#16a34a;
  --amber:#d97706;
  --red:#dc2626;
  --radius:10px;
  --sidebar-w:280px;
  --toc-w:220px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Inter',sans-serif;
  color:var(--gray-900);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}

/* ---------- Top bar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;height:60px;
  background:var(--white);
  border-bottom:1px solid var(--gray-200);
  display:flex;align-items:center;
  padding:0 24px;
  z-index:100;
  gap:16px;
}
.topbar .brand{
  display:flex;align-items:center;gap:10px;
  font-weight:800;font-size:17px;
  color:var(--gray-900);
  min-width:calc(var(--sidebar-w) - 24px);
}
.brand .logo-mark{
  width:28px;height:28px;border-radius:8px;
  background:linear-gradient(135deg,var(--blue),#60a5fa);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:14px;font-weight:800;
  flex-shrink:0;
}
.brand .tag{
  font-size:11px;font-weight:700;color:var(--blue);
  background:var(--blue-light);
  padding:2px 8px;border-radius:20px;
  margin-left:4px;
}
.menu-btn{
  display:none;
  background:none;border:none;cursor:pointer;
  width:36px;height:36px;border-radius:8px;
  align-items:center;justify-content:center;
  color:var(--gray-700);
}
.menu-btn:hover{background:var(--gray-100);}
.search-wrap{
  flex:1;max-width:520px;position:relative;
}
.search-wrap input{
  width:100%;
  padding:9px 14px 9px 38px;
  border:1px solid var(--gray-200);
  border-radius:8px;
  background:var(--gray-50);
  font-family:inherit;font-size:13.5px;
  color:var(--gray-900);
  outline:none;
  transition:border-color .15s, background .15s;
}
.search-wrap input:focus{border-color:var(--blue);background:var(--white);}
.search-wrap svg{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--gray-500);width:16px;height:16px;
}
.search-kbd{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-size:11px;color:var(--gray-500);
  border:1px solid var(--gray-200);
  padding:1px 6px;border-radius:5px;
  background:var(--white);
  font-family:'JetBrains Mono',monospace;
}
.topbar-right{
  margin-left:auto;display:flex;align-items:center;gap:8px;
}
.topbar-right a.pill{
  font-size:13px;font-weight:600;
  padding:8px 16px;border-radius:8px;
  color:var(--white);
  background:var(--blue);
  transition:background .15s;
}
.topbar-right a.pill:hover{background:var(--blue-dark);}
.topbar-right a.ghost{
  font-size:13px;font-weight:600;color:var(--gray-700);
  padding:8px 12px;border-radius:8px;
}
.topbar-right a.ghost:hover{background:var(--gray-100);}

/* ---------- Layout ---------- */
.layout{
  display:flex;
  max-width:1400px;
  margin:0 auto;
  padding-top:60px;
}

/* ---------- Sidebar ---------- */
.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  position:fixed;
  top:60px;left:calc(50% - 700px);
  height:calc(100vh - 60px);
  overflow-y:auto;
  border-right:1px solid var(--gray-200);
  padding:24px 16px 60px;
}
@media(max-width:1400px){
  .sidebar{left:0;}
}
.sidebar::-webkit-scrollbar{width:6px;}
.sidebar::-webkit-scrollbar-thumb{background:var(--gray-200);border-radius:6px;}

.nav-group{margin-bottom:22px;}
.nav-group-title{
  font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gray-500);
  padding:0 12px 8px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;
  border-radius:8px;
  font-size:13.5px;font-weight:500;
  color:var(--gray-700);
  cursor:pointer;
  transition:background .12s, color .12s;
  position:relative;
}
.nav-item svg{width:16px;height:16px;flex-shrink:0;color:var(--gray-500);}
.nav-item:hover{background:var(--gray-100);color:var(--gray-900);}
.nav-item.active{
  background:var(--blue-light);
  color:var(--blue);
  font-weight:600;
}
.nav-item.active svg{color:var(--blue);}
.nav-item.active::before{
  content:'';position:absolute;left:-16px;top:50%;transform:translateY(-50%);
  width:3px;height:18px;background:var(--blue);border-radius:0 3px 3px 0;
}

/* ---------- Main content ---------- */
.main{
  flex:1;
  min-width:0;
  margin-left:var(--sidebar-w);
  padding:48px 56px 120px;
  max-width:calc(100% - var(--sidebar-w) - var(--toc-w));
}
@media(max-width:1400px){
  .main{margin-left:var(--sidebar-w);}
}

.breadcrumb{
  font-size:12.5px;color:var(--gray-500);
  margin-bottom:18px;
  display:flex;align-items:center;gap:6px;
}
.breadcrumb span.sep{color:var(--gray-300);}
.breadcrumb span.current{color:var(--gray-700);font-weight:500;}

.doc-section{
  padding-top:12px;
  scroll-margin-top:80px;
}

.doc-eyebrow{
  font-size:12px;font-weight:700;color:var(--blue);
  letter-spacing:.05em;text-transform:uppercase;
  margin-bottom:10px;
}
.doc-section h1{
  font-size:32px;font-weight:800;letter-spacing:-.02em;
  margin-bottom:14px;color:var(--gray-900);
}
.doc-lede{
  font-size:16px;color:var(--gray-500);
  margin-bottom:32px;line-height:1.65;
  max-width:680px;
}
.doc-section h2{
  font-size:20px;font-weight:700;
  margin:32px 0 12px;color:var(--gray-900);
  scroll-margin-top:80px;
}
.doc-section p{
  font-size:15px;line-height:1.75;color:var(--gray-700);
  margin-bottom:16px;max-width:720px;
}
.doc-section ul,.doc-section ol{
  margin:0 0 20px 0;padding-left:22px;
  max-width:720px;
}
.doc-section li{
  font-size:15px;line-height:1.75;color:var(--gray-700);
  margin-bottom:8px;
}
.doc-section strong{color:var(--gray-900);font-weight:600;}
code.inline{
  font-family:'JetBrains Mono',monospace;
  font-size:.87em;background:var(--gray-100);
  color:var(--blue-dark);
  padding:2px 6px;border-radius:5px;
}

/* comparison table */
.doc-table{
  width:100%;border-collapse:collapse;
  margin:20px 0 28px;
  font-size:14px;
  border:1px solid var(--gray-200);
  border-radius:var(--radius);
  overflow:hidden;
}
.doc-table th{
  background:var(--gray-50);
  text-align:left;padding:12px 16px;
  font-weight:700;color:var(--gray-900);
  border-bottom:1px solid var(--gray-200);
}
.doc-table td{
  padding:12px 16px;
  border-bottom:1px solid var(--gray-100);
  color:var(--gray-700);
}
.doc-table tr:last-child td{border-bottom:none;}
.doc-table td:first-child{font-weight:600;color:var(--gray-900);}

/* code block */
.code-block{
  background:#0f172a;
  border-radius:var(--radius);
  margin:16px 0 24px;
  overflow:hidden;
  max-width:720px;
}
.code-block-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 16px;
  background:#1e293b;
  font-size:12px;color:#94a3b8;
  font-family:'JetBrains Mono',monospace;
}
.code-block-head .dots{display:flex;gap:5px;}
.code-block-head .dots span{width:8px;height:8px;border-radius:50%;background:#475569;}
.copy-btn{
  background:none;border:none;color:#94a3b8;cursor:pointer;
  font-size:12px;font-family:inherit;display:flex;align-items:center;gap:5px;
}
.copy-btn:hover{color:#e2e8f0;}
.code-block pre{
  padding:16px;overflow-x:auto;
  font-family:'JetBrains Mono',monospace;
  font-size:13px;line-height:1.7;color:#e2e8f0;
}
.code-block .c-cmt{color:#64748b;}
.code-block .c-str{color:#86efac;}
.code-block .c-blue{color:#7dd3fc;}

/* callouts */
.callout{
  display:flex;gap:12px;
  padding:16px 18px;
  border-radius:var(--radius);
  margin:20px 0 28px;
  max-width:720px;
  border:1px solid;
}
.callout svg{width:18px;height:18px;flex-shrink:0;margin-top:1px;}
.callout p{margin:0;font-size:14px;line-height:1.65;}
.callout-tip{background:var(--blue-light);border-color:#bfdbfe;color:#1e40af;}
.callout-tip svg{color:var(--blue);}
.callout-warn{background:#fffbeb;border-color:#fde68a;color:#92400e;}
.callout-warn svg{color:var(--amber);}
.callout-danger{background:#fef2f2;border-color:#fecaca;color:#991b1b;}
.callout-danger svg{color:var(--red);}

/* steps */
.step{
  display:flex;gap:16px;margin-bottom:22px;max-width:720px;
}
.step-num{
  width:28px;height:28px;border-radius:50%;
  background:var(--blue);color:#fff;
  font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:2px;
}
.step-body h3{font-size:15px;font-weight:700;margin-bottom:6px;color:var(--gray-900);}
.step-body p{margin-bottom:8px;}

/* feature grid (why zetrikcloud) */
.feature-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:16px;margin:20px 0 28px;max-width:720px;
}
@media(max-width:700px){.feature-grid{grid-template-columns:1fr;}}
.feature-card{
  border:1px solid var(--gray-200);
  border-radius:var(--radius);
  padding:18px;
}
.feature-card .ic{
  width:34px;height:34px;border-radius:8px;
  background:var(--blue-light);color:var(--blue);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:10px;
}
.feature-card .ic svg{width:18px;height:18px;}
.feature-card h4{font-size:14.5px;font-weight:700;margin-bottom:4px;color:var(--gray-900);}
.feature-card p{font-size:13.5px;margin:0;color:var(--gray-500);line-height:1.6;}

/* prev/next footer nav */
.doc-footer-nav{
  display:flex;justify-content:space-between;gap:16px;
  border-top:1px solid var(--gray-200);
  margin-top:56px;padding-top:24px;
  max-width:720px;
}
.foot-link{
  display:flex;flex-direction:column;gap:4px;
  padding:14px 18px;border:1px solid var(--gray-200);
  border-radius:var(--radius);
  min-width:180px;
  transition:border-color .15s;
}
.foot-link:hover{border-color:var(--blue);}
.foot-link.next{text-align:right;align-items:flex-end;}
.foot-link .lbl{font-size:11px;color:var(--gray-500);font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.foot-link .title{font-size:14px;font-weight:700;color:var(--gray-900);}

/* ---------- TOC (right rail) ---------- */
.toc{
  width:var(--toc-w);
  flex-shrink:0;
  position:fixed;
  top:60px;right:calc(50% - 700px);
  height:calc(100vh - 60px);
  overflow-y:auto;
  padding:48px 20px 60px 20px;
}
@media(max-width:1400px){.toc{display:none;}}
.toc-title{
  font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gray-500);
  margin-bottom:12px;
}
.toc a{
  display:block;font-size:13px;color:var(--gray-500);
  padding:6px 0 6px 12px;
  border-left:2px solid var(--gray-200);
  transition:color .12s, border-color .12s;
}
.toc a:hover{color:var(--gray-900);}
.toc a.active{color:var(--blue);border-color:var(--blue);font-weight:600;}

/* mobile */
@media(max-width:1024px){
  .menu-btn{display:flex;}
  .sidebar{
    left:-320px;
    width:280px;
    background:var(--white);
    z-index:99;
    transition:left .22s ease;
  }
  .sidebar.open{left:0;box-shadow:8px 0 30px rgba(0,0,0,.12);}
  .main{margin-left:0;max-width:100%;padding:32px 20px 100px;}
  .search-wrap{display:none;}
  .topbar-right .ghost{display:none;}
  .overlay{
    display:none;position:fixed;inset:0;top:60px;
    background:rgba(15,23,42,.35);z-index:98;
  }
  .overlay.show{display:block;}
}
@media(max-width:560px){
  .brand .brand-text{display:none;}
  .topbar{padding:0 14px;}
}