/* 60 秒宣传片弹窗（仅 index.html 引用，带 ?v= 内容哈希）。
   命名一律 vid- 前缀，避免与 styles.css 的类名相撞。 */
/* 首屏按钮：共享 .button 的 gap:30px 是给「文字+尾箭头」设计的，三角图标用太宽 */
.button[data-vid-open]{gap:10px}
/* dialog 必须是 fit-content + margin:auto 才会居中；width:auto 会被解算成
   撑满视口宽（inset:0 约束），内容又从起点排 → 整盒偏左贴边 */
.vid-dlg{padding:0;border:0;background:transparent;width:fit-content;height:fit-content;margin:auto;max-width:100vw;max-height:100vh}
.vid-dlg::backdrop{background:rgba(6,8,5,.82);backdrop-filter:blur(10px)}
.vid-box{width:min(1040px,94vw);background:var(--panel,#121710);border:1px solid var(--line,rgba(255,255,255,.11));border-radius:18px;overflow:hidden;box-shadow:0 50px 120px -20px #000c}
.vid-bar{height:44px;display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--panel2,#181e15);border-bottom:1px solid var(--line,rgba(255,255,255,.11))}
.vid-bar i{width:10px;height:10px;border-radius:50%}
.vid-bar i:nth-child(1){background:#e15b64}.vid-bar i:nth-child(2){background:#f2c84b}.vid-bar i:nth-child(3){background:#83b92e}
.vid-bar>span{flex:1;font-size:12px;color:var(--muted,#9ba294);letter-spacing:.06em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vid-x{flex:0 0 auto;width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--cream,#f3eddf);font-size:18px;cursor:pointer;line-height:1}
.vid-x:hover{background:rgba(255,255,255,.08)}
.vid-stage{position:relative;background:#000}
.vid-v{display:block;width:100%;aspect-ratio:16/9;background:#000;outline:0}
/* 首载盖深底+转圈（不预载封面，避免和视频抢带宽）；
   播放中缓冲只显转圈。.lite 必须写在 .on 之后：waiting 可能早于 playing 到达。 */
.vid-veil{position:absolute;inset:0;display:grid;place-items:center;background:rgba(9,12,8,.92);opacity:0;pointer-events:none;transition:opacity .3s}
.vid-veil.on{opacity:1}
.vid-veil.lite{opacity:1;background:transparent}
.vid-veil.lite .vid-spin{box-shadow:0 0 0 6px rgba(9,12,8,.65)}
.vid-spin{width:44px;height:44px;border-radius:50%;border:3px solid rgba(185,239,74,.25);border-top-color:#b9ef4a;animation:vid-spin .8s linear infinite}
@keyframes vid-spin{to{transform:rotate(360deg)}}
.vid-chapters{display:flex;gap:8px;padding:14px 16px 4px;overflow-x:auto;scrollbar-width:thin}
.vid-chapters button{flex:0 0 auto;border:1px solid var(--line,rgba(255,255,255,.11));background:#141a12;color:var(--muted,#9ba294);border-radius:999px;padding:8px 14px;font:600 12px/1 "Noto Sans SC",Manrope,sans-serif;cursor:pointer;white-space:nowrap;transition:.2s}
.vid-chapters button:hover{border-color:#627255;color:var(--cream,#f3eddf)}
.vid-chapters button.on{background:var(--green,#b9ef4a);border-color:var(--green,#b9ef4a);color:#12160f}
.vid-foot{display:flex;align-items:center;gap:18px;padding:14px 16px 18px;flex-wrap:wrap}
.vid-foot .button{height:46px;padding:0 20px}
.vid-alt{font-size:12px;color:var(--muted,#9ba294);text-decoration:none;border-bottom:1px solid var(--line,rgba(255,255,255,.11));padding-bottom:2px}
.vid-alt:hover{color:var(--green,#b9ef4a)}
body.vid-lock{overflow:hidden}
@media(max-width:560px){.vid-foot .button{width:100%}}