:root{--bg:#f5f7fa;--card:#fff;--text:#17212b;--muted:#6b7785;--border:#e6e9ee;--ok:#169c5b;--warn:#d99a00;--bad:#d64545;--partial:#e47716;--maint:#367bd3;--unknown:#7d8790}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font-family:Tahoma,Arial,sans-serif;line-height:1.6}
.container{max-width:920px;margin:0 auto;padding:38px 18px 60px}.topbar{padding:12px 4px 22px}.brand{font-weight:800;letter-spacing:2px;font-size:14px}.topbar h1{margin:4px 0 0;font-size:30px}.topbar p{margin:6px 0;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;margin:14px 0;box-shadow:0 2px 9px rgba(20,30,40,.035)}
.overall{display:flex;align-items:center;gap:12px;font-size:20px}.status-dot{width:16px;height:16px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 6px rgba(22,156,91,.12)}
.overall-degraded .status-dot{background:var(--warn)}.overall-partial_outage .status-dot{background:var(--partial)}.overall-major_outage .status-dot{background:var(--bad)}.overall-maintenance .status-dot{background:var(--maint)}
.group h2,.card h2{font-size:18px;margin:0 0 10px}.service-row{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:15px 0;border-top:1px solid var(--border)}.service-row:first-child{border-top:0}.service-name{font-weight:700}.muted{font-size:13px;color:var(--muted)}
.badge{font-size:12px;font-weight:700;padding:6px 10px;border-radius:999px;white-space:nowrap}.badge-operational{color:#117143;background:#e8f7ef}.badge-degraded{color:#8a6200;background:#fff5d8}.badge-partial_outage{color:#9a4a04;background:#fff0e3}.badge-major_outage{color:#9b2525;background:#fdeaea}.badge-maintenance{color:#245998;background:#eaf2fc}.badge-unknown{color:#59626a;background:#eef0f2}.event{padding:12px 0;border-top:1px solid var(--border)}footer{text-align:center;color:var(--muted);font-size:12px;padding:24px}
@media(max-width:600px){.container{padding:20px 12px 40px}.topbar h1{font-size:24px}.service-row{align-items:flex-start}.badge{max-width:45%;white-space:normal;text-align:center}}

/* ===== 90-DAY STATUS HISTORY ===== */

.monitoring-note{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin:14px 0;
  padding:14px 18px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fafbfc;
  font-size:13px;
}

.monitoring-note span{
  color:var(--muted);
}

.service-block{
  border-top:1px solid var(--border);
  padding:4px 0 18px;
}

.service-block:first-child{
  border-top:0;
}

.service-block .service-row{
  border-top:0;
  padding-bottom:8px;
}

.uptime-summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-top:2px;
  font-size:12px;
  color:var(--muted);
}

.uptime-summary strong{
  color:var(--text);
  font-size:13px;
}

.history-wrap{
  margin-top:8px;
}

.history-labels{
  display:flex;
  justify-content:space-between;
  margin-bottom:5px;
  font-size:10px;
  color:var(--muted);
}

.history-bars{
  direction:ltr;
  display:grid;
  grid-template-columns:repeat(90,minmax(2px,1fr));
  gap:2px;
  height:30px;
}

.history-bar{
  display:block;
  min-width:2px;
  height:30px;
  border-radius:2px;
  background:var(--unknown);
}

.history-operational{
  background:var(--ok);
}

.history-degraded{
  background:var(--warn);
}

.history-partial_outage{
  background:var(--partial);
}

.history-major_outage{
  background:var(--bad);
}

.history-maintenance{
  background:var(--maint);
}

.history-no-data,
.history-unknown{
  background:#e4e8ec;
}

.coverage-text{
  margin-top:6px;
  font-size:10px;
  color:var(--muted);
}

.history-empty{
  margin-top:4px;
  padding:8px 0;
  font-size:11px;
  color:var(--muted);
}

@media(max-width:600px){
  .history-bars{
    gap:1px;
    height:24px;
  }

  .history-bar{
    height:24px;
    border-radius:1px;
  }

  .uptime-summary{
    align-items:flex-start;
  }
}

/* ===== STATUS UI POLISH ===== */

.container{
  max-width:980px;
}

.group.card{
  padding:22px 24px 12px;
}

.group h2{
  margin-bottom:14px;
  font-size:20px;
}

.service-block{
  padding:10px 0 20px;
}

.service-row{
  padding:10px 0 6px;
}

.service-name{
  font-size:17px;
}

.service-block .badge{
  align-self:flex-start;
}

.uptime-summary{
  margin-top:8px;
  padding-top:2px;
  border-top:0;
}

.uptime-summary strong{
  font-size:15px;
  font-weight:800;
}

.history-wrap{
  margin-top:5px;
}

.history-labels{
  direction:rtl;
  margin-top:8px;
  margin-bottom:5px;
}

.history-bars{
  height:26px;
}

.history-bar{
  height:26px;
}

.coverage-text{
  text-align:right;
  margin-top:7px;
}

.history-empty{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  padding:4px 0 12px;
}

.setup-badge{
  display:inline-block;
  padding:5px 10px;
  border-radius:999px;
  background:#eef0f2;
  color:#59626a;
  font-size:12px;
  font-weight:700;
}

.monitoring-note{
  background:#fff;
}

.overall-major_outage .status-dot{
  background:var(--bad);
}

@media(max-width:600px){
  .group.card{
    padding:18px 16px 10px;
  }

  .service-name{
    font-size:16px;
  }

  .history-bars{
    height:22px;
  }

  .history-bar{
    height:22px;
  }
}

/* ===== ADMIN ===== */

.admin-login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.admin-login-card{
  width:100%;
  max-width:430px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:28px;
  box-shadow:0 8px 30px rgba(20,30,40,.08);
}

.admin-login-card h1{
  margin:5px 0 24px;
}

.admin-login-card form,
.admin-form{
  display:flex;
  flex-direction:column;
  gap:15px;
}

.admin-login-card label,
.admin-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  font-weight:700;
}

