:root{--primary:#409eff;--primary-hover:#66b1ff;--bg:linear-gradient(#f0f2f5b3, #f0f2f580);--card-bg:#fff;--text-color:#303133;--sub-text:#606266;--border-radius:12px;--transition:.3s ease}*,:before,:after{box-sizing:border-box}*{margin:0;padding:0}html,body,#app{width:100%;max-width:100%;overflow-x:hidden}html{scrollbar-width:none;overflow-y:auto}html::-webkit-scrollbar{width:0;height:0}body{background:var(--bg);color:var(--text-color);font-family:Helvetica Neue,sans-serif}button,input{font:inherit}.main-content{z-index:1;background:0 0;flex:1;min-width:0;max-width:100%;padding:20px;position:relative;overflow:hidden auto}#controls{background:#fff;border-radius:8px;flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0;padding:12px 16px;display:flex;box-shadow:0 2px 8px #0000000d}#controls button,.refresh-btn{background:var(--primary);color:#fff;cursor:pointer;transition:background var(--transition), transform .2s;border:none;border-radius:999px;padding:8px 14px}#controls button:hover,.refresh-btn:hover{background:var(--primary-hover);transform:translateY(-1px)}#controls input[type=text]{border:1px solid #dcdfe6;border-radius:4px;width:160px;padding:6px 10px}#deviceContainer{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));align-items:stretch;gap:20px;display:grid}#deviceContainer>*{min-width:0;height:100%}.device-meta{color:var(--sub-text);margin-bottom:8px;font-size:14px}.section-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.empty-block{color:var(--sub-text);background:#fff;border-radius:12px;padding:24px}.btn-primary,.btn-secondary,.btn-danger{cursor:pointer;border:none;border-radius:10px;padding:8px 14px}.btn-primary{color:#fff;background:#409eff}.btn-secondary{color:#303133;background:#f2f3f5}.btn-danger{color:#fff;background:#f56c6c}.settings-card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 4px 12px #0000000f}@media (width<=768px){.settings-card{border-radius:14px;padding:12px 14px}}.settings-title{margin-bottom:16px;font-size:20px}.form-row{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px;display:flex}.form-row label{color:#606266;min-width:90px}.date-input{border:1px solid #dcdfe6;border-radius:8px;min-width:180px;padding:8px 10px}.selector-box{flex-wrap:wrap;align-items:stretch;gap:12px;display:flex}.selector-box>*{min-height:40px}.selector-box .date-input,.selector-box .btn-primary{min-width:160px}.flow-page{gap:20px;display:grid}.chart-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;display:grid}@media (width<=1279px){.chart-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.chart-card,.info-card{background:#ffffffad;border:1px solid #ffffffb8;border-radius:16px;min-height:320px;padding:18px;box-shadow:0 4px 16px #0f172a0f,0 1px #fff9}.card-title{color:#1e293b;letter-spacing:-.01em;margin-bottom:14px;font-size:17px;font-weight:700}.chart-canvas-wrap{box-sizing:border-box;background:#f8fafc99;border-radius:12px;width:100%;height:240px;padding:8px;position:relative}.info-card p{color:#64748b;border-bottom:1px solid #e2e8f099;justify-content:space-between;align-items:center;margin:0;padding:10px 0;font-size:14px;display:flex}.info-card p:last-child{border-bottom:none}.info-card strong{color:#1e293b;font-size:16px;font-weight:700}body{background:#f5f7fb;margin:0;font-family:Arial,sans-serif}button{cursor:pointer}body:has(.app-container.night-mode) input[type=range]{accent-color:#60a5fa}body:has(.app-container.night-mode) input[type=range]::-webkit-slider-runnable-track{background:#1e293beb;border:1px solid #94a3b838;border-radius:999px;height:6px}body:has(.app-container.night-mode) input[type=range]::-webkit-slider-thumb{background:#60a5fa;border:2px solid #bfdbfef2;border-radius:50%;width:18px;height:18px;margin-top:-7px;box-shadow:0 0 0 4px #2563eb38}body:has(.app-container.night-mode) input[type=range]::-moz-range-track{background:#1e293beb;border:1px solid #94a3b838;border-radius:999px;height:6px}body:has(.app-container.night-mode) input[type=range]::-moz-range-thumb{background:#60a5fa;border:2px solid #bfdbfef2;border-radius:50%;width:18px;height:18px;box-shadow:0 0 0 4px #2563eb38}body:has(.app-container.night-mode) input[type=range]:disabled{opacity:.48}.error-text{color:#e74c3c;margin:0}.dashboard-page{padding:24px}@media (width<=768px){#deviceContainer{grid-template-columns:1fr;align-items:start;gap:10px}#deviceContainer>*{height:auto}.chart-grid{grid-template-columns:1fr;gap:12px}.chart-card,.info-card{border-radius:16px;min-height:0;padding:14px 16px}.card-title{margin-bottom:10px;font-size:15px;font-weight:700}.section-header{margin-bottom:10px}.section-header h2{font-size:18px}.flow-page{gap:12px}.chart-canvas-wrap{border-radius:10px;height:200px;padding:6px}}.login-beam-transition[data-v-5fee8cd7]{--lamp-x:50%;--lamp-y:10%;--light-x:50%;--light-y:54%;--lamp-angle:0deg;--beam-gradient-angle:180deg;--transition-cover:#ffefcd;z-index:100000;pointer-events:auto;contain:strict;position:fixed;inset:0;overflow:hidden}.beam-aperture[data-v-5fee8cd7],.swap-shield[data-v-5fee8cd7],.route-cover[data-v-5fee8cd7],.reveal-panel[data-v-5fee8cd7],.lamp-snapshot[data-v-5fee8cd7]{pointer-events:none;position:absolute}.beam-aperture[data-v-5fee8cd7]{z-index:4;clip-path:polygon(var(--beam-start-1-x) var(--beam-start-1-y), var(--beam-start-2-x) var(--beam-start-2-y), var(--beam-start-3-x) var(--beam-start-3-y));background:linear-gradient(var(--beam-gradient-angle), #fff8e8, #ffe0a4 42%, var(--transition-cover) 100%);opacity:.08;will-change:clip-path, opacity;animation:1.1s both login-beam-fan-open-5fee8cd7,1.1s linear both login-beam-brightness-5fee8cd7;inset:0}.lamp-snapshot[data-v-5fee8cd7]{left:var(--lamp-x);top:var(--lamp-y);z-index:5;width:88px;height:112px;transform:translate(-50%, -35%) rotate(var(--lamp-angle));transform-origin:50% 35%;animation:1.1s ease-out both login-lamp-release-5fee8cd7}.lamp-snapshot>span[data-v-5fee8cd7]{position:absolute}.lamp-adapter[data-v-5fee8cd7]{background:linear-gradient(90deg,#080b0f,#343a41 48%,#0d1014);border-radius:4px;width:51.4px;height:13.3px;top:15.4px;left:18.3px;box-shadow:inset 0 1px #ffffff1a,0 6px 10px #0000004d}.lamp-joint[data-v-5fee8cd7]{background:linear-gradient(90deg,#0d1116,#5d646b 50%,#11161c);border-radius:5px;width:15.2px;height:17.1px;top:25.9px;left:36.4px;box-shadow:inset 0 1px #ffffff1a}.lamp-barrel[data-v-5fee8cd7]{background:linear-gradient(90deg,#07090c,#252b31 28%,#50575e 48%,#1a1f25 70%,#07090c);border-radius:18px 18px 24px 24px/10px 10px 15px 15px;width:78.1px;height:41.9px;top:34.4px;left:5px;box-shadow:inset 0 2px #ffffff1a,0 14px 24px #00000061}.lamp-heat-ring[data-v-5fee8cd7]{z-index:1;background:linear-gradient(90deg,#0b0e12,#4b5259 46%,#11161b);border-radius:50%;width:75.7px;height:2.4px;left:6.1px;box-shadow:0 1px #ffffff0f,0 2px 3px #00000073}.lamp-heat-ring--one[data-v-5fee8cd7]{top:39px}.lamp-heat-ring--two[data-v-5fee8cd7]{top:47.5px}.lamp-bezel[data-v-5fee8cd7]{z-index:2;background:linear-gradient(90deg,#07090c,#252a30 46%,#080a0d);border-radius:50%;width:88px;height:8px;top:72.3px;left:0;box-shadow:inset 0 1px #ffffff17,0 5px 10px #0000006b}.lamp-lens[data-v-5fee8cd7]{z-index:3;background:radial-gradient(#fff9e9 0 18%,#ffc77e 31%,#6a472f 53%,#07090c 72%);border-radius:50%;width:68.6px;height:9.5px;top:71.1px;left:9.7px;box-shadow:0 0 22px #ffb36b8f,inset 0 0 8px #0000009e}.swap-shield[data-v-5fee8cd7],.reveal-panel[data-v-5fee8cd7]{background:var(--transition-cover)}.swap-shield[data-v-5fee8cd7]{z-index:2;opacity:0;animation:1.1s linear both login-swap-shield-5fee8cd7;inset:0}.route-cover[data-v-5fee8cd7]{z-index:1;opacity:0;animation:1.1s linear both login-curtain-handoff-5fee8cd7;inset:0}.reveal-panel[data-v-5fee8cd7]{--edge-softness:clamp(10px, 1.4vmin, 18px);z-index:1;opacity:1}.reveal-panel[data-v-5fee8cd7]:after{content:"";pointer-events:none;position:absolute}.reveal-panel--top[data-v-5fee8cd7]{height:calc(var(--light-y) + 1px);will-change:height, opacity;animation:1.1s linear both login-dashboard-open-top-5fee8cd7;inset:0 0 auto}.reveal-panel--top[data-v-5fee8cd7]:after{height:var(--edge-softness);background:linear-gradient(#ffefcdb8,#0000);top:100%;left:0;right:0}.reveal-panel--bottom[data-v-5fee8cd7]{height:calc(100% - var(--light-y) + 1px);will-change:height, opacity;animation:1.1s linear both login-dashboard-open-bottom-5fee8cd7;inset:auto 0 0}.reveal-panel--bottom[data-v-5fee8cd7]:after{height:var(--edge-softness);background:linear-gradient(#0000,#ffefcdb8);bottom:100%;left:0;right:0}.reveal-panel--left[data-v-5fee8cd7]{width:calc(var(--light-x) + 1px);will-change:width, opacity;animation:1.1s linear both login-dashboard-open-left-5fee8cd7;inset:0 auto 0 0}.reveal-panel--left[data-v-5fee8cd7]:after{width:var(--edge-softness);background:linear-gradient(90deg,#ffefcdb8,#0000);top:0;bottom:0;left:100%}.reveal-panel--right[data-v-5fee8cd7]{width:calc(100% - var(--light-x) + 1px);will-change:width, opacity;animation:1.1s linear both login-dashboard-open-right-5fee8cd7;inset:0 0 0 auto}.reveal-panel--right[data-v-5fee8cd7]:after{width:var(--edge-softness);background:linear-gradient(270deg,#ffefcdb8,#0000);top:0;bottom:0;right:100%}.is-fade .beam-aperture[data-v-5fee8cd7],.is-fade .lamp-snapshot[data-v-5fee8cd7],.is-fade .route-cover[data-v-5fee8cd7]{display:none}.is-fade .swap-shield[data-v-5fee8cd7]{animation:1.1s both login-route-fade-5fee8cd7}@keyframes login-beam-fan-open-5fee8cd7{0%{clip-path:polygon(var(--beam-start-1-x) var(--beam-start-1-y), var(--beam-start-2-x) var(--beam-start-2-y), var(--beam-start-3-x) var(--beam-start-3-y));animation-timing-function:cubic-bezier(.24,.02,.14,1)}56%,to{clip-path:polygon(var(--beam-end-1-x) var(--beam-end-1-y), var(--beam-end-2-x) var(--beam-end-2-y), var(--beam-end-3-x) var(--beam-end-3-y))}}@keyframes login-beam-brightness-5fee8cd7{0%{opacity:.08}16%{opacity:.18}40%{opacity:.52}56%,64%{opacity:1}68%,to{opacity:0}}@keyframes login-swap-shield-5fee8cd7{0%,52%{opacity:0}56%,64%{opacity:1}68%,to{opacity:0}}@keyframes login-lamp-release-5fee8cd7{0%,10%{opacity:1;transform:translate(-50%, -35%) rotate(var(--lamp-angle))}to{opacity:0;transform:translate(-50%, calc(-35% - 300px)) rotate(var(--lamp-angle))}}@keyframes login-curtain-handoff-5fee8cd7{0%,55%{opacity:0}56%,to{opacity:1}}@keyframes login-dashboard-open-top-5fee8cd7{0%,64%{height:calc(var(--light-y) + 1px);opacity:1}94%,to{opacity:0;height:0}}@keyframes login-dashboard-open-bottom-5fee8cd7{0%,64%{height:calc(100% - var(--light-y) + 1px);opacity:1}94%,to{opacity:0;height:0}}@keyframes login-dashboard-open-left-5fee8cd7{0%,64%{width:calc(var(--light-x) + 1px);opacity:1}94%,to{opacity:0;width:0}}@keyframes login-dashboard-open-right-5fee8cd7{0%,64%{width:calc(100% - var(--light-x) + 1px);opacity:1}94%,to{opacity:0;width:0}}@keyframes login-route-fade-5fee8cd7{0%{opacity:0}16%{opacity:.18}40%{opacity:.52}56%,64%{opacity:1}to{opacity:0}}@media (width<=760px){.lamp-snapshot[data-v-5fee8cd7]{transform:translate(-50%, -35%) rotate(var(--lamp-angle)) scale(.78)}}.toast-container{z-index:99999;pointer-events:none;flex-direction:column;align-items:center;gap:10px;max-width:calc(100vw - 32px);display:flex;position:fixed;top:24px;left:50%;transform:translate(-50%)}.toast-item{pointer-events:auto;border:1px solid #0000;border-radius:14px;align-items:center;gap:10px;max-width:420px;padding:10px 18px;font-size:14px;font-weight:700;line-height:1.4;display:flex;box-shadow:0 8px 24px #0f172a1a}.toast-icon{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:13px;font-weight:900;line-height:1;display:inline-flex}.toast-text{min-width:0}.toast-item.success{color:#15803d;background:#f0fdf4;border-color:#bbf7d0}.toast-item.success .toast-icon{color:#fff;background:#22c55e}.toast-item.error{color:#b91c1c;background:#fff5f5;border-color:#fecaca}.toast-item.error .toast-icon{color:#fff;background:#ef4444}.toast-enter-active{transition:all .3s cubic-bezier(.22,1,.36,1)}.toast-leave-active{transition:all .25s ease-in}.toast-enter-from{opacity:0;transform:translateY(-16px)}.toast-leave-to{opacity:0;transform:translateY(-12px)}@media (width<=768px){.toast-container{top:calc(env(safe-area-inset-top,0px) + 88px);align-items:stretch;gap:8px;max-width:none;left:16px;right:16px;transform:none}.toast-item{border-radius:12px;width:100%;max-width:none;padding:11px 16px;font-size:13px}}.shake{animation:.4s both shakeX}@keyframes shakeX{0%,to{transform:translate(0)}10%{transform:translate(-4px)}30%{transform:translate(4px)}50%{transform:translate(-4px)}70%{transform:translate(4px)}90%{transform:translate(-2px)}}