:root {
  /* seedoes light palette — warm off-white canvas, editorial minimalism */
  --bg: #EEEDE8;
  --panel: #FFFFFF;
  --panel-2: #F5F5F2;
  --text: #444444;
  --text-strong: #1A1A1A;
  --muted: #888888;
  --accent: #1A1A1A;            /* Brand: pure ink accent */
  --accent-hover: #000000;
  --accent-fg: #FFFFFF;         /* Text on dark-accent surfaces */
  --accent-soft: rgba(26, 26, 26, 0.08);
  --accent-2: #2C7A5E;          /* Muted forest for success */
  --warn: #B89642;              /* Muted ochre */
  --error: #B45A57;             /* Muted brick */
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.18);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.25);

  /* seedoes-specific tokens */
  --seedoes-canvas: #EEEDE8;
  --seedoes-ink: #1A1A1A;
  --seedoes-muted: #888888;
  --seedoes-sidebar-w: 72px;
  --seedoes-sidebar-w-expanded: 180px;
  --seedoes-header-h: 64px;
  --seedoes-content-max: 1280px;
  --seedoes-radius: 4px;
  --seedoes-radius-lg: 12px;
  /* Neumorphism：spread 10 + 大 blur 保持柔化；高光/陰影 opacity 加強 */
  --neu-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    -4px -4px 22px 10px rgba(255, 255, 255, 0.55),
     8px  8px 34px 10px rgba(140, 143, 146, 0.45);
  --neu-shadow-focus:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    -2px -2px 14px 6px rgba(255, 255, 255, 0.42),
     5px  5px 22px 6px rgba(140, 143, 146, 0.38);
}

/* Dark theme override — activated by html[data-theme="dark"]. Keeps the
   same variable names so no other CSS needs a duplicate. Chosen for
   comfortable long-viewing (not pure black), preserving the "有品"
   minimalist warmth in dark. */
html[data-theme="dark"] {
  --bg: #141414;
  --panel: #1E1E1E;
  --panel-2: #262626;
  --text: #C8C6C4;              /* light warm grey text */
  --text-strong: #F0EDEA;       /* near-white for headings */
  --muted: #7A7876;
  --accent: #B8B4B0;            /* light accent on dark surfaces */
  --accent-hover: #E5E1DD;
  --accent-fg: #1E1E1E;         /* text on light-accent (inverted) */
  --accent-soft: rgba(255,255,255,0.06);
  --accent-2: #8FAB8B;          /* olive brightened for dark */
  --warn: #D4B26E;
  --error: #D68A87;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.18);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.6);
  /* 深色模式：暗底 + 微白高光 + 深黑陰影，比較內斂避免發光感 */
  --neu-shadow:
    -4px -4px 10px rgba(255, 255, 255, 0.03),
     6px  6px 14px rgba(0, 0, 0, 0.55);
  --neu-shadow-focus:
    -3px -3px  8px rgba(255, 255, 255, 0.025),
     4px  4px 10px rgba(0, 0, 0, 0.45);
}
/* Dark theme — modal backdrop needs a different blur tint. The default
   uses a light overlay which reads wrong on dark. */
html[data-theme="dark"] .modal-backdrop {
  background: rgba(20, 20, 20, 0.85);
}

/* ===========================================================
   Inter —— 畫面的英數字型（Figma 稿用的就是它）
   ===========================================================
   ⚠️ 2026-09-18：這一段以前**不存在**。font-family 寫著 Inter，
   却沒有 @font-face 也沒有外連 Google Fonts —— 結果是：
   電腦裝了 Inter 的人（做設計的）看到 Inter，沒裝的人（大部分客戶）
   掉到 PingFang。同一個畫面在兩台電腦上長得不一樣，而且沒人會回報。

   ⚠️ 字型檔放在本機，**不走 Google Fonts** —— app 要能離線用
      （導演常常在沒網路的剪接室），而且不該為了字型多一個外部相依。
   ⚠️ 這是**可變字型**：一個 48KB 的檔涵蓋字重 100–900。
      app 用到 300/400/500/600/700，拆成靜態字重要 5 個檔、五倍大小。
   ⚠️ 裡面**沒有中文**。中文照舊由 font-family 後面的 PingFang TC 畫，
      瀏覽器會自己按 unicode-range 分工。
   ⚠️ 換檔要改 ?v= 的版號，不然開過 app 的人會繼續用快取裡的舊檔。
      （來源與更新方式寫在 static/fonts/README.md）

   ⚠️ 下面 unicode-range 的 U+2000-206F 含中文也會用到的 … — ·。
      加了 Inter 之後那幾個字改由 Inter 畫，比 PingFang 窄約一成
      （40px 字級下差 1.3px，實際 UI 的 12–15px 差不到 0.5px）。
      留著是刻意的：Figma 稿本來就是用 Inter 排的，這才是設計原意。
      哪天覺得中文句子裡的「…」太窄，把 U+2000-206F 從下面拿掉，
      標點就交還給 PingFang —— 但英文介面的引號、破折號也會一起變。 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-variable-latin.woff2?v=5.3.0") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Noto Sans TC", "PingFang TC", "PingFang", "Microsoft JhengHei",
               -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Override the OS-default blue for native form controls (checkbox tick,
     radio dot, focus ring) with the brand dark grey. */
  accent-color: var(--text-strong);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--text-strong); }
/* Kill the global input:focus ring/outline on checkboxes & radios — they
   look ugly as a dark halo around the box. The accent-color tint already
   shows the checked state clearly. */
input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus,
input[type="radio"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Custom checkbox style for the search axis row — replaces the default
   black system frame with a soft light-grey box that fills dark when
   checked. Keeps native click semantics. */
.axes input.axis-cb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px;
  height: 14px;
  border: none !important;
  border-radius: 3px;
  background: #fff !important;
  cursor: pointer;
  position: relative;
  margin: 0 4px 0 0;
  padding: 0 !important;
  vertical-align: middle;
  transition: background 0.12s;
}
.axes input.axis-cb:checked {
  background: var(--text-strong) !important;
}
/* Dark theme: white boxes on dark bg look harsh. Use dark grey instead;
   filled state stays light so the check symbol still reads clearly. */
html[data-theme="dark"] .axes input.axis-cb {
  background: #3A3A3A !important;
}
html[data-theme="dark"] .axes input.axis-cb:checked {
  background: var(--text-strong) !important;   /* light fill */
}
html[data-theme="dark"] .axes input.axis-cb:checked::after {
  border-color: var(--bg) !important;   /* dark check on light fill */
}
.axes input.axis-cb:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

h1, h2, h3 { letter-spacing: 0.02em; font-weight: 400; }
h2 { font-size: 18px; font-weight: 400; margin: 18px 0 12px; color: var(--text-strong); }
h3 { font-size: 12px; font-weight: 500; color: var(--muted);
     letter-spacing: 0.1em; margin: 22px 0 10px; }

a { color: var(--accent-2); }

/* UPHiN topbar — centered logo, hamburger on right */
.topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 28px 12px;
  background: var(--bg);
}
.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brand svg { display: block; width: 84px; height: auto; color: var(--text-strong); }
/* Left cluster of the topbar: health line on top, scan status under it.
   Positioning lives on the wrapper so the two stay stacked no matter how
   long the health string gets. */
.topbar-left {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.health {
  font-size: 11px;
  color: var(--muted);
}
.scan-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
}
/* Stale = nothing has scanned for a while (or a folder was never scanned).
   Amber rather than red: it's informational, not an error. */
.scan-status.stale #scan-status-text { color: var(--warn); }
.scan-status.scanning #scan-status-text { color: var(--accent-2); }
.scan-status button {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.scan-status button:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--text-strong);
}
.scan-status button:disabled { opacity: 0.45; cursor: default; }
.hamburger {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 6px;
  transition: background 0.15s;
}
.hamburger:hover { background: var(--accent-soft); border-color: transparent; }
/* Hamburger never animates / shifts on press — override every interaction
   state from the generic button rules. */
.hamburger,
.hamburger:hover,
.hamburger:active,
.hamburger:focus,
.hamburger:focus-visible {
  transform: none !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.hamburger svg {
  width: 22px;
  height: 14px;
  color: var(--text-strong);
}

/* Tree-row icons：實心 SVG 在 12px 太重，opacity 收斂讓它變柔和 */
.tree-icon svg {
  width: 12px;
  height: 10px;
  color: var(--muted);
  opacity: 0.55;
  vertical-align: middle;
}
/* Folder has pending or error videos → 加深提示，但同樣保留透明度 */
.tree-icon.has-pending svg {
  color: var(--text-strong);
  opacity: 0.75;
}
.tree-icon-btn svg { width: 12px; height: 12px; }
.tree-icon-btn.danger svg { width: 11px; height: 12px; }

/* Underline tabs, centered */
.tabs {
  display: flex;
  justify-content: center;
  gap: 28px;
  padding: 0 28px 4px;
  background: var(--bg);
}

/* ====== 專案頁：左清單 + 右內容 ====== */
.projects-page {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 20px;
  /* width:100% 保證整區無論內容多寡都撐滿 <main>，右邊 1fr 才會穩定 */
  width: 100%;
  min-height: calc(100vh - 200px);
}
.projects-sidebar {
  border-right: 1px solid var(--border);
  padding-right: 20px;
  min-width: 0;
}
.projects-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 12px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.05em;
}
.projects-sidebar-head button {
  background: transparent;
  border: none;
  color: var(--text-strong);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 4px;
}
.projects-sidebar-head button:hover { background: var(--accent-soft); }
.projects-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.project-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s;
}
.project-row:hover { background: var(--accent-soft); }
.project-row.selected {
  background: var(--accent-soft);
  color: var(--text-strong);
  font-weight: 600;
}
.project-row .count {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}
.projects-sidebar-empty {
  padding: 16px 8px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.projects-main {
  min-width: 0; /* let grid contents shrink so the frame grid doesn't overflow */
}
.projects-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.projects-empty p { margin: 6px 0; }

.projects-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  gap: 20px;
}
.projects-detail-name {
  font-size: 18px;
  font-weight: 300;
  color: var(--text-strong);
}
.projects-detail-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.projects-detail-actions button { font-size: 12px; }

/* 專案內的截圖 grid：跟搜尋卡類似但更緊湊，每張右上有 ✕ 移除 */
.projects-frames-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.project-frame-card {
  position: relative;
  /* box-shadow + 微微上移的 hover；捲動時 body.is-scrolling 一起關掉 */
  background: var(--panel);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
  contain: layout paint;
}
.project-frame-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
body.is-scrolling .project-frame-card { pointer-events: none; }
body.is-scrolling .project-frame-card:hover {
  box-shadow: none;
  transform: none;
}
.project-frame-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
  overflow: hidden;
}
.project-frame-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-frame-time {
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 10px;
  padding: 1px 6px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border-radius: 2px;
}
.project-frame-remove,
.project-frame-download {
  position: absolute;
  top: 5px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  text-decoration: none;
  transition: opacity 0.15s, background 0.15s;
}
.project-frame-remove { right: 5px; }
.project-frame-download { right: 37px; }
.project-frame-card:hover .project-frame-remove,
.project-frame-card:hover .project-frame-download { opacity: 1; }
.project-frame-remove:hover { background: var(--error, #B45A57); }
.project-frame-download:hover { background: var(--accent, #3b82f6); }
.project-frame-body {
  padding: 10px 12px 14px;
}
.project-frame-title {
  font-size: 12px;
  color: var(--text-strong);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
}
.project-frame-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.projects-frames-empty {
  grid-column: 1 / -1;
  /* 讓空狀態的文字排版跟有截圖時的 grid 對齊：左對齊、無外距 */
  padding: 4px 0;
  text-align: left;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

/* ====== Modal 開關的淡入 + 微微放大過場 ======
   只套用在 #ui-modal 上（其他 modal 例如 player-modal、frames-modal 用直接
   顯示，不套動畫，避免全透明看不見造成點擊被擋）。 */
#ui-modal {
  opacity: 0;
  transition: opacity 0.22s ease-out;
}
#ui-modal.showing { opacity: 1; }
#ui-modal .modal-card {
  transform: scale(0.94);
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
#ui-modal.showing .modal-card { transform: scale(1); }

/* ====== 分鏡 tab：使用專案 chip（brief 下方左側，小圓角矩形） ====== */
.sb-project-bar {
  display: flex;
  justify-content: flex-start;
  padding: 10px 0 0;
}
.sb-project-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--panel);
  border: none;
  border-radius: 6px;
  color: var(--text-strong);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.sb-project-chip:hover { background: var(--panel-2); }
.sb-project-chip-label { color: var(--muted); }
/* caret 隱藏（保留 DOM 以防後續要恢復） */
.sb-project-chip-caret { display: none; }

/* ====== 通用 UI Modal（取代 alert / prompt / confirm） ====== */
.ui-modal-card {
  width: min(380px, 92vw) !important;
  max-width: min(380px, 92vw);
  padding: 0;
  overflow: hidden;
}
.ui-modal-body {
  padding: 20px 22px 8px;
}
.ui-modal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 10px;
}
.ui-modal-message {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 4px;
  white-space: pre-wrap;
}
.ui-modal-input {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 14px;
  font-size: 14px;
  background: var(--bg);
  /* 與 atp-search 一致：小圓角矩形 + 細邊，聚焦才變深 */
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  color: var(--text-strong);
  transition: border-color 0.15s, background 0.15s;
}
/* hidden 屬性要顯式蓋 display: block，否則 alert 模式仍會看到輸入框 */
.ui-modal-input[hidden] { display: none !important; }
.ui-modal-input:focus {
  border-color: var(--border-strong);
  background: var(--panel);
}
.ui-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px 18px;
}
.ui-modal-actions button {
  padding: 8px 18px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.ui-modal-actions button.ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}
.ui-modal-actions button.ghost:hover {
  color: var(--text-strong);
  border-color: var(--border-strong);
}
.ui-modal-actions button.primary {
  background: transparent;
  color: var(--text-strong);
  border-color: transparent;
  font-weight: 600;
}
.ui-modal-actions button.primary:hover {
  background: var(--accent-soft);
  border-color: transparent;
}
.ui-modal-card[data-mode="alert"] .ui-modal-actions button.ghost { display: none; }

/* ====== 加到專案 Picker — 錨定在圖片旁的浮動彈窗 ====== */
.atp-popover {
  position: fixed;
  width: 300px;
  max-height: 420px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 13px;
  /* 淡入 + 微微放大過場 */
  opacity: 0;
  transform: scale(0.96);
  transform-origin: top right;
  transition: opacity 0.2s ease-out, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.atp-popover.showing {
  opacity: 1;
  transform: scale(1);
}
/* HTML hidden 屬性需要顯式蓋掉上面的 display: flex，否則 X 沒作用 */
.atp-popover[hidden] { display: none !important; }
.atp-head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 8px 8px 4px;
}
.atp-title {
  font-weight: 600;
  color: var(--text-strong);
  font-size: 13px;
}
.atp-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.atp-close:hover { color: var(--text-strong); }
.atp-search-row {
  padding: 0 12px 8px;
}
.atp-search-row input {
  width: 100%;
  padding: 9px 12px;
  font-size: 13px;
  background: var(--bg);
  /* 拿掉深色框、改小圓角矩形 —— 符合 UPHiN 主搜尋 bar 的節奏 */
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  color: var(--text-strong);
  transition: border-color 0.15s, background 0.15s;
}
.atp-search-row input:focus {
  border-color: var(--border-strong);
  background: var(--panel);
}
.atp-list {
  flex: 1;
  overflow-y: auto;
  /* 左右內距對齊搜尋 bar 與新增專案按鈕，讓三個 bar 齊寬 */
  padding: 4px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.atp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-strong);
  transition: background 0.12s;
}
.atp-row:hover { background: var(--accent-soft); }
.atp-row.current { background: var(--accent-soft); }
.atp-row .name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.atp-row .meta {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.atp-row.in-project .meta {
  color: var(--accent-2);
  font-weight: 500;
}
.atp-empty {
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}
.atp-new-row {
  padding: 8px 12px 12px;
  border-top: 1px solid var(--border);
}
.atp-new-row button {
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  color: var(--text-strong);
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.atp-new-row button:hover { background: var(--accent-soft); }

/* Search card：加到專案按鈕（跟下載按鈕並排） */
.search-card-addproj {
  position: absolute;
  top: 6px;
  right: 40px;   /* 下載按鈕在 right:6，這顆在它左邊 */
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  cursor: pointer;
  padding: 0;
}
.search-card:hover .search-card-addproj { opacity: 1; }
.search-card-addproj:hover { background: var(--accent, #3b82f6); }
.tab {
  position: relative;
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 10px 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  transition: color 0.15s;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text-strong); }
/* 完全不顯示 focus 框：active 底線已經足夠當狀態指示 */
.tab:focus,
.tab:focus-visible { outline: none; }
.tab.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: var(--text-strong);
}

/* Hamburger drawer (slides in from right) */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.18);
  z-index: 1050;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease-out;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  /* 3/4 螢幕寬（使用者偏好），floor 480px 確保窄螢幕仍好讀 */
  width: max(480px, 75vw);
  max-width: 92vw;
  background: var(--panel);
  border-left: 1px solid var(--border);
  z-index: 1060;
  transform: translateX(100%);
  /* 從 0.22s 慢到 0.45s + cubic-bezier 讓出場更絲滑 */
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow-y: auto;
  box-shadow: var(--shadow-modal);
}
.drawer.open { transform: translateX(0); }
/* 關閉鈕定位到抽屜的右上角 — 因為 drawer 貼齊 viewport 右邊，
   right/top 座標會跟 header 的 hamburger 視覺上對齊。
   hamburger 在 topbar 中垂直置中，實測 top ≈ 34px 對齊最準。 */
/* 定位到抽屜的右上角，樣式沿用 .uph-iconbtn（跟搜尋 bar 的 X 一致） */
.drawer-close {
  position: absolute;
  top: 34px;
  right: 24px;
  z-index: 1;
}
/* body 上邊留給 X 的空間；下方保留原來的透氣 */
.drawer-body { padding: 72px 32px 40px; }

/* 只針對外層 <body > main>，避免影響巢狀的 <main class="projects-main"> */
body > main {
  padding: 24px 28px 56px;
  max-width: 1240px;
  margin: 0 auto;
}
/* 內層專案主欄：撐滿 grid 的 1fr，讓標題位置在空/滿都一致 */
.projects-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.panel { display: none; }
.panel.active { display: block; }

h2 { margin-top: 0; }

.hint { color: var(--muted); font-size: 12px; }

input, textarea, select {
  font-family: inherit;
  font-size: 13px;
  background: var(--panel);
  color: var(--text-strong);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 9px 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

textarea {
  width: 100%;
  resize: vertical;
  line-height: 1.55;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  /* User preference: no focus indicator beyond the cursor itself. Border
     stays the same as resting state, no halo shadow, no dark line. */
  border-color: var(--border);
  box-shadow: none;
}

button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  background: var(--panel);
  color: var(--text-strong);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.06s;
  letter-spacing: 0.04em;
}
button:hover {
  background: var(--accent-soft);
  border-color: var(--text-strong);
}
button:active { transform: translateY(1px); }
button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
/* Ghost: minimal, no border */
button.ghost {
  background: transparent;
  color: var(--muted);
  border-color: transparent;
}
button.ghost:hover {
  color: var(--text-strong);
  border-color: transparent;
  background: var(--accent-soft);
}

.row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
  flex-wrap: wrap;
}

.row > label { color: var(--muted); font-size: 12px; }

#folder-path { flex: 1; min-width: 280px; }

/* Folder-add bar uses the same shell as the search bar (.uph-search). The
   add-folder-plus glyph sits inside on the right, matching the search
   page's X / 🔍 / 🖼 icon row in size + spacing. */
.uph-folder-add { margin: 32px auto 12px; }
.add-folder-plus {
  font-size: 22px !important;
  font-weight: 300;
  line-height: 1;
  /* override .uph-iconbtn color so the + reads as muted-then-strong */
  color: var(--muted);
}
.add-folder-plus:hover {
  color: var(--text-strong) !important;
}

/* Compact folder summary (replaces old card grid) */
.folder-summary { margin-top: 12px; }
.folder-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 10px 0;
  transition: border-color 0.15s, background 0.15s;
}
.folder-row:hover { border-color: var(--border-strong); }
.folder-info { min-width: 0; flex: 1; }
.folder-row-name {
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
  word-break: break-all;
}
.folder-row-path {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  word-break: break-all;
}
.folder-row-stats {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.folder-row-stats .stat-ok { color: var(--accent-2); }
.folder-row-stats .stat-pending { color: var(--warn); }
.folder-row-stats .stat-running { color: var(--accent); }
.folder-row-stats .stat-error { color: var(--error); }
.folder-row-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Work queue — UPHiN minimal line + progress bar */
.wq-title { display: none; }   /* mockup hides the heading */
#work-queue {
  background: transparent;
  border: none;
  padding: 0;
  margin: 18px 0 14px;
}
.wq-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--text);
}
.wq-line-stats { color: var(--text-strong); }
.wq-line-actions { display: flex; gap: 6px; }
.wq-line-actions button {
  font-size: 11px;
  padding: 4px 10px;
}
.wq-progress {
  height: 2px;
  margin-top: 6px;
  background: rgba(0,0,0,0.12);
  border-radius: 1px;
  overflow: hidden;
}
.wq-progress-fill {
  height: 100%;
  background: #FFFFFF;
  transition: width 0.25s ease;
}
.stat-error { color: var(--error); }

/* DAM per-row tag button */
.dam-meta-actions {
  margin-top: 6px;
}
.dam-meta-actions button {
  font-size: 11px;
  padding: 4px 10px;
}
.dam-meta-actions button:disabled { opacity: 0.6; cursor: not-allowed; }

