:root {
  --bg: #151515;
  --painel: #1d1d1d;
  --painel-2: #242424;
  --linha: #333;
  --texto: #ececec;
  --suave: #a3a3a3;
  --coral-bg: #74301a;
  --coral-borda: #d9805e;
  --coral: #f2a585;
  --roxo-bg: #3c3489;
  --roxo-borda: #7d74d6;
  --roxo: #cdc8ff;
  --ok: #7fcf9a;
  --erro: #ff8f8f;
  --raio: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--texto); font: 15px/1.55 Inter, system-ui, sans-serif; }
a { color: var(--roxo); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 12px; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

.botao {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 8px; border: 1px solid var(--roxo-borda);
  background: var(--roxo-bg); color: #fff; font-weight: 600; cursor: pointer;
}
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao.secundario { background: transparent; border-color: var(--linha); color: var(--texto); }
.botao.pequeno { white-space: nowrap; padding: 6px 12px; font-size: 13px; }

label { display: block; font-size: 13px; color: var(--suave); margin-bottom: 6px; }
input[type=text], input[type=password], select, textarea {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--linha); background: var(--painel-2);
}
textarea { resize: vertical; min-height: 90px; }
.campo { margin-bottom: 18px; }
.erro { color: var(--erro); margin-top: 12px; }

/* login */
.login { max-width: 360px; margin: 14vh auto 0; padding: 32px; background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); }
.login p { color: var(--suave); margin: 0 0 20px; }

