:root { --bg:#f6f7f9; --fg:#1b1f24; --muted:#5b6570; --card:#fff; --line:#d9dee4; --accent:#b45309; --err:#b42318; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#14171a; --fg:#e8eaed; --muted:#9aa4af; --card:#1d2227; --line:#2e353c; --accent:#f59e0b; --err:#f97066; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui, sans-serif; }
.top { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--card); }
.brand { color:var(--fg); text-decoration:none; font-weight:700; }
.brand span { color:var(--accent); }
.inline { display:flex; gap:12px; align-items:center; margin:0; }
.who { color:var(--muted); }
main { max-width:1100px; margin:0 auto; padding:24px 16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:24px; }
.card.narrow { max-width:380px; margin:48px auto; }
h1 { margin:0 0 16px; font-size:1.4rem; }
label { display:block; margin-bottom:14px; color:var(--muted); font-size:.9rem; }
input { display:block; width:100%; margin-top:4px; padding:10px; font:inherit; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:6px; }
button { padding:10px 16px; font:inherit; color:#fff; background:var(--accent); border:0; border-radius:6px; cursor:pointer; }
button.link { padding:0; color:var(--accent); background:none; text-decoration:underline; }
.error { color:var(--err); margin:0 0 14px; }

/* Fase 3 */
nav { display:flex; gap:16px; margin-left:24px; flex:1; }
nav a { color:var(--muted); text-decoration:none; padding:4px 0; border-bottom:2px solid transparent; }
nav a.on { color:var(--fg); border-color:var(--accent); }
a { color:var(--accent); }
h2 { margin:0 0 10px; font-size:1.05rem; }
h3 { margin:14px 0 4px; font-size:.95rem; color:var(--muted); font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; margin-bottom:16px; }
.card + .card, .layout .card { margin-top:0; }
section.card { margin-bottom:16px; }
.muted { color:var(--muted); }
.big { font-size:1.3rem; font-weight:600; margin:0; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-weight:600; font-size:.85rem; }
.num { text-align:right; font-variant-numeric:tabular-nums; }
tr.dim td { opacity:.6; }
.badge { display:inline-block; padding:1px 8px; border-radius:99px; font-size:.78rem; font-weight:600; text-decoration:none; border:1px solid currentColor; }
.badge.ok, .badge.delivered { color:#16a34a; }
.badge.info, .badge.generated { color:#2563eb; }
.badge.bad { color:var(--err); }
.badge.off, .badge.inactive { color:var(--muted); }
.tabs { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
.tabs a { padding:4px 12px; border:1px solid var(--line); border-radius:99px; text-decoration:none; color:var(--muted); }
.tabs a.on { color:#fff; background:var(--accent); border-color:var(--accent); }
.filters { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:12px; }
.filters label { margin:0; }
select { display:block; margin-top:4px; padding:8px; font:inherit; color:var(--fg); background:var(--card); border:1px solid var(--line); border-radius:6px; }
.layout { display:grid; grid-template-columns:240px 1fr; gap:16px; align-items:start; }
@media (max-width:760px) { .layout { grid-template-columns:1fr; } }
.sitelist ul { list-style:none; margin:10px 0 0; padding:0; max-height:520px; overflow:auto; }
.sitelist li a, .sitelist li span { display:block; padding:5px 6px; border-radius:4px; text-decoration:none; color:var(--fg); }
.sitelist li.on a { background:var(--accent); color:#fff; }
.sitelist li.missing span { color:var(--muted); }
.sitelist small { display:block; color:var(--muted); font-size:.75rem; }
.sitelist li.on small { color:#fff; }
.toolbar { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.toolbar .btn { margin-left:auto; padding:6px 12px; border:1px solid var(--line); border-radius:6px; text-decoration:none; color:var(--fg); }
label.inl { display:inline-flex; align-items:center; gap:6px; margin:0; }
label.inl input { display:inline; width:auto; margin:0; }
progress { width:100%; }
.uplot { color:var(--muted); }
.layout.one { grid-template-columns:1fr; }

/* Fase 4 */
pre.log { margin:12px 0 0; padding:12px; max-height:70vh; overflow:auto; font:12px/1.45 ui-monospace, monospace; background:var(--bg); border:1px solid var(--line); border-radius:6px; white-space:pre-wrap; word-break:break-all; }
pre.log .err { color:var(--err); }
pre.log .warn { color:var(--accent); }
.toolbar .grow { flex:1; min-width:160px; margin:0; }
small.error { font-size:.78rem; }