/* SkillusTotal shared design system — used by index.html, admin.html (report.ts ships its own, token-matched copy
   since reports must stay a single self-contained file with no external script/stylesheet). */
:root{
  --bg:#08080a; --surface:#17171b; --surface-2:#1f1f24; --fg:#f2f2f2; --mut:#a7a7ae; --bd:#2a2a30;
  --ink:#0d0d10; --ink2:#17171b; --line-on-ink:#2a2a30;
  --ac:#ff4d00; --ac-ink:#190700; --ac-soft:#2b1408;
  --clean:#3fb871; --clean-soft:#102617; --sus:#e0a030; --sus-soft:#2e2412; --mal:#ff6a5e; --mal-soft:#301414;
  --critical:#ff6a5e; --high:#ff6a5e; --medium:#e0a030; --low:#7aa7ff; --info:#8a8a92;
  --shadow:none;
  --radius:0; --radius-sm:0;
  --font:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --head:'Rajdhani','Arial Narrow',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --cut:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:15px/1.55 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--head);font-weight:700;letter-spacing:-.01em}
a{color:var(--ac)}
code,pre{font-family:var(--mono)}
pre{white-space:pre-wrap;word-break:break-all;margin:0}
small{color:var(--mut)}
.mut{color:var(--mut)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* buttons */
button,select,input[type=text],input[type=password],input[type=number],input[type=file],textarea{
  font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--bd);border-radius:0;padding:9px 14px;
}
button{cursor:pointer;transition:background .12s,border-color .12s,transform .05s,box-shadow .12s}
button:active{transform:translateY(1px)}
button:disabled{opacity:.5;cursor:default;transform:none}
button:hover:not(:disabled){border-color:var(--mut)}
button.p{background:var(--ac);border-color:var(--ac);color:var(--ac-ink);font-weight:600}
button.p:hover:not(:disabled){filter:brightness(1.06)}
button.d{color:var(--mal);border-color:var(--mal-soft)}
button.d:hover:not(:disabled){background:var(--mal-soft)}
button.on,.tabs button.on{background:var(--ac);border-color:var(--ac);color:var(--ac-ink)}
input[type=text]:focus,input[type=password]:focus,input[type=number]:focus,select:focus,textarea:focus{outline:2px solid var(--ac);outline-offset:1px;border-color:transparent}

/* cards / surfaces */
.card{background:var(--surface);border:1px solid var(--bd);border-radius:0;padding:18px 20px;margin:0 0 16px;box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:16px}
.stat{background:var(--surface);border:1px solid var(--bd);border-radius:0;padding:14px 16px;box-shadow:var(--shadow)}
.stat b{font:700 34px/1.1 var(--head);display:block}

/* tables */
table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--bd);border-radius:0;overflow:hidden;box-shadow:var(--shadow)}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--bd);vertical-align:top}
tr:last-child td{border-bottom:none}
th{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;background:var(--surface-2)}
/* the one cut corner of the design: primary action cards */
.cut{clip-path:var(--cut)}
tr.l{cursor:pointer}
tr.l:hover td{background:var(--surface-2)}

/* badges / status pills — filled, so a verdict reads at a glance, not just colored text */
.v{display:inline-block;font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.04em;padding:3px 11px;border-radius:0;color:#0d0d10}
.v.clean{background:var(--clean)} .v.suspicious{background:var(--sus)} .v.malicious{background:var(--mal)}
.v.running,.v.error{background:var(--mut)}
.v.malicious,.v.suspicious{color:#0d0d10}
.sev{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 9px;border-radius:0;color:#0d0d10}
.sev.critical{background:var(--critical)} .sev.high{background:var(--high)} .sev.medium{background:var(--medium)}
.sev.low{background:var(--low)} .sev.info{background:var(--info)}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border:1px solid var(--bd);border-radius:0;font-size:12px;background:var(--surface-2)}
.badge .ok{color:var(--clean);font-weight:600} .badge .no{color:var(--mal);font-weight:600}

/* drop zone */
#drop{border:2px dashed var(--bd);border-radius:0;background:var(--surface);padding:40px 20px;text-align:center;transition:border-color .15s,background .15s}
#drop.over{border-color:var(--ac);background:var(--ac-soft)}

.tabs{display:flex;gap:6px;margin:12px 0;flex-wrap:wrap}
.tabs button{padding:6px 12px;font-size:13px}
label.f{display:block;margin:10px 0}
label.f span{display:block;font-size:12.5px;color:var(--mut);margin-bottom:4px}
label.f input[type=text],label.f input[type=password],label.f input[type=number],label.f select{width:min(100%,420px)}