:root{--bg:#07101d;--side:#091525;--panel:#0f1d30;--line:#223750;--ink:#edf4ff;--muted:#8da2bb;--blue:#4f8cff;--green:#34d399;--yellow:#fbbf24;--red:#fb7185;--purple:#a78bfa}

*{box-sizing:border-box}

body{margin:0;background:var(--bg);color:var(--ink);font:14px Inter,Segoe UI,system-ui,sans-serif}

.side{position:fixed;inset:0 auto 0 0;width:238px;background:var(--side);border-right:1px solid var(--line);padding:22px 14px;display:flex;flex-direction:column}

.logo{display:flex;align-items:center;gap:11px;color:white;text-decoration:none;font-weight:800;padding:0 10px 22px}

.logo small{font-size:8px;color:#6f87a3;letter-spacing:.18em}

.logo-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--blue),#7c3aed);font-size:19px}

.side nav{display:grid;gap:5px}

.side nav a{display:flex;gap:11px;align-items:center;padding:11px 12px;color:#9eb1c7;text-decoration:none;border-radius:9px}

.side nav a i{font-style:normal;width:18px;text-align:center}

.side nav a:hover,.side nav a.active{background:#152945;color:#fff}

.side nav a.active{box-shadow:inset 3px 0 var(--blue)}

.side-foot{margin-top:auto;padding:12px;color:#8297af;font-size:11px}

.live-dot{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 10px var(--green);margin-right:7px}

.app{margin-left:238px;min-height:100vh}

.top{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--line);background:rgba(9,21,37,.9);position:sticky;top:0;z-index:4}

.top h1{font-size:20px;margin:0}

.top p{margin:4px 0 0;color:var(--muted);font-size:12px}

.identity{display:flex;gap:14px;align-items:center}

.identity span{display:grid;text-align:right}

.identity small{color:var(--muted);text-transform:uppercase;font-size:9px}

.identity form{margin:0}

.ghost,.btn{border:1px solid #35506e;background:#16283e;color:white;padding:9px 13px;border-radius:8px;cursor:pointer}

.btn.primary{background:var(--blue);border-color:var(--blue)}

.wrap{max-width:1450px;margin:auto;padding:25px}

.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}

.stat{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:11px;padding:16px;min-width:0}

.stat.green{border-top-color:var(--green)}

.stat.red{border-top-color:var(--red)}

.stat.yellow{border-top-color:var(--yellow)}

.stat.purple{border-top-color:var(--purple)}

.stat span,.stat small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.stat strong{display:block;font-size:26px;margin:7px 0}

.grid{display:grid;grid-template-columns:1.4fr 1fr;gap:15px;margin-top:15px}

.grid.equal{grid-template-columns:1fr 1fr}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:17px;overflow:auto}

.panel.full{margin-top:15px}

.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}

.panel h2{font-size:14px;margin:0}

.panel-head a{color:#86b1ff;text-decoration:none;font-size:12px}

table{width:100%;border-collapse:collapse}

th,td{text-align:left;padding:10px;border-bottom:1px solid #1e324a;vertical-align:top;white-space:nowrap}

th{color:#8297af;font-size:10px;text-transform:uppercase}

table thead th{cursor:pointer;user-select:none;position:relative;padding-right:24px}
table thead th:hover{color:#fff;background:#14273d}
table thead th:after{content:'↕';position:absolute;right:8px;opacity:.35;font-size:11px}
table thead th[data-sort-direction="asc"]:after{content:'↑';opacity:1;color:var(--blue)}
table thead th[data-sort-direction="desc"]:after{content:'↓';opacity:1;color:var(--blue)}

td.wrap-text{white-space:normal;max-width:400px}

tr:hover td{background:#12243a}

.badge{padding:3px 8px;border-radius:99px;font-size:10px;font-weight:700}

.good{background:#113c2b;color:#72e4ab}

.warn{background:#473817;color:#ffd66d}

.bad{background:#4a2028;color:#ff9eae}

.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:15px;background:var(--panel);border:1px solid var(--line);padding:12px;border-radius:10px}

.filters input,.filters select,.form input,.form select{background:#091625;color:white;border:1px solid #2a4563;padding:9px;border-radius:7px}

.bar-row{margin:12px 0}

.bar-row>div:first-child{display:flex;justify-content:space-between;margin-bottom:6px;color:#b7c5d7}

.bar{height:7px;background:#091625;border-radius:9px;overflow:hidden}

.bar i{display:block;height:100%;background:var(--blue)}

.bar i.red{background:var(--red)}

.bar i.green{background:var(--green)}

.bar i.purple{background:var(--purple)}

.heatmap{position:relative;height:520px;background:linear-gradient(180deg,#142942,#0a1727);border:1px solid var(--line);border-radius:10px;overflow:hidden}

.heat-dot{position:absolute;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,70,70,.46);box-shadow:0 0 22px 7px rgba(255,90,50,.35);border:1px solid rgba(255,220,120,.65)}

.heatmap.page-map{height:640px;background:linear-gradient(180deg,rgba(12,27,45,.92),rgba(5,14,25,.98)),repeating-linear-gradient(0deg,transparent,transparent 59px,#28415e 60px);box-shadow:inset 0 0 70px #020914}
.page-map:before{content:'';position:absolute;left:0;right:0;top:0;height:64px;background:#18304c;border-bottom:1px solid #35506e}
.page-map:after{content:'';position:absolute;left:4%;right:4%;top:92px;height:96px;border:1px solid #2d4865;border-radius:10px;background:linear-gradient(90deg,#142a44 68%,#1a3858 68%);box-shadow:0 145px 0 #10243a,0 290px 0 #10243a,0 435px 0 #10243a}
.heat-dot{z-index:3}
.heat-page-label{position:absolute;z-index:2;left:22px;top:20px;font-weight:700;color:#dceaff}
.heat-legend{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px}
.heat-legend i{display:inline-block;width:70px;height:9px;border-radius:10px;background:linear-gradient(90deg,#315bff,#fbbf24,#ef233c)}
.empty-heat{position:absolute;z-index:4;inset:0;display:grid;place-items:center;color:#9db0c5;text-align:center;padding:40px}
.meter{height:12px;background:#081525;border-radius:10px;overflow:hidden;margin-top:10px}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--purple));border-radius:10px}
.world-map{position:relative;aspect-ratio:2/1;border-radius:12px;overflow:hidden;background:#091725;border:1px solid var(--line)}
.world-map:before{content:'';position:absolute;inset:0;background-color:#091725;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500'%3E%3Cg fill='%231c4363' stroke='%23345f7f' stroke-width='2'%3E%3Cpath d='M55 105L105 67 170 58 214 82 244 127 219 153 188 145 173 177 138 192 108 170 72 165 43 137Z'/%3E%3Cpath d='M204 190L244 205 266 250 249 310 224 365 196 406 173 360 177 306 154 259 167 218Z'/%3E%3Cpath d='M455 95L505 71 570 78 611 96 666 86 726 103 773 89 845 112 920 145 901 180 843 189 806 169 761 203 716 193 681 220 632 198 604 161 566 154 536 176 491 158 447 139 423 112Z'/%3E%3Cpath d='M481 177L535 170 574 208 590 262 568 326 531 374 493 339 468 287 446 235Z'/%3E%3Cpath d='M790 300L836 279 884 294 915 332 889 367 840 373 803 347Z'/%3E%3Cpath d='M272 55L300 38 326 53 312 82 281 86Z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23132d45' stroke-width='1' opacity='.8'%3E%3Cpath d='M0 100H1000M0 200H1000M0 300H1000M0 400H1000M100 0V500M200 0V500M300 0V500M400 0V500M500 0V500M600 0V500M700 0V500M800 0V500M900 0V500'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:100% 100%;opacity:.95}
.geo-dot{position:absolute;z-index:2;transform:translate(-50%,-50%);border-radius:50%;background:#ff344d;box-shadow:0 0 20px 7px rgba(255,45,67,.45);border:1px solid #ffd2d7}

.form{max-width:560px;display:grid;gap:10px}

.form label{display:grid;gap:6px;color:#a9bbcf}

.notice{padding:12px;border-radius:8px;margin-bottom:12px}

.notice.ok{background:#123927;color:#8ce5b5}

.notice.error{background:#452029;color:#ffabb8}

.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top,#122b4d,#07101d 55%)}

.login form{width:min(410px,92vw);background:var(--panel);border:1px solid var(--line);padding:30px;border-radius:16px}

.login input{width:100%;padding:12px;margin:7px 0;background:#081525;border:1px solid #315071;color:#fff;border-radius:8px}

.login button{width:100%;padding:12px;background:var(--blue);border:0;color:#fff;border-radius:8px;font-weight:700}

.error{color:#ff9fae}

code{color:#b9d2ee;white-space:pre-wrap}

.empty{padding:30px;text-align:center;color:var(--muted)}

@media(max-width:1150px){.stats{grid-template-columns:repeat(3,1fr)}

}

@media(max-width:850px){.side{width:70px}

.side .logo span:last-child,.side nav a{font-size:0}

.app{margin-left:70px}

.grid{grid-template-columns:1fr}

.top{padding:0 16px}

}

@media(max-width:560px){.stats{grid-template-columns:1fr 1fr}

.wrap{padding:14px}

.identity span{display:none}

}

.wrap{max-width:1580px;padding:28px}

.stats{grid-template-columns:repeat(4,minmax(220px,1fr));gap:15px}

.live-toast{position:fixed;right:20px;bottom:20px;background:#153a2d;color:#8ce5b5;padding:10px 14px;border:1px solid #285a47;border-radius:8px;z-index:20}

@media(max-width:1150px){.stats{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:560px){.stats{grid-template-columns:1fr 1fr}
.wrap{padding:14px}
}

.world-map{aspect-ratio:784.077/458.627;background:radial-gradient(circle at center,rgba(79,140,255,.1),transparent 62%),#091725}
.world-map:before{background-color:transparent;background-image:url('maps/world-map.min.svg');background-repeat:no-repeat;background-position:center;background-size:contain;filter:invert(61%) sepia(24%) saturate(1225%) hue-rotate(178deg) brightness(88%) contrast(88%);opacity:.7}
.compact-filter{justify-content:flex-end;background:transparent;border:0;padding:0}.welcome-chart-grid{grid-template-columns:1.65fr 1fr}.chart-panel{overflow:hidden}.line-chart{display:block;width:100%;height:240px;margin-top:8px;overflow:visible}.line-chart polyline{fill:none;stroke:#70a5ff;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(79,140,255,.45))}.line-chart .chart-area{fill:url(#area)}.chart-axis{display:flex;justify-content:space-between;color:var(--muted);font-size:10px}.funnel{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0}.funnel div{display:flex;justify-content:space-between;padding:11px 15px;border-radius:7px;color:#fff;background:linear-gradient(90deg,#315fba,#744fc4)}.funnel div:nth-child(3),.funnel div:nth-child(4){background:linear-gradient(90deg,#256f65,#34a57a)}.chart-note{text-align:center;color:var(--muted);font-size:11px}.column-chart{height:210px;display:flex;align-items:end;gap:5px;padding:15px 2px 22px;border-bottom:1px solid var(--line)}.column-chart>div{position:relative;flex:1;height:100%;display:flex;align-items:end}.column-chart i{display:block;width:100%;min-height:3px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#6d9cff,#3e62b5)}.column-chart small{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;color:var(--muted);font-size:8px}.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.audience-grid>div{padding:16px;background:#0a1727;border:1px solid var(--line);border-radius:9px}.audience-grid span,.audience-grid small{display:block;color:var(--muted);font-size:10px}.audience-grid strong{display:block;margin:7px 0;font-size:20px}.contact-mini{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.contact-mini span{display:flex;gap:10px;padding:7px 10px;border-radius:20px;background:#10243a;color:var(--muted)}.contact-mini b{color:var(--ink)}@media(max-width:900px){.welcome-chart-grid{grid-template-columns:1fr}.audience-grid{grid-template-columns:1fr 1fr}}
.network-chart-grid{grid-template-columns:1.45fr 1fr}.signal-chart{display:flex;align-items:center;justify-content:center;gap:28px;padding:14px}.signal-ring{--ring:#34d399;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--ring) calc(var(--score)*1%),#091625 0);position:relative}.signal-ring:before{content:'';position:absolute;inset:15px;border-radius:50%;background:var(--panel)}.signal-ring.red{--ring:var(--red)}.signal-ring.yellow{--ring:var(--yellow)}.signal-ring span{position:relative;text-align:center}.signal-ring b{display:block;font-size:30px}.signal-ring small{color:var(--muted)}.signal-list{display:grid;gap:10px;min-width:130px}.signal-list span,.tech-summary span{display:flex;justify-content:space-between;gap:20px;color:var(--muted)}.signal-list b,.tech-summary b{color:var(--ink)}.delivery-chart{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.delivery-chart>div{position:relative;padding:18px;border:1px solid var(--line);border-radius:10px;overflow:hidden}.delivery-chart>div:after{content:'';position:absolute;left:0;right:calc(100% - var(--part)*1%);bottom:0;height:4px;background:var(--green)}.delivery-chart .pending:after{background:var(--yellow)}.delivery-chart .failed:after{background:var(--red)}.delivery-chart b{display:block;font-size:25px}.delivery-chart span{color:var(--muted);font-size:10px}.tech-summary{display:grid;gap:8px;margin-top:17px;padding-top:13px;border-top:1px solid var(--line)}.message-list{display:grid}.message-list>div{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line)}.message-list>div:last-child{border:0}.message-list span:nth-child(2){display:grid;gap:3px}.message-list small{color:var(--muted)}.message-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;color:#9cc4ff;background:#102b4d;font-weight:800}@media(max-width:900px){.network-chart-grid{grid-template-columns:1fr}.delivery-chart{grid-template-columns:1fr}.signal-chart{flex-direction:column}}
.overview-stats{grid-template-columns:repeat(4,minmax(210px,1fr))}.overview-links{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:15px}.overview-links a{display:flex;flex-direction:column;gap:5px;padding:15px 17px;color:var(--ink);text-decoration:none;background:#0b192a;border:1px solid var(--line);border-radius:10px;transition:.18s}.overview-links a:hover{transform:translateY(-2px);border-color:#4f8cff;background:#10213a}.overview-links span{color:var(--muted);font-size:11px}.overview-grid .panel{min-height:235px}.health-line{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-top:1px solid #1e324a}.compact-empty{padding:24px 10px}.panel-head>div h2{margin-bottom:4px}@media(max-width:1000px){.overview-links{grid-template-columns:1fr 1fr}}@media(max-width:560px){.overview-stats,.overview-links{grid-template-columns:1fr}}