*,*:before,*:after{box-sizing:border-box}html,body{margin:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:#0b0b0c;color:#f2f2f7;overflow:hidden;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}#app{height:100%}.screen{position:relative;height:100%;width:100%}.join-panel{padding:max(16px,env(safe-area-inset-top)) 20px 24px;max-width:420px;margin:0 auto}.join-panel h1{font-size:1.25rem;font-weight:600;margin:0 0 16px}.field{margin-bottom:14px}.field label{display:block;font-size:.85rem;opacity:.85;margin-bottom:6px}.field input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #2c2c2e;background:#1c1c1e;color:#fff;font-size:1rem;-webkit-user-select:text;user-select:text}.btn-primary{width:100%;padding:14px;border:none;border-radius:12px;background:#0a84ff;color:#fff;font-size:1rem;font-weight:600}.btn-primary:disabled{opacity:.5}.hint{margin-top:12px;font-size:.8rem;line-height:1.45;opacity:.65}.control-root{position:relative;height:100%;width:100%}.remote-video-wrap{position:absolute;top:0;right:0;bottom:0;left:0;background:#000}.remote-video-wrap video{width:100%;height:100%;object-fit:contain;background:#000}.remote-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-size:.95rem;line-height:1.5;color:#8e8e93}.toolbar{position:absolute;right:max(8px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:20;padding:10px 8px;border-radius:16px;background:#1c1c1eb8;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.toolbar button{min-width:44px;min-height:44px;border:none;border-radius:12px;background:#ffffff1f;color:#fff;font-size:.72rem;padding:6px 8px}.toolbar button:active{transform:scale(.96);opacity:.9}.touch-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10}.assist-dot{position:absolute;width:56px;height:56px;border-radius:50%;background:#ffffff38;border:2px solid rgba(255,255,255,.45);box-shadow:0 4px 16px #00000059;z-index:15;touch-action:none}.assist-dot:after{content:"";position:absolute;top:14px;right:14px;bottom:14px;left:14px;border-radius:50%;background:#ffffff8c}.input-bar{position:absolute;left:0;right:0;bottom:0;z-index:25;padding:10px 12px max(12px,env(safe-area-inset-bottom));background:linear-gradient(to top,rgba(0,0,0,.55),transparent)}.input-bar input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #3a3a3c;background:#1c1c1eeb;color:#fff;font-size:1rem;-webkit-user-select:text;user-select:text}.hidden{display:none!important}