* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: Arial, sans-serif; background: #fff; color: #111; }
button, input { font: inherit; }
.page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.media-view, .pin-view { width: 100%; display: flex; align-items: center; justify-content: center; }
img { display: block; max-width: 100%; max-height: calc(100vh - 32px); object-fit: contain; }
.pin-view form { width: min(100%, 320px); display: flex; flex-direction: column; gap: 12px; }
.pin-view label { text-align: center; font-size: 18px; }
.pin-view input, .pin-view button { width: 100%; min-height: 48px; font-size: 18px; }
.pin-view input { padding: 8px 12px; text-align: center; }
.pin-view button { border: 0; background: #111; color: #fff; cursor: pointer; }
.video-frame { position: relative; width: min(100%, 1100px); background: #000; overflow: hidden; }
.video-frame video { display: block; width: 100%; max-height: calc(100vh - 32px); object-fit: contain; background: #000; }
.video-controls { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px 10px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.85)); user-select: none; }
.progress-track { width: 100%; height: 4px; background: rgba(255,255,255,.35); overflow: hidden; pointer-events: none; }
.progress-bar { width: 0; height: 100%; background: #fff; }
.control-row { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.video-time { font-size: 13px; font-variant-numeric: tabular-nums; }
.control-buttons { display: flex; align-items: center; gap: 8px; }
.volume-control { display: flex; align-items: center; gap: 2px; }
.volume-slider { width: 92px; height: 24px; margin: 0; cursor: pointer; accent-color: #fff; }
.icon-button { width: 42px; height: 42px; border: 0; padding: 0; display: grid; place-items: center; background: transparent; color: #fff; font-size: 23px; cursor: pointer; }
.video-frame:fullscreen, .video-frame:-webkit-full-screen { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #000; }
.video-frame:fullscreen video, .video-frame:-webkit-full-screen video { width: 100%; max-height: 100vh; }
.alert-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.55); }
.alert-box { width: min(100%, 340px); padding: 24px; background: #fff; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.alert-box p { margin: 0 0 18px; font-size: 17px; }
.alert-box button { min-width: 110px; min-height: 44px; border: 0; background: #111; color: #fff; cursor: pointer; }
.hidden { display: none !important; }