*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif;background:#f7f8fa;color:#2c3e50;line-height:1.6}
.container{max-width:900px;margin:0 auto;padding:24px 16px}
.header{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:32px}
.header-logo{width:64px;height:64px;flex-shrink:0}
.header-text h1{font-size:22px;font-weight:600;margin-bottom:2px;color:#2c3e50}
.header-text p{font-size:14px;color:#7f8c8d}
.overall-status{text-align:center;padding:20px;border-radius:12px;margin-bottom:32px;font-size:18px;font-weight:600;letter-spacing:-0.3px;background:#f0f0f0;color:#7f8c8d}
.range-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.range-bar select{padding:6px 12px;border:1px solid #ddd;border-radius:6px;font-size:13px;color:#2c3e50;background:#fff;cursor:pointer;outline:none}
.range-bar select:focus{border-color:#3498db}
.btn-group{display:flex;gap:8px}
.btn-install{padding:8px 16px;border:1px solid #27ae60;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;background:#fff;color:#27ae60;transition:background .15s;display:none}
.btn-install:hover{background:#27ae60;color:#fff}
.btn-report{padding:8px 16px;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;background:#e74c3c;color:#fff;transition:background .15s}
.btn-report:hover{background:#c0392b}
.monitors{display:flex;flex-direction:column;gap:1px;background:#e0e0e0;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.group-section{margin-bottom:16px}
.group-header{background:#e8ecf0;padding:12px 24px;font-size:13px;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.3px}
.monitor-card{background:#fff;padding:20px 24px}
.monitor-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.monitor-info{display:flex;align-items:center;gap:10px;min-width:0}
.status-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:7px;color:#fff;line-height:1}
.dot-up{background:#27ae60}
.dot-down{background:#e74c3c}
.dot-unknown{background:#bdc3c7}
.monitor-name{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.monitor-url{font-size:12px;color:#95a5a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
.monitor-meta{display:flex;align-items:center;gap:16px;flex-shrink:0;font-size:13px;color:#7f8c8d}
.response-time{font-variant-numeric:tabular-nums}
.meta-stat{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.meta-label{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:#b0b8c1}
.uptime-pct{font-weight:600;color:#27ae60;font-variant-numeric:tabular-nums}
.uptime-pct.degraded{color:#f39c12}
.uptime-pct.down{color:#e74c3c}
.downtime-val{font-weight:500;font-variant-numeric:tabular-nums;color:#7f8c8d}
.bar-chart{display:flex;gap:1px;align-items:end;height:34px;width:100%}
.bar-chart .bar{flex:1;border-radius:1px;min-height:2px;transition:opacity .15s}
.bar-chart .bar:hover{opacity:.7}
.bar-labels{display:flex;justify-content:space-between;margin-top:4px;font-size:11px;color:#bdc3c7}
.children-container{margin-top:12px;padding-top:12px;border-top:1px solid #f0f0f0}
.children-grid{display:grid;gap:8px}
.children-grid.cols-1{grid-template-columns:1fr}
.children-grid.cols-2{grid-template-columns:1fr 1fr}
.child-card{background:#fafbfc;border-radius:6px;padding:8px 12px}
.child-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.child-info{display:flex;align-items:center;gap:6px;min-width:0}
.child-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.child-name{font-weight:600;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.child-meta{font-size:11px;color:#95a5a6;display:flex;gap:10px;flex-shrink:0}
.child-bar-chart{display:flex;gap:1px;align-items:end;height:11px;width:100%}
.child-bar-chart .bar{flex:1;border-radius:1px;min-height:1px}
.incidents-section{margin-bottom:32px}
.incidents-section h2{font-size:16px;font-weight:600;margin-bottom:12px;color:#2c3e50}
.report-chart-wrap{background:#fff;border-radius:8px;padding:16px 18px;margin-bottom:16px}
.report-chart-title{font-size:13px;font-weight:600;color:#7f8c8d;margin-bottom:8px}
.report-chart-svg{width:100%;height:120px;display:block}
.report-chart-labels{display:flex;justify-content:space-between;font-size:11px;color:#bdc3c7;margin-top:4px}
.incident{background:#fff;border-radius:8px;padding:14px 18px;margin-bottom:8px;border-left:3px solid #e74c3c}
.incident.resolved{border-left-color:#27ae60}
.incident-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.incident-name{font-weight:600;font-size:14px}
.incident-badge{font-size:11px;padding:2px 8px;border-radius:10px;font-weight:600}
.badge-ongoing{background:#fadbd8;color:#e74c3c}
.badge-resolved{background:#d5f5e3;color:#27ae60}
.incident-details{font-size:13px;color:#7f8c8d}
.no-incidents{background:#fff;border-radius:8px;padding:24px;text-align:center;color:#95a5a6;font-size:14px}
.footer{text-align:center;padding:24px 0;font-size:12px;color:#bdc3c7}
.loading{text-align:center;padding:60px;color:#95a5a6;font-size:14px}
.error-msg{text-align:center;padding:40px;color:#e74c3c;font-size:14px}
/* Modal */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:#fff;border-radius:12px;padding:28px;width:90%;max-width:440px;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.modal h3{font-size:17px;font-weight:600;margin-bottom:16px;color:#2c3e50}
.modal label{display:block;font-size:12px;font-weight:600;color:#7f8c8d;text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px;margin-top:12px}
.modal label:first-of-type{margin-top:0}
.modal select,.modal textarea{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:6px;font-size:13px;font-family:inherit;color:#2c3e50;outline:none;resize:vertical}
.modal select:focus,.modal textarea:focus{border-color:#3498db}
.modal textarea{height:70px;resize:none}
.modal .char-count{text-align:right;font-size:11px;color:#bdc3c7;margin-top:2px}
.turnstile-container{margin-top:12px;display:flex;justify-content:center}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.modal-actions button{padding:8px 20px;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer}
.btn-cancel{background:#f0f0f0;color:#7f8c8d}
.btn-cancel:hover{background:#e0e0e0}
.btn-submit{background:#e74c3c;color:#fff}
.btn-submit:hover{background:#c0392b}
.btn-submit:disabled{opacity:.5;cursor:not-allowed}
.toast{position:fixed;bottom:20px;right:20px;padding:10px 20px;border-radius:8px;color:#fff;font-size:13px;display:none;z-index:300}
.toast.success{background:#27ae60}
.toast.error{background:#e74c3c}
/* Bar color classes */
.bar-ok{background:#2ecc71}
.bar-good{background:#27ae60}
.bar-warn{background:#f39c12}
.bar-down{background:#e74c3c}
.bar-h34{height:34px}
.bar-h11{height:11px}
@media(max-width:600px){
  .monitor-top{flex-wrap:wrap}
  .monitor-info{width:100%}
  .monitor-url{display:block;flex:1;min-width:0}
  .monitor-meta{width:100%;justify-content:space-between;gap:10px}
  .bar-chart .bar{width:2px}
  .children-grid.cols-2{grid-template-columns:1fr}
  .child-meta{gap:6px}
}