* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: system-ui, sans-serif;
  background: #0f0f1e; color: #e0e0e0; padding: 16px;
}

/* Login */
.login-box {
  max-width: 320px; margin: 15vh auto; padding: 32px;
  background: #1a1a2e; border-radius: 12px; text-align: center;
}
.login-box h1 { margin-bottom: 24px; font-size: 1.5rem; }
.login-box input {
  width: 100%; padding: 12px; margin-bottom: 12px;
  background: #16213e; border: 1px solid #2a2a4a; border-radius: 8px;
  color: #e0e0e0; font-size: 1rem;
}
.login-box button {
  width: 100%; padding: 12px; background: #00b894; border: none;
  border-radius: 8px; color: #fff; font-size: 1rem; cursor: pointer;
}
.erro { color: #ff6b6b; margin-top: 12px; font-size: 0.9rem; }

/* Cabecalho */
header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #2a2a4a;
}
.status-leds { display: flex; gap: 20px; align-items: center; }
.led {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  margin-left: 4px; vertical-align: middle;
}
.led-on  { background: #00e676; box-shadow: 0 0 8px #00e676; }
.led-off { background: #ff5252; box-shadow: 0 0 8px #ff5252; }
.botao-link {
  color: #00b894; text-decoration: none; padding: 8px 16px;
  border: 1px solid #00b894; border-radius: 8px;
}

/* Controles */
.controles {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 16px; padding: 16px; background: #1a1a2e; border-radius: 12px;
}
.controles input {
  flex: 1; min-width: 240px; padding: 10px;
  background: #16213e; border: 1px solid #2a2a4a; border-radius: 8px; color: #e0e0e0;
}
.controles button {
  padding: 10px 20px; border: none; border-radius: 8px;
  color: #fff; cursor: pointer; font-size: 0.95rem;
}
#btn-iniciar { background: #00b894; }
#btn-pausar { background: #fdcb6e; color: #000; }
#btn-continuar { background: #74b9ff; color: #000; }
#btn-parar { background: #ff7675; }
button:disabled { opacity: 0.4; cursor: not-allowed; }
.estado {
  padding: 6px 14px; background: #16213e; border-radius: 20px;
  font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px;
}

/* Graficos */
.graficos {
  display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px;
}
.grafico {
  background: #1a1a2e; border-radius: 12px; padding: 8px; min-height: 340px;
}
@media (max-width: 900px) { .graficos { grid-template-columns: 1fr; } }

/* Logs */
.logs { background: #1a1a2e; border-radius: 12px; padding: 16px; }
.logs h3 { margin-bottom: 8px; font-size: 1rem; }
#painel-logs {
  max-height: 180px; overflow-y: auto; font-family: monospace;
  font-size: 0.8rem; color: #a0a0b0;
}
#painel-logs div { padding: 2px 0; border-bottom: 1px solid #16213e; }

/* Layout da analise: tres colunas */
.analise-layout {
  display: grid; grid-template-columns: 260px 1fr 260px; gap: 16px;
}
@media (max-width: 1100px) { .analise-layout { grid-template-columns: 1fr; } }

.lista-capturas, .ferramentas {
  background: #1a1a2e; border-radius: 12px; padding: 16px;
  max-height: 85vh; overflow-y: auto;
}
.item-captura {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px; margin-bottom: 6px; background: #16213e; border-radius: 8px;
  cursor: pointer;
}
.item-captura:hover { background: #1e2a4a; }
.item-captura small { color: #8080a0; font-size: 0.75rem; }
.btn-apagar {
  background: #ff5252; border: none; color: #fff; width: 24px; height: 24px;
  border-radius: 4px; cursor: pointer;
}

.area-graficos { display: flex; flex-direction: column; gap: 16px; }
.info-captura {
  background: #1a1a2e; padding: 12px 16px; border-radius: 8px; font-size: 0.95rem;
}
.tabela-bandas { background: #1a1a2e; border-radius: 12px; min-height: 300px; }

.ferramenta { margin-bottom: 12px; font-size: 0.9rem; }
.ferramenta .mini { width: 60px; padding: 4px; background: #16213e;
  border: 1px solid #2a2a4a; border-radius: 4px; color: #e0e0e0; }
.ferramentas hr { border: none; border-top: 1px solid #2a2a4a; margin: 16px 0; }
.btn-previa {
  width: 100%; padding: 10px; background: #74b9ff; border: none;
  border-radius: 8px; color: #000; cursor: pointer; margin-bottom: 16px;
}
.salvar-bloco input {
  width: 100%; padding: 10px; margin-bottom: 8px; background: #16213e;
  border: 1px solid #2a2a4a; border-radius: 8px; color: #e0e0e0;
}
.btn-salvar {
  width: 100%; padding: 10px; background: #00b894; border: none;
  border-radius: 8px; color: #fff; cursor: pointer;
}
.aviso { font-size: 0.75rem; color: #8080a0; margin-top: 8px; text-align: center; }