/* Clickable video name in DAM rows */
.dam-name-clickable {
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: color 0.12s, border-color 0.12s;
}
.dam-name-clickable:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Frames-detail modal */
.frames-modal-card { width: min(960px, 92vw); max-height: 92vh; }
#frames-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.frame-detail-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.frame-detail-row:last-child { border-bottom: none; }
.frame-detail-thumb {
  position: relative;
  width: 200px;
  height: 113px;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border);
}
.frame-detail-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frame-detail-thumb:hover { border-color: var(--accent); }
.frame-detail-time {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
}
/* 下載按鈕：hover 縮圖才浮出，不干擾主要的縮圖點擊 */
.frame-detail-download {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  cursor: pointer;
}
.frame-detail-thumb:hover .frame-detail-download { opacity: 1; }
.frame-detail-download:hover { background: var(--accent, #3b82f6); }
.frame-detail-tags {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tag-line {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 8px;
  align-items: baseline;
}
.tag-key {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-align: right;
  padding-right: 4px;
  border-right: 1px solid var(--border);
}
.tag-val {
  color: var(--text);
  word-break: break-word;
  line-height: 1.5;
}

.folder-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.folder-path {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  color: var(--muted);
}

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 400;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,0.05);
  color: var(--muted);
  letter-spacing: 0.04em;
}
.badge.done { background: rgba(89,87,87,0.10); color: var(--text); }
.badge.pending { background: rgba(184,150,66,0.14); color: var(--warn); }
.badge.tagging { background: var(--accent-soft); color: var(--text-strong); }
.badge.error { background: rgba(180,90,87,0.14); color: var(--error); }

/* DAM (Digital Asset Management) browser */
.dam-title { margin: 32px 0 8px; }
.dam-browser {
  --dam-tree-width: 260px;
  display: grid;
  grid-template-columns: var(--dam-tree-width) 5px 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
  min-height: 320px;
  margin-bottom: 28px;
}
@media (max-width: 760px) {
  .dam-browser {
    grid-template-columns: 1fr;
  }
  .dam-resizer { display: none; }
}

/* Draggable splitter between tree and grid */
.dam-resizer {
  position: relative;
  cursor: col-resize;
  background: transparent;
  transition: background 0.15s;
  user-select: none;
}
.dam-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  width: 1px;
  background: var(--border);
}
.dam-resizer:hover { background: rgba(255,255,255,0.06); }
.dam-resizer:hover::after { background: var(--muted); }
.dam-resizer.active {
  background: rgba(255,255,255,0.10);
}
.dam-resizer.active::after { background: var(--accent); }
.dam-resizing,
.dam-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

.dam-tree {
  border-right: 1px solid var(--border);
  padding: 8px 6px;
  overflow: auto;
  height: calc(100vh - 120px);
  min-height: 640px;
}
/* 樹頂部工具列（統一的「重新掃描全部」按鈕）*/
.dam-tree-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 2px 6px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
/* 掃描進行中：按鈕變半透明 + 圖示自轉 + 游標變等待 */
.tree-icon-btn.is-loading {
  opacity: 0.5;
  cursor: wait;
}
.tree-icon-btn.is-loading svg {
  animation: uphin-spin 1s linear infinite;
}
@keyframes uphin-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
.dam-tree-root,
.dam-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tree-node { display: block; }
.tree-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  padding-left: calc(6px + var(--depth, 0) * 14px);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
}
.tree-row:hover { background: var(--panel-2); }
.tree-row.selected {
  background: var(--accent-soft);
  color: var(--text);
}
.tree-row.tree-branch { color: var(--muted); font-weight: 500; }
.tree-row.tree-leaf { color: var(--text); }

/* 資料夾樹的動作 —— 2026-09-19 起收進右鍵選單（.row-menu），
   列上不再有 hover 才出現的垃圾桶／✕。理由見 window.js 的 openRowMenu。
   ⚠️ .tree-actions 的規則留著：網頁版（static/cloud.js）那棵樹還在用。 */
.tree-actions {
  display: inline-flex;
  gap: 2px;
  margin-left: 6px;
  opacity: 0;
  transition: opacity 0.12s;
  flex-shrink: 0;
}
.tree-row:hover .tree-actions,
.tree-row.selected .tree-actions { opacity: 1; }

/* ── 右鍵選單 ───────────────────────────────────────────────
   ⚠️ position: fixed —— 座標直接用滑鼠的 clientX/Y，不用管它被放在
      哪一層捲動容器裡。相對的代價是樹一捲它就留在原地指著別人，
      所以 window.js 在 scroll 時會把它收掉。
   ⚠️ z-index 要在彈窗（2000）之下：確認框蓋上來的時候選單已經關了，
      但萬一沒關，不能讓它壓在「確定／取消」上面。 */
.row-menu {
  position: fixed;
  z-index: 1900;
  min-width: 190px;
  padding: 4px;
  background: var(--seedoes-canvas);
  border: 0.5px solid var(--seedoes-ink);
  border-radius: var(--seedoes-radius);
  box-shadow: var(--shadow-modal);
  font-size: 12px;
  animation: row-menu-in 0.1s ease;
}
@keyframes row-menu-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.row-menu-item {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--seedoes-ink);
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.row-menu-item:hover { background: rgba(26, 26, 26, 0.07); }
/* ⚠️ 危險的項目平常**不染紅**：一整排紅字會讓人眼睛麻掉，
      反而看不出哪一個真的危險。滑上去才紅。
   ⚠️ class 是 is-danger 不是 danger —— 全域的 `button.danger` 優先度更高，
      會把顏色跟內距都蓋掉（見 window.js 的 openRowMenu）。 */
.row-menu-item.is-danger:hover { color: var(--error); }
.tree-icon-btn {
  background: transparent;
  border: none;
  padding: 2px 4px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  border-radius: 4px;
}
.tree-icon-btn:hover {
  background: var(--panel);
  color: var(--text);
}
.tree-icon-btn.danger:hover {
  color: var(--error);
}
.tree-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.tree-caret {
  display: inline-block;
  width: 12px;
  text-align: center;
  font-size: 10px;
  color: var(--muted);
}
.tree-icon { font-size: 12px; }
.tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.tree-count { color: var(--muted); font-size: 11px; margin-left: 4px; }

.dam-grid {
  overflow: auto;
  /* Match dam-tree so the two panes stay aligned. */
  height: calc(100vh - 120px);
  min-height: 640px;
  padding: 0;
}
.dam-grid-head {
  position: sticky;
  top: 0;
  background: var(--panel);
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  z-index: 1;
}
/* 右上角的檔名搜尋框（絕對定位、不擠標題） */
.dam-folder-filter {
  position: absolute;
  top: 12px;
  right: 16px;
  width: min(280px, 40%);
}
.dam-folder-filter input {
  width: 100%;
  padding: 6px 12px;
  font-size: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  color: var(--text-strong);
  transition: border-color 0.15s, background 0.15s;
}
.dam-folder-filter input:focus {
  border-color: var(--border-strong);
  background: var(--panel);
}
.dam-grid-head { position: sticky; }
.dam-grid-head { padding-right: 320px; }
.dam-folder-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.dam-folder-chip {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: rgba(255,255,255,0.08);
  padding: 4px 12px;
  border-radius: 999px;
}
.dam-folder-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  word-break: break-all;
}
.dam-folder-stats {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.dam-folder-stats .stat-ok { color: var(--accent-2); }
.dam-folder-stats .stat-pending { color: var(--warn); }
.dam-folder-stats .stat-running { color: var(--accent); }
/* 全庫搜尋模式：每張卡片頂部顯示所在資料夾 */
.dam-folder-crumb {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 4px;
  opacity: 0.8;
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dam-folder-stats .stat-error { color: var(--error); }

.dam-rows { padding: 4px 12px 12px; }
.dam-video-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  padding: 6px 4px;   /* was 10px, tighter to fit more per screen */
  border-bottom: 1px solid var(--border);
}
.dam-video-row:last-child { border-bottom: none; }
.dam-meta { font-size: 12px; min-width: 0; }
.dam-name {
  font-weight: 600;
  color: var(--text);
  /* Single-line title; hover for full filename via the title attribute. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.dam-meta-line { color: var(--muted); font-size: 11px; margin-top: 2px; }

.dam-summary {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
  background: var(--panel-2);
  border-left: 2px solid var(--accent);
  padding: 6px 8px;
  border-radius: 0 4px 4px 0;
  /* truncated 20-char form is short enough to fit one line; if long
     descriptions slip through we still cap height */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dam-summary-clickable {
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.dam-summary-clickable:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--accent-hover);
}

.frame-summary-block {
  background: var(--panel-2);
  border-left: 3px solid var(--accent);
  padding: 12px 14px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 6px;
}
.frame-summary-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.frame-summary-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}

.dam-thumbs {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 2px 0 8px;   /* was 4px 0 12px, tighter */
  align-items: center;
  min-height: 48px;      /* was 60px */
  /* Force the chunky scrollbar to render on macOS Chrome (which would
     otherwise auto-hide). */
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--panel-2);
}
.dam-thumbs::-webkit-scrollbar {
  height: 10px;
  -webkit-appearance: none;
  appearance: none;
}
.dam-thumbs::-webkit-scrollbar-track {
  background: var(--panel-2);
  border-radius: 5px;
  margin: 0 4px;
}
.dam-thumbs::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 5px;
  min-width: 40px;
  border: 2px solid var(--panel-2);
}
.dam-thumbs::-webkit-scrollbar-thumb:hover {
  background: var(--accent-2);
}
.dam-thumbs::-webkit-scrollbar-thumb:active {
  background: var(--accent-2);
}
.dam-thumbs-loading,
.dam-thumbs > .hint { font-size: 11px; color: var(--muted); }

.dam-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 80px;        /* was 96px, ~16% smaller */
  height: 45px;       /* was 54px, keeps 16:9 */
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
  transition: transform 0.15s ease, z-index 0.01s;
}
.dam-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.dam-thumb:hover {
  transform: scale(1.8);
  z-index: 10;
  border-color: var(--accent);
}
.dam-thumb-time {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 10px;
  padding: 1px 4px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.12s;
  pointer-events: none;
}
.dam-thumb:hover .dam-thumb-time { opacity: 1; }

/* 縮圖真的載不出來（重簽過一次還是失敗）——
   ⚠️ 留一塊安靜的灰底，不要留瀏覽器那個破圖圖示。
      破圖圖示在一整排上看起來像整個軟體壞了，灰底只是「這一格沒有圖」。 */
img.thumb-dead {
  visibility: hidden;
}
.dam-thumb:has(img.thumb-dead) {
  background: var(--seedoes-tint, #E4E2DC);
}

.jobs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 4px;
}
.jobs-header h3 { margin: 0; }
.jobs-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.jobs-toggle input { margin: 0; }

#jobs .job {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 6px 0;
  font-size: 12px;
  transition: padding 0.18s, background 0.18s;
}
#jobs .job.collapsed {
  padding: 4px 12px;
  background: transparent;
  border-color: var(--border);
}
.job-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.job-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.job-summary span:first-child { color: var(--accent-2); font-weight: 700; }
.job-summary span:nth-child(2) { flex: 1; }
.job-expand-btn,
.job-collapse-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 4px;
}
.job-expand-btn:hover,
.job-collapse-btn:hover {
  background: var(--panel-2);
  color: var(--text);
}
/* Stop running job — small grey ghost button next to the 執行中 badge. */
.job-stop-btn {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  padding: 2px 10px;
  font-size: 11px;
  border-radius: 4px;
  margin-left: 8px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.job-stop-btn:hover {
  background: var(--border);
  color: var(--text-strong);
  border-color: var(--muted);
}
.job-stop-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.progress-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}
.progress-bar > div {
  height: 100%;
  background: var(--accent);
  width: 0%;
}

/* UPHiN big search bar (Phase 3) */
.uph-search {
  display: flex;
  align-items: center;
  background: var(--panel);
  border: none;
  border-radius: 14px;
  padding: 10px 10px 10px 20px;
  margin: 28px auto 16px;
  max-width: 1240px;
  /* 陰影拿掉，維持乾淨的搜尋 bar；分鏡輸入框保留 neumorphism */
}
.uph-search:focus-within {
  /* Intentionally empty */
}
/* Drag-and-drop feedback — when an image is dragged over the search bar,
   highlight it so the user knows the drop zone is active. Class added by
   the drop-handler in app.js and removed on drop / dragleave. */
.uph-search.dragging-image {
  outline: 2px dashed var(--text-strong);
  outline-offset: 2px;
  background: var(--accent-soft);
  transition: background 0.1s;
}
.uph-search.dragging-image::before {
  content: "放開以進行以圖搜圖";
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--text-strong);
  background: var(--panel);
  padding: 2px 10px;
  border-radius: 3px;
  border: 1px solid var(--border-strong);
  pointer-events: none;
  white-space: nowrap;
}
/* .uph-search needs relative positioning so the ::before badge anchors */
.uph-search { position: relative; }
.uph-search-input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  outline: none;
  font-size: 15px;
  padding: 8px 0 !important;
  color: var(--text-strong);
  /* Kill the global input:focus halo so the bar stays clean on type */
  box-shadow: none !important;
}
.uph-search-input:focus { box-shadow: none !important; outline: none !important; }
.uph-search-input::placeholder { color: var(--muted); }
.uph-search-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.uph-iconbtn {
  width: 34px;
  height: 34px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.uph-iconbtn:hover {
  color: var(--text-strong);
  background: var(--accent-soft) !important;
}
.uph-iconbtn svg { width: 18px; height: 18px; }
.uph-divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border-strong);
  margin: 0 4px;
}

/* Pasted/uploaded image preview inside the search bar — small thumbnail
   left of the input text so user knows the image is "loaded". */
.search-preview {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin-right: 10px;
  border-radius: 4px;
  overflow: visible;
}
.search-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  border: 1px solid var(--border);
}
.search-preview-clear {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: var(--text-strong);
  color: #fff;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  cursor: pointer;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-preview-clear:hover { background: #000; }

/* Search history dropdown — shown when search input is focused + empty */
.search-history-dd {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  z-index: 20;
  overflow: hidden;
}
.search-history-item {
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.search-history-item:last-child { border-bottom: none; }
.search-history-item:hover {
  background: var(--panel-2);
  color: var(--text-strong);
}

.uph-axes {
  justify-content: flex-start;
  margin: 8px auto 6px;
  max-width: 1240px;
  border: none;
  font-size: 11px;
}
.axes-label { color: var(--muted); margin-right: 6px; }

/* Search results — 4-column card grid */
.search-card {
  background: var(--panel);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  /* box-shadow + transform 一起做 hover lift；捲動時 body.is-scrolling
     會把兩個效果都關掉，避免 momentum scroll 跨卡片閃爍。 */
  transition: box-shadow 0.15s, transform 0.15s;
  /* `contain: layout paint` 隔離每張卡的 layout/paint，捲動更順 */
  contain: layout paint;
}
.search-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
/* Momentum-scroll flicker fix：捲動中 100ms 內關 hover + pointer-events */
body.is-scrolling .search-card {
  pointer-events: none;
}
body.is-scrolling .search-card:hover {
  box-shadow: none;
  transform: none;
}
.search-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--panel-2);
  overflow: hidden;
  /* Promote to its own GPU compositing layer — keeps the painted image
     stable during fast scroll so the browser doesn't have to repaint it
     on every frame. Big win for the flicker problem. */
  transform: translateZ(0);
  will-change: transform;
}
.search-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.search-card-time {
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 2px;
  background: rgba(0,0,0,0.6);
  color: #fff;
}
/* 下載按鈕：hover 卡片才浮出，不干擾原本點卡片開播放器 */
.search-card-download {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  cursor: pointer;
}
.search-card:hover .search-card-download { opacity: 1; }
.search-card-download:hover { background: var(--accent, #3b82f6); }
.search-card-body {
  padding: 10px 12px 14px;
}
.search-card-title {
  font-size: 12px;
  color: var(--text-strong);
  font-weight: 400;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-card-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.uph-results-grid {
  display: grid;
  gap: 18px;
  margin-top: 20px;
  /* Default sizing (matches [data-size="m"]) so no-JS / initial render
     doesn't visibly reflow. */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
/* Size variants — controlled by the S/M/L/XL toggle in search-summary.
   Each min value determines the smallest card width; auto-fill packs
   as many columns as viewport allows.
   XS ≈ dense scan (many small thumbs); XL ≈ inspect mode (few big). */
.uph-results-grid[data-size="xs"] { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.uph-results-grid[data-size="s"]  { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.uph-results-grid[data-size="m"]  { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.uph-results-grid[data-size="l"]  { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.uph-results-grid[data-size="xl"] { grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); }

/* Size toggle sits at the right of the summary line. */
.size-toggle {
  display: inline-flex;
  gap: 2px;
  margin-left: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.size-toggle button {
  background: transparent;
  border: none;
  padding: 3px 10px;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  letter-spacing: 0.04em;
  border-radius: 0;
}
.size-toggle button:hover {
  background: var(--accent-soft);
  color: var(--text-strong);
}
.size-toggle button.active {
  background: var(--text-strong);
  color: var(--accent-fg);
}
.search-summary {
  display: flex;
  align-items: center;
  gap: 12px;
}

.axes {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 14px;
}
.axes label { display: flex; gap: 4px; align-items: center; }
/* `display: flex` above overrides the HTML5 hidden attribute (which maps
   to display: none). Restore the semantic so `<div class="axes" hidden>`
   actually hides. */
.axes[hidden] { display: none !important; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.frame-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  font-size: 12px;
}
.frame-card img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  background: #000;
}
.frame-card .meta { padding: 8px 10px; }
.frame-card .meta .vid { font-weight: 600; word-break: break-all; }
.frame-card .meta .tags {
  color: var(--muted);
  margin-top: 4px;
  font-size: 11px;
}
.frame-card .score {
  color: var(--accent-2);
  font-size: 11px;
}
.literal-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  vertical-align: middle;
  font-weight: 500;
}

.search-summary {
  font-size: 12px;
  color: var(--muted);
  margin: 12px 0 6px;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px 0 4px;
}
.pagination .page-indicator {
  color: var(--muted);
  font-size: 12px;
  min-width: 110px;
  text-align: center;
}
.pagination button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.output {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 18px 22px;
  white-space: pre-wrap;
  font-family: "PingFang TC", "Noto Sans TC", inherit;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  min-height: 80px;
  margin-top: 6px;
}

/* UPHiN textfield with inline action icon */
.uph-textfield {
  position: relative;
  margin-top: 18px;
}
.uph-textfield textarea {
  width: 100%;
  /* 關掉右下角的拖曳把手（那個小黑三角） */
  resize: none;
  padding: 14px 44px 14px 18px !important;
  font-size: 13px;
  background: var(--panel);
  border: none !important;
  border-radius: 14px;
  outline: none;
}
.uph-textfield textarea:focus {
  outline: none !important;
}
.uph-iconbtn-inline {
  /* 容器 wrapper (.uph-textfield > div) 已用 flex 排列，這裡不再絕對定位，
     否則多顆會互相疊在同一個 top/right 位置。 */
  position: static;
  width: 28px;
  height: 28px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  color: var(--muted);
  cursor: pointer;
  border-radius: 4px;
}
.uph-iconbtn-inline:hover {
  color: var(--text-strong);
  background: var(--accent-soft) !important;
}
.uph-iconbtn-inline svg { width: 16px; height: 16px; }

.uph-result-wrap {
  position: relative;
  margin-top: 20px;
}
.uph-download-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
}

/* Storyboard grid (Phase 5) */
.storyboard-overall {
  font-size: 12px;
  color: var(--text);
  margin: 18px 0 10px;
  padding: 10px 14px;
  background: var(--panel);
  border-left: 2px solid var(--text-strong);
  border-radius: 0 4px 4px 0;
}
.storyboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
@media (min-width: 1100px) {
  .storyboard-grid { grid-template-columns: repeat(4, 1fr); }
}
.storyboard-card {
  background: var(--panel);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s;
}
.storyboard-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.storyboard-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--panel-2);
  overflow: hidden;
}
.storyboard-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.storyboard-card-noref {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--muted);
}
/* Cut number + duration sit in a thin bar between the thumb and the body
   text (not overlaid on the image any more). Left = 01, right = 3s. */
.storyboard-card-numbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px 0;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.storyboard-card-num {
  color: var(--text-strong);
  font-weight: 500;
}
.storyboard-card-dur {
  color: var(--muted);
}
.storyboard-card-body {
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text);
  line-height: 1.5;
}
.storyboard-card-scene {
  font-weight: 500;
  color: var(--text-strong);
  font-size: 12px;
}
.storyboard-card-visual {
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.storyboard-card-meta { color: var(--muted); font-size: 11px; }
.storyboard-card-meta .hint { margin-right: 4px; }

/* "換圖" floating button on shot card */
.storyboard-card-swap {
  position: absolute;
  bottom: 6px; right: 6px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  border: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.storyboard-card-thumb:hover .storyboard-card-swap { opacity: 1; }
.storyboard-card-swap:hover { background: rgba(0,0,0,0.85); }
/* On no-ref cards, always show the button (no image to obscure) */
.storyboard-card-noref + .storyboard-card-swap { opacity: 1; }

/* Candidates strip under the main thumb (top 5 from per-shot search) */
.storyboard-card-cands {
  display: flex;
  gap: 3px;
  padding: 4px 4px 0;
  background: var(--panel-2);
  border-top: 1px solid var(--border);
}
.storyboard-card-cands img {
  width: 48px;
  height: 27px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.7;
  border: 1px solid transparent;
  transition: opacity 0.1s, border-color 0.1s;
}
.storyboard-card-cands img:hover { opacity: 1; }
.storyboard-card-cands img.is-active {
  opacity: 1;
  border-color: var(--accent, #4a90e2);
}

/* Shot picker modal */
.shot-picker-card {
  width: min(90vw, 1100px);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.shot-picker-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.shot-picker-search {
  display: flex;
  gap: 8px;
}
.shot-picker-search input {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
}
/* Picker-specific focus override is no longer needed — the global
   input:focus rule above already keeps border-color as --border. */
.shot-picker-status { min-height: 16px; }

/* --- Relink modal (Phase B) --- */
.relink-modal-card {
  width: min(90vw, 1100px);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.relink-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}
#relink-summary { padding: 6px 2px; }
#relink-list { display: flex; flex-direction: column; gap: 8px; }
.relink-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  background: var(--panel-2);
  border-radius: 4px;
  font-size: 12px;
}
.relink-row input[type="checkbox"] { margin-top: 3px; }
.relink-row-name {
  font-weight: 500;
  color: var(--text-strong);
  word-break: break-all;
}
.relink-row-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  word-break: break-all;
}
.relink-row-path.old { text-decoration: line-through; opacity: 0.7; }
.relink-row-path.new { color: var(--text); }
.relink-row-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-left: 6px;
}
/* Perceptual match — a judgement call, not a certainty. Amber so it reads
   differently from the byte-exact matches sitting next to it. */
.relink-row-badge.warn {
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  color: var(--warn);
}
.relink-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin: 8px 0 4px;
  letter-spacing: 0.04em;
}

/* --- Missing files modal --- */
.missing-modal-card {
  width: min(88vw, 900px);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.missing-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}
#missing-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px;
  background: var(--panel-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--muted);
}
.missing-row {
  padding: 3px 4px;
  border-bottom: 1px solid var(--border);
  word-break: break-all;
}
.missing-row:last-child { border-bottom: none; }
.missing-row .name {
  color: var(--text-strong);
  font-family: "PingFang TC", "Noto Sans TC", inherit;
  font-size: 12px;
  font-weight: 500;
}
.missing-row .path {
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}
#missing-relink-result {
  max-height: 240px;
  overflow-y: auto;
  padding: 8px;
  background: var(--panel-2);
  border-radius: 4px;
  font-size: 12px;
}
/* Drag-target visual feedback on the path input */
#missing-relink-path.drag-target {
  border-color: var(--text-strong) !important;
  background: var(--accent-soft) !important;
}
.missing-relink-match {
  padding: 6px;
  border-bottom: 1px solid var(--border);
}
.missing-relink-match:last-child { border-bottom: none; }
.missing-relink-match .name {
  color: var(--text-strong);
  font-weight: 500;
  font-size: 12px;
}
.missing-relink-match .old {
  color: var(--muted);
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-decoration: line-through;
}
.missing-relink-match .new {
  color: var(--accent-2);
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- Duplicate management modal (Phase C) --- */
.dup-modal-card {
  width: min(92vw, 1200px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.dup-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
#dup-list { display: flex; flex-direction: column; gap: 18px; }
.dup-cluster {
  background: var(--panel-2);
  border-radius: 6px;
  padding: 12px 14px;
}
.dup-cluster-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.dup-cluster-header b { color: var(--text-strong); }
.dup-cluster-videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.dup-video {
  position: relative;
  background: var(--panel);
  border-radius: 4px;
  padding: 10px;
  border: 2px solid transparent;
  transition: border-color 0.12s;
  font-size: 11px;
}
.dup-video.is-keep {
  border-color: var(--accent-2);
  background: rgba(110,142,106,0.06);
}
.dup-video.is-delete {
  border-color: var(--error);
  background: rgba(180,90,87,0.05);
  opacity: 0.9;
}
.dup-video-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.dup-video-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.dup-video-name {
  font-weight: 500;
  color: var(--text-strong);
  word-break: break-all;
  margin-bottom: 3px;
}
.dup-video-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: var(--muted);
  word-break: break-all;
  margin-bottom: 4px;
}
.dup-video-meta {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 8px;
}
.dup-video-meta span { margin-right: 6px; }
.dup-video-actions {
  display: flex;
  gap: 4px;
  font-size: 11px;
}
.dup-video-actions button {
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
}
.dup-video-actions button.active-keep {
  background: var(--accent-2);
  color: #fff;
  border-color: var(--accent-2);
}
.dup-video-actions button.active-delete {
  background: var(--error);
  color: #fff;
  border-color: var(--error);
}
.dup-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-left: 4px;
}
.dup-badge.warn {
  background: rgba(184,150,66,0.14);
  color: var(--warn);
}
.shot-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* Use shorthand `gap` for max browser compatibility; column-gap and
     row-gap split sometimes behaves differently inside a flex parent.
     16px = roughly 1 thumb-line of white space between rows. */
  gap: 18px;
  overflow-y: auto;
  flex: 1;
  padding: 10px 4px 14px;
}
.shot-picker-tile {
  /* Use the classic "padding-bottom 56.25%" trick instead of aspect-ratio.
     With many tiles inside a height-constrained grid container, browsers
     can collapse aspect-ratio-based rows to a tiny height. padding-bottom
     reserves the height unconditionally so every tile is true 16:9. */
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  background: var(--panel-2);
  cursor: pointer;
  overflow: hidden;
  border-radius: 4px;
  border: 2px solid transparent;
  transition: border-color 0.1s, transform 0.1s;
}
.shot-picker-tile:hover {
  border-color: var(--accent, #4a90e2);
  transform: scale(1.02);
}
.shot-picker-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shot-picker-tile-meta {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  color: #fff;
  font-size: 10px;
  padding: 12px 6px 4px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shot-picker-tile-score {
  /* Hidden by user preference —排序仍然依百分比由高到低，但不顯示數字。
     Remove this rule to bring the badge back. */
  display: none;
}

details {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 8px 0;
}
details > summary {
  cursor: pointer;
  outline: none;
}

code { color: var(--accent-2); font-size: 12px; }

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  max-width: 90%;
}
.toast.show { opacity: 1; }
.toast.error { border-color: var(--error); color: var(--error); }
.toast.ok { border-color: var(--accent-2); color: var(--accent-2); }
.toast.warn { border-color: var(--warn); color: var(--warn); }

/* The "this file is already in the library twice" offer. Sits above the
   missing-file list because it's the actionable answer, not a footnote. */
.missing-merge-banner {
  background: var(--panel-2);
  border: 1px solid var(--accent-2);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 12px;
}

/* Settings → background scan scope. Capped height because a library can
   have dozens of registered folders and this shouldn't push the rest of
   the settings page off screen. */
.scan-scope-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
  padding: 8px 10px;
  background: var(--panel-2);
  border-radius: 4px;
}
.scan-scope-list label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  min-width: 0;
}
.scan-scope-list .scope-path {
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Frame card click affordance */
.frame-card { cursor: pointer; transition: transform 0.12s, border-color 0.12s; }
.frame-card:hover { transform: translateY(-2px); border-color: var(--accent); }

/* Video player modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(219, 220, 220, 0.85);
  backdrop-filter: blur(6px);
}
.modal-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: min(960px, 92vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-modal);
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.modal-title { font-weight: 600; font-size: 14px; }
.modal-sub { color: var(--muted); font-size: 12px; margin-top: 2px; word-break: break-all; }
.modal-x {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  font-weight: 400;
}
.modal-x:hover { color: var(--text); }
.modal-body {
  padding: 14px 18px;
  overflow: auto;
}
.modal-body video {
  width: 100%;
  max-height: 65vh;
  background: #000;
  border-radius: 4px;
  display: block;
}
/* Player modal — image branch. `contain` preserves the true aspect ratio
   so photos aren't cropped when the user opens the detail modal. Max
   height caps at 65vh so we don't push the modal off-screen for tall
   verticals. Black background around the letterbox reads as intentional
   (like a photo viewer / lightbox). */
.modal-body img#player-image {
  display: block;
  width: 100%;
  max-height: 65vh;
  object-fit: contain;
  background: #000;
  border-radius: 4px;
}
/* HTML5 `hidden` attribute normally maps to display: none, but the
   .modal-body video / img rules above use display: block which wins by
   specificity. Restore the hidden semantics explicitly so the JS
   branch-swap (video vs image) actually hides one at a time. */
