:root {
  --bg: #0f1420; --panel: #161d2e; --panel-2: #1c2437; --border: #2a3450;
  --text: #dce3f2; --muted: #8b96b0; --accent: #5b8cff; --ok: #3fb97f;
  --warn: #e0a63f; --danger: #e05c5c; --mono: "Cascadia Code", Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; }
body { background: var(--bg); color: var(--text); font: 14px/1.5 "Segoe UI", system-ui, sans-serif; }
.item { padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
.item:hover { background: var(--panel-2); }
.item .sig { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.item .meta { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.tag { font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.tag.nivel-ERROR, .tag.nivel-CRITICAL { color: var(--danger); border-color: var(--danger); }
.tag.nivel-WARNING { color: var(--warn); border-color: var(--warn); }
.tag.rascunho { color: var(--warn); border-color: var(--warn); }
.tag.ia-falhou { color: var(--danger); border-color: var(--danger); }
.tag.run-link { color: var(--accent); border-color: var(--accent); text-decoration: none; cursor: pointer; }
.tag.run-link:hover { text-decoration: underline; }
.tag.elegivel { color: var(--accent); border-color: var(--accent); }
.campo { margin-bottom: 14px; }
.campo label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
pre.sig-box {
  font-family: var(--mono); font-size: 13px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
textarea, input[type=text] {
  width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; font: 13px/1.5 var(--mono); resize: vertical;
}
textarea:focus, input:focus { outline: 1px solid var(--accent); }
#solucao { min-height: 160px; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
button {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 16px; cursor: pointer; font-size: 13px;
}
button:hover { border-color: var(--accent); }
button.primario { background: var(--accent); border-color: var(--accent); color: #fff; }
button.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
button.perigo { color: var(--danger); border-color: var(--danger); }
button.confirmando { background: var(--danger); border-color: var(--danger); color: #fff; }
button:disabled { opacity: .5; cursor: wait; }
.doc { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.doc .titulo { font-weight: 600; margin-bottom: 4px; }
.doc .conteudo { color: var(--muted); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
#prompt-box { position: relative; margin-top: 10px; }
#prompt {
  font-family: var(--mono); font-size: 12px; background: var(--bg);
  border: 1px dashed var(--accent); border-radius: 8px; padding: 12px;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow-y: auto;
}
#copiar { position: absolute; top: 8px; right: 8px; }
.grounded { font-size: 12px; margin: 8px 0; color: var(--muted); }
.doc .meta { display: flex; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.doc .rodape { color: var(--muted); font-size: 11px; margin-top: 6px; font-family: var(--mono); }
.doc .titulo-pr { font-size: 13px; margin: 4px 0; }
.doc .escopo { color: var(--muted); font-size: 12px; }
.tag.uso { color: var(--accent); border-color: var(--accent); }
details.conteudo { margin-top: 4px; }
details.conteudo summary { cursor: pointer; color: var(--accent); font-size: 12px; }
details.conteudo pre {
  font-family: var(--mono); font-size: 12px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 220px; overflow-y: auto;
}
.elegibilidade { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.elegibilidade select {
  max-width: 100%; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font: 13px var(--mono);
}
.preview-remediacao { margin-top: 8px; }
.preview-remediacao pre {
  font-family: var(--mono); font-size: 12px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow-y: auto;
}

/* --- shell: menu lateral + conteúdo --- */
#app { display: grid; grid-template-columns: 210px 1fr; min-height: 100vh; }
#menu { background: var(--panel); border-right: 1px solid var(--border); padding: 14px 12px; position: sticky; top: 0; align-self: start; height: 100vh; }
#menu .marca { font-size: 15px; font-weight: 600; margin-bottom: 16px; }
#menu .marca span { color: var(--accent); }
#menu nav { display: flex; flex-direction: column; gap: 4px; }
#menu nav a { display: flex; justify-content: space-between; align-items: center; color: var(--muted); text-decoration: none; padding: 8px 10px; border-radius: 8px; font-size: 14px; }
#menu nav a:hover { background: var(--panel-2); color: var(--text); }
#menu nav a.ativo { background: var(--panel-2); color: var(--text); border-left: 3px solid var(--accent); padding-left: 7px; }
#menu nav a b { color: var(--text); font-size: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
#conteudo { padding: 16px 20px; max-width: 1200px; }
#aviso { display: none; margin-bottom: 12px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--danger); color: var(--danger); }
#aviso.ok { border-color: var(--ok); color: var(--ok); }

/* --- painel inicial (3 cards) --- */
.cards-inicio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card-inicio { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 22px; cursor: pointer; text-align: center; }
.card-inicio:hover { border-color: var(--accent); }
.card-inicio.destaque { border-color: var(--accent); }
.card-inicio .num { font-size: 40px; font-weight: 800; }
.card-inicio.destaque .num { color: var(--accent); }
.card-inicio .rot { color: var(--muted); margin-top: 6px; }

/* --- filtro das listas --- */
.filtro { margin-bottom: 12px; }
.filtro input { width: 100%; }
.lista-area { display: flex; flex-direction: column; gap: 8px; }

.vazio { color: var(--muted); text-align: center; padding: 24px 0; }
.elegibilidade > .vazio, .preview-remediacao.vazio { text-align: left; padding: 0; }
.truncado { color: var(--warn); font-size: 12px; margin-bottom: 8px; }

/* --- detalhe do caso: duas colunas Ler | Agir --- */
.detalhe-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.coluna { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.coluna > .rot-col { font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 8px; }

/* --- detalhe do cache: origem, elegibilidade e solução --- */
.voltar { display: inline-block; color: var(--muted); text-decoration: none; font-size: 13px; margin-bottom: 12px; }
.voltar:hover { color: var(--accent); }
.detalhe-bloco { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 14px; }
.detalhe-bloco h3 { font-size: 13px; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; }
.detalhe-bloco .meta { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
.detalhe-bloco .rodape { color: var(--muted); font-size: 11px; margin-top: 8px; font-family: var(--mono); }
.link-modelo { color: var(--accent); text-decoration: none; font-size: 12px; }
.link-modelo:hover { text-decoration: underline; }
.conteudo-completo {
  font-family: var(--mono); font-size: 13px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px; padding: 12px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.editor {
  width: 100%; min-height: 220px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  font: 13px/1.5 var(--mono); resize: vertical;
}
.editor:focus { outline: 1px solid var(--accent); }

@media (max-width: 900px) {
  #app { grid-template-columns: 1fr; }
  #menu { position: static; height: auto; }
  #menu nav { flex-direction: row; flex-wrap: wrap; }
  .cards-inicio { grid-template-columns: 1fr; }
  .detalhe-cols { grid-template-columns: 1fr; }
}

/* --- login --- */
#app.deslogado #menu nav,
#app.deslogado #chip-usuario { display: none; }
.login-cartao { max-width: 340px; margin: 12vh auto 0; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 28px 26px; text-align: center; }
.login-titulo { font-size: 22px; margin-bottom: 4px; }
.login-titulo::first-line { color: var(--accent); }
.login-sub { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.btn-github { display: block; text-decoration: none; text-align: center; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px 16px; font-size: 14px; }
.btn-github:hover { border-color: var(--accent); }
.login-ou { color: var(--muted); font-size: 12px; margin: 12px 0; }
.login-linha { display: flex; gap: 8px; }
.login-nome { flex: 1; }
/* --- chip de usuário na sidebar --- */
.chip-usuario { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chip-nome { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.chip-sair { font-size: 12px; padding: 4px 10px; }