*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#0f0f23,#1a1a2e,#16213e);color:#fff;overflow:hidden;height:100vh;position:relative}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 80%,rgba(120,119,198,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,119,198,.1) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(120,219,255,.05) 0%,transparent 50%);pointer-events:none;z-index:-1}#app{width:100%;height:100vh;position:relative}#renderCanvas{width:100%;height:100%;display:block;outline:none}.tools-dock{position:fixed;top:24px;left:50%;transform:translate(-50%);display:flex;gap:12px;background:#0f0f23cc;padding:12px 20px;border-radius:16px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0000004d,inset 0 1px #ffffff1a;z-index:100}.tools-dock.horizontal{flex-direction:row}.icon-btn{width:48px;height:48px;border:none;background:linear-gradient(145deg,#ffffff1a,#ffffff0d);border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.icon-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.2),transparent);opacity:0;transition:opacity .3s ease}.icon-btn:hover{background:linear-gradient(145deg,#fff3,#ffffff1a);transform:translateY(-3px) scale(1.05);box-shadow:0 8px 25px #0003,0 0 0 1px #fff3}.icon-btn:hover:before{opacity:1}.icon-btn[aria-pressed=true]{background:linear-gradient(145deg,#6366f1,#8b5cf6);box-shadow:0 8px 25px #6366f166,0 0 0 2px #6366f14d,inset 0 1px #fff3;transform:translateY(-2px)}.icon-btn .icon{width:22px;height:22px;filter:brightness(0) invert(1);transition:all .3s ease}.icon-btn:hover .icon{transform:scale(1.1)}.transform-panel{position:fixed;top:100px;left:50%;transform:translate(-50%);background:#0f0f23e6;padding:16px 20px;border-radius:14px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0000004d,inset 0 1px #ffffff1a;z-index:100;min-width:280px;max-width:320px}.transform-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.transform-title{font-weight:600;font-size:13px}.transform-mode{color:#3a86ff;font-size:11px;font-weight:500}.transform-inputs{display:flex;gap:10px}.transform-input-group{display:flex;flex-direction:column;gap:4px}.transform-input-group label{font-size:11px;color:#ccc;text-transform:uppercase;letter-spacing:.5px}.transform-input-group input{width:55px;padding:5px 7px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:5px;color:#fff;font-size:12px;-moz-appearance:textfield}.transform-input-group input::-webkit-outer-spin-button,.transform-input-group input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.transform-input-group input:focus{outline:none;border-color:#3a86ff;box-shadow:0 0 0 2px #3a86ff33}.floating-open{position:fixed;top:24px;left:24px;width:56px;height:56px;border:none;background:linear-gradient(145deg,#0f0f23e6,#0a0a19cc);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0000004d,inset 0 1px #ffffff1a;z-index:100;transition:all .4s cubic-bezier(.4,0,.2,1);opacity:0;transform:scale(.8) translateY(-20px)}.floating-open.show{opacity:1;transform:scale(1) translateY(0)}.floating-open:hover{background:linear-gradient(145deg,#6366f133,#8b5cf61a);transform:scale(1.1) translateY(-2px);box-shadow:0 12px 40px #6366f14d,0 0 0 1px #6366f133,inset 0 1px #fff3}.floating-open .icon{width:26px;height:26px;filter:brightness(0) invert(1);transition:all .3s ease}.floating-open:hover .icon{transform:scale(1.1)}.drawer{position:fixed;top:0;left:0;width:420px;height:100vh;background:linear-gradient(180deg,#0f0f23f2,#0a0a19fa);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-right:1px solid rgba(255,255,255,.1);box-shadow:8px 0 32px #0000004d,inset -1px 0 #ffffff1a;z-index:200;display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.4,0,.2,1);overflow-y:auto}.drawer.collapsed{transform:translate(-100%)}.drawer-header{padding:20px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center}.drawer-title{font-size:18px;font-weight:600}.btn{padding:12px 20px;border:none;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden;text-transform:uppercase;letter-spacing:.5px}.btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.btn:hover:before{left:100%}.btn.ghost{background:#ffffff0d;color:#ccc;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn.ghost:hover{background:#ffffff1a;border-color:#fff3;transform:translateY(-2px);box-shadow:0 8px 25px #0003}.btn.primary{background:linear-gradient(145deg,#6366f1,#8b5cf6);color:#fff;box-shadow:0 4px 15px #6366f14d,inset 0 1px #fff3}.btn.primary:hover{background:linear-gradient(145deg,#5b5cf0,#7c3aed);transform:translateY(-2px);box-shadow:0 8px 25px #6366f166,inset 0 1px #ffffff4d}.btn.solid{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn.solid:hover{background:#fff3;border-color:#ffffff4d;transform:translateY(-2px);box-shadow:0 8px 25px #0003}.btn.danger{background:linear-gradient(145deg,#ef4444,#dc2626);color:#fff;box-shadow:0 4px 15px #ef44444d,inset 0 1px #fff3}.btn.danger:hover{background:linear-gradient(145deg,#dc2626,#b91c1c);transform:translateY(-2px);box-shadow:0 8px 25px #ef444466,inset 0 1px #ffffff4d}.btn.full{width:100%;justify-content:center}.btn.secondary{background:linear-gradient(145deg,#6366f133,#6366f11a);border:1px solid rgba(99,102,241,.3);color:#a5b4fc}.btn.secondary:hover{background:linear-gradient(145deg,#6366f14d,#6366f133);border-color:#6366f180;color:#c7d2fe;transform:translateY(-1px)}.btn .icon{width:16px;height:16px;filter:brightness(0) invert(1);transition:all .3s ease}.btn:hover .icon{transform:scale(1.1)}.status-line{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:12px}.dot{width:8px;height:8px;border-radius:50%;background:#ef4444;transition:background .3s ease}.dot.ok{background:#10b981}.tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.1);background:#0003}.tab{flex:1;padding:18px 20px;text-align:center;cursor:pointer;border-bottom:3px solid transparent;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:14px;font-weight:600;position:relative;overflow:hidden}.tab:before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(99,102,241,.1),transparent);opacity:0;transition:opacity .3s ease}.tab:hover{background:#ffffff0d;transform:translateY(-1px)}.tab:hover:before{opacity:1}.tab.active{border-bottom-color:#6366f1;color:#6366f1;background:#6366f11a;box-shadow:inset 0 1px #ffffff1a}.tab.active:before{opacity:1}.panel{display:none;flex:1;padding:20px;overflow-y:auto}.panel.active{display:block}.group{margin-bottom:32px;background:#ffffff05;border-radius:12px;padding:20px;border:1px solid rgba(255,255,255,.05);transition:all .3s ease}.group:hover{background:#ffffff0a;border-color:#ffffff1a}.group-head{display:flex;align-items:center;gap:16px;margin-bottom:20px}.head-icon{width:40px;height:40px;background:linear-gradient(145deg,#6366f133,#8b5cf61a);border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #6366f133,inset 0 1px #ffffff1a;transition:all .3s ease}.head-icon:hover{transform:scale(1.05);box-shadow:0 6px 16px #6366f14d,inset 0 1px #fff3}.head-icon img{width:20px;height:20px;filter:brightness(0) invert(1);transition:all .3s ease}.head-icon:hover img{transform:scale(1.1)}.head-title .t1{font-size:18px;font-weight:700;color:#fff;letter-spacing:-.5px}.head-title .t2{font-size:13px;color:#a0a0a0;margin-top:4px;font-weight:500}.row{margin-bottom:16px}.row.inline{display:flex;gap:12px}.row.inline>div{flex:1}.row label{display:block;font-size:12px;font-weight:500;color:#ccc;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}input[type=text],input[type=number],input[type=color],select{width:100%;padding:12px 40px 12px 16px;background:#0006;border:1px solid rgba(255,255,255,.2);border-radius:10px;color:#fff;font-size:14px;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 8px #0000004d;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}select option{background:#1a1a2e!important;color:#fff!important;padding:8px 12px;font-weight:500;border:none}select option:hover,select option:focus,select option:checked{background:#6366f1cc!important;color:#fff!important}select option:disabled{background:#ffffff1a!important;color:#ffffff80!important}select::-ms-expand{display:none}select:focus{outline:none;border-color:#6366f1;background:#0009;box-shadow:0 0 0 2px #6366f14d}select option{background-color:#1a1a2e!important;color:#fff!important}select:focus option{background-color:#1a1a2e!important;color:#fff!important}input[type=text]:focus,input[type=number]:focus,input[type=color]:focus,select:focus{outline:none;border-color:#6366f1;background:#ffffff14;box-shadow:0 0 0 3px #6366f133,0 4px 12px #6366f11a;transform:translateY(-1px)}input[type=color]{height:44px;padding:6px;cursor:pointer;border-radius:10px;overflow:hidden}input[type=color]::-webkit-color-swatch-wrapper{border-radius:6px;overflow:hidden}input[type=color]::-webkit-color-swatch{border:none;border-radius:6px}.select-line{display:flex;gap:8px}.version-display{position:fixed;bottom:16px;right:16px;background:#0f0f23cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:6px 12px;color:#a0a0a0;font-size:11px;font-weight:500;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;letter-spacing:.3px;z-index:50;pointer-events:none;-webkit-user-select:none;user-select:none;box-shadow:0 4px 12px #0003;transition:all .3s ease}.version-display:hover{background:#0f0f23e6;color:silver;transform:translateY(-1px);box-shadow:0 6px 16px #0000004d}.select-line select{flex:1}.select-line .btn{white-space:nowrap}.toggle-container{display:flex;align-items:center;gap:8px}.toggle{position:relative;width:44px;height:24px;background:#fff3;border-radius:12px;cursor:pointer;transition:all .3s ease;border:none;outline:none}.toggle:checked{background:#3a86ff}.toggle-slider{position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:all .3s ease}.toggle:checked+.toggle-label .toggle-slider{transform:translate(20px)}.toggle-label{cursor:pointer;font-size:14px;color:#ccc}.list{background:#ffffff0d;border-radius:8px;padding:8px;min-height:100px;max-height:200px;overflow-y:auto}.list-empty{color:#666;text-align:center;padding:20px;font-style:italic}.sensor-item,.env-item{display:flex;justify-content:space-between;align-items:center;padding:12px;margin-bottom:8px;background:#ffffff0d;border-radius:6px;cursor:pointer;transition:all .2s ease;border:1px solid transparent}.sensor-item:hover,.env-item:hover{background:#ffffff1a}.sensor-item.selected,.env-item.selected{background:#3a86ff1a;border-color:#3a86ff4d}.sensor-info,.env-name{flex:1}.sensor-name{font-weight:500;color:#fff;margin-bottom:2px}.sensor-details{font-size:12px;color:#ccc}.sensor-actions{display:flex;gap:8px}.sensor-eye,.sensor-delete,.env-delete{width:32px;height:32px;border:none;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.sensor-eye{background:#ffffff1a;color:#ccc}.sensor-eye.enabled{background:#10b98133;color:#10b981}.sensor-eye:hover{background:#fff3}.sensor-delete,.env-delete{background:#ffffff1a;color:#ef4444;border:1px solid rgba(239,68,68,.3)}.sensor-delete:hover,.env-delete:hover{background:#ef444433;border-color:#ef444480;transform:scale(1.05)}.sensor-delete .icon,.env-delete .icon{width:16px;height:16px;filter:brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);transition:all .2s ease}.sensor-delete:hover .icon,.env-delete:hover .icon{filter:brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(120%) contrast(120%);transform:scale(1.1)}.chip{display:inline-block;padding:4px 8px;background:#3a86ff1a;border:1px solid rgba(58,134,255,.3);border-radius:4px;font-size:12px;color:#3a86ff;margin:2px;cursor:pointer;transition:all .2s ease}.chip:hover{background:#3a86ff33}.drawer-footer{padding:16px 20px;border-top:1px solid rgba(255,255,255,.1);background:#00000080}.footer-broker{font-size:12px;color:#666}.footer-broker code{background:#ffffff1a;padding:2px 6px;border-radius:4px;font-family:Courier New,monospace;color:#3a86ff}.version-number{position:fixed;bottom:20px;left:20px;background:#000c;padding:8px 12px;border-radius:6px;font-size:12px;color:#666;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);z-index:100}@media (max-width: 768px){.drawer{width:100%}.tools-dock{left:20px;right:20px;transform:none;justify-content:center}.transform-panel{left:20px;right:20px;transform:none;min-width:240px;max-width:none}.floating-open{left:20px}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#ffffff1a;border-radius:3px}::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffffff80}