body { background:#f4f7fb; }
.card { border:0; box-shadow:0 8px 24px rgba(15, 76, 129, .08); border-radius:16px; }
.status-pill { display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .65rem; border-radius:999px; font-size:.85rem; font-weight:600; }
.status-online { background:#e9f9ef; color:#087443; }
.status-offline { background:#f2f4f7; color:#667085; }
.dot { width:.65rem; height:.65rem; border-radius:50%; display:inline-block; background:currentColor; }
.log-table td, .log-table th { white-space:nowrap; }
.timeline { position:relative; display:grid; gap:10px; }
.timeline-row { display:grid; grid-template-columns:180px 1fr; align-items:center; gap:12px; }
.timeline-label { font-weight:600; color:#344054; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; }
.timeline-track { position:relative; height:30px; background:#eef2f7; border-radius:999px; overflow:hidden; border:1px solid #dde5ef; }
.timeline-segment { position:absolute; top:5px; height:18px; border-radius:999px; background:#0d6efd; min-width:2px; }
.timeline-segment.open { background:#f79009; box-shadow:0 0 0 3px rgba(247,144,9,.15); }
.timeline-axis { display:grid; grid-template-columns:180px 1fr; gap:12px; color:#667085; font-size:.8rem; }
.timeline-axis-inner { display:flex; justify-content:space-between; }
.current-badge { font-size:.9rem; }
@media(max-width:768px){ .timeline-row,.timeline-axis{grid-template-columns:1fr}.timeline-label{margin-top:8px}.timeline-axis>div:first-child{display:none} }