:root{
  --bg:#0b0d14; --panel:#141724; --panel2:#1b1f30; --line:#262b3d;
  --text:#e6e8ef; --muted:#9aa3b8;
  --up:#3ba55d; --degraded:#f0b429; --partial:#ef8d3a; --major:#e5484d; --maint:#5b8def; --unknown:#6b7280;
  --accent:#5865F2;
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:radial-gradient(1200px 600px at 50% -10%, #161a2b 0%, var(--bg) 55%);
  color:var(--text); font:15px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
a{color:#8ea0ff; text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:860px; margin:0 auto; padding:32px 18px 64px}

.hero{display:flex; flex-direction:column; gap:6px; margin-bottom:22px}
.brand{display:inline-flex; align-items:center; gap:10px; font-size:22px; color:var(--text)}
.brand:hover{text-decoration:none}
.brand strong{color:#fff}
.logo-dot{width:18px;height:18px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(88,101,242,.18)}
.sub{color:var(--muted); margin:0; font-size:14px}

/* overall banner */
.banner{
  border:1px solid var(--line); background:var(--panel); border-radius:16px; padding:20px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px;
  transition:background .3s, border-color .3s;
}
.banner__row{display:flex; align-items:center; gap:14px}
.banner__dot{width:16px;height:16px;border-radius:50%;background:var(--unknown); box-shadow:0 0 0 5px rgba(255,255,255,.03)}
.banner__text{font-size:18px; font-weight:650}
.banner__updated{color:var(--muted); font-size:12.5px; white-space:nowrap}

.banner--up{background:linear-gradient(180deg, rgba(59,165,93,.16), rgba(59,165,93,.04)); border-color:rgba(59,165,93,.4)}
.banner--up .banner__dot{background:var(--up); box-shadow:0 0 0 5px rgba(59,165,93,.18)}
.banner--degraded{background:linear-gradient(180deg, rgba(240,180,41,.14), transparent); border-color:rgba(240,180,41,.4)}
.banner--degraded .banner__dot{background:var(--degraded)}
.banner--partial{background:linear-gradient(180deg, rgba(239,141,58,.15), transparent); border-color:rgba(239,141,58,.4)}
.banner--partial .banner__dot{background:var(--partial)}
.banner--major{background:linear-gradient(180deg, rgba(229,72,77,.16), transparent); border-color:rgba(229,72,77,.45)}
.banner--major .banner__dot{background:var(--major)}
.banner--maint{background:linear-gradient(180deg, rgba(91,141,239,.15), transparent); border-color:rgba(91,141,239,.4)}
.banner--maint .banner__dot{background:var(--maint)}

/* components */
.components{display:flex; flex-direction:column; gap:10px}
.comp{
  border:1px solid var(--line); background:var(--panel); border-radius:12px; padding:14px 16px;
}
.comp__head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.comp__left{display:flex; align-items:center; gap:12px; min-width:0}
.comp__name{font-weight:600}

/* "?" help tooltip next to each component name */
.help{position:relative; display:inline-flex; align-items:center; margin-left:2px; cursor:help; vertical-align:middle}
.help__icon{display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; border:1px solid var(--line); color:var(--muted); font-size:10px; font-weight:700; line-height:1; transition:color .15s, border-color .15s; user-select:none}
.help:hover .help__icon,.help:focus-visible .help__icon{color:#fff; border-color:var(--accent)}
.help__tip{position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px); width:260px; max-width:78vw; background:#0e1119; border:1px solid var(--line); border-radius:8px; padding:9px 12px; font-size:12px; line-height:1.5; font-weight:400; color:#cdd2e0; box-shadow:0 8px 24px rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:opacity .15s, transform .15s; z-index:30; pointer-events:none; text-align:left}
.help__tip::after{content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:#0e1119}
.help:hover .help__tip,.help:focus-visible .help__tip,.help:focus-within .help__tip{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.comp__meta{color:var(--muted); font-size:12.5px}
.badge{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--muted)}
.badge .d{margin:0}
.live{font-size:11px; color:var(--muted); background:var(--panel2); border:1px solid var(--line); padding:3px 8px; border-radius:999px}
.live.ok{color:#9fe6b4; border-color:rgba(59,165,93,.4)}
.live.bad{color:#ffb3b5; border-color:rgba(229,72,77,.4)}
.bars{display:flex; gap:3px; margin-top:12px; height:34px; align-items:flex-end}
.bar{flex:1 1 0; min-width:3px; height:100%; border-radius:3px; background:var(--up); opacity:.85; position:relative}
.bar:hover{opacity:1; transform:scaleY(1.06)}
.bar.b--degraded{background:var(--degraded)}
.bar.b--partial{background:var(--partial)}
.bar.b--major{background:var(--major)}
.bar.b--maint{background:var(--maint)}
.bar.b--unknown{background:var(--unknown)}

/* dots */
.d{display:inline-block; width:9px;height:9px;border-radius:50%; background:var(--up); margin-right:2px}
.d--up{background:var(--up)} .d--degraded{background:var(--degraded)} .d--partial{background:var(--partial)}
.d--major{background:var(--major)} .d--maint{background:var(--maint)} .d--unknown{background:var(--unknown)}

.legend{display:flex; flex-wrap:wrap; gap:16px; margin:18px 2px 26px; font-size:12.5px; color:var(--muted)}
.legend span{display:inline-flex; align-items:center; gap:7px}

/* controls (history range + view toggle) */
.controls{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin:-4px 2px 16px}
.range{display:flex; align-items:center; gap:12px}
.range__label{font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em}
.range__tabs,.view__tabs{display:inline-flex; flex-wrap:wrap; gap:3px; background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:3px}
.range__tab,.view__tab{appearance:none; background:transparent; border:0; color:var(--muted); font:inherit; font-size:12.5px; font-weight:600; padding:5px 13px; border-radius:6px; cursor:pointer; transition:background .15s, color .15s}
.range__tab:hover,.view__tab:hover{color:var(--text)}
.range__tab.is-active,.view__tab.is-active{background:var(--accent); color:#fff}

/* line graph */
.graphwrap{margin-top:12px; position:relative; padding-bottom:18px}
.graph{display:block; width:100%; height:60px; overflow:visible}
.graph .overlay{cursor:crosshair}
.graphaxis{display:flex; justify-content:space-between; margin-top:4px; font-size:10.5px; color:var(--muted); opacity:.7}
.gtooltip{position:fixed; z-index:50; display:none; pointer-events:none; background:#0e1119; border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-size:11.5px; line-height:1.45; color:var(--text); box-shadow:0 6px 20px rgba(0,0,0,.45); white-space:nowrap}
.gtooltip .gt-time{color:#cdd2e0; font-weight:600; margin-bottom:2px}
.gtooltip .gt-body{color:var(--muted)}

.block{margin-top:8px}
.block h2{font-size:15px; letter-spacing:.02em; color:#cdd2e0; margin:0 0 12px}
.incidents{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.inc{border:1px solid var(--line); background:var(--panel); border-radius:10px; padding:12px 14px}
.inc__top{display:flex; align-items:center; gap:10px; justify-content:space-between}
.inc__title{font-weight:600}
.inc__date{color:var(--muted); font-size:12px}
.inc__msg{color:var(--muted); margin:6px 0 0}
.muted{color:var(--muted)}

.foot{margin-top:30px; border-top:1px solid var(--line); padding-top:16px; font-size:12.5px; color:var(--muted)}
.foot p{margin:6px 0}
button#pause{color:#8ea0ff; background:none; border:1px solid var(--line); border-radius:6px; padding:2px 8px; cursor:pointer; font:inherit}
button#pause:hover{border-color:#8ea0ff}

@media (max-width:560px){
  .bars{height:28px}
  .banner__text{font-size:16px}
}