:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#1c2937;background:#f5f7fa;font-size:15px}*{box-sizing:border-box}body{margin:0}main{max-width:1100px;margin:50px auto;padding:0 24px}header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}h1{font-size:30px;letter-spacing:-1px;margin:7px 0 10px}h2{font-size:17px;margin:0 0 10px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:#607187;margin:0}.muted{color:#64748b;margin:0;line-height:1.6}.small{font-size:12px}.badge{padding:9px 17px;border-radius:25px;font-size:14px;font-weight:700;white-space:nowrap}.online{background:#dff6eb;color:#067647}.offline{background:#ffe3e3;color:#b42318}.unknown{background:#e9edf2;color:#526173}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}.metrics>div,.panel{background:white;border:1px solid #e1e7ef;border-radius:12px;padding:24px}.metrics span{display:block;color:#64748b;font-size:12px;margin-bottom:12px}.metrics strong{display:block;font-size:21px;font-weight:600}.panel{margin-bottom:20px}.chart-heading{display:flex;justify-content:space-between;gap:18px}.ranges{display:flex;gap:5px;align-items:flex-start}.ranges button{border:1px solid #dce3ec;background:white;padding:8px 12px;border-radius:7px;color:#526173;cursor:pointer;white-space:nowrap}.ranges .selected{background:#eef4ff;border-color:#c6d7f8;color:#1d4ed8}#chart{margin:20px 0 10px;min-height:240px}#chart svg{width:100%;height:auto;display:block}#chart text{fill:#64748b;font:12px system-ui,sans-serif}table{border-collapse:collapse;width:100%;text-align:left;font-size:13px}th,td{padding:12px 0;border-bottom:1px solid #eef1f5}th{font-weight:600;color:#64748b}td:last-child{color:#b42318;overflow-wrap:anywhere}.table-wrap{overflow:auto}footer{display:flex;justify-content:space-between;gap:20px;font-size:11px;color:#64748b;line-height:1.6;margin-top:28px}@media(max-width:650px){main{margin:25px auto;padding:0 15px}header{align-items:flex-start;flex-direction:column}h1{font-size:26px}.metrics{grid-template-columns:1fr;gap:10px}.metrics>div{padding:17px}.metrics strong{font-size:18px}.chart-heading,footer{flex-direction:column}.panel{padding:18px}#chart{min-height:150px}}
.duration-summary{margin-top:25px;padding-top:20px;border-top:1px solid #e9edf3}.duration-summary h3{font-size:14px;margin:0 0 13px}.duration-bar{height:22px;background:#e2e8f0;border-radius:7px;display:flex;overflow:hidden;margin-bottom:13px}.duration-segment{display:block;flex-shrink:0}.duration-segment.online{background:#12a46c}.duration-segment.offline{background:#e5484d}.duration-segment.unknown{background:#cbd5e1}.duration-labels{display:flex;flex-wrap:wrap;gap:12px 24px;font-size:13px;margin-bottom:12px}.duration-labels strong{font-weight:600}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}.dot.green{background:#12a46c}.dot.red{background:#e5484d}.dot.gray{background:#cbd5e1}