@import"https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;900&family=Inter:wght@400;500;600;700&display=swap";:root{--bg: #f8fafc;--bg-2: #f1f5f9;--panel: #ffffff;--border: #e2e8f0;--border-strong: #cbd5e1;--brand: #2563eb;--brand-hover: #1d4ed8;--brand-light: #eff6ff;--brand-dim: #dbeafe;--purple: #7c3aed;--purple-light: #f5f3ff;--text: #0f172a;--text-2: #475569;--text-3: #94a3b8;--green: #16a34a;--green-bg: #f0fdf4;--green-border: #bbf7d0;--red: #dc2626;--red-bg: #fef2f2;--red-border: #fecaca;--amber: #d97706;--amber-bg: #fffbeb;--amber-border: #fde68a;--shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);--shadow: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.04);--shadow-lg: 0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.04);--radius: 10px;--radius-sm: 6px;--sidebar: 260px;--topbar: 60px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{direction:rtl}body{font-family:Cairo,system-ui,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.6}h1,h2,h3{margin:0;font-weight:700;color:var(--text)}p{margin:0}button{font:inherit;cursor:pointer;border:none;background:none}input,select,textarea{font:inherit}a{color:var(--brand);text-decoration:none}.appShell{display:flex;min-height:100vh}.sidebar{position:fixed;top:0;right:0;width:var(--sidebar);height:100vh;background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;z-index:100;overflow-y:auto;overflow-x:hidden}.mainContent{flex:1;margin-right:var(--sidebar);min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}.sidebarLogo{display:flex;align-items:center;gap:10px;padding:20px 16px 16px;border-bottom:1px solid var(--border)}.logoMark{width:36px;height:36px;background:var(--brand);color:#fff;font-size:13px;font-weight:900;display:grid;place-items:center;border-radius:8px;flex-shrink:0;letter-spacing:-.5px}.sidebarLogo>div strong{display:block;font-size:15px;font-weight:900;color:var(--text);line-height:1}.sidebarLogo>div small{display:block;font-size:11px;color:var(--text-3);font-weight:500}.logoAccent{color:var(--brand)}.sidebarNav{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:3px}.sidebarItem{width:100%;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-sm);color:var(--text-2);font-size:13.5px;font-weight:600;transition:all .15s ease;text-align:right;position:relative}.sidebarItem:hover{background:var(--bg-2);color:var(--text)}.sidebarItem.active{background:var(--brand-light);color:var(--brand)}.sidebarItem.active:after{content:"";position:absolute;right:0;top:20%;height:60%;width:3px;background:var(--brand);border-radius:3px 0 0 3px}.sidebarItemIcon{width:18px;height:18px;flex-shrink:0}.sidebarItemLabel{flex:1}.sidebarBadge{background:var(--border-strong);color:var(--text-2);font-size:11px;font-weight:700;padding:1px 6px;border-radius:10px;min-width:20px;text-align:center}.sidebarFooter{padding:12px 10px;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px}.sidebarUser{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.sidebarUser strong{display:block;font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebarUser small{display:block;font-size:11px;color:var(--text-3);font-weight:500}.userAvatar{width:32px;height:32px;background:var(--brand-light);color:var(--brand);font-size:13px;font-weight:900;border-radius:50%;display:grid;place-items:center;flex-shrink:0}.sidebarLogout{width:30px;height:30px;display:grid;place-items:center;border-radius:var(--radius-sm);color:var(--text-3);transition:all .15s;flex-shrink:0}.sidebarLogout:hover{background:var(--red-bg);color:var(--red)}.sidebarOverlay{display:none;position:fixed;inset:0;background:#0006;z-index:99}.topbar{height:var(--topbar);background:var(--panel);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;position:sticky;top:0;z-index:90;gap:12px}.topbarLeft{display:flex;align-items:center;gap:12px}.topbarRight{display:flex;align-items:center;gap:8px}.pageTitle{font-size:16px;font-weight:700;color:var(--text)}.mobileMenuBtn{display:none;width:36px;height:36px;border-radius:var(--radius-sm);background:var(--bg-2);color:var(--text-2);place-items:center}.liveBadge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-2);background:var(--bg-2);border:1px solid var(--border);border-radius:20px;padding:4px 10px}.liveDot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:livePulse 2s ease-in-out infinite}@keyframes livePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.pageBody{padding:20px;flex:1}.tabContent{display:flex;flex-direction:column;gap:16px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}.panelHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 12px;border-bottom:1px solid var(--border)}.panelHead h2{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--text);margin:0}.panelHead h2 svg{color:var(--brand);flex-shrink:0}.panelActions{display:flex;align-items:center;gap:8px}.statsGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.statCard{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;align-items:flex-start;gap:14px;box-shadow:var(--shadow-sm);transition:all .15s ease;position:relative;overflow:hidden}.statCard:before{content:"";position:absolute;top:0;right:0;width:3px;height:100%;border-radius:0 var(--radius) var(--radius) 0}.statCard-blue:before{background:var(--brand)}.statCard-green:before{background:var(--green)}.statCard-red:before{background:var(--red)}.statCard-purple:before{background:var(--purple)}.statCard-amber:before{background:var(--amber)}.statCard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.statIcon{width:40px;height:40px;border-radius:var(--radius-sm);display:grid;place-items:center;flex-shrink:0}.statCard-blue .statIcon{background:var(--brand-light);color:var(--brand)}.statCard-green .statIcon{background:var(--green-bg);color:var(--green)}.statCard-red .statIcon{background:var(--red-bg);color:var(--red)}.statCard-purple .statIcon{background:var(--purple-light);color:var(--purple)}.statCard-amber .statIcon{background:var(--amber-bg);color:var(--amber)}.statBody{flex:1;min-width:0}.statValue{font-size:20px;font-weight:800;color:var(--text);font-family:Inter,sans-serif;line-height:1.1}.statLabel{font-size:12px;font-weight:600;color:var(--text-2);margin-top:2px}.statSub{font-size:11px;color:var(--text-3);font-weight:500;margin-top:2px}.overviewGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.dualGaugeLayout{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}.gaugeCard{display:flex;justify-content:center;align-items:center;min-height:200px}.chartPanel{padding:12px}.bottomGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.miniCards{padding:12px;display:grid;gap:8px}.miniCard{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px}.miniCardHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.miniCardHead strong{font-size:13px;font-weight:700}.miniCardStats{display:grid;gap:6px}.miniStat{display:grid;grid-template-columns:40px 1fr 36px;align-items:center;gap:6px;font-size:12px;color:var(--text-2)}.miniStat span:last-child{text-align:left;font-family:Inter,sans-serif;font-size:11px;font-weight:600}.progressBar{height:5px;background:var(--border);border-radius:99px;overflow:hidden}.progressFill{height:100%;border-radius:99px;transition:width .5s ease}.listItems{padding:4px 12px;display:flex;flex-direction:column}.listItem{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}.listItem:last-child{border-bottom:none}.listItem>div strong{display:block;font-size:13px;font-weight:700}.listItem>div small{display:block;font-size:11px;color:var(--text-3)}.bpsValue{font-size:13px;font-weight:700;color:var(--text-2);font-family:Inter,sans-serif;white-space:nowrap}.ifaceRates{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.downRate{font-size:11px;font-weight:700;color:var(--brand);font-family:Inter,sans-serif}.upRate{font-size:11px;font-weight:700;color:var(--purple);font-family:Inter,sans-serif}.queueGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;padding:12px}.queueChip{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px}.queueChip strong{display:block;font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queueChip span{display:block;font-size:11px;color:var(--text-3);margin-top:2px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:700;cursor:pointer;border:1px solid transparent;transition:all .15s ease;font-family:inherit}.btn-primary{background:var(--brand);color:#fff}.btn-primary:hover{background:var(--brand-hover)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:var(--bg-2);color:var(--text);border-color:var(--border)}.btn-secondary:hover{background:var(--border)}.btn-ghost{background:transparent;color:var(--text-2);border-color:var(--border)}.btn-ghost:hover{background:var(--bg-2);color:var(--text)}.btn-danger{background:var(--red-bg);color:var(--red);border-color:var(--red-border)}.btn-danger:hover{background:var(--red);color:#fff}.btn.full{width:100%}.iconBtn{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--bg-2);color:var(--text-2);border:1px solid var(--border);transition:all .15s ease;cursor:pointer;font:inherit;flex-shrink:0}.iconBtn:hover{background:var(--brand-light);color:var(--brand);border-color:var(--brand-dim)}.iconBtn.danger:hover{background:var(--red-bg);color:var(--red);border-color:var(--red-border)}input,select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 10px;background:var(--panel);color:var(--text);font-size:13px;outline:none;transition:border-color .15s,box-shadow .15s;width:100%}input:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px #2563eb1a}input::placeholder{color:var(--text-3)}.formGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:14px 16px}.formGrid8{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:14px 16px}.formField{display:flex;flex-direction:column;gap:4px}.formField label{font-size:12px;font-weight:700;color:var(--text-2)}.checkField{justify-content:flex-end;padding-bottom:2px}.checkLabel{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text-2);cursor:pointer}.checkLabel input[type=checkbox]{width:16px;height:16px;cursor:pointer}.formActions{display:flex;justify-content:flex-end;gap:8px;padding:10px 16px 14px;border-top:1px solid var(--border)}.serverForm,.clientForm{display:flex;flex-direction:column}.circleGauge{display:flex;flex-direction:column;align-items:center;gap:4px}.circleGaugeInner{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}.cgNum{font-family:Inter,sans-serif;font-size:15px;font-weight:800;line-height:1}.cgUnit{font-family:Inter,sans-serif;font-size:10px;font-weight:700;color:var(--text-3);line-height:1;margin-top:1px}.cgLabel{font-size:11px;font-weight:700;color:var(--text-2);text-align:center;white-space:nowrap}.srvCircles{display:flex;justify-content:space-around;align-items:flex-start;padding:10px 0 4px;gap:4px}.serverCard2{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:all .15s ease}.serverCard2:hover{border-color:var(--brand-dim);box-shadow:var(--shadow)}.sc2Header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 10px;border-bottom:1px solid var(--border);background:var(--bg-2)}.sc2Info{flex:1;min-width:0}.sc2NameRow{display:flex;align-items:center;gap:8px;margin-bottom:3px}.sc2NameRow strong{font-size:15px;font-weight:800}.sc2Circles{display:flex;justify-content:center;align-items:flex-start;gap:32px;padding:20px 16px 12px}.sc2Metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 16px 14px;border-top:1px solid var(--border)}.sc2Metric{display:grid;grid-template-columns:36px 1fr 36px;align-items:center;gap:6px;font-size:12px;color:var(--text-2);font-weight:600}.sc2Metric span:last-child{text-align:left;font-family:Inter,sans-serif;font-size:11px;font-weight:700}.sc2Error{padding:6px 16px 10px;font-size:12px;color:var(--red);font-weight:600}.serverList{display:flex;flex-direction:column;gap:6px;padding:10px}.serverCard{display:grid;grid-template-columns:48px 1fr 1fr 1fr 1fr auto;align-items:center;gap:12px;padding:12px 14px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);transition:all .15s}.serverCard:hover{border-color:var(--brand-dim);background:var(--brand-light)}.serverCardGauge{display:flex;justify-content:center}.serverCardInfo strong{display:block;font-size:13.5px;font-weight:700}.serverCardInfo small{display:block;font-size:11px;color:var(--text-3);font-family:Inter,sans-serif}.serverCardStat{display:flex;flex-direction:column;gap:3px}.serverCardStat strong{font-size:13px;font-weight:700;font-family:Inter,sans-serif}.serverCardStat small{font-size:11px;color:var(--text-3)}.serverCardStat em.errorText{font-style:normal;font-size:11px;color:var(--red);display:block;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cardActions{display:flex;gap:5px}.searchFilterRow{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);flex-wrap:wrap}.searchBox{display:flex;align-items:center;gap:8px;flex:1;min-width:200px;max-width:360px;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 10px;background:var(--panel);color:var(--text-3);transition:all .15s}.searchBox:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px #2563eb1a;color:var(--text-2)}.searchBox input{border:none;background:transparent;height:auto;padding:0;box-shadow:none;color:var(--text);font-size:13px}.searchBox input:focus{box-shadow:none}.clearSearch{color:var(--text-3);padding:2px;border-radius:4px;display:grid;place-items:center;transition:all .1s;font:inherit}.clearSearch:hover{background:var(--border);color:var(--text)}.filterGroup{display:flex;align-items:center;gap:4px}.filterBtn{padding:5px 11px;border-radius:20px;font-size:12px;font-weight:700;border:1px solid var(--border);background:var(--panel);color:var(--text-2);cursor:pointer;transition:all .15s;font-family:inherit}.filterBtn:hover{background:var(--bg-2);color:var(--text)}.filterBtn.active{background:var(--brand);color:#fff;border-color:var(--brand)}.filterBtn.online.active{background:var(--green);border-color:var(--green)}.filterBtn.offline.active{background:var(--red);border-color:var(--red)}.filterSelect{height:34px;padding:0 8px;font-size:12.5px;border-radius:var(--radius-sm);min-width:130px}.filterSelect.full{width:100%;max-width:400px}.resultCount{font-size:12px;color:var(--text-3);font-weight:600;margin-right:auto}.clientTable{overflow:hidden}.tableHead{display:grid;grid-template-columns:36px 1fr 100px 100px 100px 110px auto;align-items:center;gap:8px;padding:8px 14px;background:var(--bg-2);border-bottom:1px solid var(--border);font-size:11.5px;font-weight:700;color:var(--text-2)}.tableBody{display:flex;flex-direction:column;max-height:620px;overflow-y:auto}.tableRow{display:grid;grid-template-columns:36px 1fr 100px 100px 100px 110px auto;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);transition:background .1s}.tableRow:last-child{border-bottom:none}.tableRow:hover{background:var(--bg-2)}.tableRow.online:hover{background:var(--green-bg)}.clientInfo strong{display:block;font-size:13px;font-weight:700}.clientInfo small{display:block;font-size:11px;color:var(--text-3);font-family:Inter,sans-serif}.rateVal{font-family:Inter,sans-serif;font-size:12.5px;font-weight:700}.rateVal.down{color:var(--brand)}.rateVal.up{color:var(--purple)}.rowActions{display:flex;gap:4px}.statusDot{width:10px;height:10px;border-radius:50%;background:var(--red);margin:0 auto;flex-shrink:0}.statusDot[data-online=true]{background:var(--green);box-shadow:0 0 0 3px #16a34a26;animation:statusPulse 2s ease-in-out infinite}@keyframes statusPulse{0%,to{box-shadow:0 0 0 3px #16a34a26}50%{box-shadow:0 0 0 5px #16a34a14}}.clientDetail .detailGrid{display:grid;grid-template-columns:200px 200px 1fr 1fr;gap:12px;padding:14px}.detailCard{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;display:flex;flex-direction:column;gap:6px}.detailCard strong{font-size:13px;font-weight:700;padding-bottom:4px;border-bottom:1px solid var(--border)}.detailRow{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px}.detailRow>span:first-child{color:var(--text-2);font-weight:600;flex-shrink:0}.detailRow>span:last-child{color:var(--text);font-weight:700;text-align:left;overflow:hidden;text-overflow:ellipsis}.detailActions{display:flex;gap:8px;padding:0 14px 14px;flex-wrap:wrap}.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;font-size:11.5px;font-weight:700;white-space:nowrap}.badge-green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}.badge-red{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}.badge-blue{background:var(--brand-light);color:var(--brand);border:1px solid var(--brand-dim)}.badge-gray{background:var(--bg-2);color:var(--text-2);border:1px solid var(--border)}.badge-amber{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border)}.reportControls{display:flex;align-items:flex-end;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}.rangeGroup{display:flex;gap:4px;align-items:center}.kpiGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:14px 16px}.kpiCard{display:flex;align-items:center;gap:12px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px}.kpiCard strong{display:block;font-size:16px;font-weight:800;font-family:Inter,sans-serif}.kpiCard span{display:block;font-size:11px;color:var(--text-2);font-weight:600;margin-top:2px}.kpiIcon{width:36px;height:36px;border-radius:var(--radius-sm);display:grid;place-items:center;flex-shrink:0}.kpiCard-blue .kpiIcon{background:var(--brand-light);color:var(--brand)}.kpiCard-purple .kpiIcon{background:var(--purple-light);color:var(--purple)}.kpiCard-green .kpiIcon{background:var(--green-bg);color:var(--green)}.kpiCard-amber .kpiIcon{background:var(--amber-bg);color:var(--amber)}.reportTable{border-top:1px solid var(--border);margin:0;overflow-x:auto}.reportTableHead{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr .5fr;gap:8px;padding:8px 16px;background:var(--bg-2);font-size:11.5px;font-weight:700;color:var(--text-2);border-bottom:1px solid var(--border)}.reportTableRow{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr .5fr;gap:8px;padding:8px 16px;font-size:12.5px;border-bottom:1px solid var(--border);transition:background .1s}.reportTableRow:last-child{border-bottom:none}.reportTableRow:hover{background:var(--bg-2)}.reportTableRow .down{color:var(--brand);font-weight:700}.reportTableRow .up{color:var(--purple);font-weight:700}.logsList{display:flex;flex-direction:column;max-height:600px;overflow-y:auto}.logItem{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--border);transition:background .1s}.logItem:last-child{border-bottom:none}.logItem:hover{background:var(--bg-2)}.logIcon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}.logIcon-green{background:var(--green-bg);color:var(--green)}.logIcon-red{background:var(--red-bg);color:var(--red)}.logIcon-blue{background:var(--brand-light);color:var(--brand)}.logBody{flex:1;min-width:0}.logMeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.logClientName{font-size:13px;font-weight:700}.logChange{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:11.5px;color:var(--text-2);font-family:Inter,sans-serif}.logOld{text-decoration:line-through;color:var(--text-3)}.logNew{font-weight:700;color:var(--text)}.logTime{font-size:11px;color:var(--text-3);font-weight:500;white-space:nowrap}.settingsBlock{display:flex;flex-direction:column}.settingRow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid var(--border)}.settingRow:last-child{border-bottom:none}.settingRow strong{display:block;font-size:13.5px;font-weight:700}.settingRow p{font-size:12px;color:var(--text-2);margin-top:2px}.infoBox{margin:0 16px 16px;background:var(--brand-light);border:1px solid var(--brand-dim);border-radius:var(--radius-sm);padding:14px 16px;font-size:13px;color:var(--text);line-height:1.8}.infoBox strong{font-weight:700;display:block;margin-bottom:6px}.infoBox ol,.infoBox ul{padding-right:18px}.infoBox li{margin-bottom:4px}.infoBox code{background:#2563eb1a;color:var(--brand);padding:1px 5px;border-radius:4px;font-family:Courier New,monospace;font-size:12px}.toast{position:fixed;bottom:20px;left:20px;z-index:9999;display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--panel);border:1px solid var(--border);border-left:4px solid var(--brand);border-radius:var(--radius);box-shadow:var(--shadow-lg);font-size:13.5px;font-weight:600;color:var(--text);min-width:240px;max-width:380px;animation:toastIn .3s ease;cursor:pointer}.toast-success{border-left-color:var(--green)}.toast-error{border-left-color:var(--red)}.toast-success svg{color:var(--green)}.toast-error svg{color:var(--red)}.toast-info svg{color:var(--brand)}.toast span{flex:1}.toastClose{margin-right:auto;color:var(--text-3);display:grid;place-items:center;padding:2px;border-radius:4px;font:inherit}.toastClose:hover{background:var(--border);color:var(--text)}@keyframes toastIn{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}.speedometer3d{display:flex;justify-content:center;align-items:center;padding:4px}.carGauge{--accent: #2563eb;position:relative;width:min(100%,260px);height:200px;background:linear-gradient(180deg,#fff,#f8fafc);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}.carGaugeSvg{position:absolute;inset:4px 6px 0;width:calc(100% - 12px);height:188px;overflow:visible}.carGaugeTrack{fill:none;stroke:#e2e8f0;stroke-width:20;stroke-linecap:round}.carGaugeFill{fill:none;stroke:var(--accent);stroke-width:20;stroke-linecap:round;stroke-dasharray:100;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1)}.carGaugeTicks line{stroke:#94a3b8;stroke-width:1.5;stroke-linecap:round}.carGaugeTicks line.major{stroke:#64748b;stroke-width:2.5}.carGaugeLabels text{dominant-baseline:middle;fill:#475569;font-size:13px;font-weight:700;text-anchor:middle;font-family:Inter,sans-serif}.carNeedle{stroke:#1e3a8a;stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 2px 4px rgba(30,58,138,.3));transition:x2 .7s cubic-bezier(.4,0,.2,1),y2 .7s cubic-bezier(.4,0,.2,1)}.carHubOuter{fill:#fff;stroke:var(--accent);stroke-width:4}.carHubInner{fill:var(--accent);stroke:#fff;stroke-width:2}.carValue{fill:#0f172a;font-size:24px;font-weight:800;text-anchor:middle;font-family:Inter,sans-serif}.carUnit{fill:#64748b;font-size:12px;font-weight:700;text-anchor:middle;font-family:Inter,sans-serif}.carGaugeLabel{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:12px;font-weight:700;color:var(--text-2);white-space:nowrap}.miniGauge{--offset: 100;position:relative;width:42px;height:42px}.miniGauge svg{width:42px;height:42px;transform:rotate(-90deg)}.miniGaugeTrack{fill:none;stroke:var(--border);stroke-width:5}.miniGaugeFill{fill:none;stroke:var(--brand);stroke-width:5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:var(--offset);transition:stroke-dashoffset .5s ease}.miniGauge span{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;font-weight:800;color:var(--text-2);font-family:Inter,sans-serif}.loginShell{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#eff6ff,#f8fafc,#f5f3ff);padding:16px}.loginPanel{width:min(400px,100%);background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);padding:32px;display:flex;flex-direction:column;gap:14px}.loginLogo{display:flex;justify-content:center;margin-bottom:4px}.loginLogo .logoMark{width:48px;height:48px;font-size:16px;border-radius:12px}.loginPanel h1{text-align:center;font-size:22px;font-weight:900;color:var(--text)}.loginPanel p{text-align:center;font-size:13px;color:var(--text-2);margin-top:-6px}.alertBox{border-radius:var(--radius-sm);padding:10px 12px}.alertBox-error{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}.topbarSearchTrigger{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--bg-2);border:1px solid var(--border);border-radius:20px;color:var(--text-2);font-size:12.5px;font-weight:600;cursor:pointer;transition:all .15s ease;margin-right:12px;font-family:inherit}.topbarSearchTrigger:hover{background:var(--panel);border-color:var(--brand-dim);color:var(--brand)}.topbarSearchTrigger kbd{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-size:10px;font-family:monospace;display:flex;align-items:center;gap:2px;color:var(--text-3)}.bellBadge{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-size:10px;font-weight:900;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;line-height:1;border:2px solid var(--panel)}.notificationsDropdown{position:absolute;top:42px;left:0;width:320px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);z-index:100;overflow:hidden;animation:dropdownFade .15s ease}@keyframes dropdownFade{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.dropdownHead{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--bg-2)}.dropdownHead strong{font-size:12.5px;font-weight:800;display:flex;align-items:center;gap:6px}.dropdownList{max-height:280px;overflow-y:auto;display:flex;flex-direction:column}.dropdownItem{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);font-size:12px;transition:background .1s}.dropdownItem:hover{background:var(--brand-light)}.logDot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.logDot.online{background:var(--green)}.logDot.offline{background:var(--red)}.logText{flex:1;min-width:0;display:flex;flex-direction:column}.logText strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.logText small{font-size:11px;color:var(--text-2)}.logTime{font-size:10px;color:var(--text-3);white-space:nowrap}.quickSearchOverlay{position:fixed;inset:0;background:#0f172a99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10000;display:grid;place-items:start center;padding-top:10vh;animation:modalFadeIn .15s ease}.quickSearchDialog{width:min(600px,94vw);background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden}.quickSearchHead{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);background:var(--bg-2)}.quickSearchHead input{flex:1;border:none;background:transparent;font-size:15px;font-weight:600;outline:none;font-family:inherit}.quickSearchHead input:focus{box-shadow:none}.quickSearchResults{max-height:360px;overflow-y:auto;padding:8px}.searchResultItem{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s ease}.searchResultItem:hover{background:var(--brand-light)}.resultIcon{width:36px;height:36px;border-radius:8px;background:var(--brand-light);color:var(--brand);display:grid;place-items:center}.resultInfo{flex:1;min-width:0;display:flex;flex-direction:column}.resultInfo strong{font-size:14px;font-weight:800}.resultInfo small{font-size:11.5px;color:var(--text-2)}.printCardContainer{max-width:650px;width:100%;margin:auto;display:flex;flex-direction:column;gap:16px;padding:20px}.printCardHeader{display:flex;align-items:center;justify-content:space-between;color:#fff}.printBrand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800}.printableMembershipCard{background:#fff;border:2px solid var(--brand);border-radius:16px;padding:24px;box-shadow:0 10px 30px #00000026;display:flex;flex-direction:column;gap:20px;color:#0f172a}.cardTop{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e8f0;padding-bottom:14px}.cardTitle h3{font-size:18px;font-weight:900;color:#2563eb}.cardTitle small{font-size:11px;color:#64748b;font-family:monospace}.cardContentGrid{display:grid;grid-template-columns:1fr 170px;gap:20px;align-items:center}.cardDetails{display:flex;flex-direction:column;gap:10px}.cardField{display:flex;flex-direction:column;gap:2px}.cardField label{font-size:11px;font-weight:700;color:#64748b}.cardField strong{font-size:16px;font-weight:900;color:#0f172a}.cardField span{font-size:13px;font-weight:600;color:#334155}.cardField code{font-size:13px;font-weight:700;color:#2563eb;background:#eff6ff;padding:2px 8px;border-radius:4px;display:inline-block;width:fit-content}.cardQrSection{display:flex;flex-direction:column;align-items:center;gap:8px;background:#f8fafc;padding:12px;border-radius:12px;border:1px solid #e2e8f0}.qrImage{width:130px;height:130px;border-radius:8px}.cardQrSection small{font-size:10px;font-weight:700;color:#475569;text-align:center;line-height:1.3}.cardFooter{border-top:1px dashed #cbd5e1;padding-top:12px;text-align:center}.urlText{font-family:monospace;font-size:12px;font-weight:700;color:#2563eb;word-break:break-all}.printCardActions{display:flex;justify-content:flex-end;gap:10px}.clientModalOverlay{position:fixed;inset:0;z-index:9999;background:var(--bg);overflow-y:auto;display:flex;flex-direction:column;animation:modalFadeIn .2s ease-out}@keyframes modalFadeIn{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.clientModalHeader{height:64px;background:var(--panel);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:20;box-shadow:var(--shadow-sm)}.clientModalTitle{display:flex;align-items:center;gap:12px}.clientModalTitle h2{font-size:18px;font-weight:800;color:var(--text)}.modalCloseBtn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:var(--radius-sm);background:var(--red-bg);color:var(--red);border:1px solid var(--red-border);font-weight:800;font-size:13.5px;cursor:pointer;transition:all .15s ease;font-family:inherit}.modalCloseBtn:hover{background:var(--red);color:#fff;box-shadow:0 2px 8px #dc262640}.clientModalBody{max-width:1020px;width:100%;margin:0 auto;padding:24px 20px 48px;display:flex;flex-direction:column;gap:16px}.liveLinkBox{background:var(--brand-light);border:1px solid var(--brand-dim);border-radius:var(--radius-sm);padding:14px 16px;margin:10px 0;display:flex;flex-direction:column;gap:10px}.liveLinkHead{display:flex;flex-direction:column;gap:2px}.liveLinkHead strong{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--brand)}.liveLinkHead small{font-size:12px;color:var(--text-2)}.liveLinkInputGroup{display:flex;align-items:center;gap:8px}.liveUrlInput{flex:1;direction:ltr;text-align:left;background:var(--panel);font-weight:600;color:var(--brand)}.liveShell{max-width:920px;margin:0 auto;padding:24px 20px 40px;display:flex;flex-direction:column;gap:16px}.liveHeader{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:8px}.liveBrand{display:flex;align-items:center;gap:10px}.liveBrand strong{font-size:16px;font-weight:900}.liveBrand small{display:block;font-size:11px;color:var(--text-3)}.liveHero{background:linear-gradient(135deg,#fff,#eff6ff);border:1px solid var(--brand-dim);border-radius:var(--radius);padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:var(--shadow-sm)}.liveHeroInfo h1{font-size:clamp(22px,4vw,30px);font-weight:900;color:var(--text)}.liveHeroInfo p{font-size:13px;color:var(--brand);margin-top:4px;font-weight:700}.liveStatus{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:20px;font-size:13.5px;font-weight:800;white-space:nowrap}.liveStatus.online{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);box-shadow:0 0 0 3px #16a34a1f}.liveStatus.offline{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}.liveStats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.liveMeters{padding:0}.speedPair{display:grid;grid-template-columns:1fr 1fr;gap:16px}.muted{color:var(--text-3);font-weight:500}.small{font-size:11.5px}.monospace{font-family:Courier New,monospace;font-size:12px}.emptyState{text-align:center;padding:30px 16px;color:var(--text-3);font-size:13px;font-weight:600}.loadingState{text-align:center;padding:40px 16px;color:var(--text-2);font-size:14px}.centerScreen{min-height:100vh;display:grid;place-items:center;background:var(--bg);font-size:15px;color:var(--text-2)}.hoverRow:hover{background:var(--brand-light)!important}.deviceCard{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-sm);transition:all .15s ease}.deviceCard:hover{border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-1px)}.spinning{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1200px){.statsGrid{grid-template-columns:repeat(2,1fr)}.overviewGrid{grid-template-columns:1fr}.kpiGrid,.detailGrid{grid-template-columns:repeat(2,1fr)}.formGrid8{grid-template-columns:repeat(4,1fr)}}@media(max-width:1024px){:root{--sidebar: 56px}.sidebarItemLabel,.sidebarBadge{display:none}.sidebarLogo>div{display:none}.sidebarFooter .sidebarUser>div{display:none}.sidebarItem{justify-content:center;padding:10px}.sidebarItem.active:after{display:none}.bottomGrid{grid-template-columns:1fr 1fr}.serverCard{grid-template-columns:42px 1fr 1fr auto}.serverCard .serverCardStat:nth-child(4),.serverCard .serverCardStat:nth-child(5){display:none}}@media(max-width:768px){.sidebar{transform:translate(100%);transition:transform .3s ease}.sidebar.open{transform:translate(0)}.sidebarOverlay{display:block}.mainContent{margin-right:0}.mobileMenuBtn{display:grid}.statsGrid{grid-template-columns:1fr 1fr}.overviewGrid,.bottomGrid{grid-template-columns:1fr}.dualGaugeLayout,.speedPair{grid-template-columns:1fr 1fr}.tableHead,.tableRow{grid-template-columns:28px 1fr auto}.tableHead span:nth-child(n+3):nth-child(-n+6),.tableRow>*:nth-child(n+3):nth-child(-n+6){display:none}.formGrid,.formGrid8,.kpiGrid,.liveStats{grid-template-columns:1fr 1fr}.serverCard{grid-template-columns:1fr auto}.serverCardGauge{display:none}.clientDetail .detailGrid{grid-template-columns:1fr 1fr}}@media(max-width:480px){.pageBody{padding:12px}.statsGrid{grid-template-columns:1fr}.liveStats{grid-template-columns:1fr 1fr}.kpiGrid{grid-template-columns:1fr}}