@font-face { font-family: Plex; font-weight: 400; src: url(fontes/ibm-plex-sans-latin-400-normal.woff2); }
@font-face { font-family: Plex; font-weight: 500; src: url(fontes/ibm-plex-sans-latin-500-normal.woff2); }
@font-face { font-family: Plex; font-weight: 600; src: url(fontes/ibm-plex-sans-latin-600-normal.woff2); }
@font-face { font-family: PlexMono; font-weight: 400; src: url(fontes/ibm-plex-mono-latin-400-normal.woff2); }
@font-face { font-family: PlexMono; font-weight: 500; src: url(fontes/ibm-plex-mono-latin-500-normal.woff2); }

:root {
  --fundo: #0a1210; --superficie: #0e1e1a; --linha: #17322b; --linha-forte: #2a4a44;
  --texto: #eaf3f0; --titulo: #f3fbf9; --suave: #9fb6ae; --apagado: #6e857d;
  --verde: #17b89a; --verde-claro: #3ecfbb; --ambar: #f2a65a; --vermelho: #f06a6a; --azul: #6aa9f0;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: Plex, system-ui, sans-serif; color: var(--texto); background: var(--fundo); min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(circle at 90% 0%, rgba(23,184,154,.14), transparent 40%);
}
.mono { font-family: PlexMono, ui-monospace, monospace; }
.pagina { max-width: 1180px; margin: 0 auto; padding: 28px 24px 56px; }

.topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; gap: 16px; }
.marca { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.marca small { font-weight: 400; color: var(--apagado); font-size: 13px; margin-left: 6px; }
.barras { display: flex; flex-direction: column; gap: 3px; width: 22px; }
.barras i { display: block; height: 4px; background: #fff; } .barras i:nth-child(1) { background: var(--verde-claro); }
.barras i:nth-child(2) { width: 68%; } .barras i:nth-child(3) { width: 40%; }
.topo-direita { display: flex; align-items: center; gap: 16px; color: var(--apagado); font-size: 13px; }
.botao-sair { background: none; border: 1px solid var(--linha-forte); color: var(--suave); padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.botao-sair:hover { border-color: var(--verde); color: var(--texto); }

/* faixa de veredito */
.faixa { display: flex; align-items: center; gap: 22px; padding: 26px 28px; border: 1px solid var(--linha-forte); background: var(--superficie); margin-bottom: 20px; }
.faixa .luz { width: 18px; height: 18px; border-radius: 50%; flex: none; background: var(--apagado); box-shadow: 0 0 0 6px rgba(110,133,125,.15); }
.faixa h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--titulo); }
.faixa p { color: var(--suave); margin-top: 4px; font-size: 15px; }
.faixa .app { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--apagado); margin-bottom: 8px; }
.faixa.ok { border-color: rgba(23,184,154,.5); } .faixa.ok .luz { background: var(--verde); box-shadow: 0 0 0 6px rgba(23,184,154,.2), 0 0 24px rgba(23,184,154,.5); }
.faixa.pendente { border-color: rgba(242,166,90,.55); background: #1c160c; } .faixa.pendente .luz { background: var(--ambar); box-shadow: 0 0 0 6px rgba(242,166,90,.2), 0 0 24px rgba(242,166,90,.45); }
.faixa.atualizando { border-color: rgba(106,169,240,.55); } .faixa.atualizando .luz { background: var(--azul); animation: pulsa 1.4s ease-in-out infinite; }
.faixa.falhou, .faixa.problema { border-color: rgba(240,106,106,.6); background: #1d1010; } .faixa.falhou .luz, .faixa.problema .luz { background: var(--vermelho); box-shadow: 0 0 0 6px rgba(240,106,106,.2), 0 0 24px rgba(240,106,106,.5); }
.faixa.aviso { border-color: rgba(242,166,90,.55); } .faixa.aviso .luz { background: var(--ambar); }
@keyframes pulsa { 50% { box-shadow: 0 0 0 12px rgba(106,169,240,.05), 0 0 30px rgba(106,169,240,.6); } }

/* versões */
.versoes { display: grid; grid-template-columns: 1fr 120px 1fr; align-items: stretch; margin-bottom: 20px; }
.versao { padding: 22px 24px; border: 1px solid var(--linha); background: var(--superficie); }
.versao .rotulo { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--apagado); margin-bottom: 12px; }
.versao .hash { font-size: 30px; font-weight: 500; color: var(--verde-claro); letter-spacing: -0.02em; }
.versao .assunto { margin-top: 8px; color: var(--texto); font-size: 15px; line-height: 1.4; }
.versao .data { margin-top: 8px; color: var(--apagado); font-size: 13px; }
.ponte { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--apagado); text-align: center; padding: 0 8px; }
.ponte .seta { font-size: 28px; color: var(--verde-claro); }
.ponte.pendente .seta { color: var(--ambar); } .ponte.pendente { color: var(--ambar); }

