.ai-lab-container { max-width: 950px; margin: 0 auto; }

/* Hero */
.al-hero { text-align: center; padding: 1.5rem 0 1rem; }
.al-hero h2 { font-size: 2rem; font-weight: 800; color: #fff; letter-spacing: 0.05em; }
.al-hero h2 span { color: #00b4d8; }
.al-subtitle { color: #8899a6; font-size: 1rem; margin: 0.25rem 0; }
.al-updated { color: #4a5568; font-size: 0.75rem; }

/* Status Bar */
.al-status-bar { display: flex; justify-content: space-around; background: #111827; border: 1px solid #1e293b; border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.5rem; }
.al-status-item { text-align: center; }
.al-label { font-size: 0.65rem; text-transform: uppercase; color: #8899a6; letter-spacing: 0.08em; }
.al-value { font-size: 1.3rem; font-weight: 700; color: #00b4d8; }
.al-online { color: #10b981 !important; }
.al-offline { color: #ef4444 !important; }

/* Sections */
.al-section { margin-bottom: 2rem; }
.al-section h3 { font-size: 1.2rem; font-weight: 600; color: #fff; margin-bottom: 1rem; }
.al-section h3 span { color: #00b4d8; }

/* Agents Grid */
.al-agents-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; }
.al-agent-card { background: #111827; border: 1px solid #1e293b; border-radius: 6px; padding: 1rem; text-align: center; transition: border-color 0.2s; }
.al-agent-card:hover { border-color: #00b4d8; }
.al-agent-name { font-weight: 700; font-size: 0.9rem; color: #fff; letter-spacing: 0.03em; }
.al-agent-status { font-size: 0.75rem; font-weight: 600; margin: 0.25rem 0; text-transform: uppercase; }
.al-agent-role { font-size: 0.75rem; color: #8899a6; }

/* Metrics */
.al-metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; }
.al-metric { background: #111827; border: 1px solid #1e293b; border-radius: 6px; padding: 1rem; text-align: center; }
.al-metric-value { font-size: 1.8rem; font-weight: 800; color: #00b4d8; }
.al-metric-label { font-size: 0.7rem; color: #8899a6; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.25rem; }

/* Experiments */
.al-experiments { display: flex; flex-direction: column; gap: 0.5rem; }
.al-experiment { background: #111827; border: 1px solid #1e293b; border-radius: 6px; padding: 1rem; }
.al-exp-header { display: flex; align-items: center; gap: 0.5rem; }
.al-exp-name { font-weight: 600; color: #fff; }
.al-exp-desc { color: #8899a6; font-size: 0.85rem; margin: 0.5rem 0 0; }
.al-badge { padding: 0.15rem 0.5rem; border-radius: 3px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; }
.al-badge-active { background: rgba(16,185,129,0.2); color: #34d399; }
.al-badge-completed { background: rgba(59,130,246,0.2); color: #60a5fa; }
.al-badge-planned { background: rgba(245,158,11,0.2); color: #fbbf24; }

/* Events */
.al-events { display: flex; flex-direction: column; gap: 0.35rem; }
.al-event { display: flex; gap: 0.75rem; align-items: center; background: #111827; border: 1px solid #1e293b; border-radius: 4px; padding: 0.5rem 0.75rem; font-size: 0.8rem; }
.al-event-type { font-weight: 600; color: #fff; min-width: 140px; }
.al-event-source { color: #8899a6; min-width: 60px; }
.al-event-severity { padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; }
.al-sev-low { background: rgba(16,185,129,0.2); color: #34d399; }
.al-sev-medium { background: rgba(245,158,11,0.2); color: #fbbf24; }
.al-sev-high { background: rgba(239,68,68,0.2); color: #f87171; }
.al-sev-critical { background: rgba(239,68,68,0.4); color: #fca5a5; }
.al-event-time { color: #4a5568; font-size: 0.7rem; margin-left: auto; }

.al-empty { color: #4a5568; font-size: 0.85rem; text-align: center; padding: 1rem; }

@media (max-width: 768px) {
    .al-status-bar { flex-direction: column; }
    .al-agents-grid { grid-template-columns: repeat(2, 1fr); }
}