:root{
  --green:#2fcc66;
  --orange:#f5a623;
  --red:#e5484d;
  --blue:#4a90d9;
  --gray-bg:#e2e2e2;
  --text:#2e2e2e;
  --muted:#8a8f98;
  --border:#eceef0;
  --link:#1c58a9;
  --bg:#f7f8f9;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
}
a{color:var(--link);text-decoration:none;}
a:hover{text-decoration:underline;}

.top-banner{
  height:6px;
  width:100%;
}
.top-banner.operational{background:var(--green);}
.top-banner.degraded{background:var(--orange);}
.top-banner.down{background:var(--red);}
.top-banner.maintenance{background:var(--blue);}

.wrap{max-width:720px;margin:0 auto;padding:28px 20px 60px;}

.header-row{
  display:flex;align-items:center;gap:12px;margin-bottom:22px;
}
.header-row img{height:34px;}
.header-row .site-name{font-size:19px;font-weight:600;}

.status-hero{
  display:flex;align-items:center;gap:12px;
  padding:18px 20px;border-radius:8px;margin-bottom:22px;
  font-size:18px;font-weight:600;
}
.status-hero.operational{background:#eafaf0;color:#1a8a4a;}
.status-hero.degraded{background:#fef6e7;color:#9a6b00;}
.status-hero.down{background:#fdeceb;color:#c0292f;}
.status-hero.maintenance{background:#eaf2fb;color:#2864a6;}
.status-hero .dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto;}
.status-hero.operational .dot{background:var(--green);}
.status-hero.degraded .dot{background:var(--orange);}
.status-hero.down .dot{background:var(--red);}
.status-hero.maintenance .dot{background:var(--blue);}

.notice-box{
  border:1px solid var(--border);border-left:4px solid var(--blue);
  background:#fff;border-radius:6px;padding:14px 16px;margin-bottom:14px;
}
.notice-box.active{border-left-color:var(--orange);}
.notice-box h4{margin:0 0 4px;font-size:14px;}
.notice-box .time{font-size:12px;color:var(--muted);margin-bottom:6px;}
.notice-box p{margin:0;font-size:13px;color:#555;}

.uptime-caption{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:var(--muted);margin-bottom:8px;
}

.services-card{
  background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden;
}
.service-row{
  padding:16px 20px;border-bottom:1px solid var(--border);
}
.service-row:last-child{border-bottom:none;}
.service-row.group-header{background:#fafbfc;font-weight:600;cursor:pointer;}
.service-top{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;
}
.service-name{font-size:14px;font-weight:600;color:#3a3a3a;}
.service-name .qmark{
  display:inline-block;width:14px;height:14px;border-radius:50%;
  border:1px solid #c9c9c9;color:#9a9a9a;font-size:10px;line-height:13px;
  text-align:center;margin-left:5px;cursor:default;
}
.service-status{font-size:13px;font-weight:600;}
.service-status.operational{color:var(--green);}
.service-status.degraded{color:var(--orange);}
.service-status.down{color:var(--red);}
.service-status.maintenance{color:var(--blue);}

.bars{
  display:flex;gap:2px;height:34px;align-items:flex-end;
}
.bar{
  flex:1;height:100%;border-radius:2px;background:var(--gray-bg);
  position:relative;
}
.bar.operational{background:var(--green);}
.bar.degraded{background:var(--orange);}
.bar.down{background:var(--red);}
.bar.maintenance{background:var(--blue);}
.bar.none{background:var(--gray-bg);}
.bar:hover::after{
  content:attr(data-tip);
  position:absolute;bottom:120%;left:50%;transform:translateX(-50%);
  background:#2e2e2e;color:#fff;font-size:11px;padding:5px 8px;border-radius:4px;
  white-space:nowrap;z-index:5;
}
.bars-caption{
  display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:6px;
}
.bars-caption .mid{color:#c0292f;}

footer.foot{
  text-align:center;color:var(--muted);font-size:12px;margin-top:40px;
}

.admin-wrap{max-width:960px;margin:0 auto;padding:26px 20px 60px;}
.admin-nav{display:flex;gap:6px;margin-bottom:22px;flex-wrap:wrap;}
.admin-nav a{
  padding:8px 14px;border-radius:6px;font-size:13px;font-weight:600;color:#444;
  background:#fff;border:1px solid var(--border);
}
.admin-nav a.active{background:var(--text);color:#fff;border-color:var(--text);}

.card{
  background:#fff;border:1px solid var(--border);border-radius:8px;padding:20px;margin-bottom:20px;
}
.card h2{margin-top:0;font-size:16px;}
.form-row{margin-bottom:14px;}
.form-row label{display:block;font-size:12px;font-weight:600;color:#555;margin-bottom:5px;}
.form-row input[type=text],
.form-row input[type=password],
.form-row input[type=url],
.form-row input[type=number],
.form-row input[type=datetime-local],
.form-row select,
.form-row textarea{
  width:100%;padding:9px 10px;border:1px solid #d7dade;border-radius:6px;font-size:13px;font-family:inherit;
}
.form-row textarea{min-height:70px;}
.checkbox-list label{font-weight:400;display:inline-flex;align-items:center;gap:5px;margin-right:14px;font-size:13px;}
.btn{
  display:inline-block;padding:9px 16px;border-radius:6px;border:none;font-size:13px;font-weight:600;
  background:var(--text);color:#fff;cursor:pointer;
}
.btn.secondary{background:#eceef0;color:#333;}
.btn.danger{background:var(--red);color:#fff;}
.btn.small{padding:5px 10px;font-size:12px;}

table.admin-table{width:100%;border-collapse:collapse;font-size:13px;}
table.admin-table th, table.admin-table td{
  text-align:left;padding:9px 8px;border-bottom:1px solid var(--border);
}
.badge{
  display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;color:#fff;
}
.badge.operational{background:var(--green);}
.badge.degraded{background:var(--orange);}
.badge.down{background:var(--red);}
.badge.maintenance{background:var(--blue);}
.badge.manual{background:#888;}

.flash{padding:10px 14px;border-radius:6px;margin-bottom:16px;font-size:13px;}
.flash.ok{background:#eafaf0;color:#1a8a4a;}
.flash.err{background:#fdeceb;color:#c0292f;}

.login-box{max-width:340px;margin:80px auto;}
.hint{font-size:11px;color:var(--muted);margin-top:4px;}
.key-box{font-family:monospace;background:#f2f3f5;padding:8px 10px;border-radius:6px;font-size:12px;word-break:break-all;}