* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #0f172a;
  color: #e2e8f0;
}
.view { min-height: 100vh; }
/* :not([hidden]) — sem isso, o seletor de ID (mais específico que o estilo
   padrão do navegador para [hidden]) mantém o display:flex mesmo quando o JS
   marca a view como escondida, e as duas telas ficam empilhadas. */
#login-view:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.card {
  background: #1e293b;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  margin-bottom: 1.5rem;
}
#login-view .card { width: 100%; max-width: 360px; padding: 2rem; }
h1 { margin: 0 0 0.25rem; font-size: 1.5rem; }
h2 { margin: 0 0 1rem; font-size: 1.1rem; }
.subtitle { color: #94a3b8; margin: 0 0 1.5rem; font-size: 0.9rem; }
textarea {
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  border: 1px solid #334155;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 0.95rem;
  font-family: inherit;
}
.chip-checkbox { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0.3rem 0.8rem 0.3rem 0; font-size: 0.9rem; }
code { background: #0f172a; padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.85em; }
input, select {
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  border: 1px solid #334155;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 0.95rem;
}
#login-view input[type="password"] { width: 100%; margin-bottom: 1rem; }
button {
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  border: none;
  background: #2563eb;
  color: white;
  font-size: 0.95rem;
  cursor: pointer;
  white-space: nowrap;
}
button:hover { background: #1d4ed8; }
#login-view button { width: 100%; }
.error { color: #f87171; font-size: 0.85rem; min-height: 1.2rem; margin: 0.5rem 0 0; }
.muted { color: #64748b; font-size: 0.85rem; }

.inline-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.inline-form input { flex: 1; min-width: 160px; }

#dashboard-view header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  border-bottom: 1px solid #1e293b;
  gap: 1rem;
}
#dashboard-view header h1 { font-size: 1.25rem; white-space: nowrap; }
#tabs { display: flex; gap: 0.5rem; flex: 1; }
.tab-btn {
  background: transparent;
  color: #94a3b8;
  border: 1px solid #334155;
}
.tab-btn.active { background: #2563eb; color: white; border-color: #2563eb; }
#logout-btn { background: #334155; }
#logout-btn:hover { background: #475569; }
main { padding: 2rem; max-width: 960px; margin: 0 auto; }

table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid #334155; }
th { color: #94a3b8; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; }
td a { color: #60a5fa; }

.badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.badge-pending { background: #334155; color: #cbd5e1; }
.badge-running { background: #1e3a8a; color: #bfdbfe; }
.badge-done { background: #14532d; color: #bbf7d0; }
.badge-failed { background: #7f1d1d; color: #fecaca; }

.progress-bar { background: #334155; border-radius: 999px; height: 8px; width: 100%; max-width: 140px; overflow: hidden; }
.progress-bar-fill { background: #2563eb; height: 100%; }

.badge-warming { background: #78350f; color: #fde68a; }
.badge-active { background: #14532d; color: #bbf7d0; }
.badge-cooldown { background: #1e3a8a; color: #bfdbfe; }
.badge-banned, .badge-inactive { background: #334155; color: #cbd5e1; }

.action-btn { padding: 0.35rem 0.7rem; font-size: 0.82rem; margin-right: 0.3rem; background: #334155; }
.action-btn:hover { background: #475569; }

/* :not([hidden]) — mesmo cuidado do #login-view (ver comentário acima): um
   seletor de classe teria a mesma prioridade do [hidden] do navegador, e a
   ordem no arquivo decidiria — não dá pra confiar nisso. */
.modal-overlay:not([hidden]) {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal-box {
  background: #1e293b; padding: 1.5rem; border-radius: 12px; max-width: 360px; text-align: center;
}
.modal-box img { width: 100%; border-radius: 8px; margin: 1rem 0; background: white; }
.modal-box button { margin-top: 0.5rem; }

.conv-thread { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; margin: 0.8rem 0; }
.conv-msg { padding: 0.5rem 0.75rem; border-radius: 10px; max-width: 85%; font-size: 0.9rem; }
.conv-msg.in { background: #334155; align-self: flex-start; }
.conv-msg.out { background: #2563eb; align-self: flex-end; }
.conv-msg .conv-meta { font-size: 0.7rem; opacity: 0.7; margin-top: 0.2rem; }

.metrics-grid { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.metric-card { background: #0f172a; border: 1px solid #334155; border-radius: 10px; padding: 0.8rem 1rem; min-width: 130px; }
.metric-card .metric-value { font-size: 1.6rem; font-weight: 700; }
.metric-card .metric-label { font-size: 0.78rem; color: #94a3b8; margin-top: 0.2rem; }