.admin-login-card input,
.admin-form input,
.admin-form textarea,
.admin-form select{
  width:100%;
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  background:#fff;
  color:var(--text);
  font:inherit;
}

.admin-login-card button,
.admin-form button,
.admin-header button{
  border:0;
  border-radius:8px;
  padding:10px 16px;
  background:var(--ok);
  color:#fff;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

.admin-error{
  margin-bottom:15px;
  padding:10px 12px;
  border-radius:8px;
  background:#fdeaea;
  color:#9b2525;
  font-size:13px;
}

.admin-container{
  max-width:1000px;
}

.admin-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:20px;
}

.admin-header h1{
  margin:4px 0;
}

.admin-header-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.admin-header-actions form{
  margin:0;
}

.admin-header-actions a{
  color:var(--text);
}

.admin-header button.secondary{
  background:#eef0f2;
  color:#39434c;
}

.admin-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}

.admin-incident{
  padding:20px 0;
  border-top:1px solid var(--border);
}

.admin-incident:first-of-type{
  border-top:0;
}

.admin-incident-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:15px;
  margin-bottom:15px;
}

.admin-form.compact{
  padding:14px;
  background:#fafbfc;
  border-radius:10px;
}

@media(max-width:650px){
  .admin-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .admin-grid{
    grid-template-columns:1fr;
  }
}

/* ===== INCIDENT HISTORY ===== */

.incident-timeline{
  margin-top:14px;
  padding-right:16px;
  border-right:2px solid var(--border);
}

.incident-update{
  position:relative;
  padding:0 14px 16px 0;
}

.incident-update:last-child{
  padding-bottom:0;
}

.incident-update::before{
  content:"";
  position:absolute;
  right:-21px;
  top:6px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--ok);
}

.incident-update-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:5px;
}

.incident-state{
  font-weight:700;
}

.incident-update time{
  color:var(--muted);
  font-size:11px;
}

.admin-incident-history{
  margin:10px 0 16px;
  padding:12px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
}

.admin-history-row{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:8px 0;
  border-top:1px solid var(--border);
}

.admin-history-row:first-child{
  border-top:0;
}

.admin-history-row span{
  color:var(--muted);
  font-size:13px;
}

/* ===== SCHEDULED MAINTENANCE ===== */

.maintenance-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.maintenance-badge{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  border-radius:999px;
  padding:4px 9px;
  font-size:11px;
  font-weight:700;
}

.maintenance-badge.scheduled{
  background:#eef2ff;
  color:#3949ab;
}

.maintenance-badge.active{
  background:#fff3cd;
  color:#795900;
}

.maintenance-time{
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
}

.admin-maintenance-list{
  margin-top:24px;
}

.admin-maintenance-item{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  padding:16px 0;
  border-top:1px solid var(--border);
}

.admin-maintenance-item p{
  margin:6px 0;
}

.admin-maintenance-item form{
  margin:0;
}

.admin-maintenance-item button.danger{
  background:#b42318;
}

@media(max-width:650px){
  .admin-maintenance-item{
    flex-direction:column;
  }

  .maintenance-head{
    align-items:flex-start;
  }
}