.modal-body video[hidden],
.modal-body img#player-image[hidden] {
  display: none !important;
}
.player-frame-desc {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--panel-2);
  border-left: 2px solid var(--text-strong);
  border-radius: 0 4px 4px 0;
}
.modal-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}
/* Footer buttons in modal should look like text links (per mockup) */
.modal-foot button.ghost {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 4px 0;
  font-size: 12px;
}
.modal-foot button.ghost:hover {
  color: var(--text-strong);
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Error details modal */
.error-modal-card { width: min(640px, 92vw); max-height: 80vh; }
.err-section { margin-bottom: 18px; }
.err-section:last-child { margin-bottom: 0; }
.err-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.err-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  word-break: break-all;
  margin-bottom: 8px;
}
.err-row-actions {
  display: flex;
  gap: 8px;
}
.err-row-actions button {
  font-size: 11px;
  padding: 4px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  cursor: pointer;
}
.err-row-actions button:hover {
  background: var(--border);
}
.err-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
}
.err-foot {
  justify-content: space-between !important;
}
.err-foot-right {
  display: flex;
  gap: 12px;
}
.err-foot button.danger {
  color: #b00020;
  background: transparent;
  border: 1px solid #e6c4ca;
}
.err-foot button.danger:hover {
  background: rgba(176,0,32,0.06);
  border-color: #b00020;
}

/* 全域 button.danger：危險/破壞性動作的按鈕（純紅字、無框） */
button.danger {
  color: var(--error, #b00020);
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s;
}
button.danger:hover {
  background: rgba(176, 0, 32, 0.06);
}
.err-foot button.primary {
  background: var(--text-strong);
  color: #fff;
  border: 1px solid var(--text-strong);
}
.err-foot button.primary:hover {
  background: var(--text);
}

/* Storyboard toolbar — appears above the shot grid once cards rendered */
.storyboard-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 6px 0 12px;
}
/* 顯式蓋掉 display:flex，讓 hidden 屬性真的生效 */
.storyboard-toolbar[hidden] { display: none !important; }

/* Storyboard history tabs — one row of 1..5 slots + [+] to make new.
   Each slot shows its letter (A/B/C/D/E) and hover-title with brief preview.
   Active slot has a dark underline. Storage: sessionStorage → clears when
   the browser is closed. */
.storyboard-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0 8px;
  margin: 14px 0 12px;
}
.storyboard-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.12s, color 0.12s;
}
.storyboard-tab:hover {
  background: var(--accent-soft);
  color: var(--text-strong);
}
.storyboard-tab.active {
  color: var(--text-strong);
  background: var(--panel);
  border-color: var(--border);
  border-bottom-color: var(--panel);
  margin-bottom: -1px;
}
.storyboard-tab-letter {
  font-weight: 500;
  font-size: 13px;
}
.storyboard-tab-time {
  font-size: 10px;
  color: var(--muted);
}
.storyboard-tab-close {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  padding: 0 2px;
  cursor: pointer;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 0.12s, color 0.12s;
}
.storyboard-tab-close:hover {
  opacity: 1;
  color: var(--error);
}
.storyboard-tab-empty {
  color: var(--muted);
  font-size: 11px;
  padding: 6px 12px;
  font-style: italic;
}
.storyboard-tabs-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}

/* ===========================================================
   PRINT — used when the user clicks 下載 PDF → browser print
   Hides everything except the storyboard so the saved PDF is
   a clean, A4-friendly shot deck (title + cards, no nav).
   =========================================================== */
/* ================================================================
   列印 / 下載 PDF · STORY 分鏡
   走的是瀏覽器的「列印 → 另存 PDF」（app.js 的 window.print()）。

   兩件關鍵：
   1. `print-color-adjust: exact` —— Chrome 列印對話框的「背景圖形」
      預設是關的，沒有這行，米色底、灰色縮圖底、分隔線全部會不見。
      實測：加了這行之後，沒勾背景圖形也一樣印得出來。
   2. 選擇器要寫成 `body.seedoes-mode …` 的權重。
      這一段的舊版是用 `.storyboard-card` 這種單類別選擇器寫的，
      壓不過 `body.seedoes-mode .story-content .storyboard-card`（(0,3,1)），
      加 !important 也沒用 —— 結果就是螢幕上的 954px 三欄版面直接
      印到 A4 上，左邊整欄被裁掉。

   Chrome 沒有支援 `@page { @bottom-center { content: counter(page) } }`，
   所以頁碼做不到；使用者要頁碼可以在列印對話框勾「頁首及頁尾」。
   ================================================================ */

@media print {

  /* ---- 底色與顏色 · 強制照網頁印出來 ---- */
  html, body {
    background: var(--seedoes-canvas) !important;
    color: var(--seedoes-ink) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body.seedoes-mode * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ---- 藏掉所有不屬於這份文件的東西 ---- */
  body.seedoes-mode .seedoes-header,
  body.seedoes-mode .seedoes-sidebar,
  body.seedoes-mode .seedoes-user-menu,
  body.seedoes-mode .drawer,
  body.seedoes-mode .drawer-backdrop,
  body.seedoes-mode .toast,
  body.seedoes-mode .toast-wrap,
  body.seedoes-mode .modal,
  body.seedoes-mode .seedoes-dialog-back,
  body.seedoes-mode .atp-popover,
  body.seedoes-mode #assistant-toggle,
  body.seedoes-mode #assistant-panel,
  body.seedoes-mode #tab-search,
  body.seedoes-mode #tab-library,
  body.seedoes-mode #tab-projects,
  body.seedoes-mode #tab-reorg,
  body.seedoes-mode #tab-settings,
  /* STORY 頁上只屬於螢幕的東西 */
  body.seedoes-mode .story-field,
  body.seedoes-mode .story-bar,
  body.seedoes-mode .story-meta,
  body.seedoes-mode .story-scroll,
  body.seedoes-mode .story-legacy,
  body.seedoes-mode .storyboard-card-numbar,
  body.seedoes-mode .story-content .sb-act {
    display: none !important;
  }

  /* ---- 版面歸零 ---- */
  body.seedoes-mode main {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }
  body.seedoes-mode main > section.panel {
    max-width: none !important;
    margin: 0 !important;
  }
  body.seedoes-mode #tab-script {
    display: block !important;
    padding: 0 !important;
  }
  body.seedoes-mode .story-page {
    width: auto !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* ⚠️ .story-content 在螢幕上是捲動容器（固定高 + overflow:auto）·
     不放開的話只會印出「看得到的那一屏」 */
  body.seedoes-mode .story-body,
  body.seedoes-mode .story-content {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
  }

  /* ---- 列印用的抬頭（只有列印時出現）---- */
  body.seedoes-mode .story-print-head {
    display: flex !important;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 0 0 10px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--seedoes-ink);
    break-inside: avoid;
  }
  body.seedoes-mode .story-print-logo {
    height: 14px;
    width: auto;
    display: block;
  }
  body.seedoes-mode .story-print-meta {
    font-size: 10px;
    line-height: 1.5;
    color: var(--muted);
    text-align: right;
    white-space: nowrap;
  }
  body.seedoes-mode .story-print-overall {
    display: block !important;
    margin: 0 0 16px;
    font-size: 11px;
    line-height: 1.6;
    color: var(--seedoes-ink);
    break-inside: avoid;
  }
  body.seedoes-mode .story-print-overall:empty { display: none !important; }

  /* ---- 卡片 · A4 直式兩欄 ---- */
  body.seedoes-mode .story-content .storyboard-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 14px !important;
    row-gap: 16px !important;
  }
  body.seedoes-mode .story-content .storyboard-card {
    width: auto !important;
    height: auto !important;          /* 螢幕上是固定 306 · 印出來要讓內容撐開 */
    break-inside: avoid;
    page-break-inside: avoid;
    transform: none !important;
    overflow: visible !important;
  }
  body.seedoes-mode .story-content .storyboard-card-thumb {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    background: #D3D3D3 !important;
  }
  body.seedoes-mode .story-content .storyboard-card-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
  body.seedoes-mode .story-content .storyboard-card-body {
    padding: 4px 0 0 !important;      /* 印出來不需要螢幕上那 12px 側邊留白 */
  }
  body.seedoes-mode .story-content .storyboard-card-title {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin: 0 0 2px !important;
  }
  /* 描述在螢幕上夾 6 行 · 印出來要完整 */
  body.seedoes-mode .story-content .storyboard-card-desc {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    font-size: 9.5px !important;
    line-height: 1.55 !important;
    color: #5A5A58 !important;        /* --muted 在紙上偏淡 · 壓深一點 */
  }

  @page { size: A4 portrait; margin: 12mm; }
}

/* Clickable error badge — looks slightly interactive */
.badge.badge-clickable {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-style: dotted;
  text-decoration-color: rgba(176,0,32,0.4);
}
.badge.badge-clickable:hover {
  filter: brightness(0.92);
}

/* =========================================================
 * 對話式素材助理 · Phase 1
 * 側邊面板 + 浮動按鈕 · Claude Desktop 灰調
 * ========================================================= */

