:root{
  --kb-brand:#73a82c;
  --kb-text:#111827;
  --kb-muted:#64748b;
  --kb-bg:#f5f7f5;
  --kb-card:#ffffff;
  --kb-line:#e7edf3;
  --kb-line2:#eef2f7;
  --kb-shadow:0 14px 40px rgba(16,24,40,.06);
  --kb-radius:16px;

  --eng-accent:#2b6cb0;
  --eng-soft:#f7fbff;
}

/* Base */
.kb-wrap{width:100%;/* background:var(--kb-bg); *//* padding:22px 0 60px; */}
.kb-wrap *{ box-sizing:border-box; }
.kb-wrap a{ color:var(--kb-brand); text-decoration:none; font-weight:800; }
.kb-wrap a:hover{ text-decoration:underline; }

/* If system already has H1, avoid duplicate hero */
.kb-nohero .kb-hero{ display:none !important; }

/* Hide TOC when needed */
.kb-hide-toc .kb-toc{ display:none !important; }
/* (Optional) globally hide TOC if you prefer) */
/* .kb-toc{ display:none !important; } */

/* Article container */
.kb-article{margin:16px auto 0;}
.kb-article-inner{
  background:var(--kb-card);
  border:1px solid var(--kb-line2);
  border-radius:18px;
  box-shadow:var(--kb-shadow);
  padding:24px 22px;
}

/* ===== Engineering Overview ===== */
.eng-hero{
  border:1px solid var(--kb-line2);
  background:linear-gradient(180deg,#ffffff, #fbfdfb);
  border-radius:18px;
  padding:18px 16px;
  margin-bottom:14px;
}
.eng-kicker{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--kb-muted);
  font-weight:900;
}
.eng-lead{
  margin:10px 0 0;
  color:var(--kb-text);
  font-size:15px;
  line-height:1.85;
}
.eng-badges{ margin-top:12px; display:flex; flex-wrap:wrap; gap:10px; }
.eng-badge{
  display:inline-flex; align-items:center;
  padding:7px 10px;
  border:1px solid var(--kb-line2);
  border-radius:999px;
  background:#fff;
  font-size:12px;
  color:var(--kb-muted);
  font-weight:900;
}
.eng-metrics{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
}
.eng-metric{
  background:var(--eng-soft);
  border:1px solid rgba(43,108,176,.12);
  border-radius:14px;
  padding:12px 12px;
}
.eng-metric-k{ font-size:12px; color:var(--kb-muted); font-weight:900; }
.eng-metric-v{ margin-top:6px; font-size:13px; color:var(--kb-text); font-weight:950; }

/* ===== TOC ===== */
.kb-toc{
  margin:14px 0 18px;
  padding:14px 14px;
  border:1px solid var(--kb-line2);
  background:#fff;
  border-radius:16px;
}
.kb-toc-title{
  font-size:13px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--kb-muted);
  margin:0 0 10px;
  font-weight:950;
}
.kb-toc a{
  display:block;
  padding:10px 10px;
  border-radius:12px;
  background:#fbfdfb;
  border:1px solid var(--kb-line2);
  margin:8px 0;
  color:var(--kb-text);
  font-weight:900;
}
.kb-toc a:hover{
  background:rgba(115,168,44,.08);
  border-color:rgba(115,168,44,.25);
  text-decoration:none;
}
@media (min-width: 980px){
  .kb-toc{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:12px;
  }
  .kb-toc-title{ grid-column:1 / -1; }
}

/* ===== NEW Engineering Note (beautiful) ===== */
.eng-note{
  margin:16px 0 18px;
  border:1px solid rgba(115,168,44,.20);
  background:rgba(115,168,44,.07);
  border-radius:18px;
  padding:14px 14px;
  display:grid;
  grid-template-columns: 1fr 1.4fr;
  gap:14px;
  position:relative;
  overflow:hidden;
}
.eng-note:before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:6px;
  background:var(--kb-brand);
}
.eng-note-left{ padding-left:10px; }
.eng-note-title{
  font-weight:950;
  color:var(--kb-text);
  font-size:16px;
  margin-bottom:6px;
}
.eng-note-lead{
  color:var(--kb-muted);
  font-size:14px;
  line-height:1.85;
}
.eng-note-right{
  background:#fff;
  border:1px solid var(--kb-line2);
  border-radius:16px;
  padding:12px 12px;
}
.eng-note-item{
  display:flex;
  gap:10px;
  padding:10px 8px;
  border-top:1px dashed var(--kb-line2);
}
.eng-note-item:first-child{ border-top:0; padding-top:6px; }
.eng-dot{
  width:10px; height:10px;
  border-radius:999px;
  margin-top:5px;
  background:var(--kb-brand);
  flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(115,168,44,.12);
}
.eng-note-item b{
  display:block;
  color:var(--kb-text);
  font-weight:950;
  margin-bottom:3px;
  font-size:14px;
}
.eng-note-item p{
  margin:0;
  color:var(--kb-muted);
  font-size:13px;
  line-height:1.75;
}

