@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#07111f;--side:#091523;--panel:#0d1b2b;--panel2:#102235;--line:#1b3044;--text:#e9f2fa;--muted:#8195a9;--cyan:#39c9e7;--green:#39d69a;--orange:#f5a84c;--red:#ff6578;--purple:#b69cff;--mono:'DM Mono',monospace;--sans:'Manrope',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px var(--sans);min-height:100vh}.shell{display:flex;min-height:100vh}.sidebar{width:248px;background:linear-gradient(180deg,#091726,#07111d);border-right:1px solid var(--line);padding:22px 15px 15px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:500}.brand{display:flex;align-items:center;gap:11px;padding:0 8px 23px}.brandmark{width:38px;height:38px;border:1px solid #2a7184;border-radius:11px;display:grid;place-items:center;font-size:22px;font-weight:800;color:#dffaff;background:linear-gradient(145deg,#12354b,#0c1b2b);box-shadow:0 0 24px #27c4df18}.brandmark span{color:var(--cyan)}.brand b{display:block;font-size:12px;letter-spacing:1.3px}.brand small{display:block;color:#6d8a9e;font:9px var(--mono);letter-spacing:1px;margin-top:4px}.live-state{height:34px;background:#0d2631;border:1px solid #17424d;border-radius:6px;display:flex;align-items:center;gap:8px;padding:0 10px;margin:0 4px 20px;color:#8ad9e5;font:9px var(--mono);letter-spacing:.6px}.live-state i,.eyebrow i,.pulse{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px #39d69a;display:inline-block}.live-state em{font-style:normal;margin-left:auto;color:#b4c9d6}.navlabel{font:9px var(--mono);letter-spacing:1.5px;color:#587188;padding:14px 10px 7px}.nav{border:0;background:transparent;color:#8fa5b8;width:100%;height:39px;border-radius:6px;text-align:left;padding:0 10px;display:flex;align-items:center;gap:11px;font:600 12px var(--sans);cursor:pointer;margin:2px 0}.nav span{font-size:17px;width:17px;color:#6d91a8;text-align:center}.nav:hover,.nav.active{background:#11283a;color:#eafaff}.nav.active{box-shadow:inset 2px 0 var(--cyan)}.nav.active span{color:var(--cyan)}.navcount{margin-left:auto;font:9px var(--mono);color:var(--green)}.sidebottom{margin-top:auto}.sourcepill{border:1px solid var(--line);background:#0d1b29;border-radius:7px;padding:10px;display:flex;gap:9px;align-items:center}.sourcepill b{font:9px var(--mono);letter-spacing:1px}.sourcepill small{display:block;color:var(--orange);font:9px var(--mono);margin-top:4px}.pulse{width:7px;height:7px}.loginbtn{width:100%;margin:10px 0;border:1px solid #25506a;background:#10273a;color:#d9f7ff;border-radius:6px;padding:11px;font:600 11px var(--sans);cursor:pointer}.loginbtn:hover{border-color:var(--cyan)}.version{display:block;text-align:center;color:#50677c;font:8px var(--mono);letter-spacing:.8px}.main{margin-left:248px;width:calc(100% - 248px);min-width:0}.topbar{height:64px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#091624eF;position:sticky;top:0;z-index:400;backdrop-filter:blur(14px)}.crumb{display:flex;gap:11px;align-items:center;font:10px var(--mono);letter-spacing:.7px;color:#688196}.crumb b{color:#30485c}.crumb strong{font:600 12px var(--sans);color:#e1edf6;letter-spacing:0}.topactions{display:flex;align-items:center;gap:12px}.demo-tag{font:9px var(--mono);letter-spacing:.7px;color:var(--orange);border:1px solid #73512d;background:#38281750;padding:7px 9px;border-radius:4px}.iconbtn,.userchip{background:#102337;border:1px solid var(--line);color:#b9d2e4;border-radius:6px;padding:7px 10px;cursor:pointer}.userchip{font:11px var(--mono)}.userchip span{margin-left:8px;color:#7890a5}.content{padding:26px 30px 18px;max-width:1800px;margin:auto}.hidden{display:none!important}.hero{display:flex;justify-content:space-between;align-items:center;padding:13px 3px 27px}.eyebrow{font:9px var(--mono);letter-spacing:1.8px;color:#6c9ab0;margin-bottom:9px}.eyebrow i{margin-right:7px}.hero h1,.pageintro h1{font-size:32px;letter-spacing:-1.4px;margin:0;font-weight:700}.hero h1 span,.pageintro h1 span{color:var(--cyan)}.hero p,.pageintro p{color:var(--muted);font-size:12px;margin:9px 0 0}.hero-date{font:10px var(--mono);letter-spacing:1.2px;color:#a9c1d2;text-align:right}.hero-note{font-size:10px;color:#69849a;text-align:right;line-height:1.7;margin-top:8px}.statgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:25px}.stat{background:linear-gradient(145deg,#102235,#0c1b2a);border:1px solid var(--line);border-radius:8px;padding:15px 16px 10px;min-height:130px;position:relative;overflow:hidden}.stathead{font:9px var(--mono);letter-spacing:1px;color:#8ca4b7;display:flex;justify-content:space-between}.stathead span{color:var(--cyan);font-size:15px}.stat strong{display:block;font:700 30px var(--sans);letter-spacing:-1px;margin:10px 0 3px;color:#f2f8fc}.stat small{font-size:9px;color:#7790a4}.up{color:var(--green);font-style:normal}.sparkline{height:21px;position:absolute;right:14px;bottom:10px;width:86px;opacity:.8}.sparkline svg{width:100%;height:100%;overflow:visible}.sectionhead{display:flex;justify-content:space-between;align-items:end;margin:0 0 12px}.sectionhead h2{font-size:17px;margin:0}.textbtn,.panel-link{border:0;background:none;color:var(--cyan);font:10px var(--mono);cursor:pointer}.dashboardgrid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(270px,.8fr);gap:13px}.panel{background:linear-gradient(150deg,#0e1d2d,#0b1927);border:1px solid var(--line);border-radius:8px;min-width:0;overflow:hidden}.panelhead{min-height:58px;padding:13px 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1a3042;gap:10px}.panelhead b{font:10px var(--mono);letter-spacing:.8px;color:#d7e7f2}.panelhead small{display:block;color:#6e879c;font-size:9px;margin-top:5px}.maptools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.legend{font:9px var(--mono);color:#91a8b8;white-space:nowrap}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}.cyan{background:var(--cyan)}.green{background:var(--green)}.orange{background:var(--orange)}.tinybtn{background:#10283a;border:1px solid #25475d;border-radius:4px;color:#9ddff0;font:9px var(--mono);padding:7px 9px;cursor:pointer}.tinybtn:hover,.tinybtn.active{background:#153b4d;border-color:#3688a0}.map{height:340px;background:#0a1b29}.map .leaflet-container{background:#0b1d2c}.mapfoot{display:flex;justify-content:space-between;gap:10px;padding:9px 13px;color:#678197;font:8px var(--mono);letter-spacing:.3px;border-top:1px solid #1a3042}.rightstack{display:grid;grid-template-rows:1fr auto;gap:13px}.livebadge{font:8px var(--mono);color:var(--green);white-space:nowrap}.eventlist{padding:3px 13px}.event{display:grid;grid-template-columns:43px 1fr auto;gap:9px;padding:10px 0;border-bottom:1px solid #172b3c;align-items:center}.event:last-child{border:0}.eventtime{font:9px var(--mono);color:#607e94}.eventmain b{display:block;font-size:10px;color:#d5e5ef}.eventmain small{display:block;font:9px var(--mono);color:#6d879b;margin-top:4px}.eventtype{font:8px var(--mono);padding:4px 5px;border-radius:3px;background:#183347;color:var(--cyan)}.panel-link{padding:10px 14px;border-top:1px solid #1a3042;width:100%;text-align:left}.mini-panel{padding-bottom:13px}.signalbars{padding:12px 15px}.signalbars>div:not(.bar){display:flex;justify-content:space-between;font:8px var(--mono);color:#7892a6;margin:5px 0}.bar{height:4px;background:#1b3041;border-radius:4px;margin-bottom:9px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#25aeca,#42d6a1);border-radius:4px}.bottomgrid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:13px;margin-top:13px}.typechart{padding:14px}.type-row{display:grid;grid-template-columns:95px 1fr 32px;gap:8px;align-items:center;margin:11px 0;font:9px var(--mono);color:#8aa2b4}.typebar{height:6px;background:#1b3041;border-radius:5px;overflow:hidden}.typebar i{height:100%;display:block;border-radius:5px;background:var(--cyan)}.regionlist{padding:6px 14px 12px}.region{display:grid;grid-template-columns:1fr 2fr 30px;gap:9px;align-items:center;padding:9px 0;border-bottom:1px solid #172b3b;font-size:9px;color:#a7bdcc}.region:last-child{border:0}.regionbar{height:4px;background:#1c3041;border-radius:4px;overflow:hidden}.regionbar i{display:block;height:100%;background:linear-gradient(90deg,#187d9b,#3ccde3)}.region strong{text-align:right;font:10px var(--mono);color:#d5e9f4}.systemrows{padding:8px 14px 12px}.systemrows>div{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #172b3b;font-size:9px;color:#8ca4b5}.systemrows>div:last-child{border:0}.systemrows b{font:8px var(--mono);text-align:right}.ok{color:var(--green)}.warn{color:var(--orange)}.footer{border-top:1px solid var(--line);margin:15px 30px 0;padding:15px 0 20px;color:#526d82;font:8px var(--mono);letter-spacing:.8px}.footer span{float:right;letter-spacing:0;font-family:var(--sans)}.pageintro{display:flex;justify-content:space-between;align-items:end;gap:18px;margin:8px 0 22px}.pageintro h1{font-size:29px}.mapfilters,.toolbar{display:flex;gap:7px;align-items:center;flex-wrap:wrap}select,input{font:10px var(--mono);color:#bcd0df;background:#0d2030;border:1px solid #274156;border-radius:4px;padding:9px 10px;outline:none}select:focus,input:focus{border-color:#38b9d4}.fullmap{height:calc(100vh - 280px);min-height:480px}.fullmap-panel{margin-bottom:12px}.tablewrap{overflow:auto}table{border-collapse:collapse;width:100%;min-width:850px}th{text-align:left;font:8px var(--mono);letter-spacing:.8px;color:#6d879c;background:#0b1926;padding:12px 13px;white-space:nowrap}td{padding:12px 13px;border-top:1px solid #182d3e;color:#b4c7d5;font:9px var(--mono);white-space:nowrap}tbody tr:hover{background:#12283a}.kind{padding:4px 6px;border-radius:3px;background:#173346;color:var(--cyan);font-size:8px}.kind.text{color:#ff9e9e;background:#3b222b}.kind.position{color:#85d9f4}.kind.telemetry{color:#76dfb4;background:#14352e}.kind.nodeinfo{color:#c3a7ff;background:#2b2340}.kind.routing{color:#ffbc70;background:#3b2c1c}.notice{padding:12px 14px;margin-top:13px;border:1px solid #29445a;border-left:3px solid var(--cyan);background:#0e2130;color:#8ea8ba;border-radius:5px;font-size:10px;line-height:1.6}.notice.warning{border-left-color:var(--orange);border-color:#57432a;background:#281f16;color:#cbb18e}.graph{height:500px;background:radial-gradient(ellipse at center,#10283a,#091724);position:relative}.graph svg{width:100%;height:100%}.replay-panel{padding:20px}.replaycontrols{display:flex;gap:13px;align-items:end;flex-wrap:wrap}.replaycontrols label,.formgrid label{display:flex;flex-direction:column;gap:7px;font:9px var(--mono);color:#7892a6}.primary{border:1px solid #27869b;background:linear-gradient(90deg,#12617a,#117e8f);color:#eaffff;border-radius:5px;padding:10px 14px;font:10px var(--mono);cursor:pointer}.timeline{padding:45px 5px 20px}.timeline-track{height:5px;background:#1b3447;border-radius:4px;position:relative}.timeline-track i{display:block;width:0;height:100%;background:var(--cyan);border-radius:4px}.timeline input{width:100%;margin-top:-11px;position:relative;appearance:none;height:3px;padding:0;background:transparent;border:0}.timeline input::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px #39c9e7}.replayresult{font-size:10px;color:#8098aa;border-top:1px solid var(--line);padding-top:15px}.searchbox{min-width:240px}.analyticsgrid,.alertgrid,.brokergrid,.settingsgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.chartplaceholder,.empty{min-height:210px;display:grid;place-items:center;text-align:center;padding:25px;color:#637f95;font-size:11px}.large .region{font-size:12px;padding:14px 3px}.settingrow{padding:14px 16px;border-bottom:1px solid #192f41;display:flex;align-items:center;justify-content:space-between;gap:14px}.settingrow b{font-size:11px}.settingrow small{display:block;color:#718ba0;font-size:9px;margin-top:5px}.settingrow input{accent-color:#31c4df;width:17px;height:17px}.trustlist{padding:12px 16px}.trustlist>div{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #1b3042}.trustlist b{display:block;font-size:10px}.trustlist small{display:block;color:#718ba0;font-size:9px;margin-top:4px}.trust{width:9px;height:9px;border-radius:50%;display:block;flex:none}.trust.verified{background:var(--green)}.trust.mqtt{background:var(--cyan)}.trust.repeated{background:var(--purple)}.trust.unknown{background:var(--orange)}.smallpad{padding:0 16px 15px}.brokeritem{display:flex;gap:12px;align-items:center;padding:15px;border-bottom:1px solid #192f41}.brokericon{width:34px;height:34px;border:1px solid #2c5a70;background:#123044;border-radius:7px;display:grid;place-items:center;color:var(--cyan);font-weight:800}.brokerinfo{flex:1;min-width:0}.brokerinfo b{font-size:11px}.brokerinfo small{display:block;color:#718ba0;font-size:9px;margin-top:4px;overflow-wrap:anywhere}.status,.badge{font:8px var(--mono);padding:5px 7px;border-radius:4px}.status.off,.badge.neutral{background:#342a1e;color:var(--orange)}.formgrid{padding:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.formgrid input{width:100%}.formhint{grid-column:1/-1;color:#718ba0;font-size:9px}.modal{position:fixed;inset:0;background:#020912c9;z-index:900;display:grid;place-items:center;padding:20px}.modalbox{width:min(540px,100%);background:#0d1d2c;border:1px solid #31516a;border-radius:10px;padding:25px;position:relative;box-shadow:0 20px 80px #0009}.modalbox h2{margin:0 0 18px}.close{position:absolute;right:15px;top:12px;background:none;border:0;color:#9ab2c4;font-size:25px;cursor:pointer}.modaldata{display:grid;grid-template-columns:1fr 1fr;gap:10px}.modaldata div{padding:10px;background:#102638;border-radius:5px}.modaldata small{display:block;color:#718ba0;font:8px var(--mono);margin-bottom:5px}.modaldata b{font:10px var(--mono);color:#d7eaf5}.toast{position:fixed;bottom:22px;right:22px;background:#123248;border:1px solid #31738a;color:#d8f8ff;padding:11px 15px;border-radius:6px;font-size:10px;z-index:1000;opacity:0;transform:translateY(10px);transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translateY(0)}.node-name{font:10px var(--mono);color:#effaff;text-shadow:0 1px 3px #001}.node-marker{width:10px;height:10px;border-radius:50%;border:2px solid #dffbff;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}.node-marker.direct{background:var(--green);box-shadow:0 0 12px var(--green)}.node-marker.personal{width:15px;height:15px;background:var(--orange);box-shadow:0 0 18px var(--orange);border:2px solid white}.leaflet-control-zoom a{background:#102538!important;color:#d6e8f4!important;border-color:#274357!important}.leaflet-control-attribution{background:#07111fbb!important;color:#718ba0!important}.leaflet-control-attribution a{color:#60bcd0!important}@media(max-width:1100px){.sidebar{width:215px}.main{margin-left:215px;width:calc(100% - 215px)}.content{padding:22px 20px}.statgrid{grid-template-columns:repeat(2,1fr)}.bottomgrid{grid-template-columns:1fr 1fr}.bottomgrid>.panel:last-child{grid-column:1/-1}}@media(max-width:760px){.sidebar{width:62px;padding:13px 7px}.brand{padding:0 4px 18px}.brand>div:last-child,.live-state span,.live-state em,.navlabel,.nav:not(.active){font-size:0}.brandmark{width:40px}.live-state{justify-content:center;padding:0}.nav{justify-content:center;padding:0}.nav span{font-size:18px}.nav.active{font-size:0}.nav.active span{font-size:18px}.navcount,.sourcepill div,.loginbtn,.version{display:none}.sourcepill{justify-content:center;padding:10px 0}.main{margin-left:62px;width:calc(100% - 62px)}.topbar{padding:0 13px}.crumb span{display:none}.content{padding:18px 12px}.hero{align-items:flex-start}.hero h1{font-size:25px}.hero-right{display:none}.dashboardgrid,.analyticsgrid,.alertgrid,.brokergrid,.settingsgrid{grid-template-columns:1fr}.bottomgrid{grid-template-columns:1fr}.bottomgrid>.panel:last-child{grid-column:auto}.statgrid{gap:8px}.stat{padding:12px;min-height:120px}.stat strong{font-size:25px}.pageintro{align-items:flex-start;flex-direction:column}.mapfilters{width:100%}.mapfilters select{flex:1;min-width:120px}.fullmap{height:65vh;min-height:400px}.map{height:290px}.formgrid{grid-template-columns:1fr 1fr}.footer{margin:15px 12px}.footer span{display:block;float:none;margin-top:6px}.demo-tag{font-size:7px}.topactions{gap:6px}.userchip{display:none}}@media(max-width:420px){.statgrid{grid-template-columns:1fr 1fr}.stathead{font-size:7px}.stat strong{font-size:22px}.hero h1{font-size:22px}.formgrid{grid-template-columns:1fr}.formhint{grid-column:auto}}
/* Cloud Edition 1.1 — satellite basemap and readable mesh clusters */
.mesh-cluster-wrap{background:transparent;border:0}
.mesh-cluster{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(0,190,126,.68);border:2px solid rgba(151,255,210,.95);box-shadow:0 0 0 7px rgba(0,220,150,.20),0 0 22px rgba(0,230,160,.55);color:#f1fff9;font:700 14px 'DM Mono',monospace;text-shadow:0 1px 3px #004b38}
.mesh-cluster.medium{width:48px;height:48px;font-size:15px;background:rgba(0,178,118,.72)}
.mesh-cluster.large{width:54px;height:54px;font-size:16px;background:rgba(0,150,100,.78)}
.node-marker{background:#18d99a;border-color:#dffff2;box-shadow:0 0 12px #18d99a}
.node-marker.direct{background:#38c9e7;box-shadow:0 0 12px #38c9e7}
.node-marker.personal{background:#ffad45;box-shadow:0 0 20px #ff9e32;border:2px solid #fff}
.node-name{background:rgba(3,15,25,.88)!important;border:1px solid rgba(170,225,235,.65)!important;border-radius:3px!important;color:#f2fbff!important;padding:3px 5px!important;font:10px 'DM Mono',monospace!important;text-shadow:0 1px 2px #001!important;box-shadow:0 2px 8px #0008!important}
.node-name:before{border-right-color:rgba(3,15,25,.88)!important}
.leaflet-control-layers{background:#0b1d2c!important;color:#dcecf5!important;border:1px solid #31516a!important}
.leaflet-control-layers-toggle{filter:invert(.9)}
#trafficRows tr{cursor:pointer}#trafficRows tr:focus{outline:1px solid #39c9e7;outline-offset:-1px}