/* 浮動按鈕（收起狀態）*/
#assistant-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 12px;
  background: var(--panel, #1a1c22);
  color: var(--text, #e6e8ee);
  border: 1px solid var(--border, #2a2d38);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
#assistant-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  background: #22252d;
}
#assistant-toggle .assistant-toggle-icon {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #d6412c;
  color: white;
  border-radius: 6px;
  font-size: 11px;
}
#assistant-toggle .assistant-toggle-icon::before { content: "💬"; font-size: 12px; }
#assistant-toggle .assistant-toggle-label { font-weight: 500; }
#assistant-toggle .assistant-toggle-kbd {
  color: var(--muted, #8a92a3);
  font-size: 10px;
  background: rgba(255,255,255,0.06);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 4px;
  font-family: -apple-system, monospace;
}

/* 開啟狀態：隱藏浮動按鈕 */
#assistant-toggle.hidden { display: none; }

/* 側邊面板 */
#assistant-panel {
  position: fixed;
  top: 0; right: 0;
  width: 560px;
  transition: width 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  height: 100vh;
  z-index: 199;
  background: var(--panel, #14161c);
  border-left: 1px solid var(--border, #2a2d38);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.25);
}
#assistant-panel[aria-hidden="false"] { transform: translateX(0); }

/* 面板 header */
.assistant-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border, #2a2d38);
  flex-shrink: 0;
}
.assistant-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--text, #e6e8ee);
  letter-spacing: 0.3px;
}
.assistant-dot {
  width: 8px; height: 8px;
  background: #d6412c;
  border-radius: 50%;
  animation: assistant-pulse 2s ease-in-out infinite;
}
@keyframes assistant-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.assistant-header-actions { display: flex; gap: 4px; }
.assistant-icon-btn {
  width: 28px; height: 28px;
  background: transparent; border: none;
  color: var(--muted, #8a92a3);
  cursor: pointer;
  border-radius: 6px;
  font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.assistant-icon-btn:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text, #e6e8ee);
}

/* 訊息區 */
.assistant-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.assistant-empty {
  color: var(--muted, #8a92a3);
  font-size: 13px;
  padding: 40px 8px;
  text-align: center;
  line-height: 1.7;
}
.assistant-empty h3 {
  margin: 0 0 12px;
  font-size: 16px;
  color: var(--text, #e6e8ee);
  font-weight: 500;
}
.assistant-empty .hint-list {
  margin-top: 20px;
  display: flex; flex-direction: column; gap: 6px;
  align-items: center;
}
.assistant-empty .hint-pill {
  background: transparent;
  border: 1px solid var(--border, #2a2d38);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--muted, #8a92a3);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.assistant-empty .hint-pill:hover {
  color: var(--text, #e6e8ee);
  border-color: #d6412c;
}

.assistant-msg {
  display: flex; flex-direction: column;
  gap: 4px;
  animation: assistant-msg-in 0.25s ease-out;
}
@keyframes assistant-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.assistant-msg .role-tag {
  font-size: 10px;
  color: var(--muted, #8a92a3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
}
.assistant-msg.user .role-tag { color: var(--muted, #8a92a3); }
.assistant-msg.assistant .role-tag { color: #d6412c; }
.assistant-msg .msg-body {
  color: var(--text, #e6e8ee);
  font-size: 13.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.assistant-msg.user .msg-body {
  background: rgba(255,255,255,0.04);
  padding: 10px 14px;
  border-radius: 12px;
}

/* Tool 使用 badges */
.assistant-msg .tools-used {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px;
}
.assistant-msg .tool-badge {
  background: rgba(214, 65, 44, 0.12);
  color: #d6412c;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: -apple-system, monospace;
}

/* Status（thinking / calling tool） */
.assistant-status {
  padding: 10px 18px;
  color: var(--muted, #8a92a3);
  font-size: 12px;
  font-style: italic;
  border-top: 1px solid var(--border, #2a2d38);
  animation: assistant-status-fade 0.3s;
}
@keyframes assistant-status-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 輸入區 */
.assistant-form {
  border-top: 1px solid var(--border, #2a2d38);
  padding: 12px 14px 16px;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
}
#assistant-input {
  flex: 1;
  background: rgba(0,0,0,0.2);
  color: var(--text, #e6e8ee);
  border: 1px solid var(--border, #2a2d38);
  border-radius: 12px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  resize: none;
  outline: none;
  max-height: 160px;
  transition: border-color 0.15s;
}
#assistant-input:focus {
  border-color: #d6412c;
}
#assistant-input::placeholder {
  color: rgba(138, 146, 163, 0.6);
}
#assistant-send {
  width: 36px; height: 36px;
  border: none;
  background: #d6412c;
  color: white;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}
#assistant-send:hover:not(:disabled) { background: #b83221; }
#assistant-send:disabled {
  background: rgba(214, 65, 44, 0.3);
  cursor: not-allowed;
}

/* =========================================================
 * 助理按鈕：升級到 tabs nav（顯眼的常駐位置）
 * ========================================================= */
.tabs {
  display: flex;
  align-items: center;
}
.tab-assistant {
  margin-left: auto !important;   /* 貼齊右邊 */
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 14px !important;
  background: #d6412c !important;
  color: white !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  transition: background 0.15s, transform 0.1s;
  box-shadow: 0 2px 8px rgba(214, 65, 44, 0.25);
}
.tab-assistant:hover {
  background: #b83221 !important;
  transform: translateY(-1px);
}
.tab-assistant.active,
.tab-assistant:focus {
  background: #b83221 !important;
  outline: none;
}
.tab-assistant .tab-assistant-dot {
  width: 6px; height: 6px;
  background: white;
  border-radius: 50%;
  animation: assistant-pulse 2s ease-in-out infinite;
  opacity: 0.9;
}
.tab-assistant .tab-assistant-kbd {
  font-size: 10px;
  background: rgba(255,255,255,0.18);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: -apple-system, monospace;
  color: rgba(255,255,255,0.9);
}

/* =========================================================
 * 助理入口：搬到搜尋 bar 下方、灰色 subtle 樣式
 * ========================================================= */
.assistant-quick {
  display: flex;
  justify-content: center;
  padding: 14px 0 4px;
}
.assistant-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--panel);
  color: var(--text-strong, var(--text));
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: all 0.15s;
}
.assistant-quick-btn:hover {
  color: #ffffff;
  border-color: #000000;
  background: #000000;
}
.assistant-quick-btn:hover .aq-dot {
  background: #ffffff;
  opacity: 1;
}
.assistant-quick-btn:hover .aq-icon {
  opacity: 1;
}
.assistant-quick-btn .aq-dot {
  width: 6px; height: 6px;
  background: #ffffff;
  border-radius: 50%;
  animation: assistant-pulse 2.5s ease-in-out infinite;
  opacity: 0.75;
}

.assistant-quick-btn .aq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  color: currentColor;
  opacity: 0.85;
}
.assistant-quick-btn .aq-icon svg { width: 14px; height: 14px; }


/* 助理 header 累計統計 */
.assistant-stats {
  font-size: 10px;
  color: var(--muted, #8a92a3);
  margin-left: 8px;
  font-family: -apple-system, monospace;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

/* 對話中的 video 卡片（可點擊、開 frames modal） */
.assistant-video-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.av-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(214, 65, 44, 0.08);
  color: var(--text, #e6e8ee);
  border: 1px solid rgba(214, 65, 44, 0.25);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  max-width: 100%;
}
.av-card:hover {
  background: rgba(214, 65, 44, 0.15);
  border-color: #d6412c;
}
.av-card .av-id {
  background: #d6412c;
  color: white;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 10px;
  font-weight: 600;
}
.av-card .av-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
.av-card-loading .av-name {
  color: var(--muted, #8a92a3);
  font-style: italic;
}

/* 助理訊息 body：段落 + 內嵌影片卡片 */
.assistant-msg .msg-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.assistant-msg .msg-paragraph {
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--text, #e6e8ee);
  font-size: 13.5px;
  line-height: 1.65;
}
.assistant-msg .assistant-video-cards.inline {
  margin-top: -2px;
  margin-bottom: 4px;
  padding-left: 4px;
  border-left: 2px solid rgba(214, 65, 44, 0.25);
  padding-left: 10px;
}
.assistant-msg .msg-cards-label {
  color: var(--muted, #8a92a3);
  font-size: 11px;
  margin-top: 8px;
  font-style: italic;
}


/* 助理面板展開態 */
#assistant-panel.expanded { width: 720px; }
@media (min-width: 1400px) {
  #assistant-panel.expanded { width: 900px; }
}

/* ========================================================
 * 搜尋模式 toggle · 畫面 / 影片
 * 位置：搜尋 bar 下方、置中（取代原助理入口）
 * ======================================================== */
.search-mode-wrap {
  display: flex;
  justify-content: center;
  padding: 14px 0 4px;
}
.search-mode-toggle {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.05);
  padding: 3px;
  border-radius: 999px;
  gap: 0;
  position: relative;
  overflow: hidden;
}
:root:not(.dark) .search-mode-toggle {
  background: #EDECE9;
}
/* 滑動的白色 pill 指示器（絕對定位、跟著 mode class 走） */
.search-mode-toggle::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  background: var(--panel, #FFFFFF);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08),
              0 1px 2px rgba(0,0,0,0.04);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.search-mode-toggle.mode-video::before {
  transform: translateX(100%);
}
.smt-btn {
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;
  padding: 7px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  color: var(--muted, #8a92a3);
  cursor: pointer;
  transition: color 0.2s;
  min-width: 68px;
}
.smt-btn:hover:not(.active) { color: var(--text, #e6e8ee); }
.smt-btn.active {
  color: var(--text-strong, #1a1c22);
  font-weight: 500;
}

/* ========================================================
 * 影片模式：video card (大縮圖 + summary + hover scrub)
 * ======================================================== */
.video-result-grid {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}
.video-result-grid[data-size="s"] {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.video-result-grid[data-size="m"],
.video-result-grid:not([data-size]) {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.video-result-grid[data-size="l"] {
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 20px;
}
/* S 尺寸：卡片內文字略縮、summary 收成 2 行 */
.video-result-grid[data-size="s"] .vc-name { font-size: 12px; }
.video-result-grid[data-size="s"] .vc-summary { -webkit-line-clamp: 2; font-size: 11px; }
.video-result-grid[data-size="s"] .vc-meta { padding: 8px 10px 10px; }
/* L 尺寸：卡片內文字略放、summary 展 4 行 */
.video-result-grid[data-size="l"] .vc-name { font-size: 14px; }
.video-result-grid[data-size="l"] .vc-summary { -webkit-line-clamp: 4; font-size: 13px; }
.video-result-grid[data-size="l"] .vc-meta { padding: 12px 14px 14px; }
.video-card {
  background: var(--panel);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  contain: layout paint;
}
.video-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
body.is-scrolling .video-card { pointer-events: none; }
body.is-scrolling .video-card:hover { box-shadow: none; transform: none; }
.vc-thumb {
  aspect-ratio: 16/9;
  background: var(--panel-2);
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  will-change: transform;
}
.vc-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.1s;
}
.vc-thumb .vc-scrub-dots {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 3px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.video-card:hover .vc-scrub-dots { opacity: 0.9; }
.vc-scrub-dots .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: background 0.1s, transform 0.1s;
}
.vc-scrub-dots .dot.active {
  background: #FFFFFF;
  transform: scale(1.4);
}
/* .vc-count-badge 已拿掉（改用全片縮圖 scrub、不再顯示命中數）*/

.vc-meta {
  padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 5px;
}
.vc-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.vc-summary {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.vc-footline {
  font-size: 10.5px;
  color: var(--muted);
  display: flex; gap: 8px;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.vc-relevance {
  padding: 1px 8px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.3px;
}
.vc-relevance.s-precise  { background: rgba(74, 155, 79, 0.18); color: #4a9b4f; }
.vc-relevance.s-relevant { background: rgba(232, 166, 63, 0.18); color: #b8892e; }
.vc-relevance.s-edge     { background: rgba(139, 139, 139, 0.18); color: #6f6f6f; }
.vc-relevance.s-loose    { background: rgba(180, 180, 175, 0.15); color: #8a8a85; }

/* 影片模式分頁控制 */
.video-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 30px 0 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border, #E5E5E5);
}
.pg-btn {
  width: 40px; height: 36px;
  background: var(--panel);
  border: 1px solid var(--border, #DFDEDA);
  color: var(--text-strong);
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.15s;
  font-family: inherit;
}
.pg-btn:hover:not(:disabled) {
  background: #D6412C;
  border-color: #D6412C;
  color: #FFF;
  transform: translateY(-1px);
}
.pg-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.pg-info {
  font-size: 13px;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  min-width: 50px;
  text-align: center;
}
.pg-count {
  color: var(--muted);
  font-size: 11px;
  margin-left: 10px;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
 * seedoes v1 · 新版介面 · 覆蓋層
 * ========================================================= */

/* 隱藏舊的 header topbar + tabs · 用新的 sidebar 導航 */
body.seedoes-mode .topbar,
body.seedoes-mode > nav.tabs {
  display: none !important;
}

/* --- Header 新版 --- */
.seedoes-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--seedoes-header-h);
  padding: 0 32px;
  background: var(--seedoes-canvas);
  border-bottom: 0.5px solid var(--border);
}
/* Logo 對齊 sidebar 中線（sidebar 寬 72、icon 中心約 36px） */
.seedoes-brand {
  margin-left: 4px;
}
.seedoes-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--seedoes-ink);
  cursor: pointer;
}
.seedoes-brand-mark {
  width: 24px;
  height: 24px;
  display: block;
  color: var(--seedoes-ink);
}
.seedoes-brand-lockup {
  height: 22px;
  width: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.seedoes-brand-text {
  font-size: 18px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--seedoes-ink);
}
.seedoes-user-wrap {
  position: relative;
}
.seedoes-user {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  background: transparent;
  border: 0.5px solid var(--border-strong);
  border-radius: 999px;
  color: var(--seedoes-ink);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
}
.seedoes-user:hover,
.seedoes-user[aria-expanded="true"] {
  background: var(--panel);
  border-color: var(--seedoes-ink);
}

/* Sean dropdown menu · Figma design */
.seedoes-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  padding: 14px 0 10px;
  background: var(--panel);
  border: 0.5px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  z-index: 500;
  animation: seedoes-menu-in 0.15s ease-out;
}
@keyframes seedoes-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.user-menu-name {
  padding: 4px 20px 12px;
}
.user-menu-name-main {
  font-size: 14px;
  font-weight: 500;
  color: var(--seedoes-ink);
  line-height: 1.3;
}
.user-menu-name-plan {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.user-menu-divider {
  height: 0.5px;
  background: var(--border);
  margin: 4px 12px;
}
.user-menu-item {
  display: block;
  padding: 8px 20px;
  font-size: 13px;
  color: var(--seedoes-ink);
  text-decoration: none;
  transition: background 0.1s;
  cursor: pointer;
}
.user-menu-item:hover {
  background: var(--accent-soft);
}

/* --- Sidebar 左側垂直 nav · icon-only · hover 才顯示 label --- */
.seedoes-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--seedoes-sidebar-w);
  padding: calc(var(--seedoes-header-h) + 20px) 12px 20px;
  background: var(--seedoes-canvas);
  border-right: 0.5px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 90;
}

.seedoes-nav-btn {
  position: relative;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--seedoes-ink);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.seedoes-nav-btn:hover {
  background: var(--accent-soft);
}
.seedoes-nav-btn.active {
  background: var(--seedoes-ink);
  color: var(--panel);
}
.seedoes-nav-btn svg,
.seedoes-nav-btn .nav-icon {
  width: 22px;
  height: 22px;
  stroke-width: 1.5;
  flex-shrink: 0;
  object-fit: contain;
  transition: filter 0.15s;
}
/* Sean 的 nav icons 是內嵌 PNG · active 時反色（黑→白）*/
.seedoes-nav-btn.active .nav-icon {
  filter: invert(1) brightness(2);
}
/* Label span 預設隱藏 · 用 tooltip 呈現 */
.seedoes-nav-label {
  display: none;
}

/* Tooltip · hover 才顯示 · 對齊 Sean「hover 才出現」 */
.seedoes-nav-btn::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 10px;
  background: var(--seedoes-ink);
  color: var(--panel);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 500;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  white-space: nowrap;
  z-index: 200;
}
.seedoes-nav-btn:hover::after {
  opacity: 1;
}

/* --- 主內容區 · 讓 sidebar --- */
body.seedoes-mode main {
  margin-left: var(--seedoes-sidebar-w);
  padding: 32px 32px 48px;
  max-width: none;
}
body.seedoes-mode main > section.panel {
  max-width: var(--seedoes-content-max);
  margin: 0 auto;
}
body.seedoes-mode .seedoes-header {
  padding-left: 32px;
}

/* --- Home 頁 · 置中 hero --- */
.seedoes-home {
  min-height: calc(100vh - var(--seedoes-header-h) - 100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 40px 20px;
}
.seedoes-home-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 28px;
  font-weight: 400;
  color: var(--seedoes-ink);
  letter-spacing: -0.01em;
  margin: 0;
}
.seedoes-home-title .home-mark {
  width: 26px;
  height: 26px;
  color: var(--seedoes-ink);
}
.seedoes-home-input-wrap {
  width: 100%;
  max-width: 720px;
  padding: 20px 20px 12px;
  background: transparent;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--seedoes-radius);
  transition: border-color 0.15s;
}
.seedoes-home-input-wrap:focus-within {
  border-color: var(--seedoes-ink);
}
.seedoes-home-input {
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: 15px;
  color: var(--seedoes-ink);
  font-family: inherit;
}
.seedoes-home-input::placeholder {
  color: var(--muted);
}
.seedoes-home-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.seedoes-home-plus,
.seedoes-home-submit {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--seedoes-ink);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.seedoes-home-submit {
  margin-left: auto;
}
.seedoes-home-submit svg,
.seedoes-home-plus svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
}

/* --- Search-mode toggle · 已存在的樣式再調 · 位置移到 home input 內 --- */
.seedoes-home-controls .search-mode-toggle {
  transform: scale(0.85);
  transform-origin: left center;
}

/* =========================================================
 * seedoes v1 · Home Hero（搜尋首頁置中大 input）
 * ========================================================= */
.seedoes-hero {
  min-height: calc(100vh - var(--seedoes-header-h) - 200px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 40px 20px;
  transition: min-height 0.3s, padding 0.3s;
}
.seedoes-hero.hidden { display: none; }

/* 有結果時 · Hero 收合 · 只留 input 在頂端 */
.seedoes-hero.has-results {
  min-height: auto;
  padding: 8px 20px 24px;
  gap: 0;
}
.seedoes-hero.has-results .seedoes-hero-title {
  display: none;
}
.seedoes-hero.has-results .seedoes-hero-input-wrap {
  padding: 14px 20px 10px;
  max-width: 900px;
}
.seedoes-hero.has-results .seedoes-hero-input {
  font-size: 14px;
}
.seedoes-hero.has-results .seedoes-hero-controls {
  margin-top: 10px;
}

.seedoes-hero-title {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 32px;
  font-weight: 400;
  color: var(--seedoes-ink);
  letter-spacing: -0.01em;
  margin: 0;
}
.seedoes-hero-title .hero-mark {
  width: 28px;
  height: 28px;
  color: var(--seedoes-ink);
}

.seedoes-hero-input-wrap {
  width: 100%;
  max-width: 720px;
  padding: 22px 24px 16px;
  background: transparent;
  border: 1.5px solid var(--seedoes-ink);
  border-radius: var(--seedoes-radius);
  transition: box-shadow 0.15s;
}
.seedoes-hero-input-wrap:focus-within {
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);
}
.seedoes-hero-input {
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  color: var(--seedoes-ink);
  font-family: inherit;
  line-height: 1.4;
}
.seedoes-hero-input::placeholder {
  color: var(--muted);
}

.seedoes-hero-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.seedoes-hero-plus,
.seedoes-hero-submit {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.15s, transform 0.15s;
}
.seedoes-hero-plus img,
.seedoes-hero-submit img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}
.seedoes-hero-plus:hover { opacity: 0.6; }
.seedoes-hero-submit {
  margin-left: auto;
}
.seedoes-hero-submit:hover { transform: translateX(2px); }

/* Hero 內的 STILL/MOTION pill toggle · 黑底 pill · 白字 · 選中反白 */
.seedoes-hero-modes {
  display: inline-flex;
  padding: 3px;
  background: var(--seedoes-ink);
  border-radius: 999px;
}
.hero-mode-btn {
  padding: 4px 14px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 500;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
  font-family: inherit;
}
.hero-mode-btn.active {
  background: var(--panel);
  color: var(--seedoes-ink);
}

/* 隱藏舊的畫面/影片 toggle（seedoes 模式已用 hero STILL/MOTION 取代）*/
body.seedoes-mode .search-mode-wrap {
  display: none !important;
}

/* Hero 搜尋歷史 · Home 狀態顯示 */
.seedoes-hero-history {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.hero-history-label {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.08em;
}
.hero-history-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
}
.hero-history-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 14px;
  background: transparent;
  border: 0.5px solid var(--border-strong);
  border-radius: 999px;
  color: var(--seedoes-ink);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
  max-width: 240px;
}
.hero-history-chip:hover {
  background: var(--panel);
  border-color: var(--seedoes-ink);
}
.hero-history-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.hero-history-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}
.hero-history-chip-x:hover {
  color: var(--seedoes-ink);
  background: var(--accent-soft);
}

/* has-results 時隱藏歷史 */
.seedoes-hero.has-results .seedoes-hero-history {
  display: none;
}

/* 隱藏舊的畫面/影片 toggle（sedoes 模式已用 hero STILL/MOTION 取代）*/
body.seedoes-mode .search-mode-wrap {
  display: none !important;
}

/* =========================================================
 * seedoes v1 · Search 結果卡片微調（配 canvas 色）
 * ========================================================= */
body.seedoes-mode .search-card,
body.seedoes-mode .video-card {
  border-radius: var(--seedoes-radius);
  background: var(--panel);
  border: 0.5px solid var(--border);
}
body.seedoes-mode .search-card:hover,
body.seedoes-mode .video-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
body.seedoes-mode .search-card-thumb,
body.seedoes-mode .vc-thumb {
  background: var(--panel-2);
}

/* 卡片右上 · + / ↓ · seedoes 模式常駐顯示 · 用 Sean SVG icons */
body.seedoes-mode .search-card-addproj,
body.seedoes-mode .search-card-download {
  opacity: 1 !important;
  background: transparent;
  border: none;
  color: transparent;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 0;
  transition: transform 0.1s, opacity 0.15s;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  font-size: 0;
}
body.seedoes-mode .search-card-addproj {
  top: 6px;
  right: 32px;
  background-image: url('/static/icons/card-add-project.svg');
}
body.seedoes-mode .search-card-download {
  top: 6px;
  right: 6px;
  background-image: url('/static/icons/card-download.svg');
}
body.seedoes-mode .search-card-addproj:hover,
body.seedoes-mode .search-card-download:hover {
  transform: scale(1.15);
  opacity: 0.7 !important;
}

/* Pagination arrows · seedoes 模式用 Sean SVG */
body.seedoes-mode .pg-btn {
  background: transparent;
  border: none;
  color: transparent;
  font-size: 0;
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  transition: transform 0.1s, opacity 0.15s;
  cursor: pointer;
}
body.seedoes-mode .pg-btn#pg-prev {
  background-image: url('/static/icons/pg-prev.svg');
}
body.seedoes-mode .pg-btn#pg-next {
  background-image: url('/static/icons/pg-next.svg');
}
body.seedoes-mode .pg-btn:disabled {
  opacity: 0.25;
  cursor: default;
}
body.seedoes-mode .pg-btn:not(:disabled):hover {
  transform: translateY(-1px);
}

/* Player modal · seedoes 模式 · 對齊 Figma Quest 2 · X close + finder + play */
body.seedoes-mode #player-modal .modal-card {
  background: var(--seedoes-canvas);
  border-radius: var(--seedoes-radius);
  border: 0.5px solid var(--border);
}
body.seedoes-mode #player-modal .modal-x {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  background-image: url('/static/icons/modal-close.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  transition: transform 0.15s;
}
body.seedoes-mode #player-modal .modal-x:hover {
  transform: scale(1.1);
}
body.seedoes-mode #player-modal .modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 0.5px solid var(--border);
}
body.seedoes-mode #player-open-external,
body.seedoes-mode #player-reveal {
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  color: transparent;
  font-size: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
  transition: transform 0.1s;
  cursor: pointer;
}
body.seedoes-mode #player-open-external {
  background-image: url('/static/icons/modal-play.svg');
}
body.seedoes-mode #player-reveal {
  background-image: url('/static/icons/modal-finder.svg');
}
body.seedoes-mode #player-open-external:hover,
body.seedoes-mode #player-reveal:hover {
  transform: scale(1.1);
}
/* 隱藏舊「關閉」按鈕（X 已足夠）*/
body.seedoes-mode #player-close {
  display: none;
}

/* =========================================================
 * seedoes v1 · SEED / EVENT / STORY 頁 · 對齊 Figma
 * 統一：canvas 底、無框元素、隱藏 UPHiN legacy 元素
 * ========================================================= */

/* 全面 · 移除 UPHiN 舊風格的邊框、面板、陰影 */
body.seedoes-mode #tab-library,
body.seedoes-mode #tab-projects,
body.seedoes-mode #tab-script {
  background: transparent !important;
}

/* 移除 legacy panel 邊框 */
body.seedoes-mode .uph-search,
body.seedoes-mode .uph-folder-add,
body.seedoes-mode .uph-textfield {
  background: transparent !important;
  border: 0.5px solid var(--border-strong) !important;
  border-radius: var(--seedoes-radius) !important;
  box-shadow: none !important;
}

body.seedoes-mode .uph-search-input {
  background: transparent !important;
  border: none !important;
  color: var(--seedoes-ink) !important;
  font-family: inherit !important;
}
body.seedoes-mode .uph-search-input::placeholder {
  color: var(--muted) !important;
}

/* ---------- SEED (Library) 頁 · Figma SEED design ---------- */
body.seedoes-mode #tab-library {
  padding-top: 0;
}
/* SEED 頁的檔名搜尋框 · 頂端 · 對齊 Figma */
body.seedoes-mode #tab-library .uph-search {
  max-width: 720px;
  margin: 20px auto 24px;
  padding: 12px 16px;
}
/* 折疊部分 UPHiN 元素（不刪、只藏）*/
body.seedoes-mode #tab-library .wq-title,
body.seedoes-mode #tab-library .jobs-header,
body.seedoes-mode #tab-library #jobs,
body.seedoes-mode #tab-library #work-queue,
body.seedoes-mode #tab-library .dam-title {
  display: none;
}
/* DAM browser · 資料夾樹 + 網格 · 對齊 SEEDS.png */
body.seedoes-mode .dam-browser {
  background: transparent;
  border: none;
  min-height: calc(100vh - 200px);
}
body.seedoes-mode .dam-tree {
  background: transparent;
  border-right: none;
  padding-right: 24px;
}
body.seedoes-mode .dam-grid {
  background: transparent;
}

/* ================================================================
   EVENT (Projects) 頁 · 依 Figma `01_screenshots/seedoes v1/EVENT.png`
   逐項量測改寫。畫框 1440×1024，量到的座標：

     EVENT 標題      x222–286  y194–208（ink）
     ＋ 新增專案     21×21     x380–400  y190–210
     輸出全部圖片    26×21     x1248–1273 y190–210
     分隔線          1063×1    x212–1274 y222      #686868
     專案列          x262 起 · 數字右切齊 397 · 列距 32 · 首列 ink y258–272
     縮圖            250×141   x437 / 709 / 981（間距 22）· y248 / 523（間距 275）
     卡片檔名        y394–405  x445（縮圖左緣 +8）
     卡片描述        y409 起
     右側捲軸        bar 6×119 x1261 y296（Figma 的 ▲ / ▼ 已拿掉）
   ================================================================ */

