:root{
  --bg: #ffffff;
  --fg: #0f172a;
  --muted: #64748b;
  --card: #f8fafc;
  --border: #e2e8f0;
  --accent: #2563eb;
  --ring: rgba(37,99,235,.25);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220;
    --fg:#e5e7eb;
    --muted:#94a3b8;
    --card:#0f172a;
    --border:#1f2937;
    --accent:#60a5fa;
    --ring: rgba(96,165,250,.25);
  }
}

/* Layout básico */
body{
  margin:0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg); color: var(--fg);
}
.container{
  max-width: 880px; margin: 48px auto; padding: 0 20px;
}
header{
  margin-bottom: 24px;
}
header h1{
  margin:0 0 6px; font-size: clamp(26px, 4vw, 36px);
  letter-spacing: -.015em;
}
header p{ margin:0; color: var(--muted) }

/* Barra de busca */
.search-wrap{
  position: relative; margin: 18px 0 16px;
}
.search-wrap input[type="search"]{
  width:100%;
  appearance: none;
  border:1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  border-radius: 12px;
  padding: 14px 44px 14px 46px;
  font-size: 16px;
  outline: none;
  transition: border .15s ease, box-shadow .15s ease, background .15s ease;
}
.search-wrap input[type="search"]:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 6px var(--ring);
}
/* Ícone de lupa (SVG como background) */
.search-wrap .icon{
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; pointer-events: none;
  background: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%2364748b" viewBox="0 0 24 24"><path d="M21 20.3 16.7 16a8 8 0 1 0-1.4 1.4L20.3 21 21 20.3zM10 16a6 6 0 1 1 0-12 6 6 0 0 1 0 12z"/></svg>');
}
/* Botão de limpar (o X) */
.search-wrap .clear{
  position:absolute; right: 6px; top:50%; transform: translateY(-50%);
  border:0; background: transparent; padding: 8px; border-radius: 8px; cursor: pointer;
}
.search-wrap .clear:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.search-wrap .clear svg{ width:18px; height:18px; stroke: var(--muted); }

/* Meta (contador/atalhos) */
.meta{
  display:flex; gap:12px; align-items:center; justify-content: space-between;
  color: var(--muted); font-size: 14px; margin-bottom: 8px;
}
kbd{
  background: var(--card); border:1px solid var(--border); border-bottom-width: 2px; border-radius: 6px;
  padding: 2px 6px; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color: var(--muted);
}

/* Lista de FAQ */
.faq{
  display:flex; flex-direction: column; gap: 10px;
}
details.faq-item{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: 12px;
  padding: 2px 2px;
  transition: border .15s ease, background .15s ease;
}
details[open].faq-item{ border-color: var(--accent); }
summary{
  list-style: none; cursor: pointer; padding: 14px 18px; border-radius: 10px;
  outline: none;
}
summary::-webkit-details-marker{ display:none; }
.question{
  display:flex; align-items: center; gap:10px; font-weight: 600;
}
.chev{
  flex: none; transition: transform .2s ease; width: 18px; height: 18px;
  background: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="%2364748b" viewBox="0 0 24 24"><path d="M8.1 9.3 12 13.2l3.9-3.9 1.4 1.4L12 16 6.7 10.7z"/></svg>');
  opacity:.85;
}
details[open] .chev{ transform: rotate(180deg); }
.answer{
  padding: 0 18px 16px 46px; color: var(--muted);
}
.no-results{
  display: none; padding: 16px; border:1px dashed var(--border); border-radius: 12px; color: var(--muted);
  text-align: center; background: var(--card);
}
mark{
  background: color-mix(in oklab, var(--accent) 30%, transparent);
  color: inherit; padding: 0 .15em; border-radius: 4px;
}

/* Acessibilidade focos */
summary:focus-visible{
  box-shadow: 0 0 0 4px var(--ring);
}


/* --- Link da pergunta & feedback --- */
.copy-link{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.copy-link:hover{ background: var(--card); color: var(--fg); }
.copy-link:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* Destaque rápido ao navegar por hash */
.faq-item.flash{
  box-shadow: 0 0 0 4px var(--ring);
  border-color: var(--accent);
}

/* Toast simples */
#toast{
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: var(--fg);
  color: var(--bg);
  padding: 10px 14px;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  transform-origin: center;
}
#toast.show{ opacity: 1; }


/* --- Índice temático: flecha à direita e fechado por padrão --- */
.theme-block>summary{position:relative;padding-right:22px;}
.theme-block>summary::after{
  content:"▾"; /* seta para baixo */
  position:absolute; right:8px; top:50%; transform:translateY(-50%) rotate(-90deg);
  transition: transform .2s ease;
  color: var(--muted);
}
.theme-block[open]>summary::after{
  transform:translateY(-50%) rotate(0deg); /* seta aponta para baixo quando aberto */
}
/* manter índice fechado por padrão vem do HTML (sem atributo open) */


/* === Índice no rodapé + link curto no topo === */
.index-shortlink{margin:10px 0 6px;font-size:1.05rem;font-weight:600}
.index-shortlink a{text-decoration:none;border-bottom:1px dashed rgba(255,255,255,.35)}
.index-shortlink a:hover{opacity:.85}
/* Índice completo no fim da página com links amarelos */
#bottomIndex a{color:#facc15} /* amarelo */
#bottomIndex .theme-block>summary{color:#facc15}