:root{--navy:#071c31;--navy2:#102a43;--green:#06974b;--green2:#12a858;--red:#df1018;--yellow:#e3a500;--gray:#748292;--ink:#081a34;--muted:#5d6f88;--line:#d8e1ea;--bg:#f7fafc;--surface:#fff;--soft-green:#e2f9e6;--soft-red:#ffe4e4;--soft-yellow:#fff4ce;--soft-gray:#edf1f4;--shadow:0 2px 7px #0b27400a}
*{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}body{margin:0;font-size:16px}button,input,select{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,.host-card:focus-visible{outline:3px solid #66adff;outline-offset:2px}[hidden]{display:none!important}
.shell{min-height:100vh;display:grid;grid-template-columns:252px minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(155deg,#102a43 0%,#06192d 82%);padding:24px 11px 20px;color:#fff;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:9px;padding:0 12px 32px;font-size:23px;white-space:nowrap}.brand strong{font-weight:800}.brand em{font-style:normal;color:#27c863}.brand-wave{color:#26dc71;font-size:37px;font-weight:900;line-height:1;transform:rotate(-10deg)}.sidebar nav{display:grid;gap:6px}.sidebar nav button,.sidebar footer button{height:57px;border:0;border-radius:8px;background:transparent;color:#edf6ff;display:flex;align-items:center;gap:16px;padding:0 18px;text-align:left}.sidebar nav button{font-size:17px}.sidebar nav button.active,.sidebar nav button:hover{background:linear-gradient(90deg,#087e42,#0aa957);box-shadow:inset 0 0 22px #24cf6c22}.nav-icon{width:28px;text-align:center;font-size:26px}.sidebar footer{margin-top:auto;color:#d9e6f1;padding:0 10px}.sidebar footer>div{padding:14px 10px}.sidebar footer hr{border:0;border-top:1px solid #ffffff25;margin:10px 0 12px}.sidebar footer button{width:100%;height:49px;font-size:16px}.sidebar footer button span{font-size:24px;width:26px}
main{min-width:0;min-height:100vh}.page-head{height:104px;display:flex;align-items:center;gap:24px;padding:15px 22px 15px 30px;background:#fbfdff;border-bottom:1px solid #e5ebf1}.page-head>div:first-child{min-width:410px}.page-head h1{font-size:39px;line-height:1;margin:0 0 5px;letter-spacing:-1.4px}.page-head p{margin:0;color:var(--muted);font-size:19px}.head-summary{display:flex;gap:10px;margin-left:auto}.head-summary>div{width:106px;height:70px;border:1px solid var(--line);border-radius:8px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow)}.head-summary b{font-size:23px;line-height:1}.head-summary span{display:block;color:var(--muted);font-size:14px;margin-top:7px}.head-actions{display:flex;gap:14px;margin-left:20px}.btn{height:49px;padding:0 20px;border:1px solid #bfcbd8;border-radius:8px;background:#fff;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;white-space:nowrap}.btn.primary{color:#fff;border-color:#058943;background:linear-gradient(#0ca354,#078b47)}.head-actions .btn{min-width:164px;font-size:16px}.head-actions .btn:last-child{min-width:162px}.head-actions .btn:first-child{font-size:27px}.head-actions .btn:first-child span{font-size:16px}
.page{padding:15px 28px 13px}#hosts.page{padding-inline:0}.filterbar{height:66px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:11px 16px;display:flex;align-items:center;gap:13px;margin-bottom:17px;box-shadow:var(--shadow)}.filterbar select,.search{height:45px;border:1px solid var(--line);border-radius:7px;background:#fff}.filterbar select{min-width:230px;padding:0 18px}.search{width:332px;display:flex;align-items:center;gap:10px;padding:0 15px}.search span{font-size:27px;color:#526781}.search input{border:0;outline:0;width:100%;min-width:0;background:transparent}.view-toggle{display:flex;margin-left:auto;height:45px}.view-toggle button{min-width:139px;border:1px solid var(--line);background:#f7f9fb;font-weight:650}.view-toggle button:first-child{border-radius:7px 0 0 7px}.view-toggle button:last-child{border-radius:0 7px 7px 0}.view-toggle button.active{background:linear-gradient(#0ca354,#078b47);border-color:#078b47;color:#fff}
.hosts-layout{display:grid;grid-template-columns:1fr;gap:10px}.hosts-layout.details-open{grid-template-columns:minmax(0,1fr) 364px}.hosts-content{min-width:0}.groups-grid{display:grid;grid-template-columns:repeat(3,minmax(270px,1fr));gap:16px 12px}.host-group{height:324px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px 16px 16px;box-shadow:var(--shadow)}.host-group>header{height:29px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.host-group h2{font-size:17px;margin:0;display:flex;align-items:center;gap:10px}.host-group header span{font-size:13px;color:#4f6179}.client-icon{font-size:25px;line-height:1}.host-grid{height:252px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px}.host-empty{grid-column:1/-1;align-self:center;justify-self:center;margin:0;color:var(--muted);text-align:center}.host-card{position:relative;border:1px solid transparent;border-radius:8px;background:linear-gradient(135deg,#ecfff0,#dff7e2);padding:13px 7px 9px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-width:0;user-select:none}.host-card.selected{border:2px solid var(--red);box-shadow:0 0 0 1px #fff inset}.host-card.degraded{background:linear-gradient(135deg,#fff9df,#ffefb9)}.host-card.offline{background:linear-gradient(135deg,#fff0f0,#ffd9d9)}.host-card.unknown{background:linear-gradient(135deg,#f2f5f7,#e5e9ed)}.host-card .status-dot{position:absolute;right:14px;top:13px}.host-icon{width:48px;height:43px;margin-bottom:8px;color:#061b34}.host-icon svg{width:100%;height:100%;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}.host-card b{width:100%;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.host-card small{font-size:13px;color:#53677f;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.host-no-ip{position:absolute;left:6px;top:5px;z-index:1;padding:2px 5px;border:1px solid #e2b84f;border-radius:999px;background:#fff4c7;color:#795400;font-size:7px;font-weight:800;line-height:1;text-transform:uppercase;letter-spacing:.02em}.no-ip-label{display:inline-flex!important;align-items:center;min-height:20px;padding:2px 7px;border:1px solid #e2b84f;border-radius:999px;background:#fff4c7;color:#795400;font-size:11px!important;font-weight:800;line-height:1;white-space:nowrap}.groups-grid.all-view .host-no-ip{left:2px;top:2px;padding:1px 3px;font-size:5px}
.status-dot{display:inline-block;width:13px;height:13px;border-radius:50%;background:var(--gray);vertical-align:-1px;margin-right:7px}.status-dot.online{background:#08a84e}.status-dot.degraded{background:var(--yellow)}.status-dot.offline{background:#e00c16}.status-dot.unknown{background:#7e8c9b}.details-panel{height:665px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px 20px;box-shadow:var(--shadow);overflow:auto}.details-head{display:flex;align-items:center;justify-content:space-between;height:49px}.details-head h2,.details-empty h2{font-size:23px;margin:0}.state-pill{padding:11px 17px;border-radius:9px;font-weight:700}.state-pill.online{color:#087d3f;background:#e5f8e9}.state-pill.degraded{color:#956800;background:var(--soft-yellow)}.state-pill.offline{color:#ba1016;background:var(--soft-red)}.state-pill.unknown{color:#546273;background:var(--soft-gray)}.info-list{display:grid;grid-template-columns:125px 1fr;margin:0}.info-list dt,.info-list dd{margin:0;padding:11px 0;border-bottom:1px solid var(--line);min-height:45px}.info-list dt{color:#536883}.info-list dd{font-size:17px}.details-actions{display:grid;gap:10px;margin-top:16px}.details-actions .btn{width:100%}.details-note{text-align:center;color:#7a899b;margin:14px 0 0;font-size:14px}.details-empty p{color:var(--muted);line-height:1.5}.host-legend{min-height:61px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 6px 0;flex-wrap:wrap}.host-status-legend{display:flex;gap:28px;color:#52657c;flex-wrap:wrap}.host-legend small{color:#63748a}.host-legend b{font-weight:400}.host-pagination{display:flex;align-items:center;gap:8px;margin-left:auto;color:#52657c}.host-pagination span{font-size:13px}.host-pagination b{min-width:48px;text-align:center;font-weight:700}.host-pagination button{width:44px;height:44px;border:1px solid var(--line);border-radius:7px;background:#fff;font-size:23px}.host-pagination button:disabled{cursor:default;opacity:.4}
.table-panel,.panel{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:var(--shadow)}.table-wrap,.table-panel{overflow:auto}table{border-collapse:collapse;width:100%;white-space:nowrap}th,td{padding:12px 14px;text-align:left;border-bottom:1px solid #e2e8ee}th{font-size:12px;text-transform:uppercase;color:#52647b;background:#f8fafc}.metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.metric{background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px}.metric strong{display:block;font-size:30px;margin-top:8px}.panel{margin-top:16px}.panel>header{padding:17px 19px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.panel h2{margin:0;font-size:20px}.panel p{margin:4px 0 0;color:var(--muted)}.chart-line{height:130px;padding:28px;display:flex;align-items:center}.chart-line span{height:56px;width:100%;border-top:3px solid var(--green);background:linear-gradient(#13a95624,transparent)}.client-grid{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr));gap:14px}.client-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px}.client-card h2{margin:0}.client-card p{color:var(--muted)}.client-card footer{display:flex;align-items:center;justify-content:space-between}.system-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:16px}.system-grid .panel{margin-top:0}.state{font-weight:700}.state.online{color:var(--green)}.state.degraded{color:#9b6d00}.state.offline{color:var(--red)}.state.unknown{color:var(--gray)}
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 65% 20%,#dff8ea,#eef4fb 55%)}.login-card{width:min(420px,100%);padding:30px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 60px #10243d20}.login-card .brand{padding:0}.login-card h1{font-size:26px;margin:28px 0 8px}.login-card p{color:var(--muted)}.login-card label,dialog label{display:block;font-weight:700;margin-top:15px}.login-card input,dialog input,dialog select{width:100%;padding:11px;border:1px solid var(--line);border-radius:7px;margin-top:6px}.login-card>.btn{width:100%;margin-top:22px}.login-card output,dialog output{display:block;color:var(--red);margin-top:12px}dialog{border:0;border-radius:12px;padding:25px;width:min(520px,calc(100% - 30px));box-shadow:0 24px 80px #071b3150}dialog::backdrop{background:#071b3188}.close{position:absolute;right:13px;top:10px;border:0;background:transparent;font-size:28px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px}
.form-row-three{grid-template-columns:repeat(3,minmax(0,1fr))}.host-form-dialog{width:min(920px,calc(100% - 30px));max-height:calc(100dvh - 34px);overflow:auto}.host-form-dialog h2{margin:0 0 5px}.host-form-dialog>form>p{margin:0;color:var(--muted)}.sgp-picker{margin-top:18px;padding:14px;border:1px solid var(--line);border-radius:9px;background:#f8fbfd}.sgp-picker h3{margin:0 0 2px;font-size:17px}.sgp-name-search{margin-top:8px}.sgp-name-search input{padding-right:34px}.contract-picker-row{display:grid;grid-template-columns:minmax(130px,170px) minmax(0,1fr) minmax(120px,150px) max-content;align-items:end;gap:11px}.contract-search input{font-size:14px}.all-contracts-option{height:42px;display:flex;flex-direction:row;align-items:center;gap:7px;padding:0 11px;border:1px solid var(--line);border-radius:7px;background:#f8fbfd;white-space:nowrap}.all-contracts-option input{width:17px;height:17px;margin:0}.all-contracts-help{display:block;margin:5px 0 0;color:#075b2d}.sgp-client-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;max-height:174px;overflow:auto}.sgp-client-results button{border:1px solid var(--line);border-radius:7px;background:#fff;padding:10px 12px;text-align:left}.sgp-client-results button:hover{border-color:var(--green);background:#f0fff5}.sgp-client-results b,.sgp-client-results span{display:block}.sgp-client-results span{margin-top:3px;color:var(--muted);font-size:13px}.sgp-client-results p{grid-column:1/-1;margin:5px;color:var(--muted)}.sgp-selected-client{display:flex;justify-content:space-between;gap:12px;margin-top:10px;padding:10px 12px;border-left:4px solid var(--green);background:#e8f8ee}.sgp-selected-client span{color:var(--muted)}#sgp-search-status{min-height:18px;color:var(--muted);font-size:13px}.dialog-actions button:disabled{cursor:not-allowed;opacity:.5}.app-feedback{position:fixed;z-index:150;top:18px;right:18px;max-width:min(520px,calc(100vw - 36px));padding:12px 16px;border:1px solid #96dfad;border-radius:9px;background:#e9f9ee;color:#075b2d;box-shadow:0 12px 32px #071b3125;font-weight:700}.app-feedback.warning{border-color:#e9c46a;background:#fff8df;color:#765600}
@media(max-width:1450px){.page-head>div:first-child{min-width:350px}.head-summary>div{width:92px}.filterbar select{min-width:185px}.groups-grid{grid-template-columns:repeat(2,minmax(280px,1fr))}.details-panel{height:665px}}
@media(max-width:1120px){.shell{grid-template-columns:214px minmax(0,1fr)}.page-head{height:auto;min-height:112px;flex-wrap:wrap}.page-head>div:first-child{min-width:280px}.head-summary{order:3;width:100%;margin:0}.filterbar{height:auto;flex-wrap:wrap}.filterbar .search{flex:1}.hosts-layout,.hosts-layout.details-open{grid-template-columns:1fr}.details-panel{height:auto;min-height:360px}.groups-grid{grid-template-columns:repeat(2,minmax(260px,1fr))}.host-legend{margin-bottom:10px}}
@media(max-width:760px){.shell{grid-template-columns:74px minmax(0,1fr)}.sidebar{padding:17px 7px}.sidebar .brand strong,.sidebar nav button:not(.active){font-size:0}.sidebar .brand{padding:0 4px 24px}.sidebar nav button{padding:0;justify-content:center}.sidebar nav button.active{font-size:0}.sidebar footer{display:none}.page-head{padding:14px 16px}.page-head h1{font-size:31px}.page-head p{font-size:15px}.head-summary{overflow:auto}.head-summary>div{min-width:88px}.head-actions{margin-left:auto}.head-actions .btn{min-width:auto;padding:0 13px}.head-actions .btn span{display:none}.page{padding:12px}.filterbar select{min-width:calc(50% - 7px);flex:1}.search{width:100%}.view-toggle{width:100%;margin:0}.view-toggle button{flex:1}.groups-grid{grid-template-columns:1fr}.host-group{height:320px}.host-legend{height:auto;align-items:flex-start}.host-status-legend{gap:10px 18px}.host-pagination{margin-left:0;width:100%;justify-content:center}.host-legend small{display:none}.client-grid,.system-grid,.metrics{grid-template-columns:1fr}.form-row,.form-row-three,.contract-picker-row,.sgp-client-results{grid-template-columns:1fr}}
.host-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}.host-detail-grid>div{min-width:0;min-height:61px;padding:10px 12px;border:1px solid var(--line);border-radius:7px;background:#fff}.host-detail-grid span,.host-detail-grid strong{display:block}.host-detail-grid span{font-size:12px;color:var(--muted);margin-bottom:5px}.host-detail-grid strong{font-size:14px;line-height:1.25;overflow-wrap:anywhere}.host-detail-grid strong.online{color:var(--green)}.host-detail-grid strong.degraded{color:#9b6d00}.host-detail-grid strong.offline{color:var(--red)}.host-detail-grid strong.unknown{color:var(--gray)}
.host-card.created{box-shadow:0 0 0 3px #08a84e,0 10px 24px #08a84e38;animation:host-created 1s ease-in-out 2}@keyframes host-created{50%{transform:scale(.96)}}
.system-grid .panel>header:has(.system-user-actions){flex-wrap:wrap;gap:12px}.system-user-actions{display:flex;flex-wrap:wrap;gap:8px}.system-user-actions .btn{width:112px;height:44px;padding:0 8px}.user-row{cursor:pointer}.user-row:hover td{background:#f6fbf8}.user-row.selected td{background:#effaf3}.user-row:focus-visible{outline:3px solid #66adff;outline-offset:-3px}
.web-login-row:not(.internal-access){grid-template-columns:1fr}
@media(min-width:761px){.contract-picker-row{grid-template-columns:minmax(130px,170px) minmax(0,1fr) max-content}}