/* NEMESIS Console — Design à la wyssintelligence.com ("Tactical Precision")
   Mint-Primaer, dunkles Navy, scharfe Ecken, Space Grotesk Labels. */

:root{
  --bg:hsl(222 45% 10%);
  --bg2:hsl(225 30% 12%);
  --panel:hsl(222 35% 14%);
  --panel2:hsl(224 25% 17%);
  --surface3:hsl(222 15% 22%);
  --border:hsl(220 20% 20%);
  --border2:hsl(222 15% 27%);
  --text:hsl(210 40% 92%);
  --muted:hsl(220 15% 56%);
  --faint:hsl(220 12% 44%);

  --accent:hsl(157 100% 45%);      /* Mint = Primary (terra) */
  --accent2:hsl(157 100% 39%);
  --accent-ink:hsl(160 100% 7%);
  --nemesis:hsl(12 90% 58%);       /* NEMESIS-Produktfarbe */

  --crit:hsl(350 80% 55%);
  --high:hsl(12 90% 58%);
  --med:hsl(40 95% 55%);
  --low:hsl(195 100% 55%);
  --ok:hsl(157 100% 45%);

  --r:0px;            /* Tactical: scharfe Ecken */
  --r-pill:3px;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --label:"Space Grotesk","Inter",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.app{display:flex;min-height:100vh}
::selection{background:hsl(157 100% 45% / .25)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.mono{font-family:var(--mono)}
.label{font-family:var(--label);text-transform:uppercase;letter-spacing:.22em}

/* Scanline + Glow Hintergrund (Marke) */
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,hsl(157 100% 45% / .012) 2px,hsl(157 100% 45% / .012) 4px)}
.glow{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 800px 600px at 25% 30%,hsl(157 100% 45% / .05) 0%,transparent 70%)}

/* Logo-Marke */
.logo{display:flex;align-items:center;gap:11px}
.logo svg{width:28px;height:28px;flex-shrink:0}
.logo .wl b{font-family:var(--label);font-size:13px;letter-spacing:.2em;font-weight:700;display:block;line-height:1}
.logo .wl span{font-family:var(--label);font-size:9.5px;letter-spacing:.3em;color:var(--muted);display:block;margin-top:3px}

/* Sidebar */
aside{width:228px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;height:100vh;position:sticky;top:0;z-index:2}
.brand{padding:18px 18px 16px;border-bottom:1px solid var(--border)}
nav{padding:14px 10px;flex:1;overflow:auto}
.nav-label{font-family:var(--label);font-size:9.5px;letter-spacing:.24em;color:var(--faint);padding:12px 12px 7px}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;color:var(--muted);font-size:13.5px;font-weight:500;margin-bottom:2px;transition:.12s;border-left:2px solid transparent}
.nav-item:hover{background:var(--panel);color:var(--text)}
.nav-item.active{background:var(--panel);color:var(--text);border-left-color:var(--accent)}
.nav-item.active svg{color:var(--accent)}
.nav-item svg{width:17px;height:17px;flex-shrink:0;color:var(--faint)}
.nav-item .badge{margin-left:auto;font-size:10.5px;font-family:var(--mono);background:var(--panel2);border:1px solid var(--border2);border-radius:var(--r-pill);padding:1px 7px;color:var(--muted)}
.op{padding:12px 14px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px}
.op .av{width:30px;height:30px;border-radius:var(--r-pill);background:var(--panel2);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--accent);font-family:var(--mono)}
.op .nm{font-size:12.5px;font-weight:600}
.op .ro{font-size:11px;color:var(--muted)}
.op .lo{margin-left:auto;color:var(--faint);padding:6px}
.op .lo:hover{color:var(--crit)}
.op .lo svg{width:16px;height:16px}

