.observability { display: flex; flex-direction: column; max-height: 245px; overflow-y: auto; margin-top: 18px; border: 1px solid #d7d7d2; background: #f7f8fb; padding: 18px; }
.observability-title { display: flex; align-items: center; gap: 8px; color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.observability-title .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.observability-grid { display: grid; flex: 1 1 0; min-height: 0; grid-template-columns: 1.35fr 1fr 1fr 1fr; grid-template-rows: max-content max-content minmax(0, 1fr); gap: 12px; margin-top: 15px; }
.observability-grid span { min-width: 0; }
.observability-grid small { display: block; color: var(--muted); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }
.observability-grid b { display: block; margin-top: 5px; font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 600px) { .observability-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } }