*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,sans-serif;background:#141414;color:#e0e0e0}.knob-control{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;background:#1e1e1e;border-radius:8px;border:1px solid #333}.knob-remove-btn{position:absolute;top:4px;right:4px;width:20px;height:20px;padding:0;background:transparent;border:none;border-radius:4px;color:#666;font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s,color .15s}.knob-control:hover .knob-remove-btn{opacity:1}.knob-remove-btn:hover{color:#e57373}.knob-label{width:100%;text-align:center;background:transparent;border:1px solid transparent;border-radius:4px;color:#ccc;font-size:13px;padding:2px 4px;font-family:inherit}.knob-label:hover{border-color:#444}.knob-label:focus{border-color:#666;outline:none;background:#2a2a2a}.knob-wrapper{display:flex;align-items:center;justify-content:center;padding:4px}.knob-value{font-size:18px;font-weight:600;color:#e0e0e0;font-variant-numeric:tabular-nums;min-width:3ch;text-align:center}.knob-cc{display:flex;align-items:center;gap:6px}.knob-cc-label{font-size:11px;color:#888;text-transform:uppercase;letter-spacing:.5px}.knob-cc-input{width:48px;text-align:center;background:#2a2a2a;border:1px solid #444;border-radius:4px;color:#ccc;font-size:13px;padding:2px 4px;font-family:inherit}.knob-cc-input:focus{border-color:#666;outline:none}.knob-cc-input::-webkit-inner-spin-button,.knob-cc-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.knob-cc-input{-moz-appearance:textfield;appearance:textfield}.rack{border:1px solid #2a2a2a;border-radius:8px;overflow:hidden}.rack-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#1a1a1a;border-bottom:1px solid #2a2a2a}.rack-collapse-btn{background:none;border:none;color:#666;cursor:pointer;padding:2px 4px;line-height:0;flex-shrink:0}.rack-collapse-btn:hover{color:#aaa}.rack-name-input{background:transparent;border:1px solid transparent;border-radius:4px;color:#ccc;font-size:14px;font-weight:600;font-family:inherit;padding:2px 6px;flex:1;transition:border-color .15s}.rack-name-input:hover{border-color:#444}.rack-name-input:focus{border-color:#666;color:#e0e0e0;outline:none}.rack-header-actions{display:flex;align-items:center;gap:12px}.rack-btn{background:#2a2a2a;border:1px solid #444;border-radius:5px;color:#ccc;font-size:14px;padding:4px 8px;cursor:pointer;line-height:0;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s}.rack-btn:hover{border-color:#666;color:#fff}.rack-remove-btn{line-height:1;font-size:18px;padding:1px 7px;color:#666}.rack-remove-btn:hover{color:#e57373;border-color:#6b2c2c}.knob-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding:16px}.add-control-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 12px;background:transparent;border:2px dashed #333;border-radius:8px;color:#555;font-size:13px;font-family:inherit;cursor:pointer;transition:border-color .15s,color .15s;min-height:180px}.add-control-btn:hover{border-color:#555;color:#999}.modal-backdrop{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100}.modal-dialog{background:#1e1e1e;border:1px solid #444;border-radius:12px;padding:24px;min-width:360px;max-width:480px;box-shadow:0 8px 32px #0006}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.modal-header h2{margin:0;font-size:18px;color:#e0e0e0}.modal-close{background:none;border:none;color:#888;font-size:24px;cursor:pointer;padding:0 4px;line-height:1}.modal-close:hover{color:#ccc}.modal-body h3{font-size:14px;color:#aaa;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}.no-devices{color:#888;font-size:14px;font-style:italic}.device-list{display:flex;flex-direction:column;gap:8px}.device-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#2a2a2a;border:1px solid #444;border-radius:6px;cursor:pointer;transition:border-color .15s}.device-item:hover{border-color:#666}.device-item input[type=radio]{accent-color:#6c8cff}.device-name{color:#ccc;font-size:14px}.app{max-width:960px;margin:0 auto;padding:24px;min-height:100vh;color:#e0e0e0}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;padding-bottom:16px;border-bottom:1px solid #333}.title{font-size:22px;font-weight:700;color:#e0e0e0;margin:0}.header-controls{display:flex;align-items:center;gap:20px}.status-group{display:flex;align-items:center;gap:6px}.status-dot{width:8px;height:8px;border-radius:50%;background:#666;transition:background .2s}.status-dot.connected{background:#4caf50;box-shadow:0 0 6px #4caf5080}.status-text{font-size:13px;color:#888}.channel-group{display:flex;align-items:center;gap:6px}.channel-label{font-size:11px;color:#888;text-transform:uppercase;letter-spacing:.5px}.channel-select{background:#2a2a2a;border:1px solid #444;border-radius:4px;color:#ccc;font-size:13px;padding:4px 8px;font-family:inherit;cursor:pointer}.channel-select:focus{border-color:#666;outline:none}.settings-btn{background:#2a2a2a;border:1px solid #444;border-radius:6px;color:#ccc;font-size:18px;padding:4px 10px;cursor:pointer;line-height:1;transition:border-color .15s}.settings-btn:hover{border-color:#666;color:#fff}.header-btn{background:#2a2a2a;border:1px solid #444;border-radius:6px;color:#ccc;font-size:16px;padding:5px 8px;cursor:pointer;line-height:0;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s}.header-btn:hover{border-color:#666;color:#fff}.error-banner{background:#3a1c1c;border:1px solid #6b2c2c;border-radius:6px;color:#e57373;font-size:14px;padding:10px 16px;margin-bottom:24px}.racks-container{display:flex;flex-direction:column;gap:16px}.add-rack-btn{display:flex;align-items:center;gap:8px;margin-top:16px;padding:10px 18px;background:transparent;border:2px dashed #2a2a2a;border-radius:8px;color:#555;font-size:13px;font-family:inherit;cursor:pointer;transition:border-color .15s,color .15s;align-self:flex-start}.add-rack-btn:hover{border-color:#555;color:#999}.paste-textarea{width:100%;min-height:180px;background:#1e1e1e;border:1px solid #444;border-radius:6px;color:#ccc;font-family:monospace;font-size:13px;padding:10px;resize:vertical;box-sizing:border-box}.paste-textarea:focus{border-color:#666;outline:none}.paste-import-btn{margin-top:12px;background:#2a2a2a;border:1px solid #444;border-radius:6px;color:#ccc;font-size:14px;font-family:inherit;padding:8px 20px;cursor:pointer;transition:border-color .15s}.paste-import-btn:hover:not(:disabled){border-color:#666;color:#fff}.paste-import-btn:disabled{opacity:.4;cursor:default}