:root {
  color-scheme: dark;
  --brand: #4f46e5;
  --brand-hover: #6366f1;
}

html {
  color-scheme: dark;
}

body {
  background-color: #09090b;
  color: #d4d4d8;
  -webkit-font-smoothing: antialiased;
}

.card {
  background: #101014;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.75rem;
}

.hover-card {
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.hover-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

.status-card.critical { border-color: rgba(239, 68, 68, 0.4); }
.status-card.warning { border-color: rgba(245, 158, 11, 0.4); }
.status-card.safe { border-color: rgba(16, 185, 129, 0.4); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.22rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.66rem;
  font-weight: 500;
  white-space: nowrap;
}

.pill .dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  flex-shrink: 0;
}

.pill-red { color: #fca5a5; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.22); }
.pill-red .dot-red { background: #ef4444; }
.pill-yellow { color: #fcd34d; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.22); }
.pill-yellow .dot-yellow { background: #f59e0b; }
.pill-green { color: #6ee7b7; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.22); }
.pill-green .dot-green { background: #10b981; }
.pill-gray { color: #cbd5e1; background: rgba(100, 116, 139, 0.1); border: 1px solid rgba(100, 116, 139, 0.25); }
.pill-gray .dot-gray { background: #94a3b8; }
.pill-orange { color: #fdba74; background: rgba(249, 115, 22, 0.1); border: 1px solid rgba(249, 115, 22, 0.22); }
.pill-orange .dot-orange { background: #f97316; }

.sev {
  padding: 0.14rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6rem;
  font-weight: 500;
}

.sev-critical { color: #fca5a5; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.28); }
.sev-high { color: #fdba74; background: rgba(249, 115, 22, 0.1); border: 1px solid rgba(249, 115, 22, 0.28); }
.sev-medium { color: #fde047; background: rgba(234, 179, 8, 0.1); border: 1px solid rgba(234, 179, 8, 0.28); }
.sev-low { color: #6ee7b7; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.24); }
.sev-unknown { color: #cbd5e1; background: rgba(100, 116, 139, 0.1); border: 1px solid rgba(100, 116, 139, 0.25); }

.sev-risk { color: #fca5a5; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.2); }

.vchip {
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 500;
  color: #a1a1aa;
  background: rgba(63, 63, 70, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.15s;
}
.vchip:hover { color: #e4e4e7; border-color: rgba(255, 255, 255, 0.2); }
.vchip.active { color: #a5b4fc; background: rgba(99, 102, 241, 0.14); border-color: rgba(99, 102, 241, 0.4); }
.vchip-critical { color: #fca5a5; }
.vchip-high { color: #fdba74; }
.vchip-medium { color: #fde047; }
.vchip-low { color: #6ee7b7; }

.cve-link {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  transition: filter 0.15s;
}
.cve-link:hover { filter: brightness(1.25); }
.cve-more { color: #a5b4fc; background: rgba(99, 102, 241, 0.12); border: 1px solid rgba(99, 102, 241, 0.35); }
.cve-more:hover { border-color: rgba(99, 102, 241, 0.6); }
.no-underline { text-decoration: none; }

kbd {
  font-family: inherit;
  padding: 0.05rem 0.35rem;
  border-radius: 0.3rem;
  background: rgba(63, 63, 70, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.7rem;
  color: #a1a1aa;
}

input:focus, button:focus {
  outline: none;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #09090b; }
::-webkit-scrollbar-thumb { background: rgba(113, 113, 122, 0.35); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(113, 113, 122, 0.6); }