:root {
  --bg: #0c0e12;
  --panel: #151922;
  --panel-2: #1c2230;
  --line: #2a3142;
  --text: #e8edf4;
  --muted: #9aa6b8;
  --accent: #ff5a00;
  --accent-2: #ff7a2e;
  --ok: #3ecf8e;
  --warn: #ff7a2e;
  --bad: #ef6b6b;
  --code: #0a0c10;
  --code-inline: #ff8a3d;
  --code-block: #ff7eb3;
  --link: #7ec8ff;
  --nav: #0c0e12;
  --nav-text: #e8edf4;
  --nav-muted: #9aa6b8;
  --nav-hover: #1c2230;
  --note-warn: #2a180e;
  --note-ok: #12261c;
  --note-bad: #2a1414;
  --note-info: #12202a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}

.wrap { display: flex; min-height: 100vh; }
nav.side {
  width: 280px;
  flex-shrink: 0;
  background: var(--nav);
  border-right: 1px solid var(--line);
  padding: 24px 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
}
nav.side .brand {
  display: block;
  margin: 0 0 10px;
  padding: 10px 8px;
  border-radius: 10px;
  background: #000;
  text-align: center;
}
nav.side .brand img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 auto;
}
nav.side p.sub { margin: 0 0 18px; color: var(--nav-muted); font-size: 12px; }
nav.side a {
  display: block;
  color: var(--nav-text);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
}
nav.side a:hover, nav.side a.active { background: var(--nav-hover); color: var(--accent); }
nav.side .sec { margin: 16px 0 6px; font-size: 11px; letter-spacing: .08em; color: var(--nav-muted); text-transform: uppercase; }

nav.side details.drop { margin: 4px 0 10px; }
nav.side details.drop summary {
  cursor: pointer;
  list-style: none;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
}
nav.side details.drop summary::-webkit-details-marker { display: none; }
nav.side details.drop summary::after { content: "▸"; float: right; color: var(--nav-muted); }
nav.side details.drop[open] summary::after { content: "▾"; }
nav.side details.drop summary:hover { background: var(--nav-hover); }
nav.side details.drop a { padding-left: 16px; font-size: 13px; }
nav.side details.drop a.menu-focus {
  border-left: 3px solid var(--accent);
  background: #1a140e;
  font-weight: 600;
}
nav.side details.drop a.menu-focus:hover,
nav.side details.drop a.menu-focus.active {
  background: #2a1c10;
  color: var(--accent-2);
}

main { flex: 1; max-width: 980px; padding: 36px 40px 80px; }
h1.page { font-size: 32px; margin: 0 0 8px; }
h2 { margin-top: 36px; font-size: 22px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
h3 { margin-top: 26px; font-size: 18px; color: var(--accent-2); }
p.lead { color: var(--muted); font-size: 17px; margin-top: 0; }
a { color: var(--link); }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 14px 0;
}
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--panel-2); color: var(--accent); }

a.menu-card {
  display: block;
  text-decoration: none;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 18px 20px;
  margin: 0 0 12px;
}
a.menu-card:hover { border-color: var(--accent); background: #1a140e; }
a.menu-card h3 { margin: 6px 0 8px; color: var(--accent-2); }
a.menu-card p { margin: 0; color: var(--muted); }
h2[id], h3[id] { scroll-margin-top: 20px; }

table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 14px; }
th, td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
th { background: var(--panel-2); color: var(--accent-2); }
td code, p code, li code {
  background: var(--code);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--code-inline);
}
pre {
  background: var(--code);
  color: var(--code-block);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  overflow: auto;
  font-size: 13px;
  line-height: 1.45;
}
.warn, .ok, .bad, .info {
  border-left: 4px solid var(--warn);
  background: var(--note-warn);
  padding: 10px 14px;
  border-radius: 6px;
  margin: 14px 0;
}
.ok { border-color: var(--ok); background: var(--note-ok); }
.bad { border-color: var(--bad); background: var(--note-bad); }
.info { border-color: var(--link); background: var(--note-info); }

.toc a { display: block; margin: 4px 0; }
footer { margin-top: 48px; color: var(--muted); font-size: 13px; }

@media (max-width: 860px) {
  .wrap { display: block; }
  nav.side { position: relative; height: auto; width: 100%; }
  main { padding: 22px 16px 60px; }
  .grid { grid-template-columns: 1fr; }
}

/* ===== v2 do modelo: busca, sumario, passos, teclas, copiar, mobile ===== */
nav.side .search {
  width: 100%;
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
}
nav.side .search:focus { outline: none; border-color: var(--accent); }
nav.side .no-result { display: none; color: var(--nav-muted); font-size: 12px; padding: 4px 10px; }

.crumbs { font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

.toc-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 18px 0 8px;
  font-size: 14px;
}
.toc-box strong { display: block; margin-bottom: 6px; color: var(--accent-2); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.toc-box a { display: inline-block; margin: 2px 14px 2px 0; text-decoration: none; }
.toc-box a:hover { text-decoration: underline; }

ol.steps { counter-reset: st; list-style: none; padding-left: 0; }
ol.steps > li {
  counter-increment: st;
  position: relative;
  padding: 10px 14px 10px 50px;
  margin: 8px 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
ol.steps > li::before {
  content: counter(st);
  position: absolute; left: 12px; top: 10px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}

kbd {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--panel-2);
  font-family: inherit;
  font-size: 13px;
}
.btn-name {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 5px;
  background: #2a1c10;
  color: var(--accent-2);
  border: 1px solid #4a2a12;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}

pre { position: relative; }
pre .copy {
  position: absolute; top: 6px; right: 6px;
  padding: 2px 8px; font-size: 11px;
  border-radius: 5px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--muted); cursor: pointer;
}
pre .copy:hover { color: var(--accent); border-color: var(--accent); }

.timeline { border-left: 2px solid var(--line); margin: 12px 0 18px 8px; padding-left: 16px; }
.timeline div { position: relative; margin: 8px 0; }
.timeline div::before {
  content: ""; position: absolute; left: -22px; top: 7px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
}
.timeline b { color: var(--accent-2); display: inline-block; min-width: 64px; }

.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; }
.pager a {
  flex: 1; text-decoration: none; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--text); font-size: 14px;
}
.pager a:hover { border-color: var(--accent); }
.pager a small { display: block; color: var(--muted); font-size: 12px; }
.pager a.next { text-align: right; }

.nav-toggle { display: none; }
@media (max-width: 860px) {
  .nav-toggle {
    display: block; width: 100%; padding: 12px 16px; border: 0;
    background: var(--nav); color: var(--accent); font-weight: 700; font-size: 15px;
    text-align: left; border-bottom: 1px solid var(--line); cursor: pointer;
  }
  nav.side { display: none; }
  nav.side.open { display: block; }
  .pager { flex-direction: column; }
  table { display: block; overflow-x: auto; }
}
@media print {
  nav.side, .nav-toggle, .pager, pre .copy { display: none !important; }
  body { background: #fff; color: #000; }
  main { max-width: none; padding: 0; }
}