/* 顏色只從 tokens.css 取得；此檔保留排版、尺寸與元件狀態。 */
:root {
  /* 🎨 字級六階（Codex 設計對批 2026-09-14）：全站 font-size 只用這六個值；新程式碼請用變數 */
  --fs-note: 0.75rem; --fs-sub: 0.875rem; --fs-body: 1rem; --fs-lead: 1.25rem; --fs-h2: 1.5rem; --fs-h1: 2rem;
  --radius: 16px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Noto Sans TC', -apple-system, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.7;
  min-height: 100vh;
}
.serif { font-family: 'Noto Serif TC', serif; }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }

header.app {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  padding: calc(10px + env(safe-area-inset-top)) 0 10px;
}
.header-inner { display: flex; align-items: center; gap: 10px; max-width: 860px; margin: 0 auto; padding: 0 16px; }
.logo-seal {
  width: 30px; height: 30px; background: var(--vermillion); color: var(--paper);
  display: grid; place-items: center; border-radius: 8px;
  font-family: 'Noto Serif TC', serif; font-weight: 700; font-size: 0.875rem;
  box-shadow: 2px 2px 0 var(--ink); flex-shrink: 0;
}
.logo-text { font-family: 'Noto Serif TC', serif; font-weight: 900; font-size: 1.25rem; text-decoration: none; color: var(--ink); }
.header-spacer { flex: 1; }

/* .btn 全部改由 components.css 定義（2026-09-22 換上聽摘設計系統）：主鍵＝米白實體鍵，
   朱紅退出按鈕、只標播放位置。這裡不要再寫 .btn 的底色——寫了就會蓋掉 components.css。 */
.btn, .tab, button, a { touch-action: manipulation; }
.tab:focus-visible, button:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;   /* 焦點環用 ink：朱紅只留播放位置 */
}

/* 分頁列：窄屏（iPhone 390px）改橫向捲動——2026-08-17 實機截圖抓到
   五顆 tab 被壓成一字一行的直書。nowrap + 隱藏捲軸，與 #feed-filters 同一招。 */
.tabs { display: flex; gap: 8px; margin: 18px 0 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tabs .tab { flex-shrink: 0; white-space: nowrap; }

/* 橫向捲動列的邊緣淡出（由 scroll-hint.js 寫 data-more 驅動）。
   捲軸藏起來之後，這是唯一能讓人知道「右邊還有分頁」的線索——集數頁五個分頁在
   任何 iPhone 寬度都有兩個在畫面外。捲到底就撤掉，不留假提示。 */
[data-more="right"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent); }
[data-more="left"]  { -webkit-mask-image: linear-gradient(to left,  #000 calc(100% - 30px), transparent); mask-image: linear-gradient(to left,  #000 calc(100% - 30px), transparent); }
[data-more="both"]  { -webkit-mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent); }
.tab {
  padding: 8px 18px; border-radius: 999px; border: none;
  background: var(--surface-1); font-weight: 700; font-size: 0.875rem; cursor: pointer;
  color: var(--ink-soft); font-family: inherit; transition: background-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
}
.tab.active { background: var(--ink); color: var(--paper); }

.search-row { display: flex; gap: 8px; margin: 16px 0; }
/* ⚠️ 按 type 選的：新增一種 type 就會有一個欄位沒樣式（聽摘 2026-08-18 email 欄位從 48px 掉到 19px） */
input[type="text"], input[type="search"], input[type="url"], input[type="password"], input[type="email"] {
  flex: 1; min-width: 0; padding: 12px 16px; border-radius: var(--r-chip, 10px);
  border: none; background: var(--surface-1);
  font-size: 16px; font-family: inherit; color: var(--ink); outline: none;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 0.15s;
}
input:focus { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 45%, transparent); }   /* 朱紅只標播放位置 */

.section-label {
  font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.04em; color: var(--ink-soft);
  margin: 24px 0 10px;
}

.card {
  background: var(--surface-1); border: none;
  border-radius: var(--radius); padding: 18px;
}
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
/* 我的節目：小封面橫滑列（對齊 iOS）——原本兩欄巨卡在手機一張佔半屏，11 個節目要捲好幾屏 */
#podcast-grid { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
#podcast-grid::-webkit-scrollbar { display: none; }
#podcast-grid .pod-tile { flex: 0 0 84px; background: none; border:0; padding:0; border-radius: 0; overflow: visible; font:inherit; text-align:left; }
#podcast-grid .pod-tile img, #podcast-grid .pod-tile .ph {
  width: 84px; height: 84px; aspect-ratio: auto; border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
#podcast-grid .pod-tile .ph { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: var(--surface-1); color:var(--fg-muted); }
#podcast-grid .pod-tile .t {
  padding: 7px 2px 0; font-size:0.75rem; font-weight: 600; color: var(--ink-soft);
  text-align: center; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.pod-tile {
  background: var(--surface-1); border: none; border-radius: var(--radius);
  overflow: hidden; cursor: pointer; transition: transform 0.15s;
  text-align: left; font-family: inherit; padding: 0;
}
.pod-tile:hover { transform: translateY(-3px); }
.pod-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--paper-deep); }
.pod-tile .ph { width: 100%; aspect-ratio: 1; display: grid; place-items: center; font-size: 2rem; background: var(--pine); color: var(--paper); }
.pod-tile .t { padding: 10px 12px; font-weight: 700; font-size: 0.875rem; line-height: 1.4; color: var(--ink); }

.ep-item {
  display: flex; gap: 12px; align-items: center; padding: 14px;
  background: var(--surface-1); border-radius: var(--radius);
  margin-bottom: 8px; cursor: pointer; transition: background 0.15s;
}
.ep-item:hover { background: var(--surface-2); }
/* 批次選取框：用字元而不是 <input type=checkbox>，因為整列都可點、原生 checkbox 會有兩個點擊目標打架 */
.ep-item .batch-box { font-size: 1.25rem; line-height: 1; flex-shrink: 0; color: var(--ink); width: 20px; text-align: center; }
.ep-item .batch-box.off { color: var(--line); }
.ep-item .meta { flex: 1; min-width: 0; }
.ep-item .t { font-weight: 700; font-size: 0.875rem; line-height: 1.45; }
/* meta 用內文字體：等寬只留給時間戳（.tstamp／.tt），不然整行像程式碼 */
.ep-item .sub { font-size: 0.75rem; color: var(--ink-soft); margin-top: 3px; font-variant-numeric: tabular-nums; }
.pill {
  font-size:0.75rem; padding: 2px 10px; border-radius: 999px; font-weight: 700;
  flex-shrink: 0; letter-spacing: 0.05em;
}
/* 📱 手機:集數卡右側按鈕+狀態 pill 把標題擠成一詞一行 → 縮圖+標題一行,按鈕/pill 整組第二行
   (.meta 是可壓縮 flex:1,行不會溢出、wrap 不觸發——必須用 min-width 強制佔滿,2026-07-30) */
@media (max-width: 560px) {
  .ep-item { flex-wrap: wrap; row-gap: 8px; }
  .ep-item .meta { min-width: calc(100% - 56px); }        /* 56 = 縮圖 44 + gap 12;無縮圖卡片就是整行 */
  .ep-item > img + .meta { min-width: calc(100% - 56px); }
  /* YouTube 的縮圖是 16:9（72px 寬），不是節目封面那種 44px 方形。
     沿用上面 56px 的假設會讓「縮圖＋標題」超過一行寬 → wrap 觸發 → 縮圖被擠到自己一行。
     2026-07-31 加了 YouTube 搜尋後實際看到這個破版。 */
  .ep-item.yt .meta { min-width: calc(100% - 84px); }     /* 84 = 縮圖 72 + gap 12 */
  .ep-item > button, .ep-item > span.pill { order: 9; }
}
.pill.ready { background: color-mix(in srgb, var(--pine) 14%, transparent); color: var(--pine); }
.pill.new { background: var(--paper-deep); color: var(--ink-soft); }
/* dark theme: gold chip at 0.18 alpha bg keeps >4.5:1 with the light gold text */
.pill.transcribing { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); }
.pill.error { background: color-mix(in srgb, var(--status-error) 12%, transparent); color: var(--status-error); }   /* 失敗＝冷紅 alert */

