:root{--page: #0d0d0d;--surface-1: #1a1a19;--surface-2: #222221;--border: rgba(255, 255, 255, .1);--text-primary: #ffffff;--text-secondary: #c3c2b7;--text-muted: #898781;--grid: #2c2c2a;--baseline: #383835;--series-1: #3987e5;--series-2: #199e70;--series-3: #c98500;--series-4: #008300;--series-5: #9085e9;--series-6: #e66767;--series-7: #d55181;--series-8: #d95926;--status-good: #0ca30c;--status-warning: #fab219;--status-serious: #ec835a;--status-critical: #d03b3b;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--page);color:var(--text-primary);font-size:14px}a{color:inherit;text-decoration:none}button{font:inherit}.app{display:flex;min-height:100vh}.sidebar{width:200px;flex-shrink:0;background:var(--surface-1);border-right:1px solid var(--border);padding:12px 8px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh}.sidebar .brand{font-weight:700;font-size:15px;letter-spacing:.3px;padding:8px 10px 14px;display:flex;align-items:center;gap:8px}.sidebar .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--status-good)}.sidebar a{padding:8px 10px;border-radius:6px;color:var(--text-secondary);display:flex;align-items:center;gap:8px;font-weight:500}.sidebar a:hover,.sidebar a.active{background:var(--surface-2);color:var(--text-primary)}.sidebar .spacer{flex:1}.sidebar .logout{padding:8px 10px;border-radius:6px;color:var(--text-muted);background:none;border:none;cursor:pointer;text-align:left}.sidebar .logout:hover{color:var(--text-primary);background:var(--surface-2)}.main{flex:1;padding:16px 20px 40px;min-width:0}.topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}.topbar h1{font-size:18px;margin:0;font-weight:600}.topbar .grow{flex:1}.select,.input{background:var(--surface-1);color:var(--text-primary);border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-size:13px}.input:focus,.select:focus{outline:1px solid var(--series-1)}.btn{background:var(--surface-2);color:var(--text-primary);border:1px solid var(--border);border-radius:6px;padding:6px 12px;cursor:pointer;font-size:13px;font-weight:500}.btn:hover{border-color:var(--text-muted)}.btn.primary{background:#1c5cab;border-color:#1c5cab}.btn.primary:hover{background:#256abf}.btn.danger{color:var(--status-critical)}.btn:disabled{opacity:.5;cursor:default}.seg{display:inline-flex;border:1px solid var(--border);border-radius:6px;overflow:hidden}.seg button{background:var(--surface-1);color:var(--text-secondary);border:none;padding:6px 10px;cursor:pointer;font-size:12.5px}.seg button+button{border-left:1px solid var(--border)}.seg button.on{background:var(--surface-2);color:var(--text-primary);font-weight:600}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}.panel{background:var(--surface-1);border:1px solid var(--border);border-radius:8px;padding:10px 12px 6px;min-width:0;display:flex;flex-direction:column}.panel h3{margin:0 0 6px;font-size:12.5px;font-weight:600;color:var(--text-secondary);text-transform:none;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.panel .panel-body{flex:1;min-height:0}.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-6{grid-column:span 6}.span-8{grid-column:span 8}.span-12{grid-column:span 12}@media(max-width:1100px){.span-3,.span-4{grid-column:span 6}}@media(max-width:760px){.span-3,.span-4,.span-6,.span-8{grid-column:span 12}.sidebar{display:none}}.stat{text-align:left}.stat .value{font-size:26px;font-weight:700;line-height:1.2;margin-top:2px}.stat .sub{font-size:12px;color:var(--text-muted);margin-top:2px}.stat .value.good{color:var(--status-good)}.stat .value.warning{color:var(--status-warning)}.stat .value.serious{color:var(--status-serious)}.stat .value.critical{color:var(--status-critical)}.badge{display:inline-flex;align-items:center;gap:6px;border-radius:12px;padding:2px 10px;font-size:12px;font-weight:600}.badge:before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}.badge.up{color:var(--status-good);background:#0ca30c1f}.badge.down{color:var(--status-critical);background:#d03b3b24}.badge.unknown{color:var(--text-muted);background:var(--surface-2)}.badge.info{color:var(--series-1);background:#3987e51f}.badge.warning{color:var(--status-warning);background:#fab2191f}.badge.average{color:var(--status-serious);background:#ec835a24}.badge.high,.badge.disaster{color:var(--status-critical);background:#d03b3b24}.table-wrap{overflow-x:auto}table.data{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}table.data th{text-align:left;color:var(--text-muted);font-weight:500;padding:6px 10px;border-bottom:1px solid var(--border);white-space:nowrap}table.data td{padding:6px 10px;border-bottom:1px solid var(--grid);color:var(--text-secondary);vertical-align:top}table.data td.num,table.data th.num{text-align:right}table.data tr:hover td{background:var(--surface-2)}table.data td.mono{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;word-break:break-all}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}.card{background:var(--surface-1);border:1px solid var(--border);border-radius:8px;padding:14px 16px;display:block}.card:hover{border-color:var(--text-muted)}.card .head{display:flex;align-items:center;justify-content:space-between;gap:8px}.card .name{font-weight:600;font-size:15px}.card .meta{color:var(--text-muted);font-size:12px;margin-top:4px}.card .stats{display:flex;gap:18px;margin-top:12px}.card .stats .s .l{color:var(--text-muted);font-size:11px}.card .stats .s .v{font-size:15px;font-weight:600;margin-top:1px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 14px}.form-grid label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--text-secondary)}.form-grid label.full{grid-column:span 2}.form-grid .check{flex-direction:row;align-items:center;gap:8px;margin-top:18px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:flex-start;justify-content:center;padding:60px 16px;z-index:50}.modal{background:var(--surface-1);border:1px solid var(--border);border-radius:10px;padding:20px;width:640px;max-width:100%}.modal h2{margin:0 0 16px;font-size:16px}.modal .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center}.login{background:var(--surface-1);border:1px solid var(--border);border-radius:10px;padding:32px;width:360px;display:flex;flex-direction:column;gap:12px}.login h1{margin:0 0 4px;font-size:20px}.login p{margin:0 0 8px;color:var(--text-muted);font-size:13px}.error-text{color:var(--status-critical);font-size:12.5px}.muted{color:var(--text-muted)}.empty{color:var(--text-muted);padding:24px;text-align:center}.chart-tooltip{background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:8px 10px;font-size:12px}.chart-tooltip .t{color:var(--text-muted);margin-bottom:4px}.chart-tooltip .row{display:flex;align-items:center;gap:6px;margin-top:2px}.chart-tooltip .sw{width:8px;height:8px;border-radius:2px;flex-shrink:0}.chart-tooltip .n{color:var(--text-secondary)}.chart-tooltip .v{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums;padding-left:10px}