:root{font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;color-scheme:dark;--cyan:#1cb9f4;--green:#05d8b3;--muted:#9bb4ce}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,select{cursor:pointer}button,a{transition:background .15s}button{border:1px solid #215574;background:#092540;color:#d9e9fa;border-radius:5px;padding:7px 13px}button:hover,a:hover{background:#124572}input,select{border:1px solid #21445f;background:#081e35;color:#dceafa;border-radius:5px;padding:8px 10px;min-width:0}input[type=checkbox]{accent-color:#119af5}a{color:inherit;text-decoration:none}small{font-size:12px}h1,h2,h3,p{margin:0}h2{font-size:18px;font-weight:600}.screen{background:#041326;color:#e8f3ff;background-image:linear-gradient(#0a224233 1px,transparent 1px),linear-gradient(90deg,#0a224233 1px,transparent 1px);background-size:32px 32px}#wall{padding:0 18px;min-height:100vh;display:flex;flex-direction:column}.wall-head{height:78px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #125075}.wall-head h1{font-size:30px;letter-spacing:3px;text-shadow:0 0 20px #42baff44}.brand{font-size:16px;color:#adc7df}.brand-icon{font-size:32px;color:#19b4f9;vertical-align:middle}.wall-head>div:last-child{font-size:13px;color:#b2c9e0}.demo{display:inline-block;margin-left:12px;border:1px solid #186b89;color:#4bdcfa;border-radius:4px;padding:4px 7px;font-size:11px}.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;padding:16px 0}.kpi{display:flex;align-items:center;gap:17px;padding:16px 20px;background:linear-gradient(125deg,#0c2d51,#071c31);border:1px solid #16729b;border-radius:6px;min-height:102px;box-shadow:inset 0 0 22px #04537a22}.kpi-symbol{font-size:35px;color:#22bbf3}.kpi span:not(.kpi-symbol){display:block;color:#b9d0e9;font-size:14px}.kpi strong{display:inline-block;font-size:33px;font-variant-numeric:tabular-nums;margin-top:4px}.kpi small{margin-left:7px;color:#37d8ea}.kpi:nth-child(3) strong{color:#05e1bc}.wall-grid{display:grid;grid-template-columns:23% 51% 1fr;gap:14px;flex:1;min-height:580px}.column{display:flex;flex-direction:column;gap:14px;min-width:0}.panel{background:linear-gradient(140deg,#09233eeb,#07172bed);border:1px solid #135d83;border-radius:6px;overflow:hidden;box-shadow:inset 0 0 30px #07396220}.panel h2{padding:15px 16px;border-bottom:1px solid #174569;position:relative}.panel h2:before{content:'';width:4px;height:17px;background:#20bff5;position:absolute;left:0;top:17px}.panel h2 small{float:right;font-weight:400;color:#90afc9;font-size:12px;margin-top:3px}.side .panel{flex:1}.donut-area{display:flex;align-items:center;justify-content:center;padding:28px 15px;gap:19px;min-height:265px}#donut{width:160px;height:160px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;transform:rotate(0)}#donut>div{background:#08213a;width:115px;height:115px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column}#donut strong{font-size:28px;margin:4px 0}#donut small{color:#a9c0d8}#legend{flex:1}#legend>div{margin:13px 0;display:grid;grid-template-columns:1fr auto;gap:6px;font-size:13px}#legend small{grid-column:2;color:#8ea8c1}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-right:7px}.dot.s0{background:#05d8b3}.dot.s1{background:#269fff}.dot.s2{background:#899aaf}.dot.s3{background:#ffca51}.status{white-space:nowrap;font-size:13px}.status.s0{color:#05d8b3}.status.s1{color:#42afff}.status.s2{color:#9baac0}.status.s3{color:#ffca51}.type-bars{padding:15px 20px;max-height:300px;overflow:auto}.type-row{margin:12px 0 21px}.type-row>div:first-child{display:flex;justify-content:space-between;font-size:13px;margin-bottom:9px}.type-row span{color:#8fa9c2;font-size:11px}.bar-line{display:flex;align-items:center;gap:10px}.bar{height:7px;background:#183653;border-radius:5px;overflow:hidden;flex:1}.bar i{display:block;height:100%;background:linear-gradient(90deg,#159cfa,#0bd8bc);border-radius:5px;transition:width .6s}.bar-line strong{width:53px;text-align:right;font-size:13px}.trend-panel{flex:0 0 39%}.chart-key{float:right;font-size:11px;font-weight:400;color:#a8c3dc;padding-top:3px}.chart-key .dot:nth-child(2){margin-left:14px}#trend{padding:12px 15px 5px}#trend svg{display:block;width:100%;height:100%;max-height:235px}svg text{fill:#9fb8d0;font-size:12px}.list-panel{flex:1;display:flex;flex-direction:column}.filters{display:flex;gap:8px;padding:10px 15px}.filters input{flex:1}.filters select{width:116px}.table-wrap{overflow:auto;flex:1}table{border-collapse:collapse;width:100%;font-size:13px}th{font-weight:500;background:#0b3152;color:#bcd2e7;text-align:left;padding:10px}td{padding:9px 10px;border-bottom:1px solid #11324e}tbody tr:nth-child(even){background:#10284255}td.serial,.serial{font-family:Consolas,"Courier New",monospace;white-space:nowrap;letter-spacing:.2px}.list-panel td:last-child{color:#9cb6cf}th:first-child,td:first-child{padding-left:16px}.pager{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;font-size:12px;color:#a6c0d9;gap:10px}.pager>div{display:flex;align-items:center;gap:10px}.pager label{margin-left:8px;white-space:nowrap}.pager button{padding:3px 10px}.rank-panel{flex:1.05!important}#ranking{padding:8px 16px}.rank{display:flex;gap:12px;margin:14px 0}.rank>b{border:1px solid #228cd1;border-radius:50%;background:#114c78;min-width:24px;height:24px;display:grid;place-items:center;font-size:12px;margin-top:7px}.rank:first-child>b{background:#ad7b19;border-color:#efc95b;color:#fff1b7}.rank>div{flex:1;min-width:0}.rank small{color:#92adc8;font-size:11px}.rank-main{display:flex;justify-content:space-between;gap:8px;font-size:13px;margin:3px 0 8px}.rank-main strong{color:#d9f1ff}.rank-main small{font-weight:400}.events-panel{flex:1!important}#events{padding:7px 14px;max-height:310px;overflow:hidden}.event{display:flex;align-items:flex-start;gap:6px;font-size:12px;padding:12px 0;border-bottom:1px solid #17354f}.event>i{margin-top:4px;margin-right:3px}.event time{color:#85a8c9;min-width:58px}.event p{color:#28d1c1;margin-top:5px}.event .serial{display:block;margin-top:3px}footer{display:flex;align-items:center;justify-content:space-between;height:53px;font-size:12px;color:#84a7c4}footer>div{display:flex;gap:10px}footer a{border:1px solid #215574;border-radius:5px;padding:8px 15px}.connected{color:#09c9b3}.disconnected{color:#ffc455}.empty{text-align:center;padding:35px;color:#89a5bf}.changed{animation:flash .7s}.updated{animation:rowFlash 1.5s}@keyframes flash{50%{color:#53f8df;text-shadow:0 0 10px #05d8b3}}@keyframes rowFlash{0%{background:#157c7866}}#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);padding:13px 24px;border-radius:8px;background:#073c39;color:#e3fff7;box-shadow:0 4px 30px #0003;z-index:200;font-size:14px;max-width:85vw}#toast.error{background:#a32937;color:white}[hidden]{display:none!important}@media(min-width:1700px){.wall-head{height:88px}.kpi{min-height:120px}.kpi strong{font-size:40px}.wall-grid{min-height:730px}td{padding:13px 12px}.donut-area{min-height:315px}#donut{width:185px;height:185px}#donut>div{width:136px;height:136px}.type-row{margin:18px 0 28px}.rank{margin:20px 0}.event{padding:16px 0}#events{max-height:370px}.type-bars{max-height:370px}#trend svg{max-height:290px}}@media(max-width:1250px){.kpi{padding:12px;gap:8px}.kpi-symbol{font-size:25px}.kpi strong{font-size:25px}.wall-head h1{font-size:24px}.brand{display:none}#donut{width:110px;height:110px}#donut>div{width:80px;height:80px}#donut strong{font-size:20px}.donut-area{padding:20px 10px;gap:9px}#legend>div{font-size:11px}.rank-main{display:block}.rank-main strong{display:block}.chart-key{float:none;display:block;margin-top:6px}.wall-grid{grid-template-columns:22% 52% 1fr}.event time{display:none}}@media(max-width:850px){.wall-head h1{font-size:21px}.wall-head>div:last-child #clock{display:none}.kpis{grid-template-columns:repeat(3,1fr)}.wall-grid{display:flex;flex-direction:column}.middle{order:-1}.trend-panel{min-height:260px}.list-panel{min-height:420px}.side{flex-direction:row}.side .panel{width:50%}.kpi strong{font-size:23px}.rank-main{display:flex}#wall{padding:0 10px}.wall-head{height:65px}}