/* Main */
main{flex:1;min-width:0;height:100vh;overflow:auto;position:relative;z-index:1}
.top{position:sticky;top:0;z-index:5;background:hsl(222 45% 10% / .86);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);padding:14px 26px;display:flex;align-items:center;gap:16px}
.top h1{font-family:var(--label);font-size:15px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.top .sub{font-size:12.5px;color:var(--muted)}
.top .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;padding:5px 11px;border-radius:var(--r-pill);border:1px solid var(--border2);background:var(--panel);color:var(--muted)}
.chip.mono{font-family:var(--mono)}
/* Statisch, bis ein echter Agent-Heartbeat anliegt. Dann Puls an echte Daten binden. */
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px hsl(157 100% 45% / .15)}
.wrap{padding:26px;max-width:1140px;position:relative}
.view{display:none}
.view.active{display:block;animation:fade .3s cubic-bezier(.16,1,.3,1)}
@keyframes fade{from{opacity:0;transform:translateY(8px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}

/* Generic */
.grid{display:grid;gap:16px}
.cols-4{grid-template-columns:repeat(4,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:1.4fr 1fr}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:18px}
.card h3{font-size:12.5px;font-weight:650;margin-bottom:14px;display:flex;align-items:center;gap:8px;font-family:var(--label);letter-spacing:.08em;text-transform:uppercase}
.card h3 .t{margin-left:auto;font-size:11px;font-weight:500;color:var(--muted);font-family:var(--sans);letter-spacing:0;text-transform:none}
.stat{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);opacity:.5}
.stat .k{font-size:11px;color:var(--muted);font-weight:500;font-family:var(--label);letter-spacing:.14em;text-transform:uppercase}
.stat .v{font-size:28px;font-weight:700;margin-top:10px;letter-spacing:-.02em;font-family:var(--mono)}
.stat .m{font-size:11.5px;margin-top:4px;color:var(--faint)}
.stat .v.crit{color:var(--crit)}
.stat.crit::before{background:var(--crit)}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600;padding:0 12px 10px;border-bottom:1px solid var(--border);font-family:var(--label)}
td{padding:12px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr{transition:.1s}
tbody tr:hover{background:var(--panel2)}
.sev{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--r-pill);font-family:var(--label);letter-spacing:.06em;text-transform:uppercase}
.sev::before{content:"";width:7px;height:7px}
.sev.crit{color:var(--crit);background:hsl(350 80% 55% / .12)}.sev.crit::before{background:var(--crit)}
.sev.high{color:var(--high);background:hsl(12 90% 58% / .12)}.sev.high::before{background:var(--high)}
.sev.med{color:var(--med);background:hsl(40 95% 55% / .12)}.sev.med::before{background:var(--med)}
.sev.low{color:var(--low);background:hsl(195 100% 55% / .12)}.sev.low::before{background:var(--low)}
.tag{font-size:11px;font-weight:500;padding:3px 9px;border-radius:var(--r-pill);border:1px solid var(--border2);color:var(--muted);font-family:var(--mono)}
.tag.ok{color:var(--ok);border-color:hsl(157 100% 45% / .35);background:hsl(157 100% 45% / .08)}
.tag.no{color:var(--high);border-color:hsl(12 90% 58% / .35);background:hsl(12 90% 58% / .08)}
.tag.run{color:var(--low);border-color:hsl(195 100% 55% / .35);background:hsl(195 100% 55% / .08)}

/* Form */
.field{margin-bottom:16px}
.field label{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-bottom:7px;font-family:var(--label);letter-spacing:.1em;text-transform:uppercase}
.field .hint{font-size:11px;color:var(--faint);font-weight:400;margin-left:6px;font-family:var(--sans);letter-spacing:0;text-transform:none}
input[type=text],input[type=password],input[type=datetime-local],textarea,select{width:100%;background:var(--bg);border:1px solid var(--border2);border-radius:var(--r);padding:10px 12px;color:var(--text);font-family:inherit;font-size:13.5px;transition:.12s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px hsl(157 100% 45% / .14)}
input::placeholder,textarea::placeholder{color:var(--faint)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:12.5px;padding:11px 16px;border-radius:var(--r);transition:.12s;font-family:var(--label);letter-spacing:.08em;text-transform:uppercase}
.btn:hover{background:var(--accent2)}
.btn.ghost{background:var(--panel2);color:var(--text);border:1px solid var(--border2)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn svg{width:15px;height:15px}
.check{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--border2);border-radius:var(--r);padding:12px 14px;cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--accent)}
.check .cl{font-size:13px}.check .cl b{font-weight:600}
.check .cl span{display:block;color:var(--muted);font-size:11.5px}

/* Discovery */
.disc{border:1px dashed var(--border2);border-radius:var(--r);padding:14px;background:var(--bg)}
.disc .hd{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.disc .hd .t{font-size:13px;font-weight:600;font-family:var(--label);letter-spacing:.06em;text-transform:uppercase}
.host{display:flex;align-items:center;gap:12px;padding:9px 10px;font-size:13px;transition:.1s;border-bottom:1px solid var(--border)}
.host:last-child{border-bottom:none}
.host:hover{background:var(--panel2)}
.host input{width:16px;height:16px;accent-color:var(--accent)}
.host .ip{font-family:var(--mono);font-size:12.5px;width:120px}
.host .os{color:var(--muted);font-size:12px;flex:1}
.host .svc{font-family:var(--mono);font-size:11px;color:var(--faint)}
.scan-line{height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);margin:12px 0;animation:scan 1.1s linear infinite;display:none}
@keyframes scan{0%{opacity:.2}50%{opacity:1}100%{opacity:.2}}

