/* 挑片模式（客戶愛心挑高光）＋電腦版工作台＋挑片時間軸 */
  /* ==================== 挑片模式（客戶端：愛心挑高光） ==================== */
  body.mode-like{background:#0a0a0b;overflow:hidden}
  body.mode-like .topbar,body.mode-like .vstrip,body.mode-like .right-col,
  body.mode-like .controlbar,body.mode-like .vnote,body.mode-like .tl-head,
  body.mode-like #quickToggle,body.mode-like .repick{display:none!important}
  /* 改用 flex：grid 的 right area 在單欄版面下會長出隱式行，把高度對半吃掉 */
  body.mode-like .stage{display:flex!important;flex-direction:column;
    height:100vh;height:100dvh;padding-top:64px;padding-bottom:236px}
  body.mode-like .video-col{flex:1 1 auto;min-height:0;padding:0;gap:0;justify-content:center;overflow:hidden}
  body.mode-like .player-wrap{border-radius:0;max-height:none;max-width:none;width:100%;
    aspect-ratio:auto!important;flex:1 1 auto;height:auto;min-height:0;padding-bottom:0!important;background:#000}
  body.mode-like .player-wrap #vidEl{position:absolute;inset:0;object-fit:contain}
  body.mode-like .scrubber-box{display:none}
  body.mode-like .timeline{height:14px}
  body.mode-like .tl-track{top:6px;height:2px;background:rgba(255,255,255,.1)}
  body.mode-like .tl-progress{top:6px;height:2px;background:rgba(255,255,255,.55)}
  body.mode-like .tl-playhead{width:9px;height:9px;top:2.5px;margin-left:-4.5px;border-radius:50%;background:#fff;border:0;box-shadow:none}
  body.mode-like .tl-marker{display:none}

  #likeTop{position:fixed;top:0;left:0;right:0;z-index:24;display:none;align-items:center;
    justify-content:space-between;padding:14px 18px;padding-top:calc(14px + env(safe-area-inset-top));
    font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",sans-serif;font-weight:300;
    background:linear-gradient(#0a0a0bee,#0a0a0b00)}
  body.mode-like #likeTop{display:flex}
  #likeWho{display:none;font-size:14px;color:rgba(255,255,255,.72);background:none;border:0;cursor:pointer;
    font-family:inherit;font-weight:400;padding:6px 4px;white-space:nowrap;
    border-bottom:1px dashed rgba(255,255,255,.2);margin-left:12px}
  #likeWho:hover{color:rgba(255,255,255,.7)}
  #likeWho:focus-visible{outline:2px solid #fff;outline-offset:2px}
  @media (pointer:coarse){#likeWho{min-height:44px;padding:6px 8px}}   /* 觸控點擊區 ≥44（量到 98×33） */
  body.mode-like.role-client #likeWho{margin-right:auto}
  body.mode-like.role-client #likeWho{display:block}
  #likeTop{gap:10px}
  #likeTitle{font-size:15px;color:rgba(255,255,255,.5);letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52%}
  #likeTopR{display:flex;align-items:center;gap:14px;flex:0 0 auto}
  #likeCount{font-size:17px;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums;background:none;
    border:1px solid rgba(255,255,255,.16);border-radius:4px;padding:11px 20px;cursor:pointer;font-family:inherit;font-weight:300}
  #likeCount:hover{border-color:rgba(255,255,255,.4);color:#fff}
  #likeCount b{color:#ff6b81;font-weight:400}
  #likeDone{font-size:17px;color:rgba(255,255,255,.5);background:none;border:1px solid rgba(255,255,255,.16);cursor:pointer;
    border-radius:4px;padding:11px 26px;transition:.3s;font-family:inherit;font-weight:400;letter-spacing:.08em}
  #likeDone.on{color:#fff;border-color:#ff6b81;background:rgba(255,107,129,.18)}
  #likeDone.on:hover{background:rgba(255,107,129,.3)}
  #likeDone:disabled{opacity:.5;cursor:default}

  /* 章節（素材名稱斷點） */
  #chapBar{position:fixed;left:0;right:0;bottom:190px;z-index:22;display:none;gap:7px;
    overflow-x:auto;padding:0 18px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #chapBar::-webkit-scrollbar{display:none}
  body.mode-like #chapBar{display:flex}
  body.mode-like.like-desk #chapBar{bottom:224px}
  .chip-ch{flex:0 0 auto;font-size:14px;letter-spacing:.03em;color:rgba(255,255,255,.5);
    border:1px solid rgba(255,255,255,.15);border-radius:3px;padding:8px 15px;background:none;
    cursor:pointer;font-family:inherit;font-weight:300;transition:.25s;white-space:nowrap}
  .chip-ch:hover{border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.8)}
  .chip-ch.now{color:#fff;border-color:rgba(255,107,129,.6);background:rgba(255,107,129,.1)}
  body.mode-like .tl-chap{display:block;position:absolute;top:1px;width:1px;height:12px;background:rgba(255,255,255,.4);pointer-events:none}
  .tl-chap{display:none}
  body.mode-like .tl-seg{display:block;position:absolute;top:4.5px;height:5px;background:#ff6b81;border-radius:3px;pointer-events:none;box-shadow:0 0 0 1px rgba(10,10,11,.6)}
  .tl-seg{display:none}

  /* 愛心 dock */
  #likeDock{position:fixed;left:0;right:0;bottom:0;z-index:24;display:none;flex-direction:column;
    align-items:center;gap:10px;padding:16px 0 calc(22px + env(safe-area-inset-bottom));
    background:linear-gradient(#0a0a0b00,#0a0a0bdd 32%);
    font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",sans-serif;font-weight:300}
  body.mode-like #likeDock{display:flex}
  #likeBtn{width:70px;height:70px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(255,255,255,.14);background:none;cursor:pointer;touch-action:none;
    transition:transform .18s cubic-bezier(.3,1.4,.5,1),border-color .25s,background .25s}
  #likeBtn svg{width:30px;height:30px}
  #likeBtn path{fill:none;stroke:rgba(255,255,255,.8);stroke-width:1.4}
  #likeBtn.hold{transform:scale(1.09);border-color:rgba(255,107,129,.42);background:rgba(255,107,129,.07)}
  #likeBtn.hold path{fill:#ff6b81;stroke:#ff6b81}
  #likeBtn.pop{transform:scale(.9)}
  #likeHold{width:70px;height:1px;background:rgba(255,255,255,.1);border-radius:1px;overflow:hidden;opacity:0;transition:opacity .2s}
  #likeHold.on{opacity:1}
  #likeHoldFill{height:100%;width:0;background:#ff6b81}
  #likeHint{font-size:14px;font-weight:400;color:rgba(255,255,255,.72);letter-spacing:.05em;height:19px;text-align:center;line-height:1.4}
  #likeBurst{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%);z-index:23;pointer-events:none;opacity:0;
    text-align:center;font-family:-apple-system,"PingFang TC",sans-serif}
  #likeBurst.go{animation:lkburst .75s cubic-bezier(.2,.9,.3,1)}
  #likeBurst .lb{font-size:15px;color:#fff;letter-spacing:.18em;margin-top:4px;font-weight:300}
  @keyframes lkburst{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
    22%{opacity:.95;transform:translate(-50%,-50%) scale(1.12)}
    100%{opacity:0;transform:translate(-50%,-56%) scale(1)}}

  /* 我的片段清單 */
  /* 看不見的時候一定要 visibility:hidden（淡出結束才生效）：opacity:0 的面板裡的「關閉」鈕仍會被 Tab 抓到，鍵盤使用者第一個停靠點就是它 */
  #likeList{position:fixed;inset:0;z-index:60;background:rgba(10,10,11,.97);backdrop-filter:blur(20px);
    display:flex;flex-direction:column;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .3s,visibility 0s linear .3s;
    font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",sans-serif;font-weight:300}
  #likeList.on{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .3s,visibility 0s}
  @media (prefers-reduced-motion:reduce){#likeList,#likeList.on{transition:none}}
  #likeListHead{display:flex;align-items:center;justify-content:space-between;
    padding:calc(20px + env(safe-area-inset-top)) 22px 14px;flex:0 0 auto;
    max-width:820px;width:100%;margin:0 auto}
  #likeListHead span{font-size:16px;color:rgba(255,255,255,.55);letter-spacing:.08em}
  #likeListHead button{font-size:15px;color:rgba(255,255,255,.55);background:none;border:1px solid rgba(255,255,255,.16);
    border-radius:3px;padding:8px 18px;cursor:pointer;font-family:inherit;font-weight:300}
  #likeListBody{flex:1;overflow-y:auto;padding:0 22px calc(30px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling:touch;max-width:820px;width:100%;margin:0 auto}
  .lk-row{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.07)}
  .lk-name{flex:0 0 auto;width:104px;font-size:19px;color:#ff6b81;letter-spacing:.05em;
    background:none;border:0;border-bottom:1px dashed rgba(255,107,129,.35);cursor:text;
    font-family:inherit;font-weight:300;padding:4px 0;outline:none}
  .lk-name:focus{border-bottom-color:#ff6b81;color:#fff}
  .lk-tc{font-size:17px;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums;letter-spacing:.03em;flex:0 0 auto}
  .lk-ch{font-size:15px;color:rgba(255,255,255,.62);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lk-row button.lk-go,.lk-row button.lk-del{font-size:15px;background:none;border:1px solid rgba(255,255,255,.13);
    border-radius:3px;cursor:pointer;padding:8px 14px;font-family:inherit;font-weight:300;flex:0 0 auto}
  .lk-row button.lk-go:hover{border-color:rgba(255,255,255,.4)}
  .lk-row button.lk-del:hover{border-color:#ff6b81;color:#ff6b81}
  .lk-go{color:rgba(255,255,255,.62)}
  .lk-del{color:rgba(255,107,129,.8)}
  .lk-row button:focus-visible,.lk-name:focus-visible,#likeListHead button:focus-visible{outline:2px solid #fff;outline-offset:2px}
  @media (max-width:640px){   /* 手機：一列放不下「名稱＋起訖＋三顆鈕」，播放與刪除被擠出畫面右側（要橫向捲才按得到）→ 名稱＋起訖同一行、備註自成一行、三顆鈕均分最後一行 */
    .lk-row{flex-wrap:wrap;gap:8px 12px;padding:14px 0}
    .lk-name{flex:1 1 120px;min-width:0;width:auto}
    .lk-ch{flex:1 0 100%;order:3}
    .lk-ch:empty{display:none}
    .lk-row button.lk-go,.lk-row button.lk-del{flex:1 1 72px;min-width:72px;order:4}   /* 120＋起訖＋三顆鈕 72 放不下一行 → 三顆鈕自然掉到下一行、均分寬度 */
  }
  @media (pointer:coarse){   /* 觸控：每顆鈕與名稱欄高度 ≥44 */
    .lk-row button.lk-go,.lk-row button.lk-del,#likeListHead button{min-height:44px}
    .lk-name{min-height:44px}
  }
  .lk-empty{color:rgba(255,255,255,.58);font-size:16px;text-align:center;padding:60px 0;line-height:2}

  /* ===== 挑片模式：電腦版工作台（手機維持極簡） ===== */
  body.mode-like.like-desk .stage{padding-bottom:280px}
  /* 左：工具列　中：愛心（1fr auto 1fr 讓它真正置中）　右：提示 */
  body.mode-like.like-desk #likeDock{display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;gap:18px;padding:6px 24px calc(14px + env(safe-area-inset-bottom));height:auto}
  body.mode-like.like-desk #lkTools{justify-self:stretch;min-width:0}
  body.mode-like.like-desk #likeBtn{width:76px;height:76px;justify-self:center;
    border-color:rgba(255,255,255,.22)}
  body.mode-like.like-desk #likeBtn:hover{border-color:rgba(255,107,129,.6);background:rgba(255,107,129,.06)}
  body.mode-like.like-desk #likeBtn svg{width:34px;height:34px}
  body.mode-like.like-desk #likeBtn path{stroke-width:1.3}
  body.mode-like.like-desk #likeHold{display:none}
  body.mode-like.like-desk #likeHint{height:auto;justify-self:end;text-align:right;min-width:0;
    max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.mode-like:not(.like-desk) #lkTools{display:none}

  #lkTools{display:none;align-items:center;gap:7px;flex:1 1 auto;min-width:0;
    overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  #lkTools::-webkit-scrollbar{display:none}
  body.mode-like.like-desk #lkTools{display:flex}
  .lk-btn{font-size:15px;font-weight:300;letter-spacing:.03em;color:rgba(255,255,255,.7);
    background:none;border:1px solid rgba(255,255,255,.16);border-radius:3px;padding:10px 16px;cursor:pointer;
    font-family:-apple-system,"PingFang TC",sans-serif;transition:.2s;white-space:nowrap}
  .lk-btn:hover{border-color:rgba(255,255,255,.4);color:#fff}
  .lk-btn.armed{border-color:rgba(255,107,129,.7);color:#ff6b81;background:rgba(255,107,129,.08)}
  .lk-btn.wide{min-width:92px}
  .lk-sep{width:1px;height:20px;background:rgba(255,255,255,.1);margin:0 5px;flex:0 0 auto}
  .lk-sel{font-size:15px;font-weight:300;color:rgba(255,255,255,.7);background:#15151a;
    border:1px solid rgba(255,255,255,.16);border-radius:3px;padding:10px 8px;cursor:pointer;
    font-family:-apple-system,"PingFang TC",sans-serif;outline:none}
  .lk-kbd{font-size:12px;opacity:.7;margin-left:6px}

  /* 加註輸入條 */
  #lkNote{position:fixed;left:0;right:0;bottom:0;z-index:26;display:none;
    padding:14px 20px calc(14px + env(safe-area-inset-bottom));background:#0f0f12;
    border-top:1px solid rgba(255,255,255,.1);align-items:center;gap:12px}
  #lkNote.on{display:flex}
  #lkNoteLbl{font-size:16px;color:#ff6b81;letter-spacing:.04em;flex:0 0 auto;
    font-family:-apple-system,"PingFang TC",sans-serif;font-weight:300}
  #lkNoteIn{flex:1;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.18);
    color:rgba(255,255,255,.92);font-size:18px;font-weight:300;padding:9px 2px;outline:none;
    font-family:-apple-system,"PingFang TC",sans-serif}
  #lkNoteIn::placeholder{color:rgba(255,255,255,.5)}
  #lkNote .lk-btn{flex:0 0 auto}

  /* ===== 挑片模式專用時間軸（可縮放） ===== */
  #lkBar{position:fixed;left:0;right:0;z-index:22;display:none;padding:0 18px}
  body.mode-like #lkBar{display:block;bottom:152px}
  body.mode-like.like-desk #lkBar{bottom:110px;padding:0 24px}
  #lkTrack{position:relative;height:14px;cursor:pointer;user-select:none;touch-action:none}
  body.mode-like.like-desk #lkTrack{height:76px;background:rgba(255,255,255,.04);border-radius:3px;cursor:ew-resize;
    box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .2s}
  body.mode-like.like-desk #lkTrack.arm{cursor:crosshair;box-shadow:inset 0 0 0 1px rgba(255,107,129,.7);
    background:rgba(255,107,129,.06)}
  #lkTrack .lkt-base{position:absolute;left:0;right:0;top:6px;height:2px;background:rgba(255,255,255,.1);border-radius:2px}
  body.mode-like.like-desk #lkTrack .lkt-base{top:0;bottom:0;height:auto;background:none}
  #lkProg{position:absolute;left:0;top:6px;height:2px;background:rgba(255,255,255,.5);border-radius:2px;pointer-events:none}
  body.mode-like.like-desk #lkProg{top:0;bottom:0;height:auto;background:rgba(255,255,255,.06);border-radius:3px}
  #lkHead{position:absolute;top:1.5px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#fff;pointer-events:none;z-index:4}
  body.mode-like.like-desk #lkHead{top:0;width:2px;height:76px;margin-left:-1px;border-radius:0;box-shadow:0 0 6px rgba(0,0,0,.6)}
  .lkt-seg{position:absolute;top:4.5px;height:5px;background:#ff6b81;border-radius:3px;pointer-events:none;z-index:3;
    box-shadow:0 0 0 1px rgba(10,10,11,.6)}
  body.mode-like.like-desk .lkt-seg{top:30px;height:40px;border-radius:3px;background:rgba(255,107,129,.32);
    border:1px solid #ff6b81;box-shadow:none;overflow:hidden}
  body.mode-like.like-desk .lkt-seg{pointer-events:auto;cursor:grab}
  body.mode-like.like-desk .lkt-seg.moving{cursor:grabbing}
  body.mode-like.like-desk .lkt-seg.sel{background:rgba(255,107,129,.45);border-color:#fff;z-index:6}
  body.mode-like.like-desk .lkt-seg .lkt-lbl{position:absolute;left:5px;top:2px;
    font-size:13px;color:#fff;letter-spacing:.03em;white-space:nowrap;pointer-events:none;
    font-family:-apple-system,"PingFang TC",sans-serif;overflow:hidden;max-width:calc(100% - 10px)}
  body.mode-like.like-desk .lkt-h{position:absolute;top:0;bottom:0;width:9px;cursor:ew-resize;z-index:2}
  body.mode-like.like-desk .lkt-h.l{left:-4px}
  body.mode-like.like-desk .lkt-h.r{right:-4px}
  body.mode-like.like-desk .lkt-seg.sel .lkt-h::after{content:'';position:absolute;top:0;bottom:0;left:3px;
    width:3px;background:#fff;border-radius:2px}
  body.mode-like.like-desk .lkt-x{position:absolute;right:3px;top:3px;width:22px;height:22px;display:none;
    align-items:center;justify-content:center;font-size:14px;line-height:1;color:#fff;
    background:rgba(0,0,0,.5);border-radius:2px;cursor:pointer;z-index:3}
  body.mode-like.like-desk .lkt-seg.sel .lkt-x{display:flex}
  body.mode-like.like-desk .lkt-x:hover{background:#ff6b81}
  .lkt-ch{position:absolute;top:1px;width:1px;height:12px;background:rgba(255,255,255,.4);pointer-events:none;z-index:2}
  body.mode-like.like-desk .lkt-ch{top:0;height:76px;background:rgba(255,255,255,.13)}
  .lkt-chname{display:none}
  body.mode-like.like-desk .lkt-chname{display:block;position:absolute;top:5px;font-size:13px;
    color:rgba(255,255,255,.5);letter-spacing:.02em;white-space:nowrap;pointer-events:none;z-index:2;
    padding-left:5px;font-family:-apple-system,"PingFang TC",sans-serif}
  #lkPend{position:absolute;top:0;bottom:0;background:rgba(255,107,129,.22);border-left:2px solid #ff6b81;
    display:none;pointer-events:none;z-index:3}
  body.mode-like.like-desk #lkPend{display:none}
  #lkDrag{position:absolute;top:0;bottom:0;background:rgba(255,255,255,.14);border-left:1px solid rgba(255,255,255,.6);
    border-right:1px solid rgba(255,255,255,.6);display:none;pointer-events:none;z-index:3}
  #lkScale{display:none;justify-content:space-between;align-items:center;padding:6px 0 0}
  body.mode-like.like-desk #lkScale{display:flex}
  #lkScaleL{font-size:14px;color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums;letter-spacing:.04em;
    font-family:-apple-system,"PingFang TC",sans-serif}
  #lkZoom{display:flex;gap:5px}
  #lkZoom .lk-btn{padding:7px 14px;font-size:14px}

  @media (max-width:760px){ body.mode-like .stage{padding-bottom:246px} }
  .cloud-badge{font-size:12px;font-weight:700;padding:5px 11px;border-radius:14px;background:rgba(62,207,142,.16);
    color:var(--good);border:1px solid rgba(62,207,142,.4);white-space:nowrap}
  .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--panel-2);border:1px solid var(--line);padding:12px 20px;border-radius:10px;
    font-size:15px;opacity:0;transition:all .25s;pointer-events:none;z-index:99;box-shadow:0 8px 24px rgba(0,0,0,.4)}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  /* 可操作的 toast（復原／重做）：整顆可點，按鈕至少 44px 高 */
  .toast.has-act{pointer-events:auto;display:flex;align-items:center;gap:14px;padding:6px 8px 6px 20px;max-width:min(560px,calc(100vw - 24px))}
  /* 看不見的 toast 一律不接事件、不佔位（淡出後 opacity:0 仍留在原處，會蓋住時間軸的選段軌，拖曳／修剪都落空）；
     有時間軸時，toast 在所有寬度都放在 dock 上方，不蓋住剛建立的選段（窄螢幕的位置在下面 dock 區段覆寫） */
  .toast:not(.show){pointer-events:none!important;visibility:hidden}
  body.has-dock .toast{bottom:calc(var(--dock-eff,268px) + 16px)}
  .toast .t-msg{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .toast .t-act{flex:none;min-height:44px;padding:0 16px;border-radius:8px;font-size:15px;font-weight:700;color:var(--accent);background:rgba(91,140,255,.12)}
  .toast .t-act:hover{background:rgba(91,140,255,.22)}
  .toast .t-act:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  @media (prefers-reduced-motion:reduce){.toast{transition:none}}