@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap";:root{--bg-app:#f0f4ff;--bg-card:#fff;--bg-card2:#f8faff;--bg-input:#f1f5f9;--bg-overlay:#ffffffeb;--blue:#2563eb;--blue-light:#eff6ff;--blue-mid:#bfdbfe;--blue-dark:#1d4ed8;--green:#059669;--green-light:#ecfdf5;--green-mid:#a7f3d0;--red:#dc2626;--red-light:#fff1f2;--red-mid:#fecaca;--amber:#d97706;--amber-light:#fffbeb;--amber-mid:#fde68a;--purple:#7c3aed;--purple-light:#f5f3ff;--cyan:#0891b2;--cyan-light:#ecfeff;--text-1:#0f172a;--text-2:#334155;--text-3:#64748b;--text-4:#94a3b8;--border:#e2e8f0;--border-focus:#93c5fd;--shadow-sm:0 1px 3px #0000000f, 0 1px 2px #0000000a;--shadow-md:0 4px 16px #00000014, 0 1px 4px #0000000a;--shadow-lg:0 8px 32px #0000001a, 0 2px 8px #0000000f;--shadow-xl:0 20px 48px #2563eb1f, 0 4px 12px #0000000f;--r-sm:8px;--r-md:12px;--r-lg:18px;--r-xl:24px;--r-full:9999px;--header-h:60px;--mobnav-h:64px;--t-fast:.12s ease;--t-base:.22s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg-app);color:var(--text-1);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;font-family:Inter,sans-serif}body:before{content:"";opacity:.5;pointer-events:none;z-index:0;background-image:radial-gradient(circle,#c7d7f0 1px,#0000 1px);background-size:28px 28px;position:fixed;inset:0}#root{z-index:1;min-height:100vh;position:relative}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:var(--bg-app)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--blue)}.header{z-index:200;height:var(--header-h);background:var(--bg-overlay);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm);align-items:center;gap:16px;padding:0 20px;display:flex;position:sticky;top:0}.header-brand{flex-shrink:0;align-items:center;gap:10px;display:flex}.header-bee{background:linear-gradient(135deg,#2563eb,#7c3aed);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:18px;display:flex;box-shadow:0 2px 8px #2563eb59}.header-brand-text{flex-direction:column;line-height:1;display:flex}.header-brand-name{color:var(--text-1);letter-spacing:-.3px;font-size:15px;font-weight:800}.header-brand-sub{color:var(--blue);letter-spacing:.8px;text-transform:uppercase;font-size:10px;font-weight:500}.header-tabs{scrollbar-width:none;flex:1;align-items:center;gap:2px;padding:0 8px;display:flex;overflow-x:auto}.header-tabs::-webkit-scrollbar{display:none}.htab{border-radius:var(--r-full);color:var(--text-3);cursor:pointer;transition:all var(--t-fast);white-space:nowrap;background:0 0;border:none;align-items:center;gap:6px;padding:7px 14px;font-family:Inter,sans-serif;font-size:13px;font-weight:500;display:flex;position:relative}.htab:hover{background:var(--bg-card2);color:var(--text-2)}.htab.active{background:var(--blue);color:#fff;font-weight:600;box-shadow:0 2px 8px #2563eb59}.htab-badge{background:var(--red);color:#fff;border-radius:var(--r-full);text-align:center;min-width:16px;padding:1px 5px;font-size:9px;font-weight:700}.htab.active .htab-badge{background:#ffffff4d}.header-right{flex-shrink:0;align-items:center;gap:8px;display:flex}.conn-pill{border-radius:var(--r-full);border:1px solid var(--border);background:var(--bg-card);color:var(--text-3);white-space:nowrap;align-items:center;gap:6px;padding:5px 10px;font-size:11px;font-weight:600;display:flex}.conn-dot{border-radius:50%;flex-shrink:0;width:7px;height:7px}.conn-dot.connected{background:var(--green);box-shadow:0 0 6px var(--green);animation:2s infinite blink}.conn-dot.connecting{background:var(--amber);animation:1s infinite blink}.conn-dot.disconnected,.conn-dot.error{background:var(--red)}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}.page-wrap{max-width:1280px;margin:0 auto;padding:20px 20px 100px}.section-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px;display:flex}.section-title{color:var(--text-1);letter-spacing:-.3px;font-size:18px;font-weight:800}.section-sub{color:var(--text-3);margin-top:2px;font-size:12px}.grid-4{grid-template-columns:repeat(4,1fr);gap:14px;display:grid}.grid-3{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.grid-2{grid-template-columns:repeat(2,1fr);gap:14px;display:grid}.grid-auto{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;display:grid}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base);padding:18px}.card:hover{box-shadow:var(--shadow-md);border-color:var(--border-focus)}.card-title{color:var(--text-3);text-transform:uppercase;letter-spacing:.8px;align-items:center;gap:6px;margin-bottom:14px;font-size:12px;font-weight:600;display:flex}.metric-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:all var(--t-base);padding:16px;position:relative;overflow:hidden}.metric-card:before{content:"";background:var(--mc-color,var(--blue));border-radius:0;height:3px;position:absolute;top:0;left:0;right:0}.metric-card:hover{box-shadow:var(--shadow-md);border-color:var(--mc-color,var(--blue-mid));transform:translateY(-2px)}.metric-card.is-alert{border-color:var(--red);background:var(--red-light);animation:2s ease-in-out infinite card-pulse}@keyframes card-pulse{0%,to{box-shadow:0 0 #dc262600}50%{box-shadow:0 0 0 4px #dc26261f}}.metric-card.is-warn{border-color:var(--amber);background:var(--amber-light)}.mc-top{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.mc-icon{border-radius:var(--r-sm);background:var(--mc-bg,var(--blue-light));flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;font-size:18px;display:flex}.mc-badge{border-radius:var(--r-full);align-items:center;gap:4px;padding:3px 8px;font-size:10px;font-weight:700;display:flex}.mc-badge.ok{background:var(--green-light);color:var(--green)}.mc-badge.warn{background:var(--amber-light);color:var(--amber)}.mc-badge.danger{background:var(--red-light);color:var(--red)}.mc-label{color:var(--text-3);text-transform:uppercase;letter-spacing:.7px;margin-bottom:4px;font-size:11px;font-weight:600}.mc-value{color:var(--text-1);letter-spacing:-1px;margin-bottom:2px;font-family:JetBrains Mono,monospace;font-size:30px;font-weight:800;line-height:1}.mc-value.is-alert{color:var(--red)}.mc-value.is-warn{color:var(--amber)}.mc-unit{color:var(--text-3);letter-spacing:0;margin-left:3px;font-size:14px;font-weight:400}.mc-bar{background:var(--bg-app);border-radius:2px;height:4px;margin-top:12px;overflow:hidden}.mc-bar-fill{background:var(--mc-color,var(--blue));border-radius:2px;height:100%;transition:width .6s}.mc-spark{height:42px;margin-top:8px}.pill{border-radius:var(--r-full);white-space:nowrap;align-items:center;gap:5px;padding:4px 10px;font-size:11px;font-weight:700;display:inline-flex}.pill.ok{background:var(--green-light);color:var(--green)}.pill.warn{background:var(--amber-light);color:var(--amber)}.pill.danger{background:var(--red-light);color:var(--red)}.pill.info{background:var(--blue-light);color:var(--blue)}.pill.muted{background:var(--bg-card2);color:var(--text-3);border:1px solid var(--border)}.pill-dot{background:currentColor;border-radius:50%;width:6px;height:6px}.hero-bar{background:linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);border-radius:var(--r-xl);color:#fff;box-shadow:var(--shadow-xl);margin-bottom:18px;padding:22px 24px;position:relative;overflow:hidden}.hero-bar:before{content:"";pointer-events:none;background:#ffffff14;border-radius:50%;width:240px;height:240px;position:absolute;top:-40%;right:-5%}.hero-bar:after{content:"";pointer-events:none;background:#ffffff0d;border-radius:50%;width:180px;height:180px;position:absolute;bottom:-60%;left:30%}.hero-inner{z-index:1;position:relative}.hero-top{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px;display:flex}.hero-name{letter-spacing:-.4px;font-size:20px;font-weight:800}.hero-desc{opacity:.75;margin-top:2px;font-size:12px}.hero-emergency{border-radius:var(--r-full);background:#fff3;border:1px solid #fff6;align-items:center;gap:6px;padding:5px 12px;font-size:12px;font-weight:700;animation:1.5s ease-in-out infinite hero-flash;display:flex}@keyframes hero-flash{0%,to{opacity:1}50%{opacity:.65}}.hero-stats{flex-wrap:wrap;gap:24px;display:flex}.hero-stat-val{letter-spacing:-1px;font-family:JetBrains Mono,monospace;font-size:24px;font-weight:800;line-height:1}.hero-stat-label{opacity:.65;text-transform:uppercase;letter-spacing:.8px;margin-top:3px;font-size:10px;font-weight:500}.controls-wrap{flex-direction:column;gap:16px;display:flex}.dpad-outer{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-sm);flex-direction:column;align-items:center;gap:10px;padding:20px;display:flex}.dpad-label{color:var(--text-3);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;font-size:12px;font-weight:700}.dpad{flex-direction:column;align-items:center;gap:8px;display:flex}.dpad-row{justify-content:center;align-items:center;gap:8px;display:flex}.dbtn{border-radius:var(--r-md);border:2px solid var(--border);background:var(--bg-card2);width:78px;height:72px;color:var(--text-2);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;font-family:Inter,sans-serif;transition:all .1s;display:flex;box-shadow:0 2px 4px #0000000f}.dbtn:hover{background:var(--blue-light);border-color:var(--blue);color:var(--blue);transform:scale(1.05);box-shadow:0 4px 12px #2563eb33}.dbtn:active,.dbtn.pressed{background:var(--blue);border-color:var(--blue-dark);color:#fff;transform:scale(.94);box-shadow:0 1px 4px #2563eb66}.dbtn-stop{background:var(--red-light);border-color:var(--red-mid);width:72px;height:72px;color:var(--red);border-radius:50%}.dbtn-stop:hover{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 4px 12px #dc26264d}.dbtn-stop:active,.dbtn-stop.pressed{background:#b91c1c;transform:scale(.94)}.dbtn-icon{pointer-events:none;font-size:22px;line-height:1}.dbtn-text{text-transform:uppercase;letter-spacing:.5px;pointer-events:none;font-size:9px;font-weight:700}.action-row{gap:10px;width:100%;display:flex}.abtn{border-radius:var(--r-md);border:1.5px solid var(--border);background:var(--bg-card2);color:var(--text-2);cursor:pointer;transition:all var(--t-fast);touch-action:manipulation;flex-direction:column;flex:1;align-items:center;gap:5px;padding:12px 8px;font-family:Inter,sans-serif;font-size:12px;font-weight:600;display:flex}.abtn:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.abtn:active{transform:scale(.97)}.abtn-icon{font-size:20px}.abtn.light-on{background:var(--amber-light);border-color:var(--amber-mid);color:var(--amber)}.abtn.horn{background:var(--purple-light);color:var(--purple);border-color:#ddd6fe}.abtn.estop{background:var(--red-light);border-color:var(--red-mid);color:var(--red);font-size:11px}.motor-widget{border-radius:var(--r-lg);background:var(--bg-card);border:1.5px solid var(--border);box-shadow:var(--shadow-sm);align-items:center;gap:14px;padding:16px;display:flex}.motor-ring{border:3px solid;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:52px;height:52px;font-size:20px;display:flex}.motor-ring.run{border-color:var(--green);background:var(--green-light);animation:1.8s linear infinite spin}.motor-ring.stop{border-color:var(--red);background:var(--red-light)}@keyframes spin{to{transform:rotate(360deg)}}.tilt-ring{border:2px solid var(--border);background:var(--bg-card2);border-radius:50%;flex-shrink:0;width:100px;height:100px;position:relative}.tilt-ring:before,.tilt-ring:after{content:"";background:var(--border);position:absolute}.tilt-ring:before{width:1px;height:100%;top:0;left:50%;transform:translate(-50%)}.tilt-ring:after{width:100%;height:1px;top:50%;left:0;transform:translateY(-50%)}.tilt-bubble{background:var(--blue);z-index:1;border-radius:50%;width:16px;height:16px;transition:transform .3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 8px #2563eb80}.tilt-bubble.is-alert{background:var(--red);box-shadow:0 0 8px #dc262680}.alert-item{border-radius:var(--r-md);background:var(--bg-card);border:1px solid var(--border);transition:all var(--t-fast);align-items:flex-start;gap:12px;margin-bottom:8px;padding:12px 14px;display:flex}.alert-item:hover{border-color:var(--border-focus);transform:translate(2px)}.alert-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px;margin-top:4px}.alert-dot.critical{background:var(--red)}.alert-dot.warning{background:var(--amber)}.alert-body{flex:1;min-width:0}.alert-title{color:var(--text-1);font-size:13px;font-weight:600}.alert-desc{color:var(--text-3);margin-top:2px;font-size:12px}.alert-time{color:var(--text-4);white-space:nowrap;margin-left:auto;font-family:JetBrains Mono,monospace;font-size:10px}.alert-filter-row{flex-wrap:wrap;gap:6px;margin-bottom:14px;display:flex}.fchip{border-radius:var(--r-full);border:1px solid var(--border);background:var(--bg-card);color:var(--text-3);cursor:pointer;transition:all var(--t-fast);padding:5px 12px;font-family:Inter,sans-serif;font-size:12px;font-weight:500}.fchip.active{background:var(--blue);color:#fff;border-color:var(--blue)}.fchip.crit{background:var(--red);color:#fff;border-color:var(--red)}.fchip.warn{background:var(--amber);color:#fff;border-color:var(--amber)}.setting-row{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:14px;padding:13px 0;display:flex}.setting-row:last-child{border-bottom:none}.setting-label{color:var(--text-1);font-size:14px;font-weight:600}.setting-hint{color:var(--text-3);margin-top:2px;font-size:11px}.s-input{background:var(--bg-input);border:1.5px solid var(--border);border-radius:var(--r-sm);color:var(--text-1);width:260px;transition:border-color var(--t-fast), box-shadow var(--t-fast);outline:none;padding:8px 12px;font-family:JetBrains Mono,monospace;font-size:12px}.s-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #2563eb1a}pre.code-block{background:var(--bg-app);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text-2);margin-top:10px;padding:14px 16px;font-family:JetBrains Mono,monospace;font-size:11.5px;line-height:1.7;overflow-x:auto}.btn{border-radius:var(--r-md);cursor:pointer;transition:all var(--t-fast);border:none;align-items:center;gap:7px;padding:9px 18px;font-family:Inter,sans-serif;font-size:13px;font-weight:600;display:inline-flex}.btn:active{transform:scale(.97)}.btn-primary{background:var(--blue);color:#fff;box-shadow:0 2px 8px #2563eb4d}.btn-primary:hover{background:var(--blue-dark);box-shadow:0 4px 14px #2563eb66}.btn-ghost{background:var(--bg-card);color:var(--text-2);border:1.5px solid var(--border)}.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}.btn-danger{background:var(--red-light);color:var(--red);border:1.5px solid var(--red-mid)}.btn-danger:hover{background:var(--red);color:#fff}.cmd-log{max-height:180px;overflow-y:auto}.cmd-row{border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:7px 0;font-size:12px;display:flex}.cmd-row:last-child{border-bottom:none}.cmd-name{min-width:88px;font-family:JetBrains Mono;font-weight:600}.cmd-ok{color:var(--green);font-size:10px;font-weight:700}.cmd-demo{color:var(--amber);font-size:10px;font-weight:700}.cmd-time{color:var(--text-4);margin-left:auto;font-family:JetBrains Mono;font-size:10px}.toast-portal{z-index:9999;pointer-events:none;flex-direction:column;gap:8px;width:320px;display:flex;position:fixed;top:72px;right:16px}.toast{background:var(--bg-card);border-radius:var(--r-md);pointer-events:all;box-shadow:var(--shadow-lg);border:1.5px solid;align-items:flex-start;gap:10px;padding:12px 14px;animation:.3s cubic-bezier(.34,1.56,.64,1) toast-slide;display:flex}@keyframes toast-slide{0%{opacity:0;transform:translate(110%)}to{opacity:1;transform:translate(0)}}.toast.critical{border-color:var(--red);background:var(--red-light)}.toast.warning{border-color:var(--amber);background:var(--amber-light)}.toast-icon{flex-shrink:0;margin-top:1px;font-size:16px}.toast-body{flex:1}.toast-title{color:var(--text-1);font-size:12px;font-weight:700}.toast-msg{color:var(--text-3);margin-top:2px;font-size:11px;line-height:1.4}.toast-time{color:var(--text-4);margin-top:3px;font-family:JetBrains Mono;font-size:10px}.toast-x{cursor:pointer;color:var(--text-4);transition:color var(--t-fast);background:0 0;border:none;flex-shrink:0;padding:0;font-size:15px}.toast-x:hover{color:var(--text-1)}.recharts-cartesian-grid-horizontal line,.recharts-cartesian-grid-vertical line{stroke:#e2e8f0!important}.recharts-text{fill:#94a3b8!important}.empty{color:var(--text-4);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:40px 24px;display:flex}.empty-ico{opacity:.5;font-size:36px}.empty-title{color:var(--text-3);font-size:14px;font-weight:600}.empty-desc{max-width:240px;font-size:12px;line-height:1.5}.mob-nav{height:var(--mobnav-h);background:var(--bg-overlay);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--border);z-index:300;display:none;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 20px #00000014}.mob-nav-inner{align-items:stretch;height:100%;display:flex}.mob-tab{color:var(--text-4);cursor:pointer;transition:all var(--t-fast);text-transform:uppercase;letter-spacing:.3px;background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;padding:6px 4px 8px;font-family:Inter,sans-serif;font-size:9px;font-weight:600;display:flex;position:relative}.mob-tab.active{color:var(--blue)}.mob-tab.active:before{content:"";background:var(--blue);border-radius:0 0 2px 2px;height:2px;position:absolute;top:0;left:15%;right:15%}.mob-tab-icon{font-size:20px;position:relative}.mob-badge{background:var(--red);color:#fff;text-align:center;border-radius:8px;min-width:14px;padding:1px 4px;font-size:8px;font-weight:700;position:absolute;top:-4px;right:-6px}.fade-in{animation:.3s forwards fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (width<=1024px){.grid-4{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){.page-wrap{padding:14px 14px 100px}.header-tabs{display:none}.mob-nav{display:block}.grid-3{grid-template-columns:repeat(2,1fr)}.hero-stats{gap:16px}.hero-name{font-size:17px}.s-input{width:100%}.setting-row{flex-direction:column;align-items:flex-start;gap:8px}.toast-portal{width:auto;left:12px;right:12px}}@media (width<=540px){.grid-4,.grid-3,.grid-2{grid-template-columns:repeat(2,1fr)}.hero-bar{padding:16px}.dbtn{width:68px;height:64px}.dbtn-stop{width:64px;height:64px}.dbtn-icon{font-size:18px}}@media (width<=360px){.grid-4,.grid-3,.grid-2,.grid-auto{grid-template-columns:1fr}.dbtn{width:60px;height:58px}}