:root{
  --bg:#0b0f13; --panel:#12181f; --text:#e7e9ee; --muted:#a9b0bb;
  --accent:#7aa2f7; --border:#223041; --table:#0f141a; --code:#0c1116;
  --ok:#8bd5a3; --warn:#f5a97f; --info:#7dc4e4; --chip:#0a121a;
  /* Cores para steps da sequência de carregamento */
  --step1:#f5b800; --step2:#ff6600; --step3:#c21807; --step4:#0078d7; --step5:#34a853;
  --step6:#6c63ff; --step7:#00bfa5; --step8:#d32f2f; --step9:#ff4081; --step10:#00c853;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:var(--bg); color:var(--text); line-height:1.7; font-size:16px; -webkit-font-smoothing:antialiased;
}
main{max-width:1080px;margin:0 auto;padding:40px 20px 120px}
header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(11,15,19,.96),rgba(11,15,19,.85) 60%,rgba(11,15,19,0));border-bottom:1px solid var(--border);padding:16px 20px}
h1{margin:0;font-size:22px}
h2{margin:0 0 14px;font-size:22px}
h3{margin:18px 0 10px;font-size:18px}
p{margin:10px 0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

section{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:28px;margin:22px 0;box-shadow:0 0 0 1px rgba(255,255,255,.02) inset}
.note,.warn,.good{border-radius:10px;padding:12px 14px;margin:12px 0}
.note{border-left:3px solid var(--info);background:#0d141b}
.warn{border-left:3px solid var(--warn);background:#14110d}
.good{border-left:3px solid var(--ok);background:#0d141b}

nav.toc{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px;margin:18px 0}
nav.toc ol{margin:0;padding-left:22px}

.footer-nav{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-top:18px}
.btn{
  appearance:none;border:1px solid var(--border);background:#0e1720;color:#cfd6e4;border-radius:10px;
  padding:10px 14px;font-size:14px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px
}
.btn:hover{filter:brightness(1.15)}
.btn.sec{background:#0b131a}
footer{color:var(--muted);text-align:center;padding:24px}

/* Caixas com cabeçalho e copiar */
.codebox{border:1px solid var(--border);background:var(--code);border-radius:12px;margin:16px 0 8px}
.codebox-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);background:#0b131a;border-top-left-radius:12px;border-top-right-radius:12px}
.codebox-title{font-size:12px;letter-spacing:.4px;color:var(--muted);text-transform:uppercase}
.codebox-btn{appearance:none;border:1px solid var(--border);background:#0e1720;color:#cfd6e4;border-radius:8px;padding:6px 10px;font-size:12px;cursor:pointer}
.codebox-btn:hover{filter:brightness(1.15)}
.codebox pre{margin:0;padding:14px 16px;overflow:auto;line-height:1.6;font-size:14px}

/* Mapas e árvores */
.mapbox{border:1px solid var(--border);background:#0d141b;border-radius:12px;margin:14px 0}
.mapbox-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);background:#0b131a;border-top-left-radius:12px;border-top-right-radius:12px}
.mapbox pre{margin:0;padding:16px 18px;white-space:pre;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:14px;line-height:1.6}

/* Tabelas */
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--table);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:14px 0}
th,td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:top;text-align:left}
th{background:#121821;color:#fff;font-weight:600}
tr:last-child td{border-bottom:none}

/* Grid de passos */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:14px 0 6px}
.step{border:1px solid var(--border);background:#0e151c;border-radius:12px;padding:12px}
.step h4{margin:0 0 8px;font-size:14px;color:#e9ecf5;letter-spacing:.2px}
.step p{margin:6px 0 0;color:#c7ced8;font-size:14px}

/* Links de imagens */
.img-link{
  display:inline-block;
  margin:14px 0;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  transition:all 0.3s ease;
}
.img-link:hover{
  transform:scale(1.02);
  box-shadow:0 4px 20px rgba(122,162,247,0.3);
}
.img-link img{
  display:block;
  max-width:100%;
  height:auto;
}

/* Steps coloridos para sequência de carregamento */
.step-container .step{
  border-left:6px solid;
  padding:20px 24px;
  margin-bottom:25px;
  border-radius:8px;
  background:var(--panel);
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
.step-container .step h2{
  margin-top:0;
  font-size:1.4rem;
  color:var(--text);
}
.step-container .step p{
  margin:10px 0;
  color:var(--muted);
}
.step-container .step ul{
  margin-top:10px;
  padding-left:20px;
  color:var(--text);
}
.step-container .step code{
  background:var(--code);
  padding:2px 6px;
  border-radius:4px;
  color:var(--warn);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.step-container .step:nth-child(1){border-color:var(--step1)}
.step-container .step:nth-child(2){border-color:var(--step2)}
.step-container .step:nth-child(3){border-color:var(--step3)}
.step-container .step:nth-child(4){border-color:var(--step4)}
.step-container .step:nth-child(5){border-color:var(--step5)}
.step-container .step:nth-child(6){border-color:var(--step6)}
.step-container .step:nth-child(7){border-color:var(--step7)}
.step-container .step:nth-child(8){border-color:var(--step8)}
.step-container .step:nth-child(9){border-color:var(--step9)}
.step-container .step:nth-child(10){border-color:var(--step10)}

/* Responsivo */
@media (max-width:540px){
  body{font-size:15px}
  .codebox pre,.mapbox pre{font-size:13px}
}