:root{
  --bg:#f4f6f9; --surface:#ffffff; --surface-2:#eef1f6;
  --text:#171b24; --text-muted:#626b7d; --border:#e2e6ed;
  --accent:#2f5bb7; --accent-soft:#e7edfa;
  --st-pending-bg:#eef0f4; --st-pending-fg:#5b6272;
  --st-progress-bg:#fff4e0; --st-progress-fg:#9a6400;
  --st-done-bg:#e6f6ec; --st-done-fg:#1c7a44;
  --st-error-bg:#fdeceb; --st-error-fg:#b3261e;
}
*{box-sizing:border-box;}
body{
  background:var(--bg); color:var(--text); margin:0;
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
code, .mono{ font-family:ui-monospace,"Cascadia Mono","Consolas",monospace; }

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; background:var(--surface); border-bottom:1px solid var(--border);
}
.topbar .brand{ font-weight:700; font-size:1.05rem; }
.topbar nav{ display:flex; gap:18px; font-size:0.92rem; }
.topbar .user{ font-size:0.85rem; color:var(--text-muted); }

.wrap{ max-width:1180px; margin:0 auto; padding:24px; }

.grid-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:22px; }
.stat-card{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px 18px; }
.stat-card .val{ font-size:1.6rem; font-weight:700; font-variant-numeric:tabular-nums; }
.stat-card .lbl{ font-size:0.78rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; }

.progress{ height:10px; background:var(--surface-2); border-radius:6px; overflow:hidden; margin-top:6px; }
.progress > div{ height:100%; background:var(--accent); }

.banner{ padding:12px 16px; border-radius:8px; font-size:0.9rem; margin-bottom:18px; border:1px solid; }
.banner.warn{ background:var(--st-progress-bg); border-color:#eddcae; color:var(--st-progress-fg); }
.banner.info{ background:var(--accent-soft); border-color:#c7d6f2; color:var(--accent); }

table{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
th, td{ text-align:left; padding:9px 12px; border-bottom:1px solid var(--border); font-size:0.88rem; }
th{ background:var(--surface-2); font-size:0.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); }
tr:last-child td{ border-bottom:none; }
td.num{ font-variant-numeric:tabular-nums; font-family:ui-monospace,monospace; }

.pill{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:0.76rem; font-weight:600; }
.pill.pendente{ background:var(--st-pending-bg); color:var(--st-pending-fg); }
.pill.criando, .pill.rodando{ background:var(--st-progress-bg); color:var(--st-progress-fg); }
.pill.criada, .pill.concluido{ background:var(--st-done-bg); color:var(--st-done-fg); }
.pill.erro{ background:var(--st-error-bg); color:var(--st-error-fg); }

.toolbar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; align-items:center; }
.toolbar input, .toolbar select{
  padding:7px 10px; border:1px solid var(--border); border-radius:6px; font-size:0.88rem; background:var(--surface);
}

.btn{ display:inline-block; padding:7px 14px; border-radius:6px; border:1px solid var(--border); background:var(--surface); cursor:pointer; font-size:0.85rem; }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

.logfeed{
  background:#12151c; color:#cdd3e2; border-radius:10px; padding:14px 16px;
  font-family:ui-monospace,"Cascadia Mono",monospace; font-size:0.82rem;
  height:480px; overflow-y:auto; white-space:pre-wrap; word-break:break-all;
}
.logfeed .line{ padding:1px 0; }
.logfeed .line.error{ color:#ff9a8f; }
.logfeed .line.warn{ color:#e6bd7c; }
.logfeed .meta{ color:#626b7d; margin-right:8px; }

.login-box{
  max-width:340px; margin:80px auto; background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:28px;
}
.login-box h1{ font-size:1.2rem; margin-top:0; }
.login-box input{ width:100%; padding:9px 10px; margin-bottom:12px; border:1px solid var(--border); border-radius:6px; }
.field-err{ color:var(--st-error-fg); font-size:0.85rem; margin-bottom:10px; }