.snip-card {
  background: var(--surface-1); border: none;
  border-radius: var(--radius); padding: 18px; margin-bottom: 12px;
}
.snip-card .eyebrow { display: inline-flex; align-items: center; gap: 5px; font-size:0.75rem; font-weight: 800; letter-spacing: 0.22em; color: var(--ink-soft); margin-bottom: 6px; }
.snip-card .title { font-family: "Noto Serif TC", serif; font-weight: 900; font-size: 1.25rem; line-height: 1.5; letter-spacing: 0.01em; }
.snip-card .src { font-size:0.75rem; color: var(--ink-soft); margin-top: 4px; font-variant-numeric: tabular-nums; }
.snip-card .summary { font-size: 0.875rem; color: var(--ink-soft); margin-top: 8px; }
.ai-label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size:0.75rem; font-weight: 800; letter-spacing: 0.14em;
  color: var(--gold); margin-top: 10px; text-transform: uppercase;
}
ul.bullets {
  margin: 8px 0 0; padding-left: 1.15em;
  display: flex; flex-direction: column; gap: 7px;
}
ul.bullets li { font-size: 1rem; line-height: 1.65; color: var(--ink); }
ul.bullets li::marker { color: var(--gold); }
/* 逐字稿＝引言塊（Snipd quote block）：左金條、serif、預設 3 行、點展開 */
.snip-card .text {
  font-size: 1rem; font-family: "Noto Serif TC", serif; margin-top: 10px; padding: 10px 14px;
  background: var(--surface-2); border-left: 3px solid color-mix(in srgb, var(--gold) 70%, transparent);
  border-radius: 16px; white-space: pre-wrap; color: var(--ink-soft); line-height: 1.8; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.snip-card .text.open { display: block; -webkit-line-clamp: unset; }
.snip-card .quote-src { font-size: 0.75rem; color: var(--ink-soft); margin-top: 4px; padding-left: 14px; cursor: pointer; }  /* 第二層灰再疊 opacity 0.7＝4.22:1，而它是「點一下展開全文」的點擊目標 */
/* ⬆ 匯出／⋯ 選單（details dropdown） */
.act-menu { position: relative; }
.act-menu summary { list-style: none; cursor: pointer; }
.act-menu summary::-webkit-details-marker { display: none; }
.act-menu[open] > .menu-pop {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 30; min-width: 150px;
  background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  /* SPEC §2：••• 選單是浮層 → 頂光 hl-s2＋elev-2（原本是手刻的一層陰影，換主題會漏） */
  border-radius: 16px; padding: 6px; box-shadow: var(--hl-s2), var(--elev-2);
  display: flex; flex-direction: column; gap: 2px;
}
.menu-pop .btn { justify-content: flex-start; width: 100%; border: none; background: transparent; }
.menu-pop .btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.snip-card .actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.export-ok { font-size: 0.75rem; color: var(--pine); font-weight: 700; }

.empty { text-align: center; padding: 48px 16px; color: var(--ink-soft); }
.empty .big { font-size: 2rem; }
.spinner {
  display: inline-block; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--gold);   /* 處理中＝金（聽摘色彩角色） */
  animation: spin 0.8s linear infinite; vertical-align: -3px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* skeleton shimmer + card entrance (perceived-speed polish) */
.skel {
  background: linear-gradient(90deg, var(--card) 25%, var(--paper-deep) 50%, var(--card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
  border-radius: 16px;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.skel-row { display: flex; gap: 12px; padding: 14px 4px; align-items: center; }
.ep-item, .snip-card, .pod-tile, .integ { animation: cardIn 0.28s ease both; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* mobile: app-grade bottom tab bar (top pills hide) */
@media (max-width: 640px) {
  .tabs.main-tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    margin: 0; padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    display: flex; justify-content: space-around; gap: 0;
  }
  .tabs.main-tabs .tab {
    border: none; background: none; flex: 1; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size:0.75rem; padding: 4px 0; color: var(--ink-soft);
  }
  .tabs.main-tabs .tab .ico { width: 22px; height: 22px; }
  .tabs.main-tabs .tab.active { background: none; color: var(--ink); box-shadow: none; }   /* 聽摘同款：底部列選中＝字色＋圖示，不借朱紅 */
  main.wrap { padding-bottom: 96px; }
}

.toast {
  position: fixed; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); padding: 10px 22px; border-radius: 999px;
  font-size: 0.875rem; font-weight: 700; z-index: 200; box-shadow: 0 8px 24px rgba(28,24,19,0.3);
  opacity: 0; transition: opacity 0.25s; pointer-events: none; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; }

.tabs.main-tabs .tab .ico { width: 20px; height: 20px; display: none; }
@media (max-width: 640px) { .tabs.main-tabs .tab .ico { display: block; } }
#snip-sheet::before {
  content: ''; display: block; width: 38px; height: 4px; border-radius: 8px;
  background: var(--line); margin: -6px auto 12px;
}

/* top-right account menu */
#acct-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-3); color: var(--ink); border: 1px solid var(--line-strong);   /* 聽摘同款：avatar 改灰，朱紅只標播放位置 */
  font-weight: 800; font-size: 0.875rem; cursor: pointer;
}
#acct-dropdown {
  position: absolute; right: 0; top: 44px; z-index: 300;
  background: var(--surface-2); border-radius: 16px;
  min-width: 230px; padding: 8px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; gap: 2px;
}
#acct-dropdown .acct-head { padding: 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
#acct-dropdown .acct-head b { font-size: 0.875rem; display: block; overflow: hidden; text-overflow: ellipsis; }
#acct-dropdown .acct-head small { font-size:0.75rem; color: var(--ink-soft); }
#acct-dropdown a, #acct-dropdown button {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border: none; background: none;
  color: var(--ink); font-size: 0.875rem; font-family: inherit;
  border-radius: 16px; cursor: pointer; text-decoration: none;
}
#acct-dropdown a:hover, #acct-dropdown button:hover { background: var(--surface-3); }
#acct-dropdown .danger { color: var(--status-error); }

/* GLOBAL GUARD: the hidden attribute always wins, no matter what display a rule sets.
   (This class of bug bit us twice: #nowplaying and #acct-dropdown.) */
[hidden] { display: none !important; }

/* ============================================================
   MOTION SYSTEM — 讓整體手感從「網頁」變「原生 app」
   彈性緩動 + 點擊壓下回饋 + 去手機灰框 + 順滑捲動。
   附加在最後，同權重後蓋，覆寫上方生硬的 transition:all。
   ============================================================ */
:root {
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);   /* 帶一點過衝，像回彈 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);        /* 快進慢出，滑順收尾 */
}
html { scroll-behavior: smooth; }
body {
  -webkit-tap-highlight-color: transparent;          /* 手機點擊不再閃醜灰框 */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;                    /* 邊界不連動、無橡皮筋外溢 */
}

/* 所有可點元素：hover 用 out 緩動、按下瞬間縮 0.96（native 壓感） */
.tab, .pill, .chip {
  transition: transform 0.22s var(--ease-spring), background 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), opacity 0.18s;
}
.tab:active, .pill:active,
button:active:not(:disabled), .chip:active,
[data-plan]:active, [data-x]:active, [data-share]:active, [data-card]:active,
[data-extend]:active, [data-note]:active, [data-del]:active {
  transform: scale(0.96);
}
.pod-tile, .ep-item, .snip-card, .card {
  transition: transform 0.25s var(--ease-spring), background 0.18s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.pod-tile:active, .ep-item:active { transform: scale(0.975); }
.pod-tile:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.35); }

/* 內容進場：彈性上浮 + 前幾張錯開（stagger），比一次全跳更順眼 */
.ep-item, .snip-card, .pod-tile, .integ {
  animation: cardInSpring 0.42s var(--ease-out) both;
}
@keyframes cardInSpring {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.snip-card:nth-child(1), .ep-item:nth-child(1) { animation-delay: 0.02s; }
.snip-card:nth-child(2), .ep-item:nth-child(2) { animation-delay: 0.06s; }
.snip-card:nth-child(3), .ep-item:nth-child(3) { animation-delay: 0.10s; }
.snip-card:nth-child(4), .ep-item:nth-child(4) { animation-delay: 0.14s; }
.snip-card:nth-child(5), .ep-item:nth-child(5) { animation-delay: 0.18s; }

/* Toast：從底部彈上來，比純淡入有生命力 */
.toast {
  transition: opacity 0.3s var(--ease-out), transform 0.42s var(--ease-spring);
  transform: translateX(-50%) translateY(16px);
}
.toast.show { transform: translateX(-50%) translateY(0); }
/* 失敗／沒存到：去 ⚠️ 之後靠左緣朱紅條扛狀態（toast(msg, 'warn')） */
.toast.warn { border-left: 3px solid var(--status-error); padding-left: 14px; }   /* 失敗＝冷紅 alert，不與播放位置的朱紅共用 */

/* 分頁切換：底部 tab 圖示按下時輕彈 */
.tabs.main-tabs .tab:active .ico { transform: scale(0.85); }
.tabs.main-tabs .tab .ico { transition: transform 0.3s var(--ease-spring); }

/* 起始節目：橫向滑動帶（不再切字），可滑、隱藏捲軸、邊緣淡出提示可捲 */
.starter-strip {
  display: flex; gap: 8px; margin-top: 12px; width: calc(100vw - 40px); max-width: 100%;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 2px 2px 8px; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; justify-content: flex-start;
  mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.starter-strip::-webkit-scrollbar { display: none; }
.starter-strip > button { scroll-snap-align: start; white-space: nowrap; }

/* 「先看成品」卡片：新訪客的第一個畫面。
   刻意做得比下面的「＋ 加入節目」按鈕更大更重——因為 63% 的人是在
   「加了節目卻還沒看到成品」那一步流失的，成品必須排在動作前面。 */
/* text-align: left 不可省——空狀態外層是置中的，不覆寫會讓卡片內文全部置中，
   標題、說明、CTA 擠成一團很難讀（第一版就是這樣） */
.try-row { display: grid; gap: 10px; margin-top: 16px; text-align: left; }
.try-lead { margin: 6px 0 2px; text-align: left; }
.text-link { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }   /* 文字不染語意色（聽摘規則） */
.try-card {
  display: flex; gap: 12px; align-items: stretch; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 16px; padding: 12px; transition: transform .18s ease, border-color .18s ease;
}
.try-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--vermillion) 45%, transparent); }
.try-card img, .try-art {
  width: 64px; height: 64px; border-radius: 16px; object-fit: cover; flex-shrink: 0;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.try-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.try-tag {
  font-size:0.75rem; font-weight: 700; letter-spacing: .04em; align-self: flex-start;
  color: var(--ink-soft); background: var(--surface-2);
  border-radius: 999px; padding: 2px 8px;
}
.try-show { font-size:0.75rem; color: var(--ink-soft); }
/* 標題可能很長（英文節目尤其），兩行截斷，不要把卡片撐爆 */
.try-title {
  font-weight: 700; font-size: 0.875rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.try-hook { font-size: 0.75rem; color: var(--ink-soft); line-height: 1.5; }
.try-meta { font-size: var(--fs-note); color: var(--ink-soft); margin-top: 2px; }
.try-or { margin-top: 22px; font-size: 0.875rem; color: var(--ink-soft); }

/* 尊重使用者的「減少動態」設定（無障礙 + 省電） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* account section: collapsible groups */
.acct-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acct-row .plan-badge {
  font-size: 0.75rem; font-weight: 800; padding: 3px 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--fg); border: 1px solid var(--line-strong);   /* 稽核 2 #13：方案不是「完成」，不用松綠 */
}
details.acct-group { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 4px; }
details.acct-group summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  font-size: 0.875rem; font-weight: 700; padding: 9px 2px; color: var(--ink);
}
details.acct-group summary::-webkit-details-marker { display: none; }
details.acct-group summary::after { content: '›'; margin-left: auto; color: var(--ink-soft); transition: transform 0.2s; font-size: 1rem; }
details.acct-group[open] summary::after { transform: rotate(90deg); }
details.acct-group .g-body { padding: 2px 2px 12px; }
details.acct-group .hint-inline { font-size:0.75rem; color: var(--ink-soft); }
.acct-group input { min-width: 0; }

