Add NOC alert panel V3.5

style.css

@@ -647,4 +647,81 @@ a:hover {
   color: #ff5f56;
   background: rgba(255, 95, 86, 0.1);
   border: 1px solid rgba(255, 95, 86, 0.28);
+}
+
+.noc-alert-panel {
+  margin: 1.5rem 0;
+  padding: 1.25rem;
+  border-radius: var(--radius);
+  background: rgba(0, 0, 0, 0.22);
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow);
+}
+
+.noc-alert-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.noc-alert-header h3 {
+  margin: 0;
+}
+
+.noc-alert-header span {
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.noc-alert-list {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.noc-alert {
+  display: grid;
+  gap: 0.2rem;
+  padding: 0.9rem 1rem;
+  border-radius: 14px;
+  border-left: 4px solid var(--accent-2);
+  background: rgba(255, 255, 255, 0.035);
+}
+
+.noc-alert span {
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.noc-alert.healthy {
+  border-left-color: var(--accent-2);
+}
+
+.noc-alert.degraded {
+  border-left-color: var(--warning);
+}
+
+.noc-alert.critical {
+  border-left-color: #ff5f56;
+}
+
+.noc-alert.unknown {
+  border-left-color: var(--accent);
+}
+
+.metric-pop {
+  animation: metricPop 0.35s ease;
+}
+
+@keyframes metricPop {
+  0% {
+    transform: scale(0.96);
+    opacity: 0.7;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
 }