@font-face{font-family:Hanuman;src:url("hanuman.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
:root{--cyan:#47c5d4;--green:#32f58c;--page:#0d0d0d;--card:#131313;--panel:#17191a;--line:#282d2f;--muted:#6f797c;--soft:#a9b2b4;--amber:#ffb546;--red:#ff5d61;--violet:#a887ff;--header:76px;--side:202px}
*{box-sizing:border-box}html{background:var(--page);color:#eef4f4;font-family:Inter,system-ui,sans-serif}body{margin:0;min-height:100vh;background:radial-gradient(ellipse 70% 40% at 55% -10%,rgba(71,197,212,.11),transparent 70%),#0d0d0d;overflow-x:hidden}button,input{font:inherit}.noise{position:fixed;inset:0;opacity:.035;pointer-events:none;z-index:10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}.topbar{height:var(--header);position:fixed;z-index:5;inset:0 0 auto 0;border-bottom:1px solid #26292a;background:rgba(13,13,13,.88);backdrop-filter:blur(18px);display:grid;grid-template-columns:var(--side) 1fr var(--side);align-items:center;padding:0 24px}.brand{display:flex;align-items:center;text-decoration:none}.brand img{width:124px}.brand span{font:600 7px Oxanium;letter-spacing:2px;color:#738084;border-left:1px solid #333;margin-left:8px;padding:4px 0 4px 8px}.command-title{text-align:center;align-self:stretch;display:flex;flex-direction:column;justify-content:center}.command-title small{font:600 8px Oxanium;letter-spacing:3px;color:#546064}.command-title h1{font:600 18px Oxanium;margin:3px 0 6px;letter-spacing:4px}.title-line{position:absolute;left:calc(50% - 210px);bottom:-1px;width:420px;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent)}.title-line:after,.title-line:before{content:"";position:absolute;width:5px;height:5px;top:-2px;background:var(--cyan);transform:rotate(45deg)}.title-line:before{left:70px}.title-line:after{right:70px}.top-actions{justify-self:end;display:flex;align-items:center;gap:15px}.system-live{display:flex;align-items:center;gap:8px}.system-live i,.live-badge i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(50,245,140,.09),0 0 10px var(--green);animation:pulse 2s infinite}.system-live span{font-size:7px;letter-spacing:1px;color:#788285;line-height:1.5}.system-live b{display:block;color:var(--green)}.icon-btn{position:relative;width:34px;height:34px;border:1px solid #2b3031;background:#17191a;color:#889294;border-radius:3px}.icon-btn svg,.refresh-btn svg,.search svg{width:16px;fill:none;stroke:currentColor;stroke-width:1.5}.icon-btn em{position:absolute;right:-3px;top:-4px;width:14px;height:14px;border-radius:50%;font-style:normal;font-size:8px;background:var(--red);color:#fff}.clock{text-align:right}.clock b{display:block;font:600 12px Oxanium;color:#d7e2e3;letter-spacing:1px}.clock span{font-size:7px;color:#626d70;letter-spacing:.7px}.sidebar{position:fixed;top:var(--header);bottom:0;left:0;width:var(--side);border-right:1px solid #26292a;background:rgba(15,16,16,.8);padding:25px 12px 18px;z-index:4;display:flex;flex-direction:column}.nav-label{font:600 8px Oxanium;color:#465053;letter-spacing:2px;padding-left:13px}.nav-label.second{margin-top:30px}.nav-item{width:100%;height:44px;margin:5px 0 0;display:flex;align-items:center;gap:13px;border:0;border-left:2px solid transparent;background:transparent;color:#707a7d;padding:0 12px;cursor:pointer;position:relative}.nav-item svg{width:17px;fill:none;stroke:currentColor;stroke-width:1.5}.nav-item span{font-size:11px;font-weight:600}.nav-item b{font:500 8px Oxanium;margin-left:auto;color:#4f5b5e}.nav-item:hover{color:#a9b3b5;background:#15191a}.nav-item.active{color:var(--cyan);border-left-color:var(--cyan);background:linear-gradient(90deg,rgba(71,197,212,.12),transparent)}.nav-item.active:after{content:"";position:absolute;left:-3px;width:4px;height:15px;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}.side-foot{margin-top:auto;border:1px solid #283032;background:#131616;padding:12px;display:flex;align-items:center;gap:10px}.side-foot b,.side-foot span{display:block;font:600 7px Oxanium;letter-spacing:1px}.side-foot span{color:#687275;margin-top:4px}.network-orbit{width:27px;height:27px;border:1px solid rgba(50,245,140,.4);border-radius:50%;position:relative;animation:rotate 4s linear infinite}.network-orbit span{position:absolute;inset:5px;border:1px dashed var(--green);border-radius:50%}.network-orbit i{position:absolute;width:4px;height:4px;background:var(--green);border-radius:50%;top:-2px;left:11px;box-shadow:0 0 7px var(--green)}main{padding:var(--header) 0 0 var(--side)}.page{display:none;padding:25px 28px 35px;animation:pageIn .35s ease}.page.active{display:block}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px}.page-heading p{font:600 8px Oxanium;color:#596366;letter-spacing:1.5px;margin:0 0 7px}.page-heading p span{color:var(--cyan)}.page-heading h2{font:600 23px Oxanium;letter-spacing:.3px;margin:0}.heading-actions{display:flex;gap:8px}.select-btn,.refresh-btn{border:1px solid #303536;border-radius:3px;height:34px;padding:0 12px;background:#151718;color:#899395;font-size:9px;letter-spacing:.4px}.select-btn span{color:var(--cyan);margin-left:15px}.refresh-btn{display:flex;align-items:center;gap:7px;color:var(--cyan);cursor:pointer}.refresh-btn.spin svg{animation:rotate .7s ease}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}.metric{height:112px;background:linear-gradient(145deg,#181b1c,#121414);border:1px solid #2a2f30;position:relative;display:flex;align-items:center;padding:16px;gap:12px;overflow:hidden}.metric:before{content:"";position:absolute;left:0;top:18px;width:2px;height:35px;background:var(--tone);box-shadow:0 0 11px var(--tone)}.metric.cyan{--tone:var(--cyan)}.metric.green{--tone:var(--green)}.metric.amber{--tone:var(--green)}.metric.violet{--tone:var(--violet)}.metric-icon{width:34px;height:34px;border:1px solid color-mix(in srgb,var(--tone) 40%,transparent);background:color-mix(in srgb,var(--tone) 8%,transparent);display:grid;place-items:center;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}.metric-icon svg{width:17px;fill:none;stroke:var(--tone);stroke-width:1.5}.metric>div:nth-child(2){z-index:1}.metric span{font:600 7px Oxanium;letter-spacing:1px;color:#657073}.metric strong{font:600 23px Oxanium;display:block;margin:6px 0 5px}.metric strong small{font-size:10px;color:#718083}.metric p{font-size:8px;color:#697477;margin:0}.metric p b{color:var(--tone)}.spark{position:absolute!important;right:8px;bottom:13px;display:flex;align-items:end;height:30px;gap:3px;opacity:.5}.spark i,.mini-bars i{display:block;width:4px;background:var(--tone)}.spark i:nth-child(1){height:8px}.spark i:nth-child(2){height:14px}.spark i:nth-child(3){height:10px}.spark i:nth-child(4){height:23px}.spark i:nth-child(5){height:17px}.spark i:nth-child(6){height:28px}.spark i:nth-child(7){height:24px}.ring{margin-left:auto!important;width:49px;height:49px;border-radius:50%;background:conic-gradient(var(--tone) calc(var(--p)*1%),#262b2c 0);display:grid;place-items:center;position:relative}.ring:after{content:"";position:absolute;inset:5px;border-radius:50%;background:#151718}.ring b{font:600 9px Oxanium;z-index:1}.wave,.mini-bars{margin-left:auto!important;display:flex;align-items:center;gap:3px}.wave i{width:2px;background:var(--tone);animation:wave 1s ease-in-out infinite}.wave i:nth-child(2){animation-delay:.1s}.wave i:nth-child(3){animation-delay:.2s}.wave i:nth-child(4){animation-delay:.3s}.wave i:nth-child(5){animation-delay:.4s}.wave i:nth-child(6){animation-delay:.5s}.mini-bars{height:42px;align-items:end}.mini-bars i{width:5px;opacity:.55}.mini-bars i:nth-child(1){height:35%}.mini-bars i:nth-child(2){height:60%}.mini-bars i:nth-child(3){height:48%}.mini-bars i:nth-child(4){height:80%}.mini-bars i:nth-child(5){height:68%}.mini-bars i:nth-child(6){height:100%}.overview-grid{display:grid;grid-template-columns:1.35fr .85fr;grid-template-rows:393px 186px;gap:10px}.panel{background:linear-gradient(145deg,#17191a,#111313);border:1px solid #2a2e2f;position:relative}.panel:before,.panel:after{content:"";position:absolute;width:12px;height:12px;border-color:#3c4547;pointer-events:none}.panel:before{left:-1px;top:-1px;border-left:1px solid;border-top:1px solid}.panel:after{right:-1px;bottom:-1px;border-right:1px solid;border-bottom:1px solid}.panel-head{height:58px;padding:13px 16px;border-bottom:1px solid #252a2b;display:flex;align-items:center;justify-content:space-between}.panel-head span{font:600 7px Oxanium;letter-spacing:1.4px;color:#5f6b6e}.panel-head h3{font:600 13px Oxanium;margin:4px 0 0}.legend{font-size:7px!important;letter-spacing:0!important;color:#657073!important;display:flex;gap:6px;align-items:center}.legend i{width:5px;height:5px;border-radius:50%;margin-left:8px}.available{background:var(--green)}.busy{background:var(--amber)}.offline{background:var(--red)}.map-wrap{height:calc(100% - 58px);position:relative;overflow:hidden;background:radial-gradient(circle at 48% 50%,rgba(71,197,212,.09),transparent 55%)}.map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(71,197,212,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(71,197,212,.035) 1px,transparent 1px);background-size:28px 28px;transform:perspective(400px) rotateX(7deg) scale(1.05)}.cambodia{position:absolute;height:92%;width:68%;left:10%;top:4%;filter:drop-shadow(0 0 18px rgba(71,197,212,.08))}.map-pin{position:absolute;border:0;background:none;color:#fff;cursor:pointer}.map-pin>i{display:block;width:10px;height:10px;border:2px solid #0e1b1c;background:var(--green);border-radius:50%;box-shadow:0 0 0 5px rgba(50,245,140,.1),0 0 12px var(--green);position:relative;z-index:2}.map-pin>i:after{content:"";position:absolute;inset:-8px;border:1px solid var(--green);border-radius:50%;animation:radar 2.4s infinite}.map-pin span{display:none;position:absolute;left:15px;top:-12px;background:rgba(16,21,22,.94);border:1px solid #354143;padding:7px 9px;min-width:90px;text-align:left;font-size:7px;color:#677275}.map-pin:hover span,.map-pin.active span{display:block}.map-pin span b{display:block;color:#d8e0e1;font:600 9px Oxanium;margin-bottom:3px}.map-pin.pnh{left:44%;top:64%}.map-pin.kdl{left:48%;top:71%}.map-pin.srp{left:43%;top:27%}.map-pin.kpt{left:37%;top:79%}.map-pin.offline>i{background:var(--red);box-shadow:0 0 0 5px rgba(255,93,97,.1),0 0 12px var(--red)}.map-pin.offline>i:after{border-color:var(--red)}.map-stats{position:absolute;right:14px;bottom:14px;background:#121718cc;border:1px solid #293234;display:flex;padding:9px}.map-stats span{font-size:6px;color:#5d686a;padding:0 10px;border-right:1px solid #2a3031}.map-stats span:last-child{border:0}.map-stats b{display:block;font:600 12px Oxanium;color:#c8d3d4;margin-bottom:2px}.live-badge{font:600 7px Oxanium;color:var(--green);display:flex;align-items:center;gap:7px}.session-list{padding:5px 14px}.session-card{padding:12px 2px;border-bottom:1px solid #252a2b}.session-row{display:flex;align-items:center}.connector-id{width:31px;height:31px;border:1px solid #3b4244;display:grid;place-items:center;font:600 10px Oxanium;color:var(--cyan);margin-right:10px}.session-name{min-width:0}.session-name b{font:600 9px Oxanium;display:block;white-space:nowrap}.session-name span{font-size:7px;color:#667174}.session-power{margin-left:auto;text-align:right}.session-power b{font:600 12px Oxanium;color:var(--green);display:block}.session-power span{font-size:6px;color:#697477}.progress{height:2px;background:#292f30;margin:10px 0 6px}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--green));box-shadow:0 0 7px var(--cyan);position:relative}.progress i:after{content:"";position:absolute;right:0;top:-2px;width:5px;height:5px;background:#fff;box-shadow:0 0 8px var(--cyan)}.session-meta{display:flex;justify-content:space-between;font:500 7px Oxanium;color:#596467}.session-meta b{color:#9ba5a7}.view-all{height:35px;width:calc(100% - 28px);position:absolute;bottom:12px;left:14px;background:#171b1c;border:1px solid #2d3536;color:#768184;font:600 7px Oxanium;letter-spacing:1px;cursor:pointer}.view-all:hover{color:var(--cyan);border-color:#37646a}.view-all span{color:var(--cyan);margin-left:8px}.health-panel{grid-column:1/3}.health-panel .panel-head{height:52px}.text-btn{background:none;border:0;color:var(--cyan);font-size:7px;cursor:pointer}.gun-summary{height:76px;width:35%;display:flex;align-items:center;float:left}.gun-summary div{flex:1;text-align:center;border-right:1px solid #292e2f}.gun-summary strong{font:600 20px Oxanium;display:block}.gun-summary span{font:600 6px Oxanium;color:#5a6567;letter-spacing:1px}.green-t{color:var(--green)}.amber-t{color:var(--amber)}.red-t{color:var(--red)}.gun-strip{height:76px;width:65%;float:left;display:grid;grid-template-columns:repeat(8,1fr);gap:5px;padding:10px 15px}.gun{background:#15191a;border:1px solid #292f30;padding:8px;position:relative}.gun:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--status)}.gun b{font:600 8px Oxanium;display:block}.gun span{font-size:6px;color:#626c6e}.gun i{width:4px;height:4px;border-radius:50%;background:var(--status);position:absolute;right:6px;top:8px;box-shadow:0 0 6px var(--status)}.cabinet-layout{display:grid;grid-template-columns:1fr 330px;gap:10px}.cabinet-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-content:start}.cabinet-card{background:linear-gradient(145deg,#181b1c,#121414);border:1px solid #2b3031;padding:16px;cursor:pointer;transition:.25s;position:relative}.cabinet-card:hover,.cabinet-card.selected{border-color:#3b686e;transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.25)}.cabinet-card.selected:before{content:"";position:absolute;left:-1px;top:15px;width:2px;height:34px;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}.cabinet-top{display:flex;justify-content:space-between}.cabinet-top small{font:600 7px Oxanium;color:#5d686a}.cabinet-top h3{font:600 13px Oxanium;margin:5px 0}.status-pill{height:19px;padding:0 7px;display:flex;align-items:center;gap:5px;background:rgba(50,245,140,.08);color:var(--green);font:600 6px Oxanium}.status-pill i{width:4px;height:4px;border-radius:50%;background:currentColor}.cabinet-station{font-size:8px;color:#707b7d;padding-bottom:13px;border-bottom:1px solid #292e2f}.connector-preview{display:flex;gap:8px;margin-top:13px}.conn{flex:1;border:1px solid #293031;background:#141718;padding:9px}.conn-head{display:flex;justify-content:space-between}.conn-head b{font:600 8px Oxanium}.conn-head span{font:600 6px Oxanium;color:var(--cyan)}.conn strong{font:600 15px Oxanium;display:block;margin:9px 0 2px}.conn small{font-size:6px;color:#626d70}.conn.charging{border-color:rgba(50,245,140,.62);background:linear-gradient(145deg,rgba(50,245,140,.09),#141718);box-shadow:inset 0 0 18px rgba(50,245,140,.045)}.conn.charging .conn-head span,.conn.charging strong{color:var(--green);text-shadow:0 0 9px rgba(50,245,140,.42)}.conn.off .conn-head span{color:var(--red)}.cabinet-detail{background:#131616;border:1px solid #2b3031;min-height:620px;padding:18px;position:sticky;top:96px}.detail-code{font:600 7px Oxanium;color:var(--cyan);letter-spacing:1px}.cabinet-detail h3{font:600 17px Oxanium;margin:7px 0}.cabinet-detail>p{font-size:8px;color:#687376;margin-bottom:18px}.cabinet-visual{height:180px;position:relative;display:grid;place-items:center;background:radial-gradient(circle,rgba(71,197,212,.12),transparent 65%);perspective:500px}.machine{width:90px;height:130px;background:linear-gradient(120deg,#263033,#111718);border:1px solid #4a5b5e;transform:rotateY(-8deg);position:relative;box-shadow:12px 10px 20px #070909}.machine:before{content:"AVATAR";font:600 8px Oxanium;color:var(--cyan);position:absolute;top:13px;left:20px}.machine-screen{position:absolute;left:18px;right:18px;top:35px;height:39px;background:#071416;border:1px solid #315158;box-shadow:inset 0 0 12px rgba(71,197,212,.18)}.machine-screen:after{content:"ONLINE";font:600 6px Oxanium;color:var(--green);position:absolute;top:15px;left:13px}.cable{position:absolute;width:38px;height:74px;border:4px solid #293638;border-left-color:transparent;border-radius:50%;right:-22px;top:47px}.cabinet-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:14px 0}.cabinet-kpis div{background:#171b1c;border:1px solid #292f30;padding:9px;text-align:center}.cabinet-kpis b{font:600 11px Oxanium;display:block}.cabinet-kpis span{font:600 6px Oxanium;color:#5e686b}.detail-section{border-top:1px solid #292e2f;padding-top:14px;margin-top:14px}.detail-section>span{font:600 7px Oxanium;color:#5f6a6d;letter-spacing:1px}.telemetry-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}.telemetry-row div{background:#161919;padding:8px}.telemetry-row span,.telemetry-row b{font-size:7px}.telemetry-row span{color:#647073}.telemetry-row b{float:right;color:#c5d0d1}.search{height:34px;min-width:220px;border:1px solid #303536;background:#151718;display:flex;align-items:center;padding:0 10px;gap:8px;color:#687376}.search input{border:0;outline:0;background:none;color:#c9d3d4;font-size:8px;width:100%}.transaction-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}.transaction-stats>div{padding:15px;background:#151819;border:1px solid #2a2f30}.transaction-stats span{font:600 7px Oxanium;color:#5d686b;letter-spacing:1px}.transaction-stats strong{font:600 18px Oxanium;display:block;margin:6px 0}.transaction-stats small{font-size:7px;color:#647073}.transaction-panel{min-height:510px}.table-tools{height:58px;padding:11px 14px;border-bottom:1px solid #292e2f;display:flex;justify-content:space-between}.filter-chips{display:flex}.filter-chips button{border:1px solid #2b3132;background:#141718;color:#657073;font-size:7px;padding:0 12px}.filter-chips button.active{color:var(--cyan);border-color:#37646a;background:rgba(71,197,212,.07)}table{width:100%;border-collapse:collapse;white-space:nowrap}th{text-align:left;font:600 7px Oxanium;color:#566164;letter-spacing:1px;height:39px;padding:0 13px;border-bottom:1px solid #292e2f}td{height:51px;padding:0 13px;border-bottom:1px solid #222728;font-size:8px;color:#8e999b}td b{display:block;color:#cad3d4;font:600 8px Oxanium;margin-bottom:3px}td small{font-size:6px;color:#586265}.tx-status{display:inline-flex;padding:5px 7px;font:600 6px Oxanium;border:1px solid currentColor}.tx-status.completed{color:var(--green);background:rgba(50,245,140,.06)}.tx-status.charging{color:var(--amber);background:rgba(255,181,70,.06)}.tx-status.failed{color:var(--red);background:rgba(255,93,97,.06)}.row-action{background:none;border:0;color:#657073;cursor:pointer}.table-foot{height:55px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;color:#596568;font-size:7px}.table-foot button{width:26px;height:25px;background:#151919;color:#6b7678;border:1px solid #292f30;font-size:7px}.table-foot button.active{color:var(--cyan);border-color:#37646a}.toast{position:fixed;right:22px;bottom:22px;background:#172120;border:1px solid #2b635a;padding:11px 17px;display:flex;align-items:center;gap:9px;font-size:9px;z-index:20;transform:translateY(80px);opacity:0;transition:.3s}.toast.show{transform:none;opacity:1}.toast i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}.mobile-menu{display:none}
@keyframes pulse{50%{opacity:.45}}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes radar{from{transform:scale(.6);opacity:1}to{transform:scale(1.8);opacity:0}}@keyframes wave{0%,100%{height:8px}50%{height:31px}}@keyframes pageIn{from{opacity:0;transform:translateY(6px)}}@media(max-width:1050px){:root{--side:66px}.brand span,.nav-item span,.nav-label,.nav-item b,.side-foot>div:last-child{display:none}.brand img{width:45px;object-fit:cover;object-position:left}.nav-item{justify-content:center}.system-live{display:none}.metrics{grid-template-columns:repeat(2,1fr)}.overview-grid{grid-template-columns:1fr;grid-template-rows:390px 390px auto}.health-panel{grid-column:auto}.gun-summary,.gun-strip{float:none;width:100%}.health-panel{min-height:220px}.cabinet-layout{grid-template-columns:1fr 290px}}@media(max-width:720px){:root{--header:64px;--side:0px}.topbar{grid-template-columns:1fr auto;padding:0 14px}.mobile-menu{display:flex;width:30px;height:30px;flex-direction:column;justify-content:center;gap:4px;background:none;border:0}.mobile-menu i{width:17px;height:1px;background:#9ba5a7}.brand{display:none}.command-title{text-align:left}.command-title small{font-size:6px;letter-spacing:1.4px}.command-title h1{font-size:11px;letter-spacing:1.2px}.title-line{display:none}.clock,.icon-btn{display:none}.sidebar{transform:translateX(-100%);width:200px;transition:.3s}.sidebar.open{transform:none}.sidebar.open .nav-item span,.sidebar.open .nav-label,.sidebar.open .nav-item b,.sidebar.open .side-foot>div:last-child{display:block}.sidebar.open .nav-item{justify-content:flex-start}.page{padding:18px 12px}.page-heading{align-items:flex-start;gap:12px}.page-heading h2{font-size:17px}.heading-actions{flex-wrap:wrap;justify-content:flex-end}.metrics,.transaction-stats{grid-template-columns:1fr 1fr}.overview-grid{display:block}.overview-grid>.panel{margin-bottom:10px}.map-panel{height:370px}.live-panel{height:390px}.health-panel{height:280px}.gun-summary{width:100%}.gun-strip{grid-template-columns:repeat(4,1fr);height:auto}.cabinet-layout{display:block}.cabinet-list{grid-template-columns:1fr}.cabinet-detail{margin-top:10px;position:relative;top:0}.transaction-stats strong{font-size:14px}.table-scroll{overflow:auto}.table-tools{height:auto;gap:8px;flex-direction:column}.search{min-width:0}.metric{height:105px;padding:12px}.metric-icon{display:none}.metric strong{font-size:18px}}@media(max-width:430px){.metrics,.transaction-stats{grid-template-columns:1fr}.heading-actions .select-btn{display:none}.metric{height:90px}.page-heading{margin-bottom:14px}.legend{display:none!important}}

/* Full-screen 16:9 command-center layout */
:root{--header:96px;--side:0px}
html{font-family:Inter,Hanuman,system-ui,sans-serif}
body{height:100vh;overflow:hidden}
.sidebar,.mobile-menu{display:none!important}
.topbar{grid-template-columns:220px 1fr 220px;height:var(--header);padding:0 28px}
.command-center{height:100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.command-title{height:44px;display:flex;align-items:center;gap:12px;flex-direction:row}
.command-title small{font:500 11px Hanuman;color:#788487;letter-spacing:.3px}
.command-title h1{font-size:13px;margin:0;padding-left:12px;border-left:1px solid #303738;letter-spacing:2.5px}
.center-menu{height:52px;display:flex;align-items:flex-end;justify-content:center;gap:8px}
.center-menu button{height:43px;min-width:152px;border:1px solid transparent;border-bottom:0;background:transparent;color:#727d80;padding:6px 18px 8px;font:600 14px Hanuman;cursor:pointer;position:relative;transition:.25s}
.center-menu button small{display:block;font:600 6px Oxanium;letter-spacing:1.5px;margin-top:1px;color:#4e595b}
.center-menu button:hover{color:#b5c0c2;background:rgba(71,197,212,.03)}
.center-menu button.active{color:var(--cyan);border-color:#293d40;background:linear-gradient(180deg,transparent,rgba(71,197,212,.1))}
.center-menu button.active:after{content:"";position:absolute;left:15%;right:15%;bottom:-1px;height:2px;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.center-menu button.active small{color:#75898c}
.title-line{width:610px;left:calc(50% - 305px)}
main{padding:var(--header) 0 0}
.page{height:calc(100vh - var(--header));min-height:calc(100vh - var(--header));padding:10px 18px 14px;overflow:hidden}
.page-heading{height:34px;margin-bottom:7px}
.page-heading p{font-family:Hanuman;margin-bottom:3px}
.page-heading h2{font-family:Hanuman;font-size:20px}
.page-heading h2 small{font:500 8px Oxanium;color:#596467;margin-left:10px;letter-spacing:1px}
.metrics{margin-bottom:8px;gap:8px}
.metric{height:94px}
.overview-grid{height:calc(100vh - var(--header) - 151px);grid-template-rows:minmax(285px,2.2fr) minmax(145px,1fr);gap:8px}
.cabinet-layout{height:calc(100vh - var(--header) - 20px)}
.cabinet-list{overflow-y:auto;padding-right:4px}
.cabinet-detail{min-height:0;height:100%;position:relative;top:auto;overflow-y:auto}
.cabinet-card{padding:13px}
.connector-preview{margin-top:9px}
.cabinet-visual{height:150px}
.transaction-stats{margin-bottom:8px;gap:8px}
.transaction-panel{height:calc(100vh - var(--header) - 92px);min-height:0;overflow:hidden}

@media(max-aspect-ratio:16/10) and (min-width:721px){
  body{overflow:auto}
  .page{overflow:auto}
}
@media(max-width:1050px){
  :root{--side:0px}
  .metrics{grid-template-columns:repeat(4,1fr)}
  .overview-grid{grid-template-columns:1.35fr .85fr;grid-template-rows:minmax(285px,2.2fr) minmax(145px,1fr)}
  .health-panel{grid-column:1/3}
  .gun-summary{float:left;width:35%}.gun-strip{float:left;width:65%}
}
@media(max-width:720px){
  :root{--header:122px}
  body{height:auto;overflow:auto}
  .topbar{height:var(--header);grid-template-columns:90px 1fr;padding:0 12px}
  .brand{display:flex}.brand img{width:82px;object-fit:contain}.brand span{display:none}
  .command-title{height:48px;display:block;text-align:center;padding-top:7px}
  .command-title small{font-size:8px}.command-title h1{font-size:8px;border:0;padding:0;letter-spacing:1px;margin-top:2px}
  .command-center{grid-column:2}.center-menu{height:74px;gap:2px;align-items:flex-start}
  .center-menu button{height:63px;min-width:0;padding:8px 6px;font-size:10px}
  .top-actions{display:none}.title-line{display:block;width:100%;left:0}
  .page{height:auto;min-height:calc(100vh - var(--header));overflow:visible}
  .metrics{grid-template-columns:1fr 1fr}.overview-grid{height:auto;display:block}
  .cabinet-layout,.transaction-panel{height:auto}
}

/* Map page: full-screen geospatial canvas with chargers on the map */
#page-overview{position:relative;padding-bottom:18px}
#page-overview .page-heading{position:relative;z-index:4}
#page-overview .overview-grid{position:absolute;inset:10px 18px 14px;height:auto;display:block}
#page-overview .map-panel{width:100%;height:100%}
#page-overview .map-panel>.panel-head{display:none}
#page-overview .live-panel,#page-overview .health-panel{display:none}
#page-overview .map-wrap{height:100%;background:radial-gradient(circle at 48% 50%,rgba(71,197,212,.14),transparent 52%),linear-gradient(145deg,#101819,#0d1112)}
#page-overview .cambodia{height:96%;width:74%;left:10%;top:2%;filter:drop-shadow(0 0 34px rgba(71,197,212,.16))}
#page-overview .metrics{position:absolute;z-index:3;left:30px;right:30px;bottom:22px;margin:0;pointer-events:none}
#page-overview .metric{height:78px;background:rgba(15,20,21,.9);backdrop-filter:blur(14px);box-shadow:0 8px 25px rgba(0,0,0,.25)}
#page-overview .metric-icon{width:29px;height:29px}
#page-overview .metric strong{font-size:18px;margin:4px 0 3px}
#page-overview .ring{width:41px;height:41px}
#page-overview .map-stats{right:18px;top:18px;bottom:auto}
#page-overview .map-pin{display:flex;align-items:center;z-index:2}
#page-overview .map-pin>i{width:15px;height:15px;border-width:3px}
#page-overview .map-pin span{display:grid;grid-template-columns:28px auto;grid-template-rows:auto auto auto auto auto;column-gap:9px;position:absolute;left:24px;top:-42px;min-width:230px;padding:10px 12px;background:rgba(13,20,21,.94);border-color:#36575b;box-shadow:0 10px 25px rgba(0,0,0,.35),inset 0 0 22px rgba(71,197,212,.035);backdrop-filter:blur(10px);opacity:.88;transition:.25s}
#page-overview .map-pin:hover span,#page-overview .map-pin.active span{opacity:1;border-color:var(--cyan);transform:translateY(-2px)}
#page-overview .map-pin span em{grid-row:1/6;width:28px;height:43px;display:grid;place-items:center;align-self:center;background:rgba(71,197,212,.1);border:1px solid rgba(71,197,212,.35);color:var(--cyan);font:700 15px Oxanium;font-style:normal}
#page-overview .map-pin span b{font-size:9px;margin:0}
#page-overview .map-pin span strong{font:600 8px Oxanium;color:#9eabad;margin-top:4px}
#page-overview .map-pin span small{font:500 7px Hanuman;color:var(--green);margin-top:3px}
#page-overview .map-pin span u{font:400 6px Hanuman;color:#657174;text-decoration:none;margin-top:3px}
#page-overview .map-pin span mark{font:600 6px Oxanium;color:var(--cyan);background:transparent;margin-top:4px}
#page-overview .map-pin.offline span{border-color:rgba(255,93,97,.5)}
#page-overview .map-pin.offline span em{color:var(--red);border-color:rgba(255,93,97,.35);background:rgba(255,93,97,.08)}
#page-overview .map-pin.offline span small{color:var(--red)}
#page-overview .map-pin.pnh{left:47%;top:58%}
#page-overview .map-pin.kdl{left:51%;top:69%}
#page-overview .map-pin.srp{left:43%;top:25%}
#page-overview .map-pin.kpt{left:35%;top:76%}
#page-overview .map-pin.btb{left:29%;top:39%}
#page-overview .map-pin.shv{left:27%;top:68%}
#page-overview .map-pin.kdl span,#page-overview .map-pin.kpt span{left:auto;right:24px}
#page-overview .map-pin.btb span,#page-overview .map-pin.shv span{left:24px}
@media(max-width:900px){
  #page-overview .metrics{left:22px;right:22px;grid-template-columns:1fr 1fr}
  #page-overview .map-pin span{min-width:155px}
}
@media(max-width:720px){
  #page-overview{min-height:1050px}
  #page-overview .overview-grid{position:relative;inset:auto;height:620px}
  #page-overview .metrics{position:relative;left:auto;right:auto;bottom:auto;margin-bottom:10px;pointer-events:auto}
  #page-overview .metric{height:90px}
  #page-overview .cambodia{width:96%;left:0}
  #page-overview .map-pin span{min-width:125px;padding:7px}
  #page-overview .map-pin span em{display:none}
  #page-overview .map-pin span{grid-template-columns:auto}
}

/* Passive TV connector wall */
.tv-summary{display:flex;gap:22px;align-items:center;font:500 10px Hanuman;color:#758083}
.tv-summary span{display:flex;align-items:center;gap:7px}.tv-summary i{width:6px;height:6px;border-radius:50%;box-shadow:0 0 7px currentColor}
#page-cabinet .cabinet-layout{display:block;height:calc(100vh - var(--header) - 20px)}
#page-cabinet .cabinet-list{height:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:7px;overflow:hidden;padding:0}
#page-cabinet .cabinet-card{min-height:0;padding:10px 11px;cursor:default;overflow:hidden}
#page-cabinet .cabinet-card:hover{transform:none;border-color:#2b3031;box-shadow:none}
#page-cabinet .cabinet-top small{font-size:6px}
#page-cabinet .cabinet-top h3{font-size:11px;margin:3px 0}
#page-cabinet .status-pill{height:17px;font-size:5px}
#page-cabinet .cabinet-station{padding-bottom:7px;font-size:7px}
#page-cabinet .connector-preview{gap:5px;margin-top:7px}
#page-cabinet .conn{padding:7px}
#page-cabinet .conn-head b{font-size:7px}
#page-cabinet .conn-head span{font-size:5px}
#page-cabinet .conn strong{font-size:13px;margin:5px 0 1px}
#page-cabinet .conn small{font-size:5px}
.card-telemetry{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:6px}
.card-telemetry span{background:#121616;padding:5px;font:500 5px Oxanium;color:#4f5b5d}
.card-telemetry b{display:block;color:#899597;font-size:6px;margin-top:2px}
#page-transactions .transaction-panel{height:calc(100vh - var(--header) - 92px)}
#page-transactions .table-scroll{height:calc(100% - 55px);overflow:hidden}
#page-transactions table{height:100%}
@media(max-width:1200px){
  #page-cabinet .cabinet-list{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr))}
}
@media(max-width:720px){
  #page-cabinet .cabinet-list{display:grid;grid-template-columns:1fr;grid-template-rows:none;height:auto;overflow:visible}
  .tv-summary{display:none}
}

/* Native Full HD television composition: 1920 × 1080 */
@media (min-width:1600px) and (min-height:900px){
  :root{--header:108px}
  .topbar{grid-template-columns:260px 1fr 260px;padding:0 36px}
  .brand img{width:148px}
  .brand span{font-size:8px}
  .command-title{height:48px}
  .command-title small{font-size:13px}
  .command-title h1{font-size:15px;letter-spacing:3px}
  .center-menu{height:60px;gap:12px}
  .center-menu button{height:50px;min-width:188px;font-size:17px;padding:7px 24px 10px}
  .center-menu button small{font-size:7px;margin-top:2px}
  .clock b{font-size:14px}.clock span{font-size:8px}
  .system-live span{font-size:8px}.system-live i{width:7px;height:7px}
  .page{padding:12px 24px 18px}
  .page-heading{height:42px;margin-bottom:8px}
  .page-heading h2{font-size:25px}
  .page-heading h2 small{font-size:9px;margin-left:12px}
  .tv-summary{font-size:12px;gap:28px}
  #page-overview .overview-grid{inset:10px 24px 18px}
  #page-overview .panel-head{height:64px;padding:14px 20px}
  #page-overview .panel-head span{font-size:8px}
  #page-overview .panel-head h3{font-size:15px}
  #page-overview .map-wrap{height:100%}
  #page-overview .cambodia{height:98%;width:72%;left:12%;top:1%}
  #page-overview .map-pin span{min-width:252px;padding:12px 14px;column-gap:11px}
  #page-overview .map-pin span b{font-size:10px}
  #page-overview .map-pin span strong{font-size:9px;margin-top:5px}
  #page-overview .map-pin span small{font-size:9px}
  #page-overview .map-pin span u{font-size:8px}
  #page-overview .map-pin span mark{font-size:7px}
  #page-overview .map-pin span em{width:32px;height:49px}
  #page-overview .map-pin>i{width:17px;height:17px}
  #page-overview .metrics{left:38px;right:38px;bottom:28px;gap:10px}
  #page-overview .metric{height:88px;padding:14px 18px}
  #page-overview .metric span{font-size:8px}
  #page-overview .metric strong{font-size:22px}
  #page-overview .metric p{font-size:8px}
  #page-overview .map-stats{padding:11px}
  #page-overview .map-stats b{font-size:14px}
  #page-overview .map-stats span{font-size:7px;padding:0 13px}
  #page-cabinet .cabinet-layout{height:calc(100vh - var(--header) - 24px)}
  #page-cabinet .cabinet-list{grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:8px}
  #page-cabinet .cabinet-card{padding:10px 11px}
  #page-cabinet .cabinet-top small{font-size:7px}
  #page-cabinet .cabinet-top h3{font-size:12px;margin:3px 0}
  #page-cabinet .status-pill{height:20px;font-size:6px;padding:0 8px}
  #page-cabinet .cabinet-station{font-size:8px;padding-bottom:6px}
  #page-cabinet .connector-preview{gap:5px;margin-top:6px}
  #page-cabinet .conn{padding:7px}
  #page-cabinet .conn-head b{font-size:8px}
  #page-cabinet .conn-head span{font-size:6px}
  #page-cabinet .conn strong{font-size:14px;margin:5px 0 1px}
  #page-cabinet .conn small{font-size:6px}
  .card-telemetry{gap:4px;margin-top:5px}
  .card-telemetry span{padding:5px;font-size:5px}
  .card-telemetry b{font-size:7px;margin-top:2px}
  .transaction-stats{gap:10px}
  .transaction-stats>div{padding:17px 19px}
  .transaction-stats span{font-size:8px}
  .transaction-stats strong{font-size:22px}
  .transaction-stats small{font-size:8px}
  #page-transactions .transaction-panel{height:calc(100vh - var(--header) - 104px)}
  th{height:45px;font-size:8px;padding:0 18px}
  td{height:58px;font-size:10px;padding:0 18px}
  td b{font-size:10px;margin-bottom:4px}
  td small{font-size:7px}
  .tx-status{font-size:7px;padding:6px 9px}
  .table-foot{height:58px;padding:0 18px;font-size:8px}
}

/* Recognizable Cambodia province map and compact nationwide station markers */
.country-stage{position:absolute;height:calc(100% - 98px);aspect-ratio:2000/1613;left:50%;top:2px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(71,197,212,.08),transparent 68%)}
.map-zoom-layer{
  position:absolute;
  inset:0;
  transform-origin:0 0;
  transform:translate(var(--map-x,0%),var(--map-y,0%)) scale(var(--map-zoom,1));
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
#stationMap{position:absolute;inset:0;z-index:2;background:#071011}
#stationMap:after{content:"";position:absolute;inset:0;z-index:400;pointer-events:none;background:linear-gradient(90deg,rgba(4,10,11,.18),transparent 25%,transparent 70%,rgba(4,10,11,.42)),linear-gradient(180deg,rgba(4,10,11,.22),transparent 22%,transparent 82%,rgba(4,10,11,.24))}
.leaflet-container{font-family:Hanuman,Inter,sans-serif}
.leaflet-control-zoom{border:1px solid rgba(71,197,212,.38)!important;box-shadow:0 8px 22px rgba(0,0,0,.35)!important}
.leaflet-control-zoom a{color:var(--cyan)!important;background:rgba(8,16,17,.9)!important;border-color:#294044!important}
.leaflet-control-attribution{background:rgba(5,10,11,.72)!important;color:#6f7c7e!important;font-size:8px!important}
.leaflet-control-attribution a{color:#8ba4a7!important}
.station-map-icon{background:none!important;border:0!important}
.satellite-marker{position:relative;height:42px;display:flex;align-items:center;filter:drop-shadow(0 7px 8px rgba(0,0,0,.72));perspective:180px}
.charger-map-icon{position:relative;flex:0 0 27px;width:27px;height:39px;display:grid;place-items:end center;z-index:2}
.charger-map-icon img{position:relative;z-index:2;width:24px;height:36px;object-fit:contain;border:1px solid var(--cyan);border-radius:3px;background:rgba(5,13,14,.58);box-shadow:0 0 0 2px rgba(71,197,212,.12),0 0 14px rgba(71,197,212,.75)}
.charger-map-icon:before{content:"";position:absolute;z-index:1;left:50%;bottom:3px;width:19px;height:19px;border:1px solid var(--cyan);border-radius:50%;transform:translate(-50%,50%);animation:stationPing 2.7s ease-out infinite}
.charger-map-icon:after{content:"";position:absolute;left:50%;bottom:-3px;width:14px;height:4px;border-radius:50%;background:var(--cyan);filter:blur(5px);transform:translateX(-50%);opacity:.8}
.satellite-marker>span{position:relative;margin-left:4px;min-width:112px;padding:4px 6px 5px;background:linear-gradient(115deg,rgba(10,24,26,.72),rgba(5,12,13,.36));border:1px solid rgba(111,230,241,.46);border-left-color:rgba(173,247,252,.72);backdrop-filter:blur(9px) saturate(1.35);transform:rotateY(-3deg);transform-origin:left center;box-shadow:inset 0 1px rgba(255,255,255,.08),5px 6px 0 -3px rgba(2,8,9,.48),8px 10px 18px rgba(0,0,0,.28);clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%)}
.satellite-marker>span:after{content:"";position:absolute;right:0;top:0;border-top:7px solid rgba(141,238,245,.38);border-left:7px solid transparent}
.satellite-marker b,.satellite-marker small{display:block;white-space:nowrap;font-family:Oxanium}
.satellite-marker b{font-size:9px;line-height:11px;color:#f1f8f8;letter-spacing:.35px}.satellite-marker small{display:flex;justify-content:space-between;gap:5px;margin-top:1px;font-size:6px;color:var(--cyan)}
.satellite-marker small i,.satellite-marker small em{font-style:normal}.satellite-marker small em{color:#a7b8ba}
.satellite-marker.available>span{border-color:var(--cyan)}.satellite-marker.available small{color:var(--cyan)}
.satellite-marker.charging .charger-map-icon img{border-color:var(--green);box-shadow:0 0 0 3px rgba(50,245,140,.2),0 0 20px var(--green)}
.satellite-marker.charging .charger-map-icon:before{border-color:var(--green);animation-duration:1.4s}
.satellite-marker.charging .charger-map-icon:after{background:var(--green)}
.satellite-marker.charging>span{border-color:rgba(50,245,140,.7)}.satellite-marker.charging small{color:var(--green)}
.satellite-marker.offline .charger-map-icon img{border-color:var(--red);filter:grayscale(.65);box-shadow:0 0 0 3px rgba(255,93,97,.18),0 0 18px var(--red)}
.satellite-marker.offline .charger-map-icon:before{border-color:var(--red);animation:none;opacity:.5}
.satellite-marker.offline .charger-map-icon:after{background:var(--red)}
.satellite-marker.offline>span{border-color:rgba(255,93,97,.65)}.satellite-marker.offline small{color:var(--red)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:rgba(7,14,15,.96)!important;color:#edf7f7!important;border:1px solid #36575b;box-shadow:0 14px 40px rgba(0,0,0,.5)!important}
.station-popup{min-width:220px}.station-popup b,.station-popup span,.station-popup strong,.station-popup em{display:block}
.station-popup b{font:700 12px Oxanium;color:#fff}.station-popup span{margin-top:7px;color:#899799;font-size:10px}.station-popup strong{margin-top:8px;color:var(--green);font-size:10px}.station-popup em{margin-top:4px;color:var(--cyan);font:600 10px Oxanium;font-style:normal}
.cambodia-country-map{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.88;filter:drop-shadow(0 0 13px rgba(71,197,212,.24))}
#provinceStations{position:absolute;inset:2.5% 2.5% 3.5%}
.province-station{position:absolute;z-index:2;transform:translate(-50%,-50%);display:flex;align-items:center;filter:drop-shadow(0 5px 8px rgba(0,0,0,.6))}
.province-station>img{width:18px;height:22px;object-fit:cover;object-position:center;border:1px solid var(--cyan);background:#233f3e;border-radius:2px;box-shadow:0 0 0 3px rgba(71,197,212,.09),0 0 8px rgba(71,197,212,.5)}
.province-station>span{height:22px;min-width:48px;padding:3px 5px;background:rgba(11,18,19,.92);border:1px solid #315154;border-left:0;text-align:left}
.province-station>span b{display:block;font:700 7px Oxanium;color:#d7e4e4;line-height:7px}
.province-station>span small{display:block;font:600 5px Oxanium;color:var(--cyan);margin-top:3px;white-space:nowrap}
.province-station.charging>img{border-color:var(--green);box-shadow:0 0 0 3px rgba(50,245,140,.1),0 0 9px rgba(50,245,140,.65)}
.province-station.charging>span{border-color:rgba(50,245,140,.55)}.province-station.charging>span small{color:var(--green)}
.province-station.offline>img{border-color:var(--red);filter:grayscale(.8);box-shadow:0 0 0 3px rgba(255,93,97,.1),0 0 9px rgba(255,93,97,.6)}
.province-station.offline>span{border-color:rgba(255,93,97,.55)}.province-station.offline>span small{color:var(--red)}
.province-station aside{display:none;position:absolute;left:20px;bottom:28px;width:142px;padding:8px 9px;background:rgba(10,16,17,.97);border:1px solid #3d6267;text-align:left;z-index:5}
.province-station:hover{z-index:8}.province-station:hover aside{display:block}
.province-station aside strong{display:block;font:600 8px Oxanium;color:#e0e9ea}
.province-station aside small,.province-station aside em{display:block;font:500 6px Hanuman;color:#788486;margin-top:4px;font-style:normal}
.province-station aside em{color:var(--cyan)}
.map-credit{position:absolute;left:12px;bottom:7px;font:400 6px Inter;color:#414c4e;z-index:2}
.map-status-legend{position:absolute;z-index:5;left:18px;top:17px;display:flex;gap:16px;padding:8px 10px;background:rgba(11,17,18,.84);border:1px solid #293b3d;font:600 7px Hanuman;color:#687477}
.map-status-legend span{display:flex;align-items:center;gap:6px}.map-status-legend i{width:7px;height:7px;border-radius:50%;box-shadow:0 0 7px currentColor}
.map-status-legend .station-available{background:var(--cyan);color:var(--cyan)}.map-status-legend .station-charging{background:var(--green);color:var(--green)}.map-status-legend .station-offline{background:var(--red);color:var(--red)}
#page-overview .map-stats{z-index:4}
#page-overview .cambodia{display:none}
@media (min-width:1600px) and (min-height:900px){
  .country-stage{height:calc(100% - 106px);top:1px}
  .province-station>img{width:20px;height:25px}
  .province-station>span{height:25px;min-width:54px;padding:4px 6px}
  .province-station>span b{font-size:8px;line-height:8px}
  .province-station>span small{font-size:6px}
}
@media(max-width:900px){
  .country-stage{width:94%;height:auto;top:45px}
  .province-station>span{display:none}
  .province-station>img{width:13px;height:16px}
}

/* Station TV screen: large map with a vertical data rail */
@media(min-width:901px){
  #page-overview .metrics{
    left:auto;
    right:28px;
    top:24px;
    bottom:24px;
    width:292px;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:repeat(4,minmax(0,1fr));
    gap:10px;
  }
  #page-overview .metric{
    width:100%;
    height:auto;
    min-height:0;
    padding:18px;
  }
  #page-overview .metric-icon{width:38px;height:38px}
  #page-overview .metric span{font-size:8px}
  #page-overview .metric strong{font-size:24px;margin:8px 0 6px}
  #page-overview .metric p{font-size:9px}
  #page-overview .ring{width:54px;height:54px}
  #page-overview .spark{right:16px;bottom:18px;height:42px}
  #page-overview .mini-bars{height:52px}
  #page-overview .country-stage{
    height:calc(100% - 18px);
    left:42%;
    top:9px;
  }
  #page-overview .map-stats{
    right:338px;
    top:18px;
  }
}
@media(min-width:1600px) and (min-height:900px){
  #page-overview .metrics{right:34px;top:30px;bottom:30px;width:318px;gap:12px}
  #page-overview .metric{padding:21px}
  #page-overview .metric-icon{width:42px;height:42px}
  #page-overview .metric span{font-size:9px}
  #page-overview .metric strong{font-size:28px}
  #page-overview .metric p{font-size:10px}
  #page-overview .country-stage{height:calc(100% - 10px);left:41%;top:5px}
  #page-overview .map-stats{right:374px;top:22px}
}

/* Seven-card compact operations rail */
@media(min-width:901px){
  #page-overview .metrics{
    grid-template-rows:repeat(7,minmax(0,1fr));
    gap:7px;
    top:18px;
    bottom:18px;
  }
  #page-overview .metric{padding:10px 12px;gap:10px}
  #page-overview .metric:before{top:12px;height:27px}
  #page-overview .metric-icon{width:30px;height:30px;flex:0 0 30px}
  #page-overview .metric-icon svg{width:15px}
  #page-overview .metric span{font-size:7px}
  #page-overview .metric strong{font-size:19px;margin:4px 0 3px}
  #page-overview .metric strong small{font-size:8px}
  #page-overview .metric p{font-size:7px}
  #page-overview .ring{width:40px;height:40px}
  #page-overview .spark{height:25px;right:10px;bottom:10px}
  #page-overview .wave{transform:scale(.72)}
  #page-overview .mini-bars{height:28px;transform:scale(.8)}
  #page-overview .network-total{background:linear-gradient(145deg,rgba(71,197,212,.065),rgba(15,19,20,.95))}
  #page-overview .network-total strong{color:var(--cyan)}
}
@media(min-width:1600px) and (min-height:900px){
  #page-overview .metrics{top:22px;bottom:22px;gap:8px}
  #page-overview .metric{padding:12px 15px}
  #page-overview .metric-icon{width:32px;height:32px;flex-basis:32px}
  #page-overview .metric span{font-size:8px}
  #page-overview .metric strong{font-size:22px}
  #page-overview .metric p{font-size:8px}
}

/* Khmer-first card typography */
#page-overview .metric span{
  font-family:Hanuman,"Khmer OS System",sans-serif!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1.45;
  letter-spacing:0;
  color:#e1eded;
}
#page-overview .metric p{
  font-family:Hanuman,"Khmer OS System",sans-serif;
  font-size:9px;
  line-height:1.45;
  color:#849193;
}
#page-overview .metric strong{
  color:#f4fbfb;
  text-shadow:0 0 12px rgba(255,255,255,.08);
}
#page-overview .network-total span{color:#9eeaf1}
#page-overview .network-total strong{color:var(--cyan)}
@media(min-width:1600px) and (min-height:900px){
  #page-overview .metric span{font-size:13px!important}
  #page-overview .metric p{font-size:10px}
}

/* Compact TV header, large two-line title, and persistent system footer */
:root{--header:74px;--footer:27px}
.topbar{
  height:var(--header);
  grid-template-columns:240px 1fr 410px;
  padding:0 30px;
}
.brand img{width:132px}
.command-center{height:100%;justify-content:center}
.command-title{height:auto;display:block;text-align:center}
.command-title h1{
  border:0;
  padding:0;
  margin:0;
  font-family:Hanuman,"Khmer OS System",sans-serif;
  font-size:20px;
  font-weight:700;
  line-height:1.32;
  letter-spacing:0;
  color:#f0f8f8;
}
.command-title h1 span{color:var(--cyan);font-family:Oxanium,Inter,sans-serif;font-size:.62em;font-weight:600;letter-spacing:2.8px}
.title-line{width:520px;left:calc(50% - 260px)}
.topbar>.center-menu{
  position:absolute;
  right:30px;
  top:50%;
  height:auto;
  transform:translateY(-50%);
  align-items:center;
  gap:6px;
  margin:0;
}
.topbar>.center-menu button{
  min-width:104px;
  width:auto;
  height:34px;
  padding:5px 13px;
  border:1px solid #293334;
  font-family:Hanuman,"Khmer OS System",sans-serif;
  font-size:12px;
  font-weight:600;
  line-height:1;
}
.topbar>.center-menu button.active{border-color:#356068}
.tv-footer{
  position:fixed;
  z-index:12;
  left:0;
  right:0;
  bottom:0;
  height:var(--footer);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 24px;
  border-top:1px solid #283234;
  background:rgba(10,13,14,.96);
  color:#667274;
  font:500 8px Hanuman,"Khmer OS System",sans-serif;
}
.tv-footer span{white-space:nowrap}
.tv-footer b{color:#b9c7c8;font:600 9px Oxanium}
.tv-footer em{font-style:normal;color:#778486;margin-left:7px}
.footer-status{color:var(--green)!important}.footer-status i{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
main{padding-top:var(--header);padding-bottom:var(--footer)}
.page{height:calc(100vh - var(--header) - var(--footer));min-height:calc(100vh - var(--header) - var(--footer))}
#page-cabinet .cabinet-layout{height:calc(100vh - var(--header) - var(--footer) - 20px)}
#page-transactions .transaction-panel{height:calc(100vh - var(--header) - var(--footer) - 92px)}

/* 1.5× TV reading scale for operational content */
@media(min-width:901px){
  .province-station>span{min-width:67px;height:28px;padding:4px 6px}
  .province-station>span b{font-size:10px;line-height:10px}
  .province-station>span small{font-size:7px}
  .province-station>img{width:23px;height:28px}
  .map-status-legend{font-size:10px}
  .map-stats b{font-size:18px}.map-stats span{font-size:9px}
  #page-cabinet .cabinet-top small{font-size:9px}
  #page-cabinet .cabinet-top h3{font-size:16px}
  #page-cabinet .status-pill{font-size:8px}
  #page-cabinet .cabinet-station{font-size:11px}
  #page-cabinet .conn-head b{font-size:10px}
  #page-cabinet .conn-head span{font-size:8px}
  #page-cabinet .conn strong{font-size:18px}
  #page-cabinet .conn small{font-size:8px}
  .card-telemetry span{font-size:7px}.card-telemetry b{font-size:9px}
  .transaction-stats span{font-size:11px}
  .transaction-stats strong{font-size:28px}
  .transaction-stats small{font-size:10px}
  th{font-size:11px}
  td{font-size:13px}
  td b{font-size:13px}
  td small{font-size:9px}
  .tx-status{font-size:9px}
  .table-foot{font-size:10px}
}

/* High-contrast TV palette and colorful map data rail */
body{background:radial-gradient(ellipse 72% 46% at 48% -8%,rgba(71,197,212,.14),transparent 64%),#050708;color:#f4fafa}
.topbar{background:rgba(5,8,9,.97);border-bottom-color:#344246;box-shadow:0 7px 26px rgba(0,0,0,.48)}
.tv-footer{background:#050708;border-top-color:#334044;color:#879497}
.panel{background:linear-gradient(145deg,#111718,#080b0c);border-color:#354044}
.map-wrap{background-color:#070b0c}
.map-grid{opacity:1;background-image:linear-gradient(rgba(71,197,212,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(71,197,212,.065) 1px,transparent 1px)}
.cambodia-country-map{opacity:1;filter:drop-shadow(0 0 17px rgba(71,197,212,.34))}
.map-status-legend,.map-stats{background:rgba(5,10,11,.94);border-color:#3d5357}
#page-overview .metric{
  --rail:var(--cyan);
  background:linear-gradient(110deg,color-mix(in srgb,var(--rail) 15%,#090d0e),#080b0c 72%);
  border-color:color-mix(in srgb,var(--rail) 50%,#222a2c);
  box-shadow:inset 0 0 28px color-mix(in srgb,var(--rail) 7%,transparent),0 8px 20px rgba(0,0,0,.32);
}
#page-overview .metric:before{width:3px;background:var(--rail);box-shadow:0 0 15px var(--rail)}
#page-overview .metric:nth-child(1){--rail:#47c5d4;--tone:#47c5d4}
#page-overview .metric:nth-child(2){--rail:#a887ff;--tone:#a887ff}
#page-overview .metric:nth-child(3){--rail:#ffb546;--tone:#ffb546}
#page-overview .metric:nth-child(4){--rail:#29b6f6;--tone:#29b6f6}
#page-overview .metric:nth-child(5){--rail:#47c5d4;--tone:#47c5d4}
#page-overview .metric:nth-child(6){--rail:#32f58c;--tone:#32f58c}
#page-overview .metric:nth-child(7){--rail:#c18cff;--tone:#c18cff}
#page-overview .metric-icon{border-color:color-mix(in srgb,var(--rail) 65%,transparent);background:color-mix(in srgb,var(--rail) 13%,transparent);box-shadow:inset 0 0 14px color-mix(in srgb,var(--rail) 10%,transparent)}
#page-overview .metric-icon svg{stroke:var(--rail)}
#page-overview .metric span,#page-overview .network-total span{color:#f0f8f8}
#page-overview .metric strong,#page-overview .network-total strong{color:#fff}
#page-overview .metric p{color:#9ba8aa}
#page-overview .metric p b{color:var(--rail)}
#page-overview .network-total strong{text-shadow:0 0 14px color-mix(in srgb,var(--rail) 45%,transparent)}
.cabinet-card{background:linear-gradient(145deg,#121718,#080b0c);border-color:#354044}
.cabinet-station{color:#9ba7a9;border-bottom-color:#303b3e}
.conn{background:#080d0e;border-color:#374448}
.conn-head b,td b{color:#edf7f7}
.card-telemetry span{background:#070b0c;color:#7f8c8f}.card-telemetry b{color:#d5e0e1}
.transaction-stats>div{background:linear-gradient(145deg,#111718,#080b0c);border-color:#354044}
.transaction-stats strong{color:#f4fbfb}
th{color:#849296;border-bottom-color:#354044}
td{color:#a9b5b7;border-bottom-color:#252e30}

/* Reliable full-height secondary pages */
#page-cabinet.active,#page-transactions.active{display:flex;flex-direction:column}
#page-cabinet .cabinet-layout{height:auto;min-height:0;flex:1}
#page-cabinet .cabinet-list{height:100%;min-height:0}
#page-cabinet .cabinet-card{display:flex;flex-direction:column;min-width:0}
#page-cabinet .connector-preview{flex:1;min-height:0}
#page-transactions .transaction-stats{flex:0 0 auto}
#page-transactions .transaction-panel{height:auto;min-height:0;flex:1;display:flex;flex-direction:column}
#page-transactions .table-scroll{height:auto;min-height:0;flex:1}
#page-transactions table{height:100%}
.topbar>.center-menu{position:relative;z-index:20;pointer-events:auto}
.topbar>.center-menu button{position:relative;z-index:21;pointer-events:auto}

/* Map command-center motion */
#page-overview .map-wrap:before{
  content:"";
  position:absolute;
  z-index:1;
  left:0;
  right:350px;
  top:-18%;
  height:18%;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(71,197,212,.045) 45%,rgba(71,197,212,.2) 98%,transparent);
  border-bottom:1px solid rgba(71,197,212,.3);
  box-shadow:0 8px 22px rgba(71,197,212,.06);
  animation:mapScan 7s linear infinite;
}
.country-stage{animation:mapBreath 6s ease-in-out infinite}
.province-station{animation:stationEnter .55s cubic-bezier(.2,.8,.2,1) both}
.province-station:nth-child(3n+1){animation-delay:.08s}.province-station:nth-child(3n+2){animation-delay:.16s}.province-station:nth-child(3n){animation-delay:.24s}
.province-station:before{
  content:"";
  position:absolute;
  left:10px;
  top:50%;
  width:10px;
  height:10px;
  border:1px solid var(--cyan);
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation:stationPing 3.2s ease-out infinite;
}
.province-station.charging:before{border-color:var(--green);animation-duration:1.45s}
.province-station.charging>img{animation:chargingGlow 1.45s ease-in-out infinite}
.province-station.offline:before{border-color:var(--red);animation:none;opacity:.45}
.province-station.offline>img{animation:offlineBlink 2.4s ease-in-out infinite}
#page-overview .metric{animation:railIn .5s cubic-bezier(.2,.8,.2,1) both}
#page-overview .metric:nth-child(1){animation-delay:.04s}#page-overview .metric:nth-child(2){animation-delay:.08s}#page-overview .metric:nth-child(3){animation-delay:.12s}#page-overview .metric:nth-child(4){animation-delay:.16s}#page-overview .metric:nth-child(5){animation-delay:.2s}#page-overview .metric:nth-child(6){animation-delay:.24s}#page-overview .metric:nth-child(7){animation-delay:.28s}
.map-stats b{animation:dataGlow 3s ease-in-out infinite}
@keyframes mapScan{from{transform:translateY(0)}to{transform:translateY(690%)}}
@keyframes mapBreath{0%,100%{filter:brightness(.94)}50%{filter:brightness(1.1)}}

/* Compact live charging-session table */
#page-transactions .transaction-panel{height:auto;min-height:0;flex:1}
#page-transactions .table-scroll{height:auto;min-height:0;flex:1;overflow:auto}
#page-transactions th{height:30px;padding:0 10px;font-size:6px}
#page-transactions td{height:37px;padding:0 10px;font-size:7px}
#page-transactions td b{font-size:7px;margin-bottom:1px}
#page-transactions td small{font-size:5.5px}
#page-transactions .tx-status{padding:3px 6px;font-size:5.5px}
.session-empty{padding:42px 12px;text-align:center;color:#5f6b6e;font:600 8px Oxanium;letter-spacing:.8px}
@keyframes stationEnter{from{opacity:0;transform:translate(-50%,-35%) scale(.72)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes stationPing{0%{opacity:.8;transform:translate(-50%,-50%) scale(.4)}75%,100%{opacity:0;transform:translate(-50%,-50%) scale(3.2)}}
@keyframes chargingGlow{0%,100%{box-shadow:0 0 0 3px rgba(50,245,140,.1),0 0 8px rgba(50,245,140,.45)}50%{box-shadow:0 0 0 6px rgba(50,245,140,.15),0 0 20px rgba(50,245,140,.95)}}
@keyframes offlineBlink{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes railIn{from{opacity:0;transform:translateX(25px)}to{opacity:1;transform:none}}
@keyframes dataGlow{0%,100%{text-shadow:none}50%{text-shadow:0 0 10px rgba(71,197,212,.55)}}
@media(prefers-reduced-motion:reduce){.country-stage,.province-station,.province-station:before,.province-station>img,#page-overview .metric,.map-stats b,#page-overview .map-wrap:before{animation:none!important}}

/* Explicit data-page visibility and layout safeguards */
.page[hidden]{display:none!important}
#page-cabinet.active{visibility:visible;opacity:1}
#page-cabinet.active .cabinet-layout{display:block;width:100%;flex:1;min-height:0}
#page-cabinet.active #cabinetList{display:grid;width:100%;height:100%;visibility:visible;opacity:1}
#page-transactions.active{visibility:visible;opacity:1}
#page-transactions.active .transaction-stats{display:grid;width:100%;visibility:visible}
#page-transactions.active .transaction-panel{display:flex;width:100%;visibility:visible;opacity:1}
#page-transactions.active #transactionRows{display:table-row-group;visibility:visible}

/* Connector wall refinements */
#page-cabinet .cabinet-top{min-height:22px;align-items:center}
#page-cabinet .cabinet-top h3{margin:0}
#page-cabinet .conn.off{
  border-color:rgba(255,93,97,.76);
  background:linear-gradient(145deg,rgba(255,93,97,.11),#0b0e0f);
  box-shadow:inset 0 0 20px rgba(255,93,97,.065),0 0 8px rgba(255,93,97,.08);
}
#page-cabinet .conn.off .conn-head span,#page-cabinet .conn.off strong{
  color:var(--red);
  text-shadow:0 0 9px rgba(255,93,97,.42);
}
/* Telemetry-first cabinet cards: active cabinets, independent gun states */
#page-cabinet .cabinet-card{
  padding:8px 9px;
  background:linear-gradient(145deg,#111718,#070a0b);
  border-color:#344145;
}
#page-cabinet .cabinet-top{height:21px;min-height:21px}
#page-cabinet .cabinet-top h3{font-size:14px;color:#f1f8f8}
.cabinet-online{display:flex;align-items:center;gap:5px;font:600 7px Oxanium;white-space:nowrap}
.cabinet-online i{width:5px;height:5px;border-radius:50%}
.cabinet-online.connected i{background:var(--green);box-shadow:0 0 7px var(--green)}
.cabinet-online.connected b{font:600 7px Oxanium;color:var(--green)}
.cabinet-online.disconnected i{background:var(--red);box-shadow:0 0 7px var(--red)}
.cabinet-online.disconnected b{font:600 7px Oxanium;color:var(--red)}
.cabinet-online small{font:500 6px Oxanium;color:#839092;border-left:1px solid #344043;padding-left:5px}
#page-cabinet .cabinet-station{
  min-height:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:2px 0 5px;
  color:#9ba8aa;
  font-family:Hanuman,"Khmer OS System",sans-serif;
  font-size:9px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#page-cabinet .cabinet-station b{flex:0 0 auto;color:#647174;font-size:7px;font-weight:500}
#page-cabinet .cabinet-station>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
#page-cabinet .cabinet-station>span strong{color:var(--cyan);font:600 8px Oxanium}
#page-cabinet .connector-preview{gap:6px;margin-top:5px}
#page-cabinet .connector-preview.single .conn{max-width:100%}
#page-cabinet .conn{
  min-width:0;
  padding:7px;
  border-width:1px;
  background:#090d0e;
  position:relative;
  overflow:hidden;
}
#page-cabinet .conn.available{border-color:rgba(71,197,212,.58);box-shadow:inset 0 0 16px rgba(71,197,212,.04)}
#page-cabinet .conn.charging{border-color:rgba(50,245,140,.78);box-shadow:inset 0 0 20px rgba(50,245,140,.075),0 0 8px rgba(50,245,140,.07)}
#page-cabinet .conn.off{border-color:rgba(255,93,97,.82)}
#page-cabinet .conn.charging:after{
  content:"";
  position:absolute;
  z-index:0;
  left:-45%;
  top:0;
  width:38%;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--green),#fff,var(--green),transparent);
  box-shadow:0 0 9px var(--green);
  animation:connectorGreenRun 1.65s linear infinite;
}
#page-cabinet .conn.off{
  animation:connectorRedAlert 1.15s ease-in-out infinite;
}
#page-cabinet .conn.off:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border:1px solid rgba(255,93,97,.9);
  animation:connectorRedBorder 1.15s ease-in-out infinite;
}
#page-cabinet .conn-head,#page-cabinet .gun-metrics{position:relative;z-index:1}
#page-cabinet .conn-head{height:19px;align-items:flex-start;gap:4px}
#page-cabinet .conn-head b{font-size:8px;color:#e5eeee;white-space:nowrap}
#page-cabinet .conn-head span{font-size:6px;white-space:nowrap}
.gun-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:4px}
.gun-metrics span{min-width:0;padding:4px 3px;background:#06090a;color:#657174;font:500 6px Hanuman,"Khmer OS System",sans-serif}
.gun-metrics b{display:block;margin-top:2px;color:#dbe6e7;font:600 8px Oxanium;white-space:nowrap}
#page-cabinet .conn.charging .gun-metrics b{color:#dfffee;text-shadow:none}
#page-cabinet .conn.off .gun-metrics b{color:#aa777a;text-shadow:none}

/* Full-width gun rows: one row per gun */
#page-cabinet .connector-preview,
#page-cabinet .connector-preview.single{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:5px;
  width:100%;
  margin-top:5px;
}
#page-cabinet .connector-preview .conn,
#page-cabinet .connector-preview.single .conn{
  flex:0 0 54px;
  width:100%;
  max-width:none;
  min-height:54px;
  display:grid;
  grid-template-columns:108px minmax(0,1fr);
  align-items:center;
  gap:7px;
  padding:6px 7px;
}
#page-cabinet .conn-head{
  height:auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:5px;
  padding-right:7px;
  border-right:1px solid #2a3537;
}
#page-cabinet .conn-head b{font-size:9px}
#page-cabinet .conn-head span{font-size:7px}
#page-cabinet .gun-metrics{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:3px;
  margin:0;
}
#page-cabinet .gun-metrics span{
  min-width:0;
  padding:4px 2px;
  text-align:center;
}
#page-cabinet .connector-preview.many{gap:3px;margin-top:2px}
#page-cabinet .connector-preview.many .conn{
  flex-basis:37px;
  min-height:37px;
  grid-template-columns:92px minmax(0,1fr);
  padding:3px 5px;
}
#page-cabinet .connector-preview.many .conn-head{gap:2px}
#page-cabinet .connector-preview.many .conn-head b{font-size:7px}
#page-cabinet .connector-preview.many .conn-head span{font-size:5px}
#page-cabinet .connector-preview.many .gun-metrics span{padding:2px 1px;font-size:5px}
#page-cabinet .connector-preview.many .gun-metrics b{font-size:6px}

/* Transparent two-line KPI rail over the satellite map */
#page-overview .metric{
  background:linear-gradient(110deg,color-mix(in srgb,var(--rail) 11%,rgba(4,9,10,.66)),rgba(4,8,9,.56) 72%);
  border-color:color-mix(in srgb,var(--rail) 58%,rgba(17,28,30,.58));
  box-shadow:inset 0 0 24px color-mix(in srgb,var(--rail) 6%,transparent),0 7px 18px rgba(0,0,0,.2);
  backdrop-filter:blur(7px) saturate(1.15);
}
#page-overview .metric p,
#page-overview .metric .spark,
#page-overview .metric .ring,
#page-overview .metric .wave,
#page-overview .metric .mini-bars{display:none!important}
#page-overview .metric>div:nth-child(2){
  display:flex;
  min-width:0;
  flex-direction:column;
  justify-content:center;
}
#page-overview .metric strong{margin-bottom:0}
#page-overview .metric:nth-child(1){--rail:#47c5d4;--tone:#47c5d4}
#page-overview .metric:nth-child(2){--rail:#a887ff;--tone:#a887ff}
#page-overview .metric:nth-child(3){--rail:#ffb546;--tone:#ffb546}
#page-overview .metric:nth-child(4){--rail:#47c5d4;--tone:#47c5d4}
#page-overview .metric:nth-child(5){--rail:#32f58c;--tone:#32f58c}
#page-overview .metric:nth-child(6){--rail:#a887ff;--tone:#a887ff}
#page-overview .metric:nth-child(7){--rail:#c18cff;--tone:#c18cff}

@media(min-width:901px){
  #page-overview .metrics{
    width:170px!important;
    top:50%!important;
    bottom:auto!important;
    height:auto;
    transform:translateY(-50%);
    grid-template-rows:repeat(7,104px)!important;
    gap:7px!important;
  }
  #page-overview .metric{
    padding:12px 10px!important;
    gap:9px!important;
  }
  #page-overview .metric-icon{
    width:29px!important;
    height:29px!important;
    flex:0 0 29px!important;
    animation:metricIconFloat 2.8s ease-in-out infinite;
  }
  #page-overview .metric:nth-child(2) .metric-icon{animation-delay:.35s}
  #page-overview .metric:nth-child(3) .metric-icon{animation-delay:.55s}
  #page-overview .metric:nth-child(4) .metric-icon{animation-delay:.7s}
  #page-overview .metric:nth-child(5) .metric-icon{animation:metricIconCharge 1.35s ease-in-out infinite}
  #page-overview .metric:nth-child(6) .metric-icon{animation-delay:.9s}
  #page-overview .metric:nth-child(7) .metric-icon{animation-delay:1.1s}
  #page-overview .metric span{font-size:9px!important;line-height:1.65}
  #page-overview .metric strong{font-size:22px!important;margin-top:5px}
}
@keyframes metricIconFloat{
  0%,100%{transform:translateY(0);filter:brightness(1)}
  50%{transform:translateY(-4px);filter:brightness(1.35);box-shadow:0 0 16px color-mix(in srgb,var(--rail) 38%,transparent)}
}
@keyframes metricIconCharge{
  0%,100%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.1);filter:brightness(1.65);box-shadow:0 0 19px rgba(50,245,140,.42)}
}
@keyframes connectorGreenRun{
  from{left:-45%}
  to{left:110%}
}
@keyframes connectorRedAlert{
  0%,100%{background-color:rgba(255,93,97,.035);box-shadow:inset 0 0 14px rgba(255,93,97,.05)}
  50%{background-color:rgba(255,93,97,.14);box-shadow:inset 0 0 24px rgba(255,93,97,.18),0 0 11px rgba(255,93,97,.2)}
}
@keyframes connectorRedBorder{
  0%,100%{opacity:.42}
  50%{opacity:1}
}
#page-cabinet .gun-metrics b{
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:8px;
}

/* 5×5 cabinet pagination matrix */
#page-cabinet .cabinet-layout{position:relative}
.cabinet-page-meta{
  color:var(--cyan);
  font:600 8px Hanuman,"Khmer OS System",sans-serif;
  pointer-events:none;
}
body:not([data-page="cabinet"]) .cabinet-page-meta{display:none}
.cabinet-empty{
  min-width:0;
  min-height:0;
  display:grid;
  place-items:center;
  border:1px dashed #20292b;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.008) 0,rgba(255,255,255,.008) 8px,transparent 8px,transparent 16px);
}
.cabinet-empty span{color:#263033;font:500 8px Hanuman,"Khmer OS System",sans-serif}

/* Anchor the title to the true screen center */
.topbar>.command-center{
  position:absolute;
  left:50%;
  top:0;
  width:680px;
  height:var(--header);
  transform:translateX(-50%);
  z-index:2;
  pointer-events:none;
}
.topbar>.command-center .title-line{left:50%;transform:translateX(-50%)}

/* Keep centered title and right navigation in separate header zones */
.topbar>.command-center{
  width:min(680px,44vw);
}
.topbar>.command-center .command-title h1{
  font-size:clamp(15px,1.05vw,20px);
  white-space:normal;
}
.topbar>.center-menu{
  right:22px;
  width:330px;
  justify-content:flex-end;
}
.topbar>.center-menu button{
  min-width:96px;
  padding-left:10px;
  padding-right:10px;
}
@media(max-width:1250px){
  .topbar>.command-center{width:40vw}
  .topbar>.center-menu{width:300px}
  .topbar>.center-menu button{min-width:88px;font-size:11px}
}

/* Hard-anchor navigation to the viewport's far-right edge */
header.topbar>nav.center-menu{
  position:fixed!important;
  left:auto!important;
  right:24px!important;
  top:20px!important;
  bottom:auto!important;
  width:auto!important;
  height:34px!important;
  margin:0!important;
  transform:none!important;
  display:flex!important;
  flex-direction:row!important;
  justify-content:flex-end!important;
  align-items:center!important;
  z-index:100!important;
}

/* High-contrast session and transaction typography */
#page-transactions .transaction-panel{background:linear-gradient(145deg,#090d0e,#050708);border-color:#344144}
#page-transactions thead{background:#080c0d}
#page-transactions th{color:#dce9ea;border-bottom-color:#3a4749}
#page-transactions td{color:#f3f8f8;border-bottom-color:#273234}
#page-transactions td b{color:#fff}
#page-transactions td small{color:#b8c7c9}
#page-transactions .table-foot{background:#070a0b;color:#d5e1e2;border-top:1px solid #303b3d}
#page-transactions .tx-status.completed{color:#70ffb0}
#page-transactions .tx-status.charging{color:#ffd070}
#page-transactions .tx-status.failed{color:#ff8588}
.live-panel{background:linear-gradient(145deg,#090d0e,#050708)}
.live-panel .panel-head span,.live-panel .session-name span,.live-panel .session-power span,.live-panel .session-meta{color:#c1ced0}
.live-panel .panel-head h3,.live-panel .session-name b,.live-panel .session-meta b{color:#fff}
.session-empty{color:#d5e1e2}

/* Larger control-room typography for long-distance viewing */
.panel-head h3{font-size:15px}
.panel-head span{font-size:8px}
.metric span{font-size:8px}
.metric strong{font-size:25px}
.tv-footer{font-size:9px}
.live-panel .session-name b{font-size:10px}
.live-panel .session-name span,.live-panel .session-power span,.live-panel .session-meta{font-size:8px}
.live-panel .session-power b{font-size:14px}
#page-transactions th{height:36px;padding:0 14px;font-size:11px;color:#eef7f7;letter-spacing:1.2px}
#page-transactions td{height:50px;padding:0 14px;font-size:12px}
#page-transactions td b{font-size:13px;line-height:16px}
#page-transactions td small{font-size:10px;line-height:14px;color:#d0dcdd}
#page-transactions .tx-status{padding:6px 10px;font-size:9px}
#page-transactions th:nth-child(7){text-align:center}
#page-transactions td.payment-total{text-align:center}
#page-transactions td.payment-total b{display:inline;margin:0;color:#70ffb0;font-size:18px;line-height:1;text-shadow:0 0 12px rgba(50,245,140,.34)}
#page-transactions .table-foot{height:42px;padding-top:0;padding-bottom:0}
#page-transactions th{font-family:Hanuman,"Khmer OS System",sans-serif!important;font-weight:700;line-height:1.35;letter-spacing:0}
#page-transactions .tx-status,#page-transactions .table-foot{font-family:Hanuman,"Khmer OS System",sans-serif}
.charging-telemetry{display:grid;grid-template-columns:repeat(5,max-content);align-items:center;justify-content:center;gap:11px;color:#f0f6f6;font:700 9px Hanuman,"Khmer OS System",sans-serif;white-space:nowrap}
.charging-telemetry span{display:block;white-space:nowrap;text-align:center}
#page-transactions .charging-telemetry b{display:block;margin:2px 0 0;color:#70ffb0;font:700 12px Oxanium;line-height:1.1}
#page-transactions .no-telemetry{display:block;text-align:center;color:#fff;font:800 16px Oxanium}
#page-transactions th:nth-child(6),#page-transactions td:nth-child(6){text-align:center}
@media(min-width:901px){
  #page-overview .metrics{grid-template-rows:repeat(5,104px)!important}
}