/* 舊版 UPHiN 的兩欄式 projects-page 整個換掉 */
body.seedoes-mode #tab-projects { padding-top: 0; }

body.seedoes-mode .event-page {
  /* panel 左緣 + 這個 margin = Figma 的 x212；右緣 = 1274 */
  margin: 0 var(--event-right, 121px) 0 var(--event-left, 96px);
  position: relative;
}

/* ---------- 標題列 ---------- */
body.seedoes-mode .event-head {
  position: relative;
  height: 21px;
  margin-top: var(--event-head-top, 86px);    /* panel 上緣 104 + 86 = 190 */
}
body.seedoes-mode .event-title {
  position: absolute;
  left: 10px;                 /* 212 + 10 = 222 */
  top: 1px;
  height: 21px;
  margin: 0;
  display: flex;
  align-items: center;
  font-size: 20.5px;          /* ink 高 15px = Inter cap 0.727em */
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--seedoes-ink);
  white-space: nowrap;
}
/* ＋ 新增專案 · Figma 原生 21×21（SVG 內嵌 PNG · 不可縮放）*/
body.seedoes-mode .event-new,
body.seedoes-mode .event-export {
  position: absolute;
  top: 0;
  padding: 0;
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  cursor: pointer;
  opacity: 0.88;
  transition: opacity 0.15s;
}
body.seedoes-mode .event-new:hover,
body.seedoes-mode .event-export:hover { opacity: 1; }
body.seedoes-mode .event-new {
  left: 168px;                /* 212 + 168 = 380 */
  width: 21px; height: 21px;
  background-image: url('/static/icons/event-new-project.svg');
}
body.seedoes-mode .event-export {
  right: 1px;                 /* 右緣 1274 - 1 = 1273 */
  width: 26px; height: 21px;
  background-image: url('/static/icons/event-export-all.svg');
}

/* ---------- 分隔線 · Figma 1063 × 1 · #686868 ---------- */
body.seedoes-mode .event-divider {
  height: 1px;
  margin-top: 11px;           /* 210 + 11 = 221 → 線在 222 */
  background: #686868;
}

/* ---------- 內容區 ---------- */
body.seedoes-mode .event-body {
  position: relative;
  display: grid;
  grid-template-columns: 225px 794px;   /* 212→437 · 437→1231 */
  column-gap: 0;
  margin-top: 25px;           /* 222 + 1 + 25 = 248 */
  height: calc(100vh - 288px);
  min-height: 420px;
}

/* ---- 左欄 · 專案清單 ---- */
body.seedoes-mode .event-projects {
  overflow: auto;
  scrollbar-width: none;
  padding-right: 40px;        /* 數字右緣切齊 397 = 437 - 40 */
}
body.seedoes-mode .event-projects::-webkit-scrollbar { width: 0; }

body.seedoes-mode .event-projects .projects-sidebar-list {
  display: block;
  gap: 0;
  padding: 0;
  margin: 0;
}
body.seedoes-mode .event-projects .project-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;               /* 列距 32 */
  padding: 0 0 0 50px;        /* 212 + 50 = 262 */
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 15px;
  line-height: 1;
  font-weight: 400;
  color: var(--seedoes-ink);
  cursor: pointer;
}
body.seedoes-mode .event-projects .project-row:hover { background: transparent; }
/* 選到的專案只加粗 · 不填底色（Figma 沒有選取底色）·
   未選 400 → 選到 600 */
body.seedoes-mode .event-projects .project-row.selected {
  background: transparent;
  font-weight: 600;
}
body.seedoes-mode .event-projects .project-row > div:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.seedoes-mode .event-projects .project-row .count {
  flex: none;
  font-size: 15px;
  font-weight: 400;
  color: var(--seedoes-ink);
  background: transparent;
  padding: 0;
}
/* 改名 / 刪除 · hover 才浮出 · 絕對定位不佔寬度（跟 SEED 頁資料夾列同一招）。
   放在專案名左邊的空欄（Figma 的 212–262 本來就是空的）·
   放右邊會壓到張數數字。*/
body.seedoes-mode .event-projects .project-row .row-act {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  color: transparent;
  font-size: 0;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.12s;
}
body.seedoes-mode .event-projects .project-row:hover .row-act { opacity: 0.6; }
body.seedoes-mode .event-projects .project-row .row-act:hover { opacity: 1; }
/* Sean 另外給的兩個 icon（PNG · 不是內嵌 PNG 的 SVG · 可以安全縮放）*/
body.seedoes-mode .event-projects .project-row .row-delete {
  left: 6px;                  /* 212 + 6 = 218 */
  width: 13px; height: 13px;
  background-image: url('/static/icons/event-row-delete.svg?v=2');
  background-size: 13px 13px;
}
body.seedoes-mode .event-projects .project-row .row-rename {
  left: 26px;                 /* 212 + 26 = 238 · 專案名從 262 起 · 不會撞到 */
  width: 14px; height: 15px;
  background-image: url('/static/icons/event-row-rename.svg?v=2');
  background-size: 14px 15px;
}

body.seedoes-mode .event-projects .projects-sidebar-empty {
  padding: 6px 0 0 50px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  background: transparent;
  border: none;
}

/* ---- 右欄 · 卡片 ---- */
body.seedoes-mode .event-content {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
body.seedoes-mode .event-content::-webkit-scrollbar { width: 0; height: 0; }

body.seedoes-mode .event-content .projects-empty {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
body.seedoes-mode .event-content .projects-detail { border: none; background: transparent; }

body.seedoes-mode .event-content .projects-frames-grid {
  display: grid;
  grid-template-columns: repeat(3, 250px);
  column-gap: 22px;           /* 437 → 709 */
  row-gap: 0;                 /* 列距靠卡片本身的高度撐（275）*/
  padding: 0;
  margin: 0;
}

body.seedoes-mode .event-content .project-frame-card {
  width: 250px;
  height: 275px;              /* 248 → 523 */
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease;
}
body.seedoes-mode .event-content .project-frame-card:hover {
  transform: translateY(-2px);
  border: none;
  box-shadow: none;
  background: transparent;
}

body.seedoes-mode .event-content .project-frame-thumb {
  position: relative;
  width: 250px;
  height: 141px;              /* 16:9 */
  border: none;
  border-radius: 0;
  background: #D3D3D3;
  overflow: hidden;
}
body.seedoes-mode .event-content .project-frame-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
/* 秒數徽章 · Figma 沒有 · 收起來 */
body.seedoes-mode .event-content .project-frame-time { display: none; }

/* 縮圖上的三顆鍵。Figma 只畫右上的 ＋ / ↓；
   ✕（從專案移除）移到左上角、同樣 hover 才出現。
   SVG 內嵌 PNG · 一律原生尺寸 + background-size:auto，四個屬性釘死，
   不然舊 CSS 的 `background:` 簡寫會把 icon 平鋪或吃掉。 */
/* 三顆鍵一律 24×24 · radius 4 · 淡灰反白底（照片深色時也看得清楚）·
   規格完全比照 QUEST 縮圖上的 .search-card-addproj / .search-card-download。
   icon 本身維持原生尺寸（background-size:auto）· 框比 icon 大 ·
   所以 top / right 是「讓 icon 的 ink 落回 Figma 座標」反推出來的：
     ↓ ink x665–671 y260–276  ← 24 框 top 8 / right 7（正中 Figma）
   ＋ 的間距改用 QUEST 的 28px（QUEST 是 right 8 / 36）· 不照 Figma 的 10px。
   Figma 畫這兩顆的時候底下沒有框 · 只隔 10px ·
   一旦加上 24px 的框就會疊在一起 · 中間出現一道半透明疊加的亮痕。 */
body.seedoes-mode .event-content .project-frame-add,
body.seedoes-mode .event-content .project-frame-download,
body.seedoes-mode .event-content .project-frame-remove {
  position: absolute;
  top: 8px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background-color: rgba(238, 237, 232, 0.85);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  color: transparent;
  font-size: 0;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.12s, background-color 0.12s;
}
body.seedoes-mode .event-content .project-frame-add {
  right: 35px;                /* = ↓ 的 7 + QUEST 的 28px 間距 */
  background-image: url('/static/icons/card-add-project.svg');
}
body.seedoes-mode .event-content .project-frame-download {
  right: 7px;
  background-image: url('/static/icons/card-download.svg');
  display: block;
}
/* ✕ 從專案移除 · Figma 沒畫 · 放左上角跟 ＋ 對稱 */
body.seedoes-mode .event-content .project-frame-remove {
  left: 7px;
  background-image: url('/static/icons/event-row-delete.svg?v=2');
  background-size: 13px 13px;
}
body.seedoes-mode .event-content .project-frame-card:hover .project-frame-add,
body.seedoes-mode .event-content .project-frame-card:hover .project-frame-download,
body.seedoes-mode .event-content .project-frame-card:hover .project-frame-remove { opacity: 1; }
body.seedoes-mode .event-content .project-frame-add:hover,
body.seedoes-mode .event-content .project-frame-download:hover,
body.seedoes-mode .event-content .project-frame-remove:hover {
  background-color: var(--seedoes-canvas);   /* 同 QUEST · 有底色了就不放大 */
}

/* 文字區 · 整組比照 QUEST 縮圖（.search-card-body / -title / -desc）·
   內距 6px 12px 0 · 標題 13px/600/ink · 描述 12px/1.5/--muted。
   Figma 這裡量到的是 11.6px 標題 + 10px 描述 + 內距 4px 8px ·
   Sean 定調一致性優先 · 文字往右 4px、往下 2px。 */
/* 上內距 2 不是 6 · 理由同 STORY —— 13px 在 1.2 行高裡上方有約 3px leading ·
   要讓檔名字身頂端落回 Figma 的位置（縮圖下緣 +5px）。左右 12 是 QUEST 的規格。 */
body.seedoes-mode .event-content .project-frame-body {
  padding: 2px 12px 0;
}
body.seedoes-mode .event-content .project-frame-title {
  font-size: 13px;            /* = .search-card-title */
  font-weight: 600;
  /* 行高壓到 1.2 · 卡片總高固定 275（Figma 的列距）·
     141 縮圖 + 6 內距 + 15.6 標題 + 4 + 6×18 描述 = 274.6 · 剛好塞得下 */
  line-height: 1.2;
  color: var(--seedoes-ink);
  margin: 0 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.seedoes-mode .event-content .project-frame-desc {
  font-size: 12px;            /* = .search-card-desc */
  line-height: 1.5;
  letter-spacing: normal;     /* 字距不另外調 · 同 QUEST */
  font-weight: 400;
  color: var(--muted);
  /* Figma 的描述是 6 行（EN y411–489 · ZH y409–483）·
     舊 CSS 夾在 3 行 · 這裡放寬 */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.seedoes-mode .event-content .project-frame-desc .hint { color: #8E8B8B; }

body.seedoes-mode .event-content .projects-frames-empty {
  grid-column: 1 / -1;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

/* ---- 右側捲軸 · 自己畫（原生 webkit 捲軸兩端的 button 區會切掉圓頭）---- */
body.seedoes-mode .event-scroll {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1045px;               /* 212 + 1045 = 1257 · SVG 左側有 0.7px 空白 */
  width: 11px;
}
/* Figma 在捲軸兩端畫了 ▲ / ▼（y268 / y881）· Sean 決定拿掉 ·
   跟 SEED 頁同一個決定 · 只留可拖曳的 bar · 軌道改成撐滿內容區高度 */
body.seedoes-mode .event-scrollbar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;                  /* 1257 + 4 = 1261 */
  width: 6px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
body.seedoes-mode .event-scrollbar.is-active { opacity: 1; pointer-events: auto; }
body.seedoes-mode .event-scroll-thumb {
  position: absolute;
  left: 0;
  width: 6px;
  min-height: 24px;
  border-radius: 3px;
  background: #030303;
  cursor: grab;
}
body.seedoes-mode .event-scroll-thumb:active { cursor: grabbing; }

/* ================================================================
   STORY (Script) 頁 · 依 Figma `01_screenshots/seedoes v1/STORY.png`
   逐項量測改寫。畫框 1440×1024，量到的座標：

     輸入框        740×74   x353–1092  y121–194 · radius 5 · 1px 黑
                   （尺寸來自 `02_svg_icons/story/搜尋輸入區.svg` 的 rect）
     placeholder   x370 y132–150 · "Let's create your story"
     ＋ 加文字檔   13×12    x364–376  y170–181
     → 送出        22×9     x1056–1077 y173–181
     EVENT chip    56×18    x354      y199 · 專案名 x417 · 15px
     下載鈕        19×15    x1074     y200
     縮圖          250×141  x323 / 595 / 867（間距 22）· y275 / 550（間距 275）
     卡片標題      y421–430 · 描述 y436 起
     捲軸          bar 6×119 x1166 y278（Figma 的 ▲ / ▼ 已拿掉 · 同 SEED / EVENT）

   卡片文字比照 QUEST（Sean 定調）· 幾何與 EVENT 卡片完全相同。
   ================================================================ */

body.seedoes-mode #tab-script { padding-top: 0; }

body.seedoes-mode .story-page {
  position: relative;
  /* 分鏡圖放大到 QUEST 的 M 尺寸（實測卡片 306.5 · gap 18）· 一排維持 3 張
     3×306 + 2×18 = 954 · 置中後左緣落在 243（Figma 是 323 / 794，刻意放大）*/
  width: 954px;
  margin: 0 auto;
  /* .panel 是在「扣掉 sidebar 之後」的空間裡置中 · 中線永遠比視窗中線
     右移半個 sidebar。往左推回來，整頁才對齊視窗中線（跟 Home hero 同一個道理）*/
  left: calc(var(--seedoes-sidebar-w) / -2);
  padding-top: var(--story-top, 17px);   /* panel 上緣 104 + 17 = 121 */
}

/* ---------- 輸入區 ---------- */
body.seedoes-mode .story-field {
  position: relative;
  width: 740px;
  height: 74px;
  margin: 0 auto;
  box-sizing: border-box;
  border: 1px solid var(--seedoes-ink);
  border-radius: 5px;
  background: transparent;
  box-shadow: none;
}
/* 舊的 .uph-textfield 樣式整組不要 */
body.seedoes-mode .story-field,
body.seedoes-mode .story-field:focus-within {
  background: transparent !important;
  border: 1px solid var(--seedoes-ink) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* 焦點光暈放在外框上 · 不是放在 textarea 上 —— 跟 Home hero 的
   `.seedoes-hero-input-wrap:focus-within` 同一個做法。
   （bug · 全域的 `body.seedoes-mode textarea:focus` 會直接給 textarea 一圈
     3px 光暈 · 加上下面 width 溢出的問題 · 點進輸入框時會浮出一個
     往右凸出 18px 的鬼影方框。Home hero 沒事是因為它的 input 另有覆寫。）*/
body.seedoes-mode .story-field:focus-within {
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08) !important;
}
body.seedoes-mode .story-field textarea#brief,
body.seedoes-mode .story-field textarea#brief:focus,
body.seedoes-mode .story-field textarea#brief:hover {
  position: absolute;
  left: 16px;                 /* 353 + 16 = 369 · placeholder ink 從 370 起 */
  right: 16px;
  /* ⚠️ 舊的 `.uph-textfield textarea { width: 100% }` 會蓋掉 left/right 這一組 ·
     算出 738px（= 外框 740 減兩條邊框）· 從 x367 起算就右溢出 15px。
     一定要把 width 釘成 auto，left/right 才生效。 */
  width: auto !important;
  box-shadow: none !important;
  outline: none !important;
  top: 6px;                   /* placeholder 字身頂端落在 132 */
  height: 42px;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  outline: none;
  resize: none;
  overflow: auto;
  scrollbar-width: none;
  font-family: inherit !important;
  font-size: 16.5px !important;   /* Figma 的 placeholder ink 寬 175px · 17px 會多 5px */
  line-height: 1.4 !important;
  font-weight: 400 !important;
  color: var(--seedoes-ink) !important;
}
body.seedoes-mode .story-field textarea#brief::-webkit-scrollbar { width: 0; }
body.seedoes-mode .story-field textarea#brief::placeholder {
  color: #8E8B8B;
  opacity: 1;
}

/* 左下 ＋（加入文字檔）· 右下 →（送出）
   兩個 SVG 都是內嵌 PNG · 一律原生尺寸 + background-size:auto */
body.seedoes-mode .story-attach,
body.seedoes-mode .story-send {
  position: absolute;
  padding: 0;
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.15s;
}
body.seedoes-mode .story-attach:hover,
body.seedoes-mode .story-send:hover { opacity: 1; }
body.seedoes-mode .story-attach {
  left: 11px;                 /* 353 + 11 = 364 */
  bottom: 12px;               /* 194 - 12 - 12 = 170 */
  width: 13px; height: 12px;
  background-image: url('/static/icons/story-attach.svg');
}
body.seedoes-mode .story-send {
  right: 14px;                /* 1092 - 14 - 22 = 1056 */
  bottom: 12px;               /* 194 - 12 - 9 = 173 */
  width: 22px; height: 9px;
  background-image: url('/static/icons/story-send.svg');
}
body.seedoes-mode .story-attach.is-busy,
body.seedoes-mode .story-send.is-busy {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;       /* 產生中就點不下去 · 視覺上也看得出來 */
}

/* ---------- EVENT 專案 + 下載 ---------- */
body.seedoes-mode .story-bar {
  position: relative;
  width: 740px;
  height: 18px;
  margin: 6px auto 0;         /* 194 + 6 = 200 */
  display: flex;
  align-items: center;
}
body.seedoes-mode .story-project {
  display: inline-flex;
  align-items: center;
  gap: 9px;                   /* EVENT icon 到 408 · 專案名從 417 */
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--seedoes-ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  font-weight: 400;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.15s;
}
body.seedoes-mode .story-project:hover { opacity: 1; }
body.seedoes-mode .story-project-icon {
  flex: none;
  width: 56px;
  height: 18px;
  background-image: url('/static/icons/story-event.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
}
/* 舊 chip 的「使用專案：」與 ▾ 不要（Figma 只有 icon + 專案名）*/
body.seedoes-mode .story-project .sb-project-chip-label,
body.seedoes-mode .story-project .sb-project-chip-caret { display: none; }

/* 下載分鏡 PDF · ⚠️ 2026-09-18 從 19×15 的純圖示改成「字 ＋ 放大的圖示」。
   分鏡做完之後最重要的下一步就是把它拿走，那顆鈕不該只有 hover 才說得出
   自己是誰。字級與 gap 對齊左邊的 .story-project，整列看起來才是一組。
   ⚠️ 圖示改用 ::after 畫 —— 按鈕本身要留給文字，background-image 會被
      文字蓋住（或者反過來）。 */
/* ⚙️ 2026-09-18（晚）：又回到一顆，絕對定位直接貼右緣。
   ⚠️ 「齊右」指的是**含圖示**的整顆貼齊：鈕本身是
      「字 ＋ gap ＋ 圖示」的 inline-flex，所以 right: 0 就是圖示右緣
      對齊那一列的右緣，不是文字右緣。 */
body.seedoes-mode .story-download {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 9px;                   /* 跟 .story-project 同一個間距 */
  width: auto; height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--seedoes-ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  font-weight: 400;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.15s;
}
body.seedoes-mode .story-download::after {
  content: '';
  flex: none;
  width: 26px; height: 20px;  /* 本來 19×15 —— 放大約 1.35 倍 */
  background-image: url('/static/icons/story-download.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
body.seedoes-mode .story-download:hover { opacity: 1; }

/* ---------- 歷史分頁 + 整體描述 ----------
   Figma 稿上沒有這兩樣，但功能要留。塞進 chip 列（217）與縮圖（275）
   之間那 58px 的空隙、絕對定位 —— 有分鏡時才出現，出現也不會把
   下面的卡片往下推，縮圖永遠停在 y275。 */
body.seedoes-mode .story-meta {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--story-top, 17px) + 116px);   /* 104 + 17 + 116 = 237 · 落在 chip 列與縮圖之間 */
  height: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}
body.seedoes-mode .story-meta > * { pointer-events: auto; }

body.seedoes-mode .story-meta .storyboard-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  flex: none;
}
body.seedoes-mode .story-meta .storyboard-tabs[hidden] { display: none; }
body.seedoes-mode .story-meta .storyboard-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 18px;
  padding: 0 7px;
  border: 0.5px solid rgba(26, 26, 26, 0.35);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
body.seedoes-mode .story-meta .storyboard-tab:hover {
  border-color: var(--seedoes-ink);
  color: var(--seedoes-ink);
  background: transparent;
}
body.seedoes-mode .story-meta .storyboard-tab.active {
  border-color: var(--seedoes-ink);
  color: var(--seedoes-ink);
}
body.seedoes-mode .story-meta .storyboard-tab-time { display: none; }
body.seedoes-mode .story-meta .storyboard-tab-close {
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s;
}
body.seedoes-mode .story-meta .storyboard-tab:hover .storyboard-tab-close { opacity: 0.6; }
body.seedoes-mode .story-meta .storyboard-tabs-count {
  font-size: 10px;
  color: var(--muted);
}
/* 整體描述 · 一行帶省略 · 全文放 title 屬性 */
body.seedoes-mode .story-meta .storyboard-overall {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 11px;
  line-height: 18px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.seedoes-mode .story-meta .storyboard-overall[hidden] { display: none; }

/* ---------- 卡片區 ---------- */
body.seedoes-mode .story-body {
  position: relative;
  margin-top: 56px;           /* 219 + 56 = 275 */
  height: calc(100vh - 315px);
  min-height: 400px;
}
body.seedoes-mode .story-content {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
body.seedoes-mode .story-content::-webkit-scrollbar { width: 0; height: 0; }

body.seedoes-mode .story-content .storyboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 306px);   /* = QUEST 的 M */
  column-gap: 18px;                          /* = QUEST 的 gap */
  row-gap: 0;                 /* 列距靠卡片高度撐（275）*/
  padding: 0;
  margin: 0;
}

/* ⚠️ 舊 CSS 有 `body.seedoes-mode .storyboard-card { border: 0.5px … !important }`
   · 這裡要 !important 才拿得掉，不然縮圖會被那條框往內擠 1px */
body.seedoes-mode .story-content .storyboard-card {
  width: 306px;
  /* 172 縮圖 + 2 內距 + 15.6 標題 + 6×18 描述 = 297.6 · 留 8px 當列距 */
  height: 306px;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease;
}
body.seedoes-mode .story-content .storyboard-card:hover {
  transform: translateY(-2px);
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  background: transparent !important;
}

body.seedoes-mode .story-content .storyboard-card-thumb {
  position: relative;
  width: 306px;
  height: 172px;              /* 16:9 · 306 × 9/16 = 172.1 */
  border: none;
  border-radius: 0;
  background: #D3D3D3;
  overflow: hidden;
}
body.seedoes-mode .story-content .storyboard-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
body.seedoes-mode .story-content .storyboard-card-noref {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #D3D3D3;
  color: #8E8B8B;
  font-size: 11px;
  border: none;
}

/* 縮圖右上 ＋ / ↻ / ↓ · 24×24 淡灰反白底 · 規格比照 QUEST
   Figma ink · ＋ x518–530 · ↻ x536–550 · ↓ x557–564（縮圖右緣 573）
   間距一律用 QUEST 的 28px（Figma 的 6px 塞不下 24 的框、會疊出亮痕） */
body.seedoes-mode .story-content .sb-act {
  position: absolute;
  top: 8px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background-color: rgba(238, 237, 232, 0.85);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  color: transparent;
  font-size: 0;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.12s, background-color 0.12s;
}
body.seedoes-mode .story-content .storyboard-card:hover .sb-act { opacity: 1; }
body.seedoes-mode .story-content .sb-act:hover {
  background-color: var(--seedoes-canvas);
}
/* ＋ 上傳替代圖片 · 【暫時隱藏】2026-08-23
   Sean · 「選了檔案沒有替換，暫時也用不到，先隱藏」·
   要等「生成手繪腳本」那個新功能一起做的時候再開回來。
   後端（POST /api/storyboard/upload-image）與前端的 openShotImageUpload()
   都完整留著 —— 要重新啟用只要把下面這條 display:none 拿掉。
   ⚠️ 重新啟用前先確認：那次失敗最可能是伺服器還沒重開、endpoint 根本不存在
   （改過 .py 一定要跑「重開 seedoes.command」）· 先確認 endpoint 有回 200 再測 UI。 */
body.seedoes-mode .story-content .sb-act-upload {
  display: none;
  right: 63px;
  background-image: url('/static/icons/story-card-upload.svg');
}
body.seedoes-mode .story-content .sb-act-swap {
  right: 35px;
  background-image: url('/static/icons/story-card-refind.svg');
}
body.seedoes-mode .story-content .sb-act-download {
  right: 7px;
  background-image: url('/static/icons/story-card-download.svg?v=2');
  background-size: 8px 15px;
}

/* 舊卡片的號碼 / 秒數列 · Figma 沒有 · 收起來 */
body.seedoes-mode .story-content .storyboard-card-numbar { display: none; }

/* 文字區 · 整組比照 QUEST（跟 EVENT 卡片同一套數字）*/
/* 上內距 2 不是 6 —— Inter 13px 在 1.2 行高裡上方會多出約 3px 的 leading ·
   要讓檔名的字身頂端落回 Figma 的位置（縮圖下緣 +5px）· 上內距只能給 2。
   左右 12 維持 QUEST 的規格。gap 也要歸零，不然 flex 會在標題與描述之間
   再塞 4px（標題自己已經有 margin-bottom）。 */
body.seedoes-mode .story-content .storyboard-card-body {
  padding: 2px 12px 0;
  gap: 0;
}
body.seedoes-mode .story-content .storyboard-card-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--seedoes-ink);
  margin: 0;                  /* 描述的字身頂端要落在 436 · 這裡不能再留 margin */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.seedoes-mode .story-content .storyboard-card-desc {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 右側捲軸 · 只有可拖曳的 bar（同 SEED / EVENT）---------- */
body.seedoes-mode .story-scroll {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1003px;               /* 卡片區右緣 +49 · 與 Figma 的相對距離一致 */
  width: 6px;
}
body.seedoes-mode .story-scrollbar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
body.seedoes-mode .story-scrollbar.is-active { opacity: 1; pointer-events: auto; }
body.seedoes-mode .story-scroll-thumb {
  position: absolute;
  left: 0;
  width: 6px;
  min-height: 24px;
  border-radius: 3px;
  background: #030303;
  cursor: grab;
}
body.seedoes-mode .story-scroll-thumb:active { cursor: grabbing; }

/* ---------- 通用 · 隱藏 UPHiN legacy 元素 ---------- */
body.seedoes-mode .hint {
  color: var(--muted) !important;
}
/* 隱藏設定頁的一些 UPHiN legacy dev 元素（若在 seedoes 模式）*/
body.seedoes-mode #tab-search .axes {
  display: none !important;
}

/* =========================================================
 * seedoes v1 · 全站設計統一（Sean 2026-08-21 feedback）
 * 1. 所有輸入框 · 統一 home hero 樣式（透明底 + 深色細邊框）
 * 2. 所有白色底 · 改成 canvas 米色（融入頁面 · 無邊界感）
 * 3. 拖拉 bar + 箭頭 · 黑色
 * ========================================================= */

/* ---- 1 · 統一輸入框樣式（透明 + 深色細邊） ---- */
body.seedoes-mode input[type="text"],
body.seedoes-mode input[type="email"],
body.seedoes-mode input[type="password"],
body.seedoes-mode input[type="search"],
body.seedoes-mode input[type="number"],
body.seedoes-mode textarea,
body.seedoes-mode select {
  background: transparent !important;
  border: 1.5px solid var(--seedoes-ink) !important;
  border-radius: var(--seedoes-radius) !important;
  color: var(--seedoes-ink) !important;
  font-family: inherit !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  outline: none;
  box-shadow: none !important;
  transition: box-shadow 0.15s;
}
body.seedoes-mode input:focus,
body.seedoes-mode textarea:focus,
body.seedoes-mode select:focus {
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08) !important;
}
body.seedoes-mode input::placeholder,
body.seedoes-mode textarea::placeholder {
  color: var(--muted) !important;
}
/* Hero input 例外 · 保留原本無邊框設計（在 wrapper 上有邊框）*/
body.seedoes-mode .seedoes-hero-input {
  border: none !important;
  padding: 0 !important;
  font-size: 16px !important;
  box-shadow: none !important;
}
body.seedoes-mode .seedoes-hero-input:focus {
  box-shadow: none !important;
}

/* ---- 2 · 所有白色底 · 改成 canvas 米色 ---- */
body.seedoes-mode .search-card,
body.seedoes-mode .video-card,
body.seedoes-mode .storyboard-card {
  background: var(--seedoes-canvas) !important;
  border: 0.5px solid var(--border) !important;
}
body.seedoes-mode .search-card:hover,
body.seedoes-mode .video-card:hover,
body.seedoes-mode .storyboard-card:hover {
  border-color: var(--seedoes-ink) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
}
/* 縮圖區 · 沒圖時也是米色（不是白色）· 對齊 SEED 頁的空白預覽卡 */
body.seedoes-mode .search-card-thumb,
body.seedoes-mode .vc-thumb {
  background: var(--seedoes-canvas) !important;
  border: 0.5px solid var(--border) !important;
}
/* Modal / dialog · 米色底 */
body.seedoes-mode .modal-card,
body.seedoes-mode #player-modal .modal-card {
  background: var(--seedoes-canvas) !important;
}
body.seedoes-mode .modal-backdrop {
  background: rgba(26, 26, 26, 0.45) !important;
}
/* Drawer（設定抽屜）*/
body.seedoes-mode .drawer {
  background: var(--seedoes-canvas) !important;
}
/* 使用者 menu · 米色 */
body.seedoes-mode .seedoes-user-menu {
  background: var(--seedoes-canvas) !important;
  border: 0.5px solid var(--border-strong) !important;
}
/* User button hover · 米色 · 不再變白 */
body.seedoes-mode .seedoes-user:hover,
body.seedoes-mode .seedoes-user[aria-expanded="true"] {
  background: transparent !important;
}
/* Ghost buttons · 米色底 · hover 略深 */
body.seedoes-mode button.ghost,
body.seedoes-mode .ghost {
  background: transparent !important;
  border: 0.5px solid var(--border-strong) !important;
  color: var(--seedoes-ink) !important;
}
body.seedoes-mode button.ghost:hover,
body.seedoes-mode .ghost:hover {
  background: rgba(26, 26, 26, 0.05) !important;
}

/* ---- 3 · 拖拉 bar + 箭頭 · 黑色 ---- */
/* 捲軸 · 淺灰底 · 黑色滑塊 */
body.seedoes-mode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
body.seedoes-mode ::-webkit-scrollbar-track {
  background: rgba(26, 26, 26, 0.05);
}
body.seedoes-mode ::-webkit-scrollbar-thumb {
  background: var(--seedoes-ink);
  border-radius: 4px;
}
body.seedoes-mode ::-webkit-scrollbar-thumb:hover {
  background: #000;
}

/* 上下滑動瀏覽 bar · 若有 · 黑色 */
body.seedoes-mode input[type="range"] {
  -webkit-appearance: none;
  height: 4px;
  background: rgba(26, 26, 26, 0.15);
  border-radius: 2px;
  border: none !important;
  padding: 0 !important;
}
body.seedoes-mode input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--seedoes-ink);
  border-radius: 50%;
  cursor: pointer;
}

