*{box-sizing:border-box}
:root{--accent:#1fc897;--menu:#1fc897;--logo:#1fc897;--bg:#f4f7fb;--panel:#fff;--text:#172033;--muted:#6d7789;--line:#e3e8f0;--danger:#e34a5f;--warn:#f0a83b}
html.dark{--bg:#0d1320;--panel:#151d2c;--text:#edf3ff;--muted:#99a6ba;--line:#263248}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;padding:0 0 54px 240px}
button,input,select,textarea{font:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--text);padding:9px 13px}button:hover{border-color:var(--accent)}
.sidebar{position:fixed;inset:0 auto 0 0;width:240px;padding:26px 18px;background:#101827;color:#d8e0ed;z-index:3}.brand{display:flex;gap:12px;align-items:center;color:#fff;text-decoration:none;font-size:20px;font-weight:750;margin:0 8px 35px}.brand img,.mark{width:38px;height:38px;object-fit:contain;border-radius:10px;background:var(--logo)}.mark{display:grid;place-items:center;color:#07120e}.sidebar nav{display:grid;gap:6px}.sidebar nav a,.sidebar nav button{display:block;text-align:left;border:0;background:transparent;color:#b8c3d4;text-decoration:none;padding:11px 13px;border-radius:9px}.sidebar nav a.active,.sidebar nav a:hover,.sidebar nav button:hover{background:color-mix(in srgb,var(--menu) 22%,transparent);color:#fff}.login{position:absolute;bottom:75px;left:18px;right:18px;background:transparent;color:#d8e0ed}
main{max-width:1220px;margin:auto;padding:30px}.topbar{display:flex;justify-content:flex-end;align-items:center;min-height:65px;text-align:right}.date{color:var(--muted);font-size:14px}.clock{font-size:28px;font-weight:750;letter-spacing:.04em}.badge,.impact{display:inline-block;border-radius:99px;background:color-mix(in srgb,var(--accent) 15%,var(--panel));color:var(--accent);padding:4px 9px;font-weight:700;font-size:12px}.hero{padding:32px 0 18px}.eyebrow{margin:0 0 4px;color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.hero h1{font-size:38px;line-height:1.15;margin:0 0 20px}.overall{display:inline-flex;gap:10px;align-items:center;border:1px solid var(--line);background:var(--panel);padding:12px 16px;border-radius:10px;font-weight:700}.overall span,.status-dot{width:10px;height:10px;border-radius:50%;background:var(--muted)}.overall.healthy span,.monitor.up .status-dot{background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent)}.overall.issue span,.monitor.down .status-dot{background:var(--danger)}.overall.warning span,.monitor.degraded .status-dot{background:var(--warn)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0 22px}.stats article{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:17px}.stats span{display:block;color:var(--muted);font-size:12px}.stats strong{display:block;font-size:24px;margin-top:4px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin:18px 0;padding:21px;box-shadow:0 9px 30px rgba(18,35,62,.04)}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px}.panel h2{margin:0;font-size:21px}.hint{color:var(--muted);font-size:12px}
.monitor-list{display:grid}.monitor{display:grid;grid-template-columns:18px minmax(180px,1fr) 145px 160px 44px;gap:14px;align-items:center;padding:15px 8px;border-top:1px solid var(--line);cursor:pointer}.monitor:first-child{border-top:0}.monitor:hover{background:color-mix(in srgb,var(--accent) 4%,transparent)}.monitor-main span,.metric span,.maintenance span{display:block;color:var(--muted);font-size:12px}.metric{text-align:right}.metric>strong{text-transform:capitalize}.icon{padding:5px 8px}.chevron{font-size:28px;color:var(--muted);text-align:center}
.incident{border-top:1px solid var(--line);padding:19px 2px}.incident:first-child{border-top:0}.incident.resolved{border-left:4px solid var(--accent);padding-left:14px;background:color-mix(in srgb,var(--accent) 5%,transparent)}.incident-head{display:flex;justify-content:space-between;gap:20px}.incident-head h3{margin:7px 0 0}.incident-head>span{color:var(--muted);font-size:12px}.timeline{border-left:1px solid var(--line);margin:16px 0 0 7px}.timeline>div{position:relative;padding:0 0 13px 20px}.timeline>div>span{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--accent);left:-5px;top:7px}.timeline p{margin:0}.timeline small{display:block;color:var(--muted)}.row-actions,.actions{display:flex;gap:9px;justify-content:flex-end}.maintenance{display:flex;justify-content:space-between;padding:14px 2px;border-top:1px solid var(--line)}.maintenance:first-child{border-top:0}.maintenance>div:last-child{text-align:right}.empty,.loading{padding:25px;text-align:center;color:var(--muted)}.healthy-text{color:var(--accent)}
dialog{border:0;border-radius:15px;padding:0;background:var(--panel);color:var(--text);width:min(620px,calc(100vw - 28px));box-shadow:0 25px 80px rgba(0,0,0,.3)}dialog::backdrop{background:rgba(5,10,20,.62);backdrop-filter:blur(3px)}dialog.history{width:min(1000px,calc(100vw - 28px))}.form{padding:25px}.form h2{margin-top:0}.form label{display:grid;gap:6px;color:var(--muted);font-size:13px}.form input,.form select,.form textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px;background:var(--bg);color:var(--text)}.form .check{display:flex;align-items:center;flex-direction:row}.form .check input{width:auto}.grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.wide{grid-column:1/-1}.actions{border-top:1px solid var(--line);padding-top:18px;margin-top:20px}.actions button:last-child{background:var(--accent);border-color:var(--accent);color:#07120e;font-weight:700}.danger-zone{display:flex;gap:10px;margin-top:20px;padding:14px;border:1px solid color-mix(in srgb,var(--danger) 40%,var(--line));border-radius:10px}.danger{color:#fff;background:var(--danger);border-color:var(--danger)}.error{color:var(--danger)}.range{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}.range button.active{background:var(--accent);color:#07120e;border-color:var(--accent)}.chart{min-height:280px;border:1px solid var(--line);border-radius:10px;padding:8px;overflow:hidden}.chart svg{width:100%;height:280px}.chart .gridline{stroke:var(--line);stroke-width:1}.chart .line{fill:none;stroke:var(--accent);stroke-width:3}.chart circle{fill:var(--accent);stroke:var(--panel);stroke-width:2}.chart circle.down{fill:var(--danger)}
.ticker{position:fixed;z-index:5;left:240px;right:0;bottom:0;height:42px;background:#0b1220;color:#dce5f3;display:flex;align-items:center;overflow:hidden;border-top:1px solid #273248}.ticker>strong{height:100%;display:grid;place-items:center;padding:0 15px;background:var(--accent);color:#07120e;font-size:12px;z-index:1}.ticker-track{display:flex;gap:25px;align-items:center;white-space:nowrap;padding-left:30px;animation:ticker 45s linear infinite}.ticker:hover .ticker-track{animation-play-state:paused}.ticker-track a{color:#dce5f3;text-decoration:none}.ticker-track span{color:var(--accent)}@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-60%)}}@media(prefers-reduced-motion:reduce){.ticker-track{animation:none;overflow:auto}}
@media(max-width:800px){body{padding-left:0}.sidebar{position:relative;width:auto;height:auto;padding:14px}.brand{margin:0 0 12px}.sidebar nav{display:flex;overflow:auto}.sidebar .login{position:static;width:100%;margin-top:8px}.ticker{left:0}main{padding:18px}.topbar{justify-content:space-between}.stats{grid-template-columns:1fr 1fr}.monitor{grid-template-columns:16px 1fr 75px 32px}.monitor .metric:nth-of-type(3){display:none}.grid{grid-template-columns:1fr}.wide{grid-column:auto}}
@media(max-width:480px){.hero h1{font-size:30px}.stats{grid-template-columns:1fr}.monitor{grid-template-columns:14px 1fr 65px 26px}.metric strong{font-size:12px}.hint{display:none}}