* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 14px/1.5 system-ui, Segoe UI, sans-serif; background: #0f172a; color: #e2e8f0; }
h1 { margin: 0 0 4px; font-size: 20px; }
.muted { color: #94a3b8; }
.erro { color: #f87171; min-height: 18px; }
.center { max-width: 320px; margin: 12vh auto; }
.card { background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 20px; }
input, select, textarea, button { font: inherit; }
input, select, textarea {
  width: 100%; margin: 6px 0; padding: 8px 10px; border-radius: 7px;
  border: 1px solid #475569; background: #0f172a; color: #e2e8f0;
}
button {
  padding: 8px 14px; border-radius: 7px; border: 0; cursor: pointer;
  background: #2563eb; color: #fff; font-weight: 600;
}
button.ghost { background: transparent; border: 1px solid #475569; color: #e2e8f0; }
button.small { padding: 4px 8px; font-size: 12px; }
button.danger { background: #dc2626; }
header {
  display: flex; align-items: center; gap: 14px; padding: 10px 16px;
  background: #1e293b; border-bottom: 1px solid #334155;
}
header nav { display: flex; gap: 6px; }
header nav button { background: transparent; color: #cbd5e1; font-weight: 500; }
header nav button.ativo { background: #2563eb; color: #fff; }
.spacer { flex: 1; }
main { padding: 16px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #334155; }
th { color: #94a3b8; font-weight: 600; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #64748b; }
.dot.on { background: #22c55e; }
.toolbar { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
#modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; }
#modalBox { width: 420px; max-width: 92vw; }
code { background: #0f172a; padding: 2px 6px; border-radius: 5px; }