@import"https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Fira+Code:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap";:root{--bg-dark: #070a11;--panel-bg: rgba(13, 18, 28, .95);--panel-border: rgba(255, 255, 255, .08);--brand-red: #ff3131;--cyan-accent: #38bdf8;--emerald-accent: #10b981;--purple-accent: #c084fc;--amber-accent: #fbbf24;--rose-accent: #ff4757;--font-hud: "Chakra Petch", sans-serif;--font-body: "Inter", system-ui, -apple-system, sans-serif;--font-code: "Fira Code", monospace}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:#f1f5f9;font-family:var(--font-body);height:100vh;overflow:hidden;-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:#080c14e6}::-webkit-scrollbar-thumb{background:#1e293b;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#334155}.app-layout{display:flex;flex-direction:column;height:100vh;width:100vw;background:#070a11}.header-container{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 1.25rem;background:#0a0e16f5;border-bottom:1px solid var(--panel-border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:20;box-shadow:0 4px 16px #0006;overflow-x:auto;white-space:nowrap}.brand-group{display:flex;align-items:center;gap:.75rem}.logo-icon{width:36px;height:36px;border-radius:8px;background:#ff313114;border:1px solid rgba(255,49,49,.3);display:flex;align-items:center;justify-content:center;transition:all .15s ease-out}.logo-icon:hover{transform:scale(1.03);border-color:var(--brand-red)}.brand-title{font-family:var(--font-hud);font-weight:700;font-size:1.15rem;letter-spacing:.75px;color:#fff;text-transform:uppercase}.brand-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-hud);font-size:.65rem;font-weight:600;color:#64748b;letter-spacing:1px;text-transform:uppercase}.dot{width:6px;height:6px;border-radius:50%;background:#475569}.dot-active{background:var(--brand-red)}.telemetry-bar{display:flex;align-items:center;gap:.5rem;background:#0e131de6;padding:.25rem .6rem;border-radius:8px;border:1px solid var(--panel-border);flex-shrink:0;white-space:nowrap}.telemetry-item{display:flex;align-items:center;gap:.4rem;font-size:.75rem;white-space:nowrap;flex-shrink:0}.telemetry-label{color:#64748b;font-family:var(--font-hud);font-size:.68rem;text-transform:uppercase;letter-spacing:.5px}.telemetry-value{font-family:var(--font-hud);font-weight:700;font-size:.82rem;letter-spacing:.5px}.control-group{display:flex;align-items:center;gap:.5rem}.speed-selector{display:flex;align-items:center;gap:3px;background:#0d131ee6;padding:3px;border-radius:7px;border:1px solid var(--panel-border)}.speed-label{font-family:var(--font-hud);font-size:.68rem;color:#64748b;padding:0 4px}.speed-btn{background:transparent;border:none;color:#94a3b8;font-family:var(--font-hud);font-size:.72rem;font-weight:600;padding:3px 8px;border-radius:5px;cursor:pointer;transition:all .15s ease-out}.speed-btn:hover{color:#fff}.speed-btn.active{background:#1e293b;color:#fff;border:1px solid #334155}.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:.45rem .9rem;border-radius:7px;font-family:var(--font-hud);font-size:.78rem;font-weight:600;letter-spacing:.5px;cursor:pointer;transition:all .15s ease-out;border:1px solid transparent;white-space:nowrap;-webkit-user-select:none;user-select:none}.ui-btn:active{transform:translateY(1px)}.ui-btn-primary{background:#ff3131;color:#fff;border-color:#ff313166}.ui-btn-primary:hover{background:#e02828}.ui-btn-cyan{background:#38bdf81f;color:#38bdf8;border-color:#38bdf84d}.ui-btn-cyan:hover{background:#38bdf833;border-color:#38bdf880}.ui-btn-secondary{background:#141b29e6;color:#e2e8f0;border-color:#ffffff1a}.ui-btn-secondary:hover{background:#1e293b;color:#fff;border-color:#fff3}.ui-btn-danger{background:#ff31311f;color:#ff4757;border-color:#ff31314d}.ui-btn-danger:hover{background:#ff313140;color:#fff}.ui-btn-icon{padding:.45rem;background:#141b29e6;color:#94a3b8;border-color:#ffffff1a}.ui-btn-icon:hover{color:#fff;background:#1e293b}.ui-input{background:#080c14e6;color:#f1f5f9;border:1px solid #1e293b;border-radius:7px;padding:.4rem .75rem;font-family:var(--font-code);font-size:.76rem;outline:none;transition:all .15s ease-out}.ui-input:focus{border-color:#ff313180}.ui-select{background:#080c14e6;color:#f1f5f9;border:1px solid #1e293b;border-radius:7px;padding:.4rem .75rem;font-family:var(--font-hud);font-size:.76rem;outline:none;cursor:pointer;transition:all .15s ease-out}.ui-select:focus{border-color:#ff313180}.main-content{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem;flex:1;overflow:hidden}.left-pane{display:flex;flex-direction:column;gap:1rem;overflow:hidden}.right-pane{display:flex;flex-direction:column;background:var(--panel-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--panel-border);border-radius:12px;overflow:hidden;box-shadow:0 10px 30px #0006}.canvas-container{background:var(--panel-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--panel-border);border-radius:12px;padding:.75rem;display:flex;flex-direction:column;box-shadow:0 8px 24px #0000004d}.canvas-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.canvas-title{font-family:var(--font-hud);font-size:.8rem;font-weight:700;letter-spacing:.75px;color:var(--cyan-accent);text-transform:uppercase}.canvas-wrapper{position:relative;width:100%;aspect-ratio:1 / 1;max-height:440px;background:#05080e;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}.canvas-element{width:100%;height:100%;display:block;cursor:crosshair}.canvas-tooltip{position:absolute;bottom:10px;left:10px;background:#080c14f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:6px 12px;border-radius:7px;border:1px solid rgba(255,255,255,.1);font-family:var(--font-code);font-size:.72rem;color:#e2e8f0;pointer-events:none;box-shadow:0 4px 12px #00000080}.panel-wrapper{flex:1;min-height:220px}.panel-container{background:var(--panel-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--panel-border);border-radius:12px;height:100%;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 24px #0000004d}.panel-tabs{display:flex;background:#090d16f2;border-bottom:1px solid var(--panel-border);overflow-x:auto}.tab-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:.7rem .9rem;background:transparent;border:none;border-bottom:2px solid transparent;color:#64748b;font-family:var(--font-hud);font-size:.78rem;font-weight:600;letter-spacing:.5px;cursor:pointer;transition:all .15s ease-out;white-space:nowrap}.tab-btn:hover{color:#94a3b8}.tab-btn.active{color:var(--brand-red);border-bottom-color:var(--brand-red);background:#ff31310d}.panel-content{padding:.85rem;overflow-y:auto;flex:1}.sku-card{background:#0e1420d9;border:1px solid var(--panel-border);border-left-width:4px;border-radius:10px;padding:.8rem;transition:transform .15s ease-out,border-color .15s ease-out}.sku-card:hover{transform:translateY(-2px);border-color:#ffffff26}.sku-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.robot-card{background:#0e1420d9;border:1px solid var(--panel-border);border-radius:10px;padding:.8rem;cursor:pointer;transition:all .15s ease-out}.robot-card:hover{border-color:#ffffff2e}.robot-card.selected{border-color:var(--brand-red);background:#ff31310f}.editor-container{display:flex;flex-direction:column;height:100%;background:#05080e}.editor-header-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 10px;padding:.5rem .9rem;background:#090d16f2;border-bottom:1px solid var(--panel-border)}.editor-footer-bar{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;background:#090d16f2;border-top:1px solid var(--panel-border)}.console-log-box{background:#05080ef2;border:1px solid var(--panel-border);border-radius:10px;padding:.75rem;height:250px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}.log-entry{display:flex;gap:8px;line-height:1.4;padding:3px 6px;border-radius:4px;font-family:var(--font-code);font-size:.74rem}.log-timestamp{color:#475569;flex-shrink:0}.log-info{color:#94a3b8}.log-warn{color:#fbbf24}.log-error{color:#ff4757}.log-success{color:#10b981}