.widget-body.no-padding{padding:0}.space-top{margin-top:17px}
.widget{container-type:inline-size}
@container(max-width:600px){.topology-layout{grid-template-columns:1fr}.inspector{border-left:0;border-top:1px solid var(--line)}.charts{grid-template-columns:1fr 1fr}.failover-item{grid-template-columns:55px 1fr}.failover-item button{grid-column:2;justify-self:start}.metrics{grid-template-columns:1fr 1fr}}
:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:light;--bg:#f4f7fb;--panel:#fff;--panel2:#f8fafd;--ink:#172b46;--muted:#78869b;--line:#e6ecf3;--blue:#2467ec;--blue-soft:#edf3ff;--green:#10a180;--green-soft:#e9f8f2;--amber:#e5a02b;--amber-soft:#fff6e6;--red:#dc5969;--shadow:0 3px 14px #20345304}
html[data-theme=dark]{color-scheme:dark;--bg:#0e1725;--panel:#152133;--panel2:#111c2c;--ink:#dce7f8;--muted:#8a9bb1;--line:#25344a;--blue:#72a1ff;--blue-soft:#213653;--green:#44d5ae;--green-soft:#16382f;--amber:#eeb64e;--amber-soft:#382f20;--red:#f58998;--shadow:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);font-size:13px;line-height:1.5}button,input,select{font:inherit}button,select{cursor:pointer}button{border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--ink);padding:9px 13px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,border-color .15s}button:hover{border-color:var(--blue);background:var(--blue-soft)}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:var(--blue);color:#fff;border-color:var(--blue)}button.small{font-size:11px;padding:6px 9px}button.icon{padding:9px;position:relative}button.icon svg{width:17px;height:17px}button.ghost{border-color:transparent;background:transparent}a{color:var(--blue)}svg.icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.muted{color:var(--muted)}.mono{font-family:"SFMono-Regular",Consolas,monospace;font-size:11px}.smalltext{font-size:11px}.boot{padding:15vh;text-align:center;color:var(--muted)}
.shell{display:grid;grid-template-columns:218px minmax(0,1fr);min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:218px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:25}.brand{height:82px;display:flex;align-items:center;padding:0 23px;gap:12px;border-bottom:1px solid var(--line)}.brand-mark{display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:var(--blue-soft);color:var(--blue);border-radius:11px}.brand-mark svg{width:25px;height:25px}.brand-name{font-weight:800;font-size:19px;letter-spacing:2px}.brand-sub{font-size:9px;color:var(--muted);letter-spacing:.4px}.nav{padding:20px 12px;overflow:auto;flex:1}.nav-caption{font-size:9px;text-transform:uppercase;color:var(--muted);letter-spacing:1.4px;margin:3px 12px 12px}.nav-caption.second{margin-top:23px}.nav button{border:0;border-radius:7px;width:100%;justify-content:flex-start;text-align:left;padding:10px 13px;gap:13px;color:var(--muted);margin-bottom:3px;background:transparent;font-weight:500}.nav button.active{color:var(--blue);background:var(--blue-soft)}.nav button:hover{color:var(--blue)}.nav .badge{margin-left:auto;font-size:9px;border-radius:4px;background:var(--amber-soft);color:var(--amber);padding:1px 5px}.sidebar-foot{margin:0 18px;padding:17px 0;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center}.avatar{background:var(--blue-soft);color:var(--blue);width:31px;height:31px;display:inline-flex;align-items:center;justify-content:center;font-weight:650;border-radius:50%;font-size:12px}.main{grid-column:2;min-width:0}.topbar{height:72px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:15px;padding:0 28px;position:sticky;top:0;z-index:20}.project-select{border:1px solid var(--line);border-radius:7px;background:var(--panel2);padding:9px 35px 9px 12px;color:var(--ink);max-width:240px}.live{font-size:11px;display:flex;gap:7px;align-items:center;color:var(--muted)}.dot{width:7px;height:7px;display:inline-block;border-radius:50%;background:var(--green);flex-shrink:0}.dot.warning{background:var(--amber)}.dot.unknown,.dot.stopped{background:var(--muted)}.dot.down{background:var(--red)}.spacer{flex:1}.topbar .search{display:flex;gap:8px;color:var(--muted);border:1px solid var(--line);padding:8px 10px;border-radius:7px;background:var(--panel2)}.search input{background:none;border:0;outline:none;color:var(--ink);width:140px;font-size:11px}.topbar .divider{width:1px;height:27px;background:var(--line);margin:0 2px}.content{max-width:1900px;margin:auto;padding:26px 28px 35px}.pagehead{display:flex;align-items:center;gap:15px;margin-bottom:22px}.pagehead h1{font-size:24px;letter-spacing:-.7px;margin:0 0 4px;font-weight:650}.pagehead p{margin:0;color:var(--muted);font-size:12px}.head-actions{margin-left:auto;display:flex;gap:9px;align-items:center}.head-actions select{padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}.status-strip{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-bottom:21px;font-size:11px;color:var(--muted)}.status-strip span{display:flex;align-items:center;gap:6px}.status-strip .sep{height:14px;width:1px;background:var(--line)}.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:17px}.widget{grid-column:span 6;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);min-width:0;overflow:hidden}.widget.full{grid-column:span 12}.widget.third{grid-column:span 4}.widget.twothirds{grid-column:span 8}.widget-header{display:flex;align-items:center;padding:16px 18px;gap:9px;border-bottom:1px solid var(--line);min-height:55px}.widget-title{font-weight:650;font-size:13px}.widget-header .right{margin-left:auto;display:flex;gap:6px;align-items:center}.widget-header button{padding:3px 5px}.widget-body{padding:18px}.grab{color:var(--muted);cursor:grab;letter-spacing:-2px;font-size:17px;display:none}.editing .grab{display:inline}.editing .widget{border:1px dashed var(--blue)}.editing .widget.dragging{opacity:.4}.remove-widget,.width-widget{display:none}.editing .remove-widget,.editing .width-widget{display:inline-flex}.widget.resources{background:transparent;border:0;box-shadow:none;overflow:visible}.resources>.widget-header{display:none}.editing .resources>.widget-header{display:flex;background:var(--panel)}.resources>.widget-body{padding:0}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.metric{border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:18px;position:relative;overflow:hidden}.metric-top{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:11px;margin-bottom:9px}.metric-top svg{color:var(--blue)}.metric-value{font-size:27px;font-weight:650;letter-spacing:-.6px;line-height:1.25}.metric-unit{font-size:12px;font-weight:400;color:var(--muted);letter-spacing:0}.metric-note{color:var(--muted);font-size:10px;margin-top:6px;min-height:15px}.metric-chart{height:34px;margin-top:12px}.chart svg{width:100%;height:100%;overflow:visible}.chart .axis{fill:var(--muted);font-size:9px}.chart .gridline{stroke:var(--line);stroke-width:1}.charts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.chart-title{font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.chart-large{height:135px}.empty-chart{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:10px;min-height:70px;border-bottom:1px solid var(--line)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;padding:3px 7px;border-radius:5px;background:var(--green-soft);color:var(--green);white-space:nowrap}.pill.warn{background:var(--amber-soft);color:var(--amber)}.pill.neutral{background:var(--panel2);color:var(--muted)}.pill.danger{background:#dc596916;color:var(--red)}.topology-layout{display:grid;grid-template-columns:minmax(0,1fr) 235px;min-height:370px}.topology-canvas{background-image:radial-gradient(var(--line) .8px,transparent .8px);background-size:16px 16px;position:relative;min-width:0;overflow:hidden}.topology-canvas>svg{width:100%;height:100%;min-height:355px;display:block}.topology-canvas.large>svg{min-height:520px}.topo-node{cursor:pointer}.topo-node rect{fill:var(--panel);stroke:var(--line);stroke-width:1.4}.topo-node:hover rect,.topo-node.selected rect{stroke:var(--blue);stroke-width:2;fill:var(--blue-soft)}.topo-node text{fill:var(--ink);font-size:11px;font-weight:600}.topo-node .node-sub{fill:var(--muted);font-size:8px;font-weight:400}.topo-edge{stroke:var(--green);stroke-width:1.4;fill:none;opacity:.7}.topo-edge.hosted{stroke:var(--muted);stroke-dasharray:3 5;opacity:.5}.topo-edge.disabled{stroke:var(--muted);stroke-dasharray:5 5;opacity:.4}.topo-tools{position:absolute;top:11px;left:11px;display:flex;flex-direction:column;gap:4px}.topo-tools button{padding:5px}.legend{position:absolute;bottom:8px;left:12px;display:flex;gap:12px;align-items:center;font-size:9px;color:var(--muted);pointer-events:none}.legend i{width:17px;display:inline-block;border-top:2px solid var(--green);margin-right:4px;vertical-align:middle}.legend i.dashed{border-top:2px dashed var(--muted)}.inspector{padding:19px;border-left:1px solid var(--line);background:var(--panel2)}.inspector-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}.device-icon{padding:11px;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:flex}.inspector-name{font-size:14px;font-weight:650}.inspector p{margin:4px 0;color:var(--muted);font-size:11px}.inspector .statrow{display:flex;align-items:center;justify-content:space-between;font-size:11px;padding:9px 0;border-bottom:1px solid var(--line)}.inspector .statrow b{font-weight:600}.inspector .note{margin-top:15px;font-size:10px;line-height:1.6}.inspector button{margin-top:15px;width:100%;font-size:11px}.inspector-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:17px}.inspector-metrics .metric{padding:10px}.inspector-metrics .metric-value{font-size:20px}.inspector-metrics .metric-top{font-size:10px;margin-bottom:5px}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap;font-size:11px}th{font-size:10px;font-weight:500;color:var(--muted);background:var(--panel2);padding:11px 12px;border-bottom:1px solid var(--line)}td{padding:12px;border-bottom:1px solid var(--line);max-width:350px;overflow:hidden;text-overflow:ellipsis}tr:last-child td{border-bottom:0}tr.clickable{cursor:pointer}tr.clickable:hover{background:var(--blue-soft)}td.name{font-weight:600}td.comment{color:var(--muted);max-width:240px}.table-caption{display:flex;gap:8px;align-items:center;margin-bottom:13px}.table-caption input{padding:8px 11px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);color:var(--ink);width:min(330px,100%)}.table-caption select{padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}.table-caption .count{margin-left:auto;font-size:11px;color:var(--muted)}.timeline{display:flex;flex-direction:column;gap:0}.event{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid var(--line)}.event:last-child{border:0}.event-mark{width:25px;height:25px;display:flex;align-items:center;justify-content:center;background:var(--blue-soft);color:var(--blue);border-radius:50%;flex-shrink:0}.event-mark.warning{background:var(--amber-soft);color:var(--amber)}.event-mark svg{width:14px;height:14px}.event-text{flex:1;min-width:0}.event-title{font-size:11px;font-weight:600}.event-detail{font-size:10px;color:var(--muted);margin-top:4px;overflow-wrap:anywhere}.event-time{font-size:10px;color:var(--muted);white-space:nowrap}.empty{padding:30px 15px;text-align:center;color:var(--muted);font-size:12px}.empty .big-icon{margin-bottom:10px;color:var(--blue)}.empty .big-icon svg{width:33px;height:33px}.notice{border:1px solid var(--line);border-left:3px solid var(--blue);background:var(--panel2);padding:13px 16px;border-radius:6px;color:var(--muted);font-size:11px;margin:0 0 18px;line-height:1.7}.notice.warning{border-left-color:var(--amber);background:var(--amber-soft);color:var(--ink)}.failover-item{display:grid;grid-template-columns:75px 1fr auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}.failover-item:last-child{border-bottom:0}.failover-item h3{font-size:12px;margin:0}.failover-item p{font-size:10px;margin:3px 0;color:var(--muted)}.telegram-card{display:flex;gap:15px;align-items:flex-start}.telegram-icon{width:43px;height:43px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--blue-soft);color:var(--blue);flex-shrink:0}.telegram-card h3{font-size:13px;margin:0 0 7px}.telegram-card p{font-size:11px;color:var(--muted);margin:7px 0}.builder{position:fixed;right:0;top:72px;bottom:0;width:280px;background:var(--panel);border-left:1px solid var(--line);padding:22px;z-index:21;box-shadow:-8px 0 30px #00000009;overflow:auto}.builder h3{margin:0 0 6px;font-size:15px}.builder .widget-option{display:flex;align-items:center;gap:11px;width:100%;padding:13px;margin-top:9px;text-align:left;justify-content:flex-start}.widget-option svg{color:var(--blue)}.widget-option .muted{font-size:10px}.builder-open .content{padding-right:305px}.page-footer{display:flex;gap:14px;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:22px}.source-errors{color:var(--amber)}.stack{display:flex;flex-direction:column;gap:17px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.device-card{padding:20px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}.device-card h3{margin:10px 0 3px;font-size:14px}.device-card .card-line{display:flex;align-items:center;gap:8px}.device-card p{color:var(--muted);font-size:11px;margin:5px 0}.device-card .numbers{display:flex;gap:20px;margin-top:20px}.numbers strong{font-size:18px;display:block;font-weight:600}.numbers label{font-size:10px;color:var(--muted)}.rule-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:20px}.rule-summary .metric{padding:16px}.rule-summary .metric-value{font-size:24px}.tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:17px}.tabs button.active{color:var(--blue);background:var(--blue-soft);border-color:var(--blue)}.drawer{position:fixed;right:0;top:72px;bottom:0;width:370px;background:var(--panel);z-index:35;box-shadow:-10px 0 40px #0002;border-left:1px solid var(--line);padding:23px;overflow:auto}.drawer h2{margin:0;font-size:17px}.drawer .drawerhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--panel);padding:12px 22px;border-radius:8px;z-index:100;box-shadow:0 5px 30px #0002;display:none;font-size:12px}#toast.show{display:block}dialog{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:12px;padding:28px;max-width:650px;width:calc(100% - 32px);box-shadow:0 20px 80px #0003}dialog::backdrop{background:#08152a80;backdrop-filter:blur(3px)}dialog h2{font-size:20px;margin:0 0 12px}dialog .close{float:right}dialog p{color:var(--muted);font-size:12px}dialog label{display:block;margin:17px 0 6px;font-size:12px}dialog select{width:100%;padding:10px;border-radius:6px;border:1px solid var(--line);color:var(--ink);background:var(--panel2)}dialog li{font-size:12px;margin-bottom:10px}dialog .actions{display:flex;gap:9px;justify-content:flex-end;margin-top:25px}.login-page{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.login-art{background:#132d50;padding:12vh 10%;display:flex;flex-direction:column;justify-content:center;color:#e0edff;position:relative;overflow:hidden}.login-art .eyebrow{font-size:11px;letter-spacing:3px;color:#84a8d9}.login-art h1{font-size:42px;line-height:1.2;letter-spacing:-1.3px;font-weight:550;max-width:430px}.login-art p{font-size:14px;color:#a1b9da;max-width:390px}.login-art .login-network{margin-top:45px;display:flex;gap:15px;align-items:center;color:#7ddcc6}.login-network span{border:1px solid #466183;padding:14px;border-radius:10px;font-size:11px}.login-form-area{display:flex;align-items:center;justify-content:center;padding:35px;background:var(--panel)}.login-form{width:320px}.login-form .brand-name{color:var(--blue);margin-bottom:38px}.login-form h2{font-size:25px;letter-spacing:-.6px;margin:0 0 8px}.login-form p{color:var(--muted);font-size:12px;margin:0 0 25px}.login-form label{display:block;color:var(--muted);font-size:11px;margin:18px 0 7px}.login-form input{width:100%;border:1px solid var(--line);border-radius:7px;padding:12px;background:var(--panel2);color:var(--ink);outline:none}.login-form input:focus{border-color:var(--blue)}.login-form button[type=submit]{width:100%;margin-top:25px;padding:12px}.login-error{color:var(--red);margin-top:15px;font-size:11px}.login-foot{font-size:10px;color:var(--muted);margin-top:35px}.mobile-menu{display:none}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1600px){.topology-layout{grid-template-columns:minmax(0,1fr) 275px}.topology-canvas>svg{min-height:400px}.metric{padding:21px}.widget-body{padding:20px}}
@media(max-width:1200px){.shell{grid-template-columns:185px minmax(0,1fr)}.sidebar{width:185px}.brand{padding:0 17px}.brand-name{font-size:17px}.nav{padding:18px 8px}.nav button{padding:9px 10px;font-size:12px;gap:10px}.content{padding:22px 20px}.topbar{padding:0 20px;gap:10px}.topbar .search{display:none}.widget.twothirds,.widget.third{grid-column:span 12}.topology-layout{grid-template-columns:minmax(0,1fr) 250px}.cards{grid-template-columns:repeat(2,1fr)}.builder-open .content{padding-right:20px}.builder{box-shadow:-12px 0 50px #0003}}
@media(max-width:800px){.shell{grid-template-columns:1fr}.main{grid-column:1}.sidebar{transform:translateX(-100%);transition:transform .2s}.sidebar.mobile-open{transform:translateX(0);box-shadow:0 0 0 100vw #0005}.mobile-menu{display:inline-flex}.topbar{height:62px;padding:0 13px;gap:7px}.project-select{max-width:185px;font-size:11px}.topbar .live,.topbar .divider,.topbar .avatar{display:none}.content{padding:18px 13px}.pagehead{align-items:flex-start;flex-wrap:wrap}.pagehead h1{font-size:22px}.head-actions{margin-left:0}.metrics{grid-template-columns:1fr 1fr;gap:12px}.metric{padding:14px}.metric-value{font-size:25px}.widget,.widget.third,.widget.twothirds{grid-column:span 12}.topology-layout{grid-template-columns:1fr}.inspector{border-left:0;border-top:1px solid var(--line)}.inspector .statrow{display:inline-flex;width:50%;padding-right:15px}.inspector .note{max-width:550px}.topology-canvas>svg{min-height:350px}.charts{grid-template-columns:1fr 1fr;gap:24px}.rule-summary{grid-template-columns:1fr 1fr;gap:12px}.cards{grid-template-columns:1fr}.login-page{grid-template-columns:1fr}.login-art{display:none}.login-form-area{min-height:100vh}.drawer{width:min(100%,370px);top:62px}.builder{top:62px}.page-footer{flex-direction:column;gap:5px}.status-strip{gap:12px}.failover-item{grid-template-columns:60px 1fr auto;gap:8px}.failover-item button{font-size:10px;padding:7px}.topology-canvas.large>svg{min-height:390px}}