*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;font-family:Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;background:#e8e4d8}#app{position:fixed;inset:0}.topbar{position:fixed;top:0;left:0;right:0;height:56px;z-index:10;background:linear-gradient(90deg,#f5f1e4,#ece7d5);border-bottom:2px solid #d4c99a;display:flex;align-items:center;padding:0 24px;gap:24px;box-shadow:0 2px 8px #0000000f}.logo{font-size:22px;font-weight:800;letter-spacing:2px;color:#1a1a1a;border-left:4px solid #d4b44a;padding-left:10px}.title{font-size:16px;font-weight:600;color:#333}.title span{color:#8a7d4a;font-weight:500;margin-left:8px;font-size:13px}.top-right{margin-left:auto;display:flex;gap:18px;align-items:center}.kpi-chip{display:flex;flex-direction:column;align-items:flex-end;padding:4px 12px;border-left:1px solid #d4c99a}.kpi-chip .label{font-size:11px;color:#8a7d4a}.kpi-chip .value{font-size:18px;font-weight:700;color:#2b5c3b}.side-panel{position:fixed;top:72px;right:20px;width:260px;z-index:9;background:#fcf8eceb;border:1px solid #d4c99a;border-radius:6px;padding:14px 16px;box-shadow:0 4px 16px #00000014;backdrop-filter:blur(6px)}.panel-title{font-size:13px;font-weight:700;color:#2b2b2b;border-bottom:1px solid #d4c99a;padding-bottom:6px;margin-bottom:10px;display:flex;align-items:center;gap:6px}.panel-title:before{content:"";width:3px;height:14px;background:#d4b44a;border-radius:2px}.metric-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:12px;color:#555;border-bottom:1px dashed #e0d8b8}.metric-row:last-child{border-bottom:none}.metric-row .val{font-weight:700;color:#2b5c3b;font-size:13px}.metric-row .val.warn{color:#b8860b}.metric-row .val.err{color:#a03030}.bar-row{margin:6px 0}.bar-row .bar-label{display:flex;justify-content:space-between;font-size:11px;color:#666;margin-bottom:3px}.bar-bg{height:6px;background:#e0d8b8;border-radius:3px;overflow:hidden}.bar-fill{height:100%;background:linear-gradient(90deg,#6aa84f,#93c47d);border-radius:3px;transition:width .6s}.bar-fill.amber{background:linear-gradient(90deg,#d4a017,#e8c547)}.bar-fill.blue{background:linear-gradient(90deg,#3c78a8,#5b9bd5)}.legend{position:fixed;bottom:12px;left:20px;z-index:9;background:#fcf8eceb;border:1px solid #d4c99a;border-radius:6px;padding:8px 14px;font-size:11px;color:#555;display:flex;gap:16px;align-items:center;box-shadow:0 2px 8px #0000000f}.legend-item{display:flex;align-items:center;gap:5px}.legend-dot{width:10px;height:10px;border-radius:50%}.station-label{padding:3px 8px;font-size:11px;background:#282828d1;color:#fff;border-radius:3px;white-space:nowrap;font-weight:500;letter-spacing:.5px}