*{margin:0;padding:0;box-sizing:border-box}body{font-family:Microsoft YaHei,sans-serif;background:linear-gradient(135deg,#0a1428,#1e3a8a 50%,#1e40af);color:#fff;overflow:hidden}#app,body{height:100vh}#app{width:100vw}.dashboard{display:grid;grid-template-columns:1fr 2.5fr .8fr;grid-template-rows:auto 1fr;height:100vh;gap:4px;padding:6px}.header{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;backdrop-filter:blur(10px);border-radius:12px;padding:15px;animation:slideDown 1s ease-out;padding-bottom:0}.header-left{display:flex;flex-direction:column;align-items:flex-start}.header-center{flex:1;justify-content:center}.header-center,.header-right{display:flex;align-items:center}.header-right{gap:10px;font-size:1.5rem}.current-time{font-size:1.3rem;color:#60a5fa;text-shadow:0 0 10px rgba(96,165,250,.5);margin-bottom:3px}.current-date{font-size:1.1rem;color:#93c5fd;opacity:.8}.decoration-icons{animation:float 3s ease-in-out infinite}.decoration-icons span{margin:0 5px;opacity:.7;transition:opacity .3s ease}.decoration-icons span:hover{opacity:1}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.header h1{font-size:2rem;background:#fff;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 30px rgba(96,165,250,.5);animation:glow 2s ease-in-out infinite alternate}@keyframes glow{0%{text-shadow:0 0 20px rgba(96,165,250,.5)}to{text-shadow:0 0 30px rgba(96,165,250,.8)}}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.stats-panel{animation:slideInLeft 1s ease-out}.stats-panel,.user-panel{background:hsla(0,0%,100%,.03);backdrop-filter:blur(10px);border-radius:12px;padding:8px;border:1px solid hsla(0,0%,100%,.2)}.user-panel{animation:slideInUp 1s ease-out}.alert-panel{background:hsla(0,0%,100%,.03);backdrop-filter:blur(10px);border-radius:12px;padding:8px;border:1px solid hsla(0,0%,100%,.2);animation:slideInRight 1s ease-out}@keyframes slideInLeft{0%{transform:translateX(-100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes slideInUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInRight{0%{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}.panel-title{font-size:1.2rem;margin-bottom:15px;text-align:center;color:#60a5fa;text-shadow:0 0 10px rgba(96,165,250,.5);position:relative}.panel-title:before{content:"📊";margin-right:10px}.panel-title.users-title:before{content:"👥"}.panel-title.alerts-title:before{content:"🚨"}.stat-item{border-radius:8px;padding:12px;margin-bottom:12px;text-align:center;transition:transform .3s ease,box-shadow .3s ease;position:relative}.stat-item:before{position:absolute;top:10px;right:15px;font-size:1.5rem}.stat-item.total-users:before{content:"👥"}.stat-item.active-devices:before{content:"📱"}.stat-item:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(96,165,250,.4)}.stat-number{font-size:1.6rem;font-weight:700;color:#60a5fa;text-shadow:0 0 15px rgba(96,165,250,.7)}.stat-label{font-size:1rem;margin-top:5px;opacity:.8}.user-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;max-height:calc(100vh - 200px);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.user-grid::-webkit-scrollbar{display:none}.user-card{background:linear-gradient(135deg,hsla(0,0%,100%,.03),hsla(0,0%,100%,.05));border-radius:8px;padding:12px;transition:all .3s ease;animation:fadeInUp .6s ease-out;position:relative}.gender-icon{position:absolute;top:2px;right:8px;font-size:1.2rem;font-weight:700}.male-icon{color:#60a5fa}.female-icon{color:#f472b6}.user-card:hover{transform:scale(1.05);box-shadow:0 15px 40px rgba(96,165,250,.3)}@keyframes fadeInUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.user-name{font-size:1rem;font-weight:700;color:#fff;margin-bottom:6px;position:relative}.user-info{font-size:.8rem;opacity:.8;margin-bottom:4px}.alert-list{max-height:calc(100vh - 220px);overflow:hidden}.alert-item{border-radius:6px;padding:10px;margin-bottom:8px;animation:slideInRight .5s ease-out;transition:all .3s ease;position:relative}.alert-item:before{position:absolute;top:12px;right:15px;font-size:1.2rem}.alert-item:hover{transform:translateX(5px)}.alert-warning{border:1px solid #ff44442d!important;animation:alertBlink 1.5s infinite}@keyframes alertBlink{0%,50%{border-color:#ff44449d;box-shadow:0 0 5px rgba(255,68,68,.5)}25%,75%{border-color:#f88;box-shadow:0 0 10px rgba(255,68,68,.8)}}.alert-status{position:absolute;right:10px;top:6px;margin-top:0;text-align:right}.status-已告警{color:#f44;background:rgba(255,68,68,.1);border-radius:4px;border:1px solid #f44}.status-已告警,.status-待处理{font-weight:700;padding:2px 8px}.status-待处理{color:orange;background:rgba(255,165,0,.1);border-radius:4px;border:1px solid orange}.status-已处理{color:#0f8;font-weight:700;background:rgba(0,255,136,.1);padding:2px 8px;border-radius:4px;border:1px solid #0f8}.alert-time{font-size:.7rem;color:#93c5fd;margin-bottom:4px}.alert-device{font-weight:700;color:#60a5fa;margin-bottom:4px;font-size:.85rem}.alert-message{font-size:.8rem;margin-bottom:4px}.scrolling-list{animation:scroll 70s linear infinite}@keyframes scroll{0%{transform:translateY(0)}to{transform:translateY(-50%)}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:hsla(0,0%,100%,.1);border-radius:4px}::-webkit-scrollbar-thumb{background:linear-gradient(45deg,#60a5fa,#3b82f6);border-radius:4px}.gender-male{color:#60a5fa}.gender-male:before{content:"♂";margin-right:5px}.gender-female{color:#a78bfa}.gender-female:before{content:"♀";margin-right:5px}.device-online{color:#10b981}.device-offline{color:#f59e0b}.device-error{color:#ef4444}.device-离线{color:#8c8c8c}.membership-basic{color:#3b82f6}.membership-pearl{color:#e5e7eb}.membership-annual{color:#f59e0b}.membership-jade{color:#10b981}.chart-container{width:100%;height:auto}.dv-active-ring-chart{position:relative}.dv-active-ring-chart .active-ring-chart-container{width:100%;height:100%}.dv-active-ring-chart .active-ring-info{position:absolute;width:100%;height:100%;left:0;top:0;display:flex;flex-direction:column;justify-content:center;align-items:center}.dv-active-ring-chart .active-ring-info .dv-digital-flop{width:100px;height:30px}.dv-active-ring-chart .active-ring-info .active-ring-name{width:100px;height:30px;color:#fff;text-align:center;vertical-align:middle;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.dv-border-box-1{position:relative;width:100%;height:100%}.dv-border-box-1 .border{position:absolute;display:block}.dv-border-box-1 .right-top{right:0;transform:rotateY(180deg)}.dv-border-box-1 .left-bottom{bottom:0;transform:rotateX(180deg)}.dv-border-box-1 .right-bottom{right:0;bottom:0;transform:rotateX(180deg) rotateY(180deg)}.dv-border-box-1 .border-box-content,.dv-border-box-10{position:relative;width:100%;height:100%}.dv-border-box-10{border-radius:6px}.dv-border-box-10 .dv-border-svg-container{position:absolute;display:block}.dv-border-box-10 .right-top{right:0;transform:rotateY(180deg)}.dv-border-box-10 .left-bottom{bottom:0;transform:rotateX(180deg)}.dv-border-box-10 .right-bottom{right:0;bottom:0;transform:rotateX(180deg) rotateY(180deg)}.dv-border-box-10 .border-box-content,.dv-border-box-11{position:relative;width:100%;height:100%}.dv-border-box-11 .dv-border-svg-container{position:absolute;width:100%;height:100%;top:0;left:0}.dv-border-box-11 .dv-border-svg-container>polyline{fill:none;stroke-width:1}.dv-border-box-11 .border-box-content,.dv-border-box-12{position:relative;width:100%;height:100%}.dv-border-box-12 .dv-border-svg-container{position:absolute;width:100%;height:100%;top:0;left:0}.dv-border-box-12 .border-box-content,.dv-border-box-13{position:relative;width:100%;height:100%}.dv-border-box-13 .dv-border-svg-container{position:absolute;width:100%;height:100%;top:0;left:0}.dv-border-box-13 .border-box-content,.dv-border-box-2{position:relative;width:100%;height:100%}.dv-border-box-2 .dv-border-svg-container{position:absolute;width:100%;height:100%;top:0;left:0}.dv-border-box-2 .dv-border-svg-container>polyline{fill:none;stroke-width:1}.dv-border-box-2 .border-box-content,.dv-border-box-3{position:relative;width:100%;height:100%}.dv-border-box-3 .dv-border-svg-container{position:absolute;width:100%;height:100%;top:0;left:0}.dv-border-box-3 .dv-border-svg-container>polyline{fill:none}.dv-border-box-3 .dv-bb3-line1{stroke-width:3}.dv-border-box-3 .dv-bb3-line2{stroke-width:1}.dv-border-box-3 .border-box-content,.dv-border-box-4{position:relative;width:100%;height:100%}.dv-border-box-4 .dv-reverse{transform:rotate(180deg)}.dv-border-box-4 .dv-border-svg-container{position:absolute;width:100%;height:100%;top:0;left:0}.dv-border-box-4 .dv-border-svg-container>polyline{fill:none}.dv-border-box-4 .sw1{stroke-width:1}.dv-border-box-4 .sw3{stroke-width:3px;stroke-linecap:round}.dv-border-box-4 .dv-bb4-line-1,.dv-border-box-4 .dv-bb4-line-2{stroke-width:1}.dv-border-box-4 .dv-bb4-line-3,.dv-border-box-4 .dv-bb4-line-4{stroke-width:3px;stroke-linecap:round}.dv-border-box-4 .dv-bb4-line-5,.dv-border-box-4 .dv-bb4-line-6,.dv-border-box-4 .dv-bb4-line-7{stroke-width:1}.dv-border-box-4 .dv-bb4-line-8,.dv-border-box-4 .dv-bb4-line-9{stroke-width:3px;stroke-linecap:round}.dv-border-box-4 .dv-bb4-line-9{stroke-dasharray:100 250}.dv-border-box-4 .dv-bb4-line-10{stroke-width:1;stroke-dasharray:80 270}.dv-border-box-4 .border-box-content,.dv-border-box-5{position:relative;width:100%;height:100%}.dv-border-box-5 .dv-reverse{transform:rotate(180deg)}.dv-border-box-5 .dv-border-svg-container{position:absolute;top:0;left:0;width:100%;height:100%}.dv-border-box-5 .dv-border-svg-container>polyline{fill:none}.dv-border-box-5 .dv-bb5-line-1,.dv-border-box-5 .dv-bb5-line-2{stroke-width:1}.dv-border-box-5 .dv-bb5-line-3,.dv-border-box-5 .dv-bb5-line-6{stroke-width:5}.dv-border-box-5 .dv-bb5-line-4,.dv-border-box-5 .dv-bb5-line-5{stroke-width:2}.dv-border-box-5 .border-box-content,.dv-border-box-6{position:relative;width:100%;height:100%}.dv-border-box-6 .dv-border-svg-container{position:absolute;top:0;left:0;width:100%;height:100%}.dv-border-box-6 .dv-border-svg-container>polyline{fill:none;stroke-width:1}.dv-border-box-6 .border-box-content,.dv-border-box-7{position:relative;width:100%;height:100%}.dv-border-box-7 .dv-border-svg-container{position:absolute;top:0;left:0;width:100%;height:100%}.dv-border-box-7 .dv-border-svg-container>polyline{fill:none;stroke-linecap:round}.dv-border-box-7 .dv-bb7-line-width-2{stroke-width:2}.dv-border-box-7 .dv-bb7-line-width-5{stroke-width:5}.dv-border-box-7 .border-box-content,.dv-border-box-8{position:relative;width:100%;height:100%}.dv-border-box-8 .dv-border-svg-container{position:absolute;width:100%;height:100%;left:0;top:0}.dv-border-box-8 .border-box-content,.dv-border-box-9{position:relative;width:100%;height:100%}.dv-border-box-9 .dv-border-svg-container{position:absolute;width:100%;height:100%;left:0;top:0}.dv-border-box-9 .border-box-content{position:relative;width:100%;height:100%}.dv-capsule-chart{position:relative;display:flex;flex-direction:row;box-sizing:border-box;padding:10px;color:#fff}.dv-capsule-chart .label-column{display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;padding-right:10px;text-align:right;font-size:12px}.dv-capsule-chart .label-column div{height:20px;line-height:20px}.dv-capsule-chart .capsule-container{flex:1;display:flex;flex-direction:column;justify-content:space-between}.dv-capsule-chart .capsule-item{box-shadow:0 0 3px #999;height:10px;margin:5px 0;border-radius:5px}.dv-capsule-chart .capsule-item .capsule-item-column{position:relative;height:8px;margin-top:1px;border-radius:5px;transition:all .3s;display:flex;justify-content:flex-end;align-items:center}.dv-capsule-chart .capsule-item .capsule-item-column .capsule-item-value{font-size:12px;transform:translateX(100%)}.dv-capsule-chart .unit-label{height:20px;font-size:12px;position:relative;display:flex;justify-content:space-between;align-items:center}.dv-capsule-chart .unit-text{text-align:right;display:flex;align-items:flex-end;font-size:12px;line-height:20px;margin-left:10px}.dv-charts-container{position:relative}.dv-charts-container,.dv-charts-container .charts-canvas-container,.dv-conical-column-chart{width:100%;height:100%}.dv-conical-column-chart text{text-anchor:middle}.dv-decoration-1{width:100%;height:100%}.dv-decoration-1 svg{transform-origin:left top}.dv-decoration-10,.dv-decoration-11{width:100%;height:100%;display:flex}.dv-decoration-11{position:relative}.dv-decoration-11 .decoration-content{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.dv-decoration-12{position:relative;width:100%;height:100%;display:flex}.dv-decoration-12 .decoration-content{position:absolute;top:0;left:0}.dv-decoration-12 .decoration-content,.dv-decoration-2{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.dv-decoration-3{width:100%;height:100%}.dv-decoration-3 svg{transform-origin:left top}.dv-decoration-4{position:relative;width:100%;height:100%}.dv-decoration-4 .container{display:flex;overflow:hidden;position:absolute;flex:1}.dv-decoration-4 .normal{animation:ani-height ease-in-out infinite;left:50%;margin-left:-2px}.dv-decoration-4 .reverse{animation:ani-width ease-in-out infinite;top:50%;margin-top:-2px}@keyframes ani-height{0%{height:0}70%{height:100%}to{height:100%}}@keyframes ani-width{0%{width:0}70%{width:100%}to{width:100%}}.dv-decoration-5,.dv-decoration-6{width:100%;height:100%}.dv-decoration-6 svg{transform-origin:left top}.dv-decoration-7{justify-content:center;align-items:center}.dv-decoration-7,.dv-decoration-8,.dv-decoration-9{display:flex;width:100%;height:100%}.dv-decoration-9{position:relative;align-items:center;justify-content:center}.dv-decoration-9 svg{position:absolute;left:0;top:0;transform-origin:left top}.dv-digital-flop canvas{width:100%;height:100%}.dv-flyline-chart{display:flex;flex-direction:column;background-size:100% 100%}.dv-flyline-chart polyline{transition:all .3s}.dv-flyline-chart text{text-anchor:middle;dominant-baseline:middle}.dv-flyline-chart-enhanced{display:flex;flex-direction:column;background-size:100% 100%}.dv-flyline-chart-enhanced text{text-anchor:middle;dominant-baseline:middle}#dv-full-screen-container{position:fixed;top:0;left:0;overflow:hidden;transform-origin:left top;z-index:999}.dv-loading{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.dv-loading .loading-tip{font-size:15px}.dv-percent-pond{position:relative;display:flex;flex-direction:column}.dv-percent-pond svg{position:absolute;left:0;top:0;width:100%;height:100%}.dv-percent-pond polyline{transition:all .3s}.dv-percent-pond text{font-size:25px;font-weight:700;text-anchor:middle;dominant-baseline:middle}.dv-scroll-board{position:relative;width:100%;height:100%;color:#fff}.dv-scroll-board .text{padding:0 10px;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dv-scroll-board .header{display:flex;flex-direction:row;font-size:15px}.dv-scroll-board .header .header-item{padding:0 10px;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .3s}.dv-scroll-board .rows{overflow:hidden}.dv-scroll-board .rows .row-item{display:flex;font-size:14px;transition:all .3s}.dv-scroll-board .rows .ceil{padding:0 10px;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dv-scroll-board .rows .index{border-radius:3px;padding:0 3px}.dv-scroll-ranking-board{width:100%;height:100%;color:#fff;overflow:hidden}.dv-scroll-ranking-board .row-item{transition:all .3s;display:flex;flex-direction:column;justify-content:center;overflow:hidden}.dv-scroll-ranking-board .ranking-info{display:flex;width:100%;font-size:13px}.dv-scroll-ranking-board .ranking-info .rank{width:40px;color:#1370fb}.dv-scroll-ranking-board .ranking-info .info-name{flex:1}.dv-scroll-ranking-board .ranking-column{border-bottom:2px solid rgba(19,112,251,.5);margin-top:5px}.dv-scroll-ranking-board .ranking-column .inside-column{position:relative;height:6px;background-color:#1370fb;margin-bottom:2px;border-radius:1px;overflow:hidden}.dv-scroll-ranking-board .ranking-column .shine{position:absolute;left:0;top:2px;height:2px;width:50px;transform:translateX(-100%);background:radial-gradient(#28f8ff 5%,transparent 80%);animation:shine 3s ease-in-out infinite alternate}@keyframes shine{80%{left:0;transform:translateX(-100%)}to{left:100%;transform:translateX(0)}}.dv-water-pond-level{position:relative}.dv-water-pond-level svg{position:absolute;width:100%;height:100%;top:0;left:0}.dv-water-pond-level text{font-size:25px;font-weight:700;text-anchor:middle;dominant-baseline:middle}.dv-water-pond-level ellipse,.dv-water-pond-level rect{fill:none;stroke-width:3}.dv-water-pond-level canvas{margin-top:8px;margin-left:8px;width:calc(100% - 16px);height:calc(100% - 16px);box-sizing:border-box}