* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0a0e17; color: #e0e6f0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.container { max-width: 1400px; margin: 0 auto; padding: 20px; }

header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid #1e293b; }
header h1 { font-size: 1.5rem; font-weight: 600; }
.shield { font-size: 1.4rem; }
.header-right { display: flex; align-items: center; gap: 16px; }
.meta { color: #64748b; font-size: 0.8rem; }
.btn-refresh { background: #1e293b; border: 1px solid #334155; color: #94a3b8; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; }
.btn-refresh:hover { background: #334155; color: #e2e8f0; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.kpi { background: linear-gradient(135deg, #111827 0%, #1e293b 100%); border: 1px solid #1e293b; border-radius: 12px; padding: 20px; text-align: center; }
.kpi .value { font-size: 2.2rem; font-weight: 700; margin: 4px 0; }
.kpi .label { font-size: 0.8rem; color: #64748b; text-transform: uppercase; letter-spacing: 1px; }
.kpi.green .value { color: #22c55e; }
.kpi.red .value { color: #ef4444; }
.kpi.blue .value { color: #3b82f6; }
.kpi.yellow .value { color: #eab308; }
.kpi.purple .value { color: #a78bfa; }

/* Cards */
.card { background: #111827; border: 1px solid #1e293b; border-radius: 12px; padding: 20px; margin-bottom: 20px; }
.card h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 16px; color: #cbd5e1; }

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th { text-align: left; padding: 10px 12px; color: #64748b; font-weight: 500; border-bottom: 1px solid #1e293b; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; }
td { padding: 10px 12px; border-bottom: 1px solid #0f172a; }
tr:hover td { background: #1e293b44; }

/* Status badges */
.badge { padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; display: inline-block; }
.badge-active { background: #052e16; color: #22c55e; border: 1px solid #16a34a33; }
.badge-disconnected { background: #2d0a0a; color: #ef4444; border: 1px solid #dc262633; }
.badge-pending { background: #422006; color: #f59e0b; border: 1px solid #d97706; }

/* SCA Grid */
.sca-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.sca-card { background: #0f172a; border: 1px solid #1e293b; border-radius: 10px; padding: 16px; }
.sca-card .agent-name { font-weight: 600; font-size: 0.95rem; margin-bottom: 10px; color: #e2e8f0; }
.sca-policy { margin-bottom: 8px; }
.sca-policy .policy-name { font-size: 0.78rem; color: #94a3b8; margin-bottom: 4px; }
.sca-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: #1e293b; }
.sca-bar .pass { background: #22c55e; }
.sca-bar .fail { background: #ef4444; }
.sca-bar .invalid { background: #64748b; }
.sca-score { font-size: 0.75rem; color: #64748b; margin-top: 2px; }
.sca-score strong { color: #e2e8f0; }

/* Vuln grid */
.vuln-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.vuln-card { background: #0f172a; border: 1px solid #1e293b; border-radius: 10px; padding: 14px; text-align: center; }
.vuln-card .agent-name { font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; }
.vuln-card .vuln-count { font-size: 1.8rem; font-weight: 700; }
.vuln-card .vuln-count.high { color: #ef4444; }
.vuln-card .vuln-count.medium { color: #eab308; }
.vuln-card .vuln-count.low { color: #22c55e; }

/* Alerts chart */
.alerts-chart { min-height: 100px; display: flex; align-items: flex-end; gap: 2px; padding: 10px 0; }
.alert-bar { background: linear-gradient(to top, #3b82f6, #60a5fa); border-radius: 3px 3px 0 0; min-width: 8px; flex: 1; position: relative; transition: height 0.3s; }
.alert-bar:hover { opacity: 0.8; }
.alert-bar .tip { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); background: #334155; padding: 2px 6px; border-radius: 4px; font-size: 0.65rem; white-space: nowrap; display: none; }
.alert-bar:hover .tip { display: block; }
.no-data { color: #475569; font-size: 0.85rem; text-align: center; padding: 30px; }

@media (max-width: 768px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .sca-grid, .vuln-grid { grid-template-columns: 1fr; }
}