/* 箭頭 · 全部黑色（分頁上下、tree 展開、下拉 etc）*/
body.seedoes-mode .arrow,
body.seedoes-mode .caret,
body.seedoes-mode .sb-project-chip-caret {
  color: var(--seedoes-ink) !important;
}

/* DAM tree expand/collapse 箭頭 */
body.seedoes-mode .dam-tree-item::before,
body.seedoes-mode .tree-toggle {
  color: var(--seedoes-ink) !important;
}

/* ---- Bonus · 統一「+」按鈕樣式 · 融入設計 ---- */
body.seedoes-mode .add-folder-plus,
body.seedoes-mode #add-folder,
body.seedoes-mode #project-new-btn {
  background: transparent !important;
  border: none !important;
  color: var(--seedoes-ink) !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  padding: 4px 8px !important;
}
body.seedoes-mode .add-folder-plus:hover,
body.seedoes-mode #add-folder:hover,
body.seedoes-mode #project-new-btn:hover {
  opacity: 0.6;
}

/* SEED 進度條區 · 灰 bar + 黑色完成進度（若後端有渲染）*/
body.seedoes-mode .folder-summary,
body.seedoes-mode .scan-progress {
  background: transparent !important;
}

/* uph-search-actions 按鈕 · 黑色 icon */
body.seedoes-mode .uph-iconbtn {
  background: transparent !important;
  border: none !important;
  color: var(--seedoes-ink) !important;
}

/* =========================================================
 * seedoes v1 · Pop-up modal 樣式（兩種版式）
 * ========================================================= */
.seedoes-popup {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  min-width: 360px;
  max-width: 520px;
  padding: 14px 20px 16px;
  background: var(--seedoes-canvas);
  border: 0.5px solid var(--seedoes-ink);
  border-radius: var(--seedoes-radius);
  color: var(--seedoes-ink);
  z-index: 2000;
  animation: seedoes-popup-in 0.25s ease;
}
@keyframes seedoes-popup-in {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.seedoes-popup-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--seedoes-ink);
}
.seedoes-popup-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--warn);
}
.seedoes-popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
}
.seedoes-popup-btn {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0.5px solid var(--border-strong);
  border-radius: 50%;
  color: var(--seedoes-ink);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  transition: background 0.15s;
}
.seedoes-popup-btn:hover {
  background: var(--accent-soft);
}
.seedoes-popup-btn.warn {
  border-color: var(--warn);
  color: var(--warn);
}

/* =========================================================
 * seedoes v1 · QUEST Home · Figma pixel-perfect rewrite
 * 基準 · seedoes_design_handoff/01_screenshots/seedoes v1/home QUEST.png
 * Figma frame 1440 × 1024 · 所有數值皆由該 PNG 量測得出
 * 這一段刻意放檔案最後 · 用 cascade 覆蓋前面的舊 seedoes 樣式
 * （出事只要刪掉這一段就回到舊版）
 * ========================================================= */

:root {
  /* Figma header 高度 · logo 中線 y=35 · Sean pill 中線 y=40 */
  --seedoes-header-h: 72px;
}

/* ---------- Header ---------- */
.seedoes-header {
  height: var(--seedoes-header-h);
  padding: 0 54px 0 42px;
  border-bottom: none;               /* Figma 沒有分隔線 */
  background: var(--seedoes-canvas);
}
body.seedoes-mode .seedoes-header { padding-left: 42px; }

.seedoes-brand { margin-left: 0; position: relative; top: -1px; }
.seedoes-brand-lockup { height: 13px; }   /* Figma 70 × 13 */

/* Sean pill · Figma 45 × 23 · 中線比 logo 低 4px */
.seedoes-user-wrap { position: relative; top: 4px; }
.seedoes-user {
  height: 23px;
  padding: 0 8px;
  gap: 0;
  border: 1px solid var(--seedoes-ink);
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
}

/* ---------- Sean dropdown · Figma 180 × 257 ---------- */
.seedoes-user-menu {
  top: calc(100% + 11px);
  right: 0;
  min-width: 0;
  width: 180px;
  min-height: 257px;
  display: flex;
  flex-direction: column;
  padding: 8px 0 6px;
  background: var(--seedoes-canvas);
  border: 1px solid var(--seedoes-ink);
  border-radius: 6px;
  box-shadow: none;
}
body.seedoes-mode .seedoes-user-menu {
  background: var(--seedoes-canvas) !important;
  border: 1px solid var(--seedoes-ink) !important;
}
/* 預設收起 · （修 bug：上面的 display:flex 會蓋掉 [hidden]）*/
.seedoes-user-menu[hidden] { display: none; }
/* hover 到 Sean 鈕就展開 · 跟 sidebar label 同一套邏輯（Sean 定調）*/
.seedoes-user-wrap:hover .seedoes-user-menu { display: flex; }
/* 按鈕跟選單之間有 11px 空隙 · 補一塊透明區 · 滑下去不會斷掉 */
.seedoes-user-menu::before {
  content: '';
  position: absolute;
  top: -13px;
  left: 0;
  right: 0;
  height: 13px;
}
.user-menu-name { padding: 0 12px 3px; }
.user-menu-name-main {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
}
.user-menu-name-plan {
  font-size: 10px;
  letter-spacing: 0;
  line-height: 12px;
  margin-top: 0;
}
.seedoes-user-menu .user-menu-item { padding: 0 12px; }
.user-menu-divider {
  height: 1px;
  background: var(--seedoes-ink);
  margin: 5px 12px 6px;
}
/* 第二條 divider（Get Help 上面那條）· Figma 沒有畫線 · 改成彈性空白 */
.seedoes-user-menu .user-menu-divider ~ .user-menu-divider {
  height: 0;
  background: transparent;
  margin: auto 0 0;
}
.user-menu-item {
  padding: 0 12px;
  font-size: 14px;
  line-height: 23px;
}
/* 底部 Get Help / Log out · Figma 行距較窄 */
.seedoes-user-menu .user-menu-divider ~ .user-menu-divider ~ .user-menu-item { line-height: 19px; }

/* ---------- Sidebar ---------- */
.seedoes-sidebar {
  width: auto;
  min-width: var(--seedoes-sidebar-w);
  padding: 251px 20px 20px 42px;     /* 第一顆 icon 中線 y=268 */
  align-items: flex-start;
  gap: 7px;                          /* 34 + 7 = 41px pitch */
  border-right: none;                /* Figma 沒有分隔線 */
  background: var(--seedoes-canvas); /* 蓋住捲動內容 */
  pointer-events: none;              /* 空白區不擋內容 */
}
.seedoes-nav-btn {
  pointer-events: auto;
  width: auto;
  height: 34px;
  justify-content: flex-start;
  width: 34px;                       /* icon 欄固定寬 */
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.seedoes-nav-btn:hover,
.seedoes-nav-btn.active { background: transparent; }
/* icon 一律用 SVG 檔案本身的原生尺寸 · 絕對不要指定 width/height 去縮放它
   （這些 SVG 裡面包的是 PNG pattern · 一旦被縮放 Safari/部分 Chrome 會整塊畫成黑色）
   button 固定 34px 寬 · label 的絕對定位才對得準 */
.seedoes-nav-btn .nav-icon {
  display: block;
  width: auto;
  height: auto;
  flex-shrink: 0;
}
.seedoes-nav-btn.active .nav-icon { filter: none; }
/* Active = 目前這一頁 · 維持 Figma 原始線稿 100% 黑
   其他沒選中的整顆（icon + label）淡下去 · Figma 原稿沒有 active 狀態 · Sean 決定
   註：SIGHTS 的 inline opacity:0.4 優先度較高 · 不會疊加 */
.seedoes-nav-btn:not(.active) {
  opacity: 0.4;
  transition: opacity 0.15s;
}
.seedoes-nav-btn:not(.active):hover {
  opacity: 1;
}
/* Label · 預設不顯示 · hover 才浮出（Sean 定調 · 5 個 tab 一律 hover 才出現）
   用絕對定位浮在 icon 右邊 · 所以 sidebar 寬度固定成 icon-only · 不會推擠版面 */
.seedoes-nav-btn::after { content: none; }   /* 停用舊的黑底 tooltip */
.seedoes-nav-label {
  display: block;
  position: absolute;
  left: 43px;                        /* 42 + 43 + 6 padding = 文字左緣 91 */
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 6px;
  background: var(--seedoes-canvas); /* 蓋住底下內容 · 讀得清楚 */
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--seedoes-ink);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 1;
}
.seedoes-nav-btn:hover .seedoes-nav-label { opacity: 1; }

/* ---------- Hero ---------- */
/* 抵銷 sidebar 的 margin-left · 讓 hero 對齊「整個視窗」中線（Figma 720）*/
.seedoes-hero {
  margin-left: calc(-1 * var(--seedoes-sidebar-w));
  width: calc(100% + var(--seedoes-sidebar-w));
  min-height: 0;
  justify-content: flex-start;
  gap: 0;
  padding: 159px 20px 40px;          /* 72 header + 32 main + 158 = 262 */
}
.seedoes-hero.has-results { padding-top: 8px; }
/* 有結果時 · input 變寬（QUEST 1 頁 Figma = 740px）*/
.seedoes-hero.has-results .seedoes-hero-input-wrap { width: 740px; max-width: 100%; }

.seedoes-hero-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--seedoes-ink);
}
.seedoes-hero-title .hero-mark {
  width: auto;
  height: 26px;
  display: block;
}

/* Input box · Figma 472 × 87 */
.seedoes-hero-input-wrap {
  width: 472px;
  max-width: 100%;
  margin-top: 17px;
  padding: 12px 16px 7px;
  border: 1.5px solid var(--seedoes-ink);
  border-radius: 8px;
}
.seedoes-hero-input,
body.seedoes-mode .seedoes-hero-input {
  display: block;
  /* Figma · 游標/文字左緣在 wrap +26px（比下排 + 號多 8px）*/
  padding: 0 0 0 8px !important;
  font-size: 16px !important;
  line-height: 19px;
  caret-color: var(--seedoes-ink);
}

.seedoes-hero-controls {
  gap: 9px;
  margin-top: 27px;
  height: 20px;
}
.seedoes-hero-plus,
.seedoes-hero-submit {
  width: auto;
  height: auto;
}
.seedoes-hero-plus { margin-left: -5px; }
.seedoes-hero-submit { margin-right: -2px; }
.seedoes-hero-plus img { width: 13px; height: 12px; }     /* Figma 13 × 12 */
.seedoes-hero-submit img { width: 22px; height: 9px; }    /* Figma 22 × 9 */

/* STILL / MOTION pill · Figma 93 × 18 · 黑底 · 選中的是米色 knob */
.seedoes-hero-modes {
  width: 93px;
  height: 18px;
  padding: 2px;
  background: #0B0B0B;
  border-radius: 8px;
}
.hero-mode-btn {
  padding: 0;
  height: 14px;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
  line-height: 14px;
  border-radius: 6px;
}
.hero-mode-btn[data-mode="frame"] { width: 41px; }
.hero-mode-btn[data-mode="video"] { width: 48px; }
.hero-mode-btn.active {
  background: var(--seedoes-canvas);
  color: var(--seedoes-ink);
  border-radius: 6px;
}

.seedoes-hero-history { margin-top: 28px; }
/* 修 bug · 原本 display:flex 蓋掉 [hidden] · 沒有歷史時仍會佔位 */
.seedoes-hero-history[hidden] { display: none; }

/* =========================================================
 * seedoes v1 · 以圖搜圖 · 拖曳提示層
 * 圖片拖進 QUEST 頁（Home / 搜尋結果）任何位置都能搜
 * ========================================================= */
.seedoes-dropzone {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(238, 237, 232, 0.94);
  pointer-events: none;              /* 讓 drag 事件穿透到 window */
}
body.seedoes-dragging .seedoes-dropzone { display: flex; }
.seedoes-dropzone-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--seedoes-ink);
  border-radius: 8px;
}
.seedoes-dropzone-box span {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--seedoes-ink);
}

/* =========================================================
 * seedoes v1 · QUEST 搜尋結果頁 · Figma pixel-perfect
 * 基準 · seedoes_design_handoff/01_screenshots/seedoes v1/QUEST 1.png
 * ========================================================= */