.prog{height:6px;background:var(--bg);border-radius:var(--r-pill);overflow:hidden}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));border-radius:var(--r-pill);transition:width .4s}
.mrow{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--border)}
.mrow:last-child{border:none}
.mrow .nm{width:180px;font-size:13px;font-weight:500}
.mrow .nm span{display:block;font-size:11px;color:var(--faint);font-weight:400;font-family:var(--mono)}
.mrow .pw{flex:1}
.mrow .pc{width:48px;text-align:right;font-size:12px;color:var(--muted);font-family:var(--mono)}

.feed{font-family:var(--mono);font-size:12px;line-height:1.95}
.feed .l{display:flex;gap:10px}
.feed .ts{color:var(--faint)}
.feed .tag2{color:var(--accent)}
.feed .crit{color:var(--crit)}
.feed .ok{color:var(--ok)}

.evid{display:flex;gap:12px;padding:12px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);margin-bottom:10px}
.evid .ic{width:34px;height:34px;border-radius:var(--r);background:var(--panel2);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent)}
.evid .ic svg{width:17px;height:17px}
.evid .bd{flex:1;min-width:0}
.evid .bd .t{font-size:13px;font-weight:600}
.evid .bd .d{font-size:12px;color:var(--muted);margin-top:2px}
.evid .bd .meta{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:6px}
.note{font-size:12px;color:var(--muted);background:hsl(157 100% 45% / .06);border:1px solid hsl(157 100% 45% / .2);border-radius:var(--r);padding:11px 13px;display:flex;gap:9px;align-items:flex-start}
.note svg{width:15px;height:15px;color:var(--accent);flex-shrink:0;margin-top:1px}

/* Report */
.report{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.report .rhd{padding:24px 26px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,hsl(157 100% 45% / .05),transparent)}
.report .rhd svg{width:34px;height:34px}
.report .rhd .rt{font-size:16px;font-weight:700;font-family:var(--label);letter-spacing:.04em;text-transform:uppercase}
.report .rhd .rs{font-size:12.5px;color:var(--muted)}
.report .rhd .score{margin-left:auto;text-align:right}
.report .rhd .score b{font-size:24px;color:var(--ok);font-family:var(--mono)}
.report .rbody{padding:24px 26px}
.rsec{margin-bottom:26px}
.rsec h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;font-weight:650;font-family:var(--label)}
.rsec p{font-size:13.5px;color:hsl(210 30% 82%);margin-bottom:8px}
.finding{border:1px solid var(--border);border-radius:var(--r);padding:16px;background:var(--panel)}
.finding .fh{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.finding .fh .ft{font-size:14.5px;font-weight:650}
.kv{display:grid;grid-template-columns:150px 1fr;gap:8px 16px;font-size:13px}
.kv .k{color:var(--muted);font-weight:500}
.kv .v{color:hsl(210 30% 84%)}
.path{display:flex;align-items:center;gap:0;flex-wrap:wrap;margin-top:6px}
.node{background:var(--panel2);border:1px solid var(--border2);border-radius:var(--r);padding:9px 13px;font-size:12.5px;font-weight:600;font-family:var(--mono)}
.node.crit{border-color:hsl(350 80% 55% / .45);color:var(--crit);background:hsl(350 80% 55% / .08)}
.arrow{color:var(--faint);padding:0 10px;font-family:var(--mono);font-size:13px}

/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;z-index:1}
.login-card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:34px 32px;position:relative}
.login-card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.login-logo{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:8px}
.login-logo svg{width:52px;height:52px}
.login-logo .wl b{font-family:var(--label);font-size:16px;letter-spacing:.26em;font-weight:700;display:block;text-align:center}
.login-logo .wl span{font-family:var(--label);font-size:10px;letter-spacing:.34em;color:var(--muted);display:block;text-align:center;margin-top:4px}
.login-sub{text-align:center;font-family:var(--label);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--nemesis);margin:14px 0 26px}
.login-err{background:hsl(350 80% 55% / .1);border:1px solid hsl(350 80% 55% / .35);color:var(--crit);font-size:12.5px;padding:10px 12px;border-radius:var(--r);margin-bottom:18px;display:flex;gap:8px;align-items:center}
.login-err svg{width:15px;height:15px;flex-shrink:0}
.login-foot{text-align:center;font-size:11px;color:var(--faint);margin-top:22px;font-family:var(--label);letter-spacing:.14em;text-transform:uppercase}

/* Mobile */
.menu-btn{display:none;width:34px;height:34px;align-items:center;justify-content:center;border-radius:var(--r);border:1px solid var(--border2);background:var(--panel)}
.menu-btn svg{width:18px;height:18px}
@media(max-width:860px){
  aside{position:fixed;left:-240px;transition:.2s;z-index:50}
  aside.open{left:0}
  .cols-4{grid-template-columns:1fr 1fr}.cols-3{grid-template-columns:1fr}.cols-2{grid-template-columns:1fr}
  .wrap{padding:18px}.top{padding:12px 16px}
  .menu-btn{display:flex}
}