:root{--panel-bg:rgba(35,40,45,.72);--accent:#49c6ff}body{background:linear-gradient(180deg,#0f1724,#08111a);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial}.panel{width:980px;max-width:98vw;border-radius:18px;padding:18px;background:var(--panel-bg);box-shadow:0 8px 30px rgba(0,0,0,.6);color:#e6eef6}.metric-card{background:linear-gradient(180deg,hsla(0,0%,100%,.02),hsla(0,0%,100%,.01));border:1px solid hsla(0,0%,100%,.03);border-radius:12px;padding:12px 14px}.big-value{font-weight:700;font-size:2.4rem;line-height:1}.unit{font-size:.9rem;opacity:.85}.small-label{font-size:.86rem;opacity:.8}.power-btn{width:110px;height:110px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:hsla(0,0%,100%,.03);border:1px solid hsla(0,0%,100%,.04);color:#cfeffd;cursor:pointer;transition:all .3s ease}.power-btn.btn-primary{background-color:var(--bs-primary,#0d6efd)!important;border-color:var(--bs-primary,#0d6efd)!important;color:#fff!important}.speed-dot{width:16px;height:16px;border-radius:50%;background-color:rgba(0,255,255,.15);transition:background-color .2s ease}.extra-large-dot{width:22px;height:22px}.speed-dot.active{background-color:#00bfff;box-shadow:0 0 12px rgba(0,191,255,.5)}.power-btn i{font-size:48px;color:#cfeffd}.power-btn.btn-primary i{color:#fff}.mode-btn{min-width:92px}.btn-ghost{background:hsla(0,0%,100%,.08);border:1px solid hsla(0,0%,100%,.15);color:#e6eef6}.btn-ghost:hover{background:hsla(0,0%,100%,.15);border-color:hsla(0,0%,100%,.25);color:#fff}.control-round{width:48px;height:48px;border-radius:10px}.control-round,.control-round-large{display:flex;align-items:center;justify-content:center}.control-round-large{width:56px;height:56px;border-radius:12px;font-size:1.2rem}.speed-control-btn{background:rgba(73,198,255,.2)!important;border:2px solid rgba(73,198,255,.4)!important;color:#49c6ff!important;transition:all .3s ease}.speed-control-btn:hover{background:rgba(73,198,255,.4)!important;border-color:rgba(73,198,255,.8)!important;color:#fff!important;transform:scale(1.05)}.auto-toggle-btn{width:70px;height:36px;background:#4a4a4a!important;border:2px solid #666!important;border-radius:20px;position:relative;transition:all .4s ease;padding:0;cursor:pointer}.auto-toggle-btn:hover{background:#5a5a5a!important;border-color:#777!important}.auto-toggle-btn.active{background:linear-gradient(135deg,var(--accent),#66d9ff)!important;border-color:var(--accent)!important;box-shadow:0 0 15px rgba(73,198,255,.4)}.toggle-slider{width:28px;height:28px;background:linear-gradient(135deg,#fff,#f0f0f0);border-radius:50%;position:absolute;top:2px;left:2px;transition:all .4s cubic-bezier(.68,-.55,.265,1.55);box-shadow:0 3px 8px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.2);border:1px solid hsla(0,0%,100%,.8)}.auto-toggle-btn.active .toggle-slider{transform:translateX(34px);background:linear-gradient(135deg,#fff,#e8f4fd);box-shadow:0 4px 12px rgba(73,198,255,.6),0 2px 6px rgba(0,0,0,.3)}.auto-toggle-btn:before{content:"";position:absolute;top:50%;left:8px;transform:translateY(-50%);width:12px;height:12px;background:hsla(0,0%,100%,.6);border-radius:50%;opacity:0;transition:opacity .3s ease}.auto-toggle-btn.active:before{opacity:1}.auto-toggle-btn:after{content:"";position:absolute;top:50%;right:8px;transform:translateY(-50%);width:12px;height:12px;background:hsla(0,0%,100%,.8);border-radius:50%;opacity:0;transition:opacity .3s ease}.auto-toggle-btn.active:after{opacity:1}.gauge{height:6px;background:linear-gradient(90deg,#2a8bd6,#3eca9a);border-radius:6px}.metric-row{gap:12px}.footer-icons .btn{background:transparent;border:1px solid hsla(0,0%,100%,.03)}.connection-status{display:flex;align-items:center;gap:4px;opacity:.5;transition:opacity .3s ease}.connection-status.connected{opacity:1}.connection-status .bi-circle-fill{font-size:8px;color:#dc3545}.connection-status.connected .bi-circle-fill{color:#28a745}.connection-status small{font-size:.7rem;color:#e6eef6}.iframe-container{width:980px;max-width:98vw;border-radius:18px;overflow:hidden;background:var(--panel-bg);box-shadow:0 8px 30px rgba(0,0,0,.6)}@media (max-width:880px){.panel{padding:12px}.power-btn{width:86px;height:86px}.extra-large-dot{width:18px;height:18px}.control-round-large{width:48px;height:48px;font-size:1rem}}