/* ---- 1 · 卡片 / 縮圖 / 文字 · 一律沒有邊框 ---- */
body.seedoes-mode .search-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  box-shadow: none !important;
}
body.seedoes-mode .search-card-thumb {
  border: none !important;
  border-radius: 6px;
}
/* ---- 2 · hover · 只保留浮起的動態 · 不要邊框也不要陰影 ---- */
body.seedoes-mode .search-card:hover {
  transform: translateY(-2px);
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* ---- 3 · 縮圖右上的 + / ↓ · hover 才出現 ---- */
/* 尺寸一律用 SVG 原生大小 + background-size:auto
   （這些 icon 內嵌 PNG · 一被縮放某些瀏覽器會整塊畫成黑色）*/
body.seedoes-mode .search-card-addproj,
body.seedoes-mode .search-card-download {
  opacity: 0 !important;
  background-size: auto;
  pointer-events: none;
}
body.seedoes-mode .search-card:hover .search-card-addproj,
body.seedoes-mode .search-card:hover .search-card-download {
  opacity: 1 !important;
  pointer-events: auto;
}
body.seedoes-mode .search-card-addproj {
  width: 13px;                       /* Figma 13 × 13 */
  height: 13px;
  top: 13px;
  right: 30px;
}
body.seedoes-mode .search-card-download {
  width: 7px;                        /* Figma 7 × 17 */
  height: 17px;
  top: 12px;
  right: 13px;
}

/* ---- 文字區 · 跟縮圖切齊（Figma 沒有內縮）---- */
body.seedoes-mode .search-card-body {
  padding: 6px 0 0;
}

/* ---- 4 · 結果數那一行 · 只留「N results」---- */
body.seedoes-mode .search-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 4px;
}
body.seedoes-mode .search-summary .hint {
  font-size: 13px;
  color: var(--seedoes-ink);
  letter-spacing: 0;
}

/* ---- 5 · S · M · L ---- */
body.seedoes-mode .size-toggle {
  margin-left: auto;
  gap: 0;
  border: none;
  border-radius: 0;
  overflow: visible;
  align-items: center;
}
body.seedoes-mode .size-toggle button {
  position: relative;
  background: transparent !important;
  border: none;
  border-radius: 0;
  padding: 0 11px;                   /* 字跟字之間 22px · 點剛好落在中間 */
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--muted);
  transition: color 0.15s;
}
body.seedoes-mode .size-toggle button:first-child { padding-left: 0; }
body.seedoes-mode .size-toggle button:last-child  { padding-right: 0; }
body.seedoes-mode .size-toggle button:hover {
  background: transparent !important;
  color: var(--seedoes-ink);
}
body.seedoes-mode .size-toggle button.active {
  background: transparent !important;
  color: var(--seedoes-ink);
  font-weight: 600;
}
/* 中間的「·」分隔點 */
body.seedoes-mode .size-toggle button + button::before {
  content: '·';
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-weight: 400;
  pointer-events: none;
}

/* ---- 6 · 分頁 · Figma「◀  1 / 5  ▶」---- */
body.seedoes-mode .pagination,
body.seedoes-mode .video-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;                         /* 箭頭與數字間距 36px（含 28px 點擊區）*/
  margin-top: 48px;
  padding: 0;
  border: none;
  background: transparent;
}
body.seedoes-mode .pagination .page-indicator,
body.seedoes-mode .video-pagination .pg-info {
  min-width: 0;                      /* 舊 CSS 給了 110px 固定寬 · 會把箭頭推開 */
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--seedoes-ink);
}
/* 箭頭 · 點擊區 28×28 · 圖示用原生 9×10 不縮放 */
body.seedoes-mode .pg-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  background-size: auto;
  background-color: transparent;
  border: none;
  color: transparent;
  font-size: 0;
}
body.seedoes-mode .pg-btn[data-act="prev"],
body.seedoes-mode .pg-btn#pg-prev {
  background-image: url('/static/icons/pg-prev.svg');
}
body.seedoes-mode .pg-btn[data-act="next"],
body.seedoes-mode .pg-btn#pg-next {
  background-image: url('/static/icons/pg-next.svg');
}

/* ---- 7 · 縮圖右上 + / ↓ · 加上淡灰反白底（照片深色時也看得清楚）---- */
body.seedoes-mode .search-card-addproj,
body.seedoes-mode .search-card-download {
  width: 24px;
  height: 24px;
  top: 8px;
  border-radius: 4px;
  background-color: rgba(238, 237, 232, 0.85);
  background-position: center;
  background-size: auto;             /* icon 維持原生 13×13 / 7×17 · 不縮放 */
}
body.seedoes-mode .search-card-addproj  { right: 36px; }
body.seedoes-mode .search-card-download { right: 8px; }
body.seedoes-mode .search-card-addproj:hover,
body.seedoes-mode .search-card-download:hover {
  background-color: var(--seedoes-canvas);
  transform: none;                   /* 有底色了 · 不需要放大 */
  opacity: 1 !important;
}

/* ---- 修 bug · 分頁箭頭 hover 破圖 ----
   舊 CSS 有一條 `.pg-btn:hover:not(:disabled) { background: #d6412c }`（紅色）,
   用的是 background 簡寫 · 會把 repeat / position / size 一起重設成預設值 ·
   於是箭頭圖被平鋪成一整塊紅黑格子。這裡把這四個屬性釘回去。 */
body.seedoes-mode .pg-btn:hover,
body.seedoes-mode .pg-btn:hover:not(:disabled),
body.seedoes-mode .pg-btn:focus,
body.seedoes-mode .pg-btn:focus-visible,
body.seedoes-mode .pg-btn:active {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  border-color: transparent;
  color: transparent;
  box-shadow: none;
}
body.seedoes-mode .pg-btn:hover:not(:disabled) {
  transform: translateY(-1px);       /* 只留這個當 hover 回饋 */
}

/* ---- HISTORY chip · hover 不要白底 · 只把線框變深 ---- */
body.seedoes-mode .hero-history-chip {
  background: transparent;
  border: 0.5px solid var(--border-strong);
  transition: border-color 0.15s;
}
body.seedoes-mode .hero-history-chip:hover {
  background: transparent;
  border-color: var(--seedoes-ink);
}

/* =========================================================
 * seedoes v1 · QUEST 2 影片播放彈窗 · Figma pixel-perfect
 * 基準 · 01_screenshots/seedoes v1/QUEST 2.png
 * ========================================================= */

/* 底部兩顆功能鍵 · 用 Figma icon 原生尺寸 · 一律不縮放
   （這些 SVG 內嵌 PNG · 一縮放某些瀏覽器會畫成黑塊或破圖）*/
body.seedoes-mode #player-modal .modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;                         /* Figma 兩顆之間 26px */
  padding: 16px 29px 24px;           /* Figma 右緣 29px · 下緣 24px */
  border-top: 0.5px solid var(--border);
}
/* 這兩顆帶著 .ghost class · 舊 CSS 的 .ghost:hover 用 background 簡寫 + !important
   會把 icon 整個洗掉 · 所以這裡把每個屬性都釘死 */
body.seedoes-mode #player-open-external,
body.seedoes-mode #player-open-external:hover,
body.seedoes-mode #player-reveal,
body.seedoes-mode #player-reveal:hover {
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: auto !important;   /* 原生尺寸 · 不縮放 */
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}
body.seedoes-mode #player-open-external,
body.seedoes-mode #player-open-external:hover {
  background-image: url('/static/icons/modal-play.svg') !important;
  width: 42px;                       /* Figma 42 × 33 */
  height: 33px;
}
body.seedoes-mode #player-reveal,
body.seedoes-mode #player-reveal:hover {
  background-image: url('/static/icons/modal-finder.svg') !important;
  width: 65px;                       /* Figma 65 × 34 */
  height: 34px;
}
body.seedoes-mode #player-open-external:hover,
body.seedoes-mode #player-reveal:hover {
  opacity: 0.6;
  transform: translateY(-1px);       /* 不用 scale · 避免圖被重新縮放 */
}

/* 右上角關閉 X · 同樣用原生 27×27 · 不縮放 */
body.seedoes-mode #player-modal .modal-x,
body.seedoes-mode #player-modal .modal-x:hover {
  width: 27px;
  height: 27px;
  background-color: transparent !important;
  background-image: url('/static/icons/modal-close.svg') !important;
  background-size: auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: none !important;
  transform: none;
  transition: opacity 0.15s;
}
body.seedoes-mode #player-modal .modal-x:hover { opacity: 0.6; }

/* ---- 彈窗裡的畫面描述 · 改成跟 QUEST 卡片一樣的流水文字 ---- */
/* （原本是「場景／人物／服裝…」的欄位表格 · 九軸結構不外顯）*/
body.seedoes-mode .frame-detail-tags {
  display: block;
  font-size: 12px;
  line-height: 1.65;
  color: var(--muted);
}
body.seedoes-mode .frame-detail-tags .hint { color: var(--muted); }

/* =========================================================
 * seedoes v1 · 等待動畫（loading）
 * 素材 · 02_svg_icons/pop up window/等待方塊.svg（16×16 黑方塊）
 *        02_svg_icons/pop up window/等待線條.svg（60×1 黑線）
 * 動作 · 原地轉一圈 → 滑到線的另一頭 → 再轉一圈 → 滑回來 · 無限循環
 * 用途 · QUEST 搜尋中（文字/以圖搜圖）、STORY 產生分鏡中
 * ========================================================= */
.seedoes-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 90px 20px;
}
.seedoes-loader {
  position: relative;
  width: 76px;                       /* 方塊 16 + 移動距離 60 */
  height: 16px;
}
.seedoes-loader .sl-line {
  position: absolute;
  top: 50%;
  left: 8px;                         /* 對齊方塊中心 */
  right: 8px;
  height: 1px;
  background: var(--seedoes-ink);
  transform: translateY(-50%);
}
.seedoes-loader .sl-square {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  background: #070707;
  animation: seedoes-loader 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes seedoes-loader {
  0%   { transform: translateX(0)    rotate(0deg); }
  25%  { transform: translateX(0)    rotate(360deg); }   /* 原地轉一圈 */
  50%  { transform: translateX(60px) rotate(360deg); }   /* 移到另一頭 */
  75%  { transform: translateX(60px) rotate(720deg); }   /* 再轉一圈 */
  100% { transform: translateX(0)    rotate(720deg); }   /* 移回來 */
}
/* 使用者在系統設定關掉動態效果時 · 放慢而不是完全停掉（還是要看得出在等） */
@media (prefers-reduced-motion: reduce) {
  .seedoes-loader .sl-square { animation-duration: 5s; }
}

/* =========================================================
 * seedoes v1 · MOTION（影片）結果卡 · 對齊 STILL 的處理
 * ========================================================= */
/* 卡片與縮圖一律不要邊框、不要陰影（跟 STILL 一致）*/
body.seedoes-mode .video-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  box-shadow: none !important;
}
body.seedoes-mode .video-card:hover {
  transform: translateY(-2px);
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
body.seedoes-mode .vc-thumb {
  border: none !important;
  border-radius: 6px;
}
/* 左下角的「精準／相關／邊緣／沾邊」色塊已從程式移除 · 樣式一併關掉 */
body.seedoes-mode .vc-relevance { display: none !important; }
/* 尺寸與秒數 · 跟上面的檔名/描述切齊 */
body.seedoes-mode .vc-footline {
  margin-top: 4px;
  opacity: 1;
  color: var(--muted);
}

/* ---- STILL 卡片 · 對齊 MOTION 卡片 ---- */
/* 檔名粗細比照 .vc-name */
body.seedoes-mode .search-card-title {
  font-weight: 600;
}
/* 文字區左右留白比照 .vc-meta（12px）· 上緣仍照 Figma 貼齊縮圖 */
body.seedoes-mode .search-card-body {
  padding: 6px 12px 0;
}

/* ---- STILL 卡片字級 · 完全比照 MOTION（含 S / M / L 三檔一起縮放）---- */
body.seedoes-mode .search-card-title {
  font-size: 13px;                   /* = .vc-name */
}
body.seedoes-mode .search-card-desc {
  font-size: 12px;                   /* = .vc-summary */
  line-height: 1.5;
}
body.seedoes-mode .uph-results-grid[data-size="s"] .search-card-title { font-size: 12px; }
body.seedoes-mode .uph-results-grid[data-size="s"] .search-card-desc  { font-size: 11px; }
body.seedoes-mode .uph-results-grid[data-size="l"] .search-card-title { font-size: 14px; }
body.seedoes-mode .uph-results-grid[data-size="l"] .search-card-desc  { font-size: 13px; }
/* 文字區內距也跟著 S / M / L 走（MOTION 本來就有）*/
body.seedoes-mode .uph-results-grid[data-size="s"] .search-card-body { padding: 6px 10px 0; }
body.seedoes-mode .uph-results-grid[data-size="l"] .search-card-body { padding: 6px 14px 0; }

/* ---- 播放彈窗 · 兩顆功能鍵 hover 時浮出小字說明 ---- */
/* 按鈕本身的 font-size / color 被設成 0 / transparent（藏掉原本的中文字），
   所以 ::after 要自己指定字級與顏色，不能靠繼承。 */
body.seedoes-mode #player-modal .modal-foot button[data-label] {
  position: relative;
  overflow: visible;
}
body.seedoes-mode #player-modal .modal-foot button[data-label]::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 6px;
  background: var(--seedoes-canvas);
  color: var(--seedoes-ink) !important;
  font-size: 11px !important;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
body.seedoes-mode #player-modal .modal-foot button[data-label]:hover::after {
  opacity: 1;
}

/* =========================================================
 * seedoes v1 · SEED（資料庫）· Figma pixel-perfect rewrite
 * 基準 · seedoes_design_handoff/01_screenshots/seedoes v1/SEEDS.png
 * Figma frame 1440 × 1024 · 內容欄 x212–1263（1052 寬）
 * 所有數值皆由該 PNG 量測得出
 * ⚠️ icon 一律用 SVG 原生尺寸 + background-size:auto
 *    （這些 SVG 內嵌 PNG · 一旦縮放 Safari / 部分 Chrome 會畫成黑塊）
 * 出事只要刪掉這一整段就回到舊版
 * ========================================================= */

body.seedoes-mode #tab-library {
  max-width: none;
  padding: 0;
  /* 抵銷 sidebar 的 margin-left · 讓內容欄用「整個視窗」座標對齊 Figma */
  margin-left: calc(-1 * var(--seedoes-sidebar-w));
  width: calc(100% + var(--seedoes-sidebar-w));
}
body.seedoes-mode #tab-library .seed-legacy { display: none !important; }

/* 1440 時 → 左緣 212 / 右緣 1263 · 隨視窗寬度流動 */
.seed-page { margin: 0 145px 0 180px; }

/* ---------- 檔名搜尋 · Figma 504 × 42 · radius 8 · 1px 黑框 ---------- */
.seed-filterbar {
  width: 504px;
  height: 42px;
  margin: 39px 0 0 auto;             /* 上緣 y=143 · 靠右 */
  display: flex;
  align-items: center;
  border: 1px solid var(--seedoes-ink);
  border-radius: 8px;
  background: transparent;
}
/* 邊框畫在外框上 · input 本身不要框（要 !important 蓋掉「統一輸入框樣式」）*/
body.seedoes-mode .seed-filterbar input.seed-filter-input,
.seed-filter-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 6px 0 27px !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none;
  background: transparent !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 400;
  color: var(--seedoes-ink) !important;
  box-shadow: none !important;
}
body.seedoes-mode .seed-filterbar input.seed-filter-input:focus { box-shadow: none !important; }
body.seedoes-mode .seed-filterbar input.seed-filter-input::placeholder,
.seed-filter-input::placeholder { color: #8A8884 !important; opacity: 1; }
.seed-filter-btn {
  flex: none;
  padding: 0;
  border: none;
  cursor: pointer;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;             /* 原生尺寸 · 不要縮放 */
}
.seed-filter-btn:hover { opacity: 0.55; }
.seed-filter-clear {
  width: 33px; height: 33px;
  background-image: url("/static/icons/seed-clear.svg?v=1");
}
.seed-filter-search {
  width: 23px; height: 23px;
  margin: 0 12px 0 4px;
  background-image: url("/static/icons/seed-search.svg?v=1");
}

/* ---------- 工具列 · ＋ / 掃描 / 停止 / 片盤＋進度 · 右側 N SEEDS ---------- */
.seed-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 22px;
  margin-top: 11px;                  /* 143 + 42 + 11 = 196 */
  padding-left: 16px;                /* 212 + 16 = 228 · 與資料夾樹切齊 */
}
.seed-tools { display: flex; align-items: flex-end; }
.seed-tool {
  flex: none;
  padding: 0;
  border: none;
  cursor: pointer;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
}
.seed-tool:hover { opacity: 0.55; }
.seed-tool:disabled { opacity: 0.35; cursor: wait; }
.seed-tool-add    { width: 21px; height: 21px;
  background-image: url("/static/icons/seed-add.svg?v=1"); }
.seed-tool-rescan { width: 21px; height: 20px; margin-left: 10px;
  background-image: url("/static/icons/seed-rescan.svg?v=1"); }
.seed-tool-stop   { width: 23px; height: 20px; margin-left: 7px;
  background-image: url("/static/icons/seed-stop.svg?v=1"); }
.seed-tool-rescan.is-loading { animation: uphin-spin 1s linear infinite; }

/* 片盤 · Figma 27 × 27 · 中間一條傳動線 · 標籤進行中才轉 */
.seed-reels {
  display: flex;
  align-items: center;
  margin-left: 9px;                  /* 310 + 9 = 319 */
  margin-bottom: -3px;               /* 片盤圖有透明邊 · 往下壓 3px 對齊 Figma */
  position: relative;
}
.seed-reel {
  width: 27px; height: 27px;
  background: transparent url("/static/icons/seed-reel.svg?v=1") no-repeat center;
  background-size: auto;
}
.seed-reel-line {
  width: 17px; height: 16px;
  margin: 0 -8px;                    /* 壓在兩顆片盤中間 */
  background: transparent url("/static/icons/seed-reel-line.svg?v=1") no-repeat center;
  background-size: auto;
}
.seed-reels.is-running .seed-reel { animation: uphin-spin 2.4s linear infinite; }

/* 進度 · 灰底線 148 × 2 · 黑色完成段疊在上面 */
.seed-progress {
  position: relative;
  width: 148px;
  margin-left: -18px;                /* 線頭壓進片盤下方 · 起點 x=356 */
  align-self: flex-end;
}
.seed-progress-label {
  position: absolute;
  left: 44px;
  bottom: 4px;
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--seedoes-ink);
  white-space: nowrap;
}
.seed-progress-track {
  display: block;
  height: 2px;
  background: #CAC8C5;
}
.seed-progress-fill {
  display: block;
  height: 1px;
  width: 0;
  background: var(--seedoes-ink);
  transition: width 0.3s ease;
}
/* 片盤與進度線 · 只有正在標籤時才出現（放在兩者定義之後才蓋得掉）*/
.seed-toolbar .seed-reels,
.seed-toolbar .seed-progress { display: none; }
.seed-toolbar.is-scanning .seed-reels { display: flex; }
.seed-toolbar.is-scanning .seed-progress { display: block; }

.seed-count {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--seedoes-ink);
  white-space: nowrap;
}

/* ---------- 分隔線 · Figma 1052 × 1 · #686868 ---------- */
.seed-divider {
  height: 1px;
  margin-top: 11px;                  /* 217 + 1 + 11 = 229 */
  background: #686868;
}

/* ---------- 內容區 · 資料夾樹 + 縮圖列 + 右側捲軸 ---------- */
body.seedoes-mode .dam-browser.seed-body {
  position: relative;
  display: grid;
  /* 樹 228–401 · 中間 20px 是拖曳把手 · 縮圖區 422–1263
     --seed-tree-w 由拖曳決定 · 預設 174 讓縮圖區剛好落在 Figma 的 422 */
  grid-template-columns: var(--seed-tree-w, 174px) 20px 1fr;
  /* ⚠️ 這一行是「縮圖區捲不捲得動」的關鍵。
     不寫的話這一列是 auto，高度跟著內容長 —— 影片一多，
     整欄就長到視窗外面去，#dam-grid 自己永遠沒有溢出，
     於是：右邊的灰色拖曳 bar 不會出現、滾輪捲的是整個頁面、
     滑鼠靠邊的自動捲動也完全沒反應（因為它捲的是 #dam-grid）。
     minmax(0, 1fr) = 這一列就是容器高度，不准跟著內容長。 */
  grid-template-rows: minmax(0, 1fr);
  column-gap: 0;
  row-gap: 0;
  margin-top: 30px;                  /* 229 + 30 = 259 */
  margin-left: 16px;                 /* 212 + 16 = 228 · 與工具列切齊 */
  border: none;
  background: transparent;
  /* 舊的 .dam-browser 有 overflow:hidden · 會把跨在右緣上的捲軸切掉一半
     （拉出來就是半月形）· 一定要在這裡放回 visible */
  overflow: visible;
  /* 撐到視窗底（Figma 畫到 y≈890 · 但撐滿看得到的影片比較多）
     260 = 內容區上緣 · 40 = 底部留白 */
  height: calc(100vh - 300px);
  min-height: 420px;
}

/* ---- 資料夾樹 ---- */
body.seedoes-mode .seed-body .dam-tree {
  /* ⚠️ height:100%（不是 auto）· 見上面 grid-template-rows 的說明：
     auto 的話高度跟著內容長，overflow 永遠不會發生。 */
  height: 100%;
  min-height: 0;
  padding: 0 8px 0 0;                /* 第一顆 folder icon 上緣 y=268 */
  font-family: inherit;
  border-right: none;
  background: transparent;
  overflow: auto;
}
body.seedoes-mode .seed-body .dam-tree::-webkit-scrollbar { width: 6px; }
body.seedoes-mode .seed-body .dam-tree::-webkit-scrollbar-track { background: transparent; }
body.seedoes-mode .seed-body .dam-tree::-webkit-scrollbar-thumb {
  background: #030303; border-radius: 3px;
}
body.seedoes-mode .seed-body .dam-tree::-webkit-scrollbar-button {
  display: none; width: 0; height: 0;
}
body.seedoes-mode .seed-body .dam-tree-root,
body.seedoes-mode .seed-body .dam-tree ul {
  list-style: none; margin: 0; padding: 0;
}
body.seedoes-mode .seed-body .tree-node { position: relative; display: block; }

