:root{--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-card:#1e293b;--bg-card-hover:#253349;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--accent:#3b82f6;--accent-hover:#2563eb;--accent-glow:#3b82f64d;--success:#22c55e;--danger:#ef4444;--border:#334155;--radius:12px;--radius-lg:16px;color:var(--text-primary);background:var(--bg-primary);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.5}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);background-image:radial-gradient(at 20% 0,#3b82f614 0%,#0000 50%),radial-gradient(at 80% 100%,#8b5cf60f 0%,#0000 50%);min-height:100vh}#root{max-width:1200px;margin:0 auto;padding:24px 20px}h1,h2,h3{color:var(--text-primary);font-weight:600}input[type=number]{font-family:inherit}.app{flex-direction:column;gap:24px;display:flex}.app-header{text-align:center;padding:32px 0 16px}.app-header__top{justify-content:space-between;align-items:center;display:flex}.app-header__actions{align-items:center;gap:8px;display:flex}.app-header h1{letter-spacing:-.5px;margin-bottom:4px;font-size:2rem;font-weight:700}.app-header p{color:var(--text-secondary);font-size:.95rem}.login{justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.login__card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);text-align:center;width:100%;max-width:400px;padding:48px 40px}.login__icon{margin-bottom:16px;font-size:3rem}.login__title{margin-bottom:8px;font-size:1.5rem;font-weight:700}.login__subtitle{color:var(--text-muted);margin-bottom:32px;font-size:.9rem}.login__form{flex-direction:column;gap:12px;display:flex}.login__input{background:var(--bg-primary);border:1px solid var(--border);color:var(--text-primary);text-align:center;border-radius:8px;outline:none;padding:14px 16px;font-size:1rem;transition:border-color .2s}.login__input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.login__input--error{border-color:var(--danger)}.login__error{color:var(--danger);font-size:.85rem}.login__btn{padding:14px 20px;font-size:1rem}.status-bar{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);justify-content:space-between;align-items:center;padding:14px 20px;display:flex}.status-bar__connection{align-items:center;gap:10px;font-size:.9rem;font-weight:600;display:flex}.status-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.status-dot--connected{background:var(--success);animation:2s ease-in-out infinite pulse;box-shadow:0 0 8px #22c55e80}.status-dot--disconnected{background:var(--danger);box-shadow:0 0 8px #ef444466}.status-text--connected{color:var(--success)}.status-text--disconnected{color:var(--danger)}.status-bar__command{color:var(--text-muted);font-family:SF Mono,Fira Code,monospace;font-size:.85rem}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.motors-grid{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}@media (width<=1024px){.motors-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=640px){.motors-grid{grid-template-columns:1fr}}.motor-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;transition:all .2s}.motor-card:hover{background:var(--bg-card-hover);border-color:var(--accent);box-shadow:0 0 20px var(--accent-glow)}.motor-card__header{align-items:center;gap:12px;margin-bottom:16px;display:flex}.motor-card__id{width:44px;height:44px;color:var(--accent);background:#3b82f626;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;font-family:SF Mono,Fira Code,monospace;font-size:.9rem;font-weight:700;display:flex}.motor-card__title h3{font-size:1rem;font-weight:600;line-height:1.2}.motor-card__label{color:var(--text-muted);font-size:.8rem}.motor-card__angle{text-align:center;margin:20px 0}.motor-card__angle-value{color:var(--accent);font-family:SF Mono,Fira Code,monospace;font-size:2.5rem;font-weight:700;line-height:1}.motor-card__angle-unit{color:var(--text-muted);margin-top:4px;font-size:.75rem;display:block}.motor-card__slider{margin-top:12px}.slider{background:var(--border);appearance:none;cursor:pointer;border-radius:3px;outline:none;width:100%;height:6px}.slider::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;width:20px;height:20px;box-shadow:0 0 10px var(--accent-glow);border-radius:50%;transition:transform .15s}.slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.slider::-moz-range-thumb{background:var(--accent);cursor:pointer;width:20px;height:20px;box-shadow:0 0 10px var(--accent-glow);border:none;border-radius:50%}.slider-labels{color:var(--text-muted);justify-content:space-between;margin-top:6px;font-size:.7rem;display:flex}.btn{cursor:pointer;border:none;border-radius:8px;padding:10px 20px;font-size:.9rem;font-weight:600;transition:all .2s}.btn--primary{background:var(--accent);color:#fff}.btn--primary:hover{background:var(--accent-hover);box-shadow:0 0 16px var(--accent-glow)}.btn--secondary{background:var(--bg-primary);color:var(--text-secondary);border:1px solid var(--border)}.btn--secondary:hover{border-color:var(--text-muted);color:var(--text-primary)}.btn--sm{padding:6px 14px;font-size:.8rem}.btn--record{background:var(--danger);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:10px 20px;font-size:.9rem;font-weight:600;transition:all .2s}.btn--record:hover{background:#dc2626;box-shadow:0 0 16px #ef444466}.btn--stop{color:#1e293b;cursor:pointer;background:#f59e0b;border:none;border-radius:8px;padding:10px 20px;font-size:.9rem;font-weight:600;transition:all .2s}.btn--stop:hover{background:#d97706}.bottom-panels{flex-direction:column;gap:8px;margin-bottom:80px;display:flex}.bottom-panel{position:relative}.bottom-panel__toggle{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text-primary);cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:14px 20px;font-size:.9rem;font-weight:600;transition:all .2s;display:flex}.bottom-panel__toggle:hover{background:var(--bg-card-hover);border-color:var(--accent)}.bottom-panel__arrow{font-size:.8rem;transition:transform .3s;display:inline-block}.bottom-panel__arrow--open{transform:rotate(180deg)}.bottom-panel__content{background:var(--bg-card);border:1px solid var(--border);border-radius:0 0 var(--radius) var(--radius);border-top:none;max-height:0;transition:max-height .3s;overflow:hidden}.bottom-panel__content--open{max-height:500px}.batch-command{padding:20px}.batch-command__tabs{background:var(--bg-primary);border-radius:10px;gap:4px;margin-bottom:20px;padding:4px;display:flex}.batch-command__tab{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;flex:1;padding:10px 16px;font-size:.85rem;font-weight:600;transition:all .2s}.batch-command__tab:hover{color:var(--text-secondary)}.batch-command__tab--active{background:var(--bg-card);color:var(--text-primary);box-shadow:0 1px 3px #0003}.batch-angle-panel{flex-direction:column;gap:16px;display:flex}.batch-angle-panel__inputs{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}@media (width<=640px){.batch-angle-panel__inputs{grid-template-columns:repeat(2,1fr)}}.batch-angle-panel__field{flex-direction:column;gap:6px;display:flex}.batch-angle-panel__label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;align-items:center;gap:6px;font-size:.75rem;font-weight:600;display:flex}.batch-angle-panel__name{text-transform:none;color:var(--text-secondary);letter-spacing:0;font-weight:400}.batch-angle-panel__input{background:var(--bg-primary);border:1px solid var(--border);color:var(--text-primary);text-align:center;border-radius:8px;outline:none;padding:10px 12px;font-family:SF Mono,Fira Code,monospace;font-size:1rem;transition:border-color .2s}.batch-angle-panel__input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.batch-angle-panel__actions{gap:10px;display:flex}.ik-panel{padding:4px 0}.ik-panel__desc{color:var(--text-secondary);margin-bottom:16px;font-size:.85rem;line-height:1.5}.ik-panel__grid{grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;display:grid}@media (width<=640px){.ik-panel__grid{grid-template-columns:repeat(2,1fr)}}.ik-panel__field{flex-direction:column;gap:6px;display:flex}.ik-panel__field label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:.75rem;font-weight:600}.ik-panel__input{background:var(--bg-primary);border:1px solid var(--border);color:var(--text-primary);text-align:center;border-radius:8px;outline:none;padding:10px 12px;font-family:SF Mono,Fira Code,monospace;font-size:1rem;transition:border-color .2s}.ik-panel__input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.ik-panel__actions{gap:10px;display:flex}.recording{flex-direction:column;gap:16px;padding:20px;display:flex}.recording__header h3{font-size:1rem;font-weight:600}.recording__controls{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.recording__status{color:var(--text-secondary);align-items:center;gap:8px;font-size:.85rem;display:flex}.recording__status--recording{color:var(--danger);font-weight:600}.recording__dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.recording__dot--red{background:var(--danger);animation:1s ease-in-out infinite pulse}.recording__save{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.recording__save-input{background:var(--bg-primary);border:1px solid var(--border);color:var(--text-primary);border-radius:8px;outline:none;flex:1;min-width:160px;padding:8px 12px;font-size:.9rem;transition:border-color .2s}.recording__save-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.recording__list{flex-direction:column;gap:6px;display:flex}.recording__list-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:.75rem;font-weight:600}.recording__item{background:var(--bg-primary);border:1px solid var(--border);cursor:pointer;border-radius:8px;justify-content:space-between;align-items:center;padding:10px 14px;transition:all .2s;display:flex}.recording__item:hover{border-color:var(--accent)}.recording__item--selected{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow);background:#3b82f61a}.recording__item-info{flex-direction:column;gap:2px;display:flex}.recording__item-name{color:var(--text-primary);font-size:.9rem;font-weight:600}.recording__item-meta{color:var(--text-muted);font-size:.75rem}.recording__item-delete{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:1rem;transition:all .2s}.recording__item-delete:hover{color:var(--danger);background:#ef44441a}.recording__playback{align-items:center;gap:12px;display:flex}.recording__speed{align-items:center;gap:10px;display:flex}.recording__speed-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:.8rem;font-weight:600}.recording__speed-options{background:var(--bg-primary);border-radius:8px;gap:4px;padding:3px;display:flex}.recording__speed-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:6px 12px;font-size:.8rem;font-weight:600;transition:all .2s}.recording__speed-btn:hover{color:var(--text-secondary)}.recording__speed-btn--active{background:var(--accent);color:#fff;box-shadow:0 0 8px var(--accent-glow)}