/* ============================================================
   VISUAL DESIGN v2 — 從「陽春暗色」升級成「有質感的暗」
   暖調暗色 + 氛圍光暈 + 卡片景深 + 粗襯線。附加在最後、同權重後蓋。
   ============================================================ */
:root {
  /* 顏色由 tokens.css 的 appearance 主題統一提供。 */
  --line-hi: var(--line-strong);
  --glow: rgba(242, 97, 58, 0.5);
}
/* 氛圍：頂部一抹朱紅光暈 + 極淡雜訊，讓純黑背景有空氣感 */
body { position: relative; overflow-x: clip; }
.hero-sub, .how-step small, .how-step b { overflow-wrap: anywhere; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(242,97,58,0.10), transparent 60%),
    radial-gradient(90% 50% at 100% 0%, rgba(217,166,76,0.05), transparent 55%);
}

/* Header：底線 + 印章 logo 質感（對齊行銷頁的暖印章） */
header.app { border-bottom: 1px solid var(--line); }
.app-seal {
  width: 32px; height: 32px; flex-shrink: 0;
  background: linear-gradient(145deg, #f2613a, #d94f2b);
  color: #100d0e; display: grid; place-items: center; border-radius: 8px;
  font-family: 'Noto Serif TC', serif; font-weight: 900; font-size: 1rem;
  box-shadow: 0 3px 12px rgba(242,97,58,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* 卡片景深系統：頂緣受光 hairline + 由上而下微漸層 + 柔陰影 */
.card, .snip-card, .ep-item, .pod-tile, #snip-sheet, #acct-dropdown, .review-card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line);
  border-top-color: var(--line-hi);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25), 0 10px 30px rgba(0,0,0,0.18);
}
.snip-card { box-shadow: 0 2px 6px rgba(0,0,0,0.28), 0 14px 36px rgba(0,0,0,0.22); }
.pod-tile { background: var(--surface-1); }
.pod-tile img { border-bottom: 1px solid var(--line); }

/* 區塊標題：小標大寫金字，更有編輯感 */
.section-label {
  /* 2026-09-22（聽摘同款）：區塊標題不染金（金＝處理中）；次要字色＋字距就夠分出層級 */
  color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: var(--fs-xs, 0.75rem); opacity: 1;
}


/* 標題襯線更重、字距收緊，質感提升 */
h1, h2, .serif { letter-spacing: 0.01em; }

/* 底部 tab bar：毛玻璃更濃、上緣受光 */
@media (max-width: 640px) {
  .tabs.main-tabs {
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter: blur(20px) saturate(1.3);
    border-top: 1px solid var(--line-hi);
    box-shadow: 0 -8px 30px rgba(0,0,0,0.35);
  }
}

#library-empty { width: 100%; box-sizing: border-box; }
/* 空狀態圖示：從細線改成有光暈的填色圓，不再陽春 */
.empty .big svg { filter: drop-shadow(0 0 20px rgba(242,97,58,0.25)); }

/* 首次進入的英雄卡 + 三步驟：把空白填成有設計感的引導 */
/* 訪客封面（Codex 2026-09-14 第一批）：不再是一張發光的大卡——留白＋一個視覺主角（範例卡）＋唯一 CTA。
   手機垂直；≥1100px 左文右範例雙欄。 */
.hero-card {
  position: relative; width: 100%; box-sizing: border-box;
  padding: 18px 0 8px; text-align: left;
  display: flex; flex-direction: column; gap: 18px;
}
.hero-title {
  font-size: var(--fs-h1); font-weight: 900; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--ink); margin-bottom: 10px; text-wrap: balance;
}
.hero-sub { font-size: var(--fs-sub); color: var(--ink-soft); line-height: 1.8; margin: 0; }
.hero-cta { align-self: flex-start; min-height: 44px; padding: 12px 24px; font-size: var(--fs-sub); }
@media (min-width: 1100px) {
  /* 空狀態容器在 ≥720px 被限成 560px（給試讀卡與三步驟用）；封面要用整個 828px 欄寬，其餘區塊自己維持 560 置中 */
  #library-empty { max-width: 100%; }
  #library-empty .try-row, #library-empty .how-strip, #library-empty .trial-next, #library-empty .try-or { max-width: 560px; margin-left: auto; margin-right: auto; }
  /* Codex：雙欄都擠在 560–640 像手機版放大；左欄文字 ~360、右欄範例 ~480、用滿 .wrap 的 828px */
  .hero-card { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(440px, 480px); grid-template-areas: "copy sample" "cta sample"; column-gap: 48px; row-gap: 20px; align-items: center; padding: 28px 0 16px; }
  .hero-copy { grid-area: copy; }
  .hero-sample { grid-area: sample; margin: 0; max-width: none; }
  .hero-cta { grid-area: cta; justify-self: start; }
}

.how-strip { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.how-step {
  display: flex; gap: 14px; align-items: flex-start; text-align: left; width: 100%; box-sizing: border-box;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line); border-top-color: var(--line-hi);
  border-radius: 16px; padding: 15px 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.how-step .how-n {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
  background: var(--ink); color: var(--paper);   /* 聽摘同款：步驟編號用 ink，不借朱紅 */
  display: grid; place-items: center; font-weight: 900; font-size: 0.875rem; font-family: 'Noto Serif TC', serif;
  box-shadow: none;
}
.how-step > div { min-width: 0; }
.how-step b { font-size: 0.875rem; color: var(--ink); display: block; margin-bottom: 3px; }
.how-step small { font-size: 0.75rem; color: var(--ink-soft); line-height: 1.65; }

/* 桌面版：內容別在寬螢幕上孤零零飄著 */
@media (min-width: 720px) {
  .hero-title { font-size: 2rem; }
  #library-empty { max-width: 560px; margin: 12px auto 0; }
}

/* 節目篩選 chip 帶：封面小頭像 + 更好的選中態 + 邊緣淡出 */
#show-chips {
  padding: 2px 2px 4px; width: calc(100vw - 40px); max-width: 100%;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  mask-image: linear-gradient(90deg, transparent, #000 12px, #000 92%, transparent);
}
#show-chips::-webkit-scrollbar { display: none; }
.show-chip {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  scroll-snap-align: start; white-space: nowrap;
  padding: 5px 13px 5px 5px; border-radius: 999px; border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  color: var(--ink-soft); font-size: 0.75rem; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: transform 0.2s var(--ease-spring), border-color 0.2s, color 0.2s;
}
.show-chip svg { margin-left: 6px; }
.show-chip img, .show-chip .chip-ph {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: var(--surface-3);
}
.show-chip .chip-ph { display: grid; place-items: center; font-size: 0.75rem; color: var(--ink); background: var(--pine); }
.show-chip:active { transform: scale(0.94); }
.show-chip.active {
  /* 聽摘改版夜同款：選中＝ink 實心，與主鍵同一種語彙；沒有光暈、不借朱紅 */
  color: var(--paper); border-color: transparent;
  background: var(--ink);
  box-shadow: none;
}
.show-chip.active .chip-ph { background: rgba(16,13,14,0.15); color: var(--paper); }

/* 硬鎖：卡片寬度不得超過視窗（不論任何兄弟元素），保證長文換行不被切 */
.hero-card, .how-step { max-width: calc(100vw - 32px); }
@media (min-width: 720px) { .hero-card, .how-step { max-width: 100%; } }

/* App header 真 logo（聲波圖，對齊 iOS/App Store），保留精緻圓角+陰影 */
.app-logo {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; object-fit: cover;
  box-shadow: 0 3px 12px rgba(0,0,0,0.35), inset 0 0 0 1px var(--line-hi);
}

/* 篩選列橫捲時不顯示捲軸（與 #show-chips 一致） */
#feed-filters::-webkit-scrollbar { display: none; }

/* ⚠️ 摘錄卡的「AI 內容與範圍不同步」提示（2026-08-08）
   後端從一開始就把 aiStale 寫對了，但沒有任何 client 讀它——
   使用者調完範圍看到的是描述別的區間的重點，而畫面上什麼都沒說。 */
.snip-card .ai-stale {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 8px 0; padding: 8px 12px; border-radius: 8px;
  font-size: 0.75rem; line-height: 1.6;
  background: color-mix(in srgb, var(--vermillion) 9%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--vermillion) 65%, transparent);
  color: var(--ink-soft);
}
.snip-card .ai-stale span { flex: 1; min-width: 12rem; }
/* 改寫過的那種只是說明，不是待辦——顏色收掉，別讓它看起來像有事要做 */
.snip-card .ai-stale.muted {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-left-color: color-mix(in srgb, var(--ink) 22%, transparent);
}

