*{box-sizing:border-box}:root{--navy: #111b2b;--blue: #2f7cff;--light-blue: #eaf2ff;--text: #1e2b3d;--muted: #8b96a8;--green: #62b234;--orange: #f5a623}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden;font-family:PingFang SC,Microsoft YaHei,Arial,sans-serif;color:var(--text);background:#f4f7fb}button,input,select{font-family:inherit}.hidden{display:none!important}.login-page,.loading{display:grid;width:100vw;height:100vh;place-items:center;background:linear-gradient(135deg,#10192a,#172b4b 55%,#0a1221)}.login-bg-orb{position:absolute;width:280px;height:280px;border-radius:50%;filter:blur(10px);opacity:.5}.orb-a{left:14%;top:20%;background:#2f7cff}.orb-b{right:15%;bottom:15%;background:#67d7ff}.login-card{position:relative;width:420px;padding:42px 44px 38px;text-align:center;background:#fffffff2;border-radius:20px;box-shadow:0 24px 70px #00000047}.brand-mark{display:grid;width:62px;height:62px;margin:0 auto 20px;place-items:center;color:#fff;font-size:30px;font-weight:800;background:linear-gradient(145deg,#2f7cff,#67d7ff);border-radius:18px}.login-card h1{margin:0;font-size:24px}.login-card p{margin:10px 0 30px;color:#6b7686}.login-form{display:grid;gap:18px;text-align:left}.login-form span{display:block;margin-bottom:8px;color:#586474;font-size:13px}.login-form input{width:100%;height:46px;padding:0 14px;border:1px solid #dbe3ef;border-radius:10px;outline:none;background:#f8fbff}.login-form button{height:48px;color:#fff;font-size:16px;font-weight:700;cursor:pointer;background:linear-gradient(90deg,#2d75ff,#4da3ff);border:0;border-radius:10px}.login-form small{text-align:center;color:#8a94a3}.app-page{width:100vw;min-width:1360px;height:100vh;background:#f4f7fb}.topbar{display:flex;align-items:center;justify-content:space-between;height:74px;padding:0 19px;color:#fff;background:#111b2b}.title-wrap{display:flex;align-items:center;gap:12px}.title-wrap h1{margin:0;font-size:17px;font-weight:800}.title-wrap span{padding:4px 8px;color:#3f7cff;font-size:12px;background:#edf5ff;border-radius:3px}.top-actions{display:flex;align-items:center;gap:13px;font-size:13px}.data-source{display:grid;grid-template-columns:42px 96px 58px 58px;align-items:center;justify-items:start;gap:7px;width:282px;margin-right:20px}.data-source select,.data-source input,.data-source button{height:26px;color:#243348;background:#fff;border:0;border-radius:4px}.data-source select{width:96px}.data-source>span:first-child{width:42px}.data-source input{width:210px;padding:0 8px}.data-source button{width:58px;padding:0;text-align:center;cursor:pointer}.icon-bell{position:relative;width:24px;height:24px;background:transparent;border:0;cursor:pointer}.icon-bell:before{position:absolute;top:6px;right:4px;bottom:3px;left:4px;content:"";border:2px solid #fff;border-bottom-width:3px;border-radius:9px 9px 3px 3px}.icon-bell span{position:absolute;right:-1px;top:-3px;display:grid;width:15px;height:15px;place-items:center;color:#fff;font-size:10px;background:#ff554f;border-radius:50%}.logout{color:#8eb4ff;cursor:pointer;background:transparent;border:0}.layout{display:grid;grid-template-columns:236px minmax(780px,1fr) 606px;gap:12px;height:calc(100vh - 74px)}.sidebar{display:flex;flex-direction:column;min-height:0;overflow:hidden;background:#fff;box-shadow:1px 0 #21314b0f}.side-nav{flex:1;min-height:0;padding-top:2px;overflow-y:auto;overflow-x:hidden}.side-nav::-webkit-scrollbar{width:6px}.side-nav::-webkit-scrollbar-thumb{background:#c5ccd6;border-radius:8px}.side-nav::-webkit-scrollbar-track{background:transparent}.side-group,.side-leaf{border-bottom:1px solid #eff3f8}.side-group-title,.side-leaf,.side-subgroup-title,.side-child{display:flex;align-items:center;width:100%;height:44px;padding:0 28px;color:#25364b;font-size:13px;text-align:left;cursor:pointer;background:transparent;border:0}.side-group-title{justify-content:space-between;color:#25364b}.side-group-title span,.side-leaf{display:flex;gap:10px;align-items:center}.side-group-title i,.side-leaf i{display:inline-grid;width:24px;height:18px;place-items:center;color:#5e718c;font-style:normal;font-size:10px;font-weight:800;line-height:1;text-align:center;background:#eef3fa;border-radius:4px}.side-group-title b,.side-subgroup-title b{flex:0 0 auto}.chevron{display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:6px solid #8b98aa}.chevron.open{border-top:6px solid #8b98aa;border-right:5px solid transparent;border-left:5px solid transparent;border-bottom:0}.side-group.collapsed .side-children{display:none}.side-subgroup-title{justify-content:space-between;height:44px;padding-left:52px;padding-right:28px;color:#25364b;background:#fff}.side-subgroup.collapsed .side-subchildren{display:none}.side-child{height:48px;padding-left:76px}.side-grandchild{padding-left:92px}.side-child.active,.side-leaf.active,.side-group-title.active-parent,.side-subgroup-title.active-parent{color:#3e7af2;background:#eaf2ff}.side-leaf.active i,.side-group-title.active-parent i{color:#3e7af2}.side-leaf:hover,.side-child:hover,.side-subgroup-title:hover,.side-group-title:hover{color:#3e7af2;background:#f4f8ff}.main-panel{display:grid;grid-template-rows:1fr 128px;gap:12px;padding:12px 0 11px;min-width:0}.video-scene{position:relative;overflow:hidden;min-height:470px;background:#777 url(/assets/new-video-reference.jpg) center center / cover no-repeat;border-radius:6px}.video-player{width:100%;height:100%;min-height:470px;object-fit:cover;border-radius:6px}.video-scene:after{position:absolute;top:0;right:0;bottom:0;left:0;content:"";background:linear-gradient(90deg,rgba(0,0,0,.15),transparent 18%,transparent 78%,rgba(0,0,0,.12));pointer-events:none}.camera-label{position:absolute;right:112px;bottom:48px;z-index:2;color:#fff;font-family:Courier New,monospace;font-size:17px;font-weight:700;text-shadow:0 1px 2px #000}.status-strip{display:grid;grid-template-columns:170px 190px repeat(5,1fr);gap:0;overflow:hidden;background:#fff;border-radius:6px;box-shadow:0 1px 6px #1a2a440f}.status-cell{position:relative;min-width:0;padding:13px 15px}.face-status{cursor:pointer;transition:background .18s ease,box-shadow .18s ease,transform .18s ease}.face-status:hover{background:#f5f9ff}.face-status.active-face{background:linear-gradient(180deg,#2f7cff1a,#2f7cff08);box-shadow:inset 0 0 0 1px #2f7cff47}.face-status.active-face .face-name{color:#2f7cff;font-weight:700}.status-label,.face-name{color:#7c8797;font-size:11px}.status-label strong{color:#111}.fan-schematic{display:block;width:78px;height:76px;margin:8px auto 0}.fan-mast{stroke:#b9c7d6;stroke-width:5;stroke-linecap:round}.fan-blade-svg{cursor:pointer;fill:#e6edf5;stroke:#aebfce;stroke-width:2;filter:drop-shadow(0 1px 0 rgba(120,140,160,.18));transition:fill .18s ease,stroke .18s ease}.fan-blade-svg.disabled{cursor:default}.fan-blade-svg.active{fill:#63c83b;stroke:#56b530}.fan-hub{fill:#dfe8f2;stroke:#aebfce;stroke-width:2}.fan-hub-inner{fill:#63c83b}.blade-section-schematic{display:block;width:108px;height:54px;margin:18px auto 0}.blade-section-outline{fill:none;stroke:#8fa8bf;stroke-width:1.8}.blade-section-part{cursor:pointer;fill:#eef4fa;stroke:none;transition:fill .18s ease}.blade-section-part.disabled{cursor:default}.blade-section-part.active{fill:#63c83b}.blade-section-divider{stroke:#8fa8bf;stroke-width:1.4;fill:none}.face-map{position:relative;height:76px}.face-dot{position:absolute;width:5px;height:5px;padding:0;pointer-events:none;background:#8aa1bb;border:0;border-radius:50%}.face-dot.alert{background:#e64141}.ws-badge{width:54px;padding:2px 8px;font-size:11px;font-weight:600;color:#fff;text-align:center;border-radius:4px}.ws-badge.online{background:#63c83b}.ws-badge.offline{background:#e64141}.ws-badge.placeholder{visibility:hidden}.right-panel{display:grid;grid-template-rows:96px 404px minmax(260px,1fr);gap:10px;padding:12px 12px 11px 0;min-width:0}.white-card{overflow:hidden;background:#fff;border-radius:6px;box-shadow:0 1px 7px #1a2a4412}.white-card h2{margin:0;font-size:14px;font-weight:800}.base-card{padding:15px 18px}.base-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:18px}.base-row div{display:grid;grid-template-columns:72px 1fr;align-items:center;font-size:12px}.base-row span{color:#8b94a4}.base-row strong{color:#111}.vibration-card{padding:14px 18px 8px}.blue-chart{height:144px;margin-top:11px;position:relative}.blue-chart-head{height:20px;margin-bottom:14px}.blue-chart-head strong{color:#28384d;font-size:12px;font-weight:700;line-height:20px}.blue-chart-labels{position:relative;height:18px;margin-bottom:3px}.blue-chart-labels small{position:absolute;top:0;transform:translate(-50%);display:flex;align-items:baseline;justify-content:center;gap:3px;min-width:42px;white-space:nowrap}.blue-chart-labels em{color:#b8c1cf;font-size:8px;font-style:normal;font-weight:500;line-height:1}.blue-chart-labels b{color:#2c3748;font-size:13px;font-weight:700;line-height:1}.blue-chart svg{width:100%;height:82px}.blue-axis{stroke:#d5e3f6;stroke-width:2}.blue-axis-dash,.blue-grid{stroke:#c7d3e4;stroke-width:1;stroke-dasharray:4 4}.blue-line{fill:none;stroke:#2f7cff;stroke-width:3}.blue-point{fill:#fff;stroke:#2f7cff;stroke-width:2}.vibration-summary{display:grid;grid-template-columns:1fr 1fr;height:47px;border-top:1px solid #f1f4f9}.vibration-summary div{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px}.vibration-summary span,.vibration-summary em{color:#8b94a4;font-style:normal}.vibration-summary strong{color:#111;font-size:21px}.right-bottom{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:0}.metric-panel,.alarm-panel{padding:12px 10px 8px}.card-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.card-title select,.card-title button{height:24px;padding:0 8px;color:#6b7380;font-size:11px;cursor:pointer;background:#f6f8fb;border:1px solid #edf1f7;border-radius:4px}.card-title button.active{color:#fff;background:#b2b6bd}.metric-item{height:calc((100% - 34px) / 3);min-height:72px;margin-bottom:7px;padding:8px 9px 5px;background:#f7fbf4;border-radius:5px}.metric-item header{display:flex;align-items:center;justify-content:space-between;color:#68736a;font-size:11px}.metric-item label:before{display:inline-block;width:7px;height:7px;margin-right:6px;content:"";background:var(--green);border-radius:50%;vertical-align:1px}.metric-item strong{color:var(--green);font-size:22px}.metric-body{display:grid;grid-template-columns:1fr 32px;gap:4px;height:calc(100% - 26px)}.metric-body svg{width:100%;height:100%}.green-line{fill:none;stroke:#6eac3b;stroke-width:2}.green-area{fill:#6eac3b14}.axis-text{display:flex;flex-direction:column;justify-content:space-between;color:#a0a7a1;font-size:9px}.alarm-list{height:calc(100% - 34px);padding-right:4px;overflow:auto}.alarm-list::-webkit-scrollbar{width:6px}.alarm-list::-webkit-scrollbar-thumb{background:#b4b9c0;border-radius:8px}.alarm-item{display:grid;grid-template-columns:70px 1fr;gap:8px;min-height:76px;margin-bottom:8px;padding:6px;cursor:pointer;background:#f8fafc;border-left:3px solid var(--alarm-color);border-radius:5px}.alarm-thumb{width:68px;height:56px;overflow:hidden;background:url(/assets/new-video-reference.jpg) center / cover;border-radius:3px;filter:grayscale(.6)}.alarm-content{min-width:0;color:#8b94a4;font-size:10px}.alarm-content h3{display:flex;gap:6px;align-items:center;margin:2px 0 7px;color:#343d4a;font-size:12px}.alarm-content h3 span{padding:2px 5px;color:var(--alarm-color);background:color-mix(in srgb,var(--alarm-color) 12%,#fff);border-radius:3px}.alarm-content p{margin:2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.alarm-item.clickable:hover{background:#eef3fa}.alarm-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:grid;place-items:center;background:#0000008c}.alarm-modal{width:640px;max-width:90vw;background:#fff;border-radius:12px;box-shadow:0 20px 60px #0000004d}.alarm-modal-close{position:absolute;top:12px;right:14px;width:28px;height:28px;color:#8a94a3;font-size:18px;cursor:pointer;background:#f4f7fb;border:0;border-radius:50%}.alarm-modal-close:hover{color:#343d4a;background:#e4eaf3}.alarm-modal-header{position:relative;padding:20px 24px 14px;border-bottom:1px solid #eef2f8;border-left:4px solid var(--alarm-color)}.alarm-modal-level{display:inline-block;padding:2px 6px;font-size:11px;font-weight:600;color:var(--alarm-color);background:color-mix(in srgb,var(--alarm-color) 12%,#fff);border-radius:3px;margin-right:8px}.alarm-modal-header h2{display:inline;margin:0;font-size:16px;color:#343d4a}.alarm-modal-body{padding:18px 24px 24px}.alarm-modal-info{margin-bottom:14px;color:#8b94a4;font-size:12px}.alarm-modal-info p{margin:3px 0}.alarm-modal-image{width:100%;border-radius:8px;overflow:hidden;background:#f4f7fb}.alarm-modal-image img{width:100%;display:block}.alarm-modal-placeholder{height:320px;display:grid;place-items:center;color:#b0b8c4;font-size:15px}.toast{position:fixed;left:50%;bottom:28px;z-index:20;padding:10px 16px;color:#fff;font-size:13px;background:#111a2aeb;border-radius:8px;transform:translate(-50%)}@media(max-width:1500px){.layout{grid-template-columns:206px minmax(720px,1fr) 540px}}