:root{--bg:#f2f4f7;--panel:#fff;--sidebar:#243244;--sidebar-2:#2c3b4e;--text:#1e2938;--muted:#7c8797;--line:#e2e7ee;--primary:#4657b8;--primary-soft:#edf0ff;--green:#2f9b58;--orange:#ef9a32;--red:#eb5653;--shadow:0 2px 8px rgba(29,42,60,.055)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;font-size:14px}.app-shell{width:100vw;min-width:1280px;height:100vh;min-height:760px;display:grid;grid-template-columns:226px 300px 1fr;overflow:hidden}.primary-sidebar{background:linear-gradient(180deg,var(--sidebar),#28394d);color:#e8edf5;padding:26px 0 20px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:12px;padding:0 24px 27px}.brand-mark{width:36px;height:28px;border:3px solid #fff;border-radius:15px;position:relative}.brand-mark:before,.brand-mark:after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;top:-7px}.brand-mark:before{left:1px}.brand-mark:after{right:1px}.brand-mark span{position:absolute;width:10px;height:16px;background:#fff;left:10px;top:4px;border-radius:3px}.brand strong{display:block;font-size:21px;letter-spacing:.5px}.brand small{display:block;margin-top:5px;color:#bbc5d2;font-size:12px}.main-nav{display:flex;flex-direction:column}.nav-item{height:54px;border:0;background:transparent;color:#dbe2eb;display:grid;grid-template-columns:34px 1fr 20px;align-items:center;padding:0 25px;font:inherit;font-size:16px;text-align:left;cursor:pointer;border-left:3px solid transparent}.nav-item i{font-style:normal;font-size:22px;color:#dce4ef}.nav-item b{font-size:15px;font-weight:400}.nav-item:hover{background:rgba(255,255,255,.04)}.nav-item.active{background:rgba(140,151,210,.25);border-left-color:#9c9eff;color:#fff}.sub-nav{margin:0 0 4px 42px;border-left:1px solid rgba(255,255,255,.13);display:flex;flex-direction:column}.sub-nav button{border:0;background:transparent;color:#d3dae4;height:40px;text-align:left;padding-left:20px;font-size:14px;cursor:pointer}.sub-nav button:before{content:"•";margin-right:10px;color:#aeb8c6}.sidebar-tools{margin-top:auto;display:flex;justify-content:space-around;padding:12px 20px}.sidebar-tools button{border:0;background:none;color:#d8e0ea;font-size:20px;cursor:pointer}.asset-sidebar{background:#f8fafc;border-right:1px solid #dfe4eb;padding:26px 16px 20px;overflow:hidden}.asset-sidebar h1,.page-header h2{font-size:22px;margin:0 0 20px;font-weight:600}.project-select{height:48px;width:100%;border:1px solid #d9dfe7;background:#fff;border-radius:7px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:14px;color:var(--text);cursor:pointer}.search-box{height:42px;margin-top:14px;border:1px solid #dde2e9;background:#fff;border-radius:7px;display:flex;align-items:center;padding:0 12px;color:#8a94a3}.search-box input{border:0;outline:0;background:transparent;width:100%;font-size:13px;padding-left:8px}.filter-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 16px}.filter-tabs button{height:38px;border:1px solid #dfe4eb;border-radius:7px;background:#fff;color:#3d4653;cursor:pointer}.filter-tabs button b{font-weight:600;margin-left:3px}.filter-tabs button.selected{border-color:#cfd5ff;background:var(--primary-soft);color:var(--primary)}.building-list{height:calc(100vh - 196px);overflow-y:auto;padding-right:3px}.building-list::-webkit-scrollbar{width:5px}.building-list::-webkit-scrollbar-thumb{background:#cfd6df;border-radius:3px}.building{border:1px solid #dfe4eb;background:#fff;border-radius:7px;margin-bottom:14px;overflow:hidden}.building-header{height:48px;width:100%;border:0;border-bottom:1px solid #e7ebf0;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 13px;cursor:pointer}.building-header strong{font-size:15px}.building-header span{color:var(--muted);font-size:12px}.elevator-table-head,.elevator-row{display:grid;grid-template-columns:1.25fr 1.25fr .55fr .62fr;align-items:center;column-gap:5px;padding:0 12px}.elevator-table-head{height:34px;color:#7d8793;font-size:11px;background:#fafbfc}.elevator-row{height:45px;border-top:1px solid #edf0f3;font-size:12px;cursor:pointer;position:relative}.elevator-row:hover{background:#f6f8fb}.elevator-row.selected{background:#eef0ff}.elevator-row.selected:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary)}.elevator-row .sn{font-size:11px;color:#4f5b6c}.tag{justify-self:end;padding:3px 7px;border-radius:5px;font-size:11px;border:1px solid}.tag.running{color:var(--green);border-color:#b9dfc6;background:#f4fbf6}.tag.standby{color:#d87d14;border-color:#f5d1a5;background:#fff9f1}.tag.fault{color:var(--red);border-color:#f3bfbd;background:#fff6f6}.workspace{padding:25px 24px 20px;overflow:auto}.page-header{height:74px;display:flex;justify-content:space-between;align-items:flex-start}.page-header h2{margin-bottom:10px}.breadcrumb{display:flex;gap:12px;color:#384353;font-size:13px}.breadcrumb i{font-style:normal;color:#a4acb7}.header-meta{display:flex;align-items:center;gap:25px;color:#606b79;margin-top:31px;font-size:13px}.device-chip{border:1px solid #d6dce4;background:#fff;padding:6px 12px;border-radius:6px;color:#354052}.online{color:#3f4956}.online i,.sync i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green);margin-right:8px}.content-grid{display:grid;grid-template-columns:minmax(660px,1fr) 365px;gap:14px}.center-column{min-width:0}.right-column{display:flex;flex-direction:column;gap:14px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}.panel-heading{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 16px}.panel-heading h3,.fault-panel h3{font-size:17px;margin:0;font-weight:600}.sync{font-size:12px;color:#667180}.elevator-panel{height:557px;overflow:hidden}.elevator-stage{height:417px;display:grid;grid-template-columns:135px 1fr;padding:0 20px 0 18px;background:linear-gradient(180deg,#fff,#fbfcfe)}.floor-scale{position:relative;height:100%}.floor-label{position:absolute;left:0;right:10px;height:30px;transform:translateY(50%);display:flex;align-items:center;gap:10px;color:#66717f;font-size:13px}.floor-label:after{content:"";height:1px;background:#e1e5eb;flex:1}.floor-label.current{color:var(--primary);font-weight:600;background:rgba(70,87,184,.06);border-radius:4px;padding-left:8px}.floor-label.target:before{content:"◎";position:absolute;right:-2px;color:var(--primary);font-size:17px}.shaft-wrap{height:100%;display:flex;align-items:center;justify-content:center}.shaft{height:385px;width:365px;position:relative;border-left:8px solid #aeb5bd;border-right:8px solid #aeb5bd;border-top:8px solid #9aa2aa;border-bottom:11px solid #8f979f;background:#f0f2f4;box-shadow:inset 0 0 0 1px #d2d7dc}.landing-lines{position:absolute;inset:0}.landing-line{position:absolute;left:0;right:0;height:1px;background:#d6dbe0}.landing-line.active{height:34px;transform:translateY(17px);background:rgba(87,103,194,.08);border-top:1px solid rgba(87,103,194,.18);border-bottom:1px solid rgba(87,103,194,.18)}.rail{position:absolute;top:0;bottom:0;width:5px;background:#727a83;box-shadow:inset 1px 0 #d8dde2}.rail-left{left:74px}.rail-right{left:210px}.car{position:absolute;left:88px;width:128px;height:126px;bottom:80px;z-index:5;transition:bottom 2.6s cubic-bezier(.4,0,.2,1)}.car-display{height:24px;background:#282f37;border:4px solid #979da4;border-bottom:0;color:#a7c4ff;display:flex;justify-content:center;align-items:center;font-size:12px}.car-body{height:102px;border:5px solid #8f969e;background:#c5c9cd;display:flex;padding:2px;box-shadow:0 5px 9px rgba(43,52,62,.13)}.door{width:50%;height:100%;background:linear-gradient(90deg,#aeb4ba,#d7dade,#afb5bb);border:1px solid #8e959c;transition:transform .7s ease}.left-door{transform-origin:left}.right-door{transform-origin:right}.car.doors-open .left-door{transform:scaleX(.08)}.car.doors-open .right-door{transform:scaleX(.08)}.counterweight{position:absolute;right:42px;width:54px;height:116px;bottom:188px;background:#8e959c;border:3px solid #777f87;padding:4px;display:flex;flex-direction:column;justify-content:space-around;transition:bottom 2.6s cubic-bezier(.4,0,.2,1)}.counterweight span{height:6px;background:#737b83}.pulley{position:absolute;right:45px;top:10px;width:48px;height:48px;border:7px solid #7b838b;border-radius:50%;background:#bbc0c5}.travel-line{position:absolute;left:51px;width:3px;background:var(--primary);bottom:138px;height:65px;z-index:2;transition:height .4s,bottom .4s}.travel-line:before{content:"";position:absolute;top:-8px;left:-5px;width:11px;height:11px;border:2px solid var(--primary);border-radius:50%;background:#fff}.travel-line span:before{content:"▲";position:absolute;top:-30px;left:-7px;color:var(--primary);font-size:17px}.motion-arrows{position:absolute;left:225px;bottom:110px;z-index:6;display:flex;flex-direction:column;line-height:12px;color:var(--primary);font-weight:700;transition:bottom 2.6s cubic-bezier(.4,0,.2,1)}.motion-arrows span{animation:arrowPulse 1.2s infinite}.motion-arrows span:nth-child(2){animation-delay:.15s}.motion-arrows span:nth-child(3){animation-delay:.3s}.motion-arrows.down{transform:rotate(180deg)}.motion-arrows.still{display:none}@keyframes arrowPulse{0%,100%{opacity:.25}50%{opacity:1}}.status-strip{height:88px;border-top:1px solid #dfe4ea;display:grid;grid-template-columns:.76fr .9fr .7fr 1fr 1.13fr 1.1fr 1.16fr .8fr;padding:0 8px;background:#fff}.status-cell{min-width:0;border-right:1px solid #e5e9ee;padding:14px 10px 10px;display:flex;flex-direction:column;justify-content:center;gap:7px}.status-cell:last-child{border:0}.status-cell small{font-size:11px;color:#6e7885;white-space:nowrap}.status-cell strong{font-size:17px;font-weight:600;white-space:nowrap}.status-cell.primary strong{color:#24303d}.status-cell.primary:first-child strong,.status-cell.primary:nth-child(2) strong{color:var(--primary)}.status-cell strong em,.status-cell .runs em{font-style:normal;font-size:11px;font-weight:400;margin-left:2px}.status-cell span{font-size:12px;white-space:nowrap}.status-cell span i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:7px}.status-cell span b{font-weight:500}.analytics-row{height:258px;margin-top:14px;display:grid;grid-template-columns:1fr 190px;gap:14px}.chart-panel{padding:0 16px}.chart-panel .panel-heading{padding:0;height:50px}.legend{display:flex;gap:20px;color:#77818f;font-size:11px}.legend i{display:inline-block;margin-right:6px}.bar-key{width:9px;height:9px;background:var(--primary)}.line-key{width:13px;height:2px;background:#3cabaa;vertical-align:middle}.chart-area{height:188px;position:relative;padding:8px 12px 25px 38px}.axis-labels{position:absolute;left:0;top:8px;bottom:26px;display:flex;flex-direction:column;justify-content:space-between;color:#697382;font-size:11px}.bars{height:100%;display:flex;align-items:end;justify-content:space-around;border-left:1px solid #e5e9ee;border-bottom:1px solid #e5e9ee;background:repeating-linear-gradient(to bottom,#fff 0,#fff 37px,#edf0f3 38px)}.bar{width:8px;background:#5263bf;border-radius:2px 2px 0 0;opacity:.95}.trend-line{position:absolute;left:38px;right:12px;top:8px;width:calc(100% - 50px);height:154px;pointer-events:none}.trend-line path{fill:none;stroke:#39aaa7;stroke-width:2}.time-axis{position:absolute;left:38px;right:12px;bottom:0;display:flex;justify-content:space-between;font-size:10px;color:#6f7987}.metric-panel{padding:0 15px}.metric{height:33.33%;display:flex;align-items:center;gap:13px;border-bottom:1px solid #e7ebef}.metric:last-child{border:0}.metric i{font-style:normal;width:37px;height:37px;border-radius:50%;background:#f4f6fb;border:1px solid #dfe4ea;display:grid;place-items:center;color:var(--primary);font-size:19px}.metric small{display:block;color:#788391;font-size:11px;margin-bottom:5px}.metric strong{font-size:21px}.metric em{font-style:normal;font-size:11px;font-weight:400}.camera-panel{height:365px}.camera-panel .panel-heading div{display:flex;align-items:center;gap:10px;font-size:11px;color:#6d7786}.camera-panel .panel-heading b{background:#f04f48;color:white;padding:3px 6px;border-radius:4px}.camera-feed{height:296px;margin:0 16px;position:relative;overflow:hidden;background:#2c3035;border-radius:6px}.camera-feed img{width:100%;height:100%;object-fit:cover}.camera-feed button{position:absolute;right:10px;top:10px;background:rgba(22,27,32,.75);border:0;color:#fff;width:34px;height:34px;border-radius:5px;font-size:18px}.call-panel{height:278px;padding:0 16px}.call-panel .panel-heading{padding:0;height:50px}.call-panel h3 span{font-size:13px;color:#6d7784}.floor-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.floor-buttons button,.direction-buttons button{height:40px;border:1px solid #dfe4ea;border-radius:6px;background:#f8f9fb;color:#33404e;font-size:14px;cursor:pointer}.floor-buttons button.selected{background:var(--primary);border-color:var(--primary);color:#fff}.direction-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.direction-buttons button.selected{background:#edf0ff;color:var(--primary);border-color:#c9d0ff}.confirm-call{width:100%;height:42px;margin-top:10px;border:0;border-radius:6px;background:var(--primary);color:#fff;font-size:15px;cursor:pointer}.confirm-call:active{transform:translateY(1px)}.call-panel p{text-align:center;color:#87919e;font-size:11px;margin:10px 0}.fault-panel{height:170px;padding:18px 16px}.fault-panel h3{font-size:16px}.healthy{height:74px;display:flex;align-items:center;gap:13px;border-bottom:1px solid #e6eaee;color:var(--green)}.healthy span{width:40px;height:40px;border:2px solid var(--green);border-radius:50%;display:grid;place-items:center;font-size:21px}.healthy strong{font-size:18px}.fault-history{height:48px;display:grid;grid-template-columns:75px 1fr auto;align-items:center;font-size:12px}.fault-history span,.fault-history em{color:#77818d;font-style:normal}.fault-history b{color:var(--red);font-weight:500}.toast{position:fixed;left:50%;top:28px;transform:translate(-50%,-20px);background:#263446;color:#fff;padding:11px 20px;border-radius:6px;opacity:0;transition:.25s;pointer-events:none;box-shadow:0 8px 22px rgba(0,0,0,.18)}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1450px){.app-shell{grid-template-columns:205px 280px 1fr}.workspace{padding:20px 16px}.content-grid{grid-template-columns:minmax(600px,1fr) 335px}.status-cell{padding-left:7px;padding-right:7px}.status-cell strong{font-size:15px}}
.car .door{transition:transform 1.05s cubic-bezier(.4,0,.2,1);will-change:transform}.car.doors-opening .door{transition-duration:1.25s}.car.doors-closing .door{transition-duration:1.35s}
.car.arrived-open .car-display{background:#16834a;border-color:#79b993;color:#fff;box-shadow:0 0 0 2px rgba(22,131,74,.12),0 0 14px rgba(22,131,74,.42)}
.car.arrived-open:after{content:"";position:absolute;right:-18px;top:7px;width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.16),0 0 12px rgba(34,197,94,.75)}
.status-cell.arrival-green strong,.floor-label.arrival-green{color:#16834a!important}
.confirm-call:disabled{cursor:not-allowed;background:#7d88c8;color:#f4f5ff;box-shadow:none;opacity:.9}

/* 实时位置：状态摘要 + 可滚动路线 + 可滚动楼层刻度 */
.elevator-stage{grid-template-columns:218px 82px minmax(330px,1fr);gap:14px;padding:0 18px;background:#fff}
.position-insights{height:385px;align-self:center;display:grid;grid-template-rows:168px 1fr;gap:10px}
.motion-overview,.route-card{border:1px solid #e1e6ed;border-radius:8px;background:#fff;overflow:hidden}
.motion-overview>div:first-child{height:96px;padding:16px 15px;display:flex;flex-direction:column;justify-content:center}
.motion-overview small{font-size:12px;color:#748090;margin-bottom:4px}.motion-overview strong{font-size:40px;line-height:1;color:var(--primary);font-weight:650}
.summary-direction{position:absolute;margin:20px 0 0 145px;display:flex;flex-direction:column;align-items:center;color:var(--primary)}
.summary-direction span{font-size:30px;line-height:30px}.summary-direction b{font-size:14px;margin-top:3px}
.motion-overview dl{margin:0;border-top:1px solid #e5e9ef}.motion-overview dl>div{height:35px;padding:0 14px;display:flex;align-items:center;justify-content:space-between}.motion-overview dl>div+div{border-top:1px solid #edf0f4}
.motion-overview dt{font-size:12px;color:#687483}.motion-overview dd{margin:0;font-size:17px;font-weight:600;color:#283548}.motion-overview dd em{font-size:10px;font-style:normal;font-weight:400;margin-left:3px}
.route-card{padding:12px 9px 10px}.route-card-title{height:27px;display:flex;align-items:flex-start;justify-content:space-between;padding:0 5px;color:#6f7a88;font-size:12px}.route-card-title b{color:var(--primary);font-weight:600}
.route-progress-scroll{height:164px;overflow-y:auto;overscroll-behavior:contain;padding:2px 5px 4px 9px;scrollbar-width:thin;scrollbar-color:#c9d1dc transparent}.route-progress-scroll::-webkit-scrollbar,.floor-scale-shell::-webkit-scrollbar,.floor-buttons-scroll::-webkit-scrollbar{width:5px}.route-progress-scroll::-webkit-scrollbar-thumb,.floor-scale-shell::-webkit-scrollbar-thumb,.floor-buttons-scroll::-webkit-scrollbar-thumb{background:#cbd3de;border-radius:6px}
.route-progress{display:flex;flex-direction:column;min-height:100%;justify-content:center}.route-stop{height:34px;min-height:34px;display:grid;grid-template-columns:18px 1fr 34px;align-items:center;position:relative;color:#7a8594;font-size:12px}.route-stop:not(:last-child):after{content:"";position:absolute;left:5px;top:22px;width:2px;height:25px;background:#d2d8e0}.route-stop i{width:12px;height:12px;border-radius:50%;border:2px solid #b8c0cb;background:#fff;z-index:1}.route-stop b{text-align:right;color:#5d6877}.route-stop.current i{border-color:var(--primary);box-shadow:0 0 0 3px rgba(70,87,184,.1)}.route-stop.current span,.route-stop.current b{color:var(--primary);font-weight:600}.route-stop.target i{border-color:var(--orange)}.route-stop.target b{color:#d98017}
.floor-scale-shell{height:385px;align-self:center;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#cbd3de transparent}.floor-scale{position:relative;min-height:385px;width:100%}.floor-label{right:3px}.floor-label:after{min-width:14px}.floor-label.target:before{right:1px}
.shaft-wrap{min-width:330px}.shaft{width:min(365px,100%)}
.call-panel{height:294px}.call-panel .panel-heading{height:44px}.call-floor-heading{height:28px;display:flex;align-items:center;justify-content:space-between;color:#6d7887;font-size:12px}.call-floor-heading strong{font-size:17px;color:var(--primary)}
.floor-buttons-scroll{height:82px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;scrollbar-width:thin;scrollbar-color:#cbd3de transparent}.floor-buttons{grid-template-columns:repeat(4,1fr);align-content:start}.floor-buttons button{height:36px}.direction-buttons{margin-top:8px}.direction-buttons button{height:36px}.confirm-call{height:38px;margin-top:8px}.call-panel p{margin:7px 0}
@media(max-width:1550px){.elevator-stage{grid-template-columns:190px 68px minmax(300px,1fr);gap:10px}.shaft{width:330px}.car{left:77px}.rail-left{left:64px}.rail-right{left:190px}.motion-arrows{left:205px}.counterweight{right:34px}.pulley{right:37px}}

/* 修复状态卡拥挤：使用稳定网格，不使用绝对定位 */
.motion-overview{display:grid;grid-template-columns:1fr 78px;grid-template-rows:96px 1fr}
.motion-overview>div:first-child{grid-column:1;grid-row:1;min-width:0}
.summary-direction{position:static;margin:0;grid-column:2;grid-row:1;display:flex;justify-content:center;align-items:center;border-left:1px solid #edf0f4;background:#fbfcfe}
.stop-stages{display:flex;gap:3px;margin-top:5px}.stop-stages i{width:18px;height:17px;display:grid;place-items:center;border:1px solid #d8dee7;border-radius:4px;background:#fff;color:#9099a6;font-size:9px;font-style:normal}.stop-stages i.active{border-color:#7dc59a;background:#eaf8ef;color:#16834a;font-weight:700}
.motion-overview dl{grid-column:1/-1;grid-row:2}
.route-progress{justify-content:flex-start;min-height:auto}
.route-stop{height:32px;min-height:32px}.route-stop:not(:last-child):after{height:23px}
.route-stop.on-route:not(.current):not(.target) i{border-color:#8a96d0;background:#f1f3ff}
.route-stop.completed i{border-color:#35a564;background:#35a564;box-shadow:inset 0 0 0 3px #fff}.route-stop.completed span,.route-stop.completed b{color:#27844e}
.route-card-title b{max-width:145px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.car,.counterweight,.motion-arrows{will-change:bottom;transform:translateZ(0);backface-visibility:hidden}
@media(max-width:1550px){.motion-overview{grid-template-columns:1fr 68px}.motion-overview>div:first-child{padding-left:13px}.motion-overview strong{font-size:36px}.summary-direction span{font-size:27px}}

/* 轿厢位置仅走合成线程，减少布局重排；一层约 3.25 秒，与模拟主板节拍配合。 */
.car{bottom:18px;transform:translate3d(0,var(--lift-y,0),0);transition:transform 3.25s linear}
.counterweight{bottom:18px;transform:translate3d(0,var(--lift-y,0),0);transition:transform 3.25s linear}
.motion-arrows{bottom:51px;transform:translate3d(0,var(--lift-y,0),0) rotate(var(--arrow-rotation,0deg));transition:transform 3.25s linear}
.motion-arrows.down{--arrow-rotation:180deg;transform:translate3d(0,var(--lift-y,0),0) rotate(180deg)}
.car,.counterweight,.motion-arrows{will-change:transform;backface-visibility:hidden;contain:layout paint style}

/* Final responsive operations layout: 1080x720 and above. */
html,body{width:100%;height:100%;min-width:1080px;min-height:720px;overflow:hidden}
.app-shell{width:100vw;height:100vh;min-width:0;min-height:0;grid-template-columns:clamp(170px,11.8vw,226px) clamp(230px,15.6vw,300px) minmax(0,1fr);overflow:hidden}
.primary-sidebar,.asset-sidebar,.workspace{min-height:0}
.workspace{overflow:hidden;min-width:0}
.content-grid{min-width:0;height:calc(100vh - 119px);grid-template-columns:minmax(0,1fr) clamp(310px,20vw,365px);align-items:start}
.center-column,.right-column{min-width:0}
.analytics-row{grid-template-columns:minmax(0,1fr)}
.chart-panel{min-width:0}
.elevator-table-head,.elevator-row{grid-template-columns:minmax(0,1fr) 44px 54px;column-gap:8px}
.elevator-table-head span:nth-child(2),.elevator-row>span:nth-child(2){text-align:center}
.elevator-table-head span:last-child{text-align:right}

/* Symmetrical, commercial elevator shaft. */
.shaft-wrap{min-width:0}
.shaft{width:min(390px,100%);background:linear-gradient(90deg,#eef1f4 0,#fafbfc 12%,#f5f7f9 50%,#fafbfc 88%,#eef1f4 100%);border:7px solid #aab1b9;border-width:7px 7px 10px;box-shadow:inset 0 0 0 1px #d4d9df,0 3px 9px rgba(42,53,65,.08)}
.rail{top:0;bottom:0;width:4px;background:#777f88;box-shadow:1px 0 #e2e5e8}
.rail-left{left:25%}.rail-right{left:auto;right:25%}
.travel-line{left:14%;opacity:.9}
.car{left:50%;width:min(148px,43%);bottom:18px;transform:translate3d(-50%,var(--lift-y,0),0);filter:drop-shadow(0 6px 7px rgba(33,43,53,.12))}
.car-display{height:23px;border-color:#8f979f;background:#29323b;color:#bcd4ff;letter-spacing:.03em}
.car-body{border-color:#9299a1;background:#c8cdd2;box-shadow:0 4px 8px rgba(43,52,62,.13)}
.door{background:linear-gradient(90deg,#aeb5bc 0,#e1e4e7 48%,#b2b8bf 100%)}
.motion-arrows{left:calc(50% + min(84px,24%));bottom:51px;transform:translate3d(0,var(--lift-y,0),0) rotate(var(--arrow-rotation,0deg))}
.counterweight,.pulley{display:none!important}

@media (min-width:1400px){
  .workspace{padding:20px 18px 16px}
  .page-header{height:72px}
  .content-grid{height:calc(100vh - 108px)}
  .elevator-stage{grid-template-columns:205px 72px minmax(300px,1fr);gap:12px}
  .position-insights,.floor-scale-shell,.shaft{height:385px}
  .analytics-row{height:258px}
}

@media (max-width:1399px){
  .app-shell{grid-template-columns:150px 205px minmax(0,1fr)}
  .brand{height:82px;padding:0 14px;gap:8px}.brand-mark{width:30px;height:30px}.brand strong{font-size:17px}.brand small{font-size:9px;line-height:1.35}
  .main-nav{padding-top:6px}.nav-item{height:40px;padding:0 15px;gap:10px;font-size:13px}.nav-item i{width:17px;font-size:14px}.sub-nav{margin-left:24px}.sub-nav button{height:27px;font-size:11px}.sidebar-tools{padding:6px 12px}.sidebar-tools button{font-size:16px}
  .asset-sidebar{padding:14px 10px 10px}.asset-sidebar h1{font-size:18px;margin:0 0 12px}.project-select{height:40px;padding:0 10px;font-size:12px}.search-box{height:36px;margin-top:8px;padding:0 9px}.search-box input{font-size:11px}.filter-tabs{gap:5px;margin:8px 0 10px}.filter-tabs button{height:34px;font-size:11px}.building-list{height:calc(100vh - 164px)}.building{margin-bottom:8px}.building-header{height:38px;padding:0 9px}.building-header strong{font-size:13px}.building-header span{font-size:10px}.elevator-table-head,.elevator-row{padding:0 8px;grid-template-columns:minmax(0,1fr) 31px 43px;column-gap:4px}.elevator-table-head{height:25px;font-size:9px}.elevator-row{height:37px;font-size:10px}.tag{padding:2px 4px;font-size:9px}
  .workspace{padding:8px 10px 8px}.page-header{height:48px}.page-header h2{font-size:18px;margin:0 0 5px}.breadcrumb{font-size:10px;gap:7px}.header-meta{gap:12px;margin-top:12px;font-size:10px}.device-chip{padding:5px 8px}
  .content-grid{height:calc(100vh - 64px);grid-template-columns:minmax(0,1fr) 230px;gap:8px}.right-column{gap:8px}.panel{border-radius:6px}
  .elevator-panel{height:407px}.panel-heading{height:38px;padding:0 10px}.panel-heading h3,.fault-panel h3{font-size:14px}.sync{font-size:9px}.sync i{width:7px;height:7px;margin-right:5px}
  .elevator-stage{height:305px;grid-template-columns:126px 42px minmax(235px,1fr);gap:6px;padding:0 8px}
  .position-insights{height:292px;grid-template-rows:130px 1fr;gap:6px}.motion-overview{grid-template-columns:1fr 45px;grid-template-rows:74px 1fr;border-radius:6px}.motion-overview>div:first-child{height:74px;padding:9px}.motion-overview small{font-size:9px}.motion-overview strong{font-size:30px}.summary-direction span{font-size:20px;line-height:20px}.summary-direction b{font-size:10px}.stop-stages{gap:1px;margin-top:3px}.stop-stages i{width:13px;height:13px;font-size:7px}.motion-overview dl>div{height:28px;padding:0 8px}.motion-overview dt{font-size:9px}.motion-overview dd{font-size:12px}.route-card{padding:7px 5px}.route-card-title{height:22px;padding:0 2px;font-size:9px}.route-card-title b{max-width:74px}.route-progress-scroll{height:126px;padding:0 2px 2px 5px}.route-stop{height:27px;min-height:27px;grid-template-columns:14px 1fr 25px;font-size:9px}.route-stop:not(:last-child):after{left:4px;top:19px;height:20px}.route-stop i{width:9px;height:9px}.floor-scale-shell,.floor-scale{height:292px;min-height:292px}.floor-label{height:22px;font-size:9px;right:0;gap:4px}.floor-label.current{padding-left:4px}.floor-label.target:before{font-size:11px}
  .shaft{height:292px;width:min(270px,100%);border-width:6px 6px 8px}.car{height:94px;width:min(112px,43%)}.car-display{height:19px;border-width:3px;font-size:9px}.car-body{height:75px;border-width:4px;padding:1px}.motion-arrows{left:calc(50% + min(62px,24%));font-size:10px;line-height:9px}.travel-line{height:45px}.landing-line.active{height:26px;transform:translateY(13px)}
  .status-strip{height:64px;padding:0 3px}.status-cell{padding:7px 4px 5px;gap:4px}.status-cell small{font-size:8px}.status-cell strong{font-size:12px}.status-cell span{font-size:8px}.status-cell span i{width:6px;height:6px;margin-right:3px}
  .analytics-row{height:204px;margin-top:8px}.chart-panel{padding:0 9px}.chart-panel .panel-heading{height:37px}.legend{gap:8px;font-size:8px}.chart-area{height:158px;padding:5px 8px 20px 27px}.axis-labels{top:5px;bottom:21px;font-size:8px}.trend-line{left:27px;right:8px;top:5px;width:calc(100% - 35px);height:132px}.time-axis{left:27px;right:8px;font-size:7px}.bar{width:5px}
  .camera-panel{height:254px}.camera-panel .panel-heading div{gap:5px;font-size:8px}.camera-feed{height:202px;margin:0 10px}.camera-feed button{right:6px;top:6px;width:25px;height:25px;font-size:13px}
  .call-panel{height:220px;padding:0 10px}.call-panel .panel-heading{height:36px}.call-floor-heading{height:22px;font-size:9px}.call-floor-heading strong{font-size:13px}.floor-buttons-scroll{height:64px;padding-right:2px}.floor-buttons{gap:5px}.floor-buttons button,.direction-buttons button{height:29px;font-size:10px}.direction-buttons{gap:5px;margin-top:5px}.confirm-call{height:31px;margin-top:5px;font-size:11px}.call-panel p{font-size:8px;margin:5px 0}
  .fault-panel{height:140px;padding:12px 10px}.fault-panel h3{font-size:13px}.healthy{height:59px;gap:8px}.healthy span{width:30px;height:30px;font-size:15px}.healthy strong{font-size:14px}.fault-history{height:36px;grid-template-columns:52px 1fr auto;font-size:8px}
}

/* 远程控制模式：直呼使用轿内选层，访客呼梯保留两阶段路线。 */
.call-title-row{display:flex;align-items:center;gap:10px;min-width:0}
.call-mode-switch{display:inline-grid;grid-template-columns:1fr 1fr;padding:2px;background:#eef1f6;border-radius:7px;gap:2px}
.call-mode-switch button{height:27px;padding:0 9px;border:0;border-radius:5px;background:transparent;color:#667386;font-size:11px;cursor:pointer;white-space:nowrap}
.call-mode-switch button.selected{background:#fff;color:var(--primary);font-weight:700;box-shadow:0 1px 4px rgba(38,52,83,.14)}
.direction-buttons[hidden]{display:none}
.floor-buttons button:disabled{cursor:not-allowed;color:#a7b0bd;background:#f1f3f6;border-color:#e5e8ed;text-decoration:line-through}
.call-panel.direct-mode .confirm-call{margin-top:12px}
@media (max-width:1399px){
  .call-title-row{gap:5px}.call-mode-switch button{height:22px;padding:0 5px;font-size:8px}
}

/* Reference-image parity: preserve the approved proportions at every desktop size. */
@media (max-width:1399px){
  .app-shell{grid-template-columns:clamp(133px,12.3vw,205px) clamp(185px,17.1vw,285px) minmax(0,1fr)}
  .content-grid{grid-template-columns:minmax(0,1fr) clamp(280px,26.2vw,438px)}
  .elevator-panel{height:372px}
  .elevator-stage{height:270px;grid-template-columns:clamp(110px,10vw,132px) clamp(38px,4.2vw,56px) minmax(255px,1fr);gap:7px;padding:0 10px}
  .position-insights,.floor-scale-shell{height:258px}
  .floor-scale{min-height:258px}
  .motion-overview{grid-template-columns:1fr 43px;grid-template-rows:72px 1fr}
  .motion-overview>div:first-child{height:72px}
  .route-progress-scroll{height:94px}
  .route-stop{height:25px;min-height:25px}
  .route-stop:not(:last-child):after{height:18px}
  .shaft{height:258px;width:min(300px,100%);border:0;border-bottom:7px solid #a8afb7;border-radius:0;background:linear-gradient(90deg,rgba(241,243,246,.45),#f8f9fb 18%,#f6f7f9 50%,#f8f9fb 82%,rgba(241,243,246,.45));box-shadow:none;overflow:hidden}
  .shaft:before{content:"";position:absolute;z-index:1;top:0;bottom:0;left:50%;width:14px;transform:translateX(-50%);background:repeating-linear-gradient(90deg,#858d96 0,#858d96 1px,transparent 1px,transparent 4px);opacity:.72}
  .rail{z-index:2;top:0;bottom:0;width:5px;background:linear-gradient(90deg,#4f5760,#9da4ab 45%,#505861);box-shadow:1px 0 1px rgba(0,0,0,.18)}
  .rail-left{left:22%}.rail-right{right:22%}
  .landing-lines{z-index:0}
  .travel-line{z-index:3;left:7%;height:48px}
  .car{z-index:5;height:128px;width:min(126px,45%);filter:drop-shadow(0 7px 7px rgba(29,38,48,.16))}
  .car-display{height:22px;border:5px solid #555d65;border-bottom:0;background:#252c33;color:#d5e3ff;font-size:10px}
  .car-body{height:106px;border:7px solid #666e76;border-top:5px solid #4e565e;padding:3px;background:#bfc4c9;box-shadow:inset 0 0 0 2px #9ea5ac,0 4px 8px rgba(43,52,62,.18)}
  .door{background:linear-gradient(90deg,#959da5 0,#dfe3e6 46%,#f2f4f5 54%,#9fa6ad 100%);border-color:#858d95}
  .motion-arrows{left:calc(50% + min(70px,25%));bottom:44px}
  .status-strip{height:64px}
  .analytics-row{height:233px}
  .chart-area{height:187px}.trend-line{height:159px}
  .camera-panel{height:276px}.camera-feed{height:224px}
  .call-panel{height:206px}.call-panel .panel-heading{height:34px}.floor-buttons-scroll{height:58px}.floor-buttons button,.direction-buttons button{height:27px}.confirm-call{height:29px}.call-panel p{margin:4px 0}
  .fault-panel{height:132px}.healthy{height:53px}.fault-history{height:34px}
}

@media (min-width:1200px) and (max-width:1399px){
  .app-shell{grid-template-columns:158px 218px minmax(0,1fr)}
  .workspace{padding-left:10px;padding-right:10px}
  .content-grid{grid-template-columns:minmax(0,1fr) 335px}
  .elevator-stage{grid-template-columns:126px 50px minmax(280px,1fr)}
}

@media (min-width:1400px){
  .content-grid{grid-template-columns:minmax(0,3fr) minmax(420px,2fr)}
  .center-column{height:100%;min-height:0;display:grid;grid-template-rows:clamp(560px,64vh,620px) minmax(180px,1fr);gap:14px;overflow:hidden}
  .right-column{height:100%;min-height:0;display:grid;grid-template-rows:minmax(255px,48%) minmax(220px,34%) minmax(140px,18%);gap:14px;overflow:hidden}
  .elevator-panel,.camera-panel,.call-panel,.fault-panel{height:auto}
  .elevator-stage{height:calc(100% - 140px);min-height:250px;grid-template-columns:220px 70px minmax(300px,1fr)}
  .position-insights,.floor-scale-shell,.shaft{height:calc(100% - 12px);min-height:250px}
  .floor-scale{min-height:100%}
  .analytics-row{height:auto;margin-top:0;min-height:0}
  .chart-panel{height:100%}.chart-area{height:calc(100% - 58px)}.trend-line{height:calc(100% - 34px)}
  .camera-feed{height:calc(100% - 69px)}
  .call-panel{overflow:hidden}.fault-panel{overflow:hidden}
  .motion-overview>div:first-child{padding-left:18px;padding-right:16px}
  .motion-overview{grid-template-columns:minmax(0,1fr) 72px}
  .route-card{padding-left:14px;padding-right:12px}
  .route-card-title b{max-width:132px}
  .shaft{width:min(330px,100%);border:0;border-bottom:9px solid #a8afb7;border-radius:0;background:linear-gradient(90deg,rgba(241,243,246,.45),#f8f9fb 18%,#f6f7f9 50%,#f8f9fb 82%,rgba(241,243,246,.45));box-shadow:none;overflow:hidden}
  .shaft:before{content:"";position:absolute;z-index:1;top:0;bottom:0;left:50%;width:17px;transform:translateX(-50%);background:repeating-linear-gradient(90deg,#858d96 0,#858d96 1px,transparent 1px,transparent 5px);opacity:.72}
  .rail{z-index:2;width:6px;background:linear-gradient(90deg,#4f5760,#9da4ab 45%,#505861)}.rail-left{left:22%}.rail-right{right:22%}
  .car{height:150px;width:min(148px,46%)}.car-display{height:26px;border:6px solid #555d65;border-bottom:0}.car-body{height:124px;border:8px solid #666e76;border-top:6px solid #4e565e}
  .travel-line{left:7%}.motion-arrows{left:calc(50% + min(92px,25%))}
}

@media (min-width:1400px) and (max-height:800px){
  .center-column{grid-template-rows:minmax(390px,62%) minmax(180px,38%)}
  .right-column{grid-template-rows:minmax(230px,48%) minmax(190px,34%) minmax(120px,18%)}
}

/* Unified, more generous typography across the operations interface. */
body{font-size:15px}
.brand strong{font-size:22px}.brand small{font-size:13px}
.nav-item{font-size:17px}.sub-nav button{font-size:15px}
.asset-sidebar h1,.page-header h2{font-size:23px}
.project-select{font-size:15px}.search-box input{font-size:14px}
.filter-tabs button{font-size:14px}
.building-header strong{font-size:16px}.building-header span{font-size:13px}
.elevator-table-head{font-size:12px}.elevator-row{font-size:13px}.tag{font-size:12px}
.breadcrumb,.header-meta{font-size:14px}
.panel-heading h3,.fault-panel h3{font-size:18px}.sync{font-size:13px}
.motion-overview small,.motion-overview dt,.route-card-title{font-size:12px}
.motion-overview dd{font-size:15px}.route-stop{font-size:12px}
.floor-label{font-size:14px}
.status-cell small{font-size:12px}.status-cell strong{font-size:18px}.status-cell span{font-size:13px}
.legend{font-size:12px}.axis-labels,.time-axis{font-size:12px}
.call-floor-heading{font-size:13px}.floor-buttons button,.direction-buttons button{font-size:14px}.confirm-call{font-size:15px}.call-panel p{font-size:11px}
.healthy strong{font-size:18px}.fault-history{font-size:12px}

@media (max-width:1399px){
  body{font-size:13px}
  .brand strong{font-size:18px}.brand small{font-size:10px}
  .nav-item{font-size:14px}.sub-nav button{font-size:12px}
  .asset-sidebar h1,.page-header h2{font-size:19px}
  .project-select{font-size:13px}.search-box input{font-size:12px}.filter-tabs button{font-size:12px}
  .building-header strong{font-size:14px}.building-header span{font-size:11px}
  .elevator-table-head{font-size:10px}.elevator-row{font-size:11px}.tag{font-size:10px}
  .breadcrumb,.header-meta{font-size:11px}
  .panel-heading h3,.fault-panel h3{font-size:15px}.sync{font-size:10px}
  .motion-overview small,.motion-overview dt,.route-card-title{font-size:10px}.motion-overview dd{font-size:13px}.route-stop{font-size:10px}.floor-label{font-size:10px}
  .status-cell small{font-size:9px}.status-cell strong{font-size:13px}.status-cell span{font-size:9px}
  .legend,.axis-labels{font-size:9px}.time-axis{font-size:8px}
  .call-floor-heading{font-size:10px}.floor-buttons button,.direction-buttons button{font-size:11px}.confirm-call{font-size:12px}.call-panel p{font-size:9px}
  .healthy strong{font-size:15px}.fault-history{font-size:9px}
}

/* Use the selected elevator as the page title and reclaim the old heading space. */
.page-header{height:62px}
.page-header h2{font-size:26px;line-height:1.12;font-weight:750;margin:0 0 4px;letter-spacing:.01em}
.header-meta{margin-top:20px}
.content-grid{height:calc(100vh - 107px)}

@media (min-width:1400px){
  .page-header{height:60px}
  .page-header h2{font-size:26px;margin-bottom:4px}
  .header-meta{margin-top:18px}
  .content-grid{height:calc(100vh - 96px)}
}

@media (max-width:1399px){
  .page-header{height:42px}
  .page-header h2{font-size:21px;line-height:1.08;margin-bottom:2px;font-weight:750}
  .header-meta{margin-top:7px}
  .content-grid{height:calc(100vh - 58px)}
}

/* Current-position summary: match the class names used by index.html.
   Keep every live value in its own grid cell so MQTT updates cannot overlap. */
.floor-summary-card{
  height:calc(100% - 12px);
  min-width:0;
  align-self:center;
  display:grid;
  grid-template-rows:104px 42px 42px minmax(0,1fr);
  overflow:hidden;
  border:1px solid #dfe5ec;
  border-radius:9px;
  background:#fff;
}
.summary-top{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 72px;
  border-bottom:1px solid #e8ecf1;
}
.summary-top>div:first-child{
  min-width:0;
  padding:16px 14px 12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.summary-top label{
  display:block;
  margin-bottom:6px;
  color:#748090;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}
.summary-top strong{
  color:var(--primary);
  font-size:40px;
  line-height:1;
  font-weight:700;
  white-space:nowrap;
}
.direction-pill{
  min-width:0;
  padding:10px 5px 8px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:34px 20px 18px;
  align-content:center;
  justify-items:center;
  border-left:1px solid #e8ecf1;
  background:#fbfcfe;
  color:var(--primary);
}
.direction-pill>span{
  grid-column:1/-1;
  font-size:30px;
  line-height:30px;
}
.direction-pill>b{
  grid-column:1/-1;
  overflow:hidden;
  max-width:100%;
  font-size:14px;
  line-height:18px;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.direction-pill>em{
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  border:1px solid #d8dee7;
  border-radius:4px;
  background:#fff;
  color:#8b95a3;
  font-size:9px;
  line-height:1;
  font-style:normal;
}
.direction-pill>em.ok{
  border-color:#79c395;
  background:#eaf8ef;
  color:#16834a;
  font-weight:700;
}
.summary-row{
  min-width:0;
  padding:0 14px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:10px;
  border-bottom:1px solid #edf0f4;
}
.summary-row>span{
  min-width:0;
  overflow:hidden;
  color:#687483;
  font-size:12px;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.summary-row>b{
  color:#243248;
  font-size:17px;
  line-height:1;
  white-space:nowrap;
}
.floor-summary-card>.route-card{
  min-height:0;
  margin:10px;
  padding:10px 9px 8px;
  display:grid;
  grid-template-rows:44px minmax(0,1fr);
  overflow:hidden;
  border:1px solid #e1e6ed;
  border-radius:8px;
}
.route-title{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  color:#6f7a88;
  font-size:12px;
}
.route-title>b{
  min-width:0;
  overflow:hidden;
  color:var(--primary);
  font-weight:600;
  text-align:left;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.floor-summary-card .route-progress-scroll{
  height:auto;
  min-height:0;
}

@media (max-width:1399px){
  .floor-summary-card{grid-template-rows:74px 28px 28px minmax(0,1fr);border-radius:6px}
  .summary-top{grid-template-columns:minmax(0,1fr) 45px}
  .summary-top>div:first-child{padding:9px 8px 7px}
  .summary-top label{margin-bottom:3px;font-size:9px}
  .summary-top strong{font-size:30px}
  .direction-pill{padding:5px 2px 4px;grid-template-rows:24px 16px 13px}
  .direction-pill>span{font-size:20px;line-height:20px}
  .direction-pill>b{font-size:10px;line-height:13px}
  .direction-pill>em{width:13px;height:13px;border-radius:3px;font-size:7px}
  .summary-row{padding:0 8px;column-gap:5px}
  .summary-row>span{font-size:9px}.summary-row>b{font-size:12px}
  .floor-summary-card>.route-card{margin:6px;padding:7px 5px 5px;grid-template-rows:34px minmax(0,1fr)}
  .route-title{font-size:9px;gap:2px}
}