.app-container[data-v-e51cdeb8]{background:var(--bg-primary);flex-direction:column;width:100%;height:100%;display:flex}.app-header[data-v-e51cdeb8]{border-bottom:1px solid var(--border-color);z-index:100;background:linear-gradient(#00d4ff26 0%,#0a1628f2 100%);flex-shrink:0;justify-content:space-between;align-items:center;height:60px;padding:0 24px;display:flex;position:relative}.menu-toggle[data-v-e51cdeb8]{color:var(--primary-color);cursor:pointer;background:0 0;border:none;margin-right:8px;padding:8px;font-size:24px;display:none}.header-left[data-v-e51cdeb8]{align-items:baseline;gap:16px;display:flex}.app-title[data-v-e51cdeb8]{background:linear-gradient(135deg,var(--primary-color),var(--accent-color));-webkit-text-fill-color:transparent;text-shadow:0 0 30px #00d4ff80;-webkit-background-clip:text;background-clip:text;font-size:24px;font-weight:700}.app-subtitle[data-v-e51cdeb8]{color:var(--text-muted);font-size:14px}.header-nav[data-v-e51cdeb8]{flex-wrap:wrap;justify-content:center;gap:4px;max-width:900px;display:flex}.nav-item[data-v-e51cdeb8]{color:var(--text-secondary);white-space:nowrap;border:1px solid #0000;border-radius:4px;padding:6px 10px;font-size:12px;text-decoration:none;transition:all .3s}.nav-item[data-v-e51cdeb8]:hover{color:var(--primary-color);background:#00d4ff1a}.nav-item.active[data-v-e51cdeb8]{color:var(--primary-color);border-color:var(--border-color);background:#00d4ff33}.header-right[data-v-e51cdeb8]{align-items:center;display:flex}.current-time[data-v-e51cdeb8]{font-family:var(--font-digital);color:var(--primary-color);font-size:16px}.app-main[data-v-e51cdeb8]{-webkit-overflow-scrolling:touch;flex:1;padding:16px;overflow:auto}.fade-enter-active[data-v-e51cdeb8],.fade-leave-active[data-v-e51cdeb8]{transition:opacity .3s}.fade-enter-from[data-v-e51cdeb8],.fade-leave-to[data-v-e51cdeb8]{opacity:0}@media (max-width:1200px){.header-nav[data-v-e51cdeb8]{max-width:600px}.app-subtitle[data-v-e51cdeb8]{display:none}}@media (max-width:768px){.app-header[data-v-e51cdeb8]{height:50px;padding:0 12px}.menu-toggle[data-v-e51cdeb8]{display:block}.header-left[data-v-e51cdeb8]{gap:8px}.app-title[data-v-e51cdeb8]{font-size:18px}.app-subtitle[data-v-e51cdeb8]{display:none}.header-nav[data-v-e51cdeb8]{z-index:99;background:#0a1628fa;flex-direction:column;gap:8px;max-width:none;padding:16px;transition:transform .3s;position:fixed;inset:50px 0 0;overflow-y:auto;transform:translate(-100%)}.header-nav.open[data-v-e51cdeb8]{transform:translate(0)}.nav-item[data-v-e51cdeb8]{border:1px solid var(--border-color);padding:12px 16px;font-size:14px}.header-right[data-v-e51cdeb8]{display:none}.current-time[data-v-e51cdeb8]{font-size:12px}.app-main[data-v-e51cdeb8]{padding:8px}}@media (max-width:480px){.app-title[data-v-e51cdeb8]{font-size:16px}.app-main[data-v-e51cdeb8]{padding:4px}}*{box-sizing:border-box;margin:0;padding:0}:root{--primary-color:#00d4ff;--secondary-color:#0080ff;--accent-color:#0f8;--warning-color:#fa0;--danger-color:#ff4757;--bg-primary:#0a1628;--bg-secondary:#0d2137;--bg-card:linear-gradient(180deg,#0d2137e6 0%,#0a1628f2 100%);--bg-card-hover:linear-gradient(180deg,#00d4ff1a 0%,#0a1628f2 100%);--border-color:#00d4ff4d;--border-glow:#00d4ff99;--text-primary:#fff;--text-secondary:#fffc;--text-muted:#ffffff80;--font-family:"PingFang SC","Microsoft YaHei",sans-serif;--font-digital:"DIN","Roboto Mono",monospace}html,body{width:100%;height:100%;font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);overflow:hidden}#app{width:100%;height:100%}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#0003;border-radius:3px}::-webkit-scrollbar-thumb{background:var(--primary-color);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--secondary-color)}.data-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;padding:16px;transition:all .3s;position:relative;overflow:hidden}.data-card:before{content:"";background:linear-gradient(90deg,transparent,var(--primary-color),transparent);height:2px;position:absolute;top:0;left:0;right:0}.data-card:hover{border-color:var(--border-glow);box-shadow:0 0 20px #00d4ff33}.card-title{color:var(--text-primary);align-items:center;gap:8px;margin-bottom:12px;font-size:16px;font-weight:600;display:flex}.card-title:before{content:"";background:var(--primary-color);border-radius:2px;width:4px;height:16px}.data-value{font-family:var(--font-digital);color:var(--primary-color);text-shadow:0 0 10px #00d4ff80;font-size:32px;font-weight:700}.data-value.warning{color:var(--warning-color);text-shadow:0 0 10px #ffaa0080}.data-value.danger{color:var(--danger-color);text-shadow:0 0 10px #ff475780}.data-value.success{color:var(--accent-color);text-shadow:0 0 10px #00ff8880}.data-unit{color:var(--text-muted);margin-left:4px;font-size:14px}.data-label{color:var(--text-secondary);margin-top:8px;font-size:14px}.trend-up{color:var(--accent-color)}.trend-down{color:var(--danger-color)}.btn{border:1px solid var(--primary-color);color:var(--primary-color);cursor:pointer;background:0 0;border-radius:4px;padding:8px 16px;font-size:14px;transition:all .3s}.btn:hover{background:#00d4ff33;box-shadow:0 0 10px #00d4ff4d}.btn-primary{background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:#fff;border:none}.btn-primary:hover{box-shadow:0 0 20px #00d4ff80}.tag{color:var(--primary-color);border:1px solid var(--border-color);background:#00d4ff33;border-radius:4px;padding:2px 8px;font-size:12px;display:inline-block}.tag.warning{color:var(--warning-color);background:#fa03;border-color:#ffaa004d}.tag.danger{color:var(--danger-color);background:#ff475733;border-color:#ff47574d}.tag.success{color:var(--accent-color);background:#0f83;border-color:#00ff884d}.grid-container{gap:16px;height:100%;display:grid}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes glow{0%,to{box-shadow:0 0 5px #00d4ff80}50%{box-shadow:0 0 20px #00d4ffcc}}.animate-pulse{animation:2s infinite pulse}.animate-glow{animation:2s infinite glow}.alert-red{animation:1s infinite glow-red;border-color:var(--danger-color)!important}@keyframes glow-red{0%,to{box-shadow:0 0 5px #ff475780}50%{box-shadow:0 0 20px #ff4757cc}}.alert-yellow{animation:1.5s infinite glow-yellow;border-color:var(--warning-color)!important}@keyframes glow-yellow{0%,to{box-shadow:0 0 5px #ffaa0080}50%{box-shadow:0 0 15px #fa0c}}.stats-row,.stats-row-2{grid-template-columns:repeat(8,1fr);gap:12px;margin-bottom:16px;display:grid}.stat-card{flex-direction:column;justify-content:center;min-height:80px;padding:12px 16px;display:flex}.stat-card .stat-label{color:var(--text-muted);margin-bottom:6px;font-size:12px}.stat-card .stat-value{font-family:var(--font-digital);color:var(--text-primary);font-size:24px;font-weight:700}.stat-card .stat-value.primary{color:var(--primary-color);text-shadow:0 0 10px #00d4ff80}.stat-card .stat-value.success{color:var(--accent-color);text-shadow:0 0 10px #00ff8880}.stat-card .stat-value.warning{color:var(--warning-color);text-shadow:0 0 10px #ffaa0080}.stat-card .stat-value.danger{color:var(--danger-color);text-shadow:0 0 10px #ff475780}.stat-card .stat-unit{color:var(--text-muted);margin-top:4px;font-size:12px}.stat-card .stat-trend{margin-top:4px;font-size:12px}.stat-card .stat-info{flex:1}.stat-card .stat-icon{margin-right:12px;font-size:24px}.stat-card-sm{align-items:center;min-height:60px;padding:10px 12px;display:flex}.stat-card-sm .stat-icon{flex-shrink:0;margin-right:10px;font-size:20px}.stat-card-sm .stat-info-sm{flex:1;min-width:0}.stat-card-sm .stat-value-sm{font-family:var(--font-digital);color:var(--text-primary);white-space:nowrap;font-size:18px;font-weight:700}.stat-card-sm .stat-value-sm.primary{color:var(--primary-color)}.stat-card-sm .stat-value-sm.success{color:var(--accent-color)}.stat-card-sm .stat-value-sm.warning{color:var(--warning-color)}.stat-card-sm .stat-value-sm.danger{color:var(--danger-color)}.stat-card-sm .stat-label-sm{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:11px;overflow:hidden}.mini-card{padding:10px 12px}.mini-metric{align-items:center;display:flex}.mini-metric .mini-icon{flex-shrink:0;margin-right:10px;font-size:20px}.mini-metric .mini-info{flex:1;min-width:0}.mini-metric .mini-value{font-family:var(--font-digital);color:var(--text-primary);font-size:18px;font-weight:700}.mini-metric .mini-value.success{color:var(--accent-color)}.mini-metric .mini-value.warning{color:var(--warning-color)}.mini-metric .mini-value.danger{color:var(--danger-color)}.mini-metric .mini-label{color:var(--text-muted);margin-top:2px;font-size:11px}.metrics-row{grid-template-columns:repeat(8,1fr);gap:12px;margin-bottom:16px;display:grid}@media (max-width:1600px){.stats-row,.stats-row-2,.metrics-row{grid-template-columns:repeat(4,1fr)}}@media (max-width:1200px){.stats-row,.stats-row-2,.metrics-row{grid-template-columns:repeat(3,1fr)}}@media (max-width:768px){.stats-row,.stats-row-2,.metrics-row{grid-template-columns:repeat(2,1fr);gap:8px}html,body{-webkit-overflow-scrolling:touch;overflow:auto}.data-card{padding:12px}.card-title{margin-bottom:8px;font-size:14px}.card-title:before{width:3px;height:14px}.data-value{font-size:24px}.data-unit,.data-label{font-size:12px}.stat-card{min-height:60px;padding:10px 12px}.stat-card .stat-value{font-size:18px}.stat-card .stat-label{font-size:10px}.stat-card .stat-icon{margin-right:8px;font-size:18px}.stat-card-sm{min-height:50px;padding:8px 10px}.stat-card-sm .stat-icon{margin-right:8px;font-size:16px}.stat-card-sm .stat-value-sm{font-size:14px}.stat-card-sm .stat-label-sm{font-size:9px}.btn{padding:6px 12px;font-size:12px}.tag{padding:2px 6px;font-size:10px}}@media (max-width:480px){.stats-row,.stats-row-2,.metrics-row{grid-template-columns:repeat(2,1fr);gap:6px}.data-card{padding:10px}.card-title{font-size:13px}.data-value{font-size:20px}.stat-card .stat-value{font-size:16px}.stat-card-sm .stat-value-sm{font-size:12px}}.mobile-scroll{-webkit-overflow-scrolling:touch;overflow-x:auto}@media (max-width:1200px){.stats-row,.stats-row-2{grid-template-columns:repeat(4,1fr)!important}.dashboard{grid-template-columns:1fr 1fr!important}}@media (max-width:768px){.stats-row,.stats-row-2{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}.dashboard{flex-direction:column!important;gap:12px!important;display:flex!important}.dashboard .left-panel,.dashboard .center-panel,.dashboard .right-panel{width:100%!important}.data-card{padding:12px!important}.card-title{font-size:13px!important}.stat-card{gap:8px!important;padding:12px!important}.stat-card .stat-icon,.stat-card .stat-value{font-size:20px!important}.stat-card .stat-label{font-size:10px!important}.stat-card-sm{padding:10px!important}.stat-value-sm{font-size:16px!important}.stat-label-sm{font-size:10px!important}.data-card .echart-container{min-height:200px!important}.alert-table,.drill-down-table,table{-webkit-overflow-scrolling:touch;display:block;overflow-x:auto}.alert-table th,.alert-table td{white-space:nowrap;padding:8px!important;font-size:11px!important}.rules-row{grid-template-columns:1fr!important}.filter-group{flex-wrap:wrap!important;gap:4px!important}.filter-btn{padding:4px 8px!important;font-size:11px!important}.drill-down-panel{width:95%!important;max-height:90vh!important;margin:16px!important}.drill-down-header{padding:12px 16px!important}.drill-down-header h3{font-size:16px!important}.drill-down-content{padding:12px!important}.drill-down-table th,.drill-down-table td{white-space:nowrap;padding:8px!important;font-size:11px!important}.metrics-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}.metric-item .metric-value{font-size:18px!important}.metric-item .metric-label{font-size:10px!important}.mini-card{padding:10px!important}.mini-value{font-size:16px!important}.mini-label{font-size:10px!important}.drill-hint{display:none!important}.btn{padding:8px 12px!important;font-size:12px!important}.btn-sm{padding:4px 8px!important;font-size:11px!important}}@media (max-width:480px){.stats-row,.stats-row-2{grid-template-columns:1fr 1fr!important}.stat-card .stat-value{font-size:18px!important}.stat-value-sm{font-size:14px!important}.data-card .echart-container{min-height:180px!important}.alert-table th,.alert-table td{padding:6px!important;font-size:10px!important}}@media (max-height:500px) and (orientation:landscape){.app-header{height:40px!important}.app-title{font-size:16px!important}.header-nav{top:40px!important}}
