.screen-actions{display:flex;gap:7px;flex-shrink:0}.gesture-tools{display:grid;grid-template-columns:1fr minmax(260px,1.25fr);gap:9px 18px;padding:14px 22px;border-bottom:1px solid var(--line);background:#fff}.gesture-heading{display:flex;align-items:center;justify-content:space-between;gap:9px}.gesture-heading strong{font-size:12px;font-weight:550;color:#546380}.gesture-heading p{font-size:10px;color:#8593aa;margin-top:5px}.control-mode{padding:4px 7px;background:#f1f3f7;color:#929eb1;border-radius:6px;font-size:9px;white-space:nowrap}.control-mode.ready{background:#edf2ff;color:#758cca}.swipe-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.swipe-buttons button{display:flex;align-items:center;justify-content:center;gap:6px;background:#f2f5fe;border:1px solid #e1e7f8;border-radius:8px;min-height:38px;font-size:11px;font-weight:500;color:#586eaa;transition:background .15s,transform .15s}.swipe-buttons button span{font-size:20px;line-height:1}.swipe-buttons button:hover:enabled{background:#e4ebff;border-color:#c4d1f9;color:#3b5cba}.swipe-buttons button:active:enabled{transform:scale(.97)}.gesture-caption{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:9px;color:#8c9ab0}.gesture-caption button{border:0;background:transparent;font-size:10px;color:#8b9dc7;padding:2px;cursor:pointer}.gesture-caption button:hover{color:var(--green)}.permission-note{grid-column:1/-1;font-size:11px;color:#a18256;background:#fbf7ef;border:1px solid #efe6d4;padding:9px 11px;border-radius:8px;line-height:1.8}
.screen-panel:not(.active) .gesture-tools,.screen-panel:not(.active) .control-bar,.screen-panel:not(.active) .stream-row{display:none}.screen-panel.active .screen-stage{height:clamp(340px,calc(100dvh - 390px),640px)}#screen.dragging{cursor:grabbing}.view-only #screen{cursor:default}.gesture-trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 2px 3px #25356250);overflow:visible}.gesture-trail #trail-line{fill:none;stroke:#7595ff;stroke-width:4;stroke-linecap:round}.gesture-trail marker path{fill:none;stroke:#7595ff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.gesture-trail circle{fill:#edf2ff;stroke:#4265d6;stroke-width:3}.gesture-trail #trail-end{fill:#c3d2ff60;stroke:#7595ff;stroke-width:3}.gesture-bubble{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);padding:8px 16px;background:#30466de8;color:#fff;border-radius:24px;font-size:11px;white-space:nowrap;pointer-events:none;box-shadow:0 4px 18px #243b611b}
.control-bar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 18px;background:white;border-top:1px solid var(--line);min-height:65px}.nav-keys{display:flex;gap:6px}.nav-keys button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:56px;height:35px;padding:0 10px;border:1px solid #e7ecf4;border-radius:8px;background:#f9fafe;color:#697b9b;font-size:10px}.nav-keys button span{font-size:17px;line-height:1}.nav-keys button:hover:enabled{background:#edf2ff;border-color:#d6e0fa;color:#5d7cc0}.control-bar #text-btn{font-size:10px;min-height:35px;padding:9px 11px}.stream-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 19px 12px;font-size:9px;color:#8f9db5;min-height:27px}.stream-row #gesture-feedback{color:#71839f;line-height:1.6}.stream-row #gesture-feedback.error-tone{color:#bd6969}.stream-row #stream-stat{white-space:nowrap}
.screen-expanded{overflow:hidden}.screen-panel.expanded{position:fixed;inset:14px;z-index:50;display:flex;flex-direction:column;max-height:calc(100dvh - 28px);overflow:auto;box-shadow:0 20px 100px #243e6526}.screen-panel.expanded .screen-header,.screen-panel.expanded .gesture-tools,.screen-panel.expanded .control-bar,.screen-panel.expanded .stream-row{flex-shrink:0}.screen-panel.expanded .screen-header{min-height:57px}.screen-panel.expanded .gesture-tools{grid-template-columns:250px minmax(280px,450px);padding:12px 22px}.screen-panel.expanded .gesture-caption{grid-column:1/-1}.screen-panel.expanded .screen-stage{height:0;min-height:150px;flex:1}.screen-panel.expanded .screen-subtitle{display:inline}.gesture-example{height:125px;background:#f0f4fc;border-radius:13px;margin:20px 0;position:relative;overflow:hidden}.example-finger{position:absolute;top:46px;left:75%;width:32px;height:32px;border:3px solid #6481d9;background:#fff;border-radius:50%;animation:gesture-example 2.8s ease-in-out infinite}.example-arrow{position:absolute;top:27px;left:calc(50% - 22px);font-size:52px;color:#a5b5df}@keyframes gesture-example{0%,15%{transform:translateX(0);opacity:0}25%{opacity:1}70%,85%{transform:translateX(-185px);opacity:1}100%{transform:translateX(-185px);opacity:0}}.gesture-guide{list-style:none;padding:0;display:grid;gap:15px;margin:22px 0 0}.gesture-guide li{display:grid;gap:4px;font-size:12px}.gesture-guide span{font-size:11px;color:var(--muted);line-height:1.8}
@media(max-width:1180px){.gesture-tools{grid-template-columns:1fr;gap:10px;padding:13px 18px}.gesture-heading p{display:none}.gesture-heading strong{font-size:12px}.swipe-buttons button{min-height:37px}.screen-panel.active .screen-stage{height:clamp(360px,calc(100dvh - 410px),550px)}.control-bar{padding:11px 12px;gap:8px}.nav-keys{gap:4px}.nav-keys button{padding:0 8px;min-width:42px;gap:4px}.control-bar #text-btn{padding:9px}.stream-row{padding:0 13px 11px}}
@media(max-width:700px){.gesture-tools{padding:13px 14px;gap:9px}.gesture-caption{font-size:9px}.swipe-buttons{gap:6px}.swipe-buttons button{font-size:10px;min-height:37px}.swipe-buttons button span{font-size:20px}.screen-panel.active .screen-stage{height:460px}.screen-actions .btn{font-size:10px;padding:7px 8px}.control-bar{padding:10px 11px;min-height:68px;gap:7px}.nav-keys{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.nav-keys button{flex-direction:column;gap:4px;height:44px;min-width:34px;font-size:8px;padding:0}.nav-keys button span{font-size:18px}.control-bar #text-btn{font-size:9px;padding:8px;min-height:38px}.stream-row{font-size:8px;gap:8px}.screen-panel.expanded{inset:0;max-height:100dvh;border-radius:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.screen-panel.expanded .screen-subtitle{display:none}.screen-panel.expanded .gesture-tools{grid-template-columns:1fr;padding:11px 14px}.screen-panel.expanded .screen-stage{padding:12px}.screen-panel.expanded .screen-header{min-height:57px}.screen-panel.expanded .gesture-heading p{display:none}}
@media(max-height:620px){.screen-panel.expanded .gesture-heading{display:none}.screen-panel.expanded .gesture-tools{padding-top:9px;padding-bottom:8px;grid-template-columns:minmax(0,1fr)}.screen-panel.expanded .swipe-buttons{max-width:600px}.screen-panel.expanded .gesture-caption{margin:0}.screen-panel.expanded .control-bar{min-height:57px;padding-top:7px;padding-bottom:7px}.screen-panel.expanded .stream-row{padding-bottom:8px;min-height:24px}}
@media(prefers-reduced-motion:reduce){.example-finger{animation:none;left:25%}}