:root{
  --paper:#F1F3EE;
  --panel:#FFFFFF;
  --ink:#182019;
  --steel:#56635C;
  --steel-2:#8A948C;
  --line:#D7DBD0;
  --line-strong:#C3C9BC;
  --critical:#B3401A;
  --critical-bg:#F7E4DB;
  --high:#A9781A;
  --high-bg:#F5EBD3;
  --medium:#3E6E8E;
  --medium-bg:#DFEAF0;
  --clean:#3F7A54;
  --clean-bg:#E1EDE3;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Space Grotesk',sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;text-decoration:none;}

.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh;}

/* ---------- Sidebar ---------- */
.sidebar{
  background:var(--ink);
  color:var(--paper);
  padding:28px 22px;
  display:flex;
  flex-direction:column;
  gap:36px;
}
.brand{display:flex;flex-direction:column;gap:4px;}
.brand .mark{
  width:34px;height:34px;
  border:1.5px solid rgba(241,243,238,0.5);
  display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;font-weight:600;
  margin-bottom:10px;
}
.brand .name{font-size:16.5px;font-weight:600;letter-spacing:0.01em;}
.brand .sub{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:rgba(241,243,238,0.55);}

nav{display:flex;flex-direction:column;gap:2px;}
.nav-group-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;color:rgba(241,243,238,0.4);
  margin:16px 0 6px 10px;
}
.nav-group-label:first-child{margin-top:0;}
nav a{
  font-size:14px;
  padding:8px 10px;
  border-radius:3px;
  color:rgba(241,243,238,0.72);
  display:flex;align-items:center;justify-content:space-between;
}
nav a:hover{background:rgba(241,243,238,0.06);color:var(--paper);}
nav a.active{background:rgba(241,243,238,0.1);color:var(--paper);font-weight:500;}
nav a .count{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:rgba(241,243,238,0.4);}
nav a.active .count{color:var(--critical-bg);}
nav a.alert-count{color:#E8B4A0;}

.sidebar-foot{
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid rgba(241,243,238,0.12);
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;color:rgba(241,243,238,0.45);
  line-height:1.6;
}
.sidebar-foot form{margin-top:8px;}
.sidebar-foot button{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;color:rgba(241,243,238,0.6);
  background:none;border:none;padding:0;cursor:pointer;text-decoration:underline;
}
.sidebar-foot .dot{display:inline-block;width:6px;height:6px;background:var(--clean);border-radius:50%;margin-right:6px;}

/* ---------- Main ---------- */
main{padding:30px 40px 60px;}

.topbar{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:28px;flex-wrap:wrap;gap:14px;
}
.topbar h1{font-size:22px;font-weight:600;}
.topbar .meta{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--steel);margin-top:4px;}
.btn{
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;font-weight:500;
  background:var(--ink);color:var(--paper);
  border:none;padding:11px 18px;
  cursor:pointer;
}
.btn:hover{background:#2A342B;}
.btn-outline{
  background:transparent;color:var(--ink);
  border:1px solid var(--line-strong);
}
.btn-outline:hover{border-color:var(--ink);}
.btn-danger{background:var(--critical);color:#fff;}
.btn-danger:hover{background:#8F3315;}
.actions{display:flex;gap:10px;flex-wrap:wrap;}

/* ---------- Flash / errors ---------- */
.flash{
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;
  padding:12px 16px;margin-bottom:20px;border-left:3px solid var(--clean);
  background:var(--clean-bg);color:#1F4A2C;
}
.flash.error{border-left-color:var(--critical);background:var(--critical-bg);color:#6E280F;}

/* ---------- Stat row ---------- */
.stats{
  display:grid;
  grid-template-columns:1.4fr repeat(5,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-bottom:26px;
}
.stat{background:var(--panel);padding:20px 22px;}
.stat .label{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--steel);margin-bottom:10px;}
.stat .num{font-size:30px;font-weight:600;line-height:1;}
.stat.hero{background:var(--ink);color:var(--paper);}
.stat.hero .label{color:rgba(241,243,238,0.55);}
.stat.hero .num{font-size:46px;color:#E8977A;}
.stat.hero .sub{font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(241,243,238,0.6);margin-top:8px;}

@media (max-width:980px){
  .app{grid-template-columns:1fr;}
  .sidebar{display:none;}
  .stats{grid-template-columns:repeat(2,1fr);}
}

/* ---------- Content grid ---------- */
.grid{display:grid;grid-template-columns:1.7fr 1fr;gap:24px;margin-bottom:26px;}
@media (max-width:980px){.grid{grid-template-columns:1fr;}}

.panel{background:var(--panel);border:1px solid var(--line);}
.panel-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;border-bottom:1px solid var(--line);
}
.panel-head h2{font-size:15px;font-weight:600;}
.panel-head .view-all{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--steel);}

/* Events / findings list */
.event{
  display:flex;gap:14px;align-items:flex-start;
  padding:14px 20px;
  border-bottom:1px solid var(--line);
  border-left:3px solid transparent;
}
.event:last-child{border-bottom:none;}
.event.sev-critical{border-left-color:var(--critical);}
.event.sev-high{border-left-color:var(--high);}
.event.sev-medium{border-left-color:var(--medium);}
.event.sev-low, .event.sev-info{border-left-color:var(--steel-2);}

.sev-pill{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:600;
  padding:3px 7px;
  white-space:nowrap;
  margin-top:2px;
}
.sev-pill.sev-critical{background:var(--critical-bg);color:var(--critical);}
.sev-pill.sev-high{background:var(--high-bg);color:var(--high);}
.sev-pill.sev-medium{background:var(--medium-bg);color:var(--medium);}
.sev-pill.sev-low, .sev-pill.sev-info{background:#EEF0EA;color:var(--steel);}

.event-body{flex:1;min-width:0;}
.event-title{font-size:13.5px;font-weight:500;margin-bottom:3px;}
.event-path{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--steel);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.event-time{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--steel-2);white-space:nowrap;margin-top:2px;}
.event-actions{display:flex;gap:8px;flex-shrink:0;}
.event-actions button{
  font-family:'IBM Plex Mono',monospace;font-size:11px;
  background:none;border:1px solid var(--line-strong);padding:5px 9px;cursor:pointer;
}
.event-actions button:hover{border-color:var(--ink);}
.event-actions button.danger{color:var(--critical);border-color:var(--critical-bg);}
.event-actions button.danger:hover{border-color:var(--critical);}

/* System health */
.health-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 20px;border-bottom:1px solid var(--line);
  font-size:13.5px;
}
.health-row:last-child{border-bottom:none;}
.health-status{
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;
  display:flex;align-items:center;gap:6px;
}
.health-status .dot{width:6px;height:6px;border-radius:50%;}
.health-status.ok .dot{background:var(--clean);}
.health-status.ok{color:var(--clean);}
.health-status.warn .dot{background:var(--high);}
.health-status.warn{color:var(--high);}
.health-status.off .dot{background:var(--steel-2);}
.health-status.off{color:var(--steel-2);}

/* Mini chart */
.chart-wrap{padding:18px 20px 20px;}
.chart-legend{display:flex;gap:16px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--steel);margin-bottom:12px;}
.chart-legend span{display:flex;align-items:center;gap:6px;}
.chart-legend .sw{width:9px;height:9px;}
.sw.bar{background:var(--line-strong);}
.sw.line{background:var(--critical);}

/* Tables */
table{width:100%;border-collapse:collapse;}
thead th{
  text-align:left;font-family:'IBM Plex Mono',monospace;
  font-size:11px;color:var(--steel);font-weight:500;
  padding:12px 20px;border-bottom:1px solid var(--line);
}
tbody td{
  padding:13px 20px;border-bottom:1px solid var(--line);
  font-size:13.5px;vertical-align:middle;
}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:#FAFAF8;}
.cell-domain{font-weight:500;}
.cell-path{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--steel);}
.platform-tag{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  border:1px solid var(--line-strong);padding:2px 6px;color:var(--steel);
}
.status-tag{font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:500;display:flex;align-items:center;gap:6px;}
.status-tag .dot{width:6px;height:6px;border-radius:50%;}
.status-tag.clean, .status-tag.never_scanned{color:var(--steel);} .status-tag.clean .dot, .status-tag.never_scanned .dot{background:var(--steel-2);}
.status-tag.infected{color:var(--critical);} .status-tag.infected .dot{background:var(--critical);}
.status-tag.suspicious{color:var(--high);} .status-tag.suspicious .dot{background:var(--high);}
.status-tag.error{color:var(--critical);} .status-tag.error .dot{background:var(--critical);}

