body { display: flex; }
.last-update { font-size: 12px; color: var(--ink-3); }

.alerts-panel { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }

.alerts-header { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.filter-row { display: flex; gap: 6px; flex-wrap: wrap; }

.filter-btn { background: none; border: 1px solid var(--border); color: var(--ink-2); border-radius: 20px; padding: 3px 10px; font-size: 11px; cursor: pointer; font-family: inherit; transition: all 0.1s; }
.filter-btn.active { background: var(--bg-3); color: var(--ink-0); border-color: var(--ink-3); }

.alerts-list { max-height: 700px; overflow-y: auto; }

.alert-row { display: flex; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 12px; align-items: flex-start; }
.alert-row:last-child { border-bottom: none; }

.alert-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.alert-dot.critical { background: var(--red); }
.alert-dot.warning  { background: var(--amber); }
.alert-dot.info     { background: var(--green); }
.alert-dot.error    { background: var(--red); opacity: .6; }

.alert-content { flex: 1; min-width: 0; }
.alert-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 2px; }
.alert-ts { color: var(--ink-3); font-size: 11px; }
.alert-type { font-size: 9px; padding: 1px 6px; border-radius: 10px; background: var(--bg-3); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.alert-msg { color: var(--ink-1); line-height: 1.4; }