:root{--bg: #0b0e14;--panel: #121722;--panel2: #171d2b;--line: #232b3d;--fg: #d7deea;--dim: #7c88a1;--dimmer: #4d5877;--green: #35d07f;--amber: #f0b429;--red: #f2555a;--blue: #4aa8ff;--violet: #9d7bff;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:13px/1.5 ui-sans-serif,-apple-system,Pretendard,Apple SD Gothic Neo,system-ui,sans-serif;font-variant-numeric:tabular-nums}.app{padding:16px;max-width:1800px;margin:0 auto}header.top{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--line)}header.top h1{font-size:15px;margin:0;font-weight:650;letter-spacing:-.01em}header.top .sub{color:var(--dim);font-size:12px}header.top .spacer{flex:1}.live{display:inline-flex;align-items:center;gap:6px;color:var(--dim);font-size:12px}.live .dot{width:7px;height:7px;border-radius:50%;background:var(--green)}.live.off .dot{background:var(--red)}.live .dot{animation:pulse 2s ease-in-out infinite}@keyframes pulse{50%{opacity:.35}}.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px;margin-bottom:16px}.kpi{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px}.kpi .k{color:var(--dim);font-size:11px;letter-spacing:.02em}.kpi .v{font-size:21px;font-weight:600;line-height:1.25;margin-top:2px}.kpi .v small{font-size:12px;color:var(--dim);font-weight:400;margin-left:3px}.kpi.bad .v{color:var(--red)}.kpi.warn .v{color:var(--amber)}.grid{display:grid;gap:14px}.grid.cols2{grid-template-columns:2fr 1fr}@media(max-width:1100px){.grid.cols2{grid-template-columns:1fr}}.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}.panel>h2{font-size:12px;font-weight:600;margin:0;padding:9px 12px;color:var(--dim);border-bottom:1px solid var(--line);background:var(--panel2);display:flex;align-items:center;gap:8px}.panel>h2 .spacer{flex:1}.panel>h2 .hint{font-weight:400;color:var(--dimmer)}.panel .body{padding:12px}.xview{position:relative}.xview canvas{display:block;width:100%;height:260px}.xview .legend{position:absolute;top:8px;right:10px;display:flex;gap:10px;font-size:11px;color:var(--dim);background:#0b0e14b8;padding:3px 7px;border-radius:5px}.xview .legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px}.xview .tip{position:absolute;pointer-events:none;background:#0a0d13;border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-size:11px;white-space:nowrap;z-index:5;box-shadow:0 6px 20px #00000080}.xview .tip b{font-weight:600}.xview .tip .p{color:var(--dim);max-width:380px;overflow:hidden;text-overflow:ellipsis;display:block}table{width:100%;border-collapse:collapse}th,td{text-align:right;padding:5px 8px;border-bottom:1px solid var(--line)}th{color:var(--dim);font-weight:500;font-size:11px;position:sticky;top:0;background:var(--panel)}th:first-child,td:first-child{text-align:left}tbody tr:hover{background:var(--panel2)}tbody tr.sel{background:#1b2436}td.name{font-weight:500;cursor:pointer}td.name:hover{color:var(--blue)}.scroll{max-height:340px;overflow:auto}.bar{display:flex;height:5px;border-radius:3px;overflow:hidden;background:var(--line);min-width:60px}.bar i{display:block;height:100%}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:8px}.card{background:var(--panel2);border:1px solid var(--line);border-left-width:3px;border-radius:7px;padding:8px 10px}.card.up{border-left-color:var(--green)}.card.down{border-left-color:var(--red)}.card .n{font-weight:600;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card .m{display:flex;gap:10px;color:var(--dim);font-size:11px;margin-top:3px}.card .s{color:var(--dimmer);font-size:10.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card.down .s{color:var(--red)}.ev{display:flex;gap:8px;padding:4px 0;border-bottom:1px solid var(--line);font-size:12px}.ev:last-child{border-bottom:0}.ev .t{color:var(--dimmer);flex:none}.ev .g{flex:none;font-weight:600}.ev.error .g{color:var(--red)}.ev.warn .g{color:var(--amber)}.ev.info .g{color:var(--green)}.ev .m{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.empty{color:var(--dimmer);padding:22px;text-align:center;font-size:12px}.meter{display:grid;grid-template-columns:52px 1fr 74px;gap:8px;align-items:center;padding:3px 0}.meter .l{color:var(--dim);font-size:11px}.meter .v{text-align:right;font-size:11.5px}.tabs{display:flex;gap:4px}.tabs button{background:none;border:1px solid transparent;color:var(--dim);font:inherit;font-size:11px;padding:2px 8px;border-radius:5px;cursor:pointer}.tabs button.on{background:var(--panel);border-color:var(--line);color:var(--fg)}.authwrap{min-height:100vh;display:grid;place-items:center;padding:16px}.authcard{width:100%;max-width:340px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:26px 24px;display:grid;gap:12px}.authcard h1{margin:0;font-size:18px;font-weight:650}.authcard .sub{margin:-8px 0 4px;color:var(--dim);font-size:12px}.authcard label{display:grid;gap:5px;color:var(--dim);font-size:12px}.authcard input{background:var(--bg);border:1px solid var(--line);border-radius:7px;color:var(--fg);font:inherit;font-size:14px;padding:9px 10px}.authcard input:focus{outline:none;border-color:var(--blue)}.authcard button{margin-top:4px;background:var(--blue);color:#06121f;border:0;border-radius:7px;font:inherit;font-weight:600;padding:10px;cursor:pointer}.authcard button:disabled{opacity:.6;cursor:default}.authnote{background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:10px 12px;font-size:12px;color:var(--dim);line-height:1.6}.authnote b{color:var(--fg)}.autherr{color:var(--red);font-size:12px}header.top .user{display:inline-flex;align-items:center;gap:8px;color:var(--dim);font-size:12px}.linkbtn{background:none;border:1px solid var(--line);color:var(--dim);font:inherit;font-size:11px;padding:2px 8px;border-radius:5px;cursor:pointer}.linkbtn:hover{color:var(--fg);border-color:var(--dimmer)}