/* Filter bar */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.filters select, .filters input{
  font-family:'IBM Plex Mono',monospace;font-size:12px;
  border:1px solid var(--line-strong);background:var(--panel);
  padding:8px 10px;color:var(--ink);
}

/* Empty state */
.empty{padding:40px 20px;text-align:center;color:var(--steel);font-size:13.5px;}

/* Pagination */
.pagination{padding:16px 20px;border-top:1px solid var(--line);font-family:'IBM Plex Mono',monospace;font-size:12px;}
.pagination nav{flex-direction:row;gap:8px;}
.pagination a, .pagination span{padding:4px 8px;color:var(--steel);}
.pagination a:hover{color:var(--ink);}

footer.page-foot{margin-top:8px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--steel-2);text-align:center;}

/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--paper);}
.login-card{background:var(--panel);border:1px solid var(--line);padding:36px 34px;width:360px;}
.login-card .brand{color:var(--ink);margin-bottom:24px;}
.login-card .brand .mark{border-color:var(--line-strong);color:var(--ink);}
.login-card label{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--steel);display:block;margin-bottom:6px;}
.login-card input{
  width:100%;font-family:'IBM Plex Mono',monospace;font-size:13.5px;
  border:1px solid var(--line-strong);padding:10px 12px;margin-bottom:16px;background:var(--paper);
}
.login-card .error{color:var(--critical);font-size:12px;font-family:'IBM Plex Mono',monospace;margin:-10px 0 14px;}
.login-card .btn{width:100%;padding:12px;}