.remote-dialog { width:min(820px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:20px; overflow:auto; overscroll-behavior:contain; color:var(--ink); background:var(--surface-solid); border:1px solid var(--line-strong); border-radius:20px; box-shadow:var(--shadow); }
.remote-dialog::backdrop { background:#0c071bbb; backdrop-filter:blur(8px); }
.remote-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.remote-heading small { font-size:10px; letter-spacing:.16em; color:var(--muted); }
.remote-heading h2 { font-size:20px; margin-top:5px; overflow-wrap:anywhere; }
#remoteStatus { color:var(--muted); margin:12px 0; font-size:13px; min-height:36px; }
#remoteVideo { font-size:16px; margin:0 0 12px; overflow-wrap:anywhere; }
.remote-stage { position:relative; aspect-ratio:16/9; background:#100c13; border-radius:12px; overflow:hidden; --scene-pink:#ed3e76; color:#fff; }
#remotePreview { width:100%; height:100%; object-fit:contain; display:block; }
.remote-video-controls { position:absolute; bottom:0; left:0; right:0; padding:12px 12px 8px; background:linear-gradient(transparent,#100912ef 40%); pointer-events:none; }
.remote-rail { --seek-hit-height:44px; position:relative; height:44px; }
.remote-rail .scene-badges { left:9px; right:9px; }
#remoteSeek { position:relative; z-index:1; display:block; appearance:none; -webkit-appearance:none; width:100%; height:44px; padding:0; margin:0; background:transparent; border:0; cursor:pointer; pointer-events:auto; }
#remoteSeek::-webkit-slider-runnable-track { height:5px; background:transparent; }
#remoteSeek::-moz-range-track { height:5px; background:transparent; }
#remoteSeek::-moz-range-progress { background:transparent; }
#remoteSeek::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; height:18px; width:18px; border:0; border-radius:50%; background:var(--scene-pink); margin-top:-6.5px; }
#remoteSeek::-moz-range-thumb { height:18px; width:18px; border:0; border-radius:50%; background:var(--scene-pink); }
.remote-rail .scene-chapters { left:9px; right:9px; }
.remote-time-row { display:flex; justify-content:space-between; gap:8px; font-size:12px; font-variant-numeric:tabular-nums; }
.remote-time-row span { color:#ecdde6; font-size:11px; }
.remote-scene-tip { position:absolute; bottom:84px; left:8px; max-width:calc(100% - 16px); max-height:calc(100% - 90px); overflow:auto; overflow-wrap:anywhere; padding:10px; background:#20101eee; border:1px solid #eab0cb; border-radius:8px; color:#fff; font-size:13px; z-index:3; }
.remote-preview-notice { position:absolute; top:12px; left:12px; right:12px; padding:8px; background:#170e1be6; color:#fff; font-size:12px; border-radius:8px; }
.remote-transport { display:grid; grid-template-columns:44px 1fr 1.7fr 1fr 44px; gap:8px; margin:14px 0; }
.remote-dialog button,.remote-dialog select { min-height:44px; }
.remote-transport button { min-width:0; padding-inline:6px; }
.remote-settings { display:flex; align-items:end; flex-wrap:wrap; gap:12px; }
.remote-settings label { display:grid; gap:6px; color:var(--muted); font-size:12px; }
.remote-settings label:first-child { flex:1 1 120px; }
#remoteVolume { width:100%; min-height:44px; margin:0; accent-color:var(--accent); }
#remoteRate { background:var(--surface); color:var(--ink); border:1px solid var(--line-strong); border-radius:8px; padding:8px; font-size:16px; }
.remote-scenes { margin-top:16px; border-top:1px solid var(--line); }
.remote-scenes summary { padding:14px 0; cursor:pointer; }
#remoteSceneList { display:grid; gap:8px; max-height:200px; overflow:auto; font-size:13px; color:var(--muted); }
#remoteSceneList button { display:flex; gap:8px; align-items:center; text-align:left; overflow-wrap:anywhere; }
.remote-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
#remoteError { color:var(--danger); font-size:13px; margin-top:8px; }
.remote-dock { position:fixed; right:20px; bottom:18px; z-index:30; display:flex; align-items:center; gap:12px; width:min(420px,calc(100vw - 32px)); padding:10px; background:var(--surface-solid); border:1px solid var(--line-strong); border-radius:14px; box-shadow:var(--shadow); }
#remoteDockOpen { display:grid; gap:3px; background:transparent; color:var(--ink); text-align:left; border:0; min-width:0; flex:1; }
#remoteDockOpen small { color:var(--accent); font-size:9px; letter-spacing:.12em; }
#remoteDockOpen strong { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#remoteDockTime { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
#remoteDockPlay { min-height:44px; }
body.has-remote { padding-bottom:100px; }
@media(max-width:900px) { .remote-dock { bottom:calc(86px + env(safe-area-inset-bottom)); right:16px; } body.has-remote { padding-bottom:190px; } }
@media(max-width:600px) { .remote-dialog { padding:14px; } .remote-heading h2 { font-size:17px; } .remote-transport { gap:5px; grid-template-columns:44px 1fr 1.5fr 1fr 44px; } .remote-actions button { flex:1 1 100%; } .remote-settings { gap:8px; } }
@media(orientation:landscape) and (max-height:500px) { .remote-stage { max-height:60dvh; width:100%; aspect-ratio:auto; height:60dvh; } }