/* 介面程度 看片／標準／完整（SPEC_v2 §14）：切換器、頂列、看片 */
  /* ==================== 介面程度：看片／標準／完整（SPEC_v2 §14）==================== */
  /* body.lv-watch／lv-std／lv-pro＝觀看者選的等級；body.lv-on＝目前真的在看某個項目（首頁、專案頁、登入、挑片模式都不算）。
     完整＝照舊（時間軸 dock）；標準＝同完整但沒有 dock（JS 的 mtWanted 認等級）；看片＝下面這整段。 */
  .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .topbar{position:relative;z-index:45}

  /* ---- 切換器：≥1100px 分段鈕（滑動色塊）；較窄＝一顆鈕開小選單，每項附一句說明 ---- */
  .lv-sw{display:none;position:relative;align-items:center;gap:9px;flex:0 0 auto;margin-right:4px}
  body.lv-on .lv-sw{display:flex}
  .lv-lbl{font-size:12px;letter-spacing:.1em;color:var(--txt-faint);white-space:nowrap}
  .lv-seg{--i:1;display:none;position:relative;grid-template-columns:repeat(3,1fr);padding:3px;border-radius:11px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line)}
  .lv-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 3);border-radius:8px;pointer-events:none;
    background:rgba(91,140,255,.2);box-shadow:inset 0 0 0 1px rgba(91,140,255,.55);transform:translateX(calc(var(--i) * 100%));
    transition:transform .3s cubic-bezier(.2,.8,.2,1),background-color .3s,box-shadow .3s}
  .lv-seg button{position:relative;z-index:1;height:30px;min-width:58px;padding:0 14px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--txt-dim);white-space:nowrap;transition:color .18s}
  .lv-seg button:hover{color:var(--txt)}
  .lv-seg button[aria-pressed="true"]{color:#fff}
  .lv-seg button:focus-visible,.lv-btn:focus-visible,.lv-mi:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .lv-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 10px 0 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--txt);font-size:13.5px;font-weight:600;white-space:nowrap;transition:border-color .15s,background-color .15s}
  .lv-btn:hover,.lv-btn[aria-expanded="true"]{border-color:var(--accent)}
  .lv-btn .lv-k{font-weight:500;color:var(--txt-faint);font-size:12.5px}
  .lv-btn svg{flex:none;color:var(--txt-faint);transition:transform .2s}
  .lv-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
  .lv-menu{position:absolute;right:0;top:calc(100% + 10px);width:min(310px,calc(100vw - 20px));padding:6px;border-radius:14px;z-index:80;
    background:rgba(29,32,41,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:0 26px 64px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.3);
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px) scale(.985);transform-origin:100% 0;
    transition:opacity .14s ease,transform .2s cubic-bezier(.2,.9,.3,1.1),visibility 0s linear .2s}
  .lv-menu.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
  .lv-menu-h{padding:8px 12px 6px;font-size:12px;letter-spacing:.08em;color:var(--txt-faint)}
  .lv-mi{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:8px;align-items:start;width:100%;padding:10px 12px;border-radius:10px;text-align:left;transition:background-color .12s}
  .lv-mi:hover{background:rgba(255,255,255,.06)}
  .lv-mi[aria-checked="true"]{background:rgba(91,140,255,.14)}
  .lv-mi i{grid-row:1 / span 2;width:18px;height:18px;margin-top:2px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--txt-faint);position:relative;transition:box-shadow .15s}
  .lv-mi[aria-checked="true"] i{box-shadow:inset 0 0 0 5.5px var(--accent)}
  .lv-mi b{font-size:15px;font-weight:700;line-height:1.35;color:var(--txt)}
  .lv-mi small{font-size:12.5px;line-height:1.45;color:var(--txt-faint)}
  /* 單鍵快捷鍵開關（SPEC_v2 §14.5，WCAG 2.1.4）：選單裡一列（≤1099px／放不下時的收合版）；≥1100px 選單收起來了，改在分段鈕旁放一顆 ⌨ 開關。同一個 rv_keys */
  .lv-menu-sep{height:1px;margin:6px 8px;background:var(--line)}
  .lv-mi.lv-mk[aria-checked="true"]{background:none}
  .lv-mi.lv-mk:hover{background:rgba(255,255,255,.06)}
  .lv-mi.lv-mk i,.lv-mi.lv-mk[aria-checked="true"] i{border-radius:5px;box-shadow:inset 0 0 0 1.5px var(--txt-faint)}
  .lv-mi.lv-mk[aria-checked="true"] i{background:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
  .lv-mi.lv-mk[aria-checked="true"] i::after{content:"";position:absolute;left:5.5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
  .lv-keys{display:none;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--txt-dim);transition:border-color .15s,color .15s,background-color .15s}
  .lv-keys:hover{border-color:var(--accent);color:var(--txt)}
  .lv-keys:focus-visible,.lv-mi.lv-mk:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .lv-keys .ks{display:none}
  .lv-keys[aria-checked="false"]{color:var(--txt-faint)}
  .lv-keys[aria-checked="false"] .ks{display:block}
  /* 客戶看到的 ⌨ 不能只是一顆沒字的圖示：圖示後面加字（「快捷鍵：開／關」，跟著 aria-checked 變）；製作端熟悉，維持圖示。看片頂列是半透明深色，鈕也跟著 */
  body.role-client .lv-keys{width:auto;gap:6px;padding:0 12px 0 10px}
  body.role-client .lv-keys::after{content:"快捷鍵：開";font-size:12.5px;font-weight:600;letter-spacing:.04em;white-space:nowrap}   /* 字面刻意是無障礙名稱「單鍵快捷鍵：開」的一部分（WCAG 2.5.3 可見標籤要包含在名稱裡） */
  body.role-client .lv-keys[aria-checked="false"]::after{content:"快捷鍵：關"}
  body.lv-watch .lv-keys{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
  body.lv-watch .lv-keys:hover{border-color:rgba(255,255,255,.4)}
  @media (min-width:1100px){body.lv-on .lv-keys{display:inline-flex}}
  body.lv-on.lv-compact .lv-keys{display:none}
  #lkKeysBtn{display:none;font-size:14px;padding:9px 14px}   /* 挑片頂列、「已標 N」旁；只有桌機（有鍵盤）才出現 */
  body.mode-like.like-desk #lkKeysBtn{display:inline-block}
  #lkKeysBtn[aria-checked="false"]{color:rgba(255,255,255,.62);border-style:dashed}
  #lkKeysBtn:focus-visible{outline:2px solid #ff6b81;outline-offset:2px}
  @media (min-width:1100px){.lv-seg{display:grid}.lv-btn,.lv-menu{display:none}}
  @media (min-width:1100px){.lv-lbl{display:inline}}
  @media (max-width:1099px){.lv-lbl{display:none}}
  /* 製作端審片模式的頂列本來就塞滿（1440px 剛好放下）：放不下時 JS（lvFit）先把分段鈕收成一顆鈕＋選單，還不夠再縮標語與按鈕留白 */
  body.lv-compact .lv-seg,body.lv-compact .lv-lbl{display:none!important}
  body.lv-compact .lv-btn{display:inline-flex!important}
  body.lv-compact .lv-menu{display:block}
  body.lv-compact .lv-btn .lv-k{display:none}
  body.tb-tight .topbar .logo small{display:none}
  @media (max-width:1000px){body.lv-on .topbar .logo small{display:none}}   /* 看項目時頂列要留給「← 專案」與項目名：平板直立（768）副標先讓出 90px */
  body.tb-tight .topbar{column-gap:8px;padding-left:12px;padding-right:12px}   /* round 7：只動左右（以前 padding:0 12px 連手機的上下留白 6px 一起蓋掉，換行的頂列按鈕貼在螢幕上緣） */
  body.tb-tight .topbar .right-tools{gap:6px}
  body.tb-tight .topbar .icon-btn{padding-left:9px;padding-right:9px}
  body.tb-nologo .topbar .logo{display:none}   /* 最後兩步：項目名還是被截（製作端平板直立 767／768：專案＋返回＋分段＋AI＋分享塞滿）→ 先收掉 RE:VIEW 字標（約 100px），再收掉「← 專案」裡的專案名（標題列／逐字稿標題已經有）；「專案」鈕就是回首頁 */
  /* round 7：製作端手機（≤640）頂列塞不下（375 寬溢出 7px、「分享給客戶」被裁）：看項目時「← 專案」已經回專案首頁，不再多放一顆幾乎一樣的「🏠 專案」（專案管理從專案首頁進）；「⏱ 素材章節」縮成圖示（名稱仍在） */
  @media (max-width:640px){
    body.lv-on #homeBtn{display:none}
    .topbar #chapBtn{font-size:0;padding:0;width:44px;min-width:44px;height:44px;display:inline-grid;place-items:center}
    .topbar #chapBtn::before{content:"⏱";content:"⏱" / "";font-size:17px;line-height:1}
  }
  body.tb-noname #backHomeBtn{min-width:44px;justify-content:center}
  body.tb-noname #backHomeName{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}   /* 視覺上收掉、朗讀還在：按鈕的名稱仍是「← 專案名」，不會只剩一個箭頭 */
  /* ---- round 8：頂列放不下（製作端審片，視窗 641–1200px，例如 iPad 直立 768／橫放 1024）→ lvFit 第五、六、七階 ----
     tb-more：⏱／♥／AI／匯出入／身分收進「⋯ 更多」；tb-more2：連「📄 輸出修改單」也收進去（只剩「🔗 分享給客戶」在外面）；tb-wrap：還是放不下（≈641–700）就換行，高度由 --tb-h 回報給 stage。
     頂列自己 overflow-x:clip（不用 hidden：hidden 會把 overflow-y 變成 auto、切掉往下開的介面選單）：萬一又有東西溢出，不會再把整頁撐寬（行動版面視窗被撐成 1201 寬、整頁縮到 64%）。scrollWidth 不受影響，lvFit 照樣量得到 */
  body:not(.lv-watch) .topbar{overflow-x:clip}
  /* 介面選單在手機（≤640）：頂列折成兩列後「介面」鈕不在最右邊，原本 right:0 貼著鈕的右緣，375 寬時面板左緣在 −59（首字被切）；改貼視窗右緣、固定寬（≤310px、距兩側 ≥10px）。top 由 lvMenuSet 寫入 --lv-menu-top */
  @media (max-width:640px){.lv-menu{position:fixed;left:auto;right:10px;top:var(--lv-menu-top,56px);width:min(310px,calc(100vw - 20px))}}
  .tb-morebox{display:none;position:relative;flex:0 0 auto}
  body.tb-more:not(.role-client) .tb-morebox{display:block}
  body.tb-more #homeBtn,body.tb-more #keyBtn,body.tb-more #scanBtn,body.tb-more #chapBtn,body.tb-more #likePreviewBtn,body.tb-more #exportBtn,body.tb-more #importBtn,
  body.tb-more .right-tools>span,body.tb-more #roleSelect{display:none!important}
  body.tb-more2 #sheetBtn{display:none!important}
  body:not(.tb-more2) .tb-mi-sheet{display:none}
  body.mode-text .tb-mi:not([data-for=keyBtn]):not([data-for=homeBtn]),body.mode-text .tb-sep{display:none}   /* 文字模式的頂列本來就只有 專案／AI／分享：選單裡只留專案管理、AI 設定 */
  body.tb-wrap .topbar{height:auto;min-height:52px;padding-top:6px;padding-bottom:6px;flex-wrap:wrap;row-gap:6px}
  .tb-menu{position:absolute;right:0;top:calc(100% + 10px);width:min(300px,calc(100vw - 20px));padding:6px;border-radius:14px;z-index:80;
    background:rgba(29,32,41,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:0 26px 64px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.3);
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px) scale(.985);transform-origin:100% 0;
    transition:opacity .14s ease,transform .2s cubic-bezier(.2,.9,.3,1.1),visibility 0s linear .2s}
  .tb-menu.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
  .tb-mi{display:block;width:100%;min-height:48px;padding:9px 12px;border-radius:10px;text-align:left;transition:background-color .12s}
  .tb-mi:hover{background:rgba(255,255,255,.06)}
  .tb-mi:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .tb-mi:disabled{opacity:.45;cursor:default}
  .tb-mi b{display:block;font-size:15px;font-weight:700;line-height:1.35;color:var(--txt)}
  .tb-mi small{display:block;font-size:12.5px;line-height:1.45;color:var(--txt-faint)}
  .tb-sep{height:1px;margin:6px 8px;background:var(--line)}
  #moreBtn[aria-expanded="true"]{border-color:var(--accent);color:var(--txt)}
  @media (pointer:coarse){.tb-mi{min-height:56px}}
  @media (pointer:coarse){.lv-btn{height:44px}.lv-seg button{height:38px}.lv-mi{min-height:56px}}

  /* ---- 標準：選段卡的匯出鈕（沒有 dock 時，匯出入口在這；有 dock 就用 dock 標頭的） ---- */
  body.has-dock #txExport{display:none}
  /* ---- 標準（手機）：文字模式右欄不顯示，所以底部放一條「選段 N｜匯出」 ---- */
  .lv-pickbar{display:none}
  @media (max-width:1000px){
    body.lv-pickbar-on .lv-pickbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
      background:linear-gradient(to top,var(--bg) 62%,rgba(14,15,19,0))}
    .lv-pb{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 18px;border-radius:12px;font-size:14.5px;font-weight:700;color:var(--txt);
      background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .12s,box-shadow .12s}
    .lv-pb:hover,.lv-pb[aria-expanded="true"]{box-shadow:inset 0 0 0 1px var(--accent)}
    .lv-pb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
    .lv-pb-l{flex:1}
    .lv-pb b{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 6px;border-radius:10px;font:700 12px/1 var(--mono);background:rgba(255,255,255,.12);color:var(--txt-dim)}
    body.lv-pickbar-on .lv-pb.has b{background:#ff6b81;color:#1d0a10}
    body.lv-pickbar-on.mode-text .tx-lines{padding-bottom:150px}
    body.lv-pickbar-on .toast{bottom:84px}
  }

  /* ==================== 看片：安靜、像看電影 ==================== */
  /* 版面變數：影片的最大高度＝視窗高 − 頂部留白 − 控制列 − 大字幕列（開著才算）− 主按鈕那一帶 − 底部留白；寬度由比例反推，再封頂 1600px。
     桌機的主按鈕是右下角浮動膠囊，不佔版面：大字幕列開著時它和大字幕共用底部那一帶（大字幕寬度讓開膠囊），否則才多留 --wv-cta 一條給它。
     --wv-cap＝大字幕列總高（含上方間距 --wv-capm）：最多兩行字＋講者小標。大字幕要不要佔版面只看 body.wv-cap-on（JS 的 wvAvail 單一真相），CSS 不再自己用高度判斷 */
  /* --wv-amax＝影片最大高度的上限（預設不限）。只有「大字幕被矮視窗自動換成影片上」（body.wv-auto-over，JS 的 wvAvail）才設：上限＝同寬度下「大字幕列剛好出現」那個高度的影片高，
     所以視窗高度一路拉高時，影片面積只會變大或持平，不會在換手那一格（760／761）突然縮小；人自己選「影片上」「關閉」的不設上限（他要最大的影片） */
  body.lv-on.lv-watch{--wv-top:0px;--wv-pad:72px;--wv-ctl:62px;--wv-cap:124px;--wv-capm:16px;--wv-capx:0px;--wv-cta:60px;--wv-bot:26px;--wv-amax:100000px;
    --wv-avail:min(var(--wv-amax),calc(100vh - var(--wv-pad) - var(--wv-ctl) - var(--wv-capx) - var(--wv-cta) - var(--wv-bot)));
    --wv-w:min(1600px,calc(var(--wv-avail) * 16 / 9));--wv-wp:calc(var(--wv-avail) * 9 / 16);
    background:radial-gradient(1400px 820px at 50% 34%,#14161e 0%,#090a0e 58%,#050608 100%) fixed,#06070a}
  @supports (height:100dvh){body.lv-on.lv-watch{--wv-avail:min(var(--wv-amax),calc(100dvh - var(--wv-pad) - var(--wv-ctl) - var(--wv-capx) - var(--wv-cta) - var(--wv-bot)))}}
  body.lv-on.lv-watch.wv-cap-on{--wv-capx:var(--wv-cap)}
  @media (min-width:1001px){body.lv-on.lv-watch.wv-cap-on{--wv-cta:0px}
    body.lv-on.lv-watch.role-client.mode-portrait{--wv-cta:0px}}   /* 直式影片很窄，碰不到右下角的膠囊：不留空帶 */
  /* 桌機、字幕不在影片下方（影片上／關閉）：右下角膠囊只有在「影片組右緣碰得到它」時才留一條底部空帶，不然整條空著是浪費。
     --wv-w0＝不留空帶時的影片寬；--wv-wc＝讓出膠囊後的寬度上限（兩側各留 236px）；--wv-w1＝留空帶時的影片寬。兩種做法取影片比較大的那個：
     留空帶比較大 → --wv-cta＝--wv-band；否則 0，並把 --wv-w 封頂在 --wv-wc（最後那項 +cta×1000 讓封頂只在沒留空帶時生效）。全部用同一個元素上的自訂屬性，沒有循環 */
  @media (min-width:1001px){
    body.lv-on.lv-watch.role-client:not(.wv-cap-on):not(.mode-portrait){--wv-vh:100vh;--wv-band:56px;
      --wv-a0:min(var(--wv-amax),calc(var(--wv-vh) - var(--wv-pad) - var(--wv-ctl) - var(--wv-bot)));--wv-a1:min(var(--wv-amax),calc(var(--wv-vh) - var(--wv-pad) - var(--wv-ctl) - var(--wv-bot) - var(--wv-band)));
      --wv-w0:min(1600px,calc(var(--wv-a0) * 16 / 9));--wv-w1:min(1600px,calc(var(--wv-a1) * 16 / 9));--wv-wc:calc(100vw - 472px);
      --wv-cta:clamp(0px,calc((var(--wv-w1) - min(var(--wv-w0),var(--wv-wc))) * 100),var(--wv-band));
      --wv-w:min(1600px,calc(var(--wv-avail) * 16 / 9),calc(var(--wv-wc) + var(--wv-cta) * 1000))}
    @supports (height:100dvh){body.lv-on.lv-watch.role-client:not(.wv-cap-on):not(.mode-portrait){--wv-vh:100dvh}}
  }
  /* 桌機的頂部留白、大字幕列高度都隨視窗高度連續變化（820 以下＝66／88／12，900 以上＝72／128／16，中間線性；128＝講者＋重播小標一行、再兩行 30px 字）：以前在 820／821 各用一組固定值，影片在那一格縮小約 14% 面積。
     筆電常見的矮視窗回收垂直空間給影片（講者小標改放在字幕左邊同一行，見下面 max-height:900px 那組） */
  @media (min-width:1001px){body.lv-on.lv-watch{--wv-pad:clamp(66px,calc(66px + (100vh - 820px) * .075),72px);--wv-cap:clamp(88px,calc(88px + (100vh - 820px) * .5),128px);--wv-capm:clamp(12px,calc(12px + (100vh - 820px) * .05),16px)}
    body.lv-on.lv-watch.wv-auto-over{--wv-amax:518px}}   /* 518＝760 高時大字幕列開著的影片高（760−66−62−88−26）；JS 的 wvShortMq 門檻也是 760 */
  body.lv-on.lv-watch:not(.role-client){--wv-cta:0px}   /* 製作端自己看片不需要給客戶的「我想留言」按鈕（要切等級用頂列的「介面」） */
  body.lv-on.lv-watch:not(.role-client) .wv-cta{display:none}
  .wv-ctl,.wv-cap,.wv-cta,.wv-big,.wv-title{display:none}
  .wv-play,.wv-ico,.wv-go,.wv-big,.wv-cap,.lv-btn,.lv-seg button,.lv-mi,.lv-pb{touch-action:manipulation;-webkit-tap-highlight-color:transparent}   /* 手機：不要雙擊縮放、不要點擊時閃灰底 */
  body.lv-on.lv-watch .wv-ctl{display:flex}
  body.lv-on.lv-watch .wv-cap{display:flex}
  body.lv-on.lv-watch:not(.wv-cap-on) .wv-cap{display:none}
  body.lv-on.lv-watch .wv-cta{display:flex}
  body.lv-on.lv-watch .wv-big{display:grid}
  body.lv-on.lv-watch .wv-title{display:flex}

  /* 不屬於看片的東西全部收起來（版本列、逐字稿、留言、時間軸、所有工具列） */
  body.lv-on.lv-watch .vstrip,body.lv-on.lv-watch .right-col,body.lv-on.lv-watch .text-col,body.lv-on.lv-watch .tx-side,
  body.lv-on.lv-watch .controlbar,body.lv-on.lv-watch .scrubber-box,body.lv-on.lv-watch .vnote,body.lv-on.lv-watch .tl-dock,
  body.lv-on.lv-watch .skip-links,body.lv-on.lv-watch .lv-pickbar,body.lv-on.lv-watch .tl-pop,
  body.lv-on.lv-watch .topbar .logo,body.lv-on.lv-watch #homeBtn,body.lv-on.lv-watch .topbar .proj-pick,body.lv-on.lv-watch #modeSeg,
  body.lv-on.lv-watch .topbar .item-title,body.lv-on.lv-watch .topbar .right-tools>*:not(.lv-sw):not(#shareBtn){display:none!important}

  /* 頂列：桌機浮在影片上方（漸層底、不佔高度）；手機才佔一列 */
  body.lv-on.lv-watch .topbar{position:absolute;top:0;left:0;right:0;z-index:45;height:72px;min-height:0;padding:0 26px;gap:12px;flex-wrap:nowrap;border:0;
    background:linear-gradient(180deg,rgba(5,6,8,.9) 0%,rgba(5,6,8,.55) 55%,rgba(5,6,8,0) 100%);transition:opacity .6s ease}
  body.lv-on.lv-watch #backHomeBtn{flex:none;max-width:none;padding:9px 14px 9px 10px;border-radius:999px;border:0;background:rgba(255,255,255,.07);color:rgba(255,255,255,.78);font-weight:600;font-size:14px;transition:background-color .15s,color .15s}
  body.lv-on.lv-watch #backHomeBtn:hover{background:rgba(255,255,255,.14);color:#fff;border:0}
  body.lv-on.lv-watch #backHomeBtn:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .wv-title{flex-direction:column;justify-content:center;min-width:0;gap:1px;margin-left:6px;line-height:1.3}
  .wv-title b{font-size:15.5px;font-weight:600;color:#fff;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wv-title span{font-size:12.5px;color:rgba(255,255,255,.5);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wv-title span[hidden]{display:none}
  body.lv-on.lv-watch .topbar .right-tools{margin-left:auto;gap:10px}
  body.lv-on.lv-watch #shareBtn{background:rgba(255,255,255,.07);border:0;color:rgba(255,255,255,.78);border-radius:999px;padding:9px 16px}
  body.lv-on.lv-watch #shareBtn:hover{background:rgba(255,255,255,.14);color:#fff}
  body.lv-on.lv-watch .lv-thumb{background:rgba(255,255,255,.15);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
  body.lv-on.lv-watch .lv-seg,body.lv-on.lv-watch .lv-btn{background:rgba(255,255,255,.06);box-shadow:none;border-color:rgba(255,255,255,.1)}
  body.lv-on.lv-watch .lv-seg{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}

  /* 舞台：單欄置中，周圍留大片暗色 */
  body.lv-on.lv-watch .stage{display:flex;flex-direction:column;height:100vh;height:100dvh;padding:0;overflow:hidden}
  body.lv-on.lv-watch .stage .video-col{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;
    width:100%;min-width:0;min-height:0;padding:var(--wv-pad) 32px calc(var(--wv-bot) + var(--wv-cta));gap:0;background:none;border:0;overflow-x:hidden;overflow-y:auto;position:static}
  body.lv-on.lv-watch .stage .player-wrap{position:relative;flex:none;width:100%;max-width:var(--wv-w);aspect-ratio:16/9;height:auto;max-height:none;margin:0 auto;padding:0;
    align-self:center;grid-area:auto;border-radius:14px;overflow:hidden;container-type:inline-size;background:#000;
    box-shadow:0 40px 90px -20px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06)}
  body.lv-on.lv-watch.mode-portrait .stage .player-wrap{aspect-ratio:9/16;max-width:max(var(--wv-wp),200px)}
  body.lv-on.lv-watch .player-wrap iframe{pointer-events:none}   /* YouTube：自己的控制列接手，點畫面＝播放／暫停 */
  body.lv-on.lv-watch .player-wrap{cursor:pointer}
  body.lv-on.lv-watch.wv-idle .player-wrap{cursor:none}

  /* 影片上的字幕：圓角半透明底，字大一點、清楚；字級跟著影片寬度走 */
  body.lv-on.lv-watch .sub-overlay{left:50%;right:auto;bottom:clamp(14px,4.2cqw,44px);transform:translateX(-50%);width:max-content;max-width:90%;padding:.16em .64em .2em;border-radius:.5em;
    background:rgba(6,7,10,.68);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:clamp(16px,2.3cqw,30px);font-weight:600;line-height:1.5;letter-spacing:.015em;text-shadow:none;text-wrap:balance}

  /* 暫停時中間一顆大的播放鍵：不懂剪輯的人也知道「按這裡」 */
  .wv-big{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;place-items:center;border-radius:50%;z-index:4;color:#fff;
    background:rgba(8,9,12,.46);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 14px 40px rgba(0,0,0,.4);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    transition:opacity .28s ease,transform .36s cubic-bezier(.2,.9,.3,1.25),background-color .15s}
  .wv-big svg{margin-left:4px}
  .wv-big:hover{background:rgba(8,9,12,.62);transform:scale(1.06)}
  .wv-big:focus-visible{outline:2px solid #fff;outline-offset:4px}
  .player-wrap:not(.wv-paused) .wv-big{opacity:0;transform:scale(.82);pointer-events:none}
  body.wv-yt .wv-big{display:none!important}   /* YouTube 自己會在暫停時畫一顆，不重複 */
  /* 影片載入狀態：緩衝轉圈（看片；延遲 .4 秒才出現，短暫的緩衝不閃）與載入失敗面板（所有等級） */
  .wv-spin{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;z-index:4;display:none;place-items:center;pointer-events:none;
    background:rgba(8,9,12,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .15s}
  body.lv-on.lv-watch .wv-spin{display:grid}
  .wv-spin i{width:26px;height:26px;border-radius:50%;box-sizing:border-box;border:2.5px solid rgba(255,255,255,.22);border-top-color:#fff;animation:rvboot-spin .8s linear infinite}
  .player-wrap.wv-buffering .wv-spin{opacity:1;transition:opacity .2s .4s}
  body.wv-yt .wv-spin,.player-wrap.has-err .wv-spin,.player-wrap.has-err .wv-big{display:none!important}
  .vid-err{position:absolute;inset:0;z-index:6;display:grid;place-items:center;padding:14px;background:rgba(6,7,10,.92);text-align:center;cursor:default}
  .vid-err[hidden]{display:none}
  .ve-box{max-width:360px;display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff}
  .ve-box svg{color:rgba(255,255,255,.7);margin-bottom:2px}
  .ve-box b{font-size:17px;font-weight:700;letter-spacing:.02em}
  .ve-box span{font-size:14px;line-height:1.6;color:rgba(255,255,255,.68)}
  .ve-btn{margin-top:8px;height:44px;padding:0 26px;border-radius:22px;background:#eceef4;color:#0b0c10;font-size:15px;font-weight:700;letter-spacing:.06em;
    box-shadow:0 10px 28px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.55);transition:background-color .15s,transform .18s}
  .ve-btn:hover{background:#fff}
  .ve-btn:active{transform:scale(.985)}
  .ve-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
  @container (max-width:420px){.ve-box{gap:4px}.ve-box svg{width:24px;height:24px}.ve-box b{font-size:15.5px}.ve-box span{font-size:13px;line-height:1.5}.ve-btn{margin-top:6px}}
  @media (prefers-reduced-motion:reduce){.wv-spin i{animation-duration:2.4s}.player-wrap .wv-spin{transition:none!important}}   /* 減少動態：轉慢一點——這是「正在載入」的狀態提示，不能整個拿掉 */

  /* 控制列：播放鍵、時間、細進度條、CC／逐句／全螢幕 */
  body.lv-on.lv-watch .wv-ctl{align-items:center;gap:6px;width:100%;max-width:max(var(--wv-w),360px);height:48px;margin:14px auto 0;padding:0;transition:opacity .6s ease}
  body.lv-on.lv-watch.mode-portrait .wv-ctl{max-width:max(var(--wv-wp),440px)}   /* 直式影片很窄：進度條仍要有足夠長度可以拖 */
  .wv-play{flex:none;display:grid;place-items:center;width:44px;height:44px;margin-left:-8px;border-radius:50%;color:#fff;transition:background-color .15s,opacity .6s ease}
  .wv-play:hover{background:rgba(255,255,255,.1)}
  .wv-play:focus-visible,.wv-ico:focus-visible,.wv-go:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .wv-play .i-pause,.wv-play.is-playing .i-play{display:none}
  .wv-play.is-playing .i-pause{display:block}
  .wv-t{flex:none;min-width:40px;font:500 13px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:rgba(255,255,255,.55);text-align:center}
  .wv-t.cur{color:#fff}
  .wv-seek{--p:0;--b:0;--tx:0px;position:relative;flex:1 1 auto;min-width:0;height:44px;margin:0 6px;cursor:pointer;touch-action:none;outline:none;-webkit-tap-highlight-color:transparent}
  .wv-rail{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.17);transition:height .16s ease,margin-top .16s ease}
  .wv-seek:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:8px}   /* 鍵盤走到進度條：外框跟其他按鈕一樣明顯（以前只有細線加粗） */
  .wv-seek:hover .wv-rail,.wv-seek.drag .wv-rail,.wv-seek:focus-visible .wv-rail{height:7px;margin-top:-3.5px}
  .wv-seek:focus-visible .wv-rail{box-shadow:0 0 0 2px rgba(255,255,255,.85)}
  .wv-buf,.wv-fill{position:absolute;inset:0;transform-origin:0 50%}
  .wv-buf{background:rgba(255,255,255,.2);transform:scaleX(var(--b))}
  .wv-fill{background:#fff;transform:scaleX(var(--p))}
  .wv-knob{position:absolute;top:50%;left:calc(var(--p) * 100%);width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.55);
    transform:scale(0);transition:transform .18s cubic-bezier(.2,.9,.3,1.4)}
  .wv-seek:hover .wv-knob,.wv-seek.drag .wv-knob,.wv-seek:focus-visible .wv-knob{transform:scale(1)}
  .wv-tip{position:absolute;bottom:calc(50% + 16px);left:var(--tx);transform:translateX(-50%);padding:5px 9px;border-radius:7px;background:rgba(18,20,27,.94);box-shadow:0 0 0 1px rgba(255,255,255,.1);
    font:600 12px/1 var(--sans);font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s}
  .wv-seek.tip .wv-tip{opacity:1}
  .wv-ico{flex:none;display:inline-grid;place-items:center;height:36px;min-width:36px;padding:0 11px;border-radius:9px;font:700 12.5px/1 var(--sans);letter-spacing:.05em;color:rgba(255,255,255,.55);
    transition:color .15s,background-color .15s,opacity .6s ease}
  .wv-ico:hover{color:#fff;background:rgba(255,255,255,.1)}
  .wv-ico[aria-pressed="true"]{color:#fff;background:rgba(255,255,255,.16)}
  .wv-ico[hidden]{display:none}
  .wv-fs,.wv-back{padding:0;width:36px}
  /* 字幕三態鈕：圖示（螢幕＋字幕條的位置）＋兩三個字，看一眼就知道現在字幕在哪；關閉時變暗 */
  .wv-ico.wv-sub:not([hidden]){display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px 0 10px}
  .wv-sub svg{display:none;flex:none}
  .wv-sub[data-s="big"] .ic-big,.wv-sub[data-s="over"] .ic-over,.wv-sub[data-s="off"] .ic-off{display:block}
  .wv-sub .wv-sub-t,.wv-sub .wv-sub-s{white-space:nowrap}
  .wv-sub .wv-sub-s{display:none}
  @media (max-width:480px){.wv-sub .wv-sub-t{display:none}.wv-sub .wv-sub-s{display:inline}}   /* 手機：動作文字換短版（3～4 個字），第二列才排得下 */
  body.wv-sub-anim .stage .player-wrap,body.wv-sub-anim .wv-ctl{transition:max-width .4s cubic-bezier(.2,.8,.2,1)}
  @media (prefers-reduced-motion:reduce){body.wv-sub-anim .stage .player-wrap,body.wv-sub-anim .wv-ctl{transition:none}}
  .wv-sub:not([data-s="off"]){color:#fff;background:rgba(255,255,255,.14)}
  .wv-sub:not([data-s="off"]):hover{background:rgba(255,255,255,.22)}

  /* 目前這一句：大字、跟著播放走；講者是小標。最多兩行（再長就截斷），高度固定，句子長短不會讓版面跳動；點一下＝從這句開頭重播 */
  body.lv-on.lv-watch .wv-cap{flex:none;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;width:100%;max-width:min(max(var(--wv-w),540px),max(calc(100vw - 504px),480px));height:calc(var(--wv-cap) - var(--wv-capm));margin:var(--wv-capm) auto 0;text-align:center;overflow:hidden;border-radius:10px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .45s ease}   /* 桌機：寬度讓開右下角的主按鈕膠囊 */
  body.lv-on.lv-watch.mode-portrait .wv-cap{max-width:max(var(--wv-wp),540px)}
  body.lv-on.lv-watch .wv-cap:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .wv-spk{min-height:17px;font-size:12.5px;font-weight:700;letter-spacing:.14em;color:rgba(143,176,255,.9)}
  .wv-spk:empty{display:none}
  /* 「點字幕＝從這句重播」的看得見的提示：講者小標旁一顆小的 ↺ 標籤（常駐、淡淡的；滑過／鍵盤走到字幕列時亮起）。以前只有 title 與 hover 變亮，手機完全看不出字幕可以點 */
  .wv-hd{display:flex;align-items:center;justify-content:center;gap:10px;flex:none;max-width:100%;min-width:0}
  .wv-rp{flex:none;display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 9px 0 7px;border-radius:10px;font-size:12px;font-weight:600;letter-spacing:.05em;white-space:nowrap;color:rgba(255,255,255,.62);background:rgba(255,255,255,.08);transition:color .15s,background-color .15s}
  .wv-rp svg{flex:none}
  .wv-cap:hover .wv-rp,.wv-cap:focus-visible .wv-rp{color:#fff;background:rgba(255,255,255,.2)}
  .wv-rp.go{animation:wvrp .6s ease-out}   /* 點下去的回饋：標籤閃一下 */
  .wv-rp.hint{color:#fff;background:rgba(143,176,255,.3);animation:wvrph 1.4s ease-in-out 2}   /* 第一次看到字幕：標籤換成一句說明、加亮（JS 的 wvHint，6 秒後恢復，rv_cap_hint 記著不再出現） */
  @keyframes wvrp{0%{background:rgba(255,255,255,.55);color:#0b0c10;transform:scale(1.08)}100%{transform:none}}
  @keyframes wvrph{0%,100%{box-shadow:0 0 0 0 rgba(143,176,255,0)}50%{box-shadow:0 0 0 5px rgba(143,176,255,.22)}}
  .wv-txt{font-size:clamp(20px,2.2vw,30px);font-weight:500;line-height:1.42;letter-spacing:.015em;color:#f3f4f8;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;transition:color .15s}
  .wv-cap:hover .wv-txt{color:#fff}
  .wv-txt.in{animation:wvin .42s cubic-bezier(.2,.8,.2,1) both}
  body.lv-on.lv-watch .wv-cap.off{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}   /* 淡出完才真的隱藏：看不見的字幕列不會被 Tab 走到、也不會被讀屏念出來 */
  @media (min-width:1001px) and (max-height:900px){   /* 大字幕列高度到 900 才長到 128（上面的 clamp），講者小標才有位置放在字上面；之前一直是同一行 */
    body.lv-on.lv-watch .wv-cap{flex-direction:row;align-items:flex-start;justify-content:center;gap:14px}
    .wv-spk{flex:none;min-height:0;line-height:34px}
    .wv-txt{font-size:clamp(18px,1.9vw,24px)}
    .wv-hd{display:contents}   /* 同一行：講者在左、字在中、重播小標在右（只剩 ↺ 圖示，字太長會擠到句子；第一次的說明才展開成文字） */
    .wv-rp{order:3;margin-top:7px;padding:0 6px}
    .wv-rp b{display:none}
    .wv-rp.hint b{display:inline}
  }
  @keyframes wvin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

  /* 唯一的主要按鈕 */
  body.lv-on.lv-watch .wv-cta{justify-content:center;width:100%;margin:22px auto 0;transition:opacity .6s ease}
  @media (min-width:1001px){   /* 桌機：右下角浮動膠囊，不佔版面、不蓋影片與控制列（大字幕寬度、影片組底部都讓開它） */
    body.lv-on.lv-watch .wv-cta{position:fixed;right:max(28px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));z-index:40;width:auto;margin:0}
    body.lv-on.lv-watch .wv-go{height:52px;padding:0 26px 0 28px;border-radius:26px;font-size:15.5px;gap:10px}
  }
  .wv-go{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 32px 0 34px;border-radius:28px;background:#eceef4;color:#0b0c10;font-size:16.5px;font-weight:700;letter-spacing:.06em;white-space:nowrap;
    box-shadow:0 14px 36px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.55);transition:transform .22s cubic-bezier(.2,.9,.3,1.25),box-shadow .22s,background-color .15s}
  .wv-go svg{flex:none;transition:transform .22s cubic-bezier(.2,.9,.3,1.25)}
  .wv-go:hover{background:#fff;transform:translateY(-2px);box-shadow:0 20px 44px rgba(0,0,0,.55),0 0 0 6px rgba(255,255,255,.07),inset 0 0 0 1px #fff}
  .wv-go:hover svg{transform:translateX(3px)}
  .wv-go:active{transform:translateY(0) scale(.985)}

  /* 閒置（桌機、播放中、滑鼠不動）：頂列、按鈕淡出，只剩影片、進度線與字幕 */
  body.wv-idle .topbar:not(:focus-within),body.wv-idle .wv-cta:not(:focus-within){opacity:0;pointer-events:none}
  body.wv-idle .wv-ctl .wv-play:not(:focus-visible),body.wv-idle .wv-ctl .wv-ico:not(:focus-visible){opacity:0;pointer-events:none}

  /* 進場：從專案首頁／其他等級切進來時，控制列、字幕、按鈕依序淡入 */
  body.lv-on.lv-watch.wv-enter .wv-ctl,body.lv-on.lv-watch.wv-enter .wv-cap,body.lv-on.lv-watch.wv-enter .wv-cta{animation:wvin .6s cubic-bezier(.2,.8,.2,1) both}
  body.lv-on.lv-watch.wv-enter .wv-cap{animation-delay:.06s}
  body.lv-on.lv-watch.wv-enter .wv-cta{animation-delay:.12s}
  body.lv-on.lv-watch.wv-enter .player-wrap{animation:wvpop .55s cubic-bezier(.2,.8,.2,1) both}
  @keyframes wvpop{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

  /* ---- 看片：平板／手機（影片滿寬在最上面，大字幕在下面，主按鈕固定在底部） ---- */
  @media (max-width:1000px){
    body.lv-on.lv-watch{--wv-top:52px;--wv-pad:0px;--wv-ctl:58px;--wv-cap:96px;--wv-capm:14px;--wv-cta:92px;--wv-bot:0px;
      --wv-avail:max(210px,min(var(--wv-amax),calc(100vh - var(--wv-top) - var(--wv-ctl) - var(--wv-capx) - var(--wv-cta))));   /* 再矮也留 210px 給影片（直立但很矮的手機：整頁自己捲；橫放的矮視窗另有版面，見下面） */
      --wv-w:100vw;--wv-wp:calc(var(--wv-avail) * 9 / 16)}
    @supports (height:100dvh){body.lv-on.lv-watch{--wv-avail:max(210px,min(var(--wv-amax),calc(100dvh - var(--wv-top) - var(--wv-ctl) - var(--wv-capx) - var(--wv-cta))))}}
    body.lv-on.lv-watch.wv-auto-over{--wv-amax:446px}   /* 446＝760 高、≥481 寬時大字幕列開著的影片高（760−52−58−112−92），理由同桌機的 518 */
    body.lv-on.lv-watch .topbar{position:static;height:var(--wv-top);padding:0 8px 0 6px;gap:8px;background:#06070a;opacity:1!important;pointer-events:auto!important}
    body.lv-on.lv-watch .stage{height:calc(100vh - var(--wv-top));height:calc(100dvh - var(--wv-top))}
    body.lv-on.lv-watch .stage .video-col{justify-content:flex-start;padding:0 0 calc(var(--wv-cta) + env(safe-area-inset-bottom));overflow-y:auto}
    body.lv-on.lv-watch .stage .player-wrap{max-width:min(100%,calc(var(--wv-avail) * 16 / 9));border-radius:0;box-shadow:none}
    body.lv-on.lv-watch.mode-portrait .stage .player-wrap{max-width:max(var(--wv-wp),180px);margin-top:4px}
    body.lv-on.lv-watch .wv-ctl{max-width:none;padding:0 12px;margin-top:6px}
    body.lv-on.lv-watch.mode-portrait .wv-ctl{max-width:none}
    body.lv-on.lv-watch .wv-cap{max-width:none;padding:0 22px}
    body.lv-on.lv-watch.mode-portrait .wv-cap{max-width:none}
    .wv-txt{font-size:clamp(17px,4.6vw,24px)}   /* 兩行字＋講者小標剛好放進 --wv-cap；更長的句子在第二行截斷 */
    @media (min-width:481px){body.lv-on.lv-watch{--wv-cap:112px}}   /* 重播小標讓講者那一行高了 3px：481～519 寬字級到 22px，兩行字放不進 96 */
    @media (min-width:600px) and (orientation:portrait){body.lv-on.lv-watch .stage .video-col{justify-content:safe center}}   /* 平板直立：影片、控制列、字幕整組置中，不要全擠在上半部 */
    /* 手機直立（寬 <600、高 ≥640、橫式影片）：以前影片貼在頂端、字幕只有 17px，字幕與底部主按鈕之間空著約 280px。現在字幕放大到 23～32px、最多三行（≥860 高四行），
       字幕列高度＝字級×行數（--wv-cap 跟著算，高度固定，句子長短不會讓版面跳動）；影片＋控制列＋字幕整組在頂列與底部主按鈕之間垂直置中。更矮的手機維持原本兩行小字（放不下） */
    @media (max-width:599px) and (orientation:portrait) and (min-height:640px){
      body.lv-on.lv-watch:not(.mode-portrait){--wv-fs:clamp(23px,6.6vw,32px);--wv-ln:3;--wv-capm:18px;--wv-cap:calc(var(--wv-capm) + 26px + var(--wv-fs) * 1.42 * var(--wv-ln))}
      body.lv-on.lv-watch:not(.mode-portrait) .stage .video-col{justify-content:safe center}
      body.lv-on.lv-watch:not(.mode-portrait) .wv-txt{font-size:var(--wv-fs);-webkit-line-clamp:var(--wv-ln);line-clamp:var(--wv-ln)}
      body.lv-on.lv-watch:not(.mode-portrait) .wv-spk{font-size:13px}
      /* 主按鈕不再釘在螢幕最底：跟在字幕下面（整組一起置中），距離拉近、不留一大片空黑；放不下的矮手機（<640）才維持釘在底部 */
      body.lv-on.lv-watch:not(.mode-portrait){--wv-cta:0px}
      body.lv-on.lv-watch:not(.mode-portrait) .wv-cta{position:static;width:100%;margin:24px 0 0;padding:0 16px;background:none}
    }
    @media (max-width:599px) and (orientation:portrait) and (min-height:860px){body.lv-on.lv-watch:not(.mode-portrait){--wv-ln:4}}
    body.lv-on.lv-watch .wv-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;width:auto;margin:0;padding:14px 16px calc(14px + env(safe-area-inset-bottom));
      background:linear-gradient(to top,#06070a 58%,rgba(6,7,10,0));pointer-events:none}   /* 容器本身不吃點擊（漸層那一帶底下的控制列、進度條照樣點得到），只有按鈕可點 */
    body.lv-on.lv-watch .wv-go{width:100%;max-width:440px;justify-content:center;height:54px;pointer-events:auto}
    body.lv-on.lv-watch .toast{bottom:calc(var(--wv-cta) + 8px)}
    .wv-title b{font-size:14.5px}
    body.lv-on.lv-watch .wv-big{width:68px;height:68px;margin:-34px 0 0 -34px}
  }
  @media (max-width:640px){
    body.lv-on .topbar .logo{display:none}   /* 手機看項目時，頂列要留給「← 專案」「文字／審片」「介面」 */
    .wv-ico{min-width:40px;padding:0 9px}
    .wv-t{min-width:36px;font-size:12.5px}
    body.lv-on.lv-watch .wv-ctl{gap:2px;padding:0 6px}
    body.lv-on.lv-watch #backHomeBtn{padding:9px 12px 9px 8px}
    body.lv-on.lv-watch:not(.role-client) #shareBtn{font-size:0;padding:0;width:44px;min-width:44px;height:44px;display:inline-grid;place-items:center}   /* 製作端的「分享給客戶」縮成圖示，標題才有地方放（無障礙名稱仍是原本的文字） */
    body.lv-on.lv-watch:not(.role-client) #shareBtn::before{content:"🔗";font-size:17px;line-height:1}
    body:not(.lv-watch) .lv-btn .lv-k{display:none}
    /* 手機：「← 專案」只留兩個字（專案名在標題列／逐字稿標題已經有），頂列才排得進一行 */
    body.lv-on #backHomeName{display:none}
    body.lv-on #backHomeBtn::after{content:"專案"}   /* 手機標準／完整：頂列很擠，只留目前等級；看片的頂列很空，留著「介面」兩個字 */
  }
  /* 手機直立（≤480px）：進度條自己一整列（以前只剩 99px，每個像素＝10 秒）；下面一列才是 播放／時間／CC／逐句／全螢幕，每顆 ≥44px，不超出畫面 */
  @media (max-width:480px){
    body.lv-on.lv-watch{--wv-ctl:98px}
    body.lv-on.lv-watch .wv-ctl{flex-wrap:wrap;align-content:flex-start;height:auto;gap:0 3px;padding:0 6px;margin-top:4px;box-sizing:border-box}
    body.lv-on.lv-watch .wv-ctl .wv-seek{order:-1;flex:0 0 100%;width:100%;height:44px;margin:0}
    body.lv-on.lv-watch .wv-ctl .wv-play{margin-left:0}
    .wv-ctl .wv-t{min-width:0;font-size:13px}
    .wv-ctl #wvCur{padding:0 2px 0 6px}
    .wv-ctl #wvDur{margin-right:auto;padding:0 6px 0 2px}
    .wv-ctl #wvDur::before{content:"/\00a0";opacity:.55}
    .wv-ctl .wv-ico{height:44px;min-height:44px;min-width:44px;padding:0 10px}
    .wv-ctl .wv-fs,.wv-ctl .wv-back{width:44px;padding:0}
  }
  @media (max-width:350px){   /* 320 寬：字幕鈕改成上圖示、下一行 11px 短字（以前只剩圖示，要猜它做什麼），第二列仍排得下（播放、倒轉、時間之後還剩約 78px） */
    .wv-sub .wv-sub-t{display:none}.wv-sub .wv-sub-s{display:inline;font-size:11px;font-weight:600;letter-spacing:.02em}
    .wv-ctl .wv-ico.wv-sub:not([hidden]){flex-direction:column;gap:1px;width:auto;min-width:58px;padding:2px 5px}
    .wv-ctl .wv-sub svg{width:18px;height:18px}}
  /* 橫放的手機／矮小視窗（寬 ≤1000、高 ≤640、橫向）：以前主按鈕固定在底部蓋住控制列，影片只有 373 寬。改成左邊影片、右邊留給主按鈕，
     控制列在下面橫跨整個寬度（進度條夠長）；字幕只有「影片上」一種（JS 的 wvSubEff 在這種視窗把「大字幕」換成影片上），所以右欄不放大字幕 */
  @media (max-width:1000px) and (max-height:640px) and (orientation:landscape){
    body.lv-on.lv-watch{--wv-top:48px;--wv-ctl:52px;--wv-cta:0px;--wv-capx:0px;
      --wv-avail:calc(100vh - var(--wv-top) - var(--wv-ctl));
      --wv-vw:min(calc(min(var(--wv-avail),var(--wv-amax)) * 16 / 9),calc(100vw - 200px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));
      --wv-wp:calc(var(--wv-avail) * 9 / 16)}
    body.lv-on.lv-watch.wv-auto-over{--wv-amax:439px}   /* 439＝641 高時直欄版面的影片高（641−52−58−92，字幕在影片上、沒有字幕列），640／641 這一格影片大小不變 */
    @supports (height:100dvh){body.lv-on.lv-watch{--wv-avail:calc(100dvh - var(--wv-top) - var(--wv-ctl))}}
    body.lv-on.lv-watch.mode-portrait{--wv-vw:min(max(var(--wv-wp),320px),calc(100vw - 200px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)))}
    body.lv-on.lv-watch .stage .video-col{display:grid;grid-template-columns:var(--wv-vw) minmax(0,1fr);grid-template-rows:var(--wv-avail) var(--wv-ctl);
      align-content:start;justify-content:start;align-items:stretch;gap:0;padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left);overflow-x:hidden;overflow-y:auto}
    body.lv-on.lv-watch .stage .player-wrap{grid-column:1;grid-row:1;align-self:center;justify-self:center;width:100%;max-width:100%;margin:0}
    body.lv-on.lv-watch.mode-portrait .stage .player-wrap{width:auto;height:100%;max-width:100%;margin:0}
    body.lv-on.lv-watch .wv-ctl{grid-column:1 / -1;grid-row:2;align-self:center;width:auto;max-width:none;height:var(--wv-ctl);margin:0;padding:0 8px;box-sizing:border-box;flex-wrap:nowrap;align-content:center;gap:2px}
    body.lv-on.lv-watch .wv-ctl .wv-seek{order:0;flex:1 1 auto;width:auto;margin:0 6px}
    body.lv-on.lv-watch .wv-cap{display:none}
    body.lv-on.lv-watch .wv-cta{position:static;grid-column:2;grid-row:1;align-self:center;justify-self:stretch;width:auto;margin:0;padding:0 14px;background:none;z-index:auto}
    body.lv-on.lv-watch .wv-go{width:100%;max-width:232px;height:46px;padding:0 14px;gap:8px;font-size:14.5px;letter-spacing:.03em}
    body.lv-on.lv-watch .toast{bottom:10px}
  }
  @media (pointer:coarse){
    .wv-ico{min-height:44px;min-width:44px}
    .wv-knob{transform:scale(1)}
    body.lv-on.lv-watch #backHomeBtn,body.lv-on.lv-watch #shareBtn{min-height:44px}
  }

  /* ---- 看片：專案首頁（SPEC §14.5）——只是「挑一支來看」的片單：深色底、成片排第一；不放製作用的數字、徽章、搜尋與分組切換 ---- */
  body.lv-watch.show-home{background:radial-gradient(1200px 700px at 50% -8%,#14161e 0%,#090a0e 60%,#050608 100%) fixed,#06070a}
  body.lv-watch.show-home .topbar{background:transparent;border-bottom-color:rgba(255,255,255,.06)}
  body.lv-watch.role-client.show-home .topbar .right-tools>*,body.lv-watch.role-client.show-home .ih-tools,body.lv-watch.role-client.show-home .ih-badges{display:none!important}   /* 只對客戶收起；製作端選看片時首頁照樣有分享、新增、搜尋 */
  body.lv-watch.show-home .ih-top{margin-bottom:22px}
  body.lv-watch.show-home .ih-title h1{font-size:28px;line-height:1.3;letter-spacing:.01em}
  body.lv-watch.show-home .ih-sum{font-size:15px;color:rgba(255,255,255,.58);margin-top:6px}
  /* 看片首頁不分頁籤：「完整影片」「訪談原片」兩段一起列出（客戶不懂「成片／素材」，也不會去點第二個頁籤才發現訪談原片） */
  .ih-sech{display:none}
  body.lv-watch.show-home .ih-sech:not([hidden]){display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;margin:22px 0 12px;font-size:19px;line-height:1.4;font-weight:700;letter-spacing:.04em;color:#fff}
  body.lv-watch.show-home .ih-sech b{font:500 13px/1 var(--mono);letter-spacing:0;color:rgba(255,255,255,.5)}
  body.lv-watch.show-home .ih-sech small{flex:1 1 100%;font-size:13.5px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.55)}
  body.lv-watch.role-client.show-home .ih-tabs{display:none}
  body.lv-watch.show-home .ih-tabs{border-bottom-color:rgba(255,255,255,.1)}
  body.lv-watch.show-home .ih-tabs button.on{border-bottom-color:#fff}
  body.lv-watch.show-home .ih-grp,body.lv-watch.show-home .ih-card{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.09)}
  body.lv-watch.show-home .ih-gh:hover,body.lv-watch.show-home .ih-row:hover{background:rgba(255,255,255,.05)}
  body.lv-watch.show-home .ih-card:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06)}
  body.lv-watch.show-home .ih-row{min-height:64px;padding-right:14px;gap:14px}
  body.lv-watch.show-home .ih-name{font-size:17px}
  body.lv-watch.show-home .ih-meta{font-size:13.5px}
  body.lv-watch.show-home .ih-open:focus-visible::after{outline-color:#fff;background:rgba(255,255,255,.07)}
  body.lv-watch.show-home .ih-gh:focus-visible,body.lv-watch.show-home .ih-tabs button:focus-visible{outline-color:#fff}
  /* 每一列／每張卡右邊一顆小播放鍵：不用解釋，點下去就是看 */
  body.lv-watch.show-home .ih-row::after,body.lv-watch.show-home .ih-card::after{content:"";flex:none;width:36px;height:36px;border-radius:50%;pointer-events:none;
    background:rgba(255,255,255,.09) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.2v11.6a.6.6 0 00.9.5l9.4-5.8a.6.6 0 000-1L9.9 5.7a.6.6 0 00-.9.5z' fill='%23fff'/%3E%3C/svg%3E") 55% 50%/16px no-repeat;
    transition:background-color .15s}
  body.lv-watch.show-home .ih-card{padding-right:60px}
  body.lv-watch.show-home .ih-card::after{position:absolute;right:14px;top:14px}
  body.lv-watch.show-home .ih-row:hover::after,body.lv-watch.show-home .ih-card:hover::after{background-color:rgba(255,255,255,.2)}
  @media (max-width:640px){body.lv-watch.show-home .ih-title h1{font-size:23px}body.lv-watch.show-home .ih-row{padding:10px 14px}body.lv-watch.show-home .ih-row .ih-rt{padding-right:0}}

  /* 分享視窗：三條審片連結＋挑片連結，各附一句適合誰 */
  .sh-modal{width:560px;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow-y:auto}
  .sh-list{display:flex;flex-direction:column;gap:2px;margin:6px 0 4px}
  .sh-row{padding:12px 0;border-top:1px solid var(--line)}
  .sh-row:first-child{border-top:0}
  .sh-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:7px}
  .sh-top b{font-size:15px}
  .sh-top em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;padding:1px 8px;border-radius:9px;color:var(--accent);background:rgba(91,140,255,.14);box-shadow:inset 0 0 0 1px rgba(91,140,255,.4)}
  .sh-top span{font-size:13px;color:var(--txt-faint);flex-basis:100%}
  .sh-in{display:flex;gap:8px}
  .sh-in input{flex:1;min-width:0;width:auto;padding:10px 12px;font-size:13.5px;font-family:var(--mono);text-overflow:ellipsis}
  .sh-in .icon-btn{flex:none;min-width:76px;min-height:44px;font-weight:700;transition:background-color .15s,color .15s,border-color .15s}
  .sh-in .icon-btn.done{background:rgba(62,207,142,.16);border-color:var(--good);color:var(--good)}
  .sh-modal .sh-item{display:flex;align-items:flex-start;gap:12px;margin:10px 0 4px;padding:12px 14px;border-radius:10px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;font-size:14px;line-height:1.5;color:var(--txt)}
  .sh-modal .sh-item[hidden]{display:none}
  .sh-modal .sh-item input{flex:none;width:20px;height:20px;margin:1px 0 0;padding:0;accent-color:var(--accent-fill)}
  .sh-modal .sh-item b{font-weight:700}
  .sh-modal .sh-item em{display:block;font-style:normal;font-size:12.5px;color:var(--txt-faint)}
  .sh-note{font-size:12.5px;color:var(--txt-faint);line-height:1.7;margin-top:6px}
  .sh-modal .modal-actions{position:sticky;bottom:0;margin:12px -26px -26px;padding:14px 26px 22px;background:linear-gradient(to top,var(--panel) 72%,rgba(22,24,31,0))}   /* 內容比視窗高時，「關閉」永遠看得到 */
  @media (max-width:520px){.sh-modal{padding:20px 16px;max-width:96vw}.sh-top span{font-size:12.5px}
    .sh-modal .modal-actions{margin:12px -16px -20px;padding:14px 16px calc(16px + env(safe-area-inset-bottom))}}

  @media (prefers-reduced-motion:reduce){
    .lv-thumb,.lv-menu,.lv-btn svg,.lv-seg button,.wv-big,.wv-rail,.wv-knob,.wv-tip,.wv-go,.wv-go svg,.wv-ico,.wv-play,.wv-cap,.wv-ctl,.wv-cta,body.lv-on.lv-watch .topbar{transition:none!important}
    .wv-rp.go,.wv-rp.hint{animation:none!important}
    .wv-txt.in,body.lv-on.lv-watch.wv-enter .wv-ctl,body.lv-on.lv-watch.wv-enter .wv-cap,body.lv-on.lv-watch.wv-enter .wv-cta,body.lv-on.lv-watch.wv-enter .player-wrap{animation:none!important}
  }