/* layout */
.layout { display: grid; grid-template-columns: 290px 1fr; min-height: 100vh; }
.lateral { border-right: 1px solid var(--linha); padding: 20px 16px; display: flex; flex-direction: column; gap: 16px; }
.marca { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.marca strong { font-size: 17px; }
.lista { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.item { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--texto); border: 1px solid transparent; }
.item:hover { background: var(--painel); }
.item.ativo { background: var(--painel-2); border-color: var(--linha); }
.item .t { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .m { display: flex; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--suave); }
.principal { padding: 28px 32px 64px; max-width: 1200px; width: 100%; }
.sair { margin-top: auto; }

.etiqueta { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 12px; background: var(--painel-2); border: 1px solid var(--linha); color: var(--suave); }
.etiqueta.e-checkpoint { color: #ffd38a; border-color: #8a6a2a; }
.etiqueta.e-concluida { color: var(--ok); border-color: #3c7a52; }
.etiqueta.e-erro { color: var(--erro); border-color: #8a3a3a; }

/* nova sessão */
.cartao { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 24px; }
.nova { max-width: 720px; }
.nova p.ajuda { color: var(--suave); margin: 0 0 24px; }
.linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.intensidade { display: flex; gap: 8px; }
.intensidade button { flex: 1; padding: 9px 0; border-radius: 8px; border: 1px solid var(--linha); background: var(--painel-2); cursor: pointer; }
.intensidade button.sel { background: var(--coral-bg); border-color: var(--coral-borda); color: #fff; }

/* sessão */
.cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.cabecalho .sem { color: var(--suave); margin: 6px 0 0; }
.fases { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.fase { padding: 6px 12px; border-radius: 8px; font-size: 13px; border: 1px solid var(--linha); color: var(--suave); }
.fase.feita { color: var(--texto); }
.fase.atual { border-color: var(--roxo-borda); background: var(--roxo-bg); color: #fff; }
.fase.atual.alt { border-color: var(--coral-borda); background: var(--coral-bg); }
.registo { font-size: 13px; scrollbar-color: #444 transparent; color: var(--suave); background: var(--painel); border: 1px solid var(--linha); border-radius: 8px; padding: 12px 14px; margin-bottom: 24px; max-height: 140px; overflow-y: auto; }
.registo div { margin-bottom: 4px; }
.pulsar { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); margin-right: 8px; animation: p 1.2s infinite; }
@keyframes p { 50% { opacity: .2; } }

.separadores { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin-bottom: 20px; overflow-x: auto; }
.separadores button { padding: 10px 14px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--suave); cursor: pointer; white-space: nowrap; }
.separadores button.sel { color: var(--texto); border-bottom-color: var(--roxo-borda); }
.separadores button:disabled { opacity: .35; cursor: default; }

.md { line-height: 1.65; }
.md h1 { font-size: 20px; margin-top: 8px; }
.md h2 { font-size: 17px; margin-top: 28px; }
.md h3 { margin-top: 20px; }
.md p, .md ul, .md ol { margin: 0 0 14px; }
.md li { margin-bottom: 6px; }
.md table { border-collapse: collapse; width: 100%; margin: 12px 0 20px; font-size: 14px; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--linha); padding: 7px 10px; text-align: left; vertical-align: top; }
.md th { background: var(--painel-2); }
.md code { background: var(--painel-2); padding: 1px 5px; border-radius: 4px; }
.md pre { background: var(--painel-2); padding: 12px; border-radius: 8px; overflow-x: auto; }

/* barra de estado */
.estado { background: var(--painel); border: 1px solid var(--roxo-borda); border-radius: var(--raio); padding: 16px 18px; margin-bottom: 12px; }
.estado.alt { border-color: var(--coral-borda); }
.estado.com-erro { border-color: #8a3a3a; }
.estado-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.estado-quem { font-weight: 600; margin-bottom: 4px; }
.estado-oque { color: var(--suave); font-size: 14px; }
.estado-num { text-align: right; font-size: 13px; color: var(--suave); white-space: nowrap; display: flex; flex-direction: column; gap: 4px; }
.estado-num strong { color: var(--texto); font-weight: 600; }
.estado-barra { height: 6px; background: var(--painel-2); border-radius: 99px; overflow: hidden; }
.estado-barra span { display: block; height: 100%; background: var(--roxo-borda); border-radius: 99px; transition: width .6s ease; }
.estado.alt .estado-barra span { background: var(--coral-borda); }
.estado.com-erro .estado-barra span { background: #8a3a3a; }
.estado-sub { margin-top: 10px; font-size: 13px; color: var(--suave); }
.registo { scrollbar-color: #444 transparent; }
.registo::-webkit-scrollbar { width: 8px; }
.registo::-webkit-scrollbar-thumb { background: #444; border-radius: 8px; }
.registo::-webkit-scrollbar-track { background: transparent; }

/* divergência */
.colunas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.coluna { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.coluna header { background: var(--coral-bg); border-bottom: 1px solid var(--coral-borda); padding: 12px 14px; }
.coluna header strong { display: block; color: #fff; }
.coluna header span { font-size: 12px; color: var(--coral); }
.ideia { padding: 12px 14px; border-bottom: 1px solid var(--linha); font-size: 14px; }
.ideia b { color: var(--coral); margin-right: 6px; }
.ideia details { margin-top: 6px; font-size: 12px; color: var(--suave); }
.ideia details pre { white-space: pre-wrap; word-break: break-word; margin: 6px 0 0; }

/* checkpoint */
.checkpoint { border: 1px solid #8a6a2a; background: #221d12; border-radius: var(--raio); padding: 20px; margin-bottom: 28px; }
.checkpoint > p { color: var(--suave); margin: 0 0 18px; }
.finalistas { display: grid; gap: 12px; margin-bottom: 18px; }
.finalista { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; }
.finalista.dev { border-color: var(--roxo-borda); }
.finalista.desc { opacity: .55; }
.finalista h3 { margin-bottom: 8px; }
.finalista p { margin: 0 0 8px; font-size: 14px; }
.finalista .meta { color: var(--suave); font-size: 13px; }
.escolha { display: flex; gap: 8px; margin-top: 12px; }
.escolha button { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--linha); background: var(--painel-2); cursor: pointer; font-size: 13px; }
.escolha button.sel.d { background: var(--roxo-bg); border-color: var(--roxo-borda); color: #fff; }
.escolha button.sel.x { background: #3a1f1f; border-color: #8a3a3a; color: #fff; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

.vazio { color: var(--suave); padding: 40px 0; }

@media (max-width: 980px) {
  .colunas { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  .lateral { border-right: 0; border-bottom: 1px solid var(--linha); }
  .lista { max-height: 220px; }
  .principal { padding: 20px 16px 48px; }
  .colunas, .linha-2 { grid-template-columns: 1fr; }
  .cabecalho { flex-direction: column; }
}