:root{
  --bg:#f4f6f8;
  --card:#ffffff;
  --line:#d9d9d9;
  --txt:#111827;
  --muted:#6b7280;
  --good:#16a34a;
  --mid:#f59e0b;
  --bad:#dc2626;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family: Arial, sans-serif;
  background:var(--bg);
  color:var(--txt);
}
.wrap{max-width:1200px; margin:0 auto; padding:18px;}
h1{margin:8px 0 14px 0;}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px;
  margin:12px 0;
}

.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
input,select,button{
  padding:10px;
  font-size:14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}
input[type="text"]{width:520px; max-width:100%;}
button{cursor:pointer;}
button:hover{filter:brightness(0.98);}
button:disabled{opacity:.55; cursor:not-allowed;}

.muted{color:var(--muted); font-size:12px; margin-top:10px;}
.hr{height:1px; background:var(--line); margin:12px 0;}

.scoreBox{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  font-weight:800;
  font-size:22px;
  color:#fff;
}
.good{background:var(--good);}
.mid{background:var(--mid);}
.bad{background:var(--bad);}
.na{background:#4b5563;}

.kv{margin:6px 0;}
.kv b{display:inline-block; width:220px;}

.tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
.tag{display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; border:1px solid var(--line);}
.tag.critical{border-color:var(--bad); color:var(--bad);}
.tag.high{border-color:#ea580c; color:#ea580c;}
.tag.medium{border-color:var(--mid); color:#a86e00;}
.tag.low{border-color:var(--good); color:var(--good);}

table{border-collapse:collapse; width:100%; margin-top:12px;}
th,td{border:1px solid var(--line); padding:8px; font-size:13px; vertical-align:top;}
th{background:#f6f6f6; text-align:left;}
td a{color:#2563eb; text-decoration:none;}
td a:hover{text-decoration:underline;}

.json pre{
  background:#f7f7f7;
  border:1px solid #e5e5e5;
  padding:10px;
  overflow:auto;
}
.actions a{
  display:inline-block;
  margin-right:8px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  text-decoration:none;
  color:#111827;
}
.actions a:hover{background:#f3f4f6;}

/* =========================
   Progress (determinístico)
   ========================= */
.progressWrap{ margin-top:10px; }
.progressLabel{
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}
.progressBar{
  width:100%;
  height:10px;
  background:#eef2f7;
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
}
.progressFill{
  height:100%;
  width:0%;
  background:var(--mid);
  transition:width .25s ease;
}