:root{
  --bg:#010c16; --side:#02131f; --top:#021422; --card:#05121f; --card2:#071a2a; --line:#0f2639; --line2:#12304a;
  --tx:#e9f0ff; --sub:#8fa0bd; --mut:#6f809e; --blue:#2f7bff; --blue2:#3b9bff; --green:#22c55e; --red:#ef4444; --yellow:#f5b301;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--tx);letter-spacing:-.012em;font:400 14px/1.35 "IBM Plex Sans","Segoe UI",system-ui,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}
.hidden{display:none!important}
svg{display:block}
[data-i] svg{width:100%;height:100%}
a{color:inherit;text-decoration:none;cursor:pointer}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.app{display:grid;grid-template-columns:242px 1fr;height:100vh;overflow:hidden}
.app.collapsed{grid-template-columns:0 1fr}.app.collapsed .sidebar{display:none}

/* ---------- sidebar */
.sidebar{background:linear-gradient(180deg,#031522,#02111c);border-right:1px solid #0b2233;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;display:flex;flex-direction:column;padding-bottom:10px}
.sidebar::-webkit-scrollbar{display:none}
.brand{height:84px;display:flex;align-items:flex-start;padding:4px 10px 0 14px;border-bottom:1px solid #0b2133;flex:none}
.brand-logo{width:80px;height:auto;margin-top:2px;mix-blend-mode:screen}
.brand-text{margin-left:4px;padding-top:14px;line-height:1.05}
.brand-text b{display:block;font-size:24px;font-weight:600;letter-spacing:.2px}
.brand-text span{display:block;font-size:20px;font-weight:500;color:#b7c8e2;margin-top:3px}
.nav{padding:14px 10px 0;flex:none}
.nav a{display:flex;align-items:center;height:46px;margin-bottom:2px;border-radius:9px;padding:0 10px 0 15px;color:#d4deef;font-size:14.5px;font-weight:400;border:1px solid transparent;white-space:nowrap}
.nav a .ni{width:23px;height:23px;margin-right:19px;color:#c8d6ee;flex:none}
.nav a:hover{background:#06203a}
.nav a.active{background:linear-gradient(90deg,#0a4fd8 0%,#063aa8 55%,#032a78 100%);border-color:#1a6be0;color:#fff;box-shadow:0 0 18px rgba(20,100,255,.30),inset 0 1px 0 rgba(255,255,255,.12)}
.nav a.active .ni{color:#fff}
.nav .bd{margin-left:auto;min-width:51px;height:24px;border-radius:12px;padding:0 10px;font-size:13px;font-weight:600;line-height:23px;text-align:center;background:#0a1d34;border:1px solid #14304d;color:#e6eefc}
.nav .bd.g{background:#17b968;border-color:#22d17c;color:#fff}
.nav .bd.r{background:#d9232d;border-color:#f0424b;color:#fff}
.dl-card{margin:21px 12px 0;height:85px;border:1px solid #0f2236;background:#061224;border-radius:10px;display:flex;align-items:center;padding:0 14px 0 14px;flex:none}
.dl-ico{width:46px;height:46px;border-radius:11px;background:#0b2a58;color:#3b9bff;padding:11px;flex:none}
.dl-txt{margin-left:14px;line-height:1.35;min-width:0}
.dl-txt b{display:block;font-size:14px;font-weight:600;white-space:nowrap}
.dl-txt span{display:block;color:var(--sub);font-size:13.5px;margin-top:1px}
.dl-txt em{display:flex;align-items:center;gap:7px;font-style:normal;color:#2fd37a;font-size:13.5px;margin-top:2px}
.dl-txt em i{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e}
.promo{position:relative;margin:13px 12px 0;height:155px;border:1px solid #0f2236;border-radius:10px;overflow:hidden;background:radial-gradient(120% 90% at 30% 40%,#05213a,#000f18);flex:none}
.promo>img{position:absolute;left:0;bottom:0;height:153px;width:auto}
.promo-txt{position:absolute;left:103px;top:18px;line-height:1.12}
.promo-txt b{display:block;font-size:20px;font-weight:700}
.promo-txt strong{display:block;font-size:20px;font-weight:500;color:#9bd3ff;margin-top:2px}
.promo-txt span{display:block;font-size:12.5px;color:#4fd6c8;margin-top:9px;white-space:nowrap}
.promo-btn{position:absolute;left:19px;right:13px;bottom:12px;height:39px;border-radius:9px;background:linear-gradient(90deg,#3b47e9,#0a58e6 55%,#0052df);display:flex;align-items:center;justify-content:center;gap:12px;font-size:15px;font-weight:600;box-shadow:0 0 16px rgba(30,90,255,.45),inset 0 1px 0 rgba(255,255,255,.2)}
.promo-btn .dlicon{width:18px;height:18px;color:#cfe0ff}
.foot{padding:19px 22px 8px;color:#8a98b2;font-size:13.5px;line-height:22px;margin-top:auto}

/* ---------- top bar */
.mainwrap{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:radial-gradient(900px 400px at 70% 0,#031a2b,transparent),var(--bg)}
.top{height:63px;flex:none;display:flex;align-items:center;gap:0;padding:0 14px 0 14px;background:var(--top);border-bottom:1px solid #0b2133}
.burger{width:24px;height:24px;color:#dbe6fa;margin-left:10px}
.vsep{width:1px;height:32px;background:#0d2336;margin:0 14px 0 17px}
.search{display:flex;align-items:center;width:413px;height:38px;border:1px solid var(--line2);background:#03192b;border-radius:10px;padding:0 14px;gap:12px;color:#c6d4ea}
.search span{width:21px;height:21px;flex:none}
.search input{flex:1;background:none;border:0;outline:0;color:#eaf1ff;font:inherit;font-size:14.5px;min-width:0}
.search input::placeholder{color:#9cb0cb}
.top-right{margin-left:auto;display:flex;align-items:center;gap:0}
.demo-chip{margin-right:12px;padding:3px 9px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.08em;background:#3a2a05;color:#fbbf24;border:1px solid #6b4d0a}
.online{display:flex;align-items:center;gap:9px;height:36px;padding:0 14px;border-radius:9px;background:#02281a;border:1px solid #0f5a34;color:#22d27a;font-size:14px;font-weight:500}
.online i{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 9px #22c55e}
.online.off{background:#2a0a0f;border-color:#6b1b24;color:#ff7a85}.online.off i{background:#ef4444;box-shadow:0 0 9px #ef4444}
.bell,.gear{position:relative;width:28px;height:28px;color:#dbe6fa;margin-left:28px}
.gear{margin-left:25px;margin-right:27px}
.bell b{position:absolute;right:-12px;top:-14px;min-width:22px;height:22px;border-radius:11px;background:#ef2f3c;color:#fff;font-size:11.5px;line-height:22px;font-weight:700;text-align:center;padding:0 5px;box-shadow:0 0 10px rgba(239,47,60,.6)}
.admin{position:relative;display:flex;align-items:center;gap:9px;height:38px;width:143px;padding:0 12px 0 11px;border:1px solid var(--line2);background:#03192b;border-radius:10px;cursor:pointer}
.admin .av{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#e2eeff 0 24%,#3b8bff 26% 100%);border:1px solid #6fb0ff;flex:none}
.admin b{font-size:14.5px;font-weight:500}
.admin .crown{display:block;width:17px;height:17px;color:#f5b301;flex:none}.admin .chev{display:block;width:15px;height:15px;color:#c6d4ea;margin-left:auto;flex:none}
.menu{position:absolute;right:0;top:44px;z-index:20;min-width:190px;background:#04192b;border:1px solid var(--line2);border-radius:10px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.menu a{display:block;padding:9px 12px;border-radius:7px;font-size:14px;color:#d4deef}.menu a:hover{background:#0a2a47}

/* ---------- content grid */
.content{flex:1;overflow:auto;padding:13px 14px 14px 13px;display:flex;flex-direction:column;gap:11px;min-height:0}
.row{display:grid;gap:13px;flex:none}
.r1{grid-template-columns:302fr 292fr 315fr 320fr;height:106px;gap:13px}
.r2{grid-template-columns:791fr 461fr;height:209px}
.r3{grid-template-columns:826fr 427fr;height:278px;gap:12px}
.r4{grid-template-columns:718fr 534fr;height:307px}
.card{position:relative;background:linear-gradient(180deg,#061523,#04101c);border:1px solid var(--line);border-radius:10px;min-width:0;overflow:hidden}
.ch{display:flex;align-items:center;height:48px;padding:0 16px 0 15px;gap:11px}
.ch h3{font-size:17px;font-weight:600;letter-spacing:.1px;white-space:nowrap}
.ch h3 em{font-style:normal;color:#3ddc84;font-weight:600}.ch h3 em.red{color:#ff4d5e}
.gd{width:11px;height:11px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px #22c55e;flex:none;margin-left:3px;margin-right:2px}.gd.red{background:#ef4444;box-shadow:0 0 10px #ef4444}
.hi{width:18px;height:18px;color:#c8d6ee;flex:none;margin-left:2px}
.range{margin-left:auto;display:flex;align-items:center;gap:6px;color:#3b9bff;font-size:13.5px}
.s12{width:12px;height:12px;display:inline-block}.s14{width:14px;height:14px;display:inline-block;vertical-align:-2px}
.more{margin-left:auto;color:#3b9bff;font-size:13.5px;display:inline-flex;align-items:center;gap:6px}.more.r{margin-left:auto}

/* stat cards */
.stat{display:flex;align-items:center;padding:0 16px 0 12px;height:106px;border-radius:10px;border:1px solid;position:relative;overflow:hidden}
.stat.s-blue{background:linear-gradient(100deg,#011c3a,#031428);border-color:#10354d}
.stat.s-green{background:linear-gradient(100deg,#022327,#02161a);border-color:#0e3a36}
.stat.s-red{background:linear-gradient(100deg,#1d1020,#150d17);border-color:#3a2030}
.stat .ic{width:67px;height:67px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;margin-right:17px}
.s-blue .ic{background:radial-gradient(circle,#0e2f66,#0a2250);color:#2f8cff}
.s-green .ic{background:radial-gradient(circle,#0e4a30,#0a3524);color:#25d366}
.s-red .ic{background:radial-gradient(circle,#4a1222,#3a0e1b);color:#f0364a}
.stat .ic svg{width:40px;height:40px}
.stat .tt{flex:1;min-width:0;line-height:1.2}
.stat .tt p{font-size:14.5px;font-weight:500;color:#eaf1ff;white-space:nowrap}
.stat .tt strong{display:block;font-size:29px;font-weight:600;margin:2px 0 2px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .tt span{font-size:13.5px;color:#a2b1ca;white-space:nowrap}
.stat .tt span.up{color:#2fd37a}.stat .tt span.upr{color:#ff5a66}
.bars{display:flex;align-items:flex-end;gap:1.9px;height:46px;margin-left:8px;flex:none}
.bars i{display:block;width:3px;border-radius:1px 1px 0 0;transition:height .6s ease}
.s-blue .bars i{background:#1f86f5}.s-green .bars i{background:#22c55e}.s-red .bars i{background:#ef3b4a}

/* live chart */
.chart{position:absolute;left:0;right:0;top:44px;bottom:0}
.chart svg{width:100%;height:100%;overflow:visible}
.chart text{fill:#d0dbee;font:400 13px "IBM Plex Sans",sans-serif}
.tip{fill:#041a2a;stroke:#12304a}
/* donut */
.dist-body{display:flex;align-items:center;height:calc(100% - 52px);padding:0 14px 0 30px}
.donut{position:relative;width:156px;height:156px;flex:none}
.donut svg{width:156px;height:156px;transform:rotate(-90deg)}
.donut .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.25}
.donut .mid b{font-size:23px;font-weight:700}.donut .mid span{font-size:14.5px;color:#cbd7ea}
.legend{margin-left:38px;flex:1;font-size:14.5px}
.legend div{display:grid;grid-template-columns:20px 80px 42px 1fr;align-items:center;height:38.5px;color:#e6eefc}
.legend i{width:17px;height:17px;border-radius:50%}
.legend span:nth-child(4){text-align:right;color:#e6eefc}.legend span:nth-child(3){text-align:right;padding-right:4px}

/* tables */
table{border-collapse:collapse;width:100%}
th{font-weight:500;color:#aab8d0;font-size:12.5px;text-align:left;height:28px;white-space:nowrap}
td{font-size:13px;color:#e6eefc;height:21.7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cty-body{display:flex;height:calc(100% - 48px)}
.map{width:498px;flex:none;margin-left:5px;margin-top:-8px}
.map canvas{width:498px;height:238px;display:block}
.cty-tbl{flex:1;padding:0 11px 0 12px;position:relative;margin-top:-26px}
.cty-tbl .more{position:absolute;right:15px;top:-10px}
.cty-tbl table{margin-top:12px}
.cty-tbl th:nth-child(2),.cty-tbl td:nth-child(2){text-align:right;padding-right:20px;width:70px}
.cty-tbl th:first-child{padding-left:2px}
.cty-tbl td:first-child{display:flex;align-items:center;gap:8px}
.cty-tbl tr:nth-child(even) td{background:rgba(10,30,48,.35)}
.fl{width:19px;height:13px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.pc{display:flex;align-items:center;gap:7px}.pc span{width:40px}
.pc i{display:block;height:6px;border-radius:3px;background:#e5322d}
.pc.o i{background:#d9432e}
.ver table{margin:0}
.ver .ch{height:46px}
.ver{padding:0 12px 0 14px}.ver .ch{padding:0 4px 0 0}
.ver th,.ver td{padding-left:12px}.ver td{height:27.6px;font-size:14px}
.ver tr:nth-child(even) td{background:rgba(10,30,48,.35)}
.ver td:nth-child(2),.ver th:nth-child(2){text-align:left;width:90px}
.vb{display:flex;align-items:center;gap:12px}.vb span{width:46px;color:#e6eefc}
.vb div{width:140px;height:11px;border-radius:6px;background:#0d2236;position:relative;overflow:hidden}
.vb div i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:linear-gradient(90deg,#2a6bf0,#3b9bff)}
.ver td em{font-style:normal;color:#3ddc84}
.dt{margin:0}
.rd,.re{padding:0 6px}
.rd .ch,.re .ch{padding:0 8px 0 9px;height:42px}
.dt th{padding-left:11px}.dt td{padding-left:11px;height:22.8px}
.dt thead tr{background:rgba(10,30,48,.55)}
.dt tbody tr:nth-child(odd) td{background:rgba(8,26,42,.6)}
.dt td a.id{color:#3b9bff;display:flex;align-items:center;gap:7px}.dt td a.id svg{width:15px;height:15px}
.cc{display:flex;align-items:center;gap:7px}
.st{display:flex;align-items:center;gap:7px;color:#2fd37a}.st i{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e}
.st.off{color:#ff6b78}.st.off i{background:#ef4444;box-shadow:0 0 6px #ef4444}
.er{display:flex;align-items:center;gap:7px}.er svg{width:14px;height:14px;flex:none}
.sev{display:inline-flex;width:16px;height:16px;border-radius:50%;align-items:center;justify-content:center;margin-right:8px;vertical-align:-3px}
.sev svg{width:10px;height:10px}
.t-net{color:#ff6b4a}.t-api{color:#ff5a66}.t-crash{color:#ff4d5e}.t-sys{color:#ff9a3d}.t-upd{color:#ff5a66}.t-warn{color:#f5b301}
.empty{padding:34px;color:var(--mut);text-align:center;font-size:13.5px}
.flash{animation:flash 1.2s ease}
@keyframes flash{0%{background:rgba(34,197,94,.28)}100%{background:transparent}}

/* login / placeholder */
.login{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:radial-gradient(800px 500px at 50% 30%,#06223a,#010a12)}
.login-card{width:360px;padding:30px 30px 24px;border:1px solid var(--line2);border-radius:14px;background:linear-gradient(180deg,#061a2c,#04111d);box-shadow:0 20px 60px rgba(0,0,0,.6);text-align:center}
.login-logo{width:84px;mix-blend-mode:screen}
.login-card h1{font-size:22px;font-weight:600;margin-top:6px}.login-card h1 span{color:#9bd3ff;font-weight:500}
.login-card p{color:var(--sub);margin:6px 0 18px;font-size:13.5px}
.login-card input{display:block;width:100%;height:42px;margin-bottom:10px;border-radius:9px;border:1px solid var(--line2);background:#031a2c;color:#eaf1ff;padding:0 14px;font:inherit;outline:0}
.login-card input:focus{border-color:#2f7bff}
.login-card button{width:100%;height:42px;border-radius:9px;background:linear-gradient(90deg,#2a52e8,#0a6be8);font-weight:600;font-size:15px;margin-top:4px;box-shadow:0 0 16px rgba(30,90,255,.4)}
.login-err{color:#ff7a85;font-size:13px;min-height:18px;text-align:left}
.login-demo{display:inline-block;margin-top:14px;color:#3b9bff;font-size:13px}
.placeholder{align-items:center;justify-content:center}
.ph{text-align:center;color:var(--sub)}.ph span{display:block;width:44px;height:44px;margin:0 auto 12px;color:#3b9bff}.ph h2{color:var(--tx);font-size:22px;margin-bottom:6px}

@media (max-width:1100px){
  .app{grid-template-columns:0 1fr}.sidebar{display:none}.app.open{grid-template-columns:242px 1fr}.app.open .sidebar{display:flex;position:fixed;z-index:30;height:100vh;width:242px}
  .row{grid-template-columns:1fr!important;height:auto!important}.card{min-height:260px}.stat{height:106px}.chart{position:relative;top:0;height:170px}
  body{overflow:auto}.app{height:auto;min-height:100vh}.search{width:auto;flex:1}.top-right .online,.demo-chip{display:none}
  .cty-body{flex-direction:column}.map{width:100%}.map canvas{width:100%}
}

/* fixed column widths for the two bottom tables (match the reference grid) */
.dt{table-layout:fixed}
.dt td,.dt th{padding:0 4px 0 0;text-overflow:ellipsis;overflow:hidden}
.dt td:first-child,.dt th:first-child{padding-left:10px}
#devTbl th:nth-child(1){width:113px}#devTbl th:nth-child(2){width:104px}#devTbl th:nth-child(3){width:92px}#devTbl th:nth-child(4){width:75px}#devTbl th:nth-child(5){width:63px}#devTbl th:nth-child(6){width:82px}#devTbl th:nth-child(7){width:82px}
#errTbl th:nth-child(1){width:98px}#errTbl th:nth-child(2){width:78px}#errTbl th:nth-child(3){width:90px}#errTbl th:nth-child(4){width:190px}
.cty-tbl table{table-layout:fixed}.cty-tbl th:nth-child(1){width:128px}.cty-tbl th:nth-child(2){width:72px}
.ver table{table-layout:fixed}.ver th:nth-child(1){width:110px}
.bell{display:block}.bell svg{width:26px;height:26px}
.dt td{font-size:12.6px}.dt th{font-size:12.3px}.dt .cc{gap:6px}.dt td a.id{gap:6px}