:root{
  --bg:#090b0d; --card:#14181b; --text:#e7f1ed; --muted:#8ca39a; --accent:#35d9c8;
  --good:#31d07d; --bad:#ff5a5f; --warn:#f5c451; --border:#2a3438;

  --font-mono: 'Courier New', monospace;
  --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  --chart-h:96px;
  --card-pad:14px;
  --grid-gap:12px;
  --big-font:20px;
  --label-font:11px;
}
[data-theme="light"]{
  --bg:#f0f0f0; --card:#ffffff; --text:#0a0a0a; --muted:#666666; --accent:#0080ff;
  --good:#008000; --bad:#ff0000; --warn:#ff8000; --border:#cccccc;
}

*, *::before, *::after { box-sizing: border-box; }
html,body{height:100%; margin:0; font-family: var(--font-main);}
body{background:var(--bg);color:var(--text);line-height:1.45;}

.app{display:flex; min-height:100vh;}
.sidebar{width:256px; background:#101417; border-right:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0;}
.sidebar-header{padding:18px 18px 16px; border-bottom:1px solid var(--border);}
.sidebar-header h1{margin:0; color:var(--accent); font-family:var(--font-mono); font-size:1.25rem; letter-spacing:0;}
.sidebar-header p{margin:4px 0 0; color:var(--muted); font-size:12px;}
.nav-list{list-style:none; padding:6px 0; margin:0; overflow-y:auto;}
.nav-list li{margin:0;}
.nav-list a{display:block; padding:10px 18px; color:var(--text); text-decoration:none; border-left:3px solid transparent; font-size:14px;}
.nav-list a:hover{background:rgba(255,255,255,0.04);}
.nav-list a.active{background:rgba(53,217,200,0.13); border-left-color:var(--accent); color:#f5fffd;}
.sidebar-footer{margin-top:auto; padding:14px 18px; border-top:1px solid var(--border);}
.status{display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted);}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:#888;margin-left:6px;flex:0 0 auto;}

.main-content{flex:1; min-width:0; overflow-y:auto; padding:20px;}

.page-header{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px;}
.page-header h2{margin:0; color:var(--accent); font-size:1.35rem; letter-spacing:0;}

.wrap{max-width:1240px;margin:0 auto;padding:8px 8px 36px}
header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.title{font-weight:700}
.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn,select,input,textarea{background:#101417;color:var(--text);border:1px solid var(--border);border-radius:6px;padding:7px 10px;font:inherit;max-width:100%;}
.btn,select{cursor:pointer;}
.btn:hover,.btn:focus,select:hover,select:focus,input:focus,textarea:focus{border-color:var(--accent);outline:none;}
.btn-small{padding:4px 8px;font-size:12px;}
select{padding:7px 8px}
.label{color:var(--muted);font-size:var(--label-font);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0;}
.card .label{color:var(--accent);margin-bottom:8px;display:flex;align-items:center;}

.grid{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(4,minmax(0,1fr))}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px;}
.chart-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:14px;margin-bottom:18px;}
.row-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:18px;}
.card,.stat-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:var(--card-pad);min-width:0;}
.stat-card{min-height:122px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;}
.stat-label{color:var(--muted);font-size:11px;font-family:var(--font-mono);letter-spacing:0;text-transform:uppercase;margin-bottom:6px;}
.stat-value{font-size:2rem;font-weight:800;color:var(--accent);margin:0 0 4px;font-family:var(--font-mono);letter-spacing:0;line-height:1.05;overflow-wrap:anywhere;}
.stat-value.alert-critical{color:var(--bad);}
.stat-desc,.alert-trend{color:var(--muted);font-size:12px;}
.alert-trend{color:var(--bad);font-family:var(--font-mono);}
.big{font-size:var(--big-font);font-weight:800;margin:4px 0;font-family:var(--font-mono);overflow-wrap:anywhere;}