/* 先看成品、再邀請註冊：註冊鈕排在試聽卡之後（2026-09-13） */
.hero-card .hero-cta { white-space: normal; }
.trial-next { text-align: center; margin: 16px 0; }
.trial-next .btn { min-height: 44px; white-space: normal; }
#try-row { scroll-margin-top: 76px; }

/* 🗓 「今天」主卡（2026-09-13 Codex 設計對批 Top-3；2026-09-14 減壓）：
   深色紙面、無朱紅外框；首屏唯一的朱紅是內容寬度的 CTA；兩列任務是細線分隔的文字列 */
/* SPEC §3 首頁①：resting 卡＝色階＋頂邊 1px 高光（--hl-s1），不下陰影（陰影只給浮層）。
   只有邊框沒有高光時，卡在暗底上看起來像貼紙。 */
.today-card { margin-bottom: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px 6px; box-shadow: var(--hl-s1); }
.today-eyebrow { font-size: var(--fs-sub, 0.875rem); font-weight: 700; color: var(--ink-soft); margin-bottom: 12px; }
.today-now { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.today-art { width: 72px; height: 72px; border-radius: 16px; flex-shrink: 0; object-fit: cover; }
.today-title { font-weight: 800; font-size: var(--fs-lead, 1.25rem); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.today-meta { font-size: var(--fs-sub, 0.875rem); color: var(--ink-soft); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.today-meta .dot { opacity: .5; margin: 0 6px; }
.today-bar { height: 3px; background: var(--accent-show-track, var(--line)); border-radius: 8px; margin-top: 8px; overflow: hidden; }   /* 底軌用節目色（聽摘同款），填色朱紅＝播放位置 */
.today-bar > div { height: 100%; background: var(--vermillion); border-radius: 8px; }
.today-cta { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; text-decoration: none;
  /* 主鍵＝米白實體鍵（components.css 的 --btn-primary-*）；朱紅只標播放位置 */
  background: var(--btn-primary-bg); color: var(--btn-primary-fg, #100d0e); box-shadow: var(--btn-primary-shadow);
  font: inherit; font-weight: 900; font-size: 1rem;
  padding: 12px 22px; border-radius: 999px; border: none; cursor: pointer; min-height: 44px;
  transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out); }
.today-cta:active { transform: scale(0.98); box-shadow: var(--btn-primary-pressed); }
.today-cta:active { filter: brightness(.92); }
.today-rows { margin-top: 14px; }
.today-row { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-sub, 0.875rem); font-weight: 600; }
.today-row.done { color: var(--ink-soft); }
.today-row-btn { margin-left: auto; text-decoration: none; border: none; background: none; color: var(--ink);
  font: inherit; font-weight: 700; font-size: var(--fs-sub, 0.875rem); padding: 0; cursor: pointer; white-space: nowrap; }
.today-row-btn:active { opacity: .7; }

/* 區塊層次靠標題＋間距，不加卡框：今天卡 → 最新集數 → 我的節目，區塊間 28px */
#tab-library #feed-section { margin-top: 4px; }
#tab-library #shows-label { margin-top: 28px; }

/* 「一集怎麼練？」收成一行小字，點了才展開五步（原本是常駐整張卡） */
.loop-guide { margin: -12px 4px 24px; font-size: var(--fs-note, 0.75rem); color: var(--ink-soft); }
.loop-guide > summary { cursor: pointer; list-style: none; display: inline-block; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ink-soft) 50%, transparent); }
.loop-guide > summary::-webkit-details-marker { display: none; }
.loop-guide[open] > summary { color: var(--ink); text-decoration: none; }
.loop-guide ol { margin: 10px 0 0; padding-left: 18px; line-height: 1.85; }
.loop-guide #loop-hide { display: block; margin-top: 8px; border: none; background: none; padding: 0; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }

/* 🎁 訪客 hero 的「一段真實雙語內容」：範例＝真集（Een Beetje Nederlands #87），一層卡就好、無邊框 */
.hero-sample { margin:0; max-width:520px; text-align:left; background:var(--card);
  border:none; border-radius:16px; padding:20px 20px 18px; position:relative; }
