:root { color-scheme: dark; font-family: system-ui, sans-serif; }
body { margin: 0; background: #0f1216; color: #e6e6e6; }
header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-bottom: 1px solid #222; }
nav a { color: #7fb0ff; margin-left: 14px; text-decoration: none; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; padding: 20px; }
.card { background: #171b21; border: 1px solid #232a33; border-radius: 10px; padding: 14px; max-width: 420px; margin: 20px auto; display: grid; gap: 8px; }
.row { display: flex; align-items: center; gap: 8px; }
.row .edit { margin-left: auto; color: #7fb0ff; font-size: 13px; }
.muted { color: #8a93a0; font-size: 13px; }
.err { color: #ff6b6b; }
.actions { display: flex; gap: 8px; margin-top: 6px; }
button { background: #2a3340; color: #e6e6e6; border: 1px solid #3a4756; border-radius: 6px; padding: 6px 10px; cursor: pointer; }
button:disabled { opacity: .4; cursor: default; }
input, select { background: #0f1216; color: #e6e6e6; border: 1px solid #2a3340; border-radius: 6px; padding: 8px; width: 100%; box-sizing: border-box; }
label { font-size: 13px; color: #b9c2cc; margin-top: 4px; font-weight: 500; }
.card .muted { margin-top: -2px; }

/* Formulario en 2 columnas: cada campo es un .field; .full ocupa el ancho completo. */
.form { max-width: 760px; grid-template-columns: 1fr 1fr; gap: 12px 18px; align-items: start; }
.form .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.form .field label { margin-top: 0; }
.form .field .muted { margin-top: 0; }
.form .full { grid-column: 1 / -1; }
.form h1.full { margin: 0 0 4px; }
.form .section { grid-column: 1 / -1; font-size: 14px; color: #e6e6e6; margin: 8px 0 0; padding-top: 10px; border-top: 1px solid #232a33; }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.ok { background: #35c26b; } .dot.warn { background: #e0b53f; } .dot.bad { background: #ff5a5a; } .dot.idle { background: #5a636e; }