.jft-touch-settings-editor { max-width:min(980px,100%); margin:auto; padding:clamp(12px,2vw,20px); }
.jft-touch-settings-heading h1 { margin:.2rem 0; }
.jft-touch-settings-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(190px,240px); gap:14px; align-items:start; }
.jft-touch-settings-stage { position:relative; width:100%; aspect-ratio:var(--touch-editor-ratio,844/390); min-height:210px; max-height:52dvh; overflow:hidden; border:1px solid #7fe9f280; border-radius:14px; background:radial-gradient(circle at 50% 18%,#6a356774 0 10%,transparent 34%),linear-gradient(#21193c,#37224d 56%,#71384f 57%,#22152f); touch-action:none; }
.jft-touch-settings-safe { position:absolute; border:2px dashed #70ecffb8; background:#70ecff0b; pointer-events:none; }
.jft-touch-settings-safe::before { content:'SAFE CONTROL REGION'; position:absolute; left:5px; top:4px; color:#9af5ff; font:800 10px/1 system-ui; }
.jft-touch-settings-hero { position:absolute; left:50%; bottom:20%; translate:-50% 0; padding:5px 8px; border:1px solid #fff7; border-radius:999px; background:#120d1c9c; color:#fff4c7; font:850 clamp(8px,1.25vw,11px)/1 system-ui; letter-spacing:.08em; pointer-events:none; }
.jft-touch-edit-control { position:absolute; translate:-50% -50%; display:grid; place-items:center; padding:0; border:1px dashed #ffffff80; border-radius:15px; background:#55dff215; color:#fff; touch-action:none; user-select:none; cursor:grab; }
.jft-touch-edit-control>span { display:grid; place-items:center; width:var(--touch-edit-visual-width); height:var(--touch-edit-visual-height); border:2px solid #fffbd4d1; border-radius:13px; background:linear-gradient(145deg,#6d477f,#281b38); opacity:var(--touch-edit-opacity,.82); font:900 clamp(10px,1.5vw,16px)/1 system-ui; pointer-events:none; }
.jft-touch-edit-control[data-control="hot-sauce"]>span { background:linear-gradient(145deg,#a9253d,#e36d32); font-size:clamp(16px,2.6vw,25px); }
.jft-touch-edit-control[data-control="jump"]>span { background:linear-gradient(145deg,#a56521,#d5942f); }
.jft-touch-edit-control small { position:absolute; top:calc(100% + 2px); padding:2px 4px; border-radius:4px; background:#120d1cde; white-space:nowrap; color:#fff6df; font:750 9px/1.2 system-ui; pointer-events:none; }
.jft-touch-edit-control.is-selected { outline:3px solid #70ecff; outline-offset:2px; }
.jft-touch-edit-control[data-validity="invalid"] { border-color:#ff7389; background:#ff475526; }
.jft-touch-edit-control[data-validity="caution"] { border-color:#ffd466; }
.jft-touch-edit-control:focus-visible { outline:3px solid #fff1a6; outline-offset:3px; }
.jft-touch-settings-inspector { display:grid; gap:10px; min-width:0; }
.jft-touch-settings-inspector label { display:grid; gap:4px; font-weight:800; }
.jft-touch-settings-inspector select,.jft-touch-settings-inspector input { min-height:44px; width:100%; }
.jft-touch-settings-inspector output { justify-self:end; color:#ffda79; }
.jft-touch-selected { color:#fff0b1; }
.jft-touch-settings-status { min-height:2.5em; margin:0; color:#8bf1bd; }
.jft-touch-settings-status[data-kind="error"] { color:#ff98a6; }
.jft-touch-settings-status[data-kind="warning"] { color:#ffe093; }
.jft-touch-settings-actions { margin-top:14px; }
.jft-touch-unsaved { max-width:470px; border:0; padding:0; background:transparent; color:#fff; }
.jft-touch-unsaved::backdrop { background:#09060bc7; }
.jft-touch-unsaved .jft-menu-panel { padding:20px; }
@media (max-width:760px), (max-height:440px) { .jft-touch-settings-workspace { grid-template-columns:minmax(0,1fr) 190px; gap:8px; } .jft-touch-settings-editor { padding:9px; } .jft-touch-settings-heading .jft-menu-intro { display:none; } .jft-touch-settings-stage { min-height:190px; } .jft-touch-settings-inspector { gap:5px; font-size:12px; } .jft-touch-settings-inspector select,.jft-touch-settings-inspector input { min-height:40px; } }
@media (max-width:620px) { .jft-touch-settings-workspace { grid-template-columns:1fr; } }