/* 樹狀連接線 · 直線從上一層垂下來 · 最後一個節點只畫到自己中線 */
body.seedoes-mode .seed-body .tree-node::before {
  content: "";
  position: absolute;
  left: calc((var(--depth, 0) - 1) * 31px + 10px);
  top: 0; bottom: 0;
  width: 1px;
  background: #686868;
}
body.seedoes-mode .seed-body .tree-node.is-last::before { bottom: auto; height: 16px; }
/* 橫的短線 · 接到 folder icon */
body.seedoes-mode .seed-body .tree-row::before {
  content: "";
  position: absolute;
  left: calc((var(--depth, 0) - 1) * 31px + 11px);
  top: 16px;
  width: 20px; height: 1px;
  background: #686868;
}
/* 最外層沒有上一層 · 不畫線 */
body.seedoes-mode .seed-body .dam-tree-root > .tree-node::before,
body.seedoes-mode .seed-body .dam-tree-root > .tree-node > .tree-row::before {
  display: none;
}

body.seedoes-mode .seed-body .tree-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 32px;              /* Figma 手排 26–38px · 取 32 讓整棵樹誤差最小 */
  padding: 0 0 0 calc(var(--depth, 0) * 31px);
  border-radius: 0;
  background: transparent;
  color: var(--seedoes-ink);
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}
body.seedoes-mode .seed-body .tree-row:hover,
body.seedoes-mode .seed-body .tree-row.selected { background: transparent; }
body.seedoes-mode .seed-body .tree-row:not(.selected):hover .tree-label { opacity: 0.55; }
body.seedoes-mode .seed-body .tree-row.selected .tree-label { font-weight: 600; }

body.seedoes-mode .seed-body .tree-icon {
  flex: none;
  width: 21px; height: 16px;         /* SVG / PNG 原生尺寸 · 不縮放 */
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  font-size: 0;
}
body.seedoes-mode .seed-body .tree-icon-parent {
  background-image: url("/static/icons/seed-folder-parent.svg?v=2");
}
body.seedoes-mode .seed-body .tree-icon-leaf {
  background-image: url("/static/icons/seed-folder-leaf.svg?v=2");
}
body.seedoes-mode .seed-body .tree-icon.has-pending { opacity: 1; }

body.seedoes-mode .seed-body .tree-label {
  flex: 0 1 auto;
  font-size: 10px;
  line-height: 1.2;
  color: var(--seedoes-ink);
  overflow: hidden;
  text-overflow: ellipsis;
}
body.seedoes-mode .seed-body .tree-count {
  margin-left: 2px;
  font-size: 8px;
  color: var(--seedoes-ink);
}
/* 刪除鍵 · 絕對定位浮在列的右端 · 不佔寬度（不然資料夾名字會被擠掉）*/
body.seedoes-mode .seed-body .tree-actions {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding-left: 6px;
  background: var(--seedoes-canvas);
}
.seed-tree-empty {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: #8A8884;
}

/* ---- 縮圖列 ---- */
body.seedoes-mode .seed-body .dam-grid {
  height: 100%;
  min-height: 0;
  padding: 9px 17px 0 0;             /* 第一行標題上緣 y≈269 · 縮圖右緣 1245 */
  background: transparent;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;             /* 原生捲軸關掉 · 改用下面自繪的 */
}
body.seedoes-mode .seed-body .dam-grid::-webkit-scrollbar { width: 0; height: 0; }
body.seedoes-mode .seed-body .dam-rows { padding: 0; }
body.seedoes-mode .seed-body .dam-video-row {
  display: block;
  padding: 0;
  margin: 0 0 15px;
  border: none;
}
body.seedoes-mode .seed-body .dam-row-head {
  display: block;
  margin: 0 0 8px;
  height: 16px;
  line-height: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.seedoes-mode .seed-body .dam-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--seedoes-ink);
}
body.seedoes-mode .seed-body .dam-name-clickable { cursor: pointer; text-decoration: none; }
body.seedoes-mode .seed-body .dam-name-clickable:hover { opacity: 0.55; }
body.seedoes-mode .seed-body .dam-summary {
  /* 蓋掉舊 UPHiN 的 -webkit-box / 左邊色條 / 內距 */
  display: inline;
  margin: 0 0 0 14px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 10px;
  font-weight: 400;
  line-height: inherit;
  color: var(--seedoes-ink);
  white-space: nowrap;
  overflow: visible;
}
body.seedoes-mode .seed-body .dam-summary-clickable:hover {
  background: transparent;
  border-color: transparent;
}
body.seedoes-mode .seed-body .dam-summary-clickable { cursor: pointer; }
body.seedoes-mode .seed-body .dam-summary-clickable:hover { opacity: 0.55; }
body.seedoes-mode .seed-body .dam-status,
body.seedoes-mode .seed-body .dam-crumb {
  margin-left: 14px;
  font-size: 9px;
  color: #8A8884;
  white-space: nowrap;
}
body.seedoes-mode .seed-body .dam-name { white-space: nowrap; }
body.seedoes-mode .seed-body .dam-status.is-error { color: var(--error); cursor: pointer; }

body.seedoes-mode .seed-body .dam-thumbs {
  display: flex;
  gap: 6px;                          /* Figma 160 + 6 · 一排剛好 5 張 */
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
body.seedoes-mode .seed-body .dam-thumbs::-webkit-scrollbar { height: 0; }
body.seedoes-mode .seed-body .dam-thumbs.is-empty { display: none; }
body.seedoes-mode .seed-body .dam-thumb {
  flex: none;
  width: 160px; height: 90px;
  border: none;
  border-radius: 0;
  background: #FFFFFF;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s ease;
}
body.seedoes-mode .seed-body .dam-thumb:hover {
  transform: translateY(-2px);
  box-shadow: none;
  border: none;
}
body.seedoes-mode .seed-body .dam-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.dam-thumbs-loading { font-size: 10px; color: #8A8884; }
.seed-grid-empty {
  margin: 0;
  font-size: 12px;
  color: #8A8884;
}

/* ---- 資料夾欄與縮圖欄中間的拖曳把手 ----
   平常看不見（Figma 沒畫）· 滑過去才浮出一條細線 */
.seed-resizer {
  position: relative;
  cursor: col-resize;
  background: transparent;
}
.seed-resizer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: #686868;
  opacity: 0;
  transition: opacity 0.12s;
}
.seed-resizer:hover::after,
.seed-resizer.is-active::after { opacity: 1; }
body.seed-resizing,
body.seed-resizing * { cursor: col-resize !important; user-select: none !important; }

/* ---- 縮圖區的捲軸 · 自己畫的 ----
   原生 webkit 捲軸拖到最頂 / 最底時 · 圓角會被兩端的 button 區切掉 ·
   所以整條改成自己畫 · 兩端永遠是完整的圓頭。
   位置照 Figma · 6px 寬 · 置中在內容欄右緣 1263 */
.seed-scrollbar {
  position: absolute;
  top: 0; bottom: 0;
  right: -3px;
  width: 6px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.seed-scrollbar.is-active { opacity: 1; pointer-events: auto; }
.seed-scroll-thumb {
  position: absolute;
  left: 0;
  width: 6px;
  min-height: 24px;
  border-radius: 3px;
  background: #030303;
  cursor: grab;
}
.seed-scroll-thumb:active { cursor: grabbing; }
body.seed-scrolling,
body.seed-scrolling * { user-select: none !important; }


/* ---------- 系統通知 · seedoes 樣式 ----------
   一律 1px 黑框 + 網頁底色 + ink 黑字 · 成功 / 錯誤 / 警告都不換色
   （Sean 定調 · 不要紅綠黃）---------- */
body.seedoes-mode .toast {
  background: var(--seedoes-canvas);
  border: 1px solid var(--seedoes-ink);
  border-radius: 8px;
  padding: 11px 18px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--seedoes-ink);
  box-shadow: none;
}
body.seedoes-mode .toast.ok,
body.seedoes-mode .toast.error,
body.seedoes-mode .toast.warn {
  border-color: var(--seedoes-ink);
  color: var(--seedoes-ink);
  background: var(--seedoes-canvas);
}

/* =========================================================
 * seedoes v1 · 彈窗（取代瀏覽器原生的 confirm / alert）
 * 基準 · seedoes_design_handoff/01_screenshots/seedoes v1/pop up screen sample.png
 * 外框 470 × 138 · radius 8 · 1px 黑框 · 底色 canvas
 * 右下角 · ⊟ skip 15 / × no 15 / ○ yes 16 · 一律原生尺寸
 * ========================================================= */
.seedoes-dialog-back {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 不用黑色遮罩 · 用網頁底色淡化背後的內容 */
  background: rgba(238, 235, 229, 0.78);
  animation: seedoes-dialog-fade 0.15s ease;
}
@keyframes seedoes-dialog-fade { from { opacity: 0; } to { opacity: 1; } }

/* 彈窗寬度只在這裡定義一次（2026-09-14 Sean：470 太窄，改 560）。
   ⚠️ 兩種彈窗共用這個值：SEED 頁自己的 .seedoes-dialog 與通用的 #ui-modal。
      只改一個的話，同一套介面會出現兩種寬度 —— 那比兩個都窄還糟。 */
:root { --seedoes-dialog-w: 560px; }

.seedoes-dialog {
  width: var(--seedoes-dialog-w);
  min-height: 138px;
  max-width: calc(100vw - 48px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 20px 14px;
  background: var(--seedoes-canvas);
  border: 1px solid var(--seedoes-ink);
  border-radius: 8px;
  color: var(--seedoes-ink);
}
.seedoes-dialog-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 22px 0 14px;
  text-align: center;
}
.seedoes-dialog-warn {
  flex: none;
  width: 34px;
  height: 30px;
  color: var(--seedoes-ink);
}
.seedoes-dialog-warn svg { display: block; width: 34px; height: 30px; }
.seedoes-dialog-text {
  margin: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--seedoes-ink);
  white-space: pre-line;
  text-align: center;
}
.seedoes-dialog-actions {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.seedoes-dialog-btn {
  flex: none;
  padding: 0;
  border: none;
  cursor: pointer;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;             /* 原生尺寸 · 不要縮放 */
}
.seedoes-dialog-btn:hover { opacity: 0.55; }
.seedoes-dialog-btn.is-skip {
  width: 15px; height: 15px; margin-right: 22px;
  background-image: url("/static/icons/popup-skip.svg?v=1");
}
.seedoes-dialog-btn.is-no {
  width: 15px; height: 15px; margin-right: 17px;
  background-image: url("/static/icons/popup-no.svg?v=1");
}
.seedoes-dialog-btn.is-yes {
  width: 16px; height: 16px;
  background-image: url("/static/icons/popup-yes.svg?v=2");
}

/* =========================================================
 * 彈窗字體 · 一律比照 SEED 頁的 seedoes 彈窗（.seedoes-dialog-text）
 *   font-family: inherit · 15px · weight 400 · line-height 1.5 · ink
 * Sean 定調 · 彈窗裡不要粗體字。
 * 這裡處理兩個還在用舊樣式的彈窗：
 *   #ui-modal   · uiPrompt / uiConfirm / uiAlert（新專案名稱、重新命名…）
 *   .atp-popover · 加到專案的 picker
 * ========================================================= */

/* ---- #ui-modal · 真正的對話框 · 整組字體對齊 seedoes 彈窗 ---- */
body.seedoes-mode #ui-modal .ui-modal-title {
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;                  /* 原本是 600 */
  line-height: 1.5;
  color: var(--seedoes-ink);
}
body.seedoes-mode #ui-modal .ui-modal-message {
  font-family: inherit;
  font-size: 15px;                   /* 原本是 13px */
  font-weight: 400;
  line-height: 1.5;
  color: var(--seedoes-ink);
}
/* 「統一輸入框樣式」那條有 `font-size: 14px !important` · 這裡要 !important 才蓋得掉 */
body.seedoes-mode #ui-modal .ui-modal-input,
body.seedoes-mode #ui-modal input.ui-modal-input[type="text"] {
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
body.seedoes-mode #ui-modal .ui-modal-input::placeholder {
  font-weight: 400;
  color: var(--muted);
}
/* 取消 / 確定 · 改用 ✕ / ○ 兩顆 icon · 規格完全比照 SEED 頁的 seedoes 彈窗
   （.seedoes-dialog-btn · ✕ 15×15 popup-no.svg · ○ 16×16 popup-yes.svg
     · 兩顆間距 17px · hover 只降透明度）。
   按鈕裡的「取消 / 確定」文字用 font-size:0 藏掉 —— 不刪掉，
   輔助工具仍讀得到，也不用動 app.js 的 uiPrompt。
   ⚠️ 舊 CSS 用 `background:` 簡寫（button.ghost / .primary:hover），
   會把 repeat / position / size 一起重設 · 這裡四個屬性全部釘死。 */
body.seedoes-mode #ui-modal .ui-modal-actions {
  gap: 0;
  align-items: center;
}
body.seedoes-mode #ui-modal .ui-modal-actions button,
body.seedoes-mode #ui-modal .ui-modal-actions button:hover,
body.seedoes-mode #ui-modal .ui-modal-actions button.ghost,
body.seedoes-mode #ui-modal .ui-modal-actions button.ghost:hover,
body.seedoes-mode #ui-modal .ui-modal-actions button.primary,
body.seedoes-mode #ui-modal .ui-modal-actions button.primary:hover {
  flex: none;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0;
  color: transparent !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: auto !important;  /* 原生尺寸 · 不要縮放 */
  cursor: pointer;
  transition: opacity 0.15s;
}
body.seedoes-mode #ui-modal .ui-modal-actions button.ghost,
body.seedoes-mode #ui-modal .ui-modal-actions button.ghost:hover {
  width: 15px;
  height: 15px;
  margin-right: 17px;
  background-image: url("/static/icons/popup-no.svg?v=1") !important;
}
body.seedoes-mode #ui-modal .ui-modal-actions button.primary,
body.seedoes-mode #ui-modal .ui-modal-actions button.primary:hover {
  width: 16px;
  height: 16px;
  margin-right: 0;
  background-image: url("/static/icons/popup-yes.svg?v=2") !important;
}
body.seedoes-mode #ui-modal .ui-modal-actions button.ghost:hover,
body.seedoes-mode #ui-modal .ui-modal-actions button.primary:hover {
  opacity: 0.55;
}

/* ---- .atp-popover · 錨在縮圖旁的小 picker ----
   字級維持原本的（它是一個窄清單 · 塞 15px 會撐爆）· 只把粗體拿掉 */
body.seedoes-mode .atp-popover .atp-title,
body.seedoes-mode .atp-popover .atp-row .name,
body.seedoes-mode .atp-popover .atp-row .meta,
body.seedoes-mode .atp-popover .atp-row.in-project .meta,
body.seedoes-mode .atp-popover .atp-new-row button {
  font-family: inherit;
  font-weight: 400;
}

/* ---- #ui-modal 的外框 · 也換成 seedoes 彈窗的殼 ----
   比照 .seedoes-dialog / .seedoes-dialog-back：
     遮罩   · rgba(238,235,229,0.78)（網頁底色淡化 · 不用黑色遮罩、不模糊）
     卡片   · 560 寬（--seedoes-dialog-w）· min-height 138 · 米色底 · 1px ink 框 · radius 8 · 無陰影
     內距   · 卡片自己吃 0 20px 14px · body / actions 不再各自留左右內距
   只動 #ui-modal · 播放彈窗（#player-modal）維持原樣。 */
body.seedoes-mode #ui-modal .modal-backdrop {
  background: rgba(238, 235, 229, 0.78) !important;
  backdrop-filter: none;
}
body.seedoes-mode #ui-modal .modal-card.ui-modal-card {
  width: var(--seedoes-dialog-w) !important;
  max-width: calc(100vw - 48px) !important;
  min-height: 138px;
  box-sizing: border-box;
  padding: 0 20px 14px;
  background: var(--seedoes-canvas) !important;
  border: 1px solid var(--seedoes-ink) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--seedoes-ink);
}
body.seedoes-mode #ui-modal .ui-modal-body {
  flex: 1;
  padding: 22px 0 14px;
}
body.seedoes-mode #ui-modal .ui-modal-actions {
  flex: none;
  padding: 0;
  border-top: none;
}
/* 輸入框也跟著走 seedoes 的規格 · 透明底 + 1px ink 框 + radius 8 · 不要柔光陰影
   （舊的是 radius 4 + `0 0 0 3px rgba(26,26,26,0.08)` 的一圈光暈）*/
body.seedoes-mode #ui-modal .ui-modal-input,
body.seedoes-mode #ui-modal .ui-modal-input:focus {
  background: transparent !important;
  border: 1px solid var(--seedoes-ink) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* ---- 挑圖彈窗（#shot-picker-modal）· 外框與字體對齊 seedoes 彈窗 ----
   STORY 頁上會冒出來的視窗一共四種：
     seedoesConfirm（分鏡存檔滿了）· toast · #ui-modal · 這個挑圖彈窗。
   前三種都已經是 seedoes 樣式，只剩這個還是舊的白底圓角 + 陰影。 */
body.seedoes-mode #shot-picker-modal .modal-backdrop {
  background: rgba(238, 235, 229, 0.78) !important;
  backdrop-filter: none;
}
body.seedoes-mode #shot-picker-modal .modal-card.shot-picker-card {
  background: var(--seedoes-canvas) !important;
  border: 1px solid var(--seedoes-ink) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--seedoes-ink);
}
body.seedoes-mode #shot-picker-modal .modal-head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.18);
}
body.seedoes-mode #shot-picker-modal .modal-title {
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;              /* 彈窗一律不用粗體 */
  line-height: 1.5;
  color: var(--seedoes-ink);
}
body.seedoes-mode #shot-picker-modal .modal-sub {
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}
body.seedoes-mode #shot-picker-modal .modal-x {
  color: var(--seedoes-ink);
  font-size: 20px;
  opacity: 0.65;
  transition: opacity 0.15s;
}
body.seedoes-mode #shot-picker-modal .modal-x:hover { color: var(--seedoes-ink); opacity: 1; }
body.seedoes-mode #shot-picker-modal .modal-body { padding: 14px 20px; }
/* 搜尋框 · 透明底 + 1px ink + radius 8（同 Login / SEED 的輸入框）*/
body.seedoes-mode #shot-picker-modal .shot-picker-search input,
body.seedoes-mode #shot-picker-modal input#shot-picker-query[type="text"] {
  background: transparent !important;
  border: 1px solid var(--seedoes-ink) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--seedoes-ink) !important;
}
/* 「搜尋」是動作鍵、不是確認鍵 · 保留文字 · 只換成 seedoes 的外觀 */
body.seedoes-mode #shot-picker-modal #shot-picker-go,
body.seedoes-mode #shot-picker-modal #shot-picker-go:hover {
  padding: 0 18px !important;
  border: 1px solid var(--seedoes-ink) !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--seedoes-ink) !important;
}
body.seedoes-mode #shot-picker-modal #shot-picker-go:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.seedoes-mode #shot-picker-modal .shot-picker-status,
body.seedoes-mode #shot-picker-modal .modal-foot .hint {
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}
body.seedoes-mode #shot-picker-modal .modal-foot {
  padding: 14px 20px 16px;
  border-top: 1px solid rgba(26, 26, 26, 0.18);
  align-items: center;
}
/* 底部的「關閉」換成 ✕ · 跟 seedoes 彈窗的動作列一致。
   ⚠️ 背景四個屬性要 !important —— `body.seedoes-mode button.ghost` 那條
   `background: transparent !important` 會把 icon 洗掉（播放彈窗、#ui-modal
   都踩過同一條）。hover 態也要一起寫。 */
body.seedoes-mode #shot-picker-modal .modal-foot button[data-close-picker],
body.seedoes-mode #shot-picker-modal .modal-foot button[data-close-picker]:hover {
  width: 15px;
  height: 15px;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 0 !important;
  color: transparent !important;
  background-color: transparent !important;
  background-image: url("/static/icons/popup-no.svg?v=1") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: auto !important;
  cursor: pointer;
  transition: opacity 0.15s;
}
body.seedoes-mode #shot-picker-modal .modal-foot button[data-close-picker]:hover { opacity: 0.55; }
/* 挑圖的縮圖 · 去邊去圓角 · 跟 QUEST / EVENT 的卡片一致 */
body.seedoes-mode #shot-picker-modal .shot-picker-tile {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.seedoes-mode #shot-picker-modal .shot-picker-tile:hover {
  transform: translateY(-2px);
  border: none !important;
  box-shadow: none !important;
}
body.seedoes-mode #shot-picker-modal .shot-picker-tile img { border-radius: 0; }
body.seedoes-mode #shot-picker-modal .shot-picker-tile-meta {
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}
body.seedoes-mode #shot-picker-modal .shot-picker-tile-score { display: none; }

/* 列印用的抬頭與整體描述 · 螢幕上不出現（@media print 裡才放出來）*/
body.seedoes-mode .story-print-head,
body.seedoes-mode .story-print-overall { display: none; }

/* ---- 網站頁尾的法律連結（只有雲端首頁有）----------------------
   ⚠️ 範圍限定 body.seedoes-cloud —— style.css 是原型／雲端／app 三邊共用，
      不掛範圍的話原型跟 app 視窗也會冒出這一條。
   ⚠️ 這一條存在的理由是「找得到」：法律文件不能只有知道網址的人進得去，
      Paddle 審核會檢查。 */
body.seedoes-cloud .site-legal {
  display: flex; justify-content: center; align-items: center;
  gap: 20px; flex-wrap: wrap;
  padding: 26px 20px 30px; margin-top: 40px;
  border-top: 0.5px solid var(--border-strong);
  font-size: 12px; color: var(--muted);
}
body.seedoes-cloud .site-legal a {
  color: var(--muted); text-decoration: none;
}
body.seedoes-cloud .site-legal a:hover { color: var(--seedoes-ink); }
body.seedoes-cloud .site-legal-co { opacity: .7; }