@font-face{font-family:Monitor Sans;src:url('assets/fonts/alibaba-puhuiti-regular.ttf') format('truetype');font-weight:400;font-display:swap}
:root{color-scheme:dark;--text:#85b8ff;--blue:#347fff;--panel-border:#586979;--alert:#ff5348}
*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#020815;color:var(--text);font-family:Monitor Sans,"Microsoft YaHei",sans-serif;font-size:16px}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #67edff;outline-offset:3px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}button{touch-action:manipulation}
#screen{width:1920px;height:1080px;position:absolute;overflow:hidden;transform-origin:top left;background:#020815 url('assets/dashboard.png') center/100% 100%}header{position:absolute;inset:0 0 auto;height:73px;background:url('assets/1310.png') center/100% 100%;z-index:3}h1{position:absolute;left:835px;top:14px;width:252px;height:44px;margin:0;background:url('assets/ui/main-title.png') center/100% 100%;font-size:0}.clock{position:absolute;left:18px;top:10px;display:flex;align-items:center;gap:20px;color:#4791ff}.sun{width:33px;height:36px;background:url('assets/ui/sun.png') center/contain no-repeat}.clock time{display:block;font-size:22px;line-height:27px;letter-spacing:.6px}.clock small{display:block;font-size:13px;line-height:22px;font-weight:700}.warning{position:absolute;right:28px;top:21px;height:22px;display:flex;align-items:center;gap:10px;color:var(--alert);font-size:16px;font-weight:700}.warning img{width:20px;height:20px}#records{position:absolute;right:284px;top:18px;padding:8px 16px;border:1px solid #3264a0;border-radius:3px;background:#071733;color:#a7ceff}#records:hover{background:#10284d}nav{position:absolute;left:447px;top:113px;display:flex;gap:18px}nav button{position:relative;width:257px;height:58px;padding:0;border:0;background:url('assets/tab.png') center/100% 100%;color:white}nav button:nth-child(4){margin-left:22px}nav button .tab-label{position:absolute;left:70px;top:13px;width:126px;height:31px;background:var(--label-image) center/100% 100% no-repeat}nav button[aria-selected=true]{background-image:url('assets/tab-active.png')}nav button[aria-selected=true]:after{content:'';position:absolute;width:32px;height:24px;left:113px;top:65px;background:url('assets/ui/tab-pointer.png') center/contain no-repeat}
#cards{position:absolute;left:102px;top:253px;display:grid;grid-template-columns:repeat(4,402px);grid-template-rows:repeat(2,272px);gap:45px 41.5px}.card{position:relative;width:402px;height:272px;overflow:visible;background:url('assets/1371.png') center/100% 100%;border:0}.card-art{position:absolute;inset:0;background:var(--scene-image) center/100% 100% no-repeat;pointer-events:none}.card h2{position:absolute;left:38px;top:26px;width:78px;height:31px;margin:0;background:url('assets/ui/card-title.png') center/100% 100% no-repeat;font-size:0}.card .state{position:absolute;right:24px;top:29px;display:flex;align-items:center;gap:7px;line-height:22px;color:white;font-size:16px;font-weight:700}.state img{width:18px;height:18px}.card button{position:absolute;left:143px;top:202px;width:120px;height:42px;padding:0;border:0;border-radius:24px;background:linear-gradient(180deg,#377bff,#89cafa);color:#fff;font-size:20px;font-weight:800;line-height:42px;box-shadow:inset 0 1px 2px #ffffff40,0 2px 8px #05286550}.card.alarm button{background:linear-gradient(180deg,#ff4c75,#ff8999)}.card button:hover{filter:brightness(1.12)}.footer{position:absolute;bottom:0;left:0;width:100%;height:78px;pointer-events:none}
#detail{position:absolute;inset:0;background:#020815}.scene{position:absolute;inset:0;overflow:hidden;background:url('assets/1371.png') center/100% 100%}.scene:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 47%,transparent 12%,rgba(2,5,17,.25) 48%,rgba(2,5,17,.94) 100%)}.train{position:absolute;width:895px;height:619px;left:562px;top:123px;will-change:transform}.signals{position:absolute;left:1033px;top:551px}.signals img{display:block;width:38px;height:82px}aside{position:absolute;left:33px;top:129px;width:360px;z-index:2}#back{display:flex;align-items:center;gap:12px;height:31px;padding:0;margin:0 0 10px;border:0;background:transparent;color:white;font-size:16px;font-weight:700}#back img{width:19px;height:16px}.identity{position:relative;height:84px;padding:10px 26px;background:url('assets/1320.png') center/100% 100%;color:white}.identity strong{font-size:24px;line-height:36px}.identity b{position:absolute;right:10px;top:17px;font-size:20px;line-height:28px}.identity small{display:block;margin-top:7px;font-size:14px;font-weight:700;line-height:20px}.device-panel{height:276px;margin-top:14px;border:1px solid var(--panel-border);background:rgba(2,9,20,.40)}.panel-heading{position:relative;height:40px;margin:0;padding:5px 24px;font-size:20px;font-weight:900;line-height:28px;letter-spacing:.3px;color:#3485ff;background:url('assets/1325.png') center/100% 100%}.panel-heading .panel-state{position:absolute;right:12px;top:10px;display:flex;align-items:center;gap:7px;font-size:14px;color:white;line-height:20px;letter-spacing:0}.panel-state img{width:18px;height:18px}.gate-preview{height:180px;margin:0 -1px}.gate-preview img{display:block;width:360px;height:180px;object-fit:cover}.controls{display:flex;align-items:center;gap:0;height:55px;padding:8px 10px 8px 13px;border-top:1px solid #586979;color:white;font-size:14px;font-weight:700}.controls label{display:flex;align-items:center;gap:12px;width:98px;cursor:pointer}.controls input{appearance:none;position:relative;width:34px;height:20px;margin:0;border:0;border-radius:12px;background:#1e498b;cursor:pointer}.controls input:before{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:white}.controls input:checked:before{transform:translateX(14px)}.controls button{height:34px;width:122px;padding:0;border:0;background:url('assets/1329.png') center/100% 100%;color:#002651;font-size:18px;font-weight:700;letter-spacing:3px}.controls button:last-child{margin-left:-4px;background-image:url('assets/1333.png')}.controls button:disabled{opacity:.45;cursor:wait}#progress,.asset-note{display:none}.plc-panel{height:178px;margin-top:10px;border:1px solid var(--panel-border);background:rgba(2,9,20,.40)}.metrics{display:flex;height:136px;align-items:flex-start;text-align:center;padding-top:25px}.metrics>div{width:50%;position:relative}.metrics>div+div:before{content:'';position:absolute;left:-7px;top:0;width:14px;height:94px;background:url('assets/1339.png') center/100% 100%}.metrics b{display:block;font-size:25px;line-height:33px;color:#afc4ff;font-weight:700}.metrics small{display:block;color:#478df3;margin-top:17px;font-size:14px;font-weight:700;letter-spacing:.5px}.alerts-panel{height:274px;margin-top:11px;border:1px solid var(--panel-border);background:rgba(2,9,20,.40)}#all-records{position:absolute;inset:0;border:0;background:transparent;color:transparent;cursor:pointer}#all-records:focus-visible{color:#85b8ff}#alerts{padding:8px 15px 0;list-style:none;margin:0}#alerts li{display:flex;justify-content:space-between;align-items:center;height:41.5px;color:#c57b64;font-size:15px;font-weight:700;letter-spacing:.2px}#alerts time{font-size:15px;white-space:nowrap}
dialog{width:1814px;max-width:none;height:808px;max-height:none;position:fixed;inset:auto;margin:0;transform-origin:top left;background:rgba(4,10,20,.94);color:#85b8ff;border:1px solid #496b87;border-radius:10px;padding:56px 47px;overflow:hidden}dialog::backdrop{background:transparent}.dismiss{position:absolute;right:35px;top:23px;width:32px;height:32px;border:0;padding:0;background:transparent url('assets/ui/close.svg') center/32px 32px;font-size:0}#filters{display:flex;gap:0;align-items:center;height:43px;margin-bottom:37px;padding-left:14px;font-weight:700;letter-spacing:.3px}#filters label{display:flex;align-items:center;gap:24px;white-space:nowrap}#filters label:nth-child(2){margin-left:73px;gap:26px}#filters label:nth-child(3){margin-left:73px;gap:26px}input,select{border:1px solid #42617c;border-radius:0;background:#040b15;color:#8db9f4;padding:10px 16px;letter-spacing:1px}input::placeholder{color:#3c485b;opacity:1}#filters input,#filters select{width:299px;height:42px}#filters select{appearance:none;background:#040b15 url('assets/ui/chevron.svg') right 17px center/20px 12px no-repeat;padding-right:40px;color:#3c485b}#filters select:valid{color:#8db9f4}#filters button{width:86px;height:42px;margin-left:40px;border:0;border-radius:2px;background:#266eff;color:white;font-weight:700}table{border-collapse:collapse;table-layout:fixed;width:1730px;font-size:16px;text-align:left;letter-spacing:.3px}th,td{white-space:nowrap;height:61px;padding:0;font-weight:400}thead{font-size:16px;font-weight:700;color:#728bb1;background:#101c2e}th{height:60px;text-align:left;font-weight:700}th:first-child,td:first-child{padding-left:35px}th:nth-child(1){width:215px}th:nth-child(2){width:212px}th:nth-child(3){width:318px}th:nth-child(4){width:186px}th:nth-child(5){width:189px}th:nth-child(6){width:256px}th:nth-child(7){width:226px}th:nth-child(8){width:128px}tbody tr:nth-child(odd){background:#0a1424}tbody tr:nth-child(even){background:#060f1d}.good{color:#73ff17}.bad{color:#ff4242}.closed{color:#db8b03}td button{border:0;padding:0;background:none;color:#2479ff;font-size:16px;font-weight:700;letter-spacing:1px}#record-info{margin:18px 0;font-size:15px;color:#a7ccff}#record-info:empty{display:none}#empty{padding:20px;font-size:18px}
.controls input:checked:before{transform:none}.controls input:not(:checked):before{transform:translateX(14px)}
.card h2{background:none}nav button{background-image:url('assets/tab-active.png')}nav button[aria-selected=true]{background-image:url('assets/tab.png')}

.warning{padding:0;border:0;background:none}td:nth-child(4).good{color:#4ed407}.scene:after{background:radial-gradient(ellipse at 50% 52%,transparent 12%,rgba(2,5,17,.45) 55%,rgba(2,5,17,.97) 100%)}
/* 蓝湖表格的正文为中粗字重，状态与正文保持相同基线。 */
tbody td{font-weight:600}#filters #filter-state{background-image:none}
#filters{height:44px;margin-bottom:36px}#filters label:nth-child(2){margin-left:72px}#filters label:nth-child(3){margin-left:72px}
.device-panel .panel-heading{font-size:0;background-image:url('assets/ui/heading-device.png'),url('assets/1325.png');background-position:left top,center;background-size:270px 40px,100% 100%;background-repeat:no-repeat}
.plc-panel .panel-heading{font-size:0;background-image:url('assets/ui/heading-plc.png'),linear-gradient(90deg,#071120,#092336);background-position:left top,center;background-size:270px 40px,100% 100%;background-repeat:no-repeat}
.alerts-panel .panel-heading{font-size:0;background:url('assets/ui/heading-alerts.png') center/100% 100% no-repeat}
.metrics{position:relative}.metrics>div+div:before{display:none}.metrics:after{content:'';position:absolute;left:176px;top:20px;width:14px;height:94px;background:url('assets/1339.png') center/100% 100%}
.metrics>div:first-child{transform:translateX(8px)}.metrics>div+div{transform:translateX(-6px)}.metrics b{width:74px;height:31px;margin:0 auto;font-size:0;background:url('assets/ui/metric-trigger.png') center/100% 100% no-repeat}.metrics>div+div b{width:54px;background-image:url('assets/ui/metric-distance.png')}
/* 切换中控台后使用真实设备名称，场景图片不再包含固定“道闸01”。 */
.card h2{left:28px;top:24px;width:112px;height:38px;padding:0 10px;font-size:24px;font-weight:800;line-height:38px;color:#bdeaff;white-space:nowrap;background:linear-gradient(90deg,rgba(6,25,46,.96),rgba(6,25,46,.75) 75%,transparent);text-shadow:0 0 8px #3281c9}
#console-status{position:absolute;left:102px;top:211px;margin:0;color:#87b8f2;font-size:16px;line-height:26px;letter-spacing:.5px}
.gate-preview{position:relative;overflow:hidden}
#gate-fallback{position:absolute;inset:0}
#gate-fallback>img{width:360px;height:180px;object-fit:cover}
#gate-fallback svg{position:absolute;inset:0;width:360px;height:180px}
#gate-arm{transform-origin:260px 148px;will-change:transform}
@media(prefers-reduced-motion:reduce){#gate-arm{will-change:auto}}
/* 共享设备状态驱动独立场景图层，卡片不再使用烘焙灯色/闸栏的静态截图。 */
.card{background:none}
.card-live-scene{position:absolute;inset:5px;overflow:hidden;background:url('assets/1371.png') center/100% 100%;clip-path:polygon(3% 0,97% 0,100% 5%,100% 95%,97% 100%,3% 100%,0 95%,0 5%)}
.card-frame{position:absolute;inset:0;width:402px;height:272px;pointer-events:none}
.card.alarm .card-frame{filter:hue-rotate(145deg) saturate(1.5)}
.card-lamp{position:absolute;left:194px;top:136px;width:15px;height:33px}
.card-gate{position:absolute;left:15px;top:128px;width:230px;height:115px;transform:rotate(31deg);transform-origin:166px 94px}
.card-gate svg{width:230px;height:115px;overflow:visible}
.gate-arm{transform-origin:260px 148px}
.card-train{position:absolute;left:230px;top:-5px;width:179px;height:124px;will-change:transform}
#gate-fallback>.gate-vector{z-index:2}
.controls button:disabled,.controls input:disabled{cursor:not-allowed}
.controls input{cursor:pointer}
.controls input:checked{background:#2166b9}
.controls input:checked:before{transform:translateX(14px)}
.controls input:not(:checked){background:#40516c}
.controls input:not(:checked):before{transform:none}
@media(prefers-reduced-motion:reduce){.card-train{will-change:auto}}
.card .card-frame{filter:hue-rotate(15deg)}
.card.alarm .card-frame{filter:hue-rotate(165deg) saturate(1.5)}
.card.alarm:after{content:'';position:absolute;left:170px;top:85px;width:68px;height:68px;background:url('assets/warning.svg') center/contain no-repeat;pointer-events:none}

/* 模式切换位移由 GSAP 控制，禁用 CSS 状态位移。 */
.controls input:before,.controls input:checked:before,.controls input:not(:checked):before{transform:translateX(var(--knob-x,14px))}

/* 卡片场景392×262，与1920×1080主场景共用同一坐标映射。 */
.card-train{left:114.741667px;top:29.838889px;width:182.729167px;height:150.164815px}
.card-lamp{left:210.908333px;top:133.668519px}
.card-gate{left:0;top:0;width:360px;height:180px;transform-origin:0 0;transform:matrix(.65,.44,0,.65,-6,-8.6)}
.card-gate svg{width:360px;height:180px}

/* 正式序列图：透明斜侧图叠加主场景，卡片使用同一设备帧。 */
#scene-gate,.card-gate-sequence{position:absolute;pointer-events:none;object-fit:contain}
.card-gate-sequence{transform:none}
#gate-fallback .gate-vector{display:none}
#gate-frame.sequence-front{position:absolute;z-index:2;pointer-events:none;object-fit:contain}
#gate-frame.lift{left:95px;top:0;width:180px;height:180px}
#gate-frame.slide{left:0;top:0;width:360px;height:180px}
.metrics b,.metrics>div+div b{font-size:25px;background:none;width:auto}

/* 路口近侧道闸位于列车之前，两个视图使用一致遮挡关系。 */
.scene,.card-live-scene{isolation:isolate}
.train,.card-train{z-index:1}
#scene-gate,.card-gate-sequence,.signals{z-index:2}
.card-lamp{z-index:3}
.scene:after{z-index:3}
/* 青色只用于实际悬停/键盘聚焦；告警继续保持红色。 */
.card:not(.alarm):is(:hover,:focus-within) .card-frame{filter:none}
.card:not(.alarm):is(:hover,:focus-within) button{background:linear-gradient(110deg,#00b9ef,#29b8cc)}