@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600&display=swap');:root{--bg:#020b12;--panel:#061722e8;--line:#164051;--cyan:#30e7dc;--blue:#2b9cff;--green:#76f6a6;--amber:#ffc466;--red:#ff6378;--text:#d8f5f4;--muted:#628e9c}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#02080e;color:var(--text);font:12px 'Noto Sans SC',sans-serif}.boot{position:fixed;z-index:99;inset:0;background:#02090e;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;transition:opacity .7s}.boot.hide{opacity:0;pointer-events:none}.boot-logo{border:1px solid var(--cyan);width:60px;height:60px;display:grid;place-items:center;font:700 38px 'Barlow Condensed';color:var(--cyan);transform:skew(-7deg);box-shadow:0 0 40px #30e7dc44}.boot b{letter-spacing:4px;font-size:12px}.boot small{font:10px 'Barlow Condensed';letter-spacing:3px;color:#527481}.bootbar{width:260px;height:2px;background:#112a33}.bootbar i{display:block;height:100%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:load 2.2s ease both}@keyframes load{from{width:0}to{width:100%}}#app{height:100vh;background:radial-gradient(circle at 50% 45%,#082638,#020a11 65%)}header{height:62px;position:relative;z-index:10;display:flex;align-items:center;border-bottom:1px solid #164052;background:#031019ed;padding:0 20px}.brand{width:300px;display:flex;align-items:center;gap:11px}.brand>span{width:36px;height:36px;border:1px solid var(--cyan);display:grid;place-items:center;color:var(--cyan);font:700 25px 'Barlow Condensed';transform:skew(-8deg);box-shadow:inset 0 0 16px #28e5d827}.brand b{display:block;font:600 17px 'Barlow Condensed';letter-spacing:3px}.brand small{font-size:8px;color:#5d8997;letter-spacing:2px}nav{height:100%;display:flex;align-items:center;margin:auto}nav button,.headState button{height:100%;border:0;background:none;color:#68909b;padding:0 22px;font:11px 'Noto Sans SC';position:relative}nav button.on{color:#b4ffef}nav button.on:after{content:"";position:absolute;bottom:0;left:25%;width:50%;height:2px;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}.headState{width:350px;display:flex;justify-content:flex-end;align-items:center;gap:10px;color:#76a1a9}.headState i,footer i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green)}.headState b{font:500 13px 'Barlow Condensed';color:#c1e1df;margin-left:12px}.headState button{padding:0 0 0 12px}.layout{height:calc(100vh - 86px);display:grid;grid-template-columns:285px minmax(500px,1fr) 285px}.left,.right{position:relative;z-index:5;background:linear-gradient(90deg,#031019fa,#06151ede);padding:15px 13px;overflow:hidden}.left{border-right:1px solid #123949}.right{border-left:1px solid #123949;background:linear-gradient(-90deg,#031019fa,#06151ede)}h3{font-size:12px;margin:0 0 12px;letter-spacing:1px}h3>i{display:inline-block;width:2px;height:16px;background:var(--cyan);box-shadow:0 0 8px var(--cyan);vertical-align:middle;margin-right:8px}h3 em{float:right;color:var(--cyan);font:500 9px 'Barlow Condensed';font-style:normal;letter-spacing:1px}.heroKpi{height:122px;display:grid;grid-template-columns:1.25fr .75fr;border:1px solid #123846;background:linear-gradient(135deg,#0a2530aa,#06141c)}.heroKpi>div:first-child{padding:17px 14px}.heroKpi label,.gridKpi label{display:block;color:#7095a0;font-size:9px}.heroKpi b{font:600 37px 'Barlow Condensed';color:#efffff}.heroKpi span{color:var(--cyan);font:12px 'Barlow Condensed'}.heroKpi small{display:block;color:var(--green);font-size:8px;margin-top:4px}.ring{position:relative;display:flex;align-items:center;justify-content:center}.ring svg{width:75px;transform:rotate(-90deg)}.ring circle{fill:none;stroke:#173d49;stroke-width:4}.ring circle.val{stroke:var(--cyan);stroke-dasharray:180 200;filter:drop-shadow(0 0 4px #30e7dc)}.ring strong{position:absolute;font-size:18px}.ring strong small{display:inline}.ring label{position:absolute;bottom:8px;font-size:7px}.gridKpi{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:7px 0}.gridKpi div{padding:8px 10px;border:1px solid #123846;background:#071b24bb}.gridKpi b{font:600 20px 'Barlow Condensed'}.gridKpi span{font:9px 'Barlow Condensed';color:#5e909c;margin-left:3px}section{border:1px solid #123846;background:linear-gradient(135deg,#071c26cc,#04121a);padding:10px;margin-top:7px}.title{border-left:2px solid var(--cyan);padding-left:8px;font-weight:600;letter-spacing:.5px;margin-bottom:8px}.title>span,.title>button{float:right;color:#5f8c98;font:8px 'Barlow Condensed';font-weight:500}.title>button{background:none;border:0;color:var(--cyan)}#trend{height:105px;width:100%}.chartLegend{text-align:center;color:#608891;font-size:8px}.chartLegend i{display:inline-block;width:12px;height:2px;background:var(--cyan);margin:0 5px 2px 10px}.chartLegend i:nth-child(2){background:var(--amber)}.chartLegend i:nth-child(3){background:var(--blue)}.mix{height:126px}.donut{width:70px;height:70px;border-radius:50%;background:conic-gradient(var(--cyan) 0 42%,var(--amber) 42% 78%,var(--blue) 78% 92%,#45778b 92%);float:left;display:grid;place-items:center;position:relative;margin:2px 16px}.donut:after{content:"";position:absolute;inset:9px;border-radius:50%;background:#071922}.donut div{z-index:1;text-align:center}.donut b{display:block;font:600 16px 'Barlow Condensed'}.donut small{font:7px 'Barlow Condensed';color:#759aa2}.mix ul{list-style:none;margin:0;padding:0}.mix li{padding:3px;color:#71949c;font-size:8px}.mix li i{display:inline-block;width:5px;height:5px;background:var(--cyan);margin-right:5px}.mix li:nth-child(2) i{background:var(--amber)}.mix li:nth-child(3) i{background:var(--blue)}.mix li:nth-child(4) i{background:#45778b}.mix li b{float:right;color:#cae5e4}.weather{display:flex;align-items:center;gap:13px}.weather>span{font-size:27px;color:var(--amber)}.weather b{display:block;font-size:10px}.weather small{color:#69919a;font-size:8px}main{position:relative;overflow:hidden}#scene{position:absolute;inset:0}.sceneTop{position:absolute;top:18px;left:23px;right:23px;display:flex;justify-content:space-between;pointer-events:none}.sceneTop small{font:9px 'Barlow Condensed';letter-spacing:2px;color:var(--cyan)}.sceneTop h1{font-size:24px;margin:3px 0;letter-spacing:2px;text-shadow:0 2px 12px #000}.sceneTop p{font-size:8px;color:#7ca7ad}.sceneTop p i{display:inline-block;width:5px;height:5px;background:var(--green);border-radius:50%;box-shadow:0 0 8px var(--green)}.sceneTabs{pointer-events:auto;display:flex;height:29px}.sceneTabs button{border:1px solid #184453;background:#061821bb;color:#68919a;font-size:8px;padding:0 12px}.sceneTabs button.active{color:var(--cyan);background:#0d3137;border-color:#26756f}.compass{position:absolute;right:24px;top:74px;width:46px;height:46px;border:1px solid #255367;border-radius:50%;display:grid;place-items:center;color:var(--red);font:600 10px 'Barlow Condensed'}.compass i{position:absolute;width:1px;height:55px;background:linear-gradient(var(--red),#1a4553,transparent);transform:rotate(25deg)}.tools{position:absolute;right:18px;top:140px;display:flex;flex-direction:column}.tools button{width:34px;height:34px;border:1px solid #194452;background:#061821cc;color:#7aa3aa}.tools button:hover,.tools button.active{color:var(--cyan);border-color:var(--cyan);background:#0c3035}.bottomDock{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;background:#04131bdd;border:1px solid #164250;backdrop-filter:blur(10px)}.bottomDock button{width:112px;height:48px;border:0;border-right:1px solid #153944;background:none;color:#7fa2a6;display:flex;align-items:center;text-align:left;gap:8px}.bottomDock button:hover{background:#0e3339;color:var(--cyan)}.bottomDock i{font-style:normal;font-size:20px;color:var(--cyan)}.bottomDock span{font-size:8px}.bottomDock b{display:block;color:#d8f3ee;font:500 12px 'Barlow Condensed'}.detailPop{position:absolute;left:23px;bottom:78px;width:255px;background:#061822eb;border:1px solid #287083;padding:14px;backdrop-filter:blur(12px);transform:translateX(-120%);transition:.35s;box-shadow:0 15px 50px #0008}.detailPop.show{transform:none}.detailPop>button{float:right;border:0;background:none;color:#7fa3a8}.detailPop>small{font:8px 'Barlow Condensed';color:var(--cyan);letter-spacing:2px}.detailPop h2{font-size:13px;margin:4px 0 10px}.detailValue b{font:600 28px 'Barlow Condensed'}.detailValue span{font-size:8px;color:#7397a0}.detailValue em{float:right;font-style:normal;font-size:8px;color:var(--green);margin-top:12px}.detailGrid{display:grid;grid-template-columns:1fr 1fr;margin-top:8px}.detailGrid div{border:1px solid #153d49;padding:6px;color:#6b9099;font-size:7px}.detailGrid b{display:block;color:#d4eeec;font:500 11px 'Barlow Condensed'}#miniChart{height:40px;width:100%}.health{height:106px}.health .title span{color:var(--green)}.score>b{font:600 33px 'Barlow Condensed';color:var(--green)}.score small{color:#60858e}.score>div{display:inline-block;width:130px;height:4px;background:#183541;margin-left:10px}.score>div i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--green))}.score p{font-size:8px;color:#668e97}.statusGrid{display:grid;grid-template-columns:1fr 1fr;gap:5px}.statusGrid div{padding:7px;border:1px solid #143a47;position:relative}.statusGrid i{float:left;width:5px;height:5px;border-radius:50%;background:var(--green);margin:6px 7px 0 0}.statusGrid div:nth-child(2) i{background:var(--blue)}.statusGrid div:nth-child(3) i{background:var(--amber)}.statusGrid div:nth-child(4) i{background:var(--red)}.statusGrid b{font:600 17px 'Barlow Condensed'}.statusGrid small{display:block;margin-left:12px;color:#678c95;font-size:7px}.alarms{height:183px;overflow:hidden}.alarm{display:grid;grid-template-columns:5px 1fr auto;gap:8px;border-top:1px solid #133643;padding:7px 0}.alarm>i{width:5px;height:5px;border-radius:50%;background:var(--amber);margin-top:5px}.alarm.red>i{background:var(--red);box-shadow:0 0 7px var(--red)}.alarm b{display:block;font-size:9px}.alarm small,.alarm time{color:#5f838c;font-size:7px}.ai{border-color:#22606b;background:linear-gradient(135deg,#0a2932,#071a23)}.ai .title b{color:var(--cyan);font:600 10px 'Barlow Condensed';letter-spacing:1px}.ai p{font-size:8px;line-height:1.7;color:#91afb4}.ai strong{color:var(--green)}.ai button{width:100%;padding:6px;border:1px solid #26736f;background:#0d3539;color:var(--cyan);font-size:8px}.rank label{display:grid;grid-template-columns:70px 1fr 25px;gap:5px;align-items:center;color:#6e929a;font-size:8px;margin:7px 0}.rank i{height:3px;background:#163743}.rank i b{display:block;height:100%;background:linear-gradient(90deg,#258f9a,var(--cyan))}.rank em{text-align:right;color:#baddd9;font:9px 'Barlow Condensed';font-style:normal}footer{height:24px;background:#031018;border-top:1px solid #143b49;display:flex;align-items:center;gap:25px;padding:0 15px;color:#527a84;font-size:7px}footer i{display:inline-block;margin-right:5px}footer b{margin-left:auto;font:8px 'Barlow Condensed';font-weight:500}#toast{position:fixed;z-index:50;top:74px;right:304px;background:#08242d;border-left:2px solid var(--cyan);padding:10px 15px;font-size:9px;box-shadow:0 10px 35px #0008;opacity:0;transform:translateY(-10px);transition:.3s}#toast.show{opacity:1;transform:none}@media(max-width:1100px){.layout{grid-template-columns:250px 1fr}.right{display:none}.headState{width:auto}.headState span,.headState button{display:none}nav button{padding:0 10px}}
/* Mobile control room */
.mobileBar,.mobileSheet,.sheetBackdrop{display:none}
@media(max-width:700px){
 body{overflow:hidden;touch-action:manipulation}#app{height:100dvh}header{height:54px;padding:0 12px}.brand{width:auto}.brand>span{width:30px;height:30px;font-size:21px}.brand b{font-size:14px}.brand small{display:none}nav{display:none}.headState{margin-left:auto;width:auto}.headState span,.headState button,.headState b{display:none}.headState i{display:block}
 .layout{height:calc(100dvh - 78px);display:block}.left,.right{display:none}main{height:100%;width:100%}#scene{inset:0}.sceneTop{top:13px;left:14px;right:14px}.sceneTop small{font-size:7px}.sceneTop h1{font-size:19px;margin:2px 0}.sceneTop p{font-size:7px}.sceneTabs{display:none}.compass{right:12px;top:84px;width:38px;height:38px}.tools{right:10px;top:132px}.tools button{width:38px;height:38px;background:#061821e8}.bottomDock{bottom:68px;left:10px;right:10px;transform:none;width:auto;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}.bottomDock::-webkit-scrollbar{display:none}.bottomDock button{flex:0 0 103px;height:45px}.detailPop{left:10px;right:10px;bottom:122px;width:auto;max-height:260px;overflow:auto}.tag3d{font-size:7px!important;padding:3px 5px!important;max-width:130px}.tag3d small{display:none}footer{height:24px;padding:0 10px;gap:12px;white-space:nowrap;overflow:hidden}footer span:nth-of-type(n+3){display:none}#toast{top:62px;right:10px;left:10px;text-align:center}
 .mobileBar{display:grid;position:fixed;z-index:30;bottom:24px;left:0;right:0;height:48px;grid-template-columns:repeat(4,1fr);background:#04141df2;border-top:1px solid #1a4a57;backdrop-filter:blur(14px)}.mobileBar button{border:0;background:none;color:#70969f;font-size:9px}.mobileBar button b{display:block;font-size:17px;font-weight:400;line-height:18px}.mobileBar button.on{color:var(--cyan)}
 .sheetBackdrop{position:fixed;z-index:38;inset:0;background:#0008}.sheetBackdrop.show{display:block}.mobileSheet{position:fixed;display:block;z-index:40;left:0;right:0;bottom:0;max-height:76dvh;overflow:auto;background:#04141df8;border-top:1px solid #2a737b;padding:10px 12px 22px;transform:translateY(105%);transition:.28s ease;backdrop-filter:blur(18px);border-radius:14px 14px 0 0}.mobileSheet.show{transform:none}.sheetHandle{width:38px;height:3px;background:#416f77;border-radius:3px;margin:0 auto 11px}.sheetHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}.sheetHead b{font-size:13px}.sheetHead button{border:0;background:none;color:var(--cyan);font-size:20px}.mobileSheet section{margin-top:7px}.mobileSheet .heroKpi{height:108px}.mobileSheet .alarms{height:auto;max-height:240px}.mobileSheet .health{height:auto}.mobileSheet .mix{height:120px}
}
@media(max-width:380px){.sceneTop h1{font-size:16px}.bottomDock button{flex-basis:92px}.bottomDock{bottom:64px}.tools button{width:35px;height:35px}.compass{display:none}}
@media(orientation:landscape) and (max-height:600px) and (max-width:950px){header{height:48px}.layout{height:calc(100dvh - 70px)}.sceneTop h1{font-size:17px}.bottomDock{bottom:8px;left:50%;right:auto;transform:translateX(-50%);width:max-content}.mobileBar{display:none}.tools{top:82px}.compass{display:none}.detailPop{bottom:62px;max-width:270px}.mobileSheet{max-height:88dvh}}

@media(max-width:760px){.mobileSheet.show{transform:translateY(0)!important;bottom:96px!important}.sheetBackdrop.show{display:block!important}}