.shanhe-media-stage{position:relative}
.shanhe-media-shade{position:fixed;inset:0;z-index:5000;background:#071a25b8;display:grid;place-items:center;padding:20px}.shanhe-media-dialog{width:min(940px,100%);max-height:94vh;overflow:auto;background:#fff;color:#203b36;border-radius:14px;padding:20px;box-shadow:0 20px 80px #0006}.shanhe-media-dialog header{display:flex;align-items:center;justify-content:space-between;gap:15px;background:transparent;color:inherit;padding:0;height:auto}.shanhe-media-dialog h2{font-size:20px;margin:0 0 14px;overflow-wrap:anywhere}.shanhe-media-dialog video{display:block;width:100%;aspect-ratio:16/9;max-height:65vh;background:#08131e;border-radius:8px}.shanhe-media-dialog [data-media-status]{line-height:1.7;margin:12px 0 0;font-size:13px}.shanhe-media-dialog [data-media-status][hidden]{display:none}.shanhe-media-dialog [data-state=error]{color:#a12c2c}.shanhe-camera-icon{display:grid;place-items:center;box-sizing:border-box;width:36px;height:36px;border:2px solid #fff;border-radius:8px;background:#006ba6;color:#fff;box-shadow:0 1px 5px #0009;font-size:19px}.shanhe-camera-layer-control{background:#fff;padding:9px 12px;border-radius:6px;box-shadow:0 1px 5px #0004;font-size:12px;max-width:250px}.shanhe-camera-layer-control label{display:flex;gap:7px;align-items:center}.shanhe-camera-layer-control small{display:block;padding-top:5px}.shanhe-camera-layer-control input{width:auto}
[data-camera-play],[data-camera-config]{margin-right:12px;margin-bottom:6px}.table-wrap td:has([data-camera-play]){min-width:230px}.table-wrap td:has([data-camera-play]) .link-button{display:inline-block;margin-right:12px;margin-bottom:6px}


.shanhe-camera-icon svg{display:block;flex-shrink:0}

.shanhe-media-dialog .shanhe-media-controls{position:absolute;left:12px;right:12px;bottom:12px;display:none;align-items:center;gap:10px;min-height:48px;padding:4px 10px;box-sizing:border-box;background:linear-gradient(125deg,#142333ed,#0b1722e8);border:1px solid #ffffff25;border-radius:12px;box-shadow:0 4px 18px #0004;color:#fff;font:12px/1.2 system-ui,sans-serif;backdrop-filter:blur(12px)}
.shanhe-media-stage[data-started=true] .shanhe-media-controls{display:flex}.shanhe-media-dialog .shanhe-media-controls button{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;min-height:0;padding:0;margin:0;border:0;border-radius:8px;color:#fff;background:transparent;cursor:pointer;transition:background .15s}.shanhe-media-dialog .shanhe-media-controls button:hover{background:#ffffff20}.shanhe-media-dialog .shanhe-media-controls [data-media-toggle]{background:#ffffff18}.shanhe-media-dialog .shanhe-media-controls button:focus-visible,.shanhe-media-dialog .shanhe-media-controls input:focus-visible{outline:2px solid #75d8e5;outline-offset:3px}.shanhe-media-controls [data-media-time],.shanhe-media-controls [data-media-duration]{font-variant-numeric:tabular-nums;white-space:nowrap}.shanhe-media-dialog .shanhe-media-controls input{appearance:none;-webkit-appearance:none;flex:1;min-width:24px;width:auto;height:4px;padding:0;margin:0;border:0;border-radius:4px;background:linear-gradient(to right,#7bdbd4 var(--progress,0%),#ffffff48 var(--progress,0%));cursor:pointer}.shanhe-media-controls input::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 3px #0005}.shanhe-media-controls input::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}.shanhe-media-controls input[hidden]{display:none}.shanhe-media-controls [data-media-mute]{margin-left:auto!important}.shanhe-media-stage:fullscreen{width:100%;height:100%;display:grid;place-items:center;background:#07111c}.shanhe-media-stage:fullscreen video{height:100%;max-height:100vh;object-fit:contain;border-radius:0}.shanhe-media-dialog video::-webkit-media-controls{display:none!important}

.shanhe-media-stage [data-media-status][data-state=loading]{position:absolute;top:12px;left:50%;transform:translateX(-50%);max-width:90%;margin:0;padding:7px 12px;border-radius:20px;background:#10212cdb;color:#fff;font-size:12px;pointer-events:none;white-space:nowrap}

.shanhe-media-stage [data-media-status][data-state=error]{position:absolute;top:12px;pointer-events:none;left:12px;right:12px;margin:0;padding:10px 14px;border:1px solid #f5a6a655;border-radius:10px;background:#34191cf2;color:#ffd4d4;font-size:13px}

/* Independent embedded views share playback controls with the dialog. */
.shanhe-media-inline,.shanhe-media-inline .shanhe-media-stage{width:100%;height:100%;min-width:0;min-height:0;background:#08131e;overflow:hidden}
.shanhe-media-inline video{display:block;width:100%;height:100%;object-fit:contain;background:#08131e}
.shanhe-media-inline .shanhe-media-controls{position:absolute;left:8px;right:8px;bottom:8px;display:none;align-items:center;gap:6px;min-height:36px;padding:3px 6px;box-sizing:border-box;border:1px solid #ffffff25;border-radius:7px;background:#0b1722e8;color:#fff;font:12px/1.2 system-ui,sans-serif}
.shanhe-media-inline .shanhe-media-stage[data-started=true] .shanhe-media-controls{display:flex}
.shanhe-media-inline .shanhe-media-controls button{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;min-height:0;padding:0;margin:0;border:0;border-radius:4px;color:#fff;background:transparent;cursor:pointer}
.shanhe-media-inline .shanhe-media-controls button:hover{background:#ffffff20}
.shanhe-media-inline .shanhe-media-controls button:focus-visible,.shanhe-media-inline .shanhe-media-controls input:focus-visible{outline:2px solid #75d8e5;outline-offset:2px}
.shanhe-media-inline .shanhe-media-controls input{appearance:none;-webkit-appearance:none;flex:1;min-width:24px;width:auto;height:4px;padding:0;margin:0;border:0;border-radius:4px;background:linear-gradient(to right,#7bdbd4 var(--progress,0%),#ffffff48 var(--progress,0%));cursor:pointer}
.shanhe-media-inline [data-media-status][hidden]{display:none}
.shanhe-media-inline .shanhe-media-stage [data-media-status][data-state=loading]{left:8px;right:8px;top:8px;transform:none;max-width:none;white-space:normal;overflow-wrap:anywhere;border-radius:5px}
.shanhe-media-inline .shanhe-media-stage [data-media-status][data-state=error]{left:8px;right:8px;top:8px;padding:8px;font-size:12px;overflow-wrap:anywhere}
.shanhe-media-inline video::-webkit-media-controls{display:none!important}
@media(pointer:coarse){.shanhe-media-inline .shanhe-media-controls button{flex-basis:36px;width:36px;height:36px}}

/* Keep footage clear; keyboard controls and touch devices remain usable. */
@media(hover:hover) and (pointer:fine){
 .shanhe-media-stage .shanhe-media-controls{opacity:0;pointer-events:none;transition:opacity .15s ease}
 .shanhe-media-stage:hover .shanhe-media-controls,.shanhe-media-stage:has(:focus-visible) .shanhe-media-controls{opacity:1;pointer-events:auto}
}
@media(prefers-reduced-motion:reduce){.shanhe-media-stage .shanhe-media-controls{transition:none}}

/* Fullscreen fine-pointer controls disappear after three seconds without movement. */
@media(hover:hover) and (pointer:fine){
 .shanhe-media-stage.media-controls-idle:not(:has(:focus-visible)) .shanhe-media-controls{opacity:0;pointer-events:none}
}
