:root{color-scheme:dark;--bg:#041524;--panel:#071b2d;--panel2:#0d2437;--line:#1b3548;--muted:#9fb3c9;--blue:#0aa6ff;--green:#00d354;--yellow:#ffbe20;--red:#f3657a}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:#f4f8ff;font-size:13px}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible{outline:2px solid #26adff;outline-offset:2px}#app{height:100vh;min-height:620px;display:grid;grid-template-rows:65px minmax(0,1fr) 75px}.topbar{display:flex;background:#031321;border-bottom:1px solid #0b2b40;min-width:0}.brand{width:30.3%;min-width:258px;display:flex;align-items:center;gap:10px;padding-left:15px;text-decoration:none;color:inherit}.brandmark svg{width:36px;height:40px;display:block}.brand strong{display:block;font-size:16px;letter-spacing:.15px}.brand small{display:block;color:#8d9eb2;font-size:9px;white-space:nowrap;margin-top:3px}.main-nav{display:flex;height:100%;flex:1;justify-content:flex-start}.nav{flex:1;max-width:110px;min-width:75px;border:0;border-bottom:3px solid transparent;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#adc1d7;font-size:12px}.nav span{font-size:24px;line-height:25px;color:#9bb5cd}.nav:hover,.nav.active{background:#0a3455;color:#fff}.nav.active{border-bottom-color:#00a9fa}.nav.active span{color:#00aeff}.top-right{display:flex;margin-left:auto;align-items:center;gap:22px;padding:0 28px 0 10px;flex-shrink:0}.weather{display:flex;align-items:center;gap:9px}.sun{font-size:29px;color:#ffbe00}.weather b,.datetime b{display:block;font-weight:500}.weather small,.datetime small{display:block;color:#9aadc0;font-size:9px;margin-top:2px}.datetime{border-left:1px solid #233444;padding-left:21px;text-align:center}.workspace{display:grid;grid-template-columns:271px minmax(0,1fr) 336px;min-height:0;overflow:hidden}.sidebar{background:#041626;border-right:1px solid #183143;overflow:hidden;display:flex;flex-direction:column}.search-wrap{padding:12px 11px;display:flex;gap:8px}.search{display:flex;align-items:center;border:1px solid #1d3a50;background:#102639;height:33px;border-radius:6px;min-width:0;flex:1;color:#9ab5cd}.search span{font-size:25px;margin:0 8px 0 9px;line-height:0}.search input{background:transparent;border:0;color:white;outline:0;width:100%;font-size:12px;min-width:0}.search input::placeholder{color:#91a7bf}.filter-btn{width:33px;border:1px solid #1285bf;border-radius:6px;background:#082336;font-size:23px;color:#10b9ff;line-height:1}.filter-btn.active{background:#095a86}.sidebar-heading{height:35px;padding:4px 12px 6px;display:flex;align-items:center;justify-content:space-between;font-size:12px}.sidebar-heading button{background:none;border:0;color:#9eb4c9;font-size:18px}.machine-list{overflow:auto;scrollbar-width:thin;scrollbar-color:#31536b transparent}.machine-item{height:51px;border:0;border-bottom:1px solid #152e40;background:transparent;width:100%;display:flex;align-items:center;text-align:left;gap:13px;padding:0 10px}.machine-item:hover{background:#0a2b42}.machine-item.selected{background:#0b2237}.machine-icon{width:33px;height:33px;border-radius:50%;border:1.5px solid #51e987;background:#0b502f;display:grid;place-items:center;color:#a5ffca;font-size:19px;flex-shrink:0}.machine-icon.pause{border-color:#55beff;background:#08639b;color:#fff;font-size:16px}.machine-icon.error{border:none;background:#ffba26;color:#001a2d;font-size:19px;font-weight:900}.machine-title{min-width:0;flex:1}.machine-title b{display:block;font-size:13px;font-weight:500}.machine-title small{display:block;margin-top:3px;color:#a3bad2;font-size:10px;white-space:nowrap}.state-pill{background:#0b2435;border-radius:5px;padding:6px 7px;font-size:10px;white-space:nowrap}.state-pill.work{color:#00df65}.state-pill.pause{color:#3fb3ff}.state-pill.error{color:#ffcc16}.state-pill i,.system-ok .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:currentColor;margin-right:4px;vertical-align:middle}.map-panel{position:relative;overflow:hidden;background:#15381d;isolation:isolate}.map-image{position:absolute;inset:0;background-image:url('assets/satellite-map.webp');background-position:center;background-size:100% 100%;transform:scale(var(--map-zoom,1));transition:transform .2s;filter:saturate(1.06)}.map-targets{position:absolute;inset:0;transform:scale(var(--map-zoom,1));pointer-events:none;transition:transform .2s}/* The underlying satellite reference already has rings baked into its pixels.
   These accurately positioned overlays own the demo's interactive state. */
.map-target{pointer-events:auto;position:absolute;width:26.5%;height:23.6%;border-radius:50%;border:2.5px solid var(--ring);background:var(--wash);transform:translate(-50%,-50%);box-shadow:inset 0 0 0 1px #001b1b66;transition:background .18s,border-color .18s,box-shadow .18s;outline:none;z-index:1;isolation:isolate}
.map-target.status-work{--ring:#25e65e;--wash:#00d85121;--led:#00e65b}
.map-target.status-pause{--ring:#21b6ff;--wash:#008ddb45;--led:#29b3ff}
.map-target.status-error{--ring:#ffd038;--wash:#e7a60046;--led:#ffc02e}
.map-target.status-stop{--ring:#a3b3c2;--wash:#061a27a8;--led:#9fb0c0}
.map-target:hover{box-shadow:0 0 0 2px #dff5ff8a,0 0 20px #55baff75,inset 0 0 0 1px #001b1b66;z-index:3}
.map-target.selected{box-shadow:0 0 0 2px #def7ffbb,0 0 13px #30acff88;z-index:2}
.map-target.selected:hover{z-index:4}
.map-machine-label{position:absolute;top:8%;left:50%;transform:translateX(-50%);min-width:59%;height:21%;padding:0 7px;display:flex;align-items:center;justify-content:space-around;gap:5px;color:#f3faff;border-radius:7px;background:#051b29f5;border:1px solid #133a4e;box-shadow:0 2px 8px #0009;white-space:nowrap;pointer-events:none}
.map-machine-label strong{font-size:clamp(10px,1.25vw,16px);font-weight:700;letter-spacing:.04em}
.map-led{width:10px;height:10px;border-radius:50%;background:var(--led);box-shadow:0 0 7px var(--led);flex-shrink:0}
.map-symbol{font-size:11px;font-weight:bold;color:var(--led);min-width:12px}
.map-target.status-error .map-symbol{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#ffca24;color:#1a2635}
.map-target.status-pause .map-symbol{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#1b94e5;color:white}
.map-center-dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:13px;height:13px;border:3px solid var(--ring);background:#e5ffe9;border-radius:50%;box-shadow:0 0 0 3px #021e2566}
@media(max-width:850px){.map-machine-label{gap:2px;padding:0 3px;border-radius:4px}.map-machine-label strong{font-size:clamp(9px,2vw,13px)}.map-led{width:7px;height:7px}.map-symbol{font-size:9px}.map-center-dot{width:9px;height:9px;border-width:2px}}
.map-tools{position:absolute;right:11px;bottom:42px;display:flex;flex-direction:column;gap:4px}.map-tools button{border:1px solid #345269;background:#071827df;width:29px;height:29px;border-radius:5px;font-size:19px}.map-tools button:hover{background:#124a70}.map-bottom{position:absolute;left:13px;bottom:12px;display:flex;flex-direction:column;gap:7px;pointer-events:none}.coords,.scale{width:max-content;background:#061a2ce3;border-radius:4px;padding:8px 9px;font-size:10px}.coords{font-size:11px}.scale{width:195px;padding:6px 9px}.scale div:first-child{display:flex;justify-content:space-between}.ruler{height:7px;border-bottom:2px solid #aec8d5;border-left:2px solid #aec8d5;border-right:2px solid #aec8d5;margin-top:2px}.map-toast{position:absolute;top:12px;left:50%;transform:translateX(-50%);padding:10px 14px;background:#061b2be8;border-radius:7px}.details{background:#041525;border-left:1px solid #1b3a4e;padding:12px 11px;overflow:auto;scrollbar-width:thin}.details-head{display:flex;align-items:center;gap:14px;height:57px}.status-large{width:52px;height:52px;flex:0 0 52px;border-radius:50%;border:3px solid #4bdd81;background:#115b36;display:grid;place-items:center;color:#90efb3;font-size:22px}.status-large.pause{border-color:#50bfff;background:#0b5c90;color:#fff}.status-large.error{border-color:#ffbe23;background:#87600b;color:#ffde8a}.selected-title{display:flex;align-items:center;gap:10px}.selected-title h1{margin:0;font-size:22px;font-weight:500}.selected-info small{display:block;font-size:10px;color:#9faec3;margin-top:3px}.warn-icon{border-radius:50%;width:23px;height:23px;background:#ffb912;display:grid;place-items:center;color:#031625;font-weight:900;font-size:17px}.status-badge{border-radius:20px;padding:5px 12px;font-size:12px}.status-badge.error{background:#896608;color:#ffde30}.status-badge.work{background:#0a4e2a;color:#45ed8d}.status-badge.pause{background:#094e7b;color:#73c9ff}.tabs{height:35px;border-bottom:1px solid #264050;display:flex;gap:3px;margin-top:10px}.tab{flex:1;background:none;border:0;border-bottom:2px solid transparent;color:#afc3d6;font-size:12px}.tab.active{color:white;border-bottom-color:#01b1ff}.details-content{padding-top:12px}.panel-card{border:1px solid #193449;background:#0c2235;border-radius:7px;margin-bottom:12px;overflow:hidden}.card-title{font-size:12px;padding:10px 11px 5px}.error-box{padding:11px;display:flex;align-items:center;gap:12px}.error-large{background:#ffb923;color:#092337;width:31px;height:31px;display:grid;place-items:center;border-radius:50%;font-size:22px;font-weight:900;flex-shrink:0}.error-copy{flex:1;min-width:0}.error-copy b{display:block;color:#ffb800;font-size:12px}.error-copy small{display:block;color:#b3c2d3;font-size:10px;margin-top:3px}.detail-button{background:#132e44;border:1px solid #193c56;border-radius:5px;padding:8px 10px;font-size:11px}.detail-button:hover{background:#1c4461}.control-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:3px 11px 11px}.control{border:1px solid #2c3e50;border-radius:5px;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:11px}.control span{font-size:23px;line-height:22px}.control.start{background:#00ae2d;border-color:#00c73d}.control.pause{background:#193954}.control.stop{background:#302334;color:#ff8a9d}.control:hover{filter:brightness(1.16)}.data-row{display:flex;align-items:center;gap:10px;margin:0 11px;min-height:34px;border-bottom:1px solid #244053;text-align:left}.data-row:last-child{border-bottom:0}.data-icon{width:20px;color:#31c4ff;font-size:19px;text-align:center}.data-label{font-size:10px;color:#afc0d2;flex:1}.data-value{font-size:12px;white-space:nowrap}.arrow{color:#a3bfd5;font-size:17px;margin-left:4px}.data-row.clickable{cursor:pointer}.data-row.clickable:hover .data-label{color:#fff}.history-row{padding:13px 12px;border-bottom:1px solid #254151;font-size:12px}.history-row small{display:block;color:#879eb1;margin-top:5px}.bottom-bar{border-top:1px solid #153348;background:#031423;display:flex;justify-content:space-between;align-items:center;padding:0 14px;gap:10px;min-width:0}.summary{display:flex;align-items:center;gap:18px;color:#a4b8ce;font-size:11px;white-space:nowrap}.system-ok{background:#02101a;border-radius:4px;padding:8px;color:#04df66}.system-ok .dot{background:#00d856}.summary-error{color:#ffb900}.summary-pause{color:#35b4f9}.footer-actions{display:flex;gap:10px}.footer-button{border:1px solid #28435c;background:#1b3851;border-radius:5px;padding:13px 18px;font-size:13px;white-space:nowrap}.footer-button:hover{filter:brightness(1.15)}.footer-button.primary,.primary-button{background:#009aff;border-color:#24aafa;color:white}.modal-backdrop{position:fixed;inset:0;background:#0009;z-index:50;display:grid;place-items:center;padding:15px}.modal-backdrop[hidden]{display:none}.modal-box{background:#0b2438;border:1px solid #37617d;border-radius:12px;max-width:430px;width:100%;padding:24px;box-shadow:0 16px 60px #0009;position:relative}.modal-box h2{font-size:20px;margin:0 0 16px}.modal-box p{color:#b8c8d6;line-height:1.6}.modal-box input,.modal-box select{width:100%;background:#061726;border:1px solid #31516a;border-radius:6px;padding:10px;color:#fff;margin:8px 0}.modal-close{position:absolute;top:9px;right:13px;border:0;background:none;font-size:24px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.primary-button,.secondary-button{border-radius:6px;padding:10px 15px;border:1px solid #35516a}.secondary-button{background:#17354a}.notification{position:fixed;right:18px;bottom:90px;z-index:100;background:#155638;border:1px solid #31ca7b;border-radius:7px;padding:12px 18px;box-shadow:0 7px 22px #0007;display:none}.notification.show{display:block}.empty{padding:20px;color:#8faabd}.hidden-list{display:none}@media(max-width:1100px){.workspace{grid-template-columns:235px minmax(0,1fr) 306px}.brand{min-width:235px;width:235px}.top-right{gap:8px;padding-right:12px}.summary{gap:10px}.footer-button{padding:11px 10px}}@media(max-width:850px){#app{height:auto;min-height:100vh;grid-template-rows:62px auto auto}.topbar{flex-wrap:wrap;height:auto}.brand{width:100%;height:58px;min-width:0}.main-nav{width:100%;order:2;overflow-x:auto;height:62px}.top-right{position:absolute;right:0;top:12px}.workspace{display:flex;flex-direction:column;overflow:visible}.sidebar{order:2;max-height:300px}.map-panel{order:1;height:60vw;min-height:380px}.details{order:3;overflow:visible}.bottom-bar{flex-direction:column;align-items:stretch;padding:10px}.summary,.footer-actions{justify-content:center;flex-wrap:wrap}.weather{display:none}.datetime{border:0}.nav{min-width:68px}.machine-list{max-height:230px}}@media(max-width:500px){.map-panel{min-height:330px}.details{padding:12px}.top-right{right:5px}.footer-actions{display:grid;grid-template-columns:1fr 1fr}.footer-button.primary{grid-column:1/-1}.summary{font-size:10px;gap:7px}.coords{font-size:9px}.brand small{font-size:8px}}

.machine-icon.stop{border-color:#a4b9c7;background:#223849;color:#bcd0df;font-size:15px}.state-pill.stop{color:#b6c5d4}.status-large.stop{border-color:#b1bfcd;background:#273b4c;color:#c5d6e4}.status-badge.stop{background:#294052;color:#d2dce5}