.chart{height:var(--chart-h);position:relative;border-radius:6px;overflow:hidden;background:#0c1113;border:1px solid rgba(255,255,255,0.04);}
.chart-card{min-height:220px;}
.chart > canvas{width:100% !important;height:100% !important;display:block}
.chart[data-zoom="1"]{height:220px}
.donut-chart{height:160px;display:flex;align-items:center;justify-content:center;}
.donut-legend{display:flex;gap:14px;margin-top:10px;font-size:12px;color:var(--muted);font-family:var(--font-mono);flex-wrap:wrap;}
.legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;}
.legend-dot.high{background:#35d9c8;}
.legend-dot.critical{background:var(--bad);}
.legend-dot.medium{background:var(--warn);}
.legend-dot.low{background:#8d7cff;}
.legend-dot.info{background:#4aa8bf;}

.table{width:100%;border-collapse:collapse;font-size:12px;display:block;overflow-x:auto;white-space:nowrap;}
.table thead,.table tbody,.table tr{width:100%;}
.table th,.table td{padding:7px 8px;border-top:1px solid var(--border);vertical-align:middle;}
.table th{text-align:left;color:var(--muted);font-weight:600;font-family:var(--font-mono);text-transform:uppercase;font-size:11px;}
.table td.num{text-align:right;font-variant-numeric:tabular-nums}

.badge,.badge-role,.badge-state{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:3px 7px;border-radius:6px;border:1px solid var(--border);font-weight:600;margin:0 6px 4px 0;background:rgba(53,217,200,0.12);color:var(--accent);letter-spacing:0;}
.badge-role{background:#20262a;color:#fff;border-color:#3a454b;}
.badge-state.running{background:#073a28;color:#31d07d;border-color:#31d07d;}
.badge-state.suspended{background:#3f300a;color:#f5c451;border-color:#f5c451;}
.badge-state.sandboxed{background:#281c40;color:#b79aff;border-color:#8d7cff;}
.badge-state.terminated{background:#3d1418;color:#ff5a5f;border-color:#ff5a5f;}

.vocabulary-badge{display:inline-flex;align-items:center;white-space:nowrap;font-size:11px;font-weight:700;border-radius:6px;padding:3px 8px;border:1px solid transparent;letter-spacing:0;}
.severity-info{background:#17313a;color:#8ed9e8;border-color:#285563;}
.severity-low{background:#21352c;color:#86d7ac;border-color:#37634c;}
.severity-medium{background:#3f300a;color:#f5c451;border-color:#80651d;}
.severity-high{background:#45270d;color:#ffad66;border-color:#91521d;}
.severity-critical{background:#3d1418;color:#ff8b8f;border-color:#a53239;}
.status-open{background:#17313a;color:#8ed9e8;border-color:#285563;}
.status-investigating{background:#3f300a;color:#f5c451;border-color:#80651d;}
.status-waiting-for-approval{background:#281c40;color:#c7adff;border-color:#65449b;}
.status-approved{background:#073a28;color:#78e4ad;border-color:#238b5c;}
.status-rejected,.status-cancelled,.status-expired{background:#3d1418;color:#ff8b8f;border-color:#a53239;}
.status-consumed{background:#292d30;color:#b8c1c5;border-color:#505b60;}
.status-resolved{background:#073a28;color:#78e4ad;border-color:#238b5c;}
.status-dismissed{background:#292d30;color:#b8c1c5;border-color:#505b60;}
.status-failed{background:#3d1418;color:#ff8b8f;border-color:#a53239;}

.alert-list,.audit-list{min-height:220px;}
.alert-item,.audit-item{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);border-radius:6px;padding:8px 10px;margin-bottom:8px;font-size:13px;font-family:var(--font-mono);}
.alert-badge,.audit-badge{font-size:11px;font-weight:700;border-radius:6px;padding:2px 8px;margin-right:8px;text-transform:uppercase;letter-spacing:0;}
.alert-badge.high{background:#35d9c8;color:#071012;}
.alert-badge.critical{background:var(--bad);color:#fff;}
.alert-badge.medium{background:var(--warn);color:#071012;}
.alert-badge.low{background:#8d7cff;color:#fff;}
.alert-badge.info,.alert-badge.severity-info{background:#17313a;color:#8ed9e8;}
.alert-status{margin-left:auto;font-size:12px;border-radius:6px;padding:2px 8px;background:#222;color:#fff;font-family:var(--font-mono);}
.alert-status.open{background:var(--bad);color:#fff;}
.alert-status.investigating{background:var(--warn);color:#071012;}
.alert-status.resolved{background:var(--accent);color:#071012;}
.alert-status.waiting_for_approval,.alert-status.status-waiting-for-approval{background:#65449b;color:#fff;}
.alert-status.dismissed,.alert-status.status-dismissed{background:#505b60;color:#fff;}
.alert-status.failed,.alert-status.status-failed{background:var(--bad);color:#fff;}
.audit-badge.allowed{background:var(--accent);color:#071012;}
.audit-badge.flagged{background:var(--warn);color:#071012;}
.audit-badge.denied{background:var(--bad);color:#fff;}
.audit-info{margin-left:8px;font-size:12px;color:var(--muted);}
.audit-info.critical{color:var(--bad);}

.process-table th,.process-table td{font-family:var(--font-mono);font-size:13px;}
.process-table td .badge{margin-left:0;margin-right:6px;}
.process-table .actions{display:flex;gap:8px;align-items:center;justify-content:center;}
.process-table .progress-bar{display:inline-block;height:8px;border-radius:6px;background:#222;width:60px;margin-right:8px;vertical-align:middle;overflow:hidden;}
.process-table .progress{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent) 0%,var(--good) 100%);transition:width .25s ease;}
.process-table .progress.red{background:linear-gradient(90deg,var(--bad) 0%,var(--warn) 100%);}
.process-table .progress.yellow{background:linear-gradient(90deg,var(--warn) 0%,#fff176 100%);}
.process-table .threat{font-weight:bold;font-family:var(--font-mono);}
.process-table .threat.green{color:var(--good);}
.process-table .threat.yellow{color:var(--warn);}
.process-table .threat.red{color:var(--bad);}
.process-table .sandbox-badge{background:#20262a;color:var(--accent);border-radius:6px;padding:2px 8px;font-size:12px;margin-right:0;}
.action-btn{background:#101417;border:1px solid var(--border);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--accent);cursor:pointer;transition:background .2s,border .2s;}
.action-btn:hover{background:var(--accent);color:var(--bg);border-color:var(--accent);}

/* overlay zoom-all */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:1000}
.overlay[open], #configPanel {display:flex}
.modal{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px;max-width:1200px;width:92vw;max-height:88vh;overflow:auto}
.modal .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.modal .grid .chart{height:240px}
.help{color:var(--muted);font-size:12px;margin-top:8px}
.footer{color:var(--muted);font-size:12px;margin-top:10px}

#configPanel {position:fixed; inset:0; z-index:10001; background:rgba(0,0,0,0.7); justify-content:center; align-items:center;}
#configPanel .modal {width:720px; max-height:84vh;}

.tooltip-label{position:absolute; pointer-events:none; background:rgba(0,0,0,0.75); border:1px solid #2b9eb8; border-radius:4px; color:#9bffea; padding:2px 6px; font-size:11px; z-index:10002;}


/* Toast notifications */
.toast-container {
  position: fixed;
  top: auto;
  right: 20px;
  bottom: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  min-width: 300px;
  max-width: 400px;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: auto;
}
.toast.show {
  opacity: 1;
  transform: translateX(0);
}
.toast.hide {
  opacity: 0;
  transform: translateX(100%);
}

/* Login page styles */
.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(340px, 520px) 1fr;
}

.login-panel {
  background: #050608;
  color: #f4f4f6;
  padding: 56px clamp(28px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  border-right: 1px solid rgba(255,255,255,0.08);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
}

.brand-mark {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.brand-mark span {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  letter-spacing: 0.35em;
  color: #5fb5ff;
}

.brand-labels {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brand-name {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #e8f4ff;
}

.brand-subtitle {
  color: rgba(255,255,255,0.55);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}

.login-card {
  width: min(100%, 420px);
  margin-top: 48px;
}

.login-card h1 {
  margin: 0 0 6px;
  font-size: clamp(2.8rem, 4vw, 3.8rem);
  letter-spacing: -0.06em;
}

.login-intro {
  margin: 0 0 32px;
  color: rgba(255,255,255,0.72);
  line-height: 1.6;
  max-width: 360px;
}

.login-alert {
  margin-bottom: 20px;
}

.auth-options {
  display: grid;
  gap: 10px;
  margin: 0 0 28px;
}

.auth-option {
  display: block;
  color: rgba(255,255,255,0.76);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.035);
}

.auth-option strong {
  display: block;
  color: #ffffff;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.auth-option span {
  display: block;
  font-size: 0.84rem;
  line-height: 1.4;
}

.auth-option:hover,
.auth-option:focus,
.auth-option.active {
  border-color: rgba(130,181,255,0.65);
  background: rgba(59,92,255,0.14);
}

.login-field {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}

.login-field label {
  display: block;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.login-field input {
  width: 100%;
  min-height: 58px;
  border-radius: 24px;
  border: none;
  background: rgba(245, 248, 255, 0.95);
  color: #0a0a0a;
  padding: 0 22px;
  font-size: 1rem;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05), 0 6px 18px rgba(0,0,0,0.10);
}

.login-field input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08), 0 10px 28px rgba(0,0,0,0.14);
  background: #ffffff;
}

.login-field.username {
  position: relative;
}

.login-field.username::before {
  content: '✉';
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.55);
  font-size: 1rem;
}

.login-field.username input {
  padding-left: 44px;
}

.login-submit {
  width: 100%;
  border-radius: 24px;
  padding: 18px 24px;
  background: linear-gradient(135deg, #3b5cff, #2260ff);
  color: #fff;
  border: none;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.auth-switch {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px;
  color: rgba(255,255,255,0.58);
  font-size: 0.92rem;
}

.auth-switch a {
  color: #82b5ff;
  font-weight: 700;
  text-decoration: none;
}

.auth-switch a:hover,
.auth-switch a:focus {
  color: #ffffff;
  text-decoration: underline;
}

.login-submit:hover,
.login-submit:focus {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(40, 88, 255, 0.24);
}

.forgot-link {
  display: inline-block;
  margin-top: 18px;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  font-size: 0.92rem;
}

.login-footer {
  color: rgba(255,255,255,0.6);
  font-size: 0.95rem;
}

.login-footer a {
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-weight: 600;
}

.login-side {
  background: linear-gradient(180deg, #18191b 0%, #101113 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
}

.login-side::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.05), transparent 22%),
              linear-gradient(135deg, rgba(255,255,255,0.03), transparent 45%);
  pointer-events: none;
}

.login-side-hero {
  position: relative;
  z-index: 1;
  text-align: center;
}

.hero-logo {
  width: 180px;
  height: 180px;
  border-radius: 38px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 28px 72px rgba(0,0,0,0.45);
  margin: 0 auto 26px;
  position: relative;
}

.hero-logo::after {
  content: '';
  position: absolute;
  inset: 24px;
  border-radius: 20px;
  background: rgba(64, 120, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}

.hero-text {
  color: rgba(255,255,255,0.88);
  font-size: clamp(2.25rem, 4vw, 3rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
}

.login-side-copy,
.learn-more {
  display: none;
}

@media (max-width: 980px) {
  .login-page {
    grid-template-columns: 1fr;
  }

  .login-panel,
  .login-side {
    padding: 36px 28px;
  }

  .login-side {
    min-height: 420px;
  }
}

@media (max-width: 670px) {
  .login-panel {
    padding: 28px 18px;
  }

  .login-side {
    padding: 28px 18px;
  }

  .login-side-copy p {
    font-size: 2rem;
  }
}
.toast.critical,.toast.severity-critical {
  border-color: var(--bad);
  background: rgba(255, 68, 68, 0.1);
}
.toast.high,.toast.severity-high {
  border-color: var(--warn);
  background: rgba(255, 255, 0, 0.1);
}
.toast-content {
  flex: 1;
}
.toast-title {
  font-weight: bold;
  margin-bottom: 4px;
}
.toast-message {
  font-size: 14px;
  color: var(--text);
}
.toast-actions {
  margin-left: 12px;
}
.toast-btn {
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.toast-btn:hover {
  opacity: 0.8;
}

@media (max-width:1100px){
  .grid,.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .chart-row,.row-2col{grid-template-columns:1fr;}
  .grid > .card[style*="span 4"]{grid-column:1 / -1 !important;}
}

@media (max-width:760px){
  .app{display:block;}
  .sidebar{width:100%;max-height:42vh;border-right:0;border-bottom:1px solid var(--border);}
  .sidebar-header,.sidebar-footer{padding:12px 16px;}
  .nav-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:240px;}
  .nav-list a{padding:9px 12px;font-size:13px;border-left:0;border-bottom:1px solid rgba(255,255,255,0.04);}
  .nav-list a.active{border-left:0;box-shadow:inset 3px 0 0 var(--accent);}
  .main-content{padding:14px;}
  .page-header{display:block;}
  .page-header .label{display:block;margin-top:4px;}
  .grid,.stat-grid,.chart-row,.row-2col{grid-template-columns:1fr;}
  .grid > .card,.grid > .card[style*="span"]{grid-column:1 / -1 !important;}
  .stat-card{min-height:auto;}
  .toast-container{left:12px;right:12px;bottom:12px;}
  .toast{min-width:0;max-width:none;width:100%;}
}

.anomaly-heatmap-card {
  margin-bottom: 14px;
}
.heatmap {
  display: grid;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.heatmap-row,
.heatmap-hours {
  display: grid;
  grid-template-columns: 80px repeat(24, minmax(26px, 1fr));
  gap: 4px;
  align-items: center;
}
.heatmap-label,
.heatmap-hours span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}
.heat-cell {
  min-height: 26px;
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  background: rgba(255,255,255,0.03);
}
.heat-cell.critical[data-level="1"],
.heat-cell.critical[data-level="2"] { background: rgba(255,68,68,0.24); }
.heat-cell.critical[data-level="3"],
.heat-cell.critical[data-level="4"],
.heat-cell.critical[data-level="5"] { background: rgba(255,68,68,0.62); color:#fff; }
.heat-cell.high[data-level="1"],
.heat-cell.high[data-level="2"] { background: rgba(255,179,0,0.22); }
.heat-cell.high[data-level="3"],
.heat-cell.high[data-level="4"],
.heat-cell.high[data-level="5"] { background: rgba(255,179,0,0.58); color:#0a0a0a; }
.heat-cell.medium[data-level="1"],
.heat-cell.medium[data-level="2"],
.heat-cell.low[data-level="1"],
.heat-cell.low[data-level="2"],
.heat-cell.info[data-level="1"],
.heat-cell.info[data-level="2"] { background: rgba(0,224,198,0.16); }
.heat-cell.medium[data-level="3"],
.heat-cell.medium[data-level="4"],
.heat-cell.medium[data-level="5"],
.heat-cell.low[data-level="3"],
.heat-cell.low[data-level="4"],
.heat-cell.low[data-level="5"],
.heat-cell.info[data-level="3"],
.heat-cell.info[data-level="4"],
.heat-cell.info[data-level="5"] { background: rgba(0,224,198,0.46); color:#0a0a0a; }

.risk {
  display: inline-flex;
  min-width: 34px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-weight: 700;
}
.risk.critical { background: var(--bad); color: #fff; }
.risk.high { background: var(--warn); color: #0a0a0a; }
.risk.medium { background: rgba(0,255,255,0.18); color: var(--accent); }
.risk.severity-critical{background:var(--bad);color:#fff;}
.risk.severity-high{background:#45270d;color:#ffad66;}
.risk.severity-medium{background:#3f300a;color:#f5c451;}
.risk.severity-low{background:#21352c;color:#86d7ac;}
.risk.severity-info{background:#17313a;color:#8ed9e8;}

.local-machine-card {
  margin-bottom: 18px;
}
.local-machine-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.local-machine-title {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  color: var(--text);
  font-weight: 800;
  overflow-wrap: anywhere;
}
.local-machine-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.local-machine-grid div {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  min-width: 0;
}
.local-machine-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  margin-bottom: 5px;
}
.local-machine-grid strong {
  display: block;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.local-connection-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.connection-pill {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--accent);
  background: rgba(0,255,255,0.08);
  font-family: var(--font-mono);
  font-size: 11px;
}

.terminal-card {
  min-height: 560px;
  display: flex;
  flex-direction: column;
}
.terminal-output {
  flex: 1;
  min-height: 480px;
  padding: 12px;
  background: #050505;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: auto;
  white-space: pre-wrap;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.45;
}
.terminal-input-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.prompt,
.terminal-command { color: var(--accent); }
.terminal-status { color: var(--muted); }
.terminal-error { color: var(--bad); }
.terminal-input {
  background: #050505;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--font-mono);
}
.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.yaml-editor,
.yaml-view {
  box-sizing: border-box;
  font-family: var(--font-mono);
  white-space: pre-wrap;
}
.yaml-view {
  background: #050505;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  color: var(--text);
  overflow: auto;
}
.yaml-view.compact {
  max-height: 120px;
  margin: 8px 0 0;
  font-size: 11px;
}
.event-list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
}
.event-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  display: grid;
  gap: 4px;
}
.event-item span,
.event-item small {
  color: var(--muted);
}
.timeline {
  display: grid;
  gap: 10px;
  padding: 8px 0 0;
}
.timeline-item {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  border-left: 3px solid var(--border);
  padding: 8px 8px 8px 12px;
  background: rgba(255,255,255,0.02);
}
.timeline-item.anomaly { border-left-color: var(--bad); }
.timeline-item.network { border-left-color: var(--warn); }
.timeline-item.process { border-left-color: var(--accent); }
.timeline-time {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
}
.timeline-item p {
  margin: 4px 0 0;
  color: var(--muted);
}

@media (max-width: 760px) {
  .local-machine-grid {
    grid-template-columns: 1fr;
  }
  .local-machine-head {
    display: block;
  }
  .heatmap-row,
  .heatmap-hours {
    grid-template-columns: 70px repeat(24, 28px);
  }
  .terminal-card { min-height: 420px; }
  .terminal-output { min-height: 340px; }
}