#controls{left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);top:env(safe-area-inset-top,0px);bottom:env(safe-area-inset-bottom,0px)}
#controls-button{width:50px;font-size:12px;white-space:nowrap}#control-settings{position:absolute;inset:0;z-index:40;background:#0d0915eb;backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:16px;pointer-events:auto}
.controls-shell{width:min(850px,96vw);max-height:94dvh;overflow:auto;border:1px solid #826075;background:linear-gradient(145deg,#2b1b2c,#15101f);padding:22px;color:#ead4e4;box-shadow:0 15px 80px #0008}
.controls-shell header{display:flex;align-items:center;justify-content:space-between;gap:15px}.controls-shell header small{font:10px Georgia,serif;letter-spacing:3px;color:#bb91ae}.controls-shell h2{font-size:23px;font-weight:400;margin:8px 0 16px}.controls-shell p{font-size:12px;line-height:1.7;color:#c8b2c4}
.controls-shell button,.layout-toolbar button,.layout-toolbar select{background:#342237;color:#f5deef;border:1px solid #876279;border-radius:4px;padding:9px 12px;cursor:pointer;font-size:12px}.controls-shell button:focus-visible,.layout-toolbar :focus-visible{outline:2px solid #ffcae9;outline-offset:2px}.controls-shell nav{display:flex;gap:8px;margin:12px 0}.controls-shell nav .active{background:#8b435f88;border-color:#e3a5c6}
.control-presets{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.control-preview-note{border-left:2px solid #ba7a9e;padding:10px 14px;font-size:12px;background:#b4679a10}.controls-shell footer{display:flex;justify-content:flex-end;margin-top:14px}.fx-level{display:flex;align-items:center;gap:12px;margin-top:20px;font-size:12px}.fx-level input{width:200px;accent-color:#d78bad}.fx-level output{min-width:45px}#controls-save-note,#binding-message{color:#ffcfac;min-height:18px}
#keyboard-bindings{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0}#keyboard-bindings button{display:flex;justify-content:space-between;gap:12px;text-align:left}#keyboard-bindings b{color:#f2bfdd;font-family:monospace}#keyboard-bindings .recording{background:#753c63;border-color:#ffc5e6}
#layout-editor{position:absolute;inset:0;z-index:41;background:#100a1926;pointer-events:none}#controls.layout-editing{z-index:42!important}#controls.layout-editing .action,#controls.layout-editing #joystick{cursor:move;outline:1px dashed #ffc8e988}#controls.layout-editing .layout-selected{outline:3px solid #ffe2f4;box-shadow:0 0 22px #ee6da088}
.layout-toolbar{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:min(980px,calc(100% - 24px));display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;background:#201226f5;border:1px solid #c08ba9;padding:10px;pointer-events:auto;color:#f2d3e8;font-size:11px;z-index:44}.layout-toolbar strong{font-size:12px;font-weight:500}.layout-toolbar label{display:flex;align-items:center;gap:5px}.layout-toolbar input{width:100px;accent-color:#e198ba}.layout-toolbar output{min-width:33px;font-size:10px}#layout-warning{width:100%;text-align:center;color:#f3c9a8;font-size:10px}#layout-done:disabled{opacity:.4;cursor:not-allowed}
/* The settings toolbar must sit above the editing control plane. */
#layout-editor{z-index:43;background:none}#controls.layout-editing:before{content:"";position:absolute;inset:0;background:#100a1926;pointer-events:none}
@media(max-height:550px){.controls-shell{padding:12px 18px}.controls-shell h2{font-size:18px;margin-bottom:5px}.controls-shell p{margin:7px 0;font-size:11px}.controls-shell nav{margin:6px 0}.control-presets{margin:9px 0}.controls-shell button{padding:7px 10px}#keyboard-bindings{grid-template-columns:repeat(5,1fr);gap:5px}#keyboard-bindings button{display:block;padding:6px;font-size:10px}#keyboard-bindings b{display:block;margin-top:4px}.fx-level{margin-top:9px}.layout-toolbar{top:6px;padding:6px;gap:6px}.layout-toolbar input{width:75px}.layout-toolbar button,.layout-toolbar select{padding:6px;font-size:10px}}