.device-switch { margin-left:auto; display:flex; align-items:center; gap:8px; font-size:11px; color:#b7c7db; }
.device-switch select { padding:8px 12px; border:1px solid #667b92; border-radius:6px; background:#213044; color:#fff; }
.device-switch + .zoom-tablet { margin-left:0; }
.tablet-position[hidden],.pilot-scene[hidden] { display:none; }
.pilot-scene { position:absolute; left:780px; top:482px; width:170px; height:360px; }
.pilot-key { position:absolute; transform:translate(-50%,-50%); width:38px; height:38px; border:2px solid transparent; border-radius:50%; background:transparent; padding:0; }
.pilot-key:not(:disabled):hover,.pilot-key:focus-visible { outline:0; border-color:#fff; box-shadow:0 0 0 4px #ffffff40,0 0 18px #fff8; }
.pilot-key:disabled { opacity:1; cursor:default; }
.pilot-key:not(:disabled) { border-color:#ffffff55; }
.pilot-scene .key-hand { left:85px; top:107px; width:47px; height:43px; }
.pilot-scene .key-a { left:36px; top:172px; }
.pilot-scene .key-b { left:84px; top:173px; }
.pilot-scene .key-c { left:132px; top:174px; }
.pilot-scene .key-d { left:34px; top:242px; }
.pilot-scene .key-e { left:81px; top:245px; }
.pilot-scene .key-f { left:131px; top:247px; }
.pilot-led { position:absolute; width:7px; height:7px; border-radius:2px; transform:translate(-50%,-50%); opacity:0; pointer-events:none; }
.pilot-scene .pilot-led.red { left:40px; top:33px; }
.pilot-scene .pilot-led.green { left:137px; top:33px; }
[data-phase="sending"] > .pilot-led.red { opacity:1; background:#ff2828; box-shadow:0 0 6px 3px #ff2828,0 0 19px 7px #ff282899; }
[data-phase="delivered"] > .pilot-led.green { opacity:1; background:#50ff70; box-shadow:0 0 6px 3px #50ff70,0 0 19px 7px #50ff7099; }
#pilot-dialog { padding:0; width:min(470px,95vw); max-height:94svh; overflow-y:auto; background:#14202e; color:white; border:1px solid #60778c; border-radius:14px; }
#pilot-dialog::backdrop { background:#06101bc4; backdrop-filter:blur(4px); }
.pilot-large { position:relative; width:min(320px,75vw,44svh); aspect-ratio:2/3; margin:auto; }
.pilot-large img { position:absolute; width:100%; height:100%; object-fit:contain; }
.pilot-large .pilot-key { width:14%; height:auto; aspect-ratio:1; }
.pilot-large .key-hand { left:50%; top:32.7%; width:16%; }
.pilot-large .key-a { left:32%; top:50.25%; }.pilot-large .key-b { left:50.1%; top:50.25%; }.pilot-large .key-c { left:68%; top:50.25%; }
.pilot-large .key-d { left:32%; top:67.5%; }.pilot-large .key-e { left:50.1%; top:67.5%; }.pilot-large .key-f { left:68%; top:67.5%; }
.pilot-large .pilot-led { top:12.45%; width:2.05%; height:1.45%; }.pilot-large .pilot-led.red { left:30.2%; }.pilot-large .pilot-led.green { left:69.8%; }
#pilot-feedback { padding:12px 22px 22px; min-height:115px; } #pilot-feedback h2 { margin:0 0 8px; font-size:19px; } #pilot-feedback p { margin:0; color:#c3d2e4; font-size:13px; line-height:1.5; }
body[data-device="pilot"] .guide { top:680px; }
@media(max-width:650px) {
 .app-header { height:126px; grid-template-columns:1fr auto; }
 .device-switch { grid-row:3; grid-column:1; margin:0; }
 .zoom-tablet { grid-row:3; grid-column:2; }
 .page-title { grid-column:1 / 3; }
 .scene-fit { width:min(100vw,calc((100svh - 166px)*1.5)); }
}