/* LingoSync — 深色介面（琥珀金品牌色）
   2026-09-04 去掉「AI 生成感」：底色改偏冷的近黑、表面只比底亮一階、
   不用光暈與毛玻璃、圓角縮小、琥珀只給主要按鈕與價格，數字用等寬字。 */
:root {
  --bg: #0f1114;
  --surface: #151a1f;
  --surface-2: #1b2128;
  --ink: #e6e8eb;
  --ink-2: #c3c9d1;
  --muted: #8f9aa6;
  --line: #262d35;
  --line-strong: #3a434e;
  --accent: #e2a343;
  --accent-ink: #14110a;
  --good: #5dbb8a;
  --bad: #d9655c;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Sans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: 15px;
  line-height: 1.7;
}
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }
a { color: var(--accent); text-decoration: none; }
.hidden { display: none !important; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.4rem;
  padding: .7rem 2rem;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.logo { font-size: 1.25rem; font-weight: 700; color: var(--accent); letter-spacing: .05em; cursor: pointer; }
/* 頁首的 LingoSync 是一顆按鈕（鍵盤按得到，第 7 批 #52），長相照舊 */
button.logo { background: none; border: 0; padding: 0; font-family: inherit; line-height: inherit; }
/* 主導覽：首頁｜我的訂閱｜收藏｜處理任務（2026-09 重新定位）。桌機在頂欄，手機移到底部 */
.mainnav { display: flex; align-items: center; gap: .2rem; }
.mainnav button {
  display: inline-flex; align-items: center; gap: .4rem; background: none; border: none;
  color: var(--muted); font-size: .92rem; padding: .45rem .8rem;
  border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0;
}
.mainnav button svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; flex: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.mainnav button:hover { color: var(--ink); background: #ffffff0a; }
.mainnav button.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 500; }
.mainnav button.on svg { color: var(--accent); }
.userbox { color: var(--muted); font-size: .85rem; display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.linklike { background: none; border: none; color: var(--muted); font-size: .85rem; padding: 0; }
.linklike:hover { color: var(--ink); }

/* ---------- buttons ---------- */
.btn {
  border: none; border-radius: 4px; padding: .5rem 1.1rem; font-size: .9rem; font-weight: 500;
  background: var(--accent); color: var(--accent-ink);
}
.btn:hover { filter: brightness(1.1); }
.btn.ghost { background: #ffffff1e; color: var(--ink); }
.btn.ghost:hover { background: #ffffff30; }
.btn.small { padding: .25rem .7rem; font-size: .8rem; }
.btn.danger { background: none; color: var(--bad); border: 1px solid var(--line); }
.btn:disabled { opacity: .5; cursor: default; }

/* ---------- auth ---------- */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.auth-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  padding: 2.2rem 2.4rem; width: 22rem;
}
.auth-card h1 { color: var(--accent); font-size: 1.6rem; margin: 0 0 .2rem; }
.auth-card .sub { color: var(--muted); font-size: .85rem; margin-bottom: 1.4rem; }
.auth-card label { display: block; font-size: .8rem; color: var(--muted); margin: .8rem 0 .25rem; }
.auth-card input {
  width: 100%; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 6px; padding: .5rem .7rem; outline: none;
}
.auth-card input:focus { border-color: var(--accent); }
.auth-card .btn { width: 100%; margin-top: 1.3rem; }
.auth-card .switch { text-align: center; margin-top: 1rem; font-size: .85rem; color: var(--muted); }
.form-error { color: var(--bad); font-size: .82rem; min-height: 1.2rem; margin-top: .6rem; }

/* ---------- hero ---------- */
.hero {
  position: relative; padding: 4.5rem 2.5rem 2.5rem; min-height: 18rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  background-size: cover; background-position: center 25%;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #0d0e1288 0%, #0d0e12cc 60%, var(--bg) 100%),
              linear-gradient(90deg, #0d0e12cc 0%, transparent 55%);
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { font-size: 2.1rem; margin: 0 0 .3rem; max-width: 34rem; line-height: 1.3; }
.hero .meta { color: var(--muted); font-size: .88rem; margin-bottom: 1rem; }
.hero .meta em { color: var(--accent); font-style: normal; }
.hero .btns { display: flex; gap: .7rem; flex-wrap: wrap; }

.linklike.danger { color: var(--bad); }

/* 方案頁最上面的額度條。上限要看得到，不能等撞到才說。 */
.quotabox { background: var(--surface); border: 1px solid var(--line);
  border-radius: 4px; padding: 1.1rem 1.3rem; margin-bottom: 1.4rem; }
.quotabox .qtop { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: .6rem; }
.quotabox .qtop b { color: var(--accent); font-size: 1.05rem; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.quotabox .qbar { background: var(--surface-2); height: 6px; overflow: hidden; }
.quotabox .qbar i { display: block; height: 100%; background: var(--accent); }
.quotabox .qsub { color: var(--muted); font-size: .82rem; margin-top: .5rem; line-height: 1.7; }
.quotabox .qgift { color: var(--good); font-size: .82rem; margin-top: .5rem; }

/* ---------- 公開落地頁 ---------- */
.landing { min-height: 100vh; background: var(--bg); }
.lnav { display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 2rem; max-width: 68rem; margin: 0 auto; }
.lbrand { color: var(--accent); font-weight: 700; font-size: 1.15rem; }
.lnavright { display: flex; align-items: center; gap: 1.2rem; }
.lnavright a { color: var(--muted); text-decoration: none; font-size: .9rem; }
.lnavright a:hover { color: var(--ink); }

.lhero { max-width: 44rem; margin: 0 auto; padding: 5rem 1.5rem 3.5rem; text-align: center; }
.lhero h1 { font-size: clamp(1.6rem, 4.2vw, 2.6rem); line-height: 1.35; margin: 0 0 1rem; }
.lhero .lsub { color: var(--muted); font-size: 1.05rem; line-height: 1.75; margin-bottom: 2.2rem; }
.lcta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.lcta .btn { padding: .7rem 1.6rem; font-size: .98rem; }
.lnote { color: var(--muted); font-size: .82rem; margin-top: 1.2rem; }

/* 落地頁的痛點區：先講處境，再講我們怎麼解。功能卡在後面 */
.lpain { max-width: 62rem; margin: 0 auto; padding: 1rem 1.5rem 2rem; }
.lpain h2 { font-size: 1.15rem; margin: 0 0 1.4rem; text-align: center; }
.lpain-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.1rem; }
.lpain-item { border-left: 2px solid var(--line-strong); padding: .1rem 0 .1rem 1.1rem; }
.lpain-item b { display: block; font-size: .95rem; line-height: 1.5; margin-bottom: .45rem; }
.lpain-item p { color: var(--muted); font-size: .87rem; line-height: 1.75; margin: 0; }
.lpain-item .lfix { color: var(--accent); margin-top: .5rem; }

.lfeat { max-width: 62rem; margin: 0 auto; padding: 2rem 1.5rem 3rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.1rem; }
.lcard { background: var(--surface); border: 1px solid var(--line);
  border-radius: 6px; padding: 1.4rem 1.5rem; }
.lcard .lico { width: 2.1rem; height: 2.1rem; border-radius: 4px; background: var(--surface-2);
  border: 1px solid var(--line-strong); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .95rem; margin-bottom: .9rem; }
.lcard h3 { font-size: 1rem; margin: 0 0 .5rem; }
.lcard p { color: var(--muted); font-size: .88rem; line-height: 1.75; margin: 0; }

.lprivacy { max-width: 46rem; margin: 0 auto; padding: 1rem 1.5rem 3rem; }
.lprivacy h2 { font-size: 1.15rem; margin-bottom: 1rem; }
.lprivacy ul { padding-left: 1.2rem; margin: 0; }
.lprivacy li { color: var(--muted); font-size: .9rem; line-height: 1.8; margin: .5rem 0; }
.lprivacy .ldocs { margin-top: 1.4rem; font-size: .88rem; }
.lprivacy a, .lfoot a { color: var(--accent); }

.lfoot { max-width: 62rem; margin: 0 auto; padding: 2rem 1.5rem 3rem;
  border-top: 1px solid var(--line); display: flex; gap: 1.4rem; align-items: center;
  flex-wrap: wrap; color: var(--muted); font-size: .85rem; }
.lfoot .langslot { margin-left: auto; }

/* ---------- rows ---------- */
.rows { padding: .5rem 2.5rem 4rem; }
.row-title { font-size: 1.05rem; font-weight: 700; margin: 1.6rem 0 .6rem; }
.row-title span { color: var(--muted); font-weight: 400; font-size: .8rem; margin-left: .6rem; }
.row {
  display: flex; gap: .8rem; overflow-x: auto;
  /* 卡片 hover 會放大 4%，而 overflow-x: auto 讓這裡變成捲動容器——
     捲動容器**會裁掉超出範圍的東西**，所以第一張卡（緊貼左緣）一放大
     左側就被切掉，上緣同理。留出放大所需的空間，再用等量負邊界抵銷，
     視覺位置完全不變。底部那 .6rem 是捲軸的位置，本來就有。 */
  padding: .4rem .5rem .6rem;
  margin: -.4rem -.5rem 0;
  scroll-padding-inline: .5rem;    /* 捲到底時最後一張也不要貼邊 */
  cursor: grab;                    /* 提示「這裡可以直接拖」 */
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;  /* 拖到底不要順便把整頁往回帶 */
}
.row.dragging {
  cursor: grabbing; scroll-behavior: auto;   /* 拖的時候要跟手，不能有平滑動畫 */
  user-select: none;
}
.row.dragging img { pointer-events: none; }
.row .card img { -webkit-user-drag: none; user-select: none; }
.row::-webkit-scrollbar { height: 8px; }
.row::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* 卡片兩種形狀、同一個高度（見 app.js 的 posterHtml）：
   直式 2:3、寬 12.5rem → 高 18.75rem；橫式 16:9 同高 → 寬 33.33rem。
   min-width: 0 是關鍵：flex／grid 項目的最小寬度預設是「內容寬」，標題不換行
   就會把整張卡撐到跟標題一樣寬（YouTube 標題動輒 60 字，一張卡就變半個螢幕）。 */
.card { flex: 0 0 12.5rem; min-width: 0; cursor: pointer; }
.card.wide { flex-basis: 33.33rem; }
.card .ct { min-width: 0; }
.card .poster {
  position: relative; aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line);
  transition: transform .15s ease;
}
.card .poster.wide { aspect-ratio: 16 / 9; }
/* 搜尋結果是格線：橫式佔三格、高度鎖成跟直式一樣 */
.grid .card.wide { grid-column: span 3; }
.grid .card.wide .poster { aspect-ratio: auto; height: 18.75rem; }
.card:hover .poster { transform: scale(1.04); border-color: var(--accent); }
/* 搜尋結果的卡片本身不能點（只有裡面的「追蹤」按鈕能）：不給手指游標、不放大 */
.card.static { cursor: default; }
.card.static:hover .poster { transform: none; border-color: var(--line); }
.card .poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .pbar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #ffffff2e; }
.card .pbar i { display: block; height: 100%; background: var(--accent); }
.card .badge {
  position: absolute; top: .45rem; left: .45rem; font-size: .62rem; font-weight: 700;
  background: var(--accent); color: var(--accent-ink); border-radius: 3px; padding: .08rem .4rem;
}
.card .badge.lib { background: var(--good); color: #0d0e12; }
/* 字幕徽章：這部作品已經翻好哪些語言。靠右，不跟左上的「NEW」打架 */
.card .badge.sub {
  left: auto; right: .45rem; background: #000000b0; color: #fff; font-weight: 500;
  border: 1px solid #ffffff40; max-width: 70%; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.card .ct { font-size: .78rem; color: var(--muted); margin-top: .35rem; line-height: 1.5; }
.card .ct b { display: block; color: var(--ink); font-weight: 500; font-size: .82rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .ct em { font-style: normal; color: var(--accent); }
/* 內容身分（頻道／播放清單／單支影片）：左下角，不跟左上的「新」、右上的字幕打架 */
.card .badge.kind {
  top: auto; bottom: .6rem; background: #000000b0; color: #fff; font-weight: 500;
  border: 1px solid #ffffff40;
}
/* 頻道大頭貼疊在橫幅左下角；有大頭貼時「頻道」標籤挪到它右邊。
   選擇器要比上面的 .card .poster img（底圖撐滿整格）更明確，不然大頭貼也被撐滿 */
.card .poster img.cavatar {
  position: absolute; left: .55rem; bottom: .6rem; width: 3rem; height: 3rem;
  border-radius: 50%; object-fit: cover; border: 2px solid #ffffffd9;
  box-shadow: 0 2px 10px #000000a0; background: var(--surface-2);
}
.card .cavatar ~ .badge.kind { left: 4rem; bottom: .95rem; }
.modal .mhead h2 .mavatar {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; object-fit: cover;
  vertical-align: -.45rem; margin-right: .55rem; border: 1px solid #ffffff40;
}
.impbody b .impavatar {
  width: 1.4rem; height: 1.4rem; border-radius: 50%; object-fit: cover;
  vertical-align: -.35rem; margin-right: .4rem;
}
/* 自己取的名字：卡片叫正式名稱，舊名字當副標 */
.card .ct .calias { display: block; font-size: .72rem; opacity: .8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- search results ---------- */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: 1rem; padding: 2rem 2.5rem;
}
.section-head { padding: 1.6rem 2.5rem 0; font-size: 1.2rem; font-weight: 700; }
.empty { color: var(--muted); padding: 3rem 2.5rem; text-align: center; }

/* ---------- modal ---------- */
.modal-mask {
  position: fixed; inset: 0; z-index: 100; background: #000000b3;
  display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 3rem 1rem;
}
.modal {
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  width: min(52rem, 100%);
  /* 不能用 overflow:hidden——那會讓裡面的 sticky 返回列失效。
     改用 clip 的話 sticky 也會壞，所以由 .mhead 自己切圓角。 */
}

/* 置頂返回列。原本的關閉鈕是 absolute 定位在右上角，有兩個問題：
   視窗寬 52rem，那個位置離視線很遠；而且捲到下面時它會跟著內容捲走，
   完全找不到關閉的地方。改成 sticky，永遠在最上面。 */
.modal .mbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: .8rem;
  padding: .55rem .8rem;
  background: #14161bf2; backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  border-radius: 6px 6px 0 0;
}
.modal .mback {
  display: inline-flex; align-items: center; gap: .3rem;
  background: none; border: none; color: var(--ink); font-size: .88rem;
  padding: .25rem .5rem .25rem .3rem; border-radius: 6px;
}
.modal .mback svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.modal .mback:hover { background: #ffffff14; color: var(--accent); }
.modal .mbartitle {
  color: var(--muted); font-size: .82rem; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.modal .mhead {
  position: relative; padding: 2rem 2rem 1.2rem; overflow: hidden;
  background-size: cover; background-position: center 25%;
}
.modal .mhead::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #17191f66, var(--surface) 95%);
}
.modal .mhead > * { position: relative; z-index: 1; }
.modal .mhead h2 { margin: 0; font-size: 1.5rem; }
.modal .mhead .meta { color: var(--muted); font-size: .85rem; }

.modal .mbody { padding: 1.2rem 2rem 2rem; }
/* 點了卡片、資料還沒到：立刻打開視窗講「載入中」（app.js 的 showModalLoading） */
.modal .mloading { color: var(--muted); padding: 2rem 0; text-align: center; }
.modal h3 { font-size: .95rem; margin: 1.4rem 0 .6rem; color: var(--accent); }
.modal .actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.modal select {
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: .35rem .5rem;
}

/* episodes */
.eps { display: flex; flex-wrap: wrap; gap: .45rem; }
.ep {
  min-width: 2.6rem; text-align: center; padding: .3rem .5rem; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
  font-size: .82rem; cursor: pointer; position: relative;
}
.ep:hover { border-color: var(--accent); color: var(--ink); }
.ep.seen { background: #33290f; color: var(--accent); border-color: #4a3a12; }
.ep.current { border-color: var(--accent); color: var(--ink); box-shadow: 0 0 0 1px var(--accent); }
.ep .dot {
  position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--good);
}

/* links */
/* 三欄固定骨架：集數（固定寬）｜標題（自動撐滿、單行截斷）｜動作。
   標題常常是「一口氣看完【劍來】第二季1~27全集完整版，泥瓶巷…」這種超長字串，
   沒有 min-width:0 的話 flex 子項不會縮，整列就被推爆。 */
.linkrow {
  display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto auto;
  align-items: center; gap: .7rem; padding: .5rem .75rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  margin-bottom: .45rem; font-size: .85rem;
}
.linkrow.dead { opacity: .55; }
.linkrow .lep {
  font-size: .74rem; color: var(--muted); white-space: nowrap;
  background: #ffffff0d; border-radius: 999px; padding: .12rem .5rem; text-align: center;
}
.linkrow .lmain { min-width: 0; }
.linkrow .lmain .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linkrow .lmain .d { color: var(--muted); font-size: .73rem; }

/* 「⋯」選單：回報與刪除不是每次都要用的，收起來讓每一列乾淨 */
.lmore { position: relative; }
.lmore .mtrigger { padding: .25rem .55rem; letter-spacing: .1em; }
.lmenu {
  position: absolute; right: 0; top: 110%; z-index: 20; min-width: 8.5rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 22px #000000aa; overflow: hidden;
}
.lmenu button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--ink); font-size: .8rem; padding: .5rem .8rem;
}
.lmenu button:hover { background: var(--surface-2); }
.lmenu button.danger { color: var(--bad); }

/* 整部合集：不屬於任何一集，所以擺在集數格子上方獨立一列 */
.fullrow {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin: 0 0 .7rem; padding: .5rem .75rem;
  background: #1d1a12; border: 1px solid #3a2f14; border-radius: 8px;
}
.fullrow .fulltip {
  color: var(--muted); font-size: .76rem; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}

.tag {
  font-size: .68rem; padding: .05rem .45rem; border-radius: 999px; flex: none;
  border: 1px solid var(--line); color: var(--muted);
}
.tag.public { color: var(--good); border-color: #2e4a3a; }
.tag.seed { color: var(--accent); border-color: #4a3a12; }

/* 來源摘要列 + 一鍵刪除 */
.srcbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .7rem; }
.srcchip {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
  padding: .2rem .4rem .2rem .8rem; font-size: .8rem; color: var(--muted);
}
.srcchip b { color: var(--ink); font-weight: 500; }
.srcchip .n { font-size: .74rem; }
.srcchip .btn { padding: .12rem .5rem; font-size: .72rem; }
.privacy-note {
  font-size: .78rem; color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; margin-bottom: .8rem;
  line-height: 1.6;
}
/* 清單型作品（講座合集）的影片列表：一列一支、✓ 獨立勾選、點標題播放 */
/* 字幕全文搜尋的結果列：一句話、它的譯文、以及它在哪支影片的第幾秒 */
.cuerow {
  display: grid; grid-template-columns: 8.5rem 1fr auto; gap: .9rem;
  align-items: start; padding: .8rem 0; border-bottom: 1px solid var(--line);
}
.cuerow:last-child { border-bottom: none; }
.cthumb { position: relative; border-radius: 6px; overflow: hidden; background: var(--surface-2); }
.cthumb img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.cthumb .ctime {
  position: absolute; right: .25rem; bottom: .25rem;
  background: #000000cc; color: #fff; font-size: .7rem;
  padding: .05rem .3rem; border-radius: 3px;
}
.cmain { min-width: 0; }
.cuerow .cfrom { font-size: .95rem; line-height: 1.5; }
.cuerow .cto { color: var(--muted); font-size: .9rem; line-height: 1.5; margin-top: .15rem; }
.cuerow .cmeta {
  margin-top: .35rem; font-size: .74rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cuerow mark { background: #e2a34333; color: var(--accent); border-radius: 2px; padding: 0 .1rem; }
.cacts { display: flex; flex-direction: column; gap: .35rem; }
.cuehint {
  color: var(--muted); line-height: 1.8; padding: 1.4rem 0;
  max-width: 42rem; font-size: .92rem;
}

@media (max-width: 640px) {
  .cuerow { grid-template-columns: 5.5rem 1fr; }
  .cacts { grid-column: 1 / -1; flex-direction: row; }
}

/* 確認對話框：取代瀏覽器原生的 confirm()。
   原生那個長相由作業系統決定、跟整站介面完全脫節，還會凍住整個分頁。 */
.dlg-mask {
  /* 要蓋在作品視窗（100）與播放器（200）之上；提示條（300）仍在最上面。
     對話框接對話框（後台使用者視窗→確認框）：同一個 z-index，後開的移到 body 最後（openDialog），畫在上面 */
  position: fixed; inset: 0; z-index: 250;
  background: #000000b0; backdrop-filter: blur(2px);
  display: flex; justify-content: center; padding: 1.5rem;
  /* 內容比畫面高時上面那截也捲得到（center 會把兩頭都切掉；舊瀏覽器留 center 當退路） */
  align-items: center; align-items: safe center;
  overflow-y: auto;
}
/* 所有覆蓋層對話框的通則（第 7 批 #116）：自己能捲、操作按鈕永遠搆得到。基底一個地方設，各對話框只設寬度。
   下內距與按鈕列的 sticky 偏移用同一個變數：小螢幕把內距改小時兩個一起變，按鈕列不會差一截 */
.dlg {
  --dlg-pad-t: 1.3rem;
  --dlg-pad-b: 1.1rem;
  width: min(30rem, 100%);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 50px #000000cc;
  padding: var(--dlg-pad-t) 1.4rem var(--dlg-pad-b);
  max-height: calc(100vh - 3rem);            /* 退路 */
  max-height: calc(100dvh - 3rem);           /* 手機網址列伸縮時也算對 */
  overflow-y: auto; overscroll-behavior: contain;
  animation: dlgin .12s ease-out;
}
/* 內容再長，操作按鈕都貼在看得到的底部 */
.dlg > .dlgacts {
  position: sticky; bottom: calc(-1 * var(--dlg-pad-b)); margin-bottom: calc(-1 * var(--dlg-pad-b));
  padding: .8rem 0 var(--dlg-pad-b);
  background: linear-gradient(to bottom, transparent, var(--surface) .6rem);
}
@media (max-width: 640px), (max-height: 520px) {
  .dlg-mask { padding: .75rem; }
  .dlg {
    --dlg-pad-t: 1rem;
    --dlg-pad-b: .9rem;
    max-height: calc(100vh - 1.5rem); max-height: calc(100dvh - 1.5rem);
    padding: var(--dlg-pad-t) 1rem var(--dlg-pad-b);
  }
}
@keyframes dlgin { from { opacity: 0; transform: translateY(6px) scale(.99); } }
.dlgtitle { font-size: 1.05rem; font-weight: 700; margin-bottom: .6rem; }
.dlgbody { color: var(--muted); line-height: 1.65; font-size: .92rem; }
.dlgacts { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
.dlgacts .btn { min-width: 5.5rem; }
.dlgacts .dlgdanger { background: var(--bad); border-color: var(--bad); color: #fff; }
.dlgacts .dlgdanger:hover { filter: brightness(1.1); }
.dlgacts .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tag.priv { background: var(--bad); color: #fff; }

/* 貼網址之後的「收錄範圍」視窗（app.js 的 askImport）：選項是一列一列的單選卡，
   推薦的那個用主色框起來；每個選項下面一句話講清楚會收錄什麼 */
.impdlg { width: min(34rem, 100%); }
.impfrom { color: var(--muted); font-size: .85rem; margin: -.3rem 0 .8rem; }
.impopts { display: flex; flex-direction: column; gap: .55rem; }
.impopt {
  display: flex; gap: .7rem; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; padding: .7rem .8rem;
  background: var(--surface-2);
}
.impopt:hover { border-color: var(--muted); }
.impopt.rec { border-color: var(--accent); }
.impopt:has(input:checked) { border-color: var(--accent); background: #e2a3431a; }
.impopt input[type="radio"] { margin-top: .25rem; accent-color: var(--accent); flex: none; }
.impbody { display: flex; flex-direction: column; gap: .2rem; min-width: 0; flex: 1; }
.impbody b { font-weight: 600; font-size: .95rem; }
.impbody small { color: var(--muted); font-size: .82rem; line-height: 1.55; }
.imprec {
  display: inline-block; font-size: .68rem; font-weight: 700; vertical-align: .1rem;
  background: var(--accent); color: var(--accent-ink); border-radius: 3px; padding: .02rem .35rem;
}
.impexist { font-size: .78rem; color: var(--good); }
.impexist.on { color: var(--accent); }
.impname {
  margin-top: .35rem; background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  border-radius: 6px; padding: .4rem .55rem; font: inherit; font-size: .9rem;
}
.impname.hidden { display: none; }
.impnote { color: var(--muted); font-size: .76rem; line-height: 1.6; margin-top: .9rem; }

/* 網站更新了、這一頁還是舊的：貼在最下面，按一下重新整理 */
/* 舊版擴充功能的常駐提示列：跟著版本在，不會自己消失 */
.extbar {
  margin: .6rem auto 0; max-width: 60rem; padding: .7rem 1rem; border-radius: 10px;
  border: 1px solid var(--accent); background: var(--surface); font-size: .9rem; line-height: 1.55;
}

.updatebar {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 260;
  display: flex; align-items: center; gap: .8rem; max-width: calc(100vw - 2rem);
  background: var(--surface); border: 1px solid var(--accent); border-radius: 10px;
  padding: .55rem .6rem .55rem 1rem; box-shadow: 0 8px 28px #000000aa; font-size: .88rem;
}

/* 作品視窗：自己取的名字、頻道／清單的收錄狀態、影片清單的「顯示更多」 */
.malias { color: var(--muted); font-size: .85rem; margin: -.2rem 0 .3rem; }
.syncline { font-size: .82rem; color: var(--muted); margin-top: .3rem; }
.syncline.waiting, .syncline.failed { color: var(--bad); }
.syncline.syncing, .syncline.pending { color: var(--accent); }
.talkmore { display: block; margin: .6rem auto 0; }
/* 作品視窗的空間標籤：可以同時放在好幾個空間（沿用字幕庫篩選晶片的樣式） */
.libchips.spacechips { display: inline-flex; margin: 0; gap: .3rem; vertical-align: middle; }

/* 字幕庫的卡片動作列：加入書櫃＋（管理員）刪除 */
.libacts { display: flex; gap: .4rem; }
.libacts .btn { flex: 1; }
.libacts .danger { color: var(--bad); border-color: var(--bad); flex: 0 0 auto; }
.liberr {
  margin-top: .25rem; font-size: .7rem; color: var(--bad);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 「上次看到這裡」：清單有幾十支，回來時第一眼要看得到自己停在哪 */
.resumebar {
  display: flex; align-items: center; gap: .6rem; cursor: pointer;
  margin: .2rem 0 .6rem; padding: .55rem .7rem;
  background: var(--surface-2); border: 1px solid var(--accent); border-radius: 8px;
}
.resumebar:hover { background: #262a33; }
.resumebar .rlabel { font-size: .74rem; color: var(--accent); white-space: nowrap; }
.resumebar .rname {
  flex: 1; min-width: 0; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.resumebar .rtime { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.resumebar .rplay { color: var(--accent); }
.talkrow.here { background: rgba(226, 163, 67, .09); border-left: 2px solid var(--accent); }

.talklist { max-height: 24rem; overflow-y: auto; }
/* 合輯依講者分組：一位講者一個區塊，標題列可收合 */
.tgroup { margin: .2rem 0 .4rem; }
.tghead {
  display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem;
  font-size: .86rem; font-weight: 600; color: var(--ink); border-radius: 5px;
}
.tghead:hover { background: #ffffff0a; }
.tghead .tgn { color: var(--muted); font-weight: 400; font-size: .78rem; }
.tghead .tgcaret { margin-left: auto; color: var(--muted); font-size: .8rem; transition: transform .15s; }
/* 收合是區塊標頭裡的一顆按鈕（「獨立成卡片」是它的兄弟） */
.tghead .tgtoggle {
  display: flex; align-items: center; gap: .5rem; flex: 1 1 auto; min-width: 0; cursor: pointer;
  background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left;
}
.tgroup.closed .tgcaret { transform: rotate(-90deg); }
.tgroup.closed .tgbody { display: none; }
.tgroup .talkrow { padding-left: 1.1rem; }
.tghead .tspin { margin-left: auto; font-size: .74rem; padding: .15rem .5rem; }
.h3btn { margin-left: .6rem; vertical-align: middle; }
.batchbar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .3rem 0 .6rem;
  padding: .5rem .7rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px;
}
.batchbar .sub { color: var(--muted); font-size: .8rem; margin-right: auto; }
.tpick { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); cursor: pointer; }
.tghead .tpick { margin-left: auto; }
.tghead .tpick + .tgcaret { margin-left: .4rem; }
.tghead .tspin + .tgcaret { margin-left: .4rem; }
.talkrow .tspin { opacity: .55; font-size: .8rem; padding: .2rem .45rem; }
.talkrow:hover .tspin { opacity: 1; }
.talkrow {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;   /* ✓、標題、右邊一組（字幕狀態、拆卡、播放） */
  align-items: center; gap: .7rem; padding: .5rem .75rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  margin-bottom: .45rem; font-size: .88rem;
}
.talkrow .tmain { min-width: 0; cursor: pointer; }
.talkrow .tmain .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.talkrow .tmain:hover .t { color: var(--accent); }
.talkrow .tmain .d { font-size: .74rem; color: var(--muted); margin-top: .1rem; }
/* 這支已經有哪些語言（app.js 的 subLangsText）：沒有別的語言時是空的，不佔一行 */
.talkrow .tmain .tlangs:empty { display: none; }
.talkchk {
  width: 1.7rem; height: 1.7rem; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: transparent;
  font-size: .85rem; line-height: 1; flex: none;
}
.talkchk:hover { border-color: var(--accent); color: var(--muted); }
.talkrow.watched .talkchk { background: var(--accent); border-color: var(--accent); color: #141414; }
.talkrow.watched .tmain .t { color: var(--muted); text-decoration: line-through; }

/* 卡片改名：標題旁的鉛筆，按了原地換成輸入框 */
.titleedit {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: .7em; padding: 0 .35rem; vertical-align: middle;
}
.titleedit:hover { color: var(--accent); }
.titleform { display: flex; gap: .4rem; margin: .4rem 0 0; max-width: 34rem; }
.titleform input {
  flex: 1; min-width: 0; background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px; padding: .4rem .6rem; font-size: .95rem;
}
.titleform input:focus { outline: none; border-color: var(--accent); }

/* 清單型作品的片源明細：內容跟上面的「影片清單」重複，收起來當備用入口 */
.srcfold { margin: 1rem 0 .3rem; border-top: 1px solid var(--line); padding-top: .7rem; }
.srcfold > summary {
  cursor: pointer; font-size: .85rem; color: var(--muted);
  list-style: none; padding: .2rem 0;
}
.srcfold > summary::-webkit-details-marker { display: none; }
.srcfold > summary::before { content: "▸ "; }
.srcfold[open] > summary::before { content: "▾ "; }
.srcfold > summary:hover { color: var(--ink); }

.linklist { max-height: 20rem; overflow-y: auto; }
.linklist::-webkit-scrollbar { width: 8px; }
.linklist::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* add link form */
.addlink { display: grid; grid-template-columns: 1fr 8rem 5.5rem auto; gap: .5rem; margin-top: .6rem; }
.addlink input, .addlink select {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 6px; padding: .4rem .6rem; font-size: .85rem; outline: none; width: 100%;
}
.addlink input:focus { border-color: var(--accent); }
@media (max-width: 700px) { .addlink { grid-template-columns: 1fr 1fr; } }

/* seed candidates */
.seedrow { display: flex; align-items: center; gap: .6rem; font-size: .85rem; padding: .3rem 0; }
.seedrow input { accent-color: var(--accent); flex: none; }
.seedgroup {
  border: 1px solid var(--line); border-radius: 8px;
  padding: .45rem .8rem; margin-bottom: .6rem; background: var(--surface-2);
}
.seedgroup .sghead b { color: var(--accent); }
.seedgroup .sgmeta { color: var(--muted); font-size: .78rem; }
.seedgroup .sgitems {
  max-height: 11rem; overflow-y: auto;
  border-top: 1px solid var(--line); margin-top: .3rem; padding-top: .2rem;
}
.seedgroup .sgitems::-webkit-scrollbar { width: 8px; }
.seedgroup .sgitems::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.sgstatus {
  font-size: .78rem; color: var(--accent); padding: .3rem .1rem .5rem;
}
.sgstatus.done { color: var(--good); }
.bulkbar input {
  flex: 1; min-width: 12rem;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 6px; padding: .4rem .6rem; font-size: .85rem; outline: none;
}
.bulkbar input:focus { border-color: var(--accent); }

/* ---------- player ---------- */
.player-mask {
  position: fixed; inset: 0; z-index: 200; background: #000000e6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem;
}
/* 最小 200x200 是 YouTube 嵌入播放器的硬性規定（Required Minimum Functionality）。
   純 16:9 在 380px 以下的手機會縮到 169~190px 高，低於下限。 */
.player-box {
  width: min(70rem, 94vw); aspect-ratio: 16 / 9;
  min-width: 200px; min-height: 200px;
  background: #000; border-radius: 8px; overflow: hidden;
  /* 字幕 overlay 的定位基準——沒有這個，絕對定位會跑到整個頁面的左上角 */
  position: relative;
}
/* 只有播放器本身要撐滿。**不要寫成 `.player-box > div`**——那會把疊在上面的
   字幕層與翻譯狀態框一起撐成整個播放器大小。字幕層被撐高之後，`bottom:8%`
   量的是那個被撐高的盒子，文字會跑到畫面最上面（2026-09-07 踩過，
   當時是想用 `:not(.transbox)` 排除狀態框，反而讓權重蓋過下面那條保險）。
   YT.Player 會把 #ytPlayer 這個 div 換成同 id 的 iframe，兩種都寫。 */
.player-box iframe, .player-box > #ytPlayer { width: 100%; height: 100%; }
/* 全螢幕：放大的是 .player-box（字幕層在裡面一起放大），字幕上限跟著放寬。
   .fake-fs 是給沒有 Fullscreen API 的環境（iOS Safari 的 div 不能全螢幕）
   用 fixed 鋪滿視窗假裝的。 */
.player-box:fullscreen, .player-box.fake-fs {
  width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; border-radius: 0;
}
.player-box.fake-fs { position: fixed; inset: 0; z-index: 300; }
.player-box:fullscreen .sub-en, .player-box.fake-fs .sub-en { font-size: calc(min(2.4vw, 30px) * var(--sub-scale, 1)); }
.player-box:fullscreen .sub-zh, .player-box.fake-fs .sub-zh { font-size: calc(min(3.4vw, 44px) * var(--sub-scale, 1)); }
/* 假全螢幕沒有 Esc 可按（手機），右上角留一顆離開鍵；真全螢幕靠 Esc，按鈕藏著 */
.player-box > .fs-exit {
  position: absolute; top: .8rem; right: .8rem; z-index: 6; width: auto; height: auto;
  background: #000000b0; color: #fff; border: 1px solid #ffffff80; font-size: .9rem;
  padding: .45rem .9rem;
}
.player-box > .fs-exit:hover { background: #000000e0; border-color: #fff; }
.player-box:fullscreen > .fs-exit { display: none; }
.player-info {
  color: var(--muted); font-size: .9rem; display: flex; gap: .6rem 1rem; align-items: center;
  flex-wrap: wrap; justify-content: center; max-width: 94vw;  /* 窄螢幕換行，別把按鈕擠成直排 */
}
.player-info b { color: var(--ink); }
/* 影片下方那行小字：這支影片已經有哪些語言的譯文 */
.sub-langs { color: var(--muted); font-size: .78rem; min-height: 1em; opacity: .85; }
.sub-langs:empty { display: none; }
.sub-langs .have { color: var(--ink); }
.sub-langs .now { color: var(--accent); }

/* toast */
.toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 300;
  background: var(--surface-2); border: 1px solid var(--accent); color: var(--ink);
  border-radius: 8px; padding: .6rem 1.2rem; font-size: .88rem;
  box-shadow: 0 4px 20px #00000088;
}

/* ---------- 新集數提醒（鈴鐺與面板） ---------- */
/* 頂欄圖示：手寫 SVG 線條圖，不用 emoji——emoji 在不同系統長得不一樣，
   而且那幾顆（📊🔔⚙）到處都看得到，沒有識別度。 */
.iconbtn {
  position: relative; background: none; border: none; padding: .25rem;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); border-radius: 6px; line-height: 0;
}
.iconbtn svg {
  width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.iconbtn:hover { color: var(--accent); background: #ffffff0f; }
.bdot {
  position: absolute; top: -.15rem; right: -.25rem; min-width: 1.05rem;
  background: var(--bad); color: #fff; border-radius: 999px;
  font-size: .62rem; line-height: 1.05rem; text-align: center; padding: 0 .2rem;
}
.notif-panel {
  position: absolute; top: 100%; right: 1.4rem; width: min(24rem, 92vw); z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 34px #000000aa;
  /* 提醒多、畫面矮（橫向手機）：面板自己捲，底下的「顯示較舊」「摘要信」搆得到 */
  max-height: min(32rem, calc(100vh - 5rem)); max-height: min(32rem, calc(100dvh - 5rem));
  overflow-y: auto; overscroll-behavior: contain;
}
.notif-panel .nhead {
  padding: .6rem .9rem; font-size: .85rem; color: var(--accent);
  border-bottom: 1px solid var(--line);
}
/* 每一則提醒是一顆按鈕（鍵盤按得到，第 7 批 #52） */
.notif-panel .nrow {
  display: block; width: 100%; text-align: left; background: none; color: inherit; font: inherit;
  padding: .55rem .9rem; font-size: .85rem; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--line);
}
.notif-panel .nrow .nmsg, .notif-panel .nrow .d { display: block; }
.notif-panel .nrow:hover { background: var(--surface-2); }
.notif-panel .nrow.unread { border-left: 3px solid var(--accent); }
.notif-panel .nrow .d { color: var(--muted); font-size: .72rem; }
.notif-panel .nhead:focus { outline: none; }
.notif-panel .nmore { padding: .45rem .9rem; font-size: .8rem; }
.notif-panel .nmore:empty { display: none; }
.notif-panel .nmoreunread { color: var(--muted); margin-bottom: .2rem; }
.notif-panel .nfoot {
  padding: .5rem .9rem; font-size: .72rem; color: var(--muted); background: var(--surface-2);
}

/* ---------- 追蹤更新（非官方來源：只有集數，沒有連結） ---------- */
.modal h3 .h3sub { color: var(--muted); font-weight: 400; font-size: .78rem; margin-left: .5rem; }
.watchlist { max-height: 16rem; overflow-y: auto; }
.watchlist::-webkit-scrollbar { width: 8px; }
.watchlist::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.watchrow {
  display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; font-size: .85rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; margin-bottom: .5rem;
}
.watchrow.new { border-color: #4a3a12; }
.watchrow .wsrc {
  flex: none; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .72rem; color: var(--muted); letter-spacing: .02em;
  background: #ffffff0d; border: 1px dashed var(--line); border-radius: 6px; padding: .15rem .45rem;
  cursor: not-allowed;  /* 這不是連結，也永遠不會是 */
}
.watchrow .wmain { flex: 1; min-width: 0; }
.watchrow .wmain .t b { color: var(--accent); }
.watchrow .wmain .d { color: var(--muted); font-size: .74rem; }
.tag.new { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.privacy-note.legal { border-color: #4a3a12; color: #cbbd9d; margin-top: .3rem; }

/* ---------- Google 登入按鈕 ---------- */
.auth-card .or {
  position: relative; text-align: center; margin: 1rem 0 .8rem; color: var(--muted); font-size: .78rem;
}
.auth-card .or::before {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--line);
}
.auth-card .or span { position: relative; background: var(--surface); padding: 0 .7rem; }
.btn.google {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  background: #fff; color: #1f1f1f; text-decoration: none; width: 100%;
  border: 1px solid #dadce0; font-weight: 500;
}
.btn.google:hover { filter: none; background: #f7f8f8; }

/* ---------- 管理後台 ---------- */
.adminwrap { padding: 1.2rem 2rem 4rem; }
.adminwrap h3 { font-size: .95rem; margin: 1.6rem 0 .7rem; color: var(--accent); }
.adminwrap h3 .h3sub { color: var(--muted); font-weight: 400; font-size: .78rem; margin-left: .5rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .7rem; }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem;
}
.stat .sv { font-size: 1.5rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.stat .sl { font-size: .8rem; color: var(--muted); margin-top: .15rem; }
.stat .sh { font-size: .7rem; color: var(--muted); opacity: .75; margin-top: .3rem; }

.admtable { width: 100%; border-collapse: collapse; font-size: .84rem; }
.admtable th {
  text-align: left; color: var(--muted); font-weight: 500; font-size: .76rem;
  border-bottom: 1px solid var(--line); padding: .45rem .6rem;
}
.admtable td { padding: .45rem .6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admtable tr:hover td { background: var(--surface); }
.admtable .mono {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .74rem; color: var(--muted);
}
.admtable .avat {
  width: 18px; height: 18px; border-radius: 50%; vertical-align: -4px; margin-right: .4rem;
}
.admtable .bad { color: var(--bad); }
.adminwrap .bulkbar input { max-width: 20rem; }
/* 後台分頁籤、分頁、篩選列、使用者面板 */
.admtabs { display: flex; gap: .3rem; flex-wrap: wrap; margin: .6rem 0 1rem; border-bottom: 1px solid var(--line); }
.admtabs button {
  background: none; border: none; color: var(--muted); padding: .55rem .9rem; cursor: pointer;
  font-size: .9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit;
}
.admtabs button:hover { color: var(--ink); }
.admtabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.pager {
  display: flex; align-items: center; gap: .35rem; justify-content: flex-end; flex-wrap: wrap;
  padding: .6rem 0; color: var(--muted); font-size: .82rem;
}
.pager .ptotal { margin-right: .5rem; }
.pager .pnum { min-width: 2.1rem; justify-content: center; font-variant-numeric: tabular-nums; }
.pager .pnum.on { opacity: 1; cursor: default; }
.pager .pgap { padding: 0 .15rem; }
.pager .pjump { display: inline-flex; align-items: center; gap: .3rem; margin-left: .4rem; }
.pager .pjump input {
  width: 4rem; background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: 5px; padding: .2rem .35rem;
}
.admfilters select {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 6px; padding: .4rem .6rem; font-size: .85rem;
}
.admtable .sub { color: var(--muted); font-size: .74rem; margin-top: .1rem; }
.admtable a { color: var(--ink); text-decoration: none; }
.admtable a:hover { color: var(--accent); }
.admtable.small { font-size: .78rem; }
.admtable .pill { font-size: .68rem; background: var(--accent); color: var(--accent-ink); border-radius: 3px; padding: .05rem .35rem; }
.admdlg { width: min(64rem, 96vw); }
/* 標題列（含關閉鈕）捲動時貼在上面，跟按鈕列貼在下面是同一個做法 */
.admdlg .dlg-head {
  display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem;
  position: sticky; top: calc(-1 * var(--dlg-pad-t)); margin-top: calc(-1 * var(--dlg-pad-t));
  padding-top: var(--dlg-pad-t); padding-bottom: .4rem; background: var(--surface); z-index: 1;
}
.admdlg .dlg-head .sub { color: var(--muted); font-size: .8rem; }
.admdlg .dlg-head .iconbtn { margin-left: auto; }
.admgrid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.2rem; }
.admgrid h4 { font-size: .82rem; color: var(--accent); margin: .9rem 0 .4rem; }
.admgrid .kv { display: flex; justify-content: space-between; gap: 1rem; font-size: .84rem; padding: .2rem 0; border-bottom: 1px solid var(--line); }
.admgrid .kv span { color: var(--muted); }
.admops .oprow { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .4rem 0; font-size: .84rem; }
.admops input, .admops select {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 6px; padding: .35rem .5rem; font-size: .84rem; font-family: inherit;
}
.admops .sub { color: var(--muted); font-size: .76rem; }
.admlog { list-style: none; padding: 0; margin: 0; font-size: .78rem; color: var(--muted); }
.admlog li { padding: .15rem 0; }
@media (max-width: 800px) { .admgrid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .adminwrap { padding: 1rem; }
  .admtable { font-size: .78rem; }
}

/* 純 Google 登入模式：整個帳密表單收起來 */
body.google-only .pwfields,
body.google-only .form-error:empty { display: none; }
body.google-only #googleBox { margin-top: .4rem; }

/* ---------- 我的追劇數據 ---------- */
.hero {
  background: linear-gradient(135deg, #1d1a12, var(--surface));
  border: 1px solid #3a2f14; border-radius: 12px; padding: 1.4rem 1.6rem; margin-bottom: 1.2rem;
}
.hero .hnum { font-size: 3rem; font-weight: 700; color: var(--accent); line-height: 1; }
.hero .hnum span { font-size: 1.1rem; margin-left: .4rem; color: var(--ink); font-weight: 500; }
.hero .hsub { margin-top: .5rem; color: var(--ink); font-size: .95rem; }
.hero .hnote { margin-top: .5rem; color: var(--muted); font-size: .76rem; }

.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; }
@media (max-width: 820px) { .twocol { grid-template-columns: 1fr; } }

.chart { width: 100%; max-width: 20rem; display: block; margin: .5rem auto; }

.barlist { display: flex; flex-direction: column; gap: .35rem; }
.barrow { display: grid; grid-template-columns: 5.5rem 1fr 2.5rem; align-items: center; gap: .6rem; font-size: .82rem; }
.barrow .bl { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barrow .bt { background: var(--surface-2); border-radius: 999px; height: 8px; overflow: hidden; }
.barrow .bt i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.barrow .bv { text-align: right; color: var(--ink); }

.months { display: flex; align-items: flex-end; gap: .3rem; height: 9rem; margin: .5rem 0 0; }
.mcol { display: flex; flex-direction: column; align-items: center; height: 100%; }
.mbar {
  flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center;
  position: relative; background: var(--surface-2); border-radius: 4px 4px 0 0; overflow: visible;
}
.mbar i { display: block; width: 100%; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 2px; }
.mbar .mfin {
  position: absolute; top: -1.1rem; font-size: .68rem; color: var(--good);
  background: var(--bg); padding: 0 .25rem; border-radius: 4px;
}
.mlab { font-size: .64rem; color: var(--muted); margin-top: .3rem; white-space: nowrap; }

.heat { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; margin-top: .5rem; }
.heat .hcell { display: block; height: 26px; background: var(--accent); border-radius: 2px; }
.heatlab { display: flex; justify-content: space-between; font-size: .66rem; color: var(--muted); margin-top: .25rem; }

.toplist { display: flex; flex-direction: column; gap: .5rem; }
.toprow {
  display: flex; align-items: center; gap: .7rem; padding: .4rem .6rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
}
.toprow:hover { border-color: var(--accent); }
.toprow img, .toprow .noimg {
  width: 34px; height: 46px; object-fit: cover; border-radius: 4px; flex: none; background: var(--surface-2);
}
.toprow .tmain { min-width: 0; }
.toprow .tmain b { display: block; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toprow .tmain span { font-size: .74rem; color: var(--muted); }

/* 更新摘要信設定（在鈴鐺面板裡） */
.digestrow {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  font-size: .78rem; color: var(--muted);
}
.digestrow b { color: var(--ink); font-weight: 500; }
.digestrow select {
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: .2rem .4rem; font-size: .76rem;
}
.dnote { font-size: .7rem; color: var(--muted); opacity: .8; margin-top: .4rem; line-height: 1.6; }

@media (max-width: 620px) {
  .linkrow { grid-template-columns: 3.4rem minmax(0, 1fr) auto; gap: .5rem; }
  .linkrow > .btn { grid-column: 3; }
  .linkrow .lmore { grid-column: 3; grid-row: 2; justify-self: end; }
}

/* 候選片源列的集數欄位：AI 判不出來時使用者可以自己填 */
.seedrow .epin {
  width: 3.4rem; flex: none; text-align: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  border-radius: 5px; padding: .12rem .25rem; font-size: .76rem; outline: none;
}
.seedrow .epin:focus { border-color: var(--accent); }
.seedrow .epin::placeholder { color: var(--muted); opacity: .5; }
/* 拿掉數字輸入框的上下箭頭，那個在密集列表裡很礙事 */
.seedrow .epin::-webkit-outer-spin-button,
.seedrow .epin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.seedrow .epin { -moz-appearance: textfield; }


/* ---------- 雙語字幕 overlay ---------- */
/* 疊在內嵌播放器上面，不是塞進 iframe——那是跨來源的，碰不到。
   中英分兩行是刻意的：中英語序不同，譯文沒辦法逐詞對回原文的時間軸，
   所以中文那行必然跟聲音差幾秒。英文那行保有原始的詞組級時間軸、對得上
   聲音，兩行並陳讓觀眾自己對應。（見 app/services/subtitle.py 的說明） */
.sub-overlay {
  position: absolute; left: 0; right: 0; bottom: 8%;
  z-index: 5; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 0 6%; text-align: center;
  pointer-events: none;                 /* 不要擋住播放器的控制項 */
  text-shadow: 0 2px 6px #000, 0 0 3px #000;
}
/* 保險：萬一上面那條又被改回 `.player-box > div`，字幕層還是不能被撐滿 */
.player-box > .sub-overlay { width: auto; height: auto; }
.sub-line { line-height: 1.45; }
/* 字級乘上 --sub-scale（播放器上的「字幕設定」調的，存在本機） */
.sub-en { color: #d8d8d8; font-size: calc(min(2.4vw, 20px) * var(--sub-scale, 1)); font-weight: 400; }
.sub-zh { color: #fff; font-size: calc(min(3.4vw, 30px) * var(--sub-scale, 1)); font-weight: 500; }
.sub-status { font-size: .82rem; opacity: .75; min-width: 7rem; }
.sub-status.err { color: #ff9b9b; opacity: 1; }

/* ---------- 貼網址新增（唯一的入庫方式）---------- */
.addbar {
  display: flex; gap: .5rem; margin: 0 0 .4rem; flex-wrap: wrap;
}
.addbar input {
  flex: 1 1 22rem; min-width: 14rem;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink); border-radius: 8px; padding: .55rem .8rem; font-size: .9rem;
}
.addbar input:nth-child(2) { flex: 0 1 14rem; }
.addbar input:focus { outline: none; border-color: var(--accent); }
.sub-card { display: flex; flex-direction: column; gap: .3rem; }
.sub-card .thumb { cursor: pointer; border-radius: 6px; overflow: hidden; background: #000; }
.sub-card .thumb img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.sub-card .cardtitle {
  font-size: .88rem; color: var(--ink); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- 新手導引（空書櫃時顯示） ---------- */
.onboard { margin: 1.2rem 0 2rem; }
.onboard h2 { font-size: 1.15rem; margin: 0 0 .9rem; }
.onboard-steps {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.onboard-step {
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem;
}
.onboard-step b { color: var(--accent); font-size: .95rem; }
.onboard-step p { margin: 0; font-size: .88rem; color: var(--muted); flex: 1; }
.onboard-step .btn { align-self: flex-start; }
.onboard-acts { display: flex; gap: .5rem; flex-wrap: wrap; }
.onboard-import { display: flex; gap: .5rem; }
.onboard-import input {
  flex: 1; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 6px; padding: .35rem .7rem; font-size: .85rem;
}
.onboard-import input:focus { outline: none; border-color: var(--accent); }

/* ---------- 訂閱方案（Free／Pro／Max） ----------
   三欄共用一張格線（subgrid），同一列在三欄的高度一致；分隔靠 1px 線，
   不用陰影；價格與時數用等寬字。 */
.billing { max-width: 68rem; margin: 1.5rem auto 3rem; padding: 0 1.5rem; }
.billing .bhead { display: grid; gap: .5rem; margin-bottom: 1.2rem; max-width: 46rem; }
.billing .bhead h2 { font-size: 1.5rem; margin: 0; line-height: 1.3; }
.billing .blead { color: var(--muted); margin: 0; }
.bstatus { color: var(--muted); margin: 0 0 1rem; font-size: .92rem; }
.bstatus.good { color: var(--good); }
.cycle { display: inline-flex; border: 1px solid var(--line-strong); font-size: .86rem; margin-bottom: 1.2rem; }
.cycle button { background: none; border: 0; color: var(--muted); padding: .4rem .9rem; font-family: inherit; }
.cycle button[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); }
.cycle button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cycle .save { color: var(--good); margin-left: .4rem; font-size: .78rem; }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); }
.plan { display: grid; grid-template-rows: subgrid; grid-row: span 7; border-right: 1px solid var(--line); }
.plan:last-child { border-right: 0; }
.plan > div { padding: .9rem 1.3rem; border-bottom: 1px solid var(--line); }
.plan > div:last-child { border-bottom: 0; }
.plan.hot { background: var(--surface); }
.plan .pname { display: flex; align-items: center; gap: .6rem; }
.plan .pname b { font-size: 1.05rem; }
.plan .pill { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; padding: .1rem .45rem;
  background: var(--accent); color: var(--accent-ink); }
.plan.mine .pname::after { content: "●"; color: var(--good); font-size: .6rem; margin-left: auto; }
.plan .ptag { color: var(--muted); font-size: .86rem; line-height: 1.6; }
.plan .pbig { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.9rem; line-height: 1.1; font-weight: 500; }
.plan .pbig small { font-family: inherit; font-size: .8rem; color: var(--muted); font-weight: 400; margin-left: .2rem; }
.plan .pnote { font-size: .78rem; color: var(--muted); margin-top: .3rem; line-height: 1.5; }
.plan .pnote.center { text-align: center; }
.plan .pcta { display: block; width: 100%; text-align: center; padding: .6rem .9rem; border: 1px solid var(--line-strong);
  background: none; color: var(--ink); font: inherit; font-weight: 500; border-radius: 4px; }
.plan .pcta.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.plan .pcta:hover:not(:disabled) { border-color: var(--accent); }
.plan .pcta:disabled { opacity: .55; cursor: default; }
.plan .pgrp .gl { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .35rem; }
.plan .kv { display: flex; justify-content: space-between; gap: .8rem; font-size: .9rem; padding: .18rem 0; }
.plan .kv b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.plan .pgrp ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.plan .pgrp li { font-size: .88rem; color: var(--ink-2); display: grid; grid-template-columns: 1rem 1fr; gap: .35rem; line-height: 1.5; }
.plan .pgrp li::before { content: "✓"; color: var(--good); font-size: .8rem; }
.plan .soon { font-style: normal; font-family: var(--mono); font-size: .68rem; color: var(--muted);
  border: 1px solid var(--line-strong); padding: 0 .3rem; margin-left: .3rem; vertical-align: middle; }
.plan .pinherit { font-size: .84rem; color: var(--muted); min-height: 1rem; }
@media (max-width: 52rem) {
  .plans { grid-template-columns: 1fr; }
  .plan { grid-template-rows: auto; grid-row: auto; border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .plan:last-child { border-bottom: 0; }
}

.bcompare { margin-top: 1.4rem; border: 1px solid var(--line); }
.bcompare summary { cursor: pointer; padding: .7rem 1rem; font-weight: 500; list-style: none; display: flex; justify-content: space-between; }
.bcompare summary::-webkit-details-marker { display: none; }
.bcompare summary::after { content: "+"; color: var(--muted); font-family: var(--mono); }
.bcompare[open] summary::after { content: "–"; }
.bcompare .tscroll { overflow-x: auto; border-top: 1px solid var(--line); }
.bcompare table { border-collapse: collapse; width: 100%; min-width: 40rem; font-size: .88rem; }
.bcompare th, .bcompare td { padding: .55rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.bcompare thead th { background: var(--surface); color: var(--muted); font-weight: 500; font-size: .8rem; }
.bcompare tbody th { font-weight: 400; color: var(--ink-2); width: 36%; }
.bcompare td { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .84rem; }
.bcompare tr:last-child th, .bcompare tr:last-child td { border-bottom: 0; }
.bcompare .ok { color: var(--good); }
.bcompare .no { color: var(--muted); }

.bfaq { margin-top: 2rem; max-width: 46rem; }
.bfaq h3 { font-size: 1rem; margin: 0 0 .4rem; color: var(--ink); }
.bfaq details { border-bottom: 1px solid var(--line); }
.bfaq summary { cursor: pointer; padding: .7rem 0; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.bfaq summary::-webkit-details-marker { display: none; }
.bfaq summary::after { content: "+"; color: var(--muted); font-family: var(--mono); }
.bfaq details[open] summary::after { content: "–"; }
.bfaq p { color: var(--ink-2); font-size: .9rem; margin: 0; padding: 0 0 .9rem; line-height: 1.7; }

/* ---------- 使用說明 ---------- */
.helpwrap { max-width: 50rem; }
.helptoc { display: flex; flex-wrap: wrap; gap: .4rem .6rem; margin: 1rem 0 1.4rem; }
.helptoc a { font-size: .8rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .2rem .7rem; text-decoration: none; }
.helptoc a:hover { color: var(--ink); border-color: var(--accent); }
.helpsec { scroll-margin-top: 5rem; }
.helpwrap .helpsec h3 { font-size: 1.02rem; color: var(--ink); margin: 2rem 0 .6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.helpwrap p, .helpwrap li { color: var(--ink-2); font-size: .92rem; line-height: 1.75; }
.helpwrap ul, .helpwrap ol { padding-left: 1.3rem; margin: .3rem 0 .6rem; }
.helpwrap li { margin: .25rem 0; }
.helpwrap li b, .helpwrap p b { color: var(--ink); }
.helpwrap .bfaq { margin-top: .4rem; }

/* 播放器正中央的翻譯狀態框（跟擴充功能在 YouTube 上那個同一套） */
.transbox {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6;
  pointer-events: none;              /* 不擋播放器，使用者隨時可以按播放 */
  min-width: min(20rem, 80%); max-width: 90%;
  background: #0e0f13e0; border: 1px solid var(--accent); border-radius: 12px;
  padding: 1rem 1.6rem; text-align: center; color: var(--ink);
  box-shadow: 0 8px 32px #000000aa; backdrop-filter: blur(8px);
}
.transbox.hidden { display: none; }
.transbox .tb-title { font-size: 1.05rem; font-weight: 600; margin-bottom: .5rem; }
.transbox .tb-bar { height: 6px; border-radius: 3px; background: #2a2e3a; overflow: hidden; margin-bottom: .4rem; }
.transbox .tb-bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s; }
.transbox .tb-sub { font-size: .76rem; opacity: .75; line-height: 1.5; }
.transbox .tb-hint { font-size: .72rem; opacity: .55; margin-top: .35rem; }
.transbox .tb-hint:empty { display: none; }
/* 三步：取得字幕 → 排隊／準備 → 翻譯。做完的打勾、現在這步亮起來 */
.transbox .tb-steps { display: flex; justify-content: center; gap: .3rem; list-style: none; margin: 0 0 .6rem; padding: 0; }
.transbox .tb-steps:empty { display: none; }
.transbox .tb-steps li { font-size: .7rem; padding: .15rem .55rem; border-radius: 999px; border: 1px solid #3a3f4d; opacity: .55; }
.transbox .tb-steps li.on { border-color: var(--accent); color: var(--accent); opacity: 1; }
.transbox .tb-steps li.done { opacity: .8; }
.transbox .tb-steps li.done::before { content: "✓ "; }
/* 還不知道要多久的步驟：跑馬燈，不給一個停在 0% 讓人猜的進度條 */
.transbox .tb-bar.busy > i { width: 35%; animation: tb-busy 1.4s ease-in-out infinite; }
@keyframes tb-busy { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) { .transbox .tb-bar.busy > i { animation: none; width: 100%; opacity: .4; } }
.transbox.failed { border-color: var(--bad); }
.transbox.failed .tb-title { color: #f0b3ad; }
.transbox.failed .tb-sub { opacity: .9; }

/* 播不出來時的說明（app.js 的 PlayerError）。跟 .transbox 相反：這個要能點
   （可能有 YouTube 連結），而且影片本來就沒在播，蓋滿整塊沒關係。 */
.playerr {
  position: absolute; inset: 0; z-index: 7;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  background: #0e0f13f2; color: var(--ink); text-align: center; padding: 1.2rem;
}
.playerr.hidden { display: none; }
.playerr .pe-title { font-size: 1.05rem; font-weight: 600; }
.playerr .pe-msg { font-size: .86rem; opacity: .8; max-width: 32rem; line-height: 1.6; }
/* 「這支還沒有字幕」時，字幕鈕轉成主色的行動呼籲 */
.player-info .btn.cta { background: var(--accent); color: var(--accent-ink); }

/* ---------- 語言切換與字幕語言 ---------- */
select.langsel, select.sublang {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 6px; padding: .2rem .4rem; font-size: .8rem; font-family: inherit;
}
select.langsel:focus, select.sublang:focus { outline: none; border-color: var(--accent); }
.authlang { text-align: center; margin-top: 1rem; }

/* ---------- 字幕庫語言篩選 ---------- */
.libchips { display: flex; gap: .4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.libchips button {
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: .2rem .8rem; font-size: .82rem;
}
.libchips button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 500; }

.onboard-note { color: var(--muted); font-size: .9rem; margin: .2rem 0 0; }


/* ---------- 逐字稿面板（站內播放器） ----------
   開啟時播放器版面從「置中一欄」變成「左影片、右面板」的格線；
   窄螢幕退回上下堆疊，面板固定佔下半。 */
.player-mask.with-transcript {
  display: grid; grid-template-columns: minmax(0, 1fr) min(27rem, 38vw);
  grid-template-rows: auto auto auto; gap: .7rem 1rem; padding: 1rem;
  align-content: center; justify-items: stretch;
}
.player-mask.with-transcript .player-box {
  width: 100%; max-height: calc(100vh - 6rem); grid-column: 1; justify-self: center;
}
.player-mask.with-transcript .player-info { grid-column: 1; flex-wrap: wrap; }
.player-mask.with-transcript .sub-langs { grid-column: 1; margin-top: -.4rem; }
.transcript {
  grid-column: 2; grid-row: 1 / span 3; align-self: stretch;
  max-height: calc(100vh - 2rem); min-height: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  display: flex; flex-direction: column; overflow: hidden;
}
.tr-head {
  display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem;
  border-bottom: 1px solid var(--line);
}
.tr-head input {
  flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink); border-radius: 6px; padding: .35rem .6rem; font-size: .85rem;
}
.tr-head input:focus { outline: none; border-color: var(--accent); }
.tr-outline {
  padding: .6rem .8rem; border-bottom: 1px solid var(--line);
  font-size: .86rem; max-height: 42%; overflow: auto; flex: 0 0 auto;
}
.tr-outline:empty { display: none; }
.tr-sec { color: var(--muted); font-size: .74rem; letter-spacing: .04em; margin: .2rem 0 .25rem; }
.tr-outline ul { margin: 0 0 .5rem; padding-left: 1.1rem; }
.tr-outline li { margin: .1rem 0; line-height: 1.5; }
.tr-chapter {
  display: flex; gap: .5rem; padding: .18rem .3rem; border-radius: 5px;
  cursor: pointer; line-height: 1.45;
  width: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: left;
}
.tr-chapter:hover, .tr-chapter.now { background: #ffffff0f; }
.tr-chapter .tr-t { color: var(--accent); font-variant-numeric: tabular-nums; flex: 0 0 3.2rem; }
.tr-list { flex: 1; overflow: auto; padding: .3rem 0; }
.tr-row {
  display: flex; gap: .55rem; padding: .32rem .8rem; cursor: pointer;
  border-left: 3px solid transparent;
}
.tr-row:hover { background: #ffffff08; }
.tr-row.now { background: #e2a34318; border-left-color: var(--accent); }
/* 時間碼是一顆按鈕（跳到那一秒）：逐字稿的鍵盤操作（整份一個 Tab 停點、上下鍵換句） */
.tr-row .tr-t {
  color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums;
  flex: 0 0 3.2rem; padding: .15rem 0 0; align-self: flex-start;
  background: none; border: 0; font-family: inherit; text-align: left; cursor: pointer;
}
.tr-row .tr-en { font-size: .86rem; line-height: 1.45; color: #d8d8d8; }
.tr-row .tr-zh { font-size: .9rem; line-height: 1.45; color: var(--ink); }
.tr-row mark, .tr-outline mark {
  background: #e2a34333; color: var(--accent); border-radius: 2px; padding: 0 .1rem;
}
.tr-empty { color: var(--muted); font-size: .85rem; padding: .8rem .8rem; }
.tr-retry { margin-left: .4rem; }
@media (max-width: 900px) {
  .player-mask.with-transcript {
    grid-template-columns: 1fr; grid-template-rows: auto auto auto minmax(0, 1fr);
    align-content: start; overflow: auto; padding: .6rem;
  }
  .transcript { grid-column: 1; grid-row: 4; max-height: 45vh; }
}
/* 句子搜尋的「只搜我看過的」 */
.chk {
  display: inline-flex; align-items: center; gap: .35rem; color: var(--muted);
  font-size: .85rem; white-space: nowrap; cursor: pointer;
}
/* .addbar input 那條規則會把勾選框也撐成 22rem 的文字框，這裡蓋回去 */
.chk input, .addbar .chk input {
  flex: 0 0 auto; width: 1rem; height: 1rem; min-width: 0; padding: 0; margin: 0;
  accent-color: var(--accent);
}

/* ---------- 管理模式（多選＋批次動作） ----------
   開關打開後容器加 .managing：每張卡片左上角出現勾選框，勾到的加 .selected；
   底部浮一條動作列。勾選框畫在 .card 的 ::after，書櫃卡與字幕卡共用。 */
.rows-tools { display: flex; justify-content: flex-end; padding: 1rem 0 0; }
/* 書櫃工具列：版內搜尋＋子分類篩選＋管理 */
.shelf-tools { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: 1rem 0 .2rem; }
.shelf-tools .shelfq {
  flex: 0 1 16rem; min-width: 10rem; background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink); border-radius: 4px; padding: .35rem .7rem; font-size: .85rem; font-family: inherit;
}
.shelf-tools .shelfq:focus { outline: none; border-color: var(--accent); }
.shelf-tools .shelfcats { margin-bottom: 0; flex: 1 1 auto; }
.shelf-tools .shelfcats .sadd { background: none; border: 1px dashed var(--line-strong); color: var(--muted); }
.shelf-tools .shelfcats .sadd:hover { color: var(--accent); border-color: var(--accent); }
.shelf-tools .shelfcats .sinput {
  background: var(--surface-2); border: 1px solid var(--accent); color: var(--ink);
  border-radius: 999px; padding: .2rem .7rem; font-size: .82rem; width: 9rem; outline: none;
}
.shelf-tools #manageBtn { margin-left: auto; }
.btn.ghost.on { background: var(--accent); color: var(--accent-ink); }
.managing .card { position: relative; cursor: pointer; }
.managing .card::after {
  content: ""; position: absolute; top: .45rem; left: .45rem; z-index: 2;
  width: 1.3rem; height: 1.3rem; border-radius: 3px; box-sizing: border-box;
  border: 2px solid #fff; background: #000000a6;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700; color: var(--accent-ink); line-height: 1;
}
.managing .card.selected::after { content: "✓"; background: var(--accent); border-color: var(--accent); }
.managing .card.selected .poster, .managing .sub-card.selected .thumb { outline: 2px solid var(--accent); outline-offset: -2px; }
.managing .card:hover .poster { transform: none; }
.managing .card .badge { left: 2.1rem; }
.managing .libacts { pointer-events: none; opacity: .45; }
.managebar {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 90;
  display: flex; align-items: center; gap: 1rem; padding: .55rem .8rem .55rem 1.1rem;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px;
  box-shadow: 0 8px 24px #00000080; font-size: .88rem; white-space: nowrap;
}
.managebar .mcount { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.managebar .linklike:hover { color: var(--accent); }
.managebar .btn.danger { background: var(--bad); color: #fff; border: none; }
.managebar .btn.danger:disabled { opacity: .4; }

/* 我的片庫：上方一排類型（全部／頻道／作品／播放清單／單片｜稍後觀看／片段書籤） */
.libsections .libsep { flex: none; width: 1px; align-self: stretch; background: var(--line-strong); margin: .2rem .15rem; }
.libnote { color: var(--muted); font-size: .8rem; margin: 0 0 .7rem; }
.libchiplabel { align-self: center; color: var(--muted); font-size: .76rem; margin-right: .1rem; }
@media (max-width: 760px) {
  .libsections { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .libsections::-webkit-scrollbar { display: none; }
  .libsections button { flex: none; }
}

/* 加入片庫：收錄範圍 → 分類選填 */
.impsubject { font-weight: 600; color: var(--ink); line-height: 1.5; margin: -.3rem 0 .35rem; }
.implabel { display: block; color: var(--muted); font-size: .78rem; letter-spacing: .03em; margin: .9rem 0 .35rem; }
.impspace {
  width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: 6px; padding: .45rem .6rem;
}

/* 加了書籤之後的小提示：補備註、復原（八秒後自己收掉）。要疊在播放器與全螢幕之上 */
.note-saved {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 310;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; max-width: calc(100vw - 2rem);
  background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 8px;
  padding: .5rem .7rem; box-shadow: 0 6px 24px #0008; font-size: .88rem;
}

/* 逐字稿：每一句右邊的 ☆／★ 書籤與 ✎ 修正；上方列出這支影片的書籤 */
.tr-row > div:not(.tr-acts) { flex: 1; min-width: 0; }
.tr-acts { display: flex; gap: .2rem; align-self: flex-start; flex: none; }
.tr-acts .btn { padding: .05rem .45rem; }
.tr-star.on { color: var(--accent); border-color: #6b5320; }
.tr-marks { padding: .5rem .9rem 0; }
.tr-marks:empty { display: none; }
.tr-mark {
  display: flex; gap: .5rem; padding: .18rem .3rem; border-radius: 5px; cursor: pointer;
  font-size: .84rem; line-height: 1.5;
  width: 100%; background: none; border: 0; color: inherit; font-family: inherit; text-align: left;
}
.tr-mark:hover { background: #ffffff0f; }
.tr-mark .tr-t { color: var(--accent); font-variant-numeric: tabular-nums; flex: 0 0 3.2rem; }
.tr-mark small { display: block; color: var(--muted); }

/* 播放器「更多」：回報譯文問題、分享範圍 */
.moremenu { display: flex; flex-direction: column; gap: .15rem; min-width: 11rem; }
.moremenu button {
  background: none; border: none; color: var(--ink); text-align: left; padding: .45rem .6rem;
  border-radius: 6px; font-size: .88rem;
}
.moremenu button:hover { background: #ffffff12; color: var(--accent); }

/* 回報譯文問題：附上那一句 */
.repline {
  display: flex; gap: .6rem; background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  padding: .5rem .6rem; margin: .2rem 0 .8rem; font-size: .88rem; line-height: 1.5;
}
.repline .tr-t { color: var(--accent); font-variant-numeric: tabular-nums; flex: none; }
.repline .tr-en { color: var(--muted); }
.repreasons { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-bottom: .6rem; font-size: .9rem; }
.repreasons input { accent-color: var(--accent); }

/* 分享範圍：全站共用／只有你看得到＋指定帳號 */
.sharedlg .impopt { margin-bottom: .5rem; }
.sharegrants { margin-top: .4rem; }
.grantrow {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  padding: .3rem 0; border-bottom: 1px solid var(--line); font-size: .88rem;
}
.grantadd { display: flex; gap: .4rem; margin-top: .5rem; }
.grantadd input {
  flex: 1; min-width: 0; background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: 6px; padding: .4rem .6rem;
}

/* ---------- 手機（≤760px）----------
   之前整個 app 只有幾個零星斷點；頂欄一整排不換行（logo＋搜尋框＋空間切換＋語言＋
   六個圖示＋帳號＋登出＋刪除帳號）把頁面撐到 1040px，手機上整頁被縮小、要左右捲，
   被使用者明確抱怨過。這裡一次處理：頂欄拆成三列、間距縮、卡片縮、作品視窗全幅、
   表單字級 16px（iOS 聚焦不會自動放大）。 */
@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  input, select, textarea { font-size: 16px; }

  /* 頂欄只剩一列：logo｜提醒｜帳號選單。主導覽（三頁）固定在畫面底部，拇指按得到 */
  .topbar { gap: .5rem; padding: .55rem .8rem; }
  .topbar .logo { font-size: 1.1rem; }
  .mainnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: var(--bg); border-top: 1px solid var(--line);
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    padding: .2rem .2rem calc(.2rem + env(safe-area-inset-bottom));
  }
  .mainnav button {
    flex-direction: column; gap: .1rem; font-size: .7rem; padding: .35rem .2rem;
    border-bottom: none; border-radius: 6px; min-height: 48px; justify-content: center;
  }
  .mainnav button svg { width: 21px; height: 21px; }
  .mainnav button.on { background: none; }
  #appView { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
  .acct-label { display: none; }
  .notif-panel { right: .5rem; width: calc(100vw - 1rem); }

  /* 首頁與清單：邊距縮、卡片縮成兩欄能放下的寬度 */
  .rows { padding: .4rem .8rem 4rem; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .7rem; padding: 1rem .8rem; }
  .grid .card.wide { grid-column: span 2; }
  .grid .card.wide .poster { height: auto; aspect-ratio: 16 / 9; }
  .section-head { padding: 1.1rem .8rem 0; font-size: 1.05rem; }
  .empty { padding: 2rem .8rem; }
  .card { flex-basis: 8.5rem; }
  .card.wide { flex-basis: 22.6rem; }   /* 跟直式卡同高：8.5rem × 3/2 × 16/9 */
  .addbar input { flex: 1 1 100%; min-width: 0; }
  .addbar input:nth-child(2) { flex: 1 1 55%; }
  .managebar { left: .5rem; right: .5rem; transform: none; white-space: normal; flex-wrap: wrap; gap: .5rem .8rem;
    bottom: calc(4.4rem + env(safe-area-inset-bottom)); }

  /* 作品視窗：手機上直接全幅，沒有外框留白 */
  .modal-mask { padding: 0; align-items: stretch; }
  .modal { width: 100%; min-height: 100%; border-radius: 0; border: 0; }
  .modal .mbar { border-radius: 0; }
  .modal .mhead { padding: 1.2rem 1rem .9rem; }
  .modal .mhead h2 { font-size: 1.25rem; }
  .modal .mbody { padding: .9rem 1rem 2rem; }
  .ep { min-width: 2.3rem; padding: .3rem .4rem; }

  /* 播放器貼齊螢幕寬 */
  .player-box { width: 100vw; border-radius: 0; }

  /* 方案頁比較表比手機寬，讓它自己橫捲，不要把整頁撐開 */
  .bcompare { overflow-x: auto; }
}

/* Persistent task and collection controls. */
.note-saved { position:fixed; bottom:1rem; left:50%; transform:translateX(-50%); z-index:10000; background:var(--bg, #161b22); color:var(--text, #f5f5f5); border:1px solid #78808c; padding:.75rem; border-radius:12px; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; width:max-content; max-width:calc(100vw - 2rem); box-shadow:0 6px 24px #0005; }
.note-saved ~ .note-saved { bottom:5.5rem; }
.account-menu { position:relative; }
.account-menu summary {
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:.4rem;
  padding:.35rem .6rem; border-radius:6px; color:var(--muted); font-size:.85rem;
}
.account-menu summary::-webkit-details-marker { display:none; }
.account-menu summary:hover, .account-menu[open] summary { color:var(--ink); background:#ffffff0f; }
.account-menu summary svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.account-items {
  position:absolute; right:0; top:calc(100% + .3rem); min-width:15rem; padding:.5rem;
  border:1px solid var(--line-strong); border-radius:10px; background:var(--surface); z-index:100;
  display:flex; flex-direction:column; gap:.1rem; box-shadow:0 12px 32px #000000aa;
  /* 橫向手機項目多：選單自己捲，登出／刪除帳號搆得到 */
  max-height:calc(100vh - 4.5rem); max-height:calc(100dvh - 4.5rem); overflow-y:auto; overscroll-behavior:contain;
}
.acct-name { color:var(--ink-2); font-size:.8rem; padding:.3rem .6rem .5rem; border-bottom:1px solid var(--line); margin-bottom:.3rem; }
.acct-name:empty { display:none; }
.menuitem {
  display:flex; align-items:center; gap:.6rem; background:none; border:none; color:var(--ink-2);
  padding:.5rem .6rem; border-radius:6px; font-size:.88rem; text-align:left; min-height:40px;
}
.menuitem:hover { background:#ffffff10; color:var(--ink); }
.menuitem svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.menulang { display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.45rem .6rem; color:var(--ink-2); font-size:.88rem; }
.menufoot { display:flex; gap:1rem; padding:.55rem .6rem .3rem; border-top:1px solid var(--line); margin-top:.3rem; }
#bellBtn { width:auto; gap:.3rem; }
@media(max-width:700px) {
  .userbox { gap:.4rem; }
  .account-menu summary { min-height:44px; }
  .account-items { position:fixed; right:.5rem; left:.5rem; top:3.4rem; min-width:0; }
  .learning-dialog { max-width:calc(100vw - 1rem); width:calc(100vw - 1rem); box-sizing:border-box; }
  .learning-dialog header { display:flex; justify-content:space-between; gap:.5rem; }
}


/* ============ 2026-09 重新定位：看懂外語影片的觀看服務 ============ */

/* 首頁最上面：貼網址（整個產品的入口，最大、最醒目） */
.watchbar { padding: 1.6rem 0 .4rem; max-width: 52rem; }
.watchbar h1 { font-size: 1.35rem; margin: 0 0 .7rem; line-height: 1.35; }
.addbar.big input { font-size: 1rem; padding: .75rem 1rem; border-radius: 8px; }
.addbar.big .btn { padding: .7rem 1.4rem; font-size: 1rem; border-radius: 8px; }
.row-title .rowmore { margin-left: .8rem; font-size: .8rem; }

/* 各頁標題 */
.pagehead { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; padding: 1.5rem 0 .8rem; }
.pagehead h2 { margin: 0; font-size: 1.3rem; }
.pagehead span { color: var(--muted); font-size: .85rem; }

/* 影片小卡：首頁的繼續觀看／新影片／稍後觀看、收藏的稍後觀看 */
.vrow { gap: .9rem; }
/* 影片磚：播放是一顆按鈕（.vtmain，縮圖＋標題），＋／✕ 與字幕狀態列的按鈕是它的兄弟（第 7 批 #52） */
.vtile { flex: 0 0 15.5rem; min-width: 0; position: relative; }
.vtmain {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.vtmain .vthumb, .vtmain .vt { display: block; }
.vtmain:focus-visible { outline: none; }
.vtmain:focus-visible .vthumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.vtile > .vt.vstate { margin-top: .2rem; }
.vthumb {
  position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line); transition: border-color .15s;
}
.vthumb img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }
.vtile:hover .vthumb { border-color: var(--accent); }
.vthumb .pbar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #ffffff2e; }
.vthumb .pbar i { display: block; height: 100%; background: var(--accent); }
.vact {
  position: absolute; top: .4rem; right: .4rem; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  border: 1px solid #ffffff40; background: #000000b0; color: #fff; font-size: .95rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s;
}
.vtile:hover .vact, .vact:focus-visible, .vact.done { opacity: 1; }
.vact.done { background: var(--good); color: #0d0e12; border-color: var(--good); }
@media (hover: none) { .vact { opacity: .85; } }
.vt { font-size: .78rem; color: var(--muted); margin-top: .35rem; line-height: 1.5; }
.vt b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--ink); font-weight: 500; font-size: .85rem; line-height: 1.4;
}
.vt b[data-untitled] { color: var(--muted); font-weight: 400; }
.vt em { font-style: normal; color: var(--accent); }
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.1rem .9rem; padding: .4rem 0 2rem; }
.vgrid .vtile { flex: none; }

/* 訂閱頻道的新影片：依頻道分組 */
.fgroup { margin: .2rem 0 1.1rem; }
.fghead {
  display: flex; align-items: center; gap: .55rem; background: none; border: none; color: var(--ink);
  padding: .25rem .1rem; margin-bottom: .35rem; font-size: .92rem; text-align: left;
}
.fghead:hover b { color: var(--accent); }
.fghead small { color: var(--muted); font-size: .75rem; }
.fghead span { color: var(--muted); font-size: .8rem; }
.fgavatar { width: 1.7rem; height: 1.7rem; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-strong); }

/* 我的訂閱：分類篩選 */
.shelf-tools .shelfspaces { margin-bottom: 0; flex: 1 1 100%; order: 2; }
.shelf-tools .shelfcats { order: 3; flex: 1 1 100%; }
.shelf-tools .shelfq { order: 1; }
.shelf-tools #manageBtn { order: 1; }
.libchips button small { opacity: .7; font-family: var(--mono); font-size: .75em; margin-left: .1rem; }
/* 刪除分類的 ✕：分類按鈕旁邊的兄弟按鈕（以前塞在按鈕裡，Tab 到不了、Enter 觸發的是分類） */
.chipwrap { display: inline-flex; align-items: center; gap: .1rem; }
.libchips .chipwrap .sdel {
  background: none; border: 1px solid transparent; color: var(--muted); border-radius: 999px;
  padding: .1rem .35rem; font-size: .75rem; line-height: 1; opacity: .8; cursor: pointer;
}
.libchips .chipwrap .sdel:hover { opacity: 1; color: var(--bad); border-color: var(--line-strong); }
.shelfspaces .sadd { background: none; border: 1px dashed var(--line-strong); color: var(--muted); }
.shelfspaces .sadd:hover { color: var(--accent); border-color: var(--accent); }
.shelfspaces .sinput {
  background: var(--surface-2); border: 1px solid var(--accent); color: var(--ink);
  border-radius: 999px; padding: .2rem .7rem; font-size: .82rem; width: 8rem; outline: none;
}

/* 收藏：收藏片段 */
.clipq {
  width: min(24rem, 100%); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 4px; padding: .4rem .7rem; font-size: .88rem; margin-bottom: 1rem;
}
.clipq:focus { outline: none; border-color: var(--accent); }
.clipgroup { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); margin-bottom: 1rem; overflow: hidden; }
.cghead { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
.cghead img { width: 5.5rem; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; flex: none; }
.cghead b { font-weight: 500; font-size: .92rem; flex: 1; min-width: 0; }
.cghead span { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.cliprow { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; padding: .7rem .8rem; align-items: start; }
.cliprow + .cliprow { border-top: 1px solid var(--line); }
.cliprow .ctime { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cliprow .cto { font-size: .95rem; color: var(--ink); line-height: 1.55; }
.cliprow .cfrom { font-size: .82rem; color: var(--muted); line-height: 1.5; margin-top: .15rem; }
.cliprow .cnote { font-size: .82rem; color: var(--ink-2); margin-top: .35rem; padding-left: .6rem; border-left: 2px solid var(--accent); white-space: pre-wrap; }
.cliprow .cacts { display: flex; flex-direction: column; gap: .3rem; align-items: flex-end; }
.linklike.danger:hover { color: var(--bad); }
.savedfoot { padding: 1.5rem 0 2rem; }
@media (max-width: 640px) {
  .cliprow { grid-template-columns: auto 1fr; }
  .cliprow .cacts { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; gap: 1rem; }
}

/* 處理任務 */
.taskrow {
  display: grid; grid-template-columns: 7rem 1fr auto; gap: .9rem; align-items: center;
  padding: .8rem 0; border-bottom: 1px solid var(--line);
}
.tthumb { aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--surface-2); }
.tthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tmain { min-width: 0; }
.tmain b { display: block; font-weight: 500; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tstate { color: var(--muted); font-size: .8rem; margin-top: .15rem; }
.taskrow.failed .tstate, .taskrow.canceled .tstate { color: var(--bad); }
.taskrow.done .tstate { color: var(--good); }
.tbar { height: 4px; background: #ffffff1a; border-radius: 2px; margin-top: .45rem; max-width: 22rem; overflow: hidden; }
.tbar i { display: block; height: 100%; background: var(--accent); transition: width .4s; }
.tnote { font-size: .8rem; color: var(--muted); margin-top: .3rem; }
.tacts { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
  .taskrow { grid-template-columns: 5.5rem 1fr; }
  .tacts { grid-column: 1 / -1; justify-content: flex-start; }
}

/* 貼一支影片之後的「先看」視窗：一個主要按鈕，其餘是次要動作 */
.watchdlg { width: min(34rem, 100%); }
.wdhead { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: .9rem; }
.wdthumb { width: 9rem; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; flex: none; background: var(--surface-2); }
.wdmeta { min-width: 0; }
.wdmeta .dlgtitle { margin-bottom: .3rem; line-height: 1.4; }
.wdmeta .impfrom { margin: 0; }
.wdmeta .impavatar {
  width: 1.3rem; height: 1.3rem; border-radius: 50%; object-fit: cover;
  vertical-align: -.3rem; margin-right: .35rem;
}
.wdstate {
  font-size: .9rem; line-height: 1.6; padding: .65rem .8rem; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); margin-bottom: .9rem;
  white-space: pre-line;           /* 原因、額度、體驗限制分行寫 */
}
.wdstate.ready { border-color: #2f6b4d; color: #bfe6d0; }
.wdstate.preparing { border-color: #6b5320; }
.wdgo { width: 100%; padding: .75rem 1rem; font-size: 1rem; border-radius: 8px; }
.wdmore { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.wdnote { color: var(--muted); font-size: .78rem; margin-top: .7rem; }
.watchdlg .dlgacts { margin-top: .9rem; }
@media (max-width: 520px) {
  .wdhead { flex-direction: column; }
  .wdthumb { width: 100%; }
}

.dlgtext {
  width: 100%; min-height: 6rem; margin-top: .4rem; resize: vertical; font-family: inherit; font-size: .92rem;
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 6px; padding: .6rem;
}
.dlgtext:focus { outline: none; border-color: var(--accent); }

@media (max-width: 760px) {
  .watchbar { padding-top: 1rem; }
  .watchbar h1 { font-size: 1.12rem; }
  .addbar.big .btn { flex: 1 1 100%; }
  .vtile { flex-basis: 12.5rem; }
  .vgrid { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
  .pagehead { padding-top: 1rem; }
}

/* 播放器：字幕設定面板（語言、顯示方式、字級） */
.subset { position: relative; }
.subset > summary { list-style: none; }
.subset > summary::-webkit-details-marker { display: none; }
.subset[open] > summary { background: #ffffff30; }
.subset-panel {
  position: absolute; bottom: calc(100% + .4rem); left: 50%; transform: translateX(-50%); z-index: 20;
  min-width: 17rem; padding: .7rem .8rem; display: flex; flex-direction: column; gap: .55rem;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px;
  box-shadow: 0 10px 28px #000000aa; color: var(--ink-2); font-size: .85rem;
  /* 播放器裡的浮動面板（字幕設定、更多）跟對話框同一條通則：畫面矮時自己捲，每一項都搆得到（第 7 批 R-DLG） */
  max-height: min(70vh, calc(100vh - 6rem)); max-height: min(70dvh, calc(100dvh - 6rem));
  overflow-y: auto; overscroll-behavior: contain;
}
.subset-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; align-items: center; }
.seg button { background: none; border: 0; color: var(--muted); padding: .28rem .7rem; font-size: .82rem; }
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button.on { background: var(--accent); color: var(--accent-ink); font-weight: 500; }
.seg button:hover:not(.on) { color: var(--ink); }
.seg .segval { font-family: var(--mono); font-size: .78rem; min-width: 3.2rem; text-align: center; color: var(--ink); }

/* 看完之後：下一支、訂閱這個頻道、回首頁 */
.afterwatch {
  position: absolute; inset: 0; z-index: 7; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .9rem; background: #0e0f13e8; padding: 1rem; text-align: center;
}
.afterwatch.hidden { display: none; }
.afterwatch .aw-title { font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.afterwatch .aw-acts { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; max-width: 36rem; }

/* 別台裝置看到後面了：提示＋跳過去（不擋播放器、不自動跳） */
.elsewhere {
  position: absolute; left: 50%; bottom: 3.4rem; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: .5rem; max-width: calc(100% - 2rem);
  background: #17191fe8; border: 1px solid var(--accent); border-radius: 8px; padding: .45rem .7rem;
  color: var(--ink); font-size: .85rem;
}
.elsewhere.hidden { display: none; }

/* 方案與用量：用量紀錄 */
.usagebox { margin: 0 0 1.4rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: .9rem 1rem; }
.usagebox h3 { margin: 0 0 .3rem; font-size: 1rem; }
.usagebox .qsub { color: var(--muted); font-size: .82rem; margin-bottom: .6rem; }
.usagelist { display: flex; flex-direction: column; }
.urow { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: .8rem; padding: .45rem 0; border-top: 1px solid var(--line); font-size: .85rem; align-items: baseline; }
.urow .udate { color: var(--muted); font-family: var(--mono); font-size: .78rem; }
.urow .utitle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.urow .utitle small { color: var(--muted); margin-left: .4rem; }
.urow .uamt { font-family: var(--mono); font-size: .82rem; text-align: right; }
.urow .uamt small { display: block; color: var(--good); font-family: inherit; }
.urow.grant .uamt { color: var(--good); }
/* 付款前先檢查：一列一件事，✓ 可以、⚠ 要注意、✕ 不行 */
.precheck .prerow { font-size: .86rem; line-height: 1.6; padding: .4rem 0 .4rem 1.5rem; position: relative; border-top: 1px solid var(--line); color: var(--ink-2); }
.precheck .prerow::before { position: absolute; left: .2rem; top: .4rem; content: "·"; color: var(--muted); }
.precheck .prerow.ok::before { content: "✓"; color: var(--good); }
.precheck .prerow.warn::before { content: "⚠"; color: var(--accent); }
.precheck .prerow.no::before { content: "✕"; color: var(--bad); }
.precheck .preurl { display: flex; gap: .5rem; margin: .7rem 0 .4rem; }
.precheck .preurl input { flex: 1; min-width: 0; }
.trialbox .qsub.pre { white-space: pre-line; color: var(--ink-2); }
.tnote.twhy { color: var(--ink-2); line-height: 1.6; }
.freebox { margin: 0 0 1.2rem; color: var(--ink-2); font-size: .9rem; border: 1px solid var(--line); border-radius: 8px; padding: .8rem 1rem; background: var(--surface); }
@media (max-width: 640px) {
  .urow { grid-template-columns: 1fr auto; }
  .urow .udate { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  /* 窄螢幕上面板置中會超出左右邊界：改成貼齊螢幕寬、浮在畫面下方 */
  .subset-panel {
    position: fixed; left: .5rem; right: .5rem; bottom: 1rem; transform: none; min-width: 0;
    max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
  }
}

/* 字幕狀態：直接回答「現在能不能看懂」（app.js 的 subStateOf／subStatusHtml）。
   影片清單的每一列、影片小卡共用：前面一顆點＋一句話＋（需要時）一個動作。 */
.talkrow .tside { display: flex; align-items: center; gap: .45rem; }
.substate {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: .15rem .5rem;
  font-size: .76rem; line-height: 1.45; color: var(--muted);
}
.substate .sttext::before {
  content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--line-strong); margin-right: .35rem; vertical-align: .05rem;
}
.substate.ready .sttext { color: var(--good); }
.substate.ready .sttext::before { background: var(--good); }
.substate.translating .sttext { color: var(--accent); }
.substate.translating .sttext::before { background: var(--accent); }
.substate.unfinished .sttext { color: var(--ink-2); }
.substate.unfinished .sttext::before { background: var(--accent); opacity: .5; }
.substate.unavailable .sttext::before { background: var(--bad); }
.stact {
  font: inherit; font-size: .74rem; border-radius: 999px; padding: .06rem .6rem; line-height: 1.5;
  border: 1px solid var(--line-strong); background: none; color: var(--ink-2); white-space: nowrap;
}
.stact:hover { color: var(--accent); border-color: var(--accent); }
.stact:disabled { opacity: .5; cursor: default; }
.stothers { flex-basis: 100%; font-size: .7rem; color: var(--muted); opacity: .85; }
.vt .vstate { margin-top: .2rem; }
.talkfilter { display: flex; align-items: center; gap: .4rem .9rem; flex-wrap: wrap; margin: .1rem 0 .55rem; }
.talkfilter .libchips { margin: 0; }
.talkhint { color: var(--muted); font-size: .78rem; }
/* 集數格：有你的語言字幕的集數，角落的點換成主色 */
.ep .dot.sub { background: var(--accent); }
@media (max-width: 560px) {
  .talkrow { grid-template-columns: auto minmax(0, 1fr); }
  .talkrow .tside { grid-column: 2; justify-content: flex-end; flex-wrap: wrap; }
}

/* 鍵盤焦點要看得見（第 7 批 #52）：可以按的非原生元素（role="button"）、改成按鈕的列與 ✕ */
[role="button"][tabindex]:focus-visible, .nrow:focus-visible, .sdel:focus-visible, .tgtoggle:focus-visible,
.tr-t:focus-visible, .tr-chapter:focus-visible, .tr-mark:focus-visible, button.logo:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* 翻譯任務頁：處理中幾份（只有這一句是 aria-live） */
.pagehead .tasklive { color: var(--accent); font-size: .8rem; margin-left: .6rem; }
.pagehead .tasklive:empty { display: none; }
.libmore:empty { display: none; }


/* ============ 2026-10-11 介面改版：串流平台的片牆 ============
   使用者指定 Netflix／Disney+ 的感覺。設計決策：
   - 骨架照串流平台：首頁一大幅主視覺（看到一半的那支）＋一排排影片；片庫是格子（我的片單），不是輪播。
   - 這個產品自己的記號：主視覺疊著「你停下那一秒」的雙語字幕，時間碼用等寬字（字幕翻譯稿的格式）。
   - 琥珀色只給主要動作、進度條、目前位置；篩選的選中狀態改成白底黑字（以前到處都是琥珀，主要按鈕反而不突出）。
   - 縮圖一律 16:9、圓角 4px；hover 只亮框線，不浮起來。 */
:root { --bg: #0b0c0f; --surface: #14171c; --surface-2: #1b1f26; --radius: 4px; }

/* 篩選的選中狀態：中性色，不搶主要按鈕的琥珀 */
.libchips button.on { background: var(--ink); color: #0b0c0f; border-color: var(--ink); }
.libchips button small { opacity: .7; }

/* ---------- 首頁主視覺 ---------- */
.home .hero2 {
  position: relative; display: grid; grid-template-columns: minmax(19rem, 40%) 1fr;
  min-height: clamp(19rem, 56vh, 34rem); margin: 0 -2.5rem .4rem; overflow: hidden; background: #000;
}
.hero2art { grid-column: 1 / -1; grid-row: 1; position: relative; }
.hero2art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
/* 文字要讀得到：左邊壓暗、底部接回頁面底色（主視覺跟下面的列之間沒有一條硬邊） */
.hero2art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg) 0%, #0b0c0fe6 26%, #0b0c0f66 50%, transparent 72%),
    linear-gradient(0deg, var(--bg) 0%, transparent 32%);
}
.hero2body { grid-column: 1; grid-row: 1; position: relative; z-index: 2; align-self: end; padding: 2rem 2.5rem 2.4rem; }
.hero2label { color: var(--muted); font-size: .82rem; margin-bottom: .35rem; }
.hero2body h1 {
  margin: 0 0 .5rem; font-size: clamp(1.35rem, 2.6vw, 2.05rem); line-height: 1.3; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hero2meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; color: var(--ink-2); font-size: .88rem; }
.hero2meta .tc, .hero2tc { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.hero2bar { height: 3px; background: #ffffff2e; margin: .7rem 0 1.1rem; max-width: 22rem; }
.hero2bar i { display: block; height: 100%; background: var(--accent); }
.hero2btns { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.hero2bar + .hero2btns { margin-top: 0; }
.btn.big { padding: .65rem 1.4rem; font-size: 1rem; font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; }
.btn.big svg { width: 18px; height: 18px; fill: currentColor; }
/* 你停下那一秒的那一句：照站內播放器的字幕排（中文大、原文小），右半邊畫面的下方，像真的燒在片子上 */
.hero2sub {
  position: absolute; z-index: 1; left: 42%; right: 2rem; bottom: 2.4rem;
  display: flex; flex-direction: column; align-items: center; gap: .15rem; text-align: center;
  text-shadow: 0 2px 6px #000, 0 0 3px #000; pointer-events: none;
}
.hero2sub[hidden] { display: none; }
.hero2tc {
  font-size: .72rem; color: #fff; background: #000000a6; border: 1px solid #ffffff33;
  padding: 0 .45rem; border-radius: 2px; margin-bottom: .45rem; text-shadow: none;
}
.hero2zh { color: #fff; font-size: clamp(1.05rem, 2vw, 1.55rem); font-weight: 500; line-height: 1.4; }
.hero2en { color: #d8d8d8; font-size: clamp(.8rem, 1.25vw, 1rem); line-height: 1.4; }

/* 主視覺下面的貼網址：縮成一條 */
.watchbar.compact { padding: .4rem 0 0; }
.watchbar.compact .addbar { margin: 0; }
.watchbar.compact .privacy-note:not(.said) { display: none; }
.watchbar.compact .privacy-note { margin-top: .4rem; }

/* 翻不了的原因：整頁講一次 */
.abilityhint { color: var(--muted); font-size: .82rem; margin: 1rem 0 -.6rem; }
.abilityhint[hidden] { display: none; }

/* ---------- 一排排影片 ---------- */
.home .row-title { font-size: 1.1rem; margin: 1.8rem 0 .55rem; }
.vthumb, .card .poster { border-radius: var(--radius); }
.vtile:hover .vthumb, .card:hover .poster { border-color: #ffffff80; }
.card:hover .poster { transform: none; }
.vt b { font-size: .88rem; }
.vtile > .vt.vstate:empty { display: none; }
.vstate .substate.none .stact { margin-left: 0; }
/* 桌機的左右箭頭：列兩端各一顆，捲到底的那邊不出現 */
.rowwrap { position: relative; }
.rowwrap .row { scrollbar-width: none; }
.rowwrap .row::-webkit-scrollbar { display: none; }
/* 觸控裝置用手指滑，不需要那條灰色捲軸 */
@media (hover: none) { .row { scrollbar-width: none; } .row::-webkit-scrollbar { display: none; } }
.rowarrow {
  position: absolute; top: 0; bottom: 3.2rem; z-index: 3; width: 2.6rem; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transition: opacity .15s;
}
.rowarrow.prev { left: -2.5rem; background: linear-gradient(90deg, var(--bg) 30%, transparent); }
.rowarrow.next { right: -2.5rem; background: linear-gradient(270deg, var(--bg) 30%, transparent); }
.rowarrow svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rowwrap:hover .rowarrow, .rowarrow:focus-visible { opacity: 1; }
.rowarrow[hidden] { display: none; }
/* 首頁「追的劇有新集數」裡的橫式卡：跟影片小卡一樣大，不再是兩倍寬的大圖 */
.home .card.wide { flex-basis: 15.5rem; }
.home .card { flex-basis: 15.5rem; }
.home .card .poster { aspect-ratio: 16 / 9; }
.home .card .poster img { object-position: center 25%; }

.poster img.broken, .vthumb img.broken { visibility: hidden; }

/* ---------- 我的片庫 ---------- */
.libhead { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: 1.4rem 0 .9rem; }
.libhead h2 { margin: 0 auto 0 0; font-size: 1.4rem; }
.libhead .shelfq {
  width: 15rem; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--radius); padding: .35rem .7rem; font-size: .85rem;
}
.libhead .shelfq:focus { outline: none; border-color: var(--ink-2); }
.libadd { margin-bottom: .8rem; }
.libadd[hidden] { display: none; }
.libsections, .shelfspaces, .shelfcats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.libsections::-webkit-scrollbar, .shelfspaces::-webkit-scrollbar, .shelfcats::-webkit-scrollbar { display: none; }
.libsections button, .shelfspaces button, .shelfcats button { flex: none; white-space: nowrap; }
.shelf-tools { padding: 0 0 .2rem; gap: .5rem; }
.shelf-tools .libchips { margin-bottom: 0; }
/* 片單是格子：一律 16:9，直式海報裁成橫的（看得到臉的上半部） */
.libgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: 1.3rem .9rem;
}
.libgrid .card { min-width: 0; }
.libgrid .card .poster, .libgrid .card .poster.wide { aspect-ratio: 16 / 9; }
.libgrid .card .poster img { object-position: center 25%; }
.libgrid .card .poster img.cavatar { width: 2.4rem; height: 2.4rem; }
.libgrid .card .cavatar ~ .badge.kind { left: 3.3rem; bottom: .8rem; }
.libgrid .card .ct b { font-size: .9rem; }

@media (max-width: 760px) {
  .home .hero2 { display: block; margin: 0 -.8rem .4rem; min-height: 0; }
  .hero2art { aspect-ratio: 16 / 9; }
  .hero2art::after { background: linear-gradient(0deg, var(--bg) 0%, transparent 45%); }
  .hero2body { padding: .2rem .8rem .6rem; }
  /* 小螢幕只放中文那一行（最多兩行）：原文、時間碼一起放會蓋掉半張圖 */
  .hero2sub { left: .8rem; right: .8rem; bottom: .7rem; }
  .hero2tc, .hero2en { display: none; }
  .hero2zh { font-size: 1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .watchbar.compact .addbar { flex-wrap: nowrap; }
  .watchbar.compact .addbar input { flex: 1 1 auto; min-width: 0; }
  .watchbar.compact .addbar .btn { flex: none; }
  .hero2btns .btn { flex: 1 1 0; justify-content: center; }
  .home .card, .home .card.wide { flex-basis: 13rem; }
  .vtile { flex-basis: 13rem; }
  .libhead { padding: 1rem 0 .7rem; }
  .libhead h2 { font-size: 1.2rem; }
  .libhead .shelfq { order: 5; width: 100%; }
  .libgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .6rem; }
  .libgrid .card .ct { font-size: .74rem; }
  .libgrid .card .badge.sub { display: none; }
}
.shelf-tools .libchiplabel { flex: none; white-space: nowrap; }

/* ---------- 播放頁（2026-10-11 介面改版第 2 步） ----------
   全黑底（以前 90% 透明，後面的作品視窗隱約透出來，看起來疊了兩層）；上面一條返回＋片名＋稍後看＋更多；
   下面一條控制列分兩組：左邊看懂外語片的工具、右邊播放本身的。按鈕平常是透明的文字鈕，只有「翻譯字幕」這種
   該做的下一步（.cta）才上琥珀色。 */
.player-mask { background: #000; gap: .7rem; }
.player-top, .player-info { width: min(70rem, 94vw); }
.player-top { display: flex; align-items: center; gap: .5rem; }
.pback {
  display: inline-flex; align-items: center; gap: .35rem; flex: none;
  background: none; border: 0; color: var(--ink); font-size: .95rem; padding: .35rem .5rem .35rem .2rem; border-radius: var(--radius);
}
.pback svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pback:hover { background: #ffffff14; }
.ptitle { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.ptitle b { color: var(--ink); font-size: 1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptitle span { color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptitle span:empty { display: none; }
.player-top .subset-panel { bottom: auto; top: calc(100% + .4rem); left: auto; right: 0; transform: none; }
.player-info { justify-content: space-between; flex-wrap: nowrap; gap: .4rem 1rem; }
.pgroup { display: flex; align-items: center; gap: .2rem; flex-wrap: wrap; min-width: 0; }
.pgroup.end { justify-content: flex-end; }
.player-info .btn.ghost, .player-top .btn.ghost { background: transparent; color: var(--ink-2); }
.player-info .btn.ghost:hover, .player-top .btn.ghost:hover, .player-info .subset[open] > summary { background: #ffffff1a; color: var(--ink); }
.player-info .sub-status { margin: 0 .4rem; }
.player-info .sub-status:empty { display: none; }
/* 字幕往上提，不壓在 YouTube 自己的控制列（滑鼠移上去時出現的進度條，約 48px 高）上 */
.sub-overlay { bottom: max(11%, 3.6rem); }
.player-box:fullscreen .sub-overlay, .player-box.fake-fs .sub-overlay { bottom: max(9%, 4.5rem); }
/* 逐字稿打開時的格線多了上面那一條 */
.player-mask.with-transcript { grid-template-rows: auto auto auto auto; }
.player-mask.with-transcript .player-top { grid-column: 1; width: 100%; }
.player-mask.with-transcript .player-info { width: 100%; }
.player-mask.with-transcript .transcript { grid-row: 1 / span 4; }
@media (max-width: 900px) {
  .player-mask.with-transcript { grid-template-rows: auto auto auto auto minmax(0, 1fr); }
  .player-mask.with-transcript .transcript { grid-row: 5; }
}
@media (max-width: 760px) {
  .player-mask { justify-content: flex-start; padding-top: env(safe-area-inset-top); }
  .player-top { width: 100vw; padding: .3rem .4rem; }
  .player-info { width: 100vw; padding: 0 .4rem; flex-wrap: wrap; }
  .pgroup.end { margin-left: auto; }
  .pback span { display: none; }
}

/* ---------- 作品頁（2026-10-11 介面改版第 2 步） ----------
   大圖（橫幅／第一支影片／封面）＋標題＋播放鍵，像串流平台的作品詳細頁；整理用的收進「追蹤與分類」。 */
.modal-mask { background: #000000cc; }
.modal { width: min(56rem, 100%); background: var(--bg); border-color: var(--line); }
.modal .mhead { padding: 2.2rem 2rem 1.4rem; background-color: #000; }
.modal .mhead.hasart { min-height: 21rem; display: flex; flex-direction: column; justify-content: flex-end; }
.modal .mhead::after { background: linear-gradient(180deg, #0b0c0f33 0%, #0b0c0f99 45%, var(--bg) 96%); }
.modal .mhead h2 { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.3; }
.modal .mhead .meta { color: var(--ink-2); margin-top: .3rem; }
.mplay { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; margin-top: 1.1rem; }
.mplay:empty { display: none; }
.mplaynote { color: var(--ink-2); font-size: .88rem; font-family: inherit; min-width: 0; max-width: 28rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msubstate { margin-top: .7rem; font-size: .85rem; }
.modal h3 { color: var(--ink); font-size: 1.02rem; }
.mmanage { border: 1px solid var(--line); border-radius: var(--radius); }
.mmanage > summary {
  cursor: pointer; list-style: none; padding: .55rem .8rem; color: var(--ink-2); font-size: .88rem;
  display: flex; align-items: center; gap: .5rem;
}
.mmanage > summary::-webkit-details-marker { display: none; }
.mmanage > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
.mmanage[open] > summary::before { transform: rotate(90deg); }
.mmanage > summary:hover { color: var(--ink); }
.mmanage > .actions { padding: .2rem .8rem .8rem; }
@media (max-width: 760px) {
  .modal .mhead { padding: 1.4rem 1rem 1rem; }
  .modal .mhead.hasart { min-height: 15rem; }
  .mplay .btn.big { flex: 1 1 auto; justify-content: center; }
  .mplaynote { flex-basis: 100%; max-width: none; }
}
/* 片源列的集數欄：「集數未核對」標籤塞在固定 4.2rem 寬的欄裡會溢出去蓋住片名——欄寬至少 4.2rem、內容多就跟著寬 */
.linkrow { grid-template-columns: minmax(4.2rem, max-content) minmax(0, 1fr) auto auto; }
@media (max-width: 620px) { .linkrow { grid-template-columns: minmax(3.4rem, max-content) minmax(0, 1fr) auto; } }
/* 窄螢幕上按鈕不能被長片名擠成直排（「稍後看」「返回」變成一字一行）：按鈕不縮，片名自己省略 */
.player-top .btn, .player-top .subset > summary, .modal .mback { flex: none; white-space: nowrap; }
.modal .mbartitle { flex: 1 1 auto; }

/* ---------- 翻譯任務（2026-10-12 介面改版第 3 步） ----------
   一列三行：片名、狀態（前面一個色點）、一行小字（句數・時間・額度・分享範圍，用細直線隔開）；進度條壓在縮圖底部。 */
.taskrow { grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: 1rem; padding: .7rem 0; }
.tthumb { position: relative; border-radius: var(--radius); }
.tthumb .tbar {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; max-width: none; height: 3px; border-radius: 0; background: #ffffff33;
}
.tmain b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; }
.tstate { display: flex; align-items: center; gap: .45rem; margin-top: .25rem; font-size: .82rem; }
.tstate::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none; }
.tstate.ok { color: var(--good); }
.tstate.run { color: var(--accent); }
.tstate.warn { color: var(--bad); }
.tnote { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem 0; }
.tsep { display: inline-block; width: 1px; height: .75em; background: var(--line-strong); margin: 0 .55rem; }
.tnote.twhy { display: block; }
.tacts .btn.ghost { background: transparent; border: 1px solid var(--line-strong); color: var(--ink-2); }
.tacts .btn.ghost:hover { border-color: var(--ink-2); color: var(--ink); }
@media (max-width: 640px) {
  .taskrow { grid-template-columns: 6.5rem minmax(0, 1fr); gap: .5rem .8rem; }
}
/* 帳號與登入裝置視窗最下面的危險區：刪除帳號（以前紅字緊貼在帳號選單的「登出」旁邊） */
.dangerzone {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line);
}
.dangerzone b { color: var(--bad); font-weight: 500; font-size: .9rem; }
.dangerzone .btn.danger { flex: none; color: var(--bad); border: 1px solid #d9655c66; background: transparent; }

/* ---------- 登入前首頁（2026-10-12 介面改版第 4 步） ----------
   左文右圖：左邊一句話＋開始使用，右邊是播放器展示框（產品本身）。以前是置中大標＋一顆按鈕＋四張一樣的圖示卡。 */
.lnav { max-width: 72rem; }
.lhero {
  max-width: 72rem; text-align: left; padding: 4rem 2rem 4.5rem;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3rem; align-items: center;
}
.lhero h1 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.3; }
.lhero .lsub { margin-bottom: 1.8rem; }
.lcta { justify-content: flex-start; }
.lcta .btn { padding: .75rem 1.8rem; font-size: 1rem; font-weight: 600; }
.lnote { max-width: 30rem; }
/* 展示框：我們自己的播放器外框——上面一條返回＋片名＋「示範」，下面是畫面與字幕、進度條 */
.ldemo { margin: 0; }
.ldemo-frame { border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; background: #000; box-shadow: 0 24px 60px #00000099; }
.ldemo-top { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; background: #0b0c0f; border-bottom: 1px solid var(--line); }
.ldemo-top svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ldemo-title { flex: 1 1 auto; min-width: 0; font-size: .85rem; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ldemo-tag { flex: none; font-size: .7rem; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 3px; padding: 0 .4rem; }
/* 畫面：沒有影片截圖，只用一層很暗的底色分出三種場景（舞台、廚房、街道），讓字幕當主角 */
.ldemo-screen { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: flex-end; justify-content: center; transition: background-color .4s; }
.ldemo-screen[data-scene="1"] { background: radial-gradient(ellipse at 50% 35%, #26324a 0%, #0d1119 70%); }
.ldemo-screen[data-scene="2"] { background: radial-gradient(ellipse at 50% 35%, #3d2a1a 0%, #130d08 70%); }
.ldemo-screen[data-scene="3"] { background: radial-gradient(ellipse at 50% 35%, #213528 0%, #0b120d 70%); }
.ldemo-sub {
  display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center;
  padding: 0 7% 13%; text-shadow: 0 2px 6px #000, 0 0 3px #000;
}
.ldemo-tc {
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .72rem; color: #fff;
  background: #000000a6; border: 1px solid #ffffff33; padding: 0 .45rem; border-radius: 2px; margin-bottom: .45rem; text-shadow: none;
}
.ldemo-tr { color: #fff; font-size: clamp(1rem, 1.9vw, 1.45rem); font-weight: 500; line-height: 1.4; }
.ldemo-src { color: #d8d8d8; font-size: clamp(.78rem, 1.2vw, .95rem); line-height: 1.45; }
.ldemo-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #ffffff26; }
.ldemo-bar i { display: block; height: 100%; background: var(--accent); transition: width .4s; }
.ldemo-tabs { display: flex; gap: .4rem; justify-content: center; margin-top: .9rem; }
.ldemo-tabs button {
  background: transparent; border: 1px solid var(--line-strong); color: var(--muted);
  border-radius: 999px; padding: .2rem .85rem; font-size: .8rem;
}
.ldemo-tabs button[aria-pressed="true"] { background: var(--ink); color: #0b0c0f; border-color: var(--ink); }
/* 痛點：標題靠左、兩欄 */
.lpain { max-width: 72rem; padding: 1rem 2rem 2.5rem; }
.lpain h2 { text-align: left; font-size: 1.25rem; }
.lpain-list { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.6rem 2.4rem; }
.lpain-item .lfix { color: var(--ink-2); }
.lpain-item .lfix::before { content: "→ "; color: var(--accent); }
/* 事實清單：三欄，上面一條線 */
.lspec { max-width: 72rem; margin: 0 auto; padding: 0 2rem 3rem; }
.lspec dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem 2.4rem; margin: 0;
  border-top: 1px solid var(--line); padding-top: 1.6rem; }
.lspec dt { color: var(--muted); font-size: .8rem; margin-bottom: .35rem; }
.lspec dd { margin: 0; font-size: .95rem; line-height: 1.6; }
.lprivacy { max-width: 72rem; padding: 1rem 2rem 3rem; }
.lprivacy ul { max-width: 46rem; }
.lfoot { max-width: 72rem; padding: 2rem 2rem 3rem; }
@media (max-width: 860px) {
  .lhero { grid-template-columns: 1fr; gap: 2rem; padding: 2rem 1.2rem 3rem; }
  .lpain, .lspec, .lprivacy { padding-left: 1.2rem; padding-right: 1.2rem; }
  .lspec dl { grid-template-columns: 1fr; }
  .lnav { padding: 1rem 1.2rem; }
}
/* 大標只在標點與空白處換行（中文詞不被切開：以前斷成「貼上網／址就能看懂」）；真的太長才退回任意處換行 */
.lhero h1 { word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
/* ---------- 首頁：推薦頻道（2026-11，主題探索）---------- 
   一張橫的小卡：圓頭像、名稱、這個站自己的訊號（已有幾支你的語言的字幕）、加入片庫。
   琥珀色不用在這裡——那是主要動作與進度的顏色；有字幕的那一行只把字提亮。 */
.chrow { gap: .7rem; }
.chcard {
  flex: 0 0 17rem; min-width: 0; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr);
  column-gap: .8rem; row-gap: .1rem; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem .8rem;
}
.chava {
  grid-row: 1 / span 3; align-self: start; width: 3.4rem; height: 3.4rem; border-radius: 50%; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line-strong);
}
.chava img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }
.chava img.broken { visibility: hidden; }
.chcard b { font-size: .9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chwhy { font-size: .76rem; color: var(--muted); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chwhy.has { color: var(--ink-2); }
.chcard .btn { justify-self: start; margin-top: .45rem; }
@media (max-width: 760px) { .chcard { flex-basis: 15rem; } }
/* 後台：探索主題的編輯表單 */
.topicform { margin: .9rem 0; padding: .9rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius); max-width: 46rem; display: grid; gap: .6rem; }
.topicform h4 { margin: 0; font-size: .95rem; }
.topicform label { display: grid; gap: .25rem; font-size: .8rem; color: var(--muted); }
.topicform input:not([type="checkbox"]), .topicform textarea {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); border-radius: var(--radius);
  padding: .4rem .6rem; font: inherit; font-size: .88rem;
}
.topicform textarea { font-family: var(--mono); font-size: .82rem; line-height: 1.6; resize: vertical; }
.topicform input:focus, .topicform textarea:focus { outline: none; border-color: var(--ink-2); }
.topicnums { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; }
.topicform .topiccheck { display: flex; align-items: center; gap: .5rem; color: var(--ink-2); font-size: .85rem; }
.topicform .topiccheck input { accent-color: var(--accent); }