:root{--brand:#1968f0;--brand-600:#0c4ec0;--brand-700:#053092;--brand-50:#eaf1fe;--brand-100:#d3e2fd;--cyan:#00b8e6;--emerald:#06a54a;--emerald-600:#05863c;--emerald-50:#e7f7ee;--amber:#b45309;--amber-50:#fff7ed;--red:#e5484d;--red-50:#fef1f1;--ink:#0d1526;--ink-2:#2b3648;--muted:#63708a;--muted-2:#97a2b6;--bg:#f5f8fa;--surface:#ffffff;--surface-2:#f6f9fc;--border:#e3e9f2;--border-2:#eef2f8;--shadow-sm:0 1px 2px rgba(13,21,38,0.04),0 2px 8px rgba(13,21,38,0.05);--shadow-md:0 4px 14px rgba(13,21,38,0.06),0 12px 32px rgba(13,21,38,0.07);--shadow-lg:0 24px 60px rgba(13,21,38,0.16);--radius:16px;--radius-sm:11px;--radius-lg:22px;--sidebar-w:236px;--card:var(--surface);--primary:var(--brand);--primary-dark:var(--brand-700);--danger:var(--red);--warn:var(--amber)}*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%;overflow-x:hidden}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01";letter-spacing:-.011em}a{color:var(--brand-600);text-decoration:none}a:hover{text-decoration:underline}.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}.sidebar{background:linear-gradient(180deg,#0a1c46,#06153a);color:#c4d2ea;padding:20px 14px;display:flex;flex-direction:column;gap:3px;position:-webkit-sticky;position:sticky;top:0;height:100vh;border-right:1px solid rgba(255,255,255,.04)}.brand{display:flex;align-items:center;gap:10px;padding:6px 10px 20px}.brand-mark{width:34px;height:34px;flex-shrink:0}.brand-name{font-size:1.2rem;font-weight:800;color:#fff;letter-spacing:-.02em}.brand-tag{font-size:.66rem;color:#8b8fb0;font-weight:600;text-transform:uppercase;letter-spacing:.08em}.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--radius-sm);color:#aebbd6;font-size:.92rem;font-weight:500;cursor:pointer;transition:background .15s,color .15s}.nav-item:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}.nav-item.active{background:linear-gradient(135deg,#1968f0,#2f7bff);color:#fff;box-shadow:0 6px 16px rgba(25,104,240,.45)}.nav-item .ic{width:18px;height:18px;flex-shrink:0;opacity:.9}.nav-sep{height:1px;background:rgba(255,255,255,.08);margin:12px 4px}.nav-foot{margin-top:auto;padding:10px 12px;font-size:.74rem;color:#7b7fa0}.nav-status{margin-bottom:8px}.nav-user{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid rgba(255,255,255,.08);padding-top:8px}.nav-user-name{color:#cdd0e0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-logout{background:transparent;border:1px solid rgba(255,255,255,.14);color:#b9bcd4;border-radius:7px;padding:3px 10px;font-size:.72rem;cursor:pointer;flex-shrink:0}.nav-logout:hover{background:rgba(255,255,255,.08);color:#fff}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--muted-2)}.status-dot.on{background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.2)}.status-dot.off{background:#f87171}.main{min-width:0;display:flex;flex-direction:column;height:100vh;overflow-y:auto;scrollbar-gutter:stable}.main>*{min-width:0;width:100%}@keyframes bs-fade{0%{opacity:0}to{opacity:1}}.main>*{animation:bs-fade .24s ease}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:var(--radius-sm);padding:11px 18px;font-size:.94rem;font-weight:600;font-family:inherit;cursor:pointer;background:linear-gradient(135deg,#1968f0,#2f7bff);color:#fff;box-shadow:0 4px 12px rgba(25,104,240,.28);transition:filter .15s,transform .05s,box-shadow .15s}.btn:hover{filter:brightness(1.05);box-shadow:0 6px 16px rgba(25,104,240,.36)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-secondary{background:var(--surface);color:var(--brand-600);border:1px solid var(--border)}.btn-secondary:hover{background:var(--brand-50)}.field{width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;font-size:1rem;font-family:inherit;background:var(--surface);transition:border-color .15s,box-shadow .15s}.field:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-100)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}.container{max-width:460px;margin:0 auto;padding:16px}.muted{color:var(--muted)}.conn-wrap{max-width:560px;margin:0 auto;padding:28px 16px}.card{padding:22px}.card+.card{margin-top:16px}h1{font-size:1.4rem;letter-spacing:-.02em}h2{font-size:1.05rem;margin-bottom:10px}.status-line{gap:10px;font-size:1.15rem;font-weight:700;margin:14px 0}.kv,.status-line{display:flex;align-items:center}.kv{justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border-2);font-size:.94rem}.kv:last-child{border-bottom:none}.badge{display:inline-block;border-radius:999px;padding:3px 11px;font-size:.76rem;font-weight:700}.badge-ok{background:var(--emerald-50);color:var(--emerald-600)}.badge-warn{background:var(--amber-50);color:var(--amber)}.badge-err{background:var(--red-50);color:var(--red)}.modal-backdrop{position:fixed;inset:0;background:rgba(16,18,26,.6);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:16px;z-index:60}.modal{background:#fff;border-radius:var(--radius-lg);padding:26px;width:100%;max-width:400px;text-align:center;box-shadow:var(--shadow-lg)}.qr-frame{display:flex;align-items:center;justify-content:center;min-height:280px;margin:16px 0}.qr-frame img{width:260px;height:260px;image-rendering:pixelated;border-radius:8px}ol.steps{text-align:left;margin:14px 0 4px 18px;font-size:.9rem;color:var(--muted);line-height:1.7}table.msgs{width:100%;border-collapse:collapse;font-size:.86rem}table.msgs td,table.msgs th{text-align:left;padding:9px 6px;border-bottom:1px solid var(--border-2);vertical-align:top}table.msgs th{color:var(--muted);font-weight:600}input.field{margin:10px 0}.pnl-live{color:var(--emerald-600);font-size:.8rem;font-weight:700}.sup-sub{color:var(--muted);font-size:.9rem}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#0a1c46,#123a86 45%,#1968f0 120%)}.login-card{animation:cardIn .4s ease}@keyframes cardIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:30px 26px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:12px}.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:8px}.login-name{font-size:1.4rem;font-weight:800;letter-spacing:-.02em}.login-tag{font-size:.78rem;color:var(--muted)}.login-error{color:var(--red);font-size:.86rem}.login-btn{margin-top:4px;width:100%;padding:13px}.mobile-more-backdrop,.mobile-nav{display:none}@media (max-width:820px){.shell{grid-template-columns:1fr}.sidebar{display:none}.main{height:100vh;padding-bottom:calc(62px + env(safe-area-inset-bottom, 0px))}.mobile-nav{display:flex;position:fixed;left:0;right:0;bottom:0;height:62px;padding-bottom:env(safe-area-inset-bottom,0);background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -4px 16px rgba(13,21,38,.06);z-index:45}.mnav-item{flex:1 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-size:.64rem;font-weight:600;text-decoration:none;background:none;border:none;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.mnav-item .ic{width:23px;height:23px;opacity:.85}.mnav-item.active{color:var(--brand)}.mnav-item.active .ic{opacity:1}.mnav-dot{position:absolute;top:8px;margin-left:16px;width:8px;height:8px;border-radius:50%;background:var(--red);border:2px solid var(--surface)}.shell:has(.inbox.has-active) .mobile-nav{display:none}.shell:has(.inbox.has-active) .main{padding-bottom:0}.mobile-more-backdrop{display:block;position:fixed;inset:0;background:rgba(10,18,40,.45);z-index:50;animation:fadeIn .15s ease}.mobile-more{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-radius:20px 20px 0 0;padding:10px 12px calc(18px + env(safe-area-inset-bottom, 0px));z-index:51;box-shadow:var(--shadow-lg);animation:sheetUp .22s cubic-bezier(.22,1,.36,1)}.mobile-more-grip{width:40px;height:4px;border-radius:999px;background:var(--border);margin:4px auto 12px}.mobile-more a,.mobile-more button.more-row{display:flex;align-items:center;gap:14px;width:100%;padding:14px 12px;border:none;background:none;font-family:inherit;font-size:.98rem;font-weight:600;color:var(--ink);text-decoration:none;border-radius:12px;cursor:pointer}.mobile-more a:active,.mobile-more button.more-row:active{background:var(--surface-2)}.mobile-more a .ic,.mobile-more button.more-row .ic{width:22px;height:22px;color:var(--muted)}.mobile-more a.active,.mobile-more a.active .ic{color:var(--brand)}.more-sep{height:1px;background:var(--border);margin:8px 6px}.more-foot{justify-content:space-between;padding:10px 12px 2px}.more-foot,.more-status{display:flex;align-items:center}.more-status{font-size:.8rem;color:var(--muted);font-weight:500}.more-logout{background:var(--surface-2);border:1px solid var(--border);color:var(--muted);border-radius:9px;padding:8px 16px;font-size:.84rem;font-weight:600;font-family:inherit;cursor:pointer}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes sheetUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}