.hero-sample .hs-meta { display:flex; align-items:center; gap:10px; font-size:var(--fs-note); color:var(--ink-soft); margin-bottom:12px; padding-right:34px; }
.hero-sample .hs-meta img { width:36px; height:36px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.hero-sample::before { content:""; position:absolute; top:22px; right:20px; width:26px; height:10px; opacity:.9;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'><g fill='%23f2613a'><rect x='0' y='3' width='2' height='4' rx='1'/><rect x='4' y='1' width='2' height='8' rx='1'/><rect x='8' y='2.5' width='2' height='5' rx='1'/><rect x='12' y='0' width='2' height='10' rx='1'/><rect x='16' y='2' width='2' height='6' rx='1'/><rect x='20' y='3.5' width='2' height='3' rx='1'/><rect x='24' y='1.5' width='2' height='7' rx='1'/></g></svg>") no-repeat; }
.hero-sample .hs-src { font-size:var(--fs-lead); font-weight:700; color:var(--ink); line-height:1.45; }
.hero-sample .hs-src em { font-style:normal; color:var(--vermillion); }   /* 朱紅只標記正在聽的片語 */
.hero-sample .hs-zh { font-size:var(--fs-body); color:var(--ink-soft); margin-top:8px; line-height:1.7; }


/* ═══════════════════════════════════════════════════════════════════════════
   2026-09-22 第 2 批：節目庫首頁照聽摘版面（續播卡／佇列一行／入口卡／集數列 ⋯／sprite 圖示）。
   規則來源：聽摘 bf385d7 index.html 內嵌 <style>「UI 改版（節目庫／摘錄庫）」段。
   ═══════════════════════════════════════════════════════════════════════════ */
.ic { width:1.25em; height:1.25em; vertical-align:-0.25em; flex:none; }
.ep-item .sub { font-family:inherit; }

/* 一行入口（今日複習等）：44 高、一條 surface 列 */
.row-entry {
  display:flex; align-items:center; gap:var(--sp-2); min-height:44px;
  padding:var(--sp-2) var(--sp-3); border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface); color:var(--fg); font-size:var(--fs-base); font-weight:700;
  cursor:pointer; list-style:none;
}
.row-entry .chev { margin-left:auto; color:var(--fg-muted); }

/* 續播卡：無朱紅外框（朱紅＝播放位置），米白實心「繼續」 */
#resume-section { margin-bottom: var(--sp-4); }
.resume-card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-4); position:relative;
  box-shadow: var(--hl-s1);   /* SPEC §3 首頁①：頂邊高光 */
}
.resume-main { display:flex; align-items:center; gap:var(--sp-3); cursor:pointer; }
.resume-art { width:72px; height:72px; border-radius:var(--r-md); object-fit:cover; flex:none; }
.resume-meta { flex:1; min-width:0; }
.resume-t {
  font-size:var(--fs-lg); font-weight:700; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.resume-sub { font-size:var(--fs-sm); color:var(--fg-muted); margin-top:var(--sp-1); line-height:1.6; font-variant-numeric:tabular-nums; }
.resume-bar { height:3px; background:var(--accent-show-track, var(--line)); border-radius:2px; margin-top:var(--sp-2); overflow:hidden; }
.resume-bar > i { display:block; height:100%; background:var(--vermillion); border-radius:2px; }   /* 填色＝播放位置 */
.btn-ink {
  flex:none; display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-1);
  min-height:44px; min-width:64px; padding:0 var(--sp-4); border:none; border-radius:var(--r-md);
  background:var(--btn-primary-bg, var(--fg)); color:var(--btn-primary-fg, var(--bg)); box-shadow:var(--btn-primary-shadow, none);
  font-family:inherit; font-size:var(--fs-base); font-weight:700; cursor:pointer; text-decoration:none;
}
.btn-ink:active { transform:scale(0.97); box-shadow:var(--btn-primary-pressed, none); }
.resume-dismiss {
  position:absolute; top:-10px; right:-10px; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:none; background:none; color:var(--fg-muted); cursor:pointer; font-size:0.9rem; line-height:1;
}
/* 佇列併進續播卡底部一行「接下來：… · 共 N 集 ›」 */
.resume-next {
  display:flex; align-items:center; gap:var(--sp-2); width:100%; min-height:44px;
  margin-top:var(--sp-3); padding:var(--sp-2) 0 0; border:none; border-top:1px solid var(--line);
  background:none; color:var(--fg-muted); font-family:inherit; font-size:var(--fs-sm);
  text-align:left; cursor:pointer; white-space:nowrap;
}
.resume-next > span { flex:none; }
.resume-next > b { flex:0 1 auto; min-width:0; color:var(--fg); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.resume-next .chev { margin-left:auto; }
/* 沒有續播卡時，佇列獨立成一張普通卡 */
#queue-section { margin-bottom: var(--sp-4); }
#queue-section.as-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding: var(--sp-2) var(--sp-4) var(--sp-3); }
#queue-section.as-card .section-label { margin-top: var(--sp-2); }

/* 入口卡（原「今天」卡）：主 CTA 只在沒有續播卡時出現；下面是三列文字入口 */
#daily-session.today-card { padding: 14px 16px 4px; }
#daily-session .today-cta { margin-bottom: 4px; }
#daily-session .today-rows { margin-top: 10px; }
#daily-session .today-rows:first-child, #daily-session .today-eyebrow + .today-rows { margin-top: 0; }
#daily-session .today-rows > .today-row:first-child { border-top: none; }
.today-row .ic { color: var(--fg-muted); }
.quick-row { display:flex; flex-wrap:wrap; align-items:center; gap: 4px 14px; padding: 10px 0; border-top:1px solid var(--line); font-size: var(--fs-sm); }
.quick-row button { border:none; background:none; padding:0; min-height:32px; color:var(--fg-muted); font:inherit; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
.quick-row button b { color: var(--fg); font-variant-numeric: tabular-nums; }
.quick-row button:active { opacity:.7; }

/* 2026-09-23 UX 稽核 #8：續播併進「今天」卡——卡裡一行進行中的集＋一顆全寬米白主鍵（複習 N 句／接著練：第 N 句／開始／挑一集）。
   iOS DailySessionCard 同一套版面。朱紅只留在進度條填色（＝播放位置）。 */
#daily-session.today-card { position: relative; }
#daily-session .today-eyebrow { margin-bottom: 10px; padding-right: 36px; }
#daily-session .resume-dismiss { top: 4px; right: 4px; }
#daily-session .today-cta { display: flex; width: 100%; margin: 12px 0 4px; }
.today-ep { display: flex; align-items: center; gap: var(--sp-3, 12px); cursor: pointer; }
.today-ep-art { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: none; }
.today-ep-meta { flex: 1; min-width: 0; }
.today-ep-t { font-size: var(--fs-base, 1rem); font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.today-ep-sub { font-size: var(--fs-sm, 0.875rem); color: var(--fg-muted); margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-ep .resume-bar { margin-top: 6px; }
.today-ep .today-row-btn { flex: none; min-height: 44px; display: inline-flex; align-items: center; }
#daily-session .resume-next { margin-top: 8px; }
.feed-featured-note { padding: 14px 4px; color: var(--ink-soft); font-size: var(--fs-sm, 0.875rem); line-height: 1.6; }

/* 我的節目橫列：右緣淡出（聽摘同款） */
#podcast-grid.more-right { mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent); }
#podcast-grid.more-left  { mask-image:linear-gradient(to left, #000 calc(100% - 34px),transparent); }
#tab-library #shows-label { margin-top: var(--sp-4); }
#tab-library #feed-section { margin-top: var(--sp-5, 24px); }

/* 集數列：狀態＝文字＋小圓點（不是長得像按鈕的膠囊）；動作才是膠囊；☆＋✕ 收進 ⋯ */
.ep-state { display:inline-flex; align-items:center; gap:6px; flex:none; font-size:var(--fs-xs); color:var(--fg-muted); white-space:nowrap; }
.ep-state .dot { width:6px; height:6px; border-radius:50%; flex:none; }
.ep-state.ready .dot { background:var(--pine-accent); }
.ep-state.transcribing .dot { background:var(--gold-accent); }
.ep-state.error .dot { background:var(--status-error); }
.pill.act.outline { background:none; color:var(--fg); border:1px solid var(--line-strong); box-shadow:none; text-shadow:none; font-weight:700; min-height:32px; cursor:pointer; font-family:inherit; }
.ep-more { position:relative; flex:none; }
.ep-more > summary { list-style:none; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--r-md); color:var(--fg-muted); cursor:pointer; }
.ep-more > summary::-webkit-details-marker { display:none; }
.ep-more > summary::marker { content:''; }
.ep-more[open] > .menu-pop {
  position:absolute; right:0; top:calc(100% + 4px); z-index:30; min-width:180px;
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--r-md);
  padding:6px; box-shadow: var(--hl-s2), var(--elev-2); display:flex; flex-direction:column; gap:2px;   /* SPEC §2 浮層 */
}
.ep-more .menu-pop button { display:flex; align-items:center; gap:var(--sp-2); min-height:44px; width:100%; padding:0 var(--sp-3); border:none; border-radius:var(--r-sm); background:none; color:var(--fg); font-family:inherit; font-size:var(--fs-sm); font-weight:700; text-align:left; cursor:pointer; }
.ep-more .menu-pop button:hover { background:color-mix(in srgb,var(--fg) 8%,transparent); }
#feed-list .ep-item { padding-right: 6px; }
#feed-list .ep-more { margin-left: auto; order: 10; }   /* 手機兩列時：狀態／AI 處理靠左、⋯ 靠右 */
#feed-list .ep-item > .pill.act { order: 0; }            /* 蓋掉手機版 .ep-item > button { order:9 } */
/* ⋯ 打開時整張卡浮到上層：.ep-item 有進場動畫（transform＝新的疊層），不抬起來選單會被下一張卡蓋住 */
#feed-list .ep-item:has(.ep-more[open]) { position: relative; z-index: 20; }
#feed-list .ep-item .t { font-size:var(--fs-md); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#feed-list .ep-item .sub { font-size:var(--fs-sm); color:var(--fg-muted); }
#feed-list .ep-bar { height:3px; background:var(--accent-show-track, var(--line)); border-radius:2px; margin-top:6px; overflow:hidden; }
#feed-list .ep-bar > i { display:block; height:100%; background:var(--vermillion); border-radius:2px; }
/* 節目色：集數列左緣 2px 線（同屏只讓出現最多的節目上色） */
#feed-list .ep-item:not(.no-accent) { box-shadow: inset 2px 0 0 var(--accent-show-line, transparent); }

/* 訪客精選集卡（聽摘 starter card 版型）：示範 chip＋語言/程度 chip、節目、標題、描述、「N 分鐘 → …」 */
.try-card { border-color: var(--line); background: var(--surface); }
.try-card:hover { border-color: var(--line-strong); }
.try-chips { display:flex; gap:6px; flex-wrap:wrap; align-self:flex-start; }
.try-demo { font-size:var(--fs-xs); font-weight:700; color:var(--fg); border:1px solid var(--line-strong); border-radius:999px; padding:1px 8px; }
.try-go { font-size:var(--fs-sm); font-weight:800; color:var(--fg); margin-top:6px; }

/* ════════════════════════════════════════════════════════════════════════════
   2026-09-22 第 3 批：摘錄庫／日記／今日複習（聽摘 styles.css:263-453 結構；iOS SnipsView／ReviewCard 同一套）
   只作用在摘錄庫（#snip-list .sc4）與首頁複習卡——episode.html 的本集摘錄仍用舊 .snip-card 規則（第 4 批再搬）
   ════════════════════════════════════════════════════════════════════════════ */
/* 摘錄庫頂部的一行入口（問摘錄庫／思想週報／我的白板） */
.sc-fold { background: var(--card); border-radius: var(--r-card, 16px); box-shadow: var(--hl-s1, none); margin-bottom: 10px; }
.sc-fold > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px 0 16px; cursor: pointer; }
.sc-fold > summary::-webkit-details-marker { display: none; }
.sc-fold > summary::marker { content: ''; }
.sc-fold .sc-fold-title { font-weight: 800; font-size: var(--fs-sm); color: var(--fg); white-space: nowrap; }
.sc-fold .sc-fold-sub { flex: 1; min-width: 0; font-size: var(--fs-xs); color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-fold .sc-fold-chev { color: var(--fg-muted); transition: transform .18s var(--ease-out, ease); flex-shrink: 0; }
.sc-fold[open] .sc-fold-chev { transform: rotate(90deg); }
.sc-fold .sc-fold-body { padding: 0 16px 14px; }
.sc-libhead { display: flex; align-items: center; gap: 10px; }
.sc-libhead > .act-menu { margin-left: auto; }
.sc-libhead > .act-menu > summary { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.act-menu[open] > .menu-pop.is-down { bottom: auto; top: calc(100% + 6px); }
.act-menu:not([open]) > .menu-pop { display: none; }
.sc-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
.sc-chips::-webkit-scrollbar { display: none; }
.sc-chips .chip { flex-shrink: 0; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; cursor: pointer; font-family: inherit; letter-spacing: 0.02em; }

/* 摘錄卡四塊 */
#snip-list .sc4, #view-snips .sc4 { padding: 16px; margin-bottom: 12px; }   /* #view-snips＝集數頁「本集摘錄」（2026-09-23 第 4 批同款四塊卡） */
#snip-list .sc4:not(.no-accent) { box-shadow: inset 2px 0 0 var(--accent-show-line, transparent), var(--hl-s1, none); }
#snip-list .sc4:has(.act-menu[open]), #view-snips .sc4:has(.act-menu[open]) { position: relative; z-index: 20; }
.sc4 .sc-head { display: flex; align-items: flex-start; gap: var(--sp-2); }
.sc4 .sc-headtext { flex: 1 1 auto; min-width: 0; }
.sc4 .sc-fav {
  flex: 0 0 auto; width: 44px; height: 44px; min-width: 44px; margin: -8px -8px 0 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%;
  background: none; cursor: pointer; font-size: 1.25rem; line-height: 1; color: var(--fg-muted);
}
.sc4 .sc-fav[aria-pressed="true"] { color: var(--fg); }   /* 選取＝米白實心星（金＝處理中，精選不是處理中） */
.sc4 .title {
  font-family: inherit; font-weight: 700; font-size: var(--fs-lg); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sc4.sc-open .title { display: block; -webkit-line-clamp: unset; }
.sc4 .src { font-size: var(--fs-sm); color: var(--fg-muted); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sc4 .sc-peek { font-size: var(--fs-base); line-height: 1.7; color: var(--ink); margin-top: var(--sp-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc4.sc-open .sc-peek { display: none; }
.sc4 .sc-full { margin-top: var(--sp-2); }
/* 語言卡：整張照排、第一行放大（「Veel＝很多／出自：…」） */
.sc4 .sc-lang { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: 4px; }
.sc4 .sc-lang-head { font-size: var(--fs-lg); font-weight: 800; color: var(--fg); line-height: 1.45; }
.sc4 .sc-lang-line { font-size: var(--fs-base); color: var(--ink); line-height: 1.7; }
.lang-card { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: 4px; }
.lang-card .lang-term { font-size: var(--fs-lg); font-weight: 800; color: var(--fg); line-height: 1.45; }
.lang-card .lang-ipa { font-size: var(--fs-sm); font-weight: 500; color: var(--fg-muted); margin-left: 8px; }
.lang-card .lang-zh { font-size: var(--fs-base); color: var(--ink); line-height: 1.7; }
.lang-card .lang-ex { font-size: var(--fs-base); color: var(--ink-soft); line-height: 1.7; }
.lang-card .lang-mark { background: none; color: var(--fg); font-weight: 800; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
/* 引言塊兩層：外層左線、內層 clamp（Codex：clamp 與 padding 同層會切半個字） */
.sc4 .sc-quotewrap { margin-top: var(--sp-3); }
.sc4 .text { font-family: inherit; font-size: inherit; margin-top: 0; padding: 0 0 0 var(--sp-3); border-left: 3px solid var(--fg-muted); border-radius: 0; background: none; display: block; -webkit-line-clamp: unset; cursor: pointer; }
.sc4 .quote-text { font-size: var(--fs-base); white-space: pre-wrap; color: var(--ink-soft); line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sc4 .text.open .quote-text { display: block; -webkit-line-clamp: unset; }
.sc4 .quote-src { font-size: var(--fs-sm); color: var(--fg-muted); margin-top: var(--sp-1); padding-left: var(--sp-3); }
/* 你的痕跡：筆記＝靛左線（你寫的），全文不裁 */
.sc4 .sc-note { margin: var(--sp-3) 0 0; padding: 2px 0 2px var(--sp-3); border-left: 3px solid var(--accent-ink-line); font-size: var(--fs-sm); line-height: 1.7; color: var(--ink); cursor: pointer; white-space: pre-wrap; }
.sc4 .sc-rolelabel { display: inline-block; font-size: var(--fs-xs); font-weight: 700; color: var(--accent-ink-text); letter-spacing: 0.06em; margin-right: 6px; }
.sc4 .sc-echo { margin-top: var(--sp-3); font-size: var(--fs-sm); line-height: 1.8; color: var(--fg-muted); }
.sc4 .sc-echo-line { margin-bottom: 4px; }
.sc4 .echo-link { all: unset; cursor: pointer; color: var(--ink); border-bottom: 1px dashed var(--accent-ink-line); }
/* 2026-09-23 稽核 2 #3：呼應列是一整列可點的鍵（≥44px），中性墨色——松綠只表示「完成」，呼應不是完成 */
.sc4 .sc-echo-line { margin-bottom: 0; }
.sc4 .sc-echo-line > .echo-link { display: block; box-sizing: border-box; min-height: 44px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--fg); }
.sc4 .sc-echo-line > .echo-link:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sc4 .sc-tagbox { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-3); }
.sc4 .sc-tagbox[hidden] { display: none; }
.sc4 .sc-taglist { display: flex; flex-wrap: wrap; gap: 6px; }
.sc4 .snip-tag { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; background: var(--accent-ink-tint); color: var(--accent-ink-text); border: none; border-radius: var(--r-full); }
.sc4 .sc-taginput { min-height: 44px; box-sizing: border-box; padding: 0 var(--sp-3); width: 150px; background: var(--surface-sunken); box-shadow: inset 0 1px 2px rgba(0,0,0,.5); border: 1px solid var(--line); border-radius: var(--r-full); color: var(--ink); font: inherit; font-size: var(--fs-sm); flex: 0 0 auto; }
/* 入口列：每顆 44，放不下整顆換行 */
.sc4 .sc-entries { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.sc4 .sc-entry { flex: 0 0 auto; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--sp-3); font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; color: var(--fg); background: none; border: 1px solid var(--line-strong); border-radius: var(--r-full); }
.sc4 .sc-entry:hover { border-color: var(--fg-muted); }
/* 動作列：▶ 時間戳不換行不縮字，••• 靠右 */
.sc4 .actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); flex-wrap: wrap; align-items: center; }
.sc4 .actions > * { flex: 0 0 auto; white-space: nowrap; min-height: 44px; }
.sc4 .actions > .btn, .sc4 .actions > a.btn { display: inline-flex; align-items: center; }
.sc4 .actions > .export-ok { min-height: 0; }
.sc4 .actions .sc-time { font-variant-numeric: tabular-nums; }
.sc4 .actions > .sc-menu-more { margin-left: auto; }
.sc4 .actions > .act-menu > summary { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.sc4 .menu-pop { min-width: 200px; }
.sc4 .menu-pop .btn, #snips-more .menu-pop .btn {
  min-height: 44px; justify-content: flex-start; text-align: left; white-space: nowrap; width: 100%;
  /* 選單項目＝扁平透明＋ink 字（聽摘改版夜）：一個選單裡九顆實心主鍵等於沒有主鍵 */
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-fw: 600; --btn-shadow: none; --btn-shadow-active: none;
  background: transparent; color: var(--ink); border: none; box-shadow: none; border-radius: var(--r-sm, 8px); opacity: 1;
}
.sc4 .menu-pop .btn:hover, #snips-more .menu-pop .btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.sc4 .menu-pop .btn.danger { color: var(--status-error); }
.sc4 .trim-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--fg-muted); }
.sc4 .trim-row > .btn { flex: 0 0 auto; white-space: nowrap; min-height: 44px; }
.snip-card.sc-justadded { position: relative; outline: 3px solid var(--fg); outline-offset: 2px; }

/* 今日複習卡（聽力 SRS；中性大播放圓、米白看答案、評分三欄） */
.review-card { padding: 18px; }
.rv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rv-count { font-size: var(--fs-sm); font-weight: 800; color: var(--fg-muted); }
/* SPEC §3 複習卡②：剩幾則＝累積（紫藤數字），標籤維持灰——用顏色做層次不用字級 */
.rv-count .num-memory { color: var(--accent-memory-text); font-variant-numeric: tabular-nums; }
.rv-iconbtn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; border-radius: 50%; cursor: pointer; color: var(--fg-muted); font-size: 1.15rem; line-height: 1; }
.rv-iconbtn[aria-pressed="true"] { color: var(--fg); }
.rv-src { font-size: var(--fs-sm); color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.rv-front { text-align: center; padding: 16px 8px 4px; }
/* 一句播放器（card 版，sentence-player.js）：複習卡正面的主角；樣式在 components.css 的 .sp-* */
.rv-sp { text-align: left; }
.rv-play { width: 64px; height: 64px; border-radius: 50%; border: none; cursor: pointer; font-size: 1.5rem; line-height: 1; background: var(--surface-2); color: var(--fg); box-shadow: var(--hl-s2, none), var(--elev-1, none); }
.rv-play:active { transform: scale(0.96); }
.rv-hint { font-size: var(--fs-xs); color: var(--fg-muted); margin-top: 8px; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.rv-chips .rv-chip { margin-top: 0; }
.rv-chip { margin-top: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); background: none; cursor: pointer; font: inherit; font-size: var(--fs-xs); font-weight: 700; color: var(--fg); border-radius: var(--r-full); }
.rv-q { font-size: var(--fs-lg); font-weight: 800; line-height: 1.6; margin-top: 12px; color: var(--fg); }
.rv-cue { font-size: var(--fs-lg); font-weight: 800; line-height: 1.6; margin-top: 12px; color: var(--fg); }
.rv-link { display: block; margin: 0 auto; min-height: 44px; border: none; background: none; cursor: pointer; font: inherit; font-size: var(--fs-xs); color: var(--fg-muted); text-decoration: underline; text-underline-offset: 3px; }
.rv-reveal { width: 100%; min-height: 50px; margin-top: 12px; font-size: var(--fs-base); }
/* 揭曉的原文＋中文（系統給的，不是你打的）：中性邊。紫藤只留給累積量（iOS heardAutopsy 同樣是 cardHi 無紫邊） */
.rv-heard { text-align: left; word-spacing: normal; font-size: var(--fs-base); font-weight: 800; line-height: 1.9; padding: 11px 13px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-chip, 10px); color: var(--fg); }
.rv-heard-foot { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: var(--fs-xs); color: var(--fg-muted); margin: 4px 0 10px; }
.rv-heard-foot .rv-link { margin: 0; }
.rv-answer-title { font-size: var(--fs-base); font-weight: 800; line-height: 1.55; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.rv-answer { font-size: var(--fs-sm); color: var(--ink); }
.rv-back { display: flex; width: 100%; min-height: 48px; margin-top: 12px; justify-content: center; text-decoration: none; }
.rv-note { width: 100%; margin-top: 8px; padding: 8px 12px; font: inherit; font-size: var(--fs-sm); line-height: 1.5; background: var(--surface-sunken); border: none; border-left: 3px solid var(--accent-ink-line); border-radius: 0 8px 8px 0; color: var(--ink); resize: vertical; }
.rv-grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
/* 2026-09-23 UX 稽核 #10：評分列是卡片最後一塊，而且黏在可視範圍底部（手機要讓出底部分頁列）——
   卡片再長，三顆評分鍵都不用捲就按得到。 */
#rev-body > .rv-grades { position: sticky; bottom: 0; z-index: 2; margin: 14px -18px -18px; padding: 12px 18px 18px; background: var(--surface-1); border-top: 1px solid var(--line); border-radius: 0 0 var(--r-card, 16px) var(--r-card, 16px); }
@media (max-width: 640px) { #rev-body > .rv-grades { bottom: calc(68px + env(safe-area-inset-bottom)); } }
/* 揭曉後：播放器留著（再聽／慢速／跟讀照樣能用），「聽得懂嗎？」和聽寫入口退場：答案出來了，這兩個問題已經問完 */
.review-card.is-revealed .rv-front { padding: 12px 0 0; }
.review-card.is-revealed .rv-front .rv-chips { display: none; }
.review-card.is-revealed .rv-play { width: 48px; height: 48px; font-size: 1.15rem; }
.review-card.is-revealed .rv-front .rv-chip { margin-top: 0; }
.review-card.is-revealed .rv-hint,
.review-card.is-revealed .rv-q,
.review-card.is-revealed #rev-dict-open,
.review-card.is-revealed #rev-dict-body { display: none; }
.rv-extras ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.rv-extras li { padding-left: 14px; position: relative; line-height: 1.7; }
.rv-extras li::before { content: '•'; position: absolute; left: 0; color: var(--fg-muted); font-weight: 800; }
.rv-grade { display: flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center; min-height: 58px; padding: 8px 6px; font: inherit; cursor: pointer; background: none; color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--r-chip, 10px); }
.rv-grade:hover { border-color: var(--fg-muted); }
.rv-grade.is-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg, #100d0e); border-color: transparent; box-shadow: var(--btn-primary-shadow, none); }
.rv-grade:disabled { opacity: .55; cursor: default; }
.rv-grade-label { font-weight: 800; font-size: var(--fs-sm); }
.rv-grade-label kbd { font: 600 0.6rem/1 ui-monospace, monospace; opacity: .5; border: 1px solid currentColor; border-radius: 4px; padding: 1px 4px; vertical-align: 1px; }
.rv-grade-days { font-size: var(--fs-xs); opacity: .8; font-variant-numeric: tabular-nums; }

/* 日記 */
.dy-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.dy-title { font-weight: 900; font-size: var(--fs-lg); color: var(--fg); }
.dy-streak { font-size: var(--fs-sm); font-weight: 800; }
.dy-hint { font-size: var(--fs-xs); color: var(--fg-muted); margin-bottom: 12px; }
.dy-card { padding: 16px; }
.dy-cell { display: inline-block; width: 13px; height: 13px; border-radius: 3px; }
.dy-legend { display: flex; align-items: center; gap: 5px; margin-top: 12px; font-size: var(--fs-xs); color: var(--fg-muted); }
.dy-detail { margin-top: 12px; min-height: 40px; padding: 14px 16px; }
.sc4 .ai-stale { border-left-color: var(--line-strong); background: var(--surface-2); }   /* 範圍動過的提示：中性（朱紅＝播放位置） */

/* 評分失敗要講出來（審查 P2-5）：冷紅＝失敗，留在同一張可以再按 */
.rv-grade-err { margin-top: 8px; font-size: var(--fs-sub); color: var(--status-error); }
.rv-grade[disabled] { opacity: .55; cursor: default; }
#rev-heard + .rv-heard-foot + .rv-answer, .rv-heard-foot + .rv-answer { margin-top: 4px; }

/* ═══ 2026-09-23 UX 稽核 #11：摘錄卡緊湊版（只作用在 index.html renderSnipCard 畫的 .sc-compact；
   集數頁「本集摘錄」renderEpSnipCard 還是舊四塊卡，這次沒動 episode.html）。
   第一列：44px ▶ 圓鍵＋「外語 ＝ 中文」；第二列：出自原句 2 行、關鍵字粗體；第三列：來源 · 時間＋☆＋⋯。
   標籤／筆記入口收進 ⋯，有內容時才以膠囊／筆記列出現。iOS SnipCard 同一套。 ═══ */
#snip-list .sc4.sc-compact { padding: 12px 14px 4px; margin-bottom: 10px; }
.sc4.sc-compact .sc-head { align-items: center; gap: 12px; }
.sc4.sc-compact .sc-play {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2, color-mix(in srgb, var(--ink) 10%, var(--card))); color: var(--fg); text-decoration: none;
  border: 1px solid var(--line-strong, var(--line)); box-shadow: var(--hl-s1, none); -webkit-tap-highlight-color: transparent;
}
.sc4.sc-compact .sc-play svg { margin-left: 2px; }
.sc4.sc-compact .sc-play:active { transform: scale(0.95); }
.sc4.sc-compact .sc-line1 { font-size: var(--fs-lg, 1.125rem); line-height: 1.4; color: var(--fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc4.sc-compact .sc-line1 .title { font-size: inherit; font-weight: 700; display: inline; -webkit-line-clamp: unset; }
.sc4.sc-compact .sc-term { font-weight: 800; }
.sc4.sc-compact .sc-eq { color: var(--fg-muted); margin: 0 6px; }
.sc4.sc-compact .sc-gloss { color: var(--fg-muted); font-weight: 600; }
.sc4.sc-compact .lang-ipa { color: var(--fg-muted); font-size: var(--fs-sm); margin-left: 6px; }
.sc4.sc-compact .sc-src2, .sc4.sc-compact .sc-peek {
  margin: 8px 0 0 56px; font-size: var(--fs-base); line-height: 1.6; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sc4.sc-compact .sc-src2 .lang-mark { background: none; color: var(--fg); font-weight: 800; padding: 0; }
.sc4.sc-compact .sc-full, .sc4.sc-compact .sc-note, .sc4.sc-compact .sc-echo, .sc4.sc-compact .sc-tagbox, .sc4.sc-compact .ai-stale { margin-left: 56px; }
.sc4.sc-compact .sc-entries { margin: 8px 0 0 56px; }
.sc4.sc-compact .actions.sc-metarow { margin-top: 4px; padding-top: 0; border-top: none; gap: 0; flex-wrap: nowrap; }
.sc4.sc-compact .sc-meta { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 44px; margin-left: 56px; font-size: var(--fs-sm); color: var(--fg-muted); white-space: nowrap; }
.sc4.sc-compact .sc-meta-src { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sc4.sc-compact .sc-meta-time { flex: none; font-variant-numeric: tabular-nums; }
.sc4.sc-compact .sc-meta-time::before { content: '·'; margin-right: 8px; opacity: .6; }
.sc4.sc-compact .actions > .sc-fav { flex: none; }
.sc4.sc-compact .actions > .sc-menu-more { margin-left: 0; }
.sc4.sc-compact .actions > .sc-menu-more > summary { border: none; background: none; }
.sc4.sc-compact .actions > .sc-fav { margin: 0; }

/* 2026-09-23 稽核 2 #10：離線提示列（中性色：金色＝處理中、朱紅＝播放位置，都不借） */
.offline-bar { position: sticky; top: 0; z-index: 600; padding: 10px 16px; text-align: center; font-size: var(--fs-sm, 0.875rem); font-weight: 700; color: var(--fg); background: var(--surface-2); border-bottom: 1px solid var(--line-strong); }
.offline-bar[hidden] { display: none; }
/* 🌱 今天的收穫（2026-09-23 稽核 2 #2）：累計數字用紫藤（累積）；其餘中性。▶ 是米白實體小鍵（朱紅只標播放位置） */
.gain-card { padding: 16px; margin-bottom: 16px; scroll-margin-top: 84px; }   /* 頁首是 sticky，捲過來時別被蓋住 */
.gain-eyebrow { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; color: var(--fg-muted); margin-bottom: 8px; }
.gain-big { font-size: var(--fs-lg); font-weight: 800; line-height: 1.5; color: var(--fg); }
.gain-big .num-memory { font-size: 1.6em; margin-right: 4px; }
.gain-big small { font-size: var(--fs-xs); font-weight: 600; color: var(--fg-muted); margin-left: 8px; }
.gain-sec { font-size: var(--fs-sm); font-weight: 800; color: var(--fg); margin: 14px 0 4px; }
.gain-line { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; text-decoration: none; color: var(--fg); border-bottom: 1px solid var(--line); }
.gain-play { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; background: var(--surface-2); color: var(--fg); }
.gain-text { flex: 1; min-width: 0; font-size: var(--fs-sm); line-height: 1.5; }
.gain-tail { flex: none; font-size: var(--fs-xs); color: var(--fg-muted); }
.gain-note { font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.7; margin-top: 10px; }

/* ════════ 2026-09-24 前端接上夜間後端（night-web） ════════
   色彩：松綠＝完成（已入帳）、金＝處理中（入帳處理中／確認中）、其餘中性；靛藍＝使用者自己標的字、紫藤＝累積次數。 */
.notice-slot:empty { display: none; }
.notice-card { padding: 14px 16px; margin: 12px 0; border-left: 3px solid var(--line-strong); }
.notice-card.tone-done { border-left-color: var(--pine); }
.notice-card.tone-busy { border-left-color: var(--gold); }
.notice-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: var(--fs-base, 1rem); color: var(--fg); }
.notice-card.tone-done .notice-title { color: var(--pine-ink, var(--pine)); }
.notice-card.tone-busy .notice-title { color: var(--gold); }
.notice-body { font-size: var(--fs-sm, 0.875rem); line-height: 1.7; color: var(--fg-muted); margin-top: 6px; }
.notice-body a, .forgot-msg a { color: var(--fg); text-decoration: underline; }
.notice-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.notice-acts .btn { min-height: 44px; }
.notice-title .spinner { width: 14px; height: 14px; }
/* 登入已失效：空的節目庫／摘錄庫一律收起來（資料沒有不見，是還沒登入回來） */
/* 今天卡也收起來：它的「載入失敗」與米白主鍵會跟「重新登入」搶，而且那些失敗只是因為還沒登入回來 */
body.session-expired #library-empty, body.session-expired #snips-empty, body.session-expired #daily-session,
body.session-expired #gain-card, body.session-expired #report-card, body.session-expired #review-section { display: none !important; }
/* 付費方案即將開放（全站同一句） */
.sale-soon { flex-basis: 100%; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: 16px; font-size: var(--fs-sm, 0.875rem); font-weight: 700; color: var(--fg); }
/* 忘記密碼 */
.linkish { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; padding: 0; background: none; border: none; color: var(--fg-muted); font: inherit; font-size: var(--fs-sm, 0.875rem); text-decoration: underline; cursor: pointer; }
.linkish:disabled { opacity: .6; cursor: default; }
.forgot-msg { font-size: var(--fs-sm, 0.875rem); line-height: 1.7; color: var(--fg); padding: 8px 12px; background: var(--surface-2); border-radius: 12px; }
/* 聽力卡點報告 */
.report-card .rp-basis { font-size: var(--fs-xs, 0.75rem); color: var(--fg-muted); margin: -4px 0 8px; }
.rp-cat { border-top: 1px solid var(--line); }
.rp-cat > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; list-style: none; font-weight: 800; color: var(--fg); }
.rp-cat > summary::-webkit-details-marker { display: none; }
.rp-cat > summary::after { content: '▾'; margin-left: 4px; color: var(--fg-muted); font-size: 0.8rem; }
.rp-cat[open] > summary::after { content: '▴'; }
.rp-rank { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; background: var(--surface-2); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.rp-label { flex: 1; min-width: 0; font-size: var(--fs-sm, 0.875rem); line-height: 1.4; }
.rp-count { flex: none; font-size: var(--fs-xs, 0.75rem); color: var(--fg-muted); font-weight: 700; }
.rp-hint { font-size: var(--fs-xs, 0.75rem); color: var(--fg-muted); margin: 0 0 8px; }
.rp-words { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rp-word { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--accent-ink-tint); box-shadow: inset 0 -2px 0 var(--accent-ink-line); color: var(--accent-ink-text); font-weight: 700; font-size: var(--fs-sm, 0.875rem); }
.rp-word small { font-size: 0.7rem; }
.rp-ex { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-top: 1px dashed var(--line); }
.rp-ex .rp-sp { flex: none; }
.rp-ex .rp-ex-text { order: -1; }
.rp-ex .rp-score { margin-top: 0; }
.rp-ex-text { flex: 1; min-width: 0; font-size: var(--fs-sm, 0.875rem); line-height: 1.6; color: var(--fg); padding-top: 2px; }
.rp-ex-text small { display: block; font-size: var(--fs-xs, 0.75rem); color: var(--fg-muted); margin-top: 2px; }
.rp-empty { margin-top: 4px; }

/* ═══════════ 🌱 第一天五分鐘（docs/FIRST-DAY-SPEC.md，2026-09-24） ═══════════
   配色：全部中性（墨色＋灰階面）；米白實體鍵只給完成畫面的主鍵；朱紅不出現（只標播放位置）。
   一個畫面最多兩個強調色相：這裡只用墨色與米白。不放國旗。 */
.hero-card[hidden], .fd-flow[hidden], .trial-pending[hidden] { display: none; }
.fd-flow { margin: 14px 0 18px; }
.fd-card { background: var(--card); border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius); padding: 18px 16px 16px; text-align: left; }
.fd-kicker { font-size: var(--fs-note); font-weight: 800; letter-spacing: .08em; color: var(--ink-soft); margin: 0 0 4px; }
.fd-title { font-size: var(--fs-lead); font-weight: 900; line-height: 1.4; color: var(--ink); margin: 0 0 4px; }
.fd-sub, .fd-note { font-size: var(--fs-sub); color: var(--ink-soft); margin: 0 0 12px; }
.fd-note { margin: 10px 0 0; }
.fd-langs, .fd-levels { display: grid; gap: 10px; margin-top: 12px; }
.fd-lang, .fd-level {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 56px;
  padding: 12px 14px; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius);
}
.fd-lang:active, .fd-level:active { transform: scale(0.99); }
.fd-lang-name, .fd-level b { font-size: var(--fs-body); font-weight: 800; }
.fd-lang-show, .fd-level small { font-size: var(--fs-note); color: var(--ink-soft); overflow-wrap: anywhere; }
.fd-back { margin-top: 12px; background: none; border: 0; padding: 10px 0; min-height: 44px; font: inherit; font-size: var(--fs-sub); cursor: pointer; }
@media (min-width: 720px) { .fd-langs { grid-template-columns: repeat(3, 1fr); } .fd-levels { grid-template-columns: 1fr 1fr; } }

/* 單句卡上方：第 N／3 句＋這一步做什麼＋沒聽懂，存起來 */
.fd-bar { margin: -2px 0 10px; padding: 0 0 10px; border-bottom: 1px solid var(--line); }
.fd-prog { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fd-step { font-size: var(--fs-sub); font-weight: 800; color: var(--ink); }
.fd-dots { display: inline-flex; gap: 6px; }
.fd-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--line-strong, var(--line)); }
.fd-dots i.done { background: var(--ink-soft); }
.fd-dots i.on { background: var(--ink); }
.fd-hint { margin: 6px 0 8px; font-size: var(--fs-sub); color: var(--ink-soft); line-height: 1.6; }
.fd-bar .fd-save { min-height: 44px; --btn-bg: var(--surface-3); --btn-bg-hover: var(--surface-3); }   /* 卡片本身是 surface-2：灰底次要鍵要深一階才看得出是鍵 */
.fd-bar .fd-save:disabled { opacity: .7; }
body.fd-on #preview-bar { display: none; }
#fd-flow:not([hidden]) ~ #library-empty { padding-top: 0; }

/* 完成畫面 */
.fd-done { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.66); overflow-y: auto; }
.fd-done-box { width: min(420px, 100%); background: var(--card); border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius); padding: 22px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.fd-done-box h2 { font-size: var(--fs-h2); font-weight: 900; margin: 0; color: var(--ink); }
.fd-done-saved { font-size: var(--fs-sub); color: var(--ink-soft); margin: 0; }
.fd-done-when { font-size: var(--fs-body); color: var(--ink); margin: 4px 0 0; line-height: 1.6; }
.fd-done-note { font-size: var(--fs-sub); color: var(--ink-soft); margin: 0; }
.fd-done-main, .fd-done-more { min-height: 44px; width: 100%; justify-content: center; margin-top: 6px; }

/* 首頁：試摘還沒存進摘錄庫（conflict／error） */
.trial-pending { margin: 12px 0; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius); }
.tp-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tp-text { flex: 1; min-width: 12em; font-size: var(--fs-sub); font-weight: 700; color: var(--ink); }
.tp-row .btn { min-height: 44px; --btn-bg: var(--surface-3); --btn-bg-hover: var(--surface-3); }
.tp-why { margin: 8px 0 0; font-size: var(--fs-note); color: var(--ink-soft); line-height: 1.7; overflow-wrap: anywhere; }

