:root{--bg: #0f1317;--panel: #171d24;--panel-light: #1f2731;--border: #2b3542;--text: #e8eef4;--muted: #8ea0b5;--accent: #35d0a5;--warn: #ffb454;--danger: #ff5f56}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:13px;overflow:hidden}.app{display:flex;flex-direction:column;height:100%}.header{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--border)}.wordmark{font-weight:700;font-size:16px;letter-spacing:.2px}.wordmark span{color:var(--accent)}.header-spacer{flex:1}.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--panel-light);border:1px solid var(--border);color:var(--muted);font-size:12px;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}.pill.ok{color:var(--text)}.pill.ok .dot{background:var(--accent)}.pill.warn .dot{background:var(--warn)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 12px;border-radius:8px;border:1px solid var(--border);background:var(--panel-light);color:var(--text);font:inherit;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s,color .12s}.btn:hover:not(:disabled){border-color:var(--muted)}.btn:disabled{opacity:.45;cursor:default}.btn-accent{background:var(--accent);border-color:var(--accent);color:#06271e}.btn-accent:hover:not(:disabled){filter:brightness(1.08)}.btn-ghost{background:transparent}.btn-ghost.on{border-color:var(--accent);color:var(--accent)}.btn-ghost.danger{color:var(--danger)}.btn.toggle.on-warn{background:#ffb45426;border-color:var(--warn);color:var(--warn)}.btn.toggle.arm.on{background:#35d0a526;border-color:var(--accent);color:var(--accent);box-shadow:0 0 12px #35d0a559}.btn.estop{background:var(--danger);border-color:var(--danger);color:#fff;font-weight:800;letter-spacing:.5px}.btn.estop:hover{filter:brightness(1.1)}.btn-icon{display:inline-flex;align-items:center;gap:4px;background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;border-radius:6px;font:inherit;font-size:12px}.btn-icon:hover{color:var(--text);background:var(--panel-light)}.btn-icon.danger:hover{color:var(--danger)}.btn-icon.accent{color:var(--accent)}.input,.select{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:6px 9px;font:inherit;min-width:0}.input:focus,.select:focus{outline:none;border-color:var(--accent)}textarea.input{resize:vertical}.profile-select{max-width:180px}.row{display:flex;gap:8px;align-items:center}.grow{flex:1}.check{display:inline-flex;align-items:center;gap:5px;color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none}.check input{accent-color:var(--accent)}.slider-row{display:flex;flex-direction:column;gap:3px}.slider-row span{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}.slider-row input[type=range]{width:100%;accent-color:var(--accent)}.seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}.seg-btn{background:transparent;border:none;color:var(--muted);padding:4px 10px;font:inherit;font-size:12px;cursor:pointer}.seg-btn.on{background:var(--panel-light);color:var(--accent)}.main{flex:1;display:flex;min-height:0}.camera-wrap{position:relative;flex:1;min-width:0;background:var(--bg)}.camera-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}.camera-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--muted);pointer-events:none}.camera-empty .btn{pointer-events:auto}.hint{color:var(--muted);font-size:12px}.hint.danger{color:var(--danger)}.tracking-banner{position:absolute;top:14px;left:50%;transform:translate(-50%);background:#ff5f5626;border:1px solid var(--danger);color:var(--danger);font-weight:800;letter-spacing:1.5px;padding:6px 16px;border-radius:8px;animation:pulse 1.2s ease-in-out infinite;pointer-events:none}@keyframes pulse{50%{opacity:.55}}.cam-toolbar{position:absolute;left:12px;bottom:12px;display:flex;gap:8px;align-items:center;background:#171d24d9;border:1px solid var(--border);border-radius:10px;padding:6px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.rail{display:flex;width:372px;flex:none;border-left:1px solid var(--border);background:var(--panel);min-height:0}.rail-panel{flex:1;min-width:0;overflow-y:auto}.rail-tabs{width:64px;flex:none;display:flex;flex-direction:column;border-left:1px solid var(--border);background:var(--bg);padding:6px 0}.rail-tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px;background:none;border:none;border-right:2px solid transparent;color:var(--muted);cursor:pointer;font-size:9.5px;font-weight:600}.rail-tab:hover{color:var(--text)}.rail-tab.on{color:var(--accent);border-right-color:var(--accent);background:var(--panel)}.panel{display:flex;flex-direction:column;gap:10px;padding:14px;min-height:100%}.panel-fill{height:100%}.panel h3{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.kv-list{display:flex;flex-direction:column;gap:4px}.kv{display:flex;justify-content:space-between;align-items:center;padding:5px 9px;background:var(--panel-light);border-radius:7px}.kv span{color:var(--muted);font-size:12px}.kv b{font-weight:600}.ok{color:var(--accent)}.warn{color:var(--warn)}b.danger,span.danger{color:var(--danger)}.notice{padding:7px 10px;border-radius:8px;font-size:12px;border:1px solid var(--border)}.notice.warn{border-color:var(--warn);color:var(--warn);background:#ffb45414}.notice.danger{border-color:var(--danger);color:var(--danger);background:#ff5f5614}.notice.ok{border-color:var(--accent);color:var(--accent);background:#35d0a514}.empty-note{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 0;color:var(--muted)}.room-code-box{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--panel-light);border:1px solid var(--border);border-radius:12px;padding:16px}.room-label{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:var(--muted)}.room-code{font-size:30px;font-weight:800;letter-spacing:6px;color:var(--accent);font-variant-numeric:tabular-nums}.zone-list{display:flex;flex-direction:column;gap:4px}.zone-row{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;border:1px solid transparent;background:var(--panel-light);color:var(--text);font:inherit;cursor:pointer;text-align:left}.zone-row:hover{border-color:var(--border)}.zone-row.sel{border-color:var(--accent)}.zone-row.static{cursor:default}.zone-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zone-name.as-btn{background:none;border:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;padding:0}.zone-name.as-btn:hover{color:var(--accent)}.zone-action{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.ready-dot{width:8px;height:8px;border-radius:50%;background:var(--border);flex:none}.ready-dot.ok{background:var(--accent)}.zone-editor{display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--border);padding-top:12px}.swipe-params{display:flex;flex-direction:column;gap:7px}.chips{display:flex;flex-wrap:wrap;gap:5px}.chip{padding:4px 9px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--muted);font:inherit;font-size:11px;cursor:pointer}.chip:hover{border-color:var(--muted)}.chip.on{background:#35d0a521;border-color:var(--accent);color:var(--accent)}.phone-mock-wrap{display:flex;justify-content:center}.phone-mock{position:relative;width:78%;max-width:230px;background:#0a0d10;border:2px solid var(--border);border-radius:18px;overflow:hidden;cursor:crosshair}.phone-notch{position:absolute;top:6px;left:50%;transform:translate(-50%);width:34%;height:7px;border-radius:999px;background:var(--border);pointer-events:none}.target-marker{position:absolute;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:#35d0a533;border:1.5px solid var(--accent);color:var(--accent);pointer-events:none}.target-marker.act-hold{border-color:var(--warn);color:var(--warn);background:#ffb45426}.target-marker.sel{box-shadow:0 0 10px #35d0a5b3}.origin-marker{position:absolute;transform:translate(-50%,-50%);color:var(--warn);font-size:15px;font-weight:700;pointer-events:none;text-shadow:0 0 6px rgba(255,180,84,.6)}.swipe-arrow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.anim-tap{position:absolute;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;border:2px solid var(--accent);pointer-events:none;animation:tap-ripple .55s ease-out forwards}@keyframes tap-ripple{0%{opacity:1;scale:.5}to{opacity:0;scale:3}}.anim-swipe{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--accent);pointer-events:none;animation:swipe-move .5s ease-out forwards}@keyframes swipe-move{0%{opacity:1;translate:-50% -50%}to{opacity:0;translate:calc(-50% + var(--sw-dx, 0%) * 8) calc(-50% + var(--sw-dy, 0%) * 8)}}.anim-hold{position:absolute;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;border:2.5px solid var(--warn);pointer-events:none;animation:hold-pulse .9s ease-in-out infinite}@keyframes hold-pulse{50%{scale:1.45;opacity:.55}}.config-list{display:flex;flex-direction:column;gap:5px;flex:1;overflow-y:auto;min-height:60px}.config-row{display:flex;align-items:center;gap:6px;background:var(--panel-light);border-radius:8px;padding:7px 9px}.config-main{flex:1;display:flex;flex-direction:column;min-width:0}.config-main b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal-backdrop{position:fixed;inset:0;background:#040608b3;display:flex;align-items:center;justify-content:center;z-index:50}.modal{width:300px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px}.log-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px;font-family:ui-monospace,Cascadia Mono,Consolas,monospace;font-size:11.5px}.log-row{display:flex;gap:8px;padding:3px 6px;border-radius:5px}.log-time{color:var(--muted);flex:none}.log-row.k-sent .log-text{color:var(--accent)}.log-row.k-sim .log-text{color:#7fb8e8}.log-row.k-blocked .log-text{color:var(--warn)}.log-row.k-error .log-text{color:var(--danger)}.log-row.k-estop{background:#ff5f561f}.log-row.k-estop .log-text{color:var(--danger);font-weight:700}.log-row.k-info .log-text{color:var(--muted)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-track{background:transparent}