:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:#162033;background:#f5f7fb;font-synthesis:none;--bg:#f5f7fb;--panel:#fff;--soft:#f0f3f9;--line:#dfe4ed;--text:#162033;--muted:#68758a;--blue:#3767e8;--nav:#11192b;--shadow:0 8px 30px #1e31500d}*{box-sizing:border-box}button,input{font:inherit}button{cursor:pointer}html[data-theme=dark]{--bg:#0d1320;--panel:#151e2e;--soft:#1b2638;--line:#2b384d;--text:#eef3fb;--muted:#93a1b7;--nav:#090e18;--shadow:none;color-scheme:dark}body{margin:0;background:var(--bg);color:var(--text)}.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 0,#1d3470,#0b1120 55%)}.login-card{width:min(420px,calc(100% - 32px));background:var(--panel);padding:38px;border-radius:20px;box-shadow:0 25px 80px #0005;display:grid;gap:16px}.login-card h1{margin:0;text-align:center}.login-card>p,.login-card>small{text-align:center;color:var(--muted)}label{display:grid;gap:7px;font-size:13px;font-weight:650}input{border:1px solid var(--line);background:var(--soft);color:var(--text);border-radius:9px;padding:12px;outline:none}input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #3767e822}.primary{background:var(--blue);color:#fff;border:0;border-radius:9px;padding:12px;font-weight:700}.brand-mark{width:36px;height:36px;border-radius:9px;background:linear-gradient(145deg,#668cff,#315bd6);color:#fff;display:grid;place-items:center;font-weight:900;margin:auto}.app{display:grid;grid-template-columns:246px 1fr;min-height:100vh}.app.collapsed{grid-template-columns:72px 1fr}.app.collapsed aside span,.app.collapsed aside nav em{display:none}.app.collapsed .brand{justify-content:center}.app.collapsed .brand-mark{margin:0}.app.collapsed nav button{justify-content:center}.app.collapsed .profile{padding:10px}.app.collapsed .collapse span{display:none}aside{position:sticky;top:0;height:100vh;background:var(--nav);color:#b8c2d4;padding:18px 12px;display:flex;flex-direction:column;z-index:30;transition:.2s}.brand{height:44px;display:flex;align-items:center;gap:11px;padding:0 8px;color:#fff;font-weight:800}.brand .brand-mark{margin:0}.brand .close{display:none;margin-left:auto}nav{display:grid;gap:3px;margin-top:28px}nav button,.collapse{display:flex;align-items:center;gap:12px;text-align:left;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:#aeb8ca;font-size:13px}nav button:hover,nav button.active{background:#24324a;color:#fff}nav button.active{box-shadow:inset 3px 0 #5f83f5}nav i{width:20px;text-align:center;font-style:normal;font-size:17px}nav em{margin-left:auto;width:6px;height:6px;background:#28c68b;border-radius:50%}.side-bottom{margin-top:auto}.collapse{width:100%;border-top:1px solid #273148;border-radius:0}.profile{display:flex;gap:10px;align-items:center;margin-top:10px;padding:10px 4px}.avatar{width:34px;height:34px;flex:0 0 auto;border-radius:50%;border:0;background:#dce5ff;color:#315bd6;display:grid;place-items:center;font-size:11px;font-weight:800}.profile span{display:grid}.profile b{font-size:12px;color:#fff}.profile small{font-size:10px}.workspace{min-width:0}.workspace>header{height:76px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:20}.workspace header small{color:var(--muted);font-size:11px}.workspace header h1{margin:3px 0 0;font-size:20px}.header-actions{display:flex;gap:9px;align-items:center}.icon-btn{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:8px;width:36px;height:36px}.menu{display:none}.connection,.badge,.status,.direction{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:5px 9px;font-size:10px;font-weight:750;background:var(--soft);white-space:nowrap}.connection i{width:7px;height:7px;border-radius:50%;background:#9ca8ba}.connection.connected i,.live-dot{color:#139c6a;background:#22bf83}.connection.reconnecting i,.connection.connecting i{background:#e2a52b}.badge{color:#4268c9;background:#eaf0ff}.badge.amber{color:#946515;background:#fff2cf}.badge.purple{color:#7544a7;background:#f1e8ff}.content{padding:26px 28px;max-width:1600px;margin:auto}.page-lead{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:18px}.page-lead h2{font-size:21px;margin:0 0 5px}.page-lead p{margin:0;color:var(--muted);font-size:13px}.page-lead button,.toolbar button,td button,.empty button{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:8px;padding:8px 12px}.badges{display:flex;gap:8px;margin-bottom:18px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stats article,.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:var(--shadow)}.stats article{display:grid;gap:5px}.stats span{font-size:12px;color:var(--muted)}.stats strong{font-size:25px}.stats small{font-size:10px;color:var(--muted)}.grid{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-top:14px}.card.wide{grid-column:span 1}.card.full{grid-column:1/-1}.card h3{font-size:14px;margin:0 0 16px}.card-title{display:flex;justify-content:space-between;align-items:center}.live-dot{font-size:10px;background:transparent}.timeline{display:grid}.timeline>div{display:grid;grid-template-columns:10px 74px 1fr minmax(100px,220px);gap:11px;align-items:center;border-top:1px solid var(--line);padding:11px 0;font-size:11px}.timeline i{width:7px;height:7px;border-radius:50%;background:#4074ef}.timeline i.outbound{background:#985bd5}.timeline time,.timeline small{color:var(--muted)}.timeline span{display:grid}.timeline code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--soft);padding:6px;border-radius:5px}.health{margin:0}.health div{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:12px 0;font-size:12px}.health dd{margin:0}.health .ok{color:#15946a}.health .warn{color:#bd7b0d}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;font-size:11px;white-space:nowrap}th{text-align:left;color:var(--muted);font-weight:650;background:var(--soft)}th,td{padding:11px;border-bottom:1px solid var(--line)}.status.online{background:#dcf7eb;color:#147653}.status.offline{color:var(--muted)}.toolbar{display:flex;gap:7px}.capture-list{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:auto;max-height:calc(100vh - 180px)}.capture-row{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);display:grid;grid-template-columns:100px 50px 60px 80px minmax(180px,1fr) 90px auto;gap:12px;text-align:left;align-items:center;padding:10px 13px;font-size:11px}.capture-row:hover{background:var(--soft)}.direction{justify-content:center}.direction.inbound{background:#e7efff;color:#275cca}.direction.outbound{background:#f3eaff;color:#7544a7}.empty{border:1px dashed var(--line);border-radius:12px;padding:40px;text-align:center;color:var(--muted)}.empty strong{color:var(--text)}.empty.large{margin:10vh auto;max-width:560px;background:var(--panel)}.empty-icon{font-size:30px}.skeleton{height:280px;border-radius:12px;background:linear-gradient(90deg,var(--soft),var(--panel),var(--soft));background-size:200%;animation:shine 1.2s infinite}@keyframes shine{to{background-position:-200%}}.modal-wrap{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;justify-content:flex-end}.scrim{position:fixed;top:0;right:0;bottom:0;left:0;border:0;background:#07102099}.inspector{position:relative;width:min(760px,100%);height:100%;overflow:auto;background:var(--panel);padding:28px;box-shadow:-20px 0 60px #0004}.inspector h2{margin:8px 0}.record-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.record-meta div{background:var(--soft);padding:10px;border-radius:7px}.record-meta dt{font-size:10px;color:var(--muted)}.record-meta dd{margin:4px 0;font-size:11px;overflow-wrap:anywhere}.hex,.payload{background:#0b1220;color:#c9d6eb;padding:16px;border-radius:9px;overflow:auto;font:11px ui-monospace,SFMono-Regular,monospace;line-height:1.7}.hex span{color:#6381a9}.hex b{color:#88d6b0}.error{color:#c23b3b}.close{display:none}@media (max-width:1050px){.stats{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}.capture-row{grid-template-columns:90px 45px 55px 65px 1fr}.capture-row>:nth-child(6),.capture-row>:nth-child(7){display:none}}@media (max-width:760px){.app,.app.collapsed{display:block}.workspace>header{padding:0 14px}.menu{display:inline-grid}.workspace header>div:first-of-type small{display:none}.header-actions>.badge,.header-actions>.connection{display:none}aside{position:fixed;left:-260px;width:246px;transition:.2s}.app aside.open{left:0}.app aside span{display:initial}.brand .close{display:grid}.content{padding:20px 14px}.stats{grid-template-columns:1fr 1fr}.page-lead{align-items:flex-start}.page-lead p{max-width:330px}.timeline>div{grid-template-columns:8px 62px 1fr}.timeline code{display:none}.capture-row{grid-template-columns:76px 40px 44px 56px 1fr;padding:9px 8px;gap:7px}.record-meta{grid-template-columns:1fr}.badges{overflow:auto}.scrim{display:block}}@media (max-width:460px){.stats{grid-template-columns:1fr}.page-lead{display:grid}.toolbar{overflow:auto}.workspace header h1{font-size:16px}}.employee-toolbar{display:grid;grid-template-columns:minmax(220px,2fr) repeat(3,minmax(130px,1fr));gap:10px;margin-bottom:16px}.employee-toolbar select,.detail-actions select,.employee-form select{border:1px solid var(--line);background:var(--soft);color:var(--text);border-radius:9px;padding:10px}.employee-page table td:first-child{display:grid;gap:3px}.employee-page table td small{color:var(--muted)}.pagination{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding-top:14px;font-size:12px}.pagination button,.detail-actions button{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:8px;padding:8px 11px}.pagination button:disabled{opacity:.45}.notice{background:#fff1f1;border:1px solid #f1caca;padding:10px;border-radius:8px}.employee-form{display:flex;flex-direction:column;gap:20px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.employee-form fieldset{border:1px solid var(--line);border-radius:10px;display:grid;gap:9px}.check{display:flex;align-items:center;gap:8px}.check input{width:auto}.detail-actions{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.sync-cards{display:grid;gap:12px}.sync-card{border:1px solid var(--line);border-radius:12px;padding:16px}.sync-card h4{margin:0 0 4px}.sync-card small{color:var(--muted)}.sync-card dl{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.sync-card dl div{background:var(--soft);padding:10px;border-radius:8px}.sync-card dt{color:var(--muted);font-size:10px}.sync-card dd{margin:4px 0 0;font-size:12px}.sync-failed{background:#ffe5e5;color:#a72e2e}.sync-synced{background:#dcf7eb;color:#147653}.history-modal{z-index:60}.history-list{display:grid;gap:10px}.history-list pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--soft);padding:12px;border-radius:8px;font-size:11px}@media (max-width:900px){.employee-toolbar{grid-template-columns:1fr 1fr}.sync-card dl{grid-template-columns:1fr}}@media (max-width:600px){.employee-toolbar,.form-grid{grid-template-columns:1fr}.employee-details,.employee-form{width:100%}.employee-page .page-lead{align-items:stretch}.employee-page .page-lead .primary{width:100%}}.device-page table td:first-child{display:grid;gap:3px}.device-page table td small{color:var(--muted)}.device-toolbar{grid-template-columns:2fr 1fr 1fr auto}.device-toolbar select,.device-details select,textarea{border:1px solid var(--line);background:var(--soft);color:var(--text);border-radius:9px;padding:10px}.pending-devices{margin-bottom:16px}.pending-devices .history-list>div{display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center}.pending-devices span{color:var(--muted);grid-column:1/-1}.pending-devices button{justify-self:start}.setup-box{border:1px solid var(--line);border-radius:10px;padding:14px;background:var(--soft)}.setup-box pre{white-space:pre-wrap}.warning{padding:10px;border-radius:8px;background:#fff2cf;color:#795411}.device-details{width:min(900px,100%)}.device-details>.history-list{max-height:300px;overflow:auto}@media (max-width:700px){.device-toolbar{grid-template-columns:1fr}.device-details{width:100%}.pending-devices .history-list>div{display:flex;flex-direction:column;align-items:flex-start}}