:root{--text: #ffffff;--bg: #0f172a;--card-bg: #1e293b;--border: #334155;--accent: #38bdf8;--accent-hover: #0ea5e9;--primary: #818cf8;--primary-hover: #6366f1;--header-height: 80px;font-family:Inter,system-ui,-apple-system,sans-serif;color-scheme:dark}body{margin:0;padding:0;background:var(--bg);color:var(--text);overflow:hidden;height:100vh}#app{display:flex;flex-direction:column;height:100vh}header{height:var(--header-height);padding:0 40px;display:flex;align-items:center;justify-content:space-between;background:var(--card-bg);border-bottom:1px solid var(--border);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;z-index:10}header h1{font-size:24px;font-weight:700;margin:0;background:linear-gradient(to right,var(--accent),var(--primary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;flex-shrink:0}.status-container{display:flex;gap:24px;align-items:center;flex-grow:1;justify-content:center}.status-item{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#64748b;transition:color .3s ease;background:#ffffff08;padding:6px 12px;border-radius:20px;border:1px solid var(--border)}.status-item.connected{color:#10b981;background:#10b9810d;border-color:#10b98133}.status-item.searching{color:#f59e0b;background:#f59e0b0d;border-color:#f59e0b33}.status-dot{width:8px;height:8px;border-radius:50%;background:#64748b;box-shadow:0 0 0 2px #64748b1a;transition:all .3s ease}.status-dot.connected{background:#10b981;box-shadow:0 0 8px #10b981;animation:pulse 2s infinite}.status-dot.searching{background:#f59e0b;box-shadow:0 0 8px #f59e0b;animation:pulse-orange 1.5s infinite}@keyframes pulse-orange{0%{box-shadow:0 0 #f59e0b66}70%{box-shadow:0 0 0 6px #f59e0b00}to{box-shadow:0 0 #f59e0b00}}@keyframes pulse{0%{box-shadow:0 0 #10b98166}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.controls{display:flex;gap:16px}.premium-btn{padding:10px 24px;border-radius:8px;border:1px solid var(--border);background:transparent;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:8px}.premium-btn:hover{background:var(--card-bg);border-color:var(--accent);transform:translateY(-1px)}.premium-btn.primary{background:var(--primary);border-color:var(--primary)}.premium-btn.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);box-shadow:0 0 15px #818cf866}.premium-btn.connected{background:#10b981;border-color:#10b981;box-shadow:0 0 10px #10b9814d}.premium-btn.connected:hover{background:#059669;border-color:#059669}.dropdown{position:relative;display:inline-block}.dropdown-content{display:none;position:absolute;top:100%;padding-top:8px;left:50%;transform:translate(-50%);min-width:220px;z-index:100}.dropdown-content.right-align{left:auto;right:0;transform:none}.dropdown-content:after{content:"";display:block;background:var(--card-bg);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 25px -5px #0000004d,0 8px 10px -6px #0000004d;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:absolute;inset:8px 0 0;z-index:-1}.dropdown.active .dropdown-content{display:block;animation:fadeInDown .2s cubic-bezier(.4,0,.2,1)}.dropdown.active .dropdown-content.right-align{animation:fadeInDownRight .2s cubic-bezier(.4,0,.2,1)}@keyframes fadeInDown{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes fadeInDownRight{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.dropdown-item{width:100%;padding:12px 16px;border:none;background:transparent;color:#94a3b8;font-size:14px;font-weight:600;text-align:left;cursor:pointer;display:flex;align-items:center;gap:10px;transition:all .2s ease}.dropdown-item:first-of-type{border-radius:10px 10px 0 0}.dropdown-item:last-of-type{border-radius:0 0 10px 10px}.dropdown-item:hover{background:#ffffff0d;color:#fff}.dropdown-item.active{color:var(--accent);background:#38bdf80d}.dropdown-item.connected{color:#10b981}.dropdown-item.connected:after{content:"✓";margin-left:auto;font-size:12px}.premium-select{padding:10px 40px 10px 16px;border-radius:8px;border:1px solid var(--border);background:var(--card-bg);color:#fff;font-size:14px;font-weight:600;cursor:pointer;outline:none;transition:all .2s cubic-bezier(.4,0,.2,1);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}.premium-select:hover{border-color:var(--accent)}.premium-select:focus{border-color:var(--accent);box-shadow:0 0 0 2px #38bdf833}main{flex-grow:1;width:100%;padding:20px;box-sizing:border-box;background:var(--bg);position:relative;display:flex;gap:16px}#blocklyDiv{flex:1;min-width:0;height:calc(100vh - var(--header-height) - 40px);border-radius:12px;overflow:hidden;border:1px solid var(--border);background:#1a2744}.blocklyHighlighted>.blocklyPath{stroke:var(--accent)!important;stroke-width:4px!important;filter:drop-shadow(0 0 6px var(--accent))}.blocklyMainBackground{stroke:none!important;fill:#1a2744!important}.blocklyToolbox{background-color:#162035!important;border-right:1px solid var(--border)!important;color:var(--text)!important}.blocklyTreeLabel{color:var(--text)!important;font-family:inherit!important}.blocklyFlyoutBackground{fill:#1e2d4a!important;fill-opacity:.95!important}#sidebarRight{display:flex;height:calc(100vh - var(--header-height) - 40px);background:#0c1222;border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:width .3s cubic-bezier(.4,0,.2,1);width:400px}#sidebarRight.collapsed{width:48px}.sidebar-tray{width:48px;background:#090e1a;border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:12px;flex-shrink:0}.tray-btn{width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.tray-btn:hover{background:#ffffff0d;border-color:var(--border)}.tray-btn.active{background:#38bdf826;border-color:var(--accent);color:var(--accent)}.sidebar-content{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;position:relative}.panel{flex:1;display:flex;flex-direction:column;height:100%;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}.panel.hidden{display:none}.panel-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:#ffffff05;flex-wrap:wrap;gap:8px}.panel-header h3{margin:0;font-size:14px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em}.canvas-wrap{flex:1;min-height:0;position:relative}#simulationCanvas,#lidarCanvas{display:block;width:100%;height:100%}.panel-actions{display:flex;align-items:center;gap:8px}.premium-btn.sm{padding:6px 12px;font-size:11px}.text-btn{background:transparent;border:none;color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background .2s}.text-btn:hover{background:#38bdf81a}.premium-btn.danger{background:#ef4444;border-color:#ef4444;animation:danger-glow 2s infinite}.premium-btn.danger:hover{background:#dc2626;border-color:#dc2626;box-shadow:0 0 15px #ef444480}.premium-btn.danger-estop{background:#dc2626;border-color:#b91c1c;color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:1px;box-shadow:0 0 20px #dc262699;animation:estop-pulse 1.5s infinite}.premium-btn.danger-estop:hover{background:#b91c1c;border-color:#991b1b;transform:scale(1.05);box-shadow:0 0 30px #dc2626cc}@keyframes estop-pulse{0%{box-shadow:0 0 10px #dc262666}50%{box-shadow:0 0 25px #dc2626cc}to{box-shadow:0 0 10px #dc262666}}@keyframes danger-glow{0%,to{box-shadow:0 0 5px #ef44444d}50%{box-shadow:0 0 15px #ef444480}}.premium-btn.primary:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.execution-bar{display:flex;align-items:center;gap:16px;padding:0 40px;height:44px;background:linear-gradient(135deg,#818cf814,#38bdf80f);border-bottom:1px solid rgba(129,140,248,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .35s cubic-bezier(.4,0,.2,1);overflow:hidden;z-index:9}.execution-bar.hidden{height:0;padding-top:0;padding-bottom:0;border-bottom:none;opacity:0}.execution-bar.status-running{background:linear-gradient(135deg,#818cf81a,#38bdf80f);border-bottom-color:#818cf840}.execution-bar.status-finished{background:linear-gradient(135deg,#10b9811a,#34d3990f);border-bottom-color:#10b98140}.execution-bar.status-stopped{background:linear-gradient(135deg,#f59e0b1a,#fbbf240f);border-bottom-color:#f59e0b40}.execution-bar.status-error{background:linear-gradient(135deg,#ef44441a,#f871710f);border-bottom-color:#ef444440}.exec-status{display:flex;align-items:center;gap:10px;flex-shrink:0}.exec-icon{font-size:16px;line-height:1;animation:spin-icon 1.2s linear infinite}.execution-bar:not(.status-running) .exec-icon{animation:none}@keyframes spin-icon{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.exec-text{font-size:13px;font-weight:600;color:#cbd5e1;white-space:nowrap}.execution-bar.status-running .exec-text{color:var(--primary)}.execution-bar.status-finished .exec-text{color:#10b981}.execution-bar.status-stopped .exec-text{color:#f59e0b}.execution-bar.status-error .exec-text{color:#ef4444}.exec-timer{font-size:12px;font-weight:500;color:#64748b;font-variant-numeric:tabular-nums;min-width:42px}.exec-progress-track{flex:1;height:4px;background:#ffffff0f;border-radius:4px;overflow:hidden}.exec-progress-bar{height:100%;width:0%;border-radius:4px;transition:width .3s ease}.execution-bar.status-running .exec-progress-bar{background:linear-gradient(90deg,var(--primary),var(--accent));animation:progress-indeterminate 1.8s ease-in-out infinite;width:100%!important}.execution-bar.status-finished .exec-progress-bar{background:#10b981;width:100%!important;animation:none}.execution-bar.status-stopped .exec-progress-bar{background:#f59e0b;animation:none}.execution-bar.status-error .exec-progress-bar{background:#ef4444;width:100%!important;animation:none}@keyframes progress-indeterminate{0%{transform:translate(-100%)}50%{transform:translate(0)}to{transform:translate(100%)}}.exec-stop-btn{width:30px;height:30px;border-radius:6px;border:1px solid rgba(239,68,68,.4);background:#ef44441a;color:#ef4444;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.exec-stop-btn:hover{background:#ef444440;border-color:#ef4444;transform:scale(1.05)}.execution-bar:not(.status-running) .exec-stop-btn{opacity:0;pointer-events:none}#toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column-reverse;gap:12px;pointer-events:none}.toast{min-width:280px;max-width:400px;padding:12px 16px;background:var(--card-bg);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 15px -3px #0006,0 4px 6px -2px #0003;display:flex;align-items:center;gap:12px;transform:translate(120%);transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:auto;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.toast.visible{transform:translate(0)}.toast-icon{font-size:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toast-text{font-size:14px;font-weight:500;line-height:1.4;color:var(--text)}.toast.success{border-left:4px solid #10b981}.toast.error{border-left:4px solid #ef4444}.toast.warning{border-left:4px solid #f59e0b}.toast.info{border-left:4px solid var(--accent)}.toast-action-btn{margin-left:auto;padding:6px 12px;background:var(--accent);color:#0f172a;border:none;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s ease;white-space:nowrap}.toast-action-btn:hover{background:#fff;transform:translateY(-1px)}.resizer{width:4px;cursor:col-resize;background:transparent;transition:background .2s;position:absolute;top:0;left:0;bottom:0;z-index:5}.resizer:hover,.resizer.resizing{background:var(--accent)}#sidebarRight{position:relative}
