:root{--bg: #0e1118;--panel: #161b27;--panel-2: #1d2433;--border: #262e3f;--text: #e6eaf2;--muted: #8a93a6;--accent: #5b9dff}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.app{padding:16px;max-width:1400px;margin:0 auto}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.brand{font-size:20px;font-weight:700;letter-spacing:.5px}.conn{display:flex;align-items:center;gap:8px;font-size:13px}.conn.on{color:#39d98a}.conn.off{color:#ff6b6b}.dot-pulse{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:pulse 1.8s infinite}@keyframes pulse{0%{box-shadow:0 0 #39d98a80}70%{box-shadow:0 0 0 8px #39d98a00}}.stat-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px}.stat-value{font-size:28px;font-weight:700}.stat-label{font-size:12px;color:var(--muted);margin-top:4px}.grid-main{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-bottom:16px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px}.panel-title{font-size:15px;font-weight:600}.panel-sub{font-size:12px;color:var(--muted)}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.map-panel{padding:0;height:460px;overflow:hidden}.map-pin{width:14px;height:14px;border-radius:50%;background:#5b9dff;border:2px solid #fff;cursor:pointer}.map-pin.pin-can{background:#39d98a}.map-pin.pin-active{transform:scale(1.4);box-shadow:0 0 0 4px #5b9dff4d}.popup{color:#111;font-size:12px}.popup .muted{color:#666}.table-panel{height:460px;display:flex;flex-direction:column}.table-scroll{overflow-y:auto;margin-top:8px}table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;color:var(--muted);font-weight:500;padding:8px;position:sticky;top:0;background:var(--panel);border-bottom:1px solid var(--border)}td{padding:8px;border-bottom:1px solid var(--border)}tbody tr{cursor:pointer}tbody tr:hover,.row-active{background:var(--panel-2)}.mono{font-family:ui-monospace,Cascadia Code,monospace;font-size:12px}.muted{color:var(--muted)}.center{text-align:center}.dot{display:inline-block;width:8px;height:8px;border-radius:50%}.dot.ok{background:#39d98a}.dot.off{background:#4a5263}.gauge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}.gauge{display:flex;flex-direction:column;align-items:center}.gauge-val{fill:var(--text);font-size:22px;font-weight:700}.gauge-unit{fill:var(--muted);font-size:10px}.gauge-label{font-size:12px;color:var(--muted);margin-top:2px}.gauges-empty{text-align:center;color:var(--muted);padding:40px}.kv-grid{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:8px 16px;font-size:13px}.kv-grid span{color:var(--muted)}.kv-grid b{text-align:right}@media (max-width: 900px){.stat-row{grid-template-columns:repeat(2,1fr)}.grid-main{grid-template-columns:1fr}.gauge-grid{grid-template-columns:repeat(2,1fr)}}.table-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}.search{background:var(--panel-2);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:6px 10px;font-size:13px;width:200px;outline:none}.search:focus{border-color:var(--accent)}.search::placeholder{color:var(--muted)}.head-right{display:flex;align-items:center;gap:10px}.badge-net{background:#5b9dff26;color:#5b9dff;display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600}.sidebar-brand{font-size:16px;font-weight:700;margin-bottom:16px}.sidebar-nav{display:flex;flex-direction:column;gap:4px;flex:1}.nav-item{display:flex;align-items:center;gap:10px;text-align:left;background:none;border:none;color:var(--muted);cursor:pointer;padding:10px 12px;border-radius:8px;font-size:14px}.nav-item:hover{background:var(--panel-2);color:var(--text)}.nav-item.active{background:var(--panel-2);color:var(--accent)}.nav-icon{font-size:14px;width:16px;text-align:center}.sidebar-conn{display:flex;align-items:center;gap:8px;font-size:12px}.sidebar-conn.on{color:#39d98a}.sidebar-conn.off{color:#ff6b6b}.content{flex:1;padding:20px;max-width:1500px}.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.error{color:#ff6b6b}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600}.status-dot{width:8px;height:8px;border-radius:50%}.status-row{cursor:pointer;border-left:3px solid transparent}.status-row.status-live{border-left-color:#39d98a}.status-row.status-stopped{border-left-color:#ffb020;background:#ffb0200d}.status-row.status-inactive{border-left-color:#ff6b6b;background:#ff6b6b0f}.table-panel-full{max-height:calc(100vh - 160px);display:flex;flex-direction:column}.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.mini-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}.mini-table th{text-align:left;color:var(--muted);font-weight:500;padding:6px;border-bottom:1px solid var(--border)}.mini-table td{padding:6px;border-bottom:1px solid var(--border)}.panel+.panel,.stat-row+.panel{margin-top:0}.drawer-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:40}.drawer{position:fixed;top:0;right:0;height:100vh;width:380px;z-index:50;background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;animation:slideIn .2s ease}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;padding:16px;border-bottom:1px solid var(--border)}.drawer-title{font-size:16px;font-weight:700}.drawer-close{background:none;border:none;color:var(--muted);font-size:24px;cursor:pointer;line-height:1}.drawer-body{overflow-y:auto;padding:8px 16px}.drawer-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px}.drawer-row span{color:var(--muted)}.drawer-row b{text-align:right;word-break:break-word}@media (max-width: 900px){.dash-grid{grid-template-columns:1fr}.drawer{width:100%}}.sidebar-brand img{width:100%;height:auto;object-fit:contain}.auth-logo{width:60%;height:auto;object-fit:contain;margin-bottom:16px;margin-left:auto;margin-right:auto;display:block}.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}.auth-card{width:500px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:28px}.auth-title{font-size:20px;font-weight:700;text-align:center;margin-bottom:8px}.auth-sub{font-size:13px;color:var(--muted);margin-bottom:18px}.auth-label{display:block;font-size:12px;color:var(--muted);margin:12px 0 4px}.auth-input{width:100%;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px;font-size:14px;outline:none}.auth-input:focus{border-color:var(--accent)}.auth-btn{width:100%;margin-top:18px;background:var(--accent);color:#07101f;border:none;border-radius:8px;padding:11px;font-size:14px;font-weight:600;cursor:pointer}.auth-btn.inline{width:auto;margin-top:0;padding:10px 16px}.auth-btn:disabled{opacity:.6;cursor:default}.auth-error{color:#ff6b6b;font-size:13px;background:#ff6b6b1a;padding:8px 10px;border-radius:8px}.auth-ok{color:#39d98a;font-size:13px;background:#39d98a1a;padding:8px 10px;border-radius:8px}.add-admin-row{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}.add-admin-row .search{width:220px}.sidebar-user{margin-top:8px;border-top:1px solid var(--border);padding-top:12px}.su-name{font-size:13px;font-weight:600;margin-bottom:6px}.logout-btn{width:100%;background:var(--panel-2);border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:8px;font-size:13px;cursor:pointer}.logout-btn:hover{color:#ff6b6b;border-color:#ff6b6b}.auth-title-highlight{color:var(--accent)}.content{flex:1;padding:20px;max-width:1500px;min-width:0}.panel-title{font-size:15px;font-weight:600;margin:0 0 12px}.data-table{width:100%;border-collapse:collapse;font-size:13px}.data-table th{text-align:left;color:var(--muted);font-weight:500;padding:10px 8px;border-bottom:1px solid var(--border)}.pagination{display:flex;justify-content:space-between;align-items:center;margin-top:12px;flex-wrap:wrap;gap:8px}.pg-info{font-size:12px;color:var(--muted)}.pg-controls{display:flex;gap:4px}.pg-btn{min-width:30px;height:30px;padding:0 8px;background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:6px;cursor:pointer;font-size:13px}.pg-btn:hover:not(:disabled){border-color:var(--accent)}.pg-btn.active{background:var(--accent);color:#07101f;border-color:var(--accent);font-weight:600}.pg-btn:disabled{opacity:.4;cursor:default}.pg-dots{color:var(--muted);padding:0 4px;align-self:center}.search.full{width:100%}.map-side-list{display:flex;flex-direction:column;gap:2px;overflow-y:auto}.map-side-item{display:flex;align-items:center;gap:8px;text-align:left;background:none;border:none;color:var(--text);cursor:pointer;padding:8px;border-radius:6px;font-size:12px}.map-side-item:hover{background:var(--panel-2)}.map-side-item.active{background:var(--panel-2);color:var(--accent)}.msi-id{font-family:ui-monospace,monospace;flex:1}.msi-ago{font-size:11px}@media (max-width: 1000px){.map-layout{grid-template-columns:1fr}.map-side{height:auto;max-height:240px}}.del-btn{background:#ff6b6b1a;border:1px solid rgba(255,107,107,.3);color:#ff6b6b;border-radius:6px;padding:5px 12px;font-size:12px;cursor:pointer}.del-btn:hover:not(:disabled){background:#ff6b6b33;border-color:#ff6b6b}.del-btn:disabled{opacity:.5;cursor:default}.self-tag{color:var(--muted);font-size:12px;font-weight:400}html,body{height:100%}.layout{display:flex;min-height:100vh}.main-col{flex:1;min-width:0;display:flex;flex-direction:column}.content{flex:1;padding:20px;width:100%;max-width:1500px;min-width:0}.page{width:100%}.sidebar{width:220px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border);padding:16px;display:flex;flex-direction:column;gap:8px}.sidebar-overlay,.topbar-mobile{display:none}@media (max-width: 860px){.sidebar{position:fixed;top:0;left:0;height:100vh;z-index:60;transform:translate(-100%);transition:transform .25s ease}.sidebar.open{transform:translate(0)}.sidebar-overlay.show{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:55}.topbar-mobile{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:30}.hamburger{background:none;border:none;color:var(--text);font-size:22px;cursor:pointer;line-height:1}.topbar-title{font-size:16px;font-weight:700}.topbar-dot{width:8px;height:8px;border-radius:50%;margin-left:auto}.topbar-dot.on{background:#39d98a}.topbar-dot.off{background:#ff6b6b}.content{padding:16px}}.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}@media (max-width: 1100px){.stat-row{grid-template-columns:repeat(2,1fr)}}@media (max-width: 480px){.stat-row{grid-template-columns:1fr}}.page-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}.page-head h2{margin:0;font-size:20px}@media (max-width: 600px){.page-head .search{width:100%}}.panel{overflow-x:auto}.data-table{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}.data-table th{text-align:left;color:var(--muted);font-weight:500;padding:10px 8px;border-bottom:1px solid var(--border);white-space:nowrap}.data-table td{padding:10px 8px;border-bottom:1px solid var(--border)}.data-table tbody tr{cursor:pointer}.data-table tbody tr:hover{background:var(--panel-2)}@media (max-width: 900px){.dash-grid{grid-template-columns:1fr}}@media (max-width: 600px){.drawer{width:100%}}.map-layout{display:grid;grid-template-columns:280px 1fr;gap:16px}.map-layout .map-panel{height:600px}.map-side{display:flex;flex-direction:column;gap:10px;height:600px}@media (max-width: 1000px){.map-layout{grid-template-columns:1fr}.map-side{height:auto;max-height:220px}.map-layout .map-panel{height:420px}}@media (max-width: 480px){.pagination{justify-content:center}.pg-info{width:100%;text-align:center}}.map-layout{display:grid;grid-template-columns:280px 1fr;gap:16px;height:calc(100vh - 120px)}.map-layout .map-panel{height:100%}.map-side{display:flex;flex-direction:column;gap:10px;height:100%}@media (max-width: 1000px){.map-layout{grid-template-columns:1fr;height:auto}.map-side{height:auto;max-height:220px}.map-layout .map-panel{height:420px}}.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;align-items:start}.dash-grid>.panel{width:99%;min-width:0}.chart-placeholder{height:220px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px}.dash-grid .data-table{min-width:0}.dash-grid>.panel{display:flex!important;flex-direction:column!important;padding:16px!important}.dash-grid>.panel>.panel-title{margin:0 0 12px!important}.dash-grid>.panel>.data-table{margin:0!important}*{box-sizing:border-box}body,button,input,select,textarea{font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}:root,[data-theme=dark]{--bg: #0e1118;--panel: #161b27;--panel-2: #1d2433;--border: #262e3f;--text: #e6eaf2;--muted: #8a93a6;--accent: #5b9dff}[data-theme=light]{--bg: #f4f6fb;--panel: #ffffff;--panel-2: #eef1f7;--border: #d9dfea;--text: #1a2230;--muted: #5d6679;--accent: #2f6fed}body{margin:0;background:var(--bg);color:var(--text);transition:background .2s ease,color .2s ease}.panel,.stat-card,.sidebar,.nav-item,.data-table td,.data-table th,.auth-card,.auth-input,.search,.drawer{transition:background .2s ease,color .2s ease,border-color .2s ease}.theme-toggle{width:100%;background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:8px;font-size:13px;cursor:pointer;margin-bottom:8px}.theme-toggle:hover{border-color:var(--accent)}.table-controls{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap}.control-group{display:flex;flex-direction:column;gap:4px}.control-group label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}.control-group select{background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:8px 10px;font-size:13px;cursor:pointer;min-width:180px;font-family:inherit}.control-group select:focus{outline:none;border-color:var(--accent)}@media (max-width: 600px){.table-controls{flex-direction:column}.control-group select{width:100%}}