/* ===== Typography ===== */
.kb-article h2{
  margin:22px 0 12px;
  font-size:22px; line-height:1.25;
  color:var(--kb-text);
  font-weight:950;
  padding-left:12px;
  position:relative;
}
.kb-article h2:before{
  content:"";
  position:absolute; left:0; top:50%;
  width:5px; height:16px;
  transform:translateY(-50%);
  background:var(--kb-brand);
  border-radius:3px;
}
.kb-article h3{
  margin:12px 0 8px;
  font-size:16px;
  color:var(--kb-text);
  font-weight:900;
}
.kb-article p{
  margin:0 0 12px;
  color:var(--kb-text);
  font-size:15px;
  line-height:1.95;
}
.kb-article ul, .kb-article ol{
  margin:0 0 12px 20px;
  color:var(--kb-text);
  font-size:15px;
  line-height:1.9;
}
.kb-article li{ margin:8px 0; }
.kb-article b, .kb-article strong{ font-weight:900; }

/* Callouts */
.kb-callout{
  margin:14px 0;
  padding:14px 14px;
  border:1px solid rgba(115,168,44,.25);
  background:rgba(115,168,44,.06);
  border-radius:16px;
  position:relative;
  overflow:hidden;
}
.kb-callout:before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:5px;
  background:var(--kb-brand);
}
.kb-callout b{ display:block; margin:0 0 6px 6px; color:var(--kb-text); }
.kb-callout p{ margin:0 0 0 6px; color:var(--kb-muted); line-height:1.85; }
.kb-callout-warn{
  border:1px solid rgba(245,158,11,.25);
  background:rgba(245,158,11,.10);
}
.kb-callout-warn:before{ background:#f59e0b; }

/* Engineering cards */
.eng-card-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  margin:14px 0 18px;
}
.eng-card{
  background:#fff;
  border:1px solid var(--kb-line2);
  border-radius:16px;
  padding:14px 14px;
  box-shadow:0 10px 26px rgba(17,24,39,.05);
}
.eng-mini{
  margin-top:10px;
  padding:10px 10px;
  border-radius:12px;
  background:#fbfdfb;
  border:1px dashed var(--kb-line2);
  color:var(--kb-muted);
  font-size:13px;
  line-height:1.8;
}
.eng-mini b{ color:var(--kb-text); }

/* Impact table */
.eng-impact-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:12px 0 16px;
  border:1px solid rgba(43,108,176,.18);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
.eng-impact-table th, .eng-impact-table td{
  padding:12px 12px;
  border-top:1px solid rgba(43,108,176,.12);
  font-size:14px;
  vertical-align:top;
}
.eng-impact-table thead th{
  border-top:0;
  background:linear-gradient(180deg, #eaf4ff, #f7fbff);
  color:#0f172a;
  font-weight:950;
  font-size:13px;
}
.eng-impact-table tbody tr:hover td{ background:#fbfdff; }

/* Code */
.kb-code{
  margin:12px 0 16px;
  padding:12px 12px;
  border:1px solid var(--kb-line2);
  background:#0b1220;
  color:#e5e7eb;
  border-radius:14px;
  overflow:auto;
  line-height:1.7;
}
.kb-code code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size:13px;
  white-space:pre;
}

/* Standard table */
.kb-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:12px 0 16px;
  border:1px solid var(--kb-line2);
  border-radius:16px;
  overflow:hidden;
}
.kb-table th, .kb-table td{
  padding:12px 12px;
  border-top:1px solid var(--kb-line2);
  font-size:14px;
  vertical-align:top;
}
.kb-table thead th{
  border-top:0;
  background:#f8fafc;
  color:var(--kb-text);
  font-weight:950;
  font-size:13px;
}
.kb-table tbody tr:hover td{ background:#fbfdfb; }

/* Checklist */
.eng-checklist{
  margin:16px 0 18px;
  border:1px solid var(--kb-line2);
  background:#fff;
  border-radius:18px;
  padding:14px 14px;
}
.eng-checklist-title{
  font-weight:950;
  color:var(--kb-text);
  margin:0 0 10px;
  font-size:16px;
}
.eng-checklist-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}
.eng-checklist-card{
  border:1px solid var(--kb-line2);
  border-radius:16px;
  padding:12px 12px;
  background:#fbfdfb;
}
.eng-checklist-head{
  font-weight:950;
  color:var(--kb-text);
  margin-bottom:8px;
}
.eng-checklist-card ul{ margin:0 0 0 18px; }
.eng-checklist-card li{ margin:7px 0; }

/* FAQ */
.kb-faq-item{
  border:1px solid var(--kb-line2);
  border-radius:16px;
  background:#fff;
  margin:10px 0;
  overflow:hidden;
}
.kb-faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:14px 14px;
  font-weight:950;
  color:var(--kb-text);
  position:relative;
  font-size:14px;
}
.kb-faq-item summary::-webkit-details-marker{ display:none; }
.kb-faq-item summary:after{
  content:"+";
  position:absolute; right:14px; top:50%;
  transform:translateY(-50%);
  font-weight:950;
  color:var(--kb-muted);
}
.kb-faq-item[open] summary:after{ content:"–"; }
.kb-faq-body{
  padding:0 14px 14px;
  color:var(--kb-muted);
  font-size:14px;
  line-height:1.9;
}

/* Responsive */
@media (max-width: 980px){
  .eng-metrics{ grid-template-columns:1fr; }
  .eng-card-grid{ grid-template-columns:1fr; }
  .eng-checklist-grid{ grid-template-columns:1fr; }
  .eng-note{ grid-template-columns:1fr; }
  .eng-note-left{ padding-left:6px; }
}
@media (max-width: 860px){
  .kb-article{ padding:0 12px; }
  .kb-article-inner{ padding:18px 14px; }
  .kb-article h2{ font-size:20px; }
  .kb-article p, .kb-article ul, .kb-article ol{ font-size:14px; }
}