:root { color-scheme: light dark; --bg:#fff; --fg:#1f2328; --mut:#6e7781; --bd:#d0d7de; --err:#cf222e; --warn:#9a6700; --dbg:#6e7781; --crit:#a40e26; --panel:#f6f8fa; }
@media (prefers-color-scheme: dark) { :root { --bg:#0d1117; --fg:#e6edf3; --mut:#8b949e; --bd:#30363d; --err:#ff7b72; --warn:#d29922; --dbg:#8b949e; --crit:#ff4d4d; --panel:#161b22; } }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font: 14px/1.4 system-ui, sans-serif; }
header { padding: 8px 12px; border-bottom: 1px solid var(--bd); background: var(--panel); }
.titulo { margin-bottom: 6px; }
.etiqueta { display: inline-block; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--bd); font-size: 12px; color: var(--mut); }
.controles { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
label { display: inline-flex; gap: 6px; align-items: center; color: var(--mut); font-size: 12px; }
select, input, button, .boton { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--bd); border-radius: 6px; padding: 4px 8px; text-decoration: none; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
button.activo { border-color: #1f883d; }
.aviso { padding: 8px 12px; background: #fff8c5; color: #4d2d00; border-bottom: 1px solid #d4a72c; }
pre { flex: 1; margin: 0; padding: 8px 12px; overflow: auto; white-space: pre-wrap; word-break: break-word; font: 12.5px/1.45 ui-monospace, Menlo, Consolas, monospace; }
.l { display: block; }
.l.DEBUG { color: var(--dbg); }
.l.WARNING { color: var(--warn); }
.l.ERROR { color: var(--err); }
.l.CRITICAL { color: var(--crit); font-weight: 600; }
footer { padding: 6px 12px; border-top: 1px solid var(--bd); color: var(--mut); font-size: 12px; }