.lista-commits { border: 1px solid var(--linha); background: var(--superficie); margin-bottom: 20px; }
.lista-commits h2 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); padding: 14px 20px; border-bottom: 1px solid var(--linha); font-weight: 500; }
.lista-commits h2 b { color: var(--ambar); font-weight: 600; }
.lista-commits ul { list-style: none; }
.lista-commits li { display: flex; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--linha); font-size: 14px; }
.lista-commits li:first-child { border-top: 0; }
.lista-commits li .h { color: var(--ambar); width: 64px; flex: none; }
.lista-commits.vazio li { color: var(--apagado); }
.lista-commits.dev h2 b { color: var(--azul); } .lista-commits.dev li .h { color: var(--azul); }

/* cartões pequenos */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }
.cartao { padding: 18px 20px; border: 1px solid var(--linha); background: var(--superficie); }
.cartao .rotulo { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--apagado); margin-bottom: 10px; }
.cartao .valor { font-size: 20px; font-weight: 500; color: var(--titulo); letter-spacing: -0.01em; }
.cartao .detalhe { margin-top: 6px; font-size: 13px; color: var(--suave); }
.ok-texto { color: var(--verde-claro); } .ruim-texto { color: var(--vermelho); } .aviso-texto { color: var(--ambar); }

/* containers */
.bloco { border: 1px solid var(--linha); background: var(--superficie); margin-bottom: 20px; }
.bloco > h2 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); padding: 14px 20px; border-bottom: 1px solid var(--linha); font-weight: 500; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 500; color: var(--apagado); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 10px 20px; }
td { padding: 12px 20px; border-top: 1px solid var(--linha); }
.ponto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; background: var(--apagado); }
.ponto.ok { background: var(--verde); } .ponto.ruim { background: var(--vermelho); } .ponto.aviso { background: var(--ambar); }

.log { padding: 16px 20px; font-size: 12.5px; line-height: 1.7; color: var(--suave); white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow: auto; }
.rodape { color: var(--apagado); font-size: 12px; text-align: center; margin-top: 8px; }
.escuro-aviso { padding: 12px 20px; font-size: 13px; color: var(--ambar); background: #1c160c; border: 1px solid rgba(242,166,90,.4); margin-bottom: 20px; }

@media (max-width: 760px) {
  .versoes { grid-template-columns: 1fr; } .ponte { flex-direction: row; padding: 14px; }
  .ponte .seta { transform: rotate(90deg); } .faixa h1 { font-size: 24px; } .pagina { padding: 18px 14px 40px; }
}

/* login */
.login { max-width: 380px; margin: 14vh auto 0; padding: 34px; border: 1px solid var(--linha-forte); background: var(--superficie); }
.login h1 { font-size: 22px; font-weight: 600; margin: 18px 0 6px; } .login p { color: var(--suave); font-size: 14px; margin-bottom: 22px; }
.login label { display: block; font-size: 13px; color: var(--suave); margin-bottom: 8px; }
.login input { width: 100%; padding: 13px 14px; font: inherit; background: #08100e; color: var(--texto); border: 1px solid var(--linha-forte); }
.login input:focus { outline: 2px solid var(--verde); border-color: var(--verde); }
.login button { width: 100%; margin-top: 18px; padding: 13px; border: 0; background: var(--verde); color: #06231f; font: inherit; font-weight: 600; cursor: pointer; }
.login .erro { margin-top: 14px; color: var(--vermelho); font-size: 14px; min-height: 20px; }

/* botão de atualizar e confirmação */
.faixa-texto { flex: 1; min-width: 0; }
.botao-acao { background: var(--ambar); color: #1c160c; border: 0; padding: 14px 24px; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; flex: none; }
.botao-acao:hover { filter: brightness(1.08); } .botao-acao:disabled { opacity: .6; cursor: default; }
.pedido-enviado { color: var(--azul); font-size: 13px; max-width: 220px; text-align: right; flex: none; }
dialog.confirma { margin: auto; max-width: 520px; width: calc(100% - 32px); padding: 28px; background: var(--superficie); color: var(--texto); border: 1px solid var(--linha-forte); }
dialog.confirma::backdrop { background: rgba(4, 9, 8, .75); }
dialog.confirma h2 { font-size: 20px; font-weight: 600; color: var(--titulo); margin-bottom: 10px; }
dialog.confirma p { color: var(--suave); font-size: 14px; line-height: 1.5; }
dialog.confirma ul { list-style: none; margin-top: 14px; }
dialog.confirma .mudancas li { display: flex; gap: 12px; padding: 9px 12px; background: #1c160c; border: 1px solid rgba(242,166,90,.35); font-size: 13px; margin-top: 6px; }
dialog.confirma .mudancas .h { color: var(--ambar); flex: none; }
dialog.confirma .passos li { position: relative; padding-left: 22px; font-size: 13.5px; color: var(--suave); margin-top: 8px; }
dialog.confirma .passos li::before { content: "✓"; position: absolute; left: 0; color: var(--verde-claro); }
dialog.confirma .erro-confirma { color: var(--vermelho); min-height: 18px; margin-top: 12px; }
.botoes-confirma { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
@media (max-width: 760px) { .faixa { flex-wrap: wrap; } .faixa .botao-acao, .faixa .pedido-enviado { width: 100%; text-align: center; max-width: none; } .botoes-confirma { flex-direction: column-reverse; } .botoes-confirma button { width: 100%; } }