:root{--bg:#f5f7fa;--panel:#fff;--panel-2:#f9fafb;--line:#d9e0e8;--line-soft:#e9edf2;--text:#17202a;--muted:#667485;--blue:#2563eb;--lightblue:#396fe2;--green:#15803d;--amber:#b45309;--red:#b91c1c;--gray:#64748b;--navy:#060d69e0;--sidebar:#1b7fa8;--sidebar-text:#eaf5fb;--sidebar-muted:#bfe0f0;--sidebar-active:#ffffff2e;--button:var(--sidebar);--button-hover:#146384;--shadow:0 1px 2px #0f172a0f;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:#f5f7fa;background:var(--bg);color:#17202a;color:var(--text);font-size:13px;margin:0}button,input,select,textarea{font:inherit}.app{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:100vh}.sidebar{background:#1b7fa8;background:var(--sidebar);color:#eaf5fb;color:var(--sidebar-text);padding:16px 12px}.brand{background:#0000;border:0;cursor:pointer;display:block;margin-bottom:6px;padding:4px 2px 10px;width:100%}.brand-card{background:#fff;border-radius:10px;box-shadow:0 1px 3px #061e2d47;display:block;padding:10px 12px 8px}.brand-logo{display:block;height:auto;margin:0 auto;max-width:150px;width:100%}.brand-product{border-top:1px solid #e9edf2;border-top:1px solid var(--line-soft);color:#17202a;color:var(--text);display:block;font-size:13px;font-weight:700;margin-top:8px;padding-top:7px;text-align:center}.brand:hover .brand-card{box-shadow:0 0 0 2px #fff6}.nav-title{color:#bfe0f0;color:var(--sidebar-muted);font-size:11px;letter-spacing:.4px;margin:18px 8px 8px;text-transform:uppercase}.nav-btn{align-items:center;background:#0000;border:0;border-radius:6px;color:#eaf5fb;color:var(--sidebar-text);cursor:pointer;display:flex;justify-content:space-between;padding:8px;text-align:left;width:100%}.nav-btn:hover{background:#ffffff1f;color:#fff}.nav-btn.active{background:#ffffff2e;background:var(--sidebar-active);color:#fff;font-weight:600}.nav-left{align-items:center;display:flex;gap:8px;min-width:0}.nav-dot{background:#64748b;border-radius:50%;flex:0 0 auto;height:8px;width:8px}.nav-dot.green{background:#22c55e}.nav-dot.blue{background:#60a5fa}.nav-dot.amber{background:#f59e0b}.nav-dot.red{background:#ef4444}.nav-logout{margin-top:4px}.nav-badge{background:#ffffff1f;border-radius:999px;color:#fff;font-size:11px;padding:1px 6px}.main{min-width:0;padding:18px}.topbar{align-items:center;display:flex;gap:16px;justify-content:space-between;margin-bottom:16px}.title{font-size:20px;font-weight:700}.subtitle{color:#667485;color:var(--muted);margin-top:3px}.top-actions{align-items:center;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.sync{align-items:center;color:#15803d;color:var(--green);display:inline-flex;font-size:12px;font-weight:600;gap:7px}.sync:before{background:#15803d;background:var(--green);border-radius:50%;box-shadow:0 0 0 4px #15803d1f;content:"";height:8px;width:8px}.btn{padding:7px 10px}.btn,.ebtn{background:#1b7fa8;background:var(--button);border:1px solid #d9e0e8;border:1px solid var(--line);border-radius:6px;box-shadow:0 1px 2px #0f172a0f;box-shadow:var(--shadow);color:#fff;color:var(--panel);cursor:pointer}.ebtn{padding:3px 5px}.btn:hover{background:#146384;background:var(--button-hover);border-color:#b8c4d4;color:#fff;color:var(--panel)}.btn.primary{background:#1b7fa8;background:var(--button);border-color:#1b7fa8;border-color:var(--button);color:#fff}.btn.primary:hover{background:#146384;background:var(--button-hover);color:#fff;color:var(--panel)}.btn.danger{background:#e85454;border-color:#fecaca;color:#fff;color:var(--panel)}.btn.danger:hover{background:#883a3a;color:#fff;color:var(--panel)}.view{display:none}.view.active{display:block}.stats{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(4,minmax(150px,1fr));margin-bottom:12px}.device-stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.card,.stat{background:#fff;background:var(--panel);border:1px solid #e9edf2;border:1px solid var(--line-soft);border-radius:8px;box-shadow:0 1px 2px #0f172a0f;box-shadow:var(--shadow)}.stat{padding:12px}.stat.clickable{cursor:pointer;transition:border-color .15s ease,transform .15s ease}.stat.clickable:hover{border-color:#93c5fd;transform:translateY(-1px)}.stat-label{color:#667485;color:var(--muted);font-size:12px}.stat-value{font-size:24px;font-weight:750;margin-top:5px}.stat-sub{color:#667485;color:var(--muted);font-size:12px;margin-top:4px}.grid-2{grid-gap:12px;align-items:start;grid-template-columns:minmax(0,1.45fr) minmax(320px,.8fr)}.grid-2,.grid-3{display:grid;gap:12px}.grid-3{grid-gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}.card{min-width:0;overflow:hidden}.card-head{align-items:center;border-bottom:1px solid #e9edf2;border-bottom:1px solid var(--line-soft);display:flex;gap:8px;justify-content:space-between;padding:11px 12px}.card-title{font-size:13px;font-weight:700}.card-body{padding:12px}.table-wrap{max-height:480px;overflow:auto}.table-wrap.sim{max-height:550px;overflow:auto}.table-wrap.family{max-height:320px}table{border-collapse:collapse;min-width:760px;width:100%}.table-wrap thead{position:-webkit-sticky;position:sticky;top:0;z-index:10}td,th{border-bottom:1px solid #e9edf2;border-bottom:1px solid var(--line-soft);padding:9px 10px;text-align:left;vertical-align:middle;white-space:nowrap}th{background:#f9fafb;background:var(--panel-2);color:#667485;color:var(--muted);font-size:11px;text-transform:uppercase}.serial{color:#2563eb;color:var(--blue);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700}.serial-btn{background:#0000;border:0;cursor:pointer;padding:0}.serial-btn:hover .serial{text-decoration:underline}.pill{align-items:center;border:1px solid #0000;border-radius:999px;display:inline-flex;font-size:12px;font-weight:650;gap:6px;padding:3px 8px}.pill:before{background:currentColor;border-radius:50%;content:"";height:7px;width:7px}.pill.green{background:#ecfdf3;border-color:#bbf7d0;color:#15803d;color:var(--green)}.pill.blue{background:#eff6ff;border-color:#bfdbfe;color:#2563eb;color:var(--blue)}.pill.amber{background:#fffbeb;border-color:#fde68a;color:#b45309;color:var(--amber)}.pill.red{background:#fef2f2;border-color:#fecaca;color:#b91c1c;color:var(--red)}.pill.gray{background:#f8fafc;border-color:#e2e8f0;color:#64748b;color:var(--gray)}.link-icon{height:14px;margin-right:6px;vertical-align:-2px;width:14px}.link-icon.green{color:#15803d;color:var(--green)}.link-icon.red{color:#b91c1c;color:var(--red)}.link-icon.gray{color:#64748b;color:var(--gray)}.tag{align-items:center;border:1px solid #0000;border-radius:6px;color:#111827;display:inline-flex;font-size:12px;font-weight:650;padding:4px 8px;white-space:nowrap}.tag.green{background:#dcfce7;border-color:#86efac}.tag.red{background:#fee2e2;border-color:#fca5a5}.tag.yellow{background:#fef3c7;border-color:#fcd34d}.tag.blue{background:#dbeafe;border-color:#93c5fd}.tag.gold{background:#fde68a;border-color:#f59e0b}.tag.gray{background:#e5e7eb;border-color:#cbd5e1}.tag.purple{background:#f3e8ff;border-color:#d8b4fe}.tag.orange{background:#ffedd5;border-color:#fdba74}.tag.location{justify-content:center;min-width:92px}.bar-row{grid-gap:8px;align-items:center;display:grid;gap:8px;grid-template-columns:120px 1fr 72px;margin:10px 0}.track{background:#eef2f7;height:8px;overflow:hidden}.fill,.track{border-radius:999px}.fill{background:#2563eb;background:var(--blue);height:100%}.fill.green{background:#15803d;background:var(--green)}.fill.amber{background:#b45309;background:var(--amber)}.fill.red{background:#b91c1c;background:var(--red)}.feed{grid-gap:8px;display:grid;gap:8px;max-height:420px;overflow:auto}.alert{grid-gap:10px;align-items:start;background:#f9fafb;background:var(--panel-2);border:1px solid #e9edf2;border:1px solid var(--line-soft);border-radius:8px;display:grid;gap:10px;grid-template-columns:6px 1fr auto;padding:10px}.alert.red{border-left:4px solid #b91c1c;border-left:4px solid var(--red)}.alert.amber,.alert.red{grid-template-columns:1fr auto}.alert.amber{border-left:4px solid #b45309;border-left:4px solid var(--amber)}.alert-title{font-weight:700}.alert-meta{color:#667485;color:var(--muted);font-size:12px;margin-top:3px}.pipeline{grid-gap:8px;display:grid;gap:8px;grid-template-columns:repeat(4,minmax(0,1fr))}.pipe{background:#f9fafb;background:var(--panel-2);border:1px solid #e9edf2;border:1px solid var(--line-soft);border-radius:8px;padding:10px}.pipe-top{align-items:center;display:flex;font-weight:700;gap:8px;justify-content:space-between}.pipe-sub{color:#667485;color:var(--muted);font-size:12px;margin-top:6px}.filters{display:flex;flex-wrap:wrap;gap:10px;margin:10px 15px}.input,select,textarea{background:#fff;background:var(--panel);border:1px solid #d9e0e8;border:1px solid var(--line);border-radius:6px;color:#17202a;color:var(--text);min-height:34px;padding:8px 10px}.filters input,.filters select{border:1px solid #ccc;border-radius:8px;font-size:14px;margin:0;min-width:220px;padding:5px 12px}.filters .id-range{align-items:center;color:#667485;color:var(--muted);display:flex;font-size:13px;gap:6px}th.th-sortable{cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.sort-arrow{font-size:11px;margin-left:4px;opacity:.35}.sort-arrow.active{opacity:1}tr.th-filters th{padding:2px 6px 8px}tr.th-filters .th-filter{background:#fff;background:var(--panel);border:1px solid #d9e0e8;border:1px solid var(--line);border-radius:6px;box-sizing:border-box;color:#17202a;color:var(--text);font-size:12px;font-weight:400;margin:0;min-height:26px;min-width:70px;padding:2px 6px;width:100%}.filters .pill{align-self:center}.broadcast{margin:5px 1px}.broadcast input,.broadcast select{font-size:small;min-width:130px;padding:5px}.input{min-width:250px}.split{grid-gap:12px;align-items:start;display:grid;gap:12px;grid-template-columns:360px minmax(0,1fr)}.list{grid-gap:8px;display:grid;gap:8px}.list-item{background:#fff;background:var(--panel);border:1px solid #e9edf2;border:1px solid var(--line-soft);border-radius:8px;cursor:pointer;padding:10px}.list-item.active{border-color:#93c5fd;box-shadow:0 0 0 3px #2563eb1a}.timeline{grid-gap:10px;display:grid;gap:10px}.tl{border-left:2px solid #d9e0e8;border-left:2px solid var(--line);padding-left:12px}.tl strong{display:block}.tl span{color:#667485;color:var(--muted);font-size:12px}.metric-grid{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}.metric{background:#f9fafb;background:var(--panel-2);border:1px solid #e9edf2;border:1px solid var(--line-soft);border-radius:8px;padding:10px}.metric-label{color:#667485;color:var(--muted);font-size:12px}.metric-value{font-weight:750;margin-top:4px}.tabs{border-bottom:1px solid #e9edf2;border-bottom:1px solid var(--line-soft);display:flex;gap:2px;padding:0 12px}.tab{background:#0000;border:0;border-bottom:2px solid #0000;color:#667485;color:var(--muted);cursor:pointer;padding:10px 12px}.tab.active{border-bottom-color:#2563eb;border-bottom-color:var(--blue);color:#2563eb;color:var(--blue);font-weight:700}.log{background:#0f172a;border-radius:8px;color:#dbeafe;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.7;overflow:auto;padding:12px}@media (max-width:1100px){.app{grid-template-columns:1fr}.sidebar{position:static}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-2,.grid-3,.pipeline,.split{grid-template-columns:1fr}}.app.no-sidebar{grid-template-columns:1fr}.Login-App{align-items:center;background:linear-gradient(135deg,#fff);display:flex;flex-direction:column;height:94vh}.App-header{margin-top:2px}.App-logo{height:auto;width:120px}.top{align-items:center;flex:1 1;justify-content:center;width:100%}.above,.top{display:flex}.above{background:#fff;border-radius:16px;box-shadow:0 8px 25px #0000001a;flex-direction:row;gap:10px;max-width:90%;padding:20px;width:700px}.above>div:first-child{flex:1 1}.above>div:last-child{align-items:center;display:flex;flex:1 1;flex-direction:column;gap:10px;justify-content:center}.Login-App .product-name{color:#17202a;font-size:16px;font-weight:700;text-align:center}.above>div:last-child img{width:200px}.password-wrapper{align-items:center;display:flex;position:relative}.password-wrapper input{width:100%}.eye-icon{color:#555;cursor:pointer;position:absolute;right:10px;top:40%;transform:translateY(-40%)}.eye-icon:hover{color:#000}p{color:#1e3a8a;font-size:24px;font-weight:700;margin-bottom:20px}form{display:flex;flex-direction:column}label{color:#333;font-size:14px;margin-bottom:5px}input{border:1px solid #ccc;border-radius:8px;margin-bottom:15px;outline:none;padding:10px;transition:.3s}input:focus{border-color:#2563eb;box-shadow:0 0 5px #2563eb4d}.Login-App button{background:var(--button);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:16px;padding:12px;transition:.3s}.Login-App button:hover{background:var(--button-hover)}@media (max-width:768px){.above{flex-direction:column;text-align:center}.above>div:last-child img{width:150px}}.signup-text{font-size:14px;margin-top:10px;text-align:center}.signup-text span{color:#2563eb;cursor:pointer;font-weight:700}.signup-text span:hover{text-decoration:underline}.snackbar{border-radius:6px;color:#fff;font-size:14px;opacity:0;padding:10px;text-align:center;visibility:hidden;z-index:9999}.snackbar.forgot-snackbar,.snackbar.login-snackbar,.snackbar.signup-snackbar{height:50px;left:50%;position:fixed;top:1%;transform:translateX(-50%);width:150px}.snackbar.devices-snackbar{top:7%}.snackbar.devices-snackbar,.snackbar.firmwareupdate-snackbar{bottom:30px;height:50px;left:50%;position:fixed;transform:translateX(-50%);width:100px}.snackbar.firmwareupdate-snackbar{top:8%}.snackbar.show{align-items:center;animation:fadein .4s,fadeout .4s 2.6s;opacity:1;visibility:visible;width:250px}.snackbar.success{background-color:#2e7d32}.snackbar.error{background-color:#c62828}.snackbar.info{background-color:#31519d}.snackbar.warning{background-color:#504d4d}@keyframes fadein{0%{bottom:0;opacity:0}to{bottom:30px;opacity:1}}@keyframes fadeout{0%{bottom:30px;opacity:1}to{bottom:0;opacity:0}}