:root{
  --bg:#0a0a0a;
  --bg-card:#161616;
  --accent:#e8b304;
  --accent-soft:rgba(232,179,4,.12);
  --border:#232323;
  --border-strong:#2e2e2e;
  --text:#f2f2f2;
  --text-muted:#8a8a8a;
  --ok:#3ecf6e;
  --ok-soft:rgba(62,207,110,.12);
  --warn:#f2994a;
  --warn-soft:rgba(242,153,74,.12);
  --down:#f24545;
  --down-soft:rgba(242,69,69,.12);
}

*{box-sizing:border-box; margin:0; padding:0;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
}

.wrap{
  max-width:760px;
  margin:0 auto;
  padding:0 24px 80px;
}

/* top bar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px 0 40px;
}
.brand{
  display:flex;
  align-items:center;
}
.brand a{
  font-size:18px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:#fff;
  text-decoration:none;
}
.brand a .accent{ color:var(--accent); }

.topbar-links{
  display:flex;
  align-items:center;
  gap:20px;
}
.topbar-links a{
  font-size:13px;
  color:var(--text-muted);
  text-decoration:none;
  transition:color .15s;
}
.topbar-links a:hover{ color:var(--text); }

/* overall banner */
.banner{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-left:3px solid var(--ok);
  border-radius:10px;
  padding:20px 22px;
  margin-bottom:36px;
}
.banner .badge{
  width:40px; height:40px;
  border-radius:50%;
  background:var(--ok-soft);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.banner .badge svg{ width:19px; height:19px; stroke:var(--ok); }
.banner.warn{ border-left-color:var(--warn); }
.banner.warn .badge{ background:var(--warn-soft); }
.banner.warn .badge svg{ stroke:var(--warn); }
.banner.down{ border-left-color:var(--down); }
.banner.down .badge{ background:var(--down-soft); }
.banner.down .badge svg{ stroke:var(--down); }
.banner .text strong{ font-size:16px; font-weight:600; display:block; }
.banner .text span{ font-size:12.5px; color:var(--text-muted); }

/* section */
.section{ margin-bottom:34px; }
.section-title{
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:var(--accent);
  font-weight:600;
  margin-bottom:14px;
  padding-left:2px;
}

.panel{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}

/* app row (accordion trigger) */
.app{
  border-bottom:1px solid var(--border);
}
.app:last-child{ border-bottom:none; }

.app-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 20px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.app-row:hover{ background:rgba(255,255,255,.02); }

.app-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.chevron{
  width:16px; height:16px;
  color:var(--text-muted);
  flex-shrink:0;
  transition:transform .2s ease;
}
.app.open .chevron{ transform:rotate(90deg); }

.app-name{ font-size:14px; font-weight:600; }
.app-name .no-toggle{ font-weight:600; }

.status-pill{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:600;
  color:var(--ok);
  flex-shrink:0;
}
.status-pill .dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--ok);
  animation:pulse-live-ok 2.2s infinite;
}
@keyframes pulse-live-ok{
  0%{ box-shadow:0 0 0 0 rgba(62,207,110,.5); }
  70%{ box-shadow:0 0 0 5px rgba(62,207,110,0); }
  100%{ box-shadow:0 0 0 0 rgba(62,207,110,0); }
}
.status-pill.warn{ color:var(--warn); }
.status-pill.warn .dot{ background:var(--warn); animation:pulse-warn 1.3s infinite; }
@keyframes pulse-warn{ 0%{opacity:1;} 50%{opacity:.35;} 100%{opacity:1;} }
.status-pill.down{ color:var(--down); }
.status-pill.down .dot{ background:var(--down); }

/* accordion body */
.app-body{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
}
.app.open .app-body{
  max-height:200px;
}
.sub-list{
  padding:0 20px 14px 42px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sub-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
  color:var(--text-muted);
}
.sub-row .sub-name::before{
  content:"—";
  margin-right:8px;
  color:var(--border-strong);
}
.sub-row .status-pill{ font-size:11.5px; }

/* incidents */
.incident-day{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 20px;
  font-size:13px;
  border-bottom:1px solid var(--border);
}
.incident-day:last-child{ border-bottom:none; }
.incident-day .date{ font-weight:500; }
.incident-day .status{ color:var(--text-muted); font-size:12.5px; }
.incident-day .status.warn{ color:var(--warn); }

.incident-day.has-incidents{
  flex-direction:column;
  align-items:stretch;
  gap:12px;
}
.incident-day-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.incident-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.incident-item{
  padding-left:12px;
  border-left:2px solid var(--warn);
}
.incident-item.solved{
  border-left-color:var(--ok);
}
.incident-item-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.incident-item strong{
  font-size:12.5px;
  font-weight:600;
  color:var(--text);
  margin-bottom:3px;
}
.incident-badge{
  flex-shrink:0;
  font-size:11px;
  font-weight:600;
  padding:3px 9px;
  border-radius:20px;
  white-space:nowrap;
  color:var(--warn);
  background:var(--warn-soft);
}
.incident-badge.resolved{
  color:var(--ok);
  background:var(--ok-soft);
}
.incident-item .time{
  font-size:11px;
  font-weight:500;
  color:var(--text-muted);
  margin-right:6px;
}
.incident-item p{
  font-size:12px;
  color:var(--text-muted);
  line-height:1.45;
}

footer{
  color:var(--text-muted);
  font-size:11.5px;
  border-top:1px solid var(--border);
  padding-top:20px;
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}

@media (max-width:480px){
  .wrap{ padding:0 16px 60px; }
  .sub-list{ padding-left:32px; }
}