:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:20rem;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:.5rem;border:.0625rem solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:.25rem auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.app-container{width:100%;height:min(100vw * (1080 / 1950),100vh);margin:0 auto;padding:1.25rem;background:url(./bj.png) no-repeat center center fixed;background-size:cover;overflow-x:hidden;aspect-ratio:1950 / 1080;position:relative}*{box-sizing:border-box;transition:all .3s ease}.device-card-body{flex:1;display:flex;flex-direction:column}.device-metrics-container{flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;align-items:stretch}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:.9375rem;border-bottom:.0625rem solid #2d3748}.header .config-btna{width:8.625rem;height:2.3125rem}.title{font-size:1.5rem;font-weight:700;-webkit-background-clip:text;background-clip:text;text-shadow:0 0 .625rem rgba(96,165,250,.5)}.config-btn{padding:.5rem 1rem;background:linear-gradient(135deg,#3182ce,#2b6cb0);border:.0625rem solid #4299e1;border-radius:.25rem;color:#fff;cursor:pointer;transition:all .3s ease}.filter-title{background:url(/wuiii.png) no-repeat center center;background-size:cover;padding:.625rem 1.25rem;color:#fff;font-weight:700;margin-bottom:.9375rem;text-align:center}.filter-section{display:flex;flex-wrap:wrap;gap:1.25rem;margin-bottom:1.25rem}.filter-group{display:flex;flex-direction:column;gap:.3125rem}.filter-group label{font-size:.875rem;color:#fff}.filter-select,.filter-input{padding:.625rem 1rem;background:linear-gradient(91.8deg,#01285f,#021f47);border:.0625rem solid rgba(81,107,181,1);border-radius:.375rem;color:#fff;font-size:.875rem;transition:all .3s ease;width:100%;box-sizing:border-box;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.75rem' height='0.75rem' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M6 9L1 4H11L6 9Z' fill='%2360a5fa'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;cursor:pointer}.filter-select:hover,.filter-input:hover{border-color:#60a5fa;box-shadow:0 0 .625rem #60a5fa33}.filter-select:focus,.filter-input:focus{outline:none;border-color:#60a5fa;box-shadow:0 0 .9375rem #60a5fa66;transform:translateY(-.0625rem)}.filter-select option{background:#1a1f3a;color:#fff;padding:.625rem}.filter-select option:checked{background:#3182ce;color:#fff}.filter-select option:hover{background:#4299e1;color:#fff}.status-filter{display:flex;flex-direction:column;align-items:flex-start}.status-option input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent!important;border:.0625rem solid #4a5568!important;border-radius:.1875rem!important;width:.75rem!important;height:.75rem!important;cursor:pointer!important;outline:none!important;transition:all .3s ease!important;position:relative!important;margin:0!important;padding:0!important}.status-option input[type=checkbox]:checked{background:#3182cecc!important;border-color:#3182ce!important;box-shadow:0 0 .3125rem #3182ce80!important}.status-option input[type=checkbox]:checked:after{content:"✓"!important;position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;color:#fff!important;font-size:.625rem!important;font-weight:700!important}.status-option input[type=checkbox]:hover{border-color:#60a5fa!important;box-shadow:0 0 .3125rem #60a5fa4d!important;background:#60a5fa1a!important}.status-dot{width:.625rem;height:.625rem;border-radius:50%}.status-dot.online{background:#38a169;box-shadow:0 0 .625rem #38a169b3}.status-dot.warning{background:#ed8936;box-shadow:0 0 .625rem #ed8936b3}.status-dot.error{background:#e53e3e;box-shadow:0 0 .625rem #e53e3eb3}.status-dot.offline{background:#718096;box-shadow:0 0 .625rem #71809680}.filter-actions{display:flex;gap:.625rem;align-items:flex-end}.reset-btn,.filter-btn{padding:.5rem 1rem;border-radius:.25rem;cursor:pointer;font-size:.875rem;transition:all .3s ease}.reset-btn{background:#2d3748cc;border:.0625rem solid #4a5568;color:#a0aec0}.filter-btn{background:linear-gradient(135deg,#3182ce,#2b6cb0);border:.0625rem solid #4299e1;color:#fff}.filter-btn:focus{outline:none;border-color:#60a5fa;box-shadow:0 0 .9375rem #60a5fa66;transform:translateY(-.0625rem)}.reset-btn:hover{background:#374151cc}.device-count{margin-bottom:1.25rem;font-size:.875rem;color:#a0aec0;padding:.625rem 0}.device-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-bottom:1.25rem;background:linear-gradient(180deg,#1fc6ff00,#006cff29);border:.125rem solid rgba(31,198,255,.24);-webkit-backdrop-filter:blur(.5rem);backdrop-filter:blur(.5rem);padding:1.875rem 1rem}.device-card{min-height:15.625rem;display:flex;flex-direction:column}.device-card-header{height:1.875rem;display:flex;padding-right:.625rem;border-top:.0625rem solid rgba(10,132,255,1);border-bottom:.0625rem solid rgba(166,166,166,1);border-left:none;border-right:none;background:linear-gradient(90deg,#04316e,#04316e00)}.device-card-body{padding:1.25rem;background:linear-gradient(180deg,#1fc6ff00,#006cff29);border:.0625rem solid rgba(31,198,255,.24);-webkit-backdrop-filter:blur(.5rem);backdrop-filter:blur(.5rem);margin-top:.625rem}.device-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.9375rem;padding-bottom:.625rem;border-bottom:.0625rem solid #2d3748}.device-name{font-weight:700;font-size:1rem;color:#60a5fa}.device-status{padding:.25rem .75rem .25rem 0;border-radius:.75rem;font-size:.75rem;font-weight:700}.device-status.在线{background:#38a16933;color:#38a169;border:.0625rem solid #38a169}.device-status.告警{background:#ed893633;color:#ed8936;border:.0625rem solid #ed8936}.device-status.异常{background:#e53e3e33;color:#e53e3e;border:.0625rem solid #e53e3e}.device-status.离线{background:#71809633;color:#718096;border:.0625rem solid #718096}.device-more{color:#a0aec0;cursor:pointer;font-size:1.125rem}.device-info{display:flex;flex-direction:column;gap:.625rem;margin-bottom:.9375rem}.info-item{display:flex;justify-content:space-between;align-items:center}.info-item label{font-size:.875rem;color:#a0aec0}.info-item span{font-size:.875rem;color:#fff}.detail-btn{padding:.375rem .75rem;background:linear-gradient(135deg,#3182ce,#2b6cb0);border:.0625rem solid #4299e1;border-radius:.25rem;color:#fff;font-size:.75rem;cursor:pointer;transition:all .3s ease;align-self:flex-end}.detail-btn:hover{background:linear-gradient(135deg,#4299e1,#3182ce);box-shadow:0 0 .625rem #4299e180}.device-metrics-container{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;width:100%}.device-metric-item{padding:.375rem .625rem;display:flex;align-items:center;width:100%;justify-content:space-between;background:#032041}.device-metric-item.displacement{background:linear-gradient(90deg,#3182ce33,#2b6cb01a);border:.0625rem solid rgba(49,130,206,.4)}.device-metric-item.temperature{background:linear-gradient(90deg,#e53e3e33,#c530301a);border:.0625rem solid rgba(229,62,62,.4)}.device-metric-item.vibration{background:linear-gradient(90deg,#38a16933,#2f855a1a);border:.0625rem solid rgba(56,161,105,.4)}.device-metric-item.strain{background:linear-gradient(90deg,#805ad533,#6b46c11a);border:.0625rem solid rgba(128,90,213,.4)}.metric-left{display:flex;align-items:center;gap:.75rem}.metric-icon-a{width:1.5rem;height:1.5rem}.metric-icon{width:1.75rem;height:1.75rem;border-radius:.25rem;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.875rem;font-weight:700}.metric-icon.displacement{background:#3182cecc}.metric-icon.temperature{background:#e53e3ecc}.metric-icon.vibration{background:#38a169cc}.metric-icon.strain{background:#805ad5cc}.metric-name{font-size:.75rem;font-weight:500}.metric-name.displacement{color:#3182ce}.metric-name.temperature{color:#e53e3e}.metric-name.vibration{color:#38a169}.metric-name.strain{color:#805ad5}.metric-value{font-size:.75rem;font-weight:700;text-wrap:nowrap}.metric-value.displacement{color:#3182ce}.metric-value.temperature{color:#e53e3e}.metric-value.vibration{color:#38a169}.metric-value.strain{color:#805ad5}.pagination{display:flex;justify-content:space-between;align-items:center;border-radius:.5rem}@media(max-width:48rem){.status-filter{flex-direction:column;align-items:flex-start}.status-options{flex-wrap:wrap}.device-grid{grid-template-columns:1fr}.pagination{flex-direction:column;gap:.9375rem;align-items:stretch}.page-nav{justify-content:center}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0a0e27;color:#fff}.app-container{width:100%;max-width:100%;margin:0 auto;padding:1.25rem;background:url(./bj.png) no-repeat center center fixed;background-size:cover;min-height:100vh;transform-origin:top left;transition:transform .3s ease}*{box-sizing:border-box}html,body{overflow-x:hidden;height:100%;width:100%;margin:0;padding:0}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:.9375rem;background-image:url(/Group.png);background-repeat:no-repeat;background-position:bottom;background-size:100% auto}.config-btn{padding:.5rem 1rem;background:linear-gradient(135deg,#3182ce,#2b6cb0);border:.0625rem solid #4299e1;border-radius:.25rem;color:#fff;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.3125rem}.config-btn:hover{background:linear-gradient(135deg,#4299e1,#3182ce);box-shadow:0 0 .9375rem #4299e180}.filter-section-wrapper{background:url(/wuh-33.png) no-repeat center center / 100% 100%;padding:.625rem 1.25rem;position:relative;margin-bottom:1.25rem;backdrop-filter:blur(.25rem);-webkit-backdrop-filter:blur(.5rem)}.filter-title{width:16.75rem;height:2rem;margin-top:.9375rem;margin-bottom:.9375rem;padding-left:1.875rem;display:flex;align-items:center;font-weight:700;color:#fff}.filter-section{display:flex;flex-wrap:wrap;gap:1.25rem;margin-bottom:1.25rem;margin-top:.9375rem}.filter-select,.filter-input{padding:.5rem .75rem;background:#2d3748cc;border:.0625rem solid #4a5568;border-radius:.25rem;color:#fff;font-size:.875rem;transition:all .3s ease;width:18.75rem;background:linear-gradient(91.8deg,#01285f,#021f47);border:.0625rem solid rgba(81,107,181,1)}.filter-select:focus,.filter-input:focus{outline:none;border-color:#60a5fa;box-shadow:0 0 .625rem #60a5fa4d}.status-options{display:flex;gap:.9375rem}.status-option{display:flex;align-items:center;gap:.3125rem;font-size:.875rem;cursor:pointer}.filter-actions{display:flex;gap:.625rem;align-items:flex-end;position:absolute;right:1.25rem;top:.9375rem}.reset-btn,.filter-btn{width:5rem;height:1.625rem;padding:0;border-radius:.25rem;cursor:pointer;font-size:.875rem;transition:all .3s ease;background-image:url(/button-bj.png);background-size:contain;background-position:center;background-repeat:no-repeat;border:none;color:#fff;display:flex;align-items:center;justify-content:center}.reset-btn{background-color:#2d3748cc;background-blend-mode:overlay}.filter-btn{background-color:#3182cecc;background-blend-mode:overlay}.reset-btn:hover{background-color:#374151cc;background-blend-mode:overlay}.filter-btn:hover{background-color:#4299e1cc;background-blend-mode:overlay;box-shadow:0 0 .9375rem #4299e180}.metric-icon{width:2.25rem;height:2.25rem;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;box-shadow:0 0 .625rem #0000004d;flex-shrink:0}.metric-icon.displacement{background:linear-gradient(135deg,#38a169,#2f855a)}.metric-icon.temperature{background:linear-gradient(135deg,#e53e3e,#c53030)}.metric-icon.vibration{background:linear-gradient(135deg,#ed8936,#dd6b20)}.metric-icon.strain{background:linear-gradient(135deg,#805ad5,#6b46c1)}.metric-content{flex:1;display:flex;flex-direction:column;gap:.125rem}.metric-label{font-size:.75rem;color:#a0aec0;text-transform:uppercase;letter-spacing:.03125rem}.temperature-value{color:#fc8181}.device-card-footer{padding:.75rem .9375rem;background:#1e293bcc;border-top:.0625rem solid #2d3748;display:flex;justify-content:flex-end}.detail-btn{padding:.375rem .75rem;background:linear-gradient(135deg,#3182ce,#2b6cb0);border:.0625rem solid #4299e1;border-radius:.25rem;color:#fff;font-size:.75rem;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.3125rem}.detail-btn:hover{background:linear-gradient(135deg,#4299e1,#3182ce);box-shadow:0 0 .625rem #4299e14d}.page-size{display:flex;align-items:center;gap:.625rem;font-size:.875rem;color:#a0aec0}.page-size select{padding:.375rem .625rem;background:#2d3748cc;border:.0625rem solid #4a5568;border-radius:.25rem;color:#fff;font-size:.875rem}.page-nav{display:flex;gap:.625rem}.page-btn{padding:.5rem .75rem;background:#2d3748cc;border:.0625rem solid #4a5568;border-radius:.25rem;color:#a0aec0;cursor:pointer;transition:all .3s ease;font-size:.875rem}.page-btn:hover{background:#374151cc;color:#fff}.page-btn.active{background:linear-gradient(135deg,#3182ce,#2b6cb0);border-color:#4299e1;color:#fff;box-shadow:0 0 .625rem #4299e14d}