.monitor-container{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:#060b1e;background-image:radial-gradient(ellipse 120% 80% at 50% 0%,rgba(6,44,105,.35) 0%,transparent 60%),radial-gradient(ellipse 80% 60% at 80% 100%,rgba(0,80,160,.12) 0%,transparent 50%);color:#d0e4ff;font-family:-apple-system,PingFang SC,Microsoft YaHei,sans-serif;display:flex;flex-direction:column;overflow:hidden;-webkit-user-select:none;user-select:none}.monitor-loading{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#060b1e;color:#4a9eff;font-size:16px}.monitor-header{flex-shrink:0;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:linear-gradient(180deg,#0a1c46f2,#060b1ecc);border-bottom:1px solid rgba(74,158,255,.2);position:relative}.monitor-header:after{content:"";position:absolute;bottom:-1px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(74,158,255,.6),rgba(0,212,255,.8),rgba(74,158,255,.6),transparent)}.header-left{display:flex;align-items:center;gap:16px}.header-right{display:flex;align-items:center;gap:20px}.header-title{margin:0;font-size:22px;font-weight:600;letter-spacing:4px;background:linear-gradient(135deg,#e0f0ff,#4a9eff,#00d4ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 30px rgba(74,158,255,.3)}.header-decoration{width:40px;height:2px;background:linear-gradient(90deg,rgba(74,158,255,.8),transparent);border-radius:1px}.header-time{font-size:14px;color:#a0c8ffcc;font-variant-numeric:tabular-nums;letter-spacing:1px}.header-btn{background:#4a9eff1a;border:1px solid rgba(74,158,255,.25);color:#4a9eff;font-size:16px;width:36px;height:36px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s}.header-btn:hover{background:#4a9eff33;border-color:#4a9eff80;box-shadow:0 0 12px #4a9eff4d}.monitor-kpi-row{flex-shrink:0;display:grid;grid-template-columns:repeat(8,1fr);gap:12px;padding:14px 24px}.kpi-card{background:linear-gradient(135deg,#0a193ce6,#060f28e6);border:1px solid rgba(74,158,255,.15);border-radius:8px;padding:12px 14px;display:flex;align-items:center;gap:10px;position:relative;overflow:hidden;transition:all .3s}.kpi-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(74,158,255,.5),transparent)}.kpi-card:hover{border-color:#4a9eff66;box-shadow:0 0 20px #4a9eff1a,inset 0 0 20px #4a9eff08;transform:translateY(-2px)}.kpi-icon{font-size:24px;opacity:.9;flex-shrink:0}.kpi-content{flex:1;min-width:0}.kpi-value{display:flex;align-items:baseline;gap:4px}.kpi-number{font-size:20px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;line-height:1.2}.kpi-suffix{font-size:11px;color:#a0c8ff99}.kpi-label{font-size:12px;color:#a0c8ffa6;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kpi-sub{font-size:11px;margin-top:1px}.kpi-sub.up{color:#52c41a}.kpi-sub.down{color:#ff4d4f}.monitor-charts-grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr auto;gap:12px;padding:0 24px 16px;min-height:0}.chart-panel{background:linear-gradient(180deg,#0a193cd9,#060f28e6);border:1px solid rgba(74,158,255,.12);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;position:relative}.chart-panel:before,.chart-panel:after{content:"";position:absolute;width:10px;height:10px;border-color:#4a9eff66;border-style:solid;z-index:1}.chart-panel:before{top:-1px;left:-1px;border-width:2px 0 0 2px;border-radius:8px 0 0}.chart-panel:after{bottom:-1px;right:-1px;border-width:0 2px 2px 0;border-radius:0 0 8px}.chart-span-2{grid-column:span 2}.chart-span-full{grid-column:1 / -1}.panel-header{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:10px 16px 0}.panel-dot{width:8px;height:8px;border-radius:50%;background:#4a9eff;box-shadow:0 0 8px #4a9eff99;animation:pulse-dot 2s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:.6}50%{opacity:1}}.panel-title{font-size:13px;font-weight:500;color:#c8e1ffe6;letter-spacing:1px}.panel-body{flex:1;padding:8px;min-height:0}@media(max-width:1600px){.monitor-kpi-row{grid-template-columns:repeat(4,1fr)}.monitor-charts-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:auto}.chart-span-2{grid-column:span 2}.chart-span-full{grid-column:1 / -1}}@media(max-width:1200px){.monitor-kpi-row{grid-template-columns:repeat(4,1fr)}.kpi-number{font-size:16px}.header-title{font-size:18px;letter-spacing:2px}}.monitor-container:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(74,158,255,.01) 3px,rgba(74,158,255,.01) 4px);pointer-events:none;z-index:0}.monitor-container>*{position:relative;z-index:1}.monitor-container ::-webkit-scrollbar{width:4px;height:4px}.monitor-container ::-webkit-scrollbar-thumb{background:#4a9eff4d;border-radius:2px}.monitor-container ::-webkit-scrollbar-track{background:transparent}