:root{--bg:#f2f4f7;--panel:#fff;--line:#ebeef5;--fg:#303133;--dim:#909399;--acc:#409eff;--ok:#67c23a;--err:#f56c6c}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--fg);font:14px/1.6 Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;padding:16px}h1{display:flex;align-items:center;background:var(--panel);border-radius:8px;padding:14px 18px;margin-bottom:14px;box-shadow:0 1px 4px rgba(0,21,41,.08);font-size:17px;font-weight:600}h1 small{color:var(--dim);font-size:12px;margin-left:10px;font-weight:400}.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:16px;margin-bottom:14px;box-shadow:0 1px 4px rgba(0,21,41,.06)}.conn{display:flex;flex-wrap:wrap;gap:10px}.conn,.conn label{align-items:center}.conn label{color:var(--dim);font-size:13px;display:inline-flex;gap:6px}input,select{background:#fff;border:1px solid #dcdfe6;color:var(--fg);border-radius:4px;padding:7px 10px;font-size:13px;font-family:inherit;transition:border-color .2s}input:hover,select:hover{border-color:#c0c4cc}input:focus{outline:none;border-color:var(--acc)}button{cursor:pointer;background:#fff;border:1px solid #dcdfe6;color:#606266;border-radius:4px;padding:8px 15px;font-size:13px;font-family:inherit;transition:all .2s}button:hover{color:var(--acc);border-color:#c6e2ff;background:#ecf5ff}button.primary{background:var(--acc);color:#fff;border-color:var(--acc)}button.primary:hover{background:#66b1ff;border-color:#66b1ff;color:#fff}button.danger{color:var(--err);border-color:#fbc4c4}button.danger:hover{background:var(--err);color:#fff;border-color:var(--err)}button:disabled{opacity:.4;cursor:not-allowed}.dot{width:8px;height:8px;border-radius:50%;background:#c0c4cc;display:inline-block;margin-right:8px;flex:none}.dot.on{background:var(--ok);box-shadow:0 0 6px rgba(103,194,58,.6)}.dot.err{background:var(--err)}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));grid-gap:14px;gap:14px;margin-bottom:14px}.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:16px;box-shadow:0 1px 4px rgba(0,21,41,.06)}.card .v{font-size:24px;font-weight:600;color:var(--acc);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.card .k{color:var(--dim);font-size:12px;margin-top:4px}.grid3{display:grid;grid-template-columns:1fr 1fr;grid-gap:14px;gap:14px}@media (max-width:900px){.grid3{grid-template-columns:1fr}}canvas{max-height:260px}.charts{display:grid;grid-template-columns:1fr 1fr;grid-gap:14px;gap:14px;margin-bottom:14px}@media (max-width:900px){.charts{grid-template-columns:1fr}}.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}.toolbar b{font-size:14px;font-weight:600}.toolbar span{color:var(--dim);font-size:12px}table{width:100%;border-collapse:collapse;font-size:13px}td,th{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}th{color:#606266;font-weight:600;position:-webkit-sticky;position:sticky;top:0}tbody tr:hover td,th{background:#f5f7fa}.tbl{max-height:300px;overflow:auto}.msgtopic{color:var(--acc)}.msgpayload{color:var(--dim);max-width:420px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:bottom}.log{font-size:12px;color:var(--dim);max-height:80px;overflow:auto}.err{color:var(--err)}.ok{color:var(--ok)}.warn{color:var(--acc)}.sec-title{font-size:15px;font-weight:600;margin:18px 0 10px;padding-left:8px;border-left:3px solid var(--acc)}.heat{display:grid;grid-template-columns:64px repeat(24,1fr);grid-gap:3px;gap:3px;font-size:11px}.heat .hlabel{color:var(--dim);display:flex;align-items:center}.heat .hcell{aspect-ratio:1.4;border-radius:2px;background:#f0f2f5;position:relative}.heat .hhead{color:var(--dim);text-align:center;padding-bottom:2px}