/* 新增分頁：新手練習設定 */
.fd-settings .g-body { display: flex; flex-direction: column; gap: 10px; padding: 10px 4px; }
.fd-set-row { font-size: var(--fs-sub); color: var(--ink-soft); }
.fd-settings select { width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); }
.fd-settings .btn { align-self: flex-start; min-height: 44px; }

/* B71：外觀在帳號設定中即時切換；三個獨立44px按鈕保留鍵盤與觸控操作。 */
.appearance-settings { order:5; margin:16px 0; padding:16px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); }
.appearance-settings h2 { font-size:1rem; margin:0 0 12px; }
.appearance-options { display:flex; gap:6px; flex-wrap:wrap; }
.appearance-options button { flex:1 1 90px; min-height:44px; padding:8px 12px; border:1px solid var(--line-strong); border-radius:10px; color:var(--fg); background:var(--surface-2); font:inherit; font-size:.875rem; cursor:pointer; }
.appearance-options button[aria-pressed="true"] { background:var(--fg); color:var(--bg); font-weight:700; border-color:var(--fg); }
.appearance-settings p { font-size:.75rem; color:var(--fg-muted); margin:10px 0 0; }
.appearance-options button:focus-visible { outline:3px solid var(--accent-ink-text); outline-offset:3px; }

/* 淺色的靜態卡只保留暖色薄影；浮層仍使用各自的elev token。 */
html[data-theme="light"] :is(.card,.snip-card,.ep-item,.review-card) { box-shadow:var(--hl-s1),var(--shadow-sm); }

html[data-theme="light"] #podcast-grid .pod-tile { box-shadow:none; }
html[data-theme="light"] #podcast-grid .pod-tile :is(img,.ph) { box-shadow:var(--shadow-sm); }
@media(max-width:640px) { html[data-theme="light"] .tabs.main-tabs { box-shadow:0 -4px 16px rgba(28,24,19,.10); } }