.aiops-workspace { display: grid; gap: 18px; }
.aiops-toolbar, .aiops-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.aiops-toolbar p, .aiops-panel-head small { margin: 0; color: var(--accent, #56a8ff); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.aiops-toolbar h2 { margin: 5px 0 3px; font-size: 25px; }
.aiops-toolbar span, .aiops-summary span, .aiops-setup span { color: var(--text-muted, #8ea1ba); }
.aiops-lab-notice { display: flex; gap: 12px; align-items: center; padding: 13px 16px; border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent); background: color-mix(in srgb, #f59e0b 10%, var(--surface, #111f33)); border-radius: 14px; }
.aiops-lab-notice strong { color: #fbbf24; white-space: nowrap; }
.aiops-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.aiops-summary article, .aiops-panel, .aiops-detail-summary article, .aiops-detail-grid article, .aiops-detail-columns > section { background: var(--surface, #111f33); border: 1px solid var(--border, #28415f); border-radius: 16px; }
.aiops-summary article { padding: 18px; }
.aiops-summary small, .aiops-detail-summary small, .aiops-detail-grid small { display: block; color: var(--text-muted, #8ea1ba); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.aiops-summary strong { display: block; margin: 7px 0 3px; font-size: 27px; }
.aiops-summary span, .aiops-setup span { font-size: 11px; }
.aiops-panel { padding: 18px; }
.aiops-panel-head { align-items: end; margin-bottom: 14px; }
.aiops-panel-head h3, .aiops-setup h4 { margin: 4px 0; }
.aiops-panel-head label { font-size: 11px; color: var(--text-muted, #8ea1ba); }
.aiops-panel-head select { display: block; min-width: 210px; margin-top: 5px; }
.aiops-incidents, .aiops-setup, .aiops-agent-list, .aiops-timeline { display: grid; gap: 10px; }
.aiops-incident { display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding: 16px; border: 1px solid var(--border, #28415f); border-radius: 14px; background: color-mix(in srgb, var(--surface, #111f33) 86%, var(--bg, #071525)); }
.aiops-incident-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, #f59e0b 16%, transparent); color: #fbbf24; font-weight: 900; }
.aiops-incident.critical .aiops-incident-icon, .aiops-incident.high .aiops-incident-icon { background: color-mix(in srgb, #ef4444 15%, transparent); color: #fb7185; }
.aiops-incident-title { display: flex; justify-content: space-between; gap: 16px; }
.aiops-incident-title small { color: var(--accent, #56a8ff); font-weight: 800; }
.aiops-incident-title h3 { margin: 4px 0 2px; }
.aiops-incident-main > p, .aiops-diagnosis { margin: 4px 0; color: var(--text-muted, #9aabc0); }
.aiops-diagnosis { padding: 10px 12px; border-left: 3px solid var(--accent, #56a8ff); background: color-mix(in srgb, var(--accent, #56a8ff) 6%, transparent); border-radius: 6px; }
.aiops-status, .aiops-flag { height: max-content; padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, #64748b 16%, transparent); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.aiops-status.awaiting_approval { color: #fbbf24; }
.aiops-status.resolved, .aiops-flag.on { color: #34d399; }
.aiops-status.failed { color: #fb7185; }
.aiops-meta, .aiops-actions, .aiops-setup-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 10px; }
.aiops-meta span { font-size: 11px; color: var(--text-muted, #8ea1ba); }
.aiops-actions, .aiops-setup-actions { justify-content: flex-end; }
.aiops-setup > article { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 12px; padding: 14px; border: 1px solid var(--border, #28415f); border-radius: 12px; }
.aiops-agent-list { grid-column: 1 / -1; }
.aiops-agent-list > div { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; padding: 9px 11px; background: color-mix(in srgb, var(--bg, #071525) 50%, transparent); border-radius: 9px; }
.aiops-agent-list label { font-size: 11px; }
.aiops-enrollment-output { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-top: 12px; padding: 14px; border: 1px solid #f59e0b; border-radius: 12px; background: color-mix(in srgb, #f59e0b 8%, transparent); }
.aiops-enrollment-output strong, .aiops-enrollment-output span, .aiops-enrollment-output code { display: block; }
.aiops-enrollment-output code { margin-top: 8px; max-width: 680px; overflow: auto; color: #fbbf24; }
.aiops-detail { display: grid; gap: 16px; }
.aiops-detail-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.aiops-detail-summary article, .aiops-detail-grid article { padding: 14px; }
.aiops-detail-summary strong { display: block; margin-top: 6px; font-size: 13px; }
.aiops-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.aiops-detail-grid p { margin: 8px 0 0; line-height: 1.5; }
.aiops-detail-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aiops-detail-columns > section { padding: 16px; min-width: 0; }
.aiops-event { display: grid; grid-template-columns: 10px 1fr; gap: 10px; }
.aiops-event i { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--accent, #56a8ff); }
.aiops-event b, .aiops-event span { display: block; }
.aiops-event span { margin-top: 3px; color: var(--text-muted, #8ea1ba); font-size: 11px; }
.aiops-evidence details { border-top: 1px solid var(--border, #28415f); padding: 10px 0; }
.aiops-evidence summary { cursor: pointer; font-weight: 700; }
.aiops-evidence pre { max-height: 320px; overflow: auto; padding: 12px; border-radius: 10px; background: #06101e; color: #b9d8ff; font-size: 11px; white-space: pre-wrap; }
.aiops-incident-modal { max-height: 92vh; overflow: auto; }
@media (max-width: 900px) { .aiops-summary, .aiops-detail-summary, .aiops-detail-grid, .aiops-detail-columns { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .aiops-setup > article { grid-template-columns: 1fr; } .aiops-setup-actions { justify-content: flex-start; } .aiops-agent-list > div { grid-template-columns: 1fr; } .aiops-enrollment-output { align-items: stretch; flex-direction: column; } }
@media (max-width: 620px) { .aiops-toolbar, .aiops-panel-head, .aiops-incident-title { align-items: stretch; flex-direction: column; } .aiops-summary, .aiops-detail-summary, .aiops-detail-grid, .aiops-detail-columns { grid-template-columns: 1fr; } .aiops-lab-notice { align-items: flex-start; flex-direction: column; } }