:root{color-scheme:dark;font-family:Inter,"Microsoft YaHei",sans-serif;background:#040a10;color:#ddecf5}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:radial-gradient(circle at 50% 45%,#0a2735 0,#06131d 45%,#02070c 100%)}#app{height:100vh;position:relative}header{position:absolute;z-index:5;left:28px;right:28px;top:22px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}h1{font-size:24px;letter-spacing:.08em;margin:5px 0}.eyebrow{font-size:10px;letter-spacing:.24em;color:#58dff5}.status{border:1px solid #1a6470;background:#07151dcc;padding:9px 13px;font-size:12px}.status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#43f3b1;box-shadow:0 0 12px #43f3b1;margin-right:8px}.panel{position:absolute;z-index:4;top:112px;width:210px;padding:18px;background:linear-gradient(145deg,#071621e8,#071018d9);border:1px solid #194354;box-shadow:0 16px 50px #0008;backdrop-filter:blur(15px)}.panel:before{content:"";position:absolute;left:-1px;top:-1px;width:42px;height:2px;background:#45dff6;box-shadow:0 0 12px #45dff6}.left{left:28px}.right{right:28px}.panel h2{font-size:12px;letter-spacing:.16em;color:#7feafb;margin:0 0 16px}.panel label{display:block;padding:8px 0;font-size:13px;color:#afc7d3}.panel input{accent-color:#36d9ef;margin-right:9px}.panel hr{border:0;border-top:1px solid #16313d;margin:13px 0}.panel button{background:#0b2632;border:1px solid #225466;color:#c9edf2;padding:8px 10px;margin:3px;font-size:11px;cursor:pointer}.panel button:hover{border-color:#53dff3;background:#104050}dl{display:grid;grid-template-columns:52px 1fr;gap:9px;font-size:12px;margin:0}dt{color:#58798a}dd{margin:0;color:#d8f1f7;overflow:hidden;text-overflow:ellipsis}.hint{font-size:10px;line-height:1.6;color:#688896;border-top:1px solid #16313d;padding-top:12px}.tagger{display:grid;grid-template-columns:1fr 1fr}

.label-layer{position:absolute;inset:0;pointer-events:none;z-index:3}.point-label{display:block;padding:3px 6px;border:1px solid #ff8b42;background:#160b05dc;color:#ffd9c4;font-size:10px;line-height:1;white-space:nowrap;box-shadow:0 0 12px #ff7c3a66;transform:translateY(-4px)}.point-label.crane{border-color:#48ddff;background:#04151adc;color:#bff5ff;box-shadow:0 0 12px #48ddff66}.point-label.forklift{border-color:#ffcc55;background:#171105dc;color:#fff0bd;box-shadow:0 0 12px #ffcc5566}.point-label.anchor{border-color:#c176ff;background:#12071bdc;color:#ead0ff;box-shadow:0 0 12px #c176ff66}
.point-label.workstation.occupied{border-color:#4cff91;background:#041b10dc;color:#c8ffdc;box-shadow:0 0 12px #4cff9166}.state-controls{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:12px 0;padding-top:12px;border-top:1px solid #16313d}.state-controls[hidden]{display:none}.state-controls span{grid-column:1/-1;font-size:10px;color:#688896}.state-controls button:first-of-type{border-color:#238b55;color:#95f0b8}.state-controls button:last-of-type{border-color:#99502e;color:#ffc1a3}

.panel.right{width:292px;max-height:calc(100vh - 160px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#225466 transparent}.workstation-details[hidden]{display:none}.workstation-details{margin-top:12px;padding-top:12px;border-top:1px solid #16313d}.detail-title,.live-row,.production-head,.safety-row{display:flex;align-items:center;justify-content:space-between}.detail-title{font-size:11px;color:#7feafb;letter-spacing:.1em;margin-bottom:10px}.detail-title em{font-style:normal;font-size:8px;color:#ffbf75;border:1px solid #76502b;padding:2px 4px}.live-row{background:#071e1c;border:1px solid #1c5747;padding:8px;margin-bottom:8px}.live-row .live-dot{width:7px;height:7px;border-radius:50%;background:#ff8b42;box-shadow:0 0 8px #ff8b42}.live-row.occupied .live-dot{background:#4cff91;box-shadow:0 0 8px #4cff91}.live-row b{margin-right:auto;margin-left:7px;font-size:12px;color:#e4f8ef}.live-row small{font-size:9px;color:#6ea996}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}.detail-grid span{border:1px solid #173b48;background:#081821;padding:7px;font-size:9px;color:#58798a}.detail-grid strong{display:block;margin-top:4px;font-size:11px;color:#d8f1f7;font-weight:500}.business-list{grid-template-columns:58px 1fr;gap:7px;padding:9px 0;border-top:1px solid #102d38;border-bottom:1px solid #102d38}.business-list dd{font-size:11px}.production-head{margin-top:10px;font-size:9px;color:#688896}.production-head b{font-size:10px;color:#7feafb}.production-bar{height:5px;margin:6px 0 10px;background:#0d2731;overflow:hidden}.production-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#20aec9,#4cff91);box-shadow:0 0 8px #39d8e8}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.metric-grid span{text-align:center;background:#081821;border:1px solid #173b48;padding:7px 3px}.metric-grid b{display:block;font-size:13px;color:#d8f7ff}.metric-grid small{display:block;margin-top:3px;font-size:8px;color:#58798a}.safety-row{margin-top:8px;padding:7px 8px;border:1px solid #19533b;background:#071c18;font-size:9px;color:#688896}.safety-row b{color:#61e89a;font-size:10px}.safety-row.warning{border-color:#7d3828;background:#21100c}.safety-row.warning b{color:#ff876d}

.panel.right{width:210px;max-height:none;overflow:visible}.workstation-details{position:absolute;z-index:7;width:276px;margin:0;padding:14px;transform:translate(-50%,calc(-100% - 22px));background:linear-gradient(145deg,#071a24f5,#050e16f2);border:1px solid #287084;box-shadow:0 14px 40px #000b,0 0 18px #25cbe522;backdrop-filter:blur(14px);pointer-events:auto}.workstation-details:before{content:"";position:absolute;left:-1px;top:-1px;width:48px;height:2px;background:#45dff6;box-shadow:0 0 10px #45dff6}.workstation-details:after{content:"";position:absolute;left:50%;bottom:-22px;width:1px;height:22px;background:linear-gradient(#45dff6,transparent);box-shadow:0 0 6px #45dff6}.tagger[hidden]{display:none}

/* 折叠按钮 */
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.panel-head h2{margin:0}.icon-btn{background:none;border:0;color:#7feafb;font-size:20px;line-height:1;cursor:pointer;padding:0 4px;margin:0!important}.icon-btn:hover{color:#45dff6;background:none;border-color:transparent}

/* 收到左缘的展开手柄 */
.expand-handle{position:absolute;z-index:6;top:112px;left:0;width:34px;height:44px;border-radius:0 8px 8px 0;border:1px solid #194354;border-left:0;background:linear-gradient(145deg,#071621e8,#071018d9);color:#7feafb;font-size:18px;cursor:pointer;box-shadow:0 8px 30px #0008;backdrop-filter:blur(15px)}.expand-handle:hover{color:#45dff6;border-color:#225466}

/* 菜单收起动画 */
.panel.left{transition:transform .28s ease, opacity .28s ease}
.panel.left.collapsed{transform:translateX(calc(-100% - 60px));opacity:0;pointer-events:none}#viewport{position:absolute;inset:0}#viewport:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(#3adbf308 1px,transparent 1px),linear-gradient(90deg,#3adbf308 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(circle at center,#000 0,transparent 72%)}canvas{display:block}footer{position:absolute;z-index:4;bottom:18px;left:28px;right:28px;display:flex;justify-content:space-between;color:#567788;font-size:10px;letter-spacing:.08em;pointer-events:none}#progress{color:#57dcec}@media(max-width:800px){.panel{top:auto;bottom:42px;width:170px}.right{display:none}header{left:16px;right:16px}.left{left:16px}footer{left:16px;right:16px}}