/* IG 存檔檢視器 — 共用樣式（index.html + 各篇 view.html 共用） */

:root {
  --bg: #f7f5f1;
  --bg-elevated: #ffffff;
  --text: #2a2723;
  --text-soft: #8a8378;
  --border: #e6e1d8;
  --accent: #c8552c;
  --accent-soft: #f0d9cd;
  --disabled-bg: #efece6;
  --overlay-bg: rgba(20, 18, 15, 0.9);
  --star-fill: #d98c1f;
  --shadow: rgba(20, 15, 10, 0.1);
  --accent-text: #ffffff;
}

[data-theme="dark"] {
  --bg: #181613;
  --bg-elevated: #221f1b;
  --text: #ece6dc;
  --text-soft: #978f81;
  --border: #38332c;
  --accent: #e58a5e;
  --accent-soft: #3a2a1f;
  --disabled-bg: #262320;
  --overlay-bg: rgba(0, 0, 0, 0.92);
  --star-fill: #f0b84a;
  --shadow: rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 24px 100px 96px;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "PingFang TC", "Noto Sans TC", "Helvetica Neue", Arial, sans-serif;
  transition: background 0.15s ease, color 0.15s ease;
}

a { color: inherit; }

/* ---------- top bar (both pages) — Feature 31: sticky on scroll ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  margin: 0 -24px 20px;
  padding: 14px 24px;
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.topbar.scrolled {
  box-shadow: 0 2px 10px var(--shadow);
  border-bottom-color: var(--border);
}
.topbar.hidden { display: none; }
.topbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.back {
  font-size: 13px;
  color: var(--text-soft);
  text-decoration: none;
}
.back:hover { color: var(--accent); }

.icon-btn {
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.icon-btn:hover { border-color: var(--accent); }
.icon-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* Feature 41: hide the theme-toggle button, keep dark-mode logic running */
[data-role="theme-toggle"] { display: none; }

/* ---------- index: header + stats ---------- */
header.page-header {
  max-width: 1100px;
  margin: 0 auto 18px;
}
h1 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.title-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
}
.sub {
  color: var(--text-soft);
  font-size: 14px;
}

.stats-bar {
  max-width: 1100px;
  margin: 0 auto 20px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-soft);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
}
.stats-bar strong { color: var(--text); font-weight: 700; }

/* ---------- index: filter bar ---------- */
.filter-bar {
  max-width: 1100px;
  margin: 0 auto 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.filter-bar input[type="text"],
.filter-bar select {
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
}
.filter-bar input[type="text"] { width: 180px; }

/* Feature 32: highlight actively-chosen (non-default) filters/sort */
.filter-bar select.active {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.filter-bar label.checkbox.active {
  color: var(--accent);
  font-weight: 700;
}
.filter-bar label.checkbox.active input[type="checkbox"] {
  accent-color: var(--accent);
}

.filter-bar label.checkbox {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-soft);
}
.filter-bar .result-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-soft);
}
.filter-bar .creators-link { font-size: 12px; color: var(--text-soft); text-decoration: none; }
.filter-bar .creators-link:hover { color: var(--accent); }

/* ---------- grid / cards ---------- */
.grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}
.grid.grid-list {
  grid-template-columns: 1fr;
  gap: 10px;
}

.card {
  display: block;
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px var(--shadow); padding-bottom: 2px; margin-bottom: -2px; }
/* 上浮 2px 的同時往下長 2px（padding 補、margin 抵銷不推擠版面）：底邊留在原位，滑鼠停在最底邊時不會移出又掉回、反覆抖動 */
.card.disabled { cursor: default; opacity: 0.55; background: var(--disabled-bg); }
.card.hidden { display: none; }

.grid-list .card { display: flex; flex-direction: row; align-items: stretch; }
.grid-list .cover-wrap { width: 96px; aspect-ratio: auto; flex-shrink: 0; }
.grid-list .card-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 8px 14px; }
.grid-list .card-actions { margin-bottom: 4px; }

.cover-wrap {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--disabled-bg);
  position: relative;
}
.cover-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }


.read-dot {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.25);
  z-index: 2;
}
.read-dot.is-read { background: var(--accent); border-color: var(--accent); }

.card-body { padding: 10px 14px 14px; }
.card-actions { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--text); margin-bottom: 6px; }
.card-actions .act { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: default; line-height: 1; }
.card-actions button.act { cursor: pointer; }
.card-actions button.act:hover { color: var(--accent); }
.card-actions svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.card-actions .fav { margin-left: auto; }
.card-actions .fav.active { color: var(--star-fill); }
.card-actions .fav.active svg { fill: var(--star-fill); }
.card-title { font-size: 13px; font-weight: 400; line-height: 1.45; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-title b { font-weight: 700; margin-right: 5px; }

.badge { font-size: 10px; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-weight: 600; }
.badge.pending { background: var(--border); color: var(--text-soft); }

/* ---------- view page ---------- */
.wrap { max-width: 880px; margin: 0 auto; }

.meta-line {
  font-size: 13px;
  color: var(--text-soft);
  margin-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
}
.meta-line .who { display: inline-flex; align-items: center; gap: 5px; }
.meta-line .who svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.meta-line .who a { color: var(--text); font-weight: 600; text-decoration: none; }
.meta-line .who a:hover { color: var(--accent); text-decoration: underline; }

.prevnext {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 26px;
  font-size: 13px;
}
.prevnext a, .prevnext span {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  background: var(--bg-elevated);
}
.prevnext a:hover { border-color: var(--accent); color: var(--accent); }
.prevnext span.disabled { color: var(--text-soft); opacity: 0.5; }
.prevnext .next { text-align: right; }

details.collapsible {
  max-width: 880px;
  margin: 0 auto 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
}
details.collapsible summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  list-style: none;
}
details.collapsible summary::-webkit-details-marker { display: none; }
details.collapsible summary::before { content: "▸ "; }
details.collapsible[open] summary::before { content: "▾ "; }
details.collapsible .content { margin-top: 10px; font-size: 14px; line-height: 1.8; }
details.collapsible blockquote { margin: 0 0 10px; padding-left: 12px; border-left: 3px solid var(--border); color: var(--text-soft); }

.row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 20px;
}
.row:last-child { border-bottom: none; }

/* ---------- Feature 33: swipeable page carousel ---------- */
/* 輪播（2026-10-12 整併）：圖片＋原文欄整體寬度＝視窗扣兩側各 50px、上限 880px，箭頭落在左右留白區；
   文字欄高度跟圖一樣、欄內捲動；<700px 隱藏箭頭、區塊全寬 */
.carousel-wrap {
  position: relative;
  max-width: 880px;
  width: calc(100% - 100px);
  margin: 0 auto 16px;
  padding: 0 0 4px;
}
.carousel .row { align-items: stretch; padding-left: 0; padding-right: 0; padding-bottom: 8px; }
.carousel .text-col { position: relative; min-height: 0; }
.carousel .text-scroll { position: absolute; inset: 0; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.carousel .img-col img, .carousel .video-col video { max-height: 70vh; width: auto; max-width: 320px; }
/* 圖被 70vh 縮窄時，欄寬（含下方日期列）跟著媒體收，不留右側空白 */
@media (min-width: 701px) { .carousel .img-col { width: min-content; min-width: 160px; } }
.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel .row {
  flex: 0 0 100%;
  scroll-snap-align: start;
  border-bottom: none;
  padding: 8px 4px 22px;
}

.carousel-arrow {
  position: absolute;
  top: calc(50% - 22px);
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.carousel-arrow.prev { left: -46px; }
.carousel-arrow.next { right: -46px; }
.carousel-arrow:hover { border-color: var(--accent); color: var(--accent); }
.carousel-arrow:disabled { opacity: 0.3; cursor: default; }
.carousel-arrow:disabled:hover { border-color: var(--border); color: var(--text); }

.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 10px 0 4px;
}
.carousel-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: width 0.15s ease, background 0.15s ease, border-radius 0.15s ease;
}
.carousel-dots button.active {
  width: 18px;
  border-radius: 4px;
  background: var(--accent);
}
.img-col { width: 320px; flex-shrink: 0; }
.img-col img { width: 320px; height: auto; display: block; border-radius: 6px; }
.img-col img.zoomable { cursor: zoom-in; }
.page-no { font-size: 11px; color: var(--text-soft); margin: 6px 2px 0; display: flex; justify-content: space-between; align-items: center; }

.text-col { flex: 1; min-width: 0; padding-top: 4px; }
.text-block { margin: 0 0 12px; line-height: 1.7; }
.text-block p { margin: 0 0 4px; }
.label-row { display: flex; align-items: center; justify-content: space-between; margin: 0 0 4px; }
.label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent); }
.copy-btn {
  border: none;
  background: none;
  color: var(--text-soft);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
}
.copy-btn:hover { color: var(--accent); }
.label-tools { display: inline-flex; align-items: center; gap: 10px; }
/* 時間戳記開關：開＝強調色（跟按鈕同色、隨外觀設定變），圓鈕在右；關＝停用灰，圓鈕在左 */
.ts-switch { position: relative; display: inline-flex; align-items: center; width: 44px; height: 22px; padding: 0; border: none; border-radius: 999px; background: var(--disabled-bg); cursor: pointer; transition: background .15s; }
.ts-switch.on { background: var(--accent); }
.ts-switch .ts-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-text); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.ts-switch.on .ts-knob { left: 24px; }
.ts-switch .ts-txt { position: absolute; top: 0; bottom: 0; display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 800; letter-spacing: .02em; color: var(--text-soft); right: 5px; }
.ts-switch.on .ts-txt { color: var(--accent-text); right: auto; left: 5px; }
.ts-switch .ts-txt svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
body.hide-ts .ts { display: none; }
.ts { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.orig { font-size: 15px; }
.trans { font-size: 15px; color: var(--text-soft); }

.note-box {
  max-width: 880px;
  margin: 30px auto 0;
}
.note-box label { display: block; font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.note-box textarea {
  width: 100%;
  min-height: 70px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}

/* ---------- lightbox ---------- */
.ig-lightbox {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 1000;
  padding: 24px;
}
.ig-lightbox.open { opacity: 1; pointer-events: auto; }
.ig-lightbox img { max-width: 100%; max-height: 100%; border-radius: 4px; cursor: zoom-out; }

/* ---------- quick jump dots ---------- */
.quick-jump {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 50;
}
.quick-jump a {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-size: 10px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-jump a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- back to top ---------- */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 60;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ---------- responsive ---------- */
@media (max-width: 700px) {
  .row { flex-direction: column; gap: 12px; }
  .img-col, .img-col img { width: 100%; }
  .quick-jump { display: none; }
  .filter-bar input[type="text"] { width: 100%; }
  .carousel-arrow { display: none; }
  .carousel-wrap { width: 100%; }
  .carousel .text-col { min-height: 320px; }
  .carousel .img-col img, .carousel .video-col video { max-width: 100%; }
}

/* ======================================================================
   以下是多人共用版（pb_public）新增的樣式，前面整段沿用 local 檢視器的 viewer.css
   ====================================================================== */

.hidden { display: none !important; }
.topbar-inner { max-width: 1100px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; text-decoration: none; }
.brand img { width: 22px; height: 22px; border-radius: 6px; }
.nav-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav-links a { font-size: 13px; color: var(--text-soft); text-decoration: none; padding: 6px 10px; border-radius: 999px; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); background: var(--accent-soft); }
.nav-links .count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 10px; text-align: center; line-height: 18px; }
.user-chip { font-size: 12px; color: var(--text-soft); }

.submit-bar {
  max-width: 1100px; margin: 0 auto 18px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.submit-bar input[type="text"] {
  flex: 1; min-width: 240px; font-size: 14px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text);
}
.submit-bar .hint { width: 100%; font-size: 12px; color: var(--text-soft); min-height: 16px; }
.submit-bar .hint.error { color: var(--accent); }
.btn-primary {
  border: none; background: var(--accent); color: var(--accent-text); font-size: 13px; font-weight: 600;
  padding: 10px 16px; border-radius: 10px; cursor: pointer; white-space: nowrap;
}
.btn-primary:disabled { opacity: 0.5; cursor: default; }

/* 登入 */
.login-box {
  max-width: 360px; margin: 80px auto; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 14px; padding: 28px 26px;
}
.login-box h1 { font-size: 20px; margin-bottom: 18px; }
.login-box label { display: block; font-size: 12px; color: var(--text-soft); margin: 10px 0 4px; }
.login-box input { width: 100%; font-size: 14px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.login-box .btn-primary { width: 100%; margin-top: 18px; }
.login-box .error { color: var(--accent); font-size: 12px; margin-top: 10px; min-height: 16px; }
.login-box .sub { margin-top: 14px; }

/* 卡片補充 */
.cover-wrap .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; pointer-events: none; }
.cover-wrap .no-img { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-soft); font-size: 12px; }

/* 內頁補充 */
.video-col video { width: 320px; max-width: 100%; border-radius: 6px; display: block; background: #000; }
.caption-text { font-size: 15px; line-height: 1.75; margin: 0 0 10px; }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.savers-line { font-size: 12px; color: var(--text-soft); margin: 6px 0 0; }
.collection-picker { max-width: 880px; margin: 18px auto 0; font-size: 13px; }
.collection-picker .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.chip { border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); font-size: 12px; padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.chip.add { color: var(--text-soft); border-style: dashed; }
.note-box .saved { font-size: 11px; color: var(--text-soft); margin-top: 4px; min-height: 14px; }

/* 我的投遞 */
.inbox-list { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.inbox-item { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.inbox-item .thumb { width: 88px; height: 88px; border-radius: 6px; overflow: hidden; background: var(--disabled-bg); flex-shrink: 0; display: block; }
.inbox-item .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inbox-item .main { flex: 1; min-width: 240px; }
.inbox-item .url { font-size: 13px; word-break: break-all; }
.inbox-item .url a { color: var(--text); text-decoration: none; }
.inbox-item .url a:hover { color: var(--accent); }
.inbox-item .meta { font-size: 11px; color: var(--text-soft); margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }
.inbox-item .err { font-size: 12px; color: var(--accent); margin-top: 6px; white-space: pre-wrap; word-break: break-word; }
.status { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.status.queued { background: var(--border); color: var(--text-soft); }
.status.running { background: #2f5c8f; color: #fff; }
.status.done { background: #2e7d4f; color: #fff; }
.status.duplicate { background: #6b5b95; color: #fff; }
.status.failed { background: var(--accent); color: var(--accent-text); }
.empty { max-width: 1100px; margin: 40px auto; text-align: center; color: var(--text-soft); font-size: 14px; }

/* 分類管理 */
.collections-panel { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.collection-row { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.collection-row .name { flex: 1; font-size: 14px; font-weight: 600; min-width: 160px; }
.collection-row .name a { text-decoration: none; color: var(--text); }
.collection-row .name a:hover { color: var(--accent); }
.collection-row .n { font-size: 12px; color: var(--text-soft); }
.collections-panel form { display: flex; gap: 8px; }
.collections-panel form input { flex: 1; font-size: 13px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--text); color: var(--bg); font-size: 13px; padding: 10px 16px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 2000; }
.toast.show { opacity: 1; }
.loading { max-width: 1100px; margin: 40px auto; color: var(--text-soft); font-size: 13px; text-align: center; }

/* 類型篩選：圖示分段按鈕 */
.type-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-elevated); }
.type-seg button { border: none; background: none; color: var(--text-soft); font-size: 13px; padding: 7px 11px; cursor: pointer; border-right: 1px solid var(--border); line-height: 1.2; }
.type-seg button:last-child { border-right: none; }
.type-seg button:hover { color: var(--accent); }
.type-seg button.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
/* 平台篩選（2026-10-19）：單色圖示跟著按鈕文字色，選中變強調色 */
.pf-seg button { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; }
.pf-seg .pf-ico { width: 15px; height: 15px; display: block; }

/* 我的投遞：標題與概要、編輯模式 */
.inbox-item .title { font-size: 15px; font-weight: 600; line-height: 1.3; }
.inbox-item .title a { color: var(--text); text-decoration: none; }
.inbox-item .title a:hover { color: var(--accent); }
.inbox-item .brief { font-size: 12px; color: var(--text-soft); line-height: 1.5; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inbox-item.picked { border-color: var(--accent); background: var(--accent-soft); }
.inbox-item .pick { display: flex; align-items: center; }
.inbox-item .pick input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.inbox-item .pick.disabled { opacity: 0.3; }
.inbox-toolbar { max-width: 1100px; margin: 0 auto 10px; display: flex; align-items: center; gap: 10px; }
.edit-panel { max-width: 1100px; margin: 0 auto 14px; background: var(--bg-elevated); border: 1px solid var(--accent); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.edit-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.edit-row .label { min-width: 56px; }
.private-tag { position: absolute; left: 10px; bottom: 10px; z-index: 2; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,0.6); color: #fff; }
.private-tag.inline { position: static; background: var(--border); color: var(--text-soft); margin-left: 6px; }
.card { position: relative; }
.card .private-tag { bottom: auto; top: 10px; left: auto; right: 10px; }

/* AI 分類建議 */
.sugg { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sugg-label { font-size: 11px; font-weight: 700; color: var(--accent); margin-right: 2px; }
.sugg-chip { display: inline-flex; align-items: center; gap: 4px; }
.sugg-chip input { accent-color: var(--accent); margin: 0; }
.btn-primary.small { padding: 5px 11px; font-size: 12px; border-radius: 999px; }



/* 影片先放封面，按了才載入 */
.video-poster { position: relative; width: 320px; max-width: 100%; border-radius: 6px; overflow: hidden; background: #000; cursor: pointer; }
.video-poster img { width: 100%; height: auto; display: block; max-height: 70vh; object-fit: contain; }
.video-poster .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; pointer-events: none; }
/* 輪播裡封面圖會被 70vh 高度上限縮窄，框要跟著圖收，不然右側露黑底 */
.carousel .video-poster { width: fit-content; }
.video-poster:hover .play { background: var(--accent); }
.video-poster .no-img { width: 320px; max-width: 100%; height: 400px; display: flex; align-items: center; justify-content: center; color: var(--text-soft); }


/* 我的設定 */
.settings { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.set-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.set-card h2 { font-size: 14px; font-weight: 700; color: var(--accent); margin: 0 0 12px; }
.set-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; font-size: 14px; }
.set-row:last-child { margin-bottom: 0; }
.set-row label { min-width: 84px; font-size: 12px; color: var(--text-soft); }
.set-row input { font-size: 13px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); min-width: 160px; }
.set-hint { font-size: 12px; color: var(--accent); min-height: 16px; margin-top: 6px; }

/* 創作者頁 */
.filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 13px; cursor: pointer; white-space: nowrap; }
.filter-chip b { font-weight: 700; opacity: .8; }
.filter-chip:hover b { opacity: 1; }
.creator-wrap { max-width: 1100px; margin: 0 auto; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.creator-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.creator-table th, .creator-table td { padding: 10px 18px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; width: 1%; }
.creator-table th.left, .creator-table td.left { text-align: left; width: auto; }
.creator-table th { font-size: 12px; font-weight: 600; color: var(--text-soft); cursor: pointer; user-select: none; background: var(--bg); }
.creator-table th:hover, .creator-table th.on { color: var(--text); }
.creator-table th .arrow { margin-left: 4px; color: var(--accent); }
.creator-table tbody tr:last-child td { border-bottom: 0; }
.creator-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.creator-table td a { color: var(--text); text-decoration: none; font-weight: 600; }
.creator-table td a:hover { color: var(--accent); }
.creator-table .soft { color: var(--text-soft); font-size: 12px; }
@media (max-width: 640px) { .creator-table th, .creator-table td { padding: 8px 8px; } }
.creator-filters { justify-content: flex-start; }

/* 卡片滑入浮層（學 Pinterest：直接覆蓋一層，無過場） */
.hover-layer { display: none; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 3; }
@media (hover: hover) {
  .grid:not(.grid-list) .card:hover .hover-layer { display: block; }
  .grid:not(.grid-list) .card:hover .read-dot,
  .grid:not(.grid-list) .card:hover .private-tag,
  .grid:not(.grid-list) .card:hover .play { display: none; }
}
.hl-top, .hl-bottom { position: absolute; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hl-top { top: 10px; }
.hl-bottom { bottom: 10px; }
.hl-col { appearance: none; -webkit-appearance: none; flex: 1; min-width: 0; max-width: 62%; border: 0; background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 4px center / 16px 16px; color: #fff; font: inherit; font-size: 14px; font-weight: 700; padding: 6px 24px 6px 6px; cursor: pointer; text-shadow: 0 1px 3px rgba(0,0,0,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-col { border-radius: 999px; }
.hl-col:hover { background-color: rgba(255, 255, 255, 0.22); }
.hl-col option { color: #111; background: #fff; font-weight: 400; text-shadow: none; }
.hl-save { border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-text); font: inherit; font-size: 14px; font-weight: 700; padding: 9px 16px; cursor: pointer; white-space: nowrap; }
.hl-save:hover { filter: brightness(0.85); }
.hl-save.active { background: #111; }
.hl-save.active:hover { background: #333; }
.hl-save:disabled { opacity: 0.6; cursor: default; }
.hl-pill { border: 0; border-radius: 999px; background: #fff; color: #111; font: inherit; font-size: 13px; font-weight: 600; padding: 8px 12px; cursor: pointer; white-space: nowrap; }
.hl-pill:hover, .hl-round:hover { background: #e2e2e2; }
.hl-round { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #fff; color: #111; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.hl-round svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 內頁重點：標題下一句 */
.takeaway { font-size: 15px; color: var(--text); margin: -2px 0 8px; line-height: 1.5; }

/* 兩欄：左欄 1/6 投遞者／個人檔，右欄內容 */
.two-col { max-width: 1100px; margin: 0 auto; display: flex; gap: 24px; align-items: flex-start; }
.two-col .side { flex: 0 0 16.6667%; min-width: 150px; }
.two-col .main-col { flex: 1; min-width: 0; }
.two-col .main-col .grid, .two-col .main-col .inbox-list, .two-col .main-col .submit-bar, .two-col .main-col .inbox-toolbar, .two-col .main-col .edit-panel, .two-col .main-col .empty { max-width: none; }
.side-title { font-size: 12px; font-weight: 600; color: var(--text-soft); margin: 4px 0 8px; }
.sub-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sub-list a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 13px; }
.sub-list a:hover { background: var(--accent-soft); color: var(--accent); }
.sub-list .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sub-list .n { color: var(--text-soft); font-size: 12px; }
.avatar { border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; flex-shrink: 0; }
.profile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.profile .pname { font-size: 16px; font-weight: 700; margin-top: 4px; }
.profile .plabel { font-size: 12px; color: var(--text-soft); margin-top: 8px; }
.board-list { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 2px; }
.board-list li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; font-size: 13px; }
.board-list li.active { background: var(--accent-soft); }
.board-list li a { flex: 1; min-width: 0; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list li a:hover { color: var(--accent); }
.board-list .n { color: var(--text-soft); font-size: 12px; white-space: nowrap; }
.side .back { display: inline-block; font-size: 13px; color: var(--text-soft); text-decoration: none; margin-bottom: 10px; }
.side .back:hover { color: var(--accent); }
.plus-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-text); font-size: 22px; line-height: 1; cursor: pointer; }
.plus-btn:hover { filter: brightness(0.85); }
.board-pick { font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--accent); background: var(--bg-elevated); color: var(--text); }
@media (max-width: 700px) { .two-col { flex-direction: column; } .two-col .side { flex: none; width: 100%; } }
.board-list .lock { font-size: 11px; margin-left: 5px; opacity: .75; }
.card .card-pick { position: absolute; top: 8px; left: 8px; z-index: 4; display: flex; align-items: center; background: rgba(255,255,255,0.9); border-radius: 6px; padding: 3px; }
.card .card-pick input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; margin: 0; pointer-events: none; }
.card .card-pick { cursor: pointer; }
.card.picked { outline: 3px solid var(--accent); }
.inbox-item .in-board { color: var(--accent); }

/* ---------- Pinterest 式左欄＋頂部搜尋（2026-10-11） ---------- */
.rail { position: fixed; left: 0; top: 0; bottom: 0; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0; background: var(--bg); border-right: 1px solid var(--border); z-index: 120; }
.rail.hidden { display: none; }
.rail a { position: relative; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--text); text-decoration: none; }
.rail a svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rail a:hover { background: var(--accent-soft); }
.rail a.active { background: var(--text); color: var(--bg); }
.rail a.active svg circle[fill] { fill: var(--text); }
.rail .rail-logo { margin-bottom: 10px; }
.rail .rail-logo img { width: 28px; height: 28px; border-radius: 8px; }
.rail .rail-logo:hover { background: none; }
.rail a[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 58px; top: 50%; transform: translateY(-50%); background: var(--text); color: var(--bg); font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 130; }
.rail .count { position: absolute; top: 6px; right: 6px; background: var(--accent); color: var(--accent-text); font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.rail .count.hidden { display: none; }
.search-wrap { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 999px; padding: 0 16px; height: 44px; }
.search-wrap:focus-within { border-color: var(--accent); }
.search-wrap svg { width: 20px; height: 20px; fill: none; stroke: var(--text-soft); stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
.search-wrap input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--text); outline: none; }
.search-wrap input::-webkit-search-cancel-button { -webkit-appearance: none; }
.user-menu { position: relative; }
.user-menu-btn { display: flex; align-items: center; gap: 4px; background: none; border: 0; padding: 4px; border-radius: 999px; cursor: pointer; color: var(--text-soft); }
.user-menu-btn:hover { background: var(--accent-soft); }
.user-menu-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.user-dropdown { position: absolute; right: 0; top: 48px; min-width: 180px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px var(--shadow); padding: 6px; display: flex; flex-direction: column; z-index: 130; }
.user-dropdown.hidden { display: none; }
.user-dropdown .user-name { font-size: 13px; font-weight: 700; padding: 8px 10px 6px; color: var(--text); }
.user-dropdown .menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; font: inherit; font-size: 13px; color: var(--text); padding: 8px 10px; border-radius: 8px; cursor: pointer; text-decoration: none; box-sizing: border-box; }
.user-dropdown .menu-item:hover { background: var(--accent-soft); }
.user-dropdown .menu-item.hidden { display: none; }
body.no-auth { padding-left: 24px; padding-top: 32px; }
@media (max-width: 700px) {
  body { padding: 0 16px 90px 16px; }
  .rail { top: auto; bottom: 0; width: 100%; height: 60px; flex-direction: row; justify-content: space-around; padding: 0; border-right: 0; border-top: 1px solid var(--border); }
  .rail .rail-logo { display: none; }
  .rail a { width: 44px; height: 44px; }
  .rail a[data-tip]:hover::after { display: none; }
  .topbar { margin: 0 -16px 16px; padding: 10px 16px; }
}
.stats-bar .stat-link { color: inherit; text-decoration: none; }
.stats-bar .stat-link:hover { color: var(--accent); }
.board-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.board-chip { font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 3px 10px; text-decoration: none; }
.board-chip:hover { background: var(--accent); color: var(--accent-text); }
.collection-row .drag-handle { cursor: grab; color: var(--text-soft); font-size: 14px; letter-spacing: -2px; user-select: none; padding: 0 2px; }
.collection-row.dragging { opacity: 0.4; }
.collection-row.drop-before { box-shadow: 0 -3px 0 0 var(--accent); }
.collection-row.drop-after { box-shadow: 0 3px 0 0 var(--accent); }
h1 .vis-icon { font-size: 18px; margin-left: 4px; opacity: .8; cursor: default; }
.collection-row .vis-btn { font-size: 15px; padding: 4px 10px; }

/* 設定頁：外觀刻度軸 */
.slider-group { margin: 6px 0 12px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; }
.slider-title { font-size: 12px; font-weight: 700; color: var(--text-soft); margin-bottom: 6px; }
.slider-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.slider-row:last-child { margin-bottom: 0; }
.slider-row label { min-width: 48px; font-size: 12px; color: var(--text-soft); }
.slider-row .val { min-width: 28px; text-align: right; font-size: 12px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.slider-row input[type="range"] { flex: 1; min-width: 160px; height: 10px; border-radius: 999px; -webkit-appearance: none; appearance: none; border: 1px solid var(--border); background: linear-gradient(90deg, #000, #fff); padding: 0; }
.slider-row input[type="range"].hue { background: linear-gradient(90deg, hsl(0 60% 50%), hsl(60 60% 50%), hsl(120 60% 50%), hsl(180 60% 50%), hsl(240 60% 50%), hsl(300 60% 50%), hsl(360 60% 50%)); }
.slider-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-elevated); border: 2px solid var(--text); cursor: grab; box-shadow: 0 1px 4px var(--shadow); }
.slider-row input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--bg-elevated); border: 2px solid var(--text); cursor: grab; }
.mono-icon { width: 1.1em; height: 1.1em; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: inline-block; }
h1 .vis-icon { opacity: .6; }
.collection-row .vis-btn .mono-icon { width: 16px; height: 16px; vertical-align: -3px; }
.board-list .lock .mono-icon { width: 12px; height: 12px; vertical-align: -1px; }
.slider-row input[type="range"].steps { background: repeating-linear-gradient(90deg, var(--border) 0 calc(10% - 2px), var(--text-soft) calc(10% - 2px) 10%); }
.rgb-row { display: flex; gap: 10px; }
.rgb-row .slider-row { flex: 1; min-width: 0; margin-bottom: 0; }
.rgb-row .slider-row label { min-width: 14px; }
.rgb-row .slider-row input[type="range"] { min-width: 0; }
.slider-row input[type="range"].r { background: linear-gradient(90deg, #000, #f00); }
.slider-row input[type="range"].g { background: linear-gradient(90deg, #000, #0f0); }
.slider-row input[type="range"].b { background: linear-gradient(90deg, #000, #00f); }
.who-link { color: var(--text); font-weight: 600; text-decoration: none; }
.who-link:hover { color: var(--accent); text-decoration: underline; }


/* 投遞頁分頁（我的／別人的） */
.page-tabs { max-width: 1100px; margin: -6px auto 14px; display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.page-tabs a { padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--text-soft); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.page-tabs a:hover { color: var(--text); }
.page-tabs a { white-space: nowrap; }
@media (max-width: 700px) { .page-tabs a { padding: 8px 10px; } }
.page-tabs .count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 11px; text-align: center; line-height: 18px; }
.page-tabs .count.hidden { display: none; }
.page-tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }
.inbox-item .private-note { color: var(--text-soft); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.tab-note { max-width: 1100px; margin: -4px auto 14px; font-size: 13px; line-height: 1.6; color: var(--text-soft); }
.board-chip.add { background: none; border: 1px dashed var(--accent); color: var(--accent); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; line-height: 1; padding: 2px 8px; }
.board-chip.add:hover { background: var(--accent-soft); }
.board-pick.small { font-size: 12px; padding: 3px 6px; }
.sub-list li.active a { background: var(--accent-soft); color: var(--accent); }
.board-list.filters li:not(.manage-pill):nth-last-child(1 of :not(.manage-pill)) { border-top: 1px dashed var(--border); margin-top: 4px; padding-top: 7px; }
.who-select { font-size: 13px; color: var(--text-soft); display: inline-flex; align-items: center; gap: 6px; }
.who-select select { font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); }
.inbox-list .inbox-item[data-id] { cursor: grab; }
.inbox-item.dragging { outline: 2px dashed var(--border); outline-offset: -2px; }
body.dragging-post .board-list.filters li { outline: 1px dashed var(--border); outline-offset: -1px; }
.board-list.filters li.drop-target { background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: -2px; }
body.dragging-post { user-select: none; cursor: grabbing; }
.drag-ghost { position: fixed; z-index: 500; pointer-events: none; width: 56px; height: 56px; border-radius: 10px; overflow: visible; box-shadow: 0 6px 18px var(--shadow); transform: translate(-50%, -50%) rotate(-3deg); }
.drag-ghost img, .drag-ghost .ph { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; display: block; background: var(--disabled-bg); border: 2px solid var(--bg-elevated); }
.drag-ghost .n { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.inbox-list .inbox-item[data-id] img, .inbox-list .inbox-item[data-id] a { -webkit-user-drag: none; }
/* 兩欄頁的左欄隨捲動固定（頂部搜尋列高約 72px） */
/* 側欄固定在畫面上（2026-10-19 使用者裁決：要固定、但不要看到捲軸）；內容超過畫面高時仍可用滾輪捲，捲軸隱藏 */
.two-col .side { position: sticky; top: 84px; align-self: flex-start; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: none; }
.two-col .side::-webkit-scrollbar { display: none; }
@media (max-width: 700px) { .two-col .side { position: static; max-height: none; } }
.board-chip.rm { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }
.board-chip.rm:hover { background: var(--accent); color: var(--accent-text); }
.board-chip .chip-x { font-weight: 700; }
.board-chip.tool { background: none; border: 1px solid var(--border); color: var(--text-soft); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; line-height: 1; padding: 2px 8px; }
.board-chip.tool .mono-icon { width: 13px; height: 13px; vertical-align: -2px; }
.board-chip.tool:hover, .board-chip.tool.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.toast .toast-undo { margin-left: 10px; border: 0; background: var(--accent); color: var(--accent-text); font: inherit; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; cursor: pointer; }
.toast { pointer-events: auto; }
/* 清單列：鉛筆與＋只在滑入該列時出現（修改狀態中常駐；無滑鼠的裝置常駐） */
@media (hover: hover) {
  .inbox-item .board-chip.tool:not(.active), .inbox-item .board-chip.add { opacity: 0; }
  .inbox-item:hover .board-chip.tool, .inbox-item:hover .board-chip.add, .inbox-item .board-chips.editing .board-chip.tool, .inbox-item .board-chips.editing .board-chip.add { opacity: 1; }
}

/* ---------- 多平台（2026-10-19）---------- */
/* 卡片封面右下角平台小標；內頁 meta 列裡的同款標籤靜態排版 */
.pf-badge { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.pf-badge svg { width: 14px; height: 14px; display: block; }
.pf-threads { background: #000; }
.pf-youtube { background: #ff0000; }
.pf-pinterest { background: #e60023; }
.pf-web { background: #6b6b6b; }
.meta-line .pf-badge { position: static; box-shadow: none; margin-right: 4px; vertical-align: middle; }
.meta-line .who .pf-badge svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.meta-line .who .pf-web svg g { fill: none; stroke: currentColor; stroke-width: 2; }
/* 純文字貼文：卡片封面放標題，內頁媒體欄放內文 */
.no-img.text-cover { padding: 18px 16px; font-size: 15px; line-height: 1.55; font-weight: 700; color: var(--text); display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; box-sizing: border-box; }
.text-cover.big { width: 320px; max-width: 100%; max-height: 70vh; overflow-y: auto; padding: 18px 18px 8px; border-radius: 6px; background: var(--disabled-bg); font-size: 15px; line-height: 1.7; box-sizing: border-box; }
.text-cover.big p { margin: 0 0 10px; }
@media (min-width: 701px) { .carousel .img-col:has(.text-cover.big) { width: 320px; } }
/* YouTube 嵌入播放器：按了縮圖才換成 iframe，尺寸沿用縮圖 */
.embed-frame { border: 0; border-radius: 6px; display: block; max-width: 100%; background: #000; }
/* Threads 留言 */
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.comment-list li:last-child { border-bottom: 0; }
.c-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 12px; margin-bottom: 4px; }
.c-who { font-weight: 700; color: var(--text); }
.c-ok { color: var(--accent); font-size: 11px; }
.c-tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: #fff; }
.c-meta { color: var(--text-soft); }
.c-text p { margin: 0 0 4px; font-size: 14px; line-height: 1.6; }

/* 創作者卡片格（2026-10-19）：寬螢幕 3 欄、中等 2 欄、手機 1 欄；追蹤數緊跟帳號；推薦帳號附推薦人、理由、簡介 */
.cr-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 960px) { .cr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cr-grid { grid-template-columns: 1fr; } }
.cr-grid .empty { grid-column: 1 / -1; }
.cr-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.cr-card.is-rec { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.cr-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cr-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.cr-name a { color: var(--text); text-decoration: none; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.cr-name a:hover { color: var(--accent); }
.cr-followers { font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.cr-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--disabled-bg); display: block; }
.cr-rec-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; margin-top: 10px; }
.cr-rec-tag { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #fff; }
.cr-rec-who { color: var(--text-soft); }
.cr-bio { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--text-soft); overflow-wrap: anywhere; }
.cr-id { min-width: 0; }
.cr-fullname { font-size: 12px; color: var(--text-soft); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 灰色人像：沒有頭貼或帳號已關閉 */
.cr-avatar-empty { position: relative; background: #9a9a9a; overflow: hidden; }
.cr-avatar-empty::before { content: ""; position: absolute; left: 50%; top: 22%; width: 38%; height: 38%; transform: translateX(-50%); border-radius: 50%; background: #d4d4d4; }
.cr-avatar-empty::after { content: ""; position: absolute; left: 50%; bottom: -18%; width: 72%; height: 46%; transform: translateX(-50%); border-radius: 50% 50% 0 0; background: #d4d4d4; }
/* 分頁列（2026-10-19，我的投遞每頁 20 筆） */
.pager-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 22px 0 8px; }
.pager-info { font-size: 12px; color: var(--text-soft); }
.pager { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.pager button { min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elevated); color: var(--text-soft); font-size: 13px; cursor: pointer; }
.pager button:hover:not(:disabled) { color: var(--accent); }
.pager button.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; border-color: transparent; }
.pager button:disabled { opacity: .4; cursor: default; }
.pager-gap { min-width: 20px; text-align: center; line-height: 34px; color: var(--text-soft); }
/* 品牌標籤（2026-10-19）：同「★ 推薦」款式，深灰底 */
.cr-brand-tag { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--text-soft); color: var(--bg); white-space: nowrap; vertical-align: middle; }
.creator-table .cr-rec-tag, .creator-table .cr-brand-tag { vertical-align: middle; margin-left: 2px; }

/* ---------- 圖示（2026-10-25 起改用 icons/*.png，以遮罩上色：跟著 currentColor 走，深淺模式與強調色都會變） ---------- */
.ic { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.2em; background-color: currentColor; flex-shrink: 0;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.ic-home { --ic: url("icons/home.png"); }
.ic-search { --ic: url("icons/search.png"); }
.ic-settings { --ic: url("icons/settings.png"); }
.ic-user { --ic: url("icons/user.png"); }
.ic-group { --ic: url("icons/group.png"); }
.ic-heart { --ic: url("icons/heart.png"); }
.ic-star { --ic: url("icons/star.png"); }
.ic-apps { --ic: url("icons/apps.png"); }
.ic-left { --ic: url("icons/left.png"); }
.ic-up { --ic: url("icons/up.png"); }
.ic-down { --ic: url("icons/down.png"); }
.ic-external { --ic: url("icons/external.png"); }
.ic-link { --ic: url("icons/link.png"); }
.ic-close { --ic: url("icons/close.png"); }
.ic-check { --ic: url("icons/check.png"); }
.ic-lock { --ic: url("icons/lock.png"); }
.ic-edit { --ic: url("icons/edit.png"); }
.ic-plus { --ic: url("icons/plus.png"); }
.ic-plus-circle { --ic: url("icons/plus-circle.png"); }
.ic-comment { --ic: url("icons/comment.png"); }
.ic-clock { --ic: url("icons/clock.png"); }
.ic-globe { --ic: url("icons/globe.png"); }
.ic-image { --ic: url("icons/image.png"); }
.ic-video { --ic: url("icons/video.png"); }
.ic-play { --ic: url("icons/play.png"); }
.ic-star-outline { --ic: url("icons/star-outline.png"); }
.ic-gallery { --ic: url("icons/gallery.png"); }
.ic-chevron { --ic: url("icons/chevron.png"); }
.ic-drag { --ic: url("icons/drag.png"); }
.ic-drag { transform: rotate(90deg); }
.rail a .ic { width: 24px; height: 24px; }
.search-wrap .ic { width: 20px; height: 20px; color: var(--text-soft); }
.user-menu-btn .ic { width: 14px; height: 14px; }
.card-actions .ic { width: 20px; height: 20px; }
.card-actions .fav .ic { --ic: url("icons/star-outline.png"); }
.card-actions .fav.active .ic { --ic: url("icons/star.png"); color: var(--star-fill); }
.meta-line .who .ic { width: 16px; height: 16px; }
.ts-switch .ts-txt .ic { width: 13px; height: 13px; }
.hl-round .ic { width: 18px; height: 18px; }
.collection-row .vis-btn .ic { width: 16px; height: 16px; vertical-align: -3px; }
.board-list .lock .ic { width: 12px; height: 12px; vertical-align: -1px; }
.board-chip .ic { width: 12px; height: 12px; vertical-align: -2px; }
.play .ic { width: 45%; height: 45%; color: #fff; }
.type-seg .ic { width: 15px; height: 15px; }
.filter-chip .ic { width: 11px; height: 11px; vertical-align: -1px; }
.ic-phone { --ic: url("icons/phone.png"); }
/* ---------- 手機版預覽（左欄手機鈕）：同一個網站開在 390px 寬的 iframe 裡，裡面的 RWD 斷點照真手機觸發 ---------- */
#phone-overlay { position: fixed; inset: 0 0 0 72px; z-index: 900; display: flex; align-items: center; justify-content: center; background: var(--bg); }
#phone-overlay iframe { width: 390px; height: min(844px, calc(100vh - 32px)); border: 1px solid var(--border); border-radius: 28px; background: var(--bg); box-shadow: var(--shadow); }
#phone-overlay .phone-size { position: absolute; top: 14px; right: 18px; font-size: 12px; color: var(--text-soft); }
.rail #phone-toggle.on { background: var(--text); color: var(--bg); }
html.in-frame #phone-toggle { display: none; }
@media (max-width: 700px) { #phone-toggle, #phone-overlay { display: none !important; } }
/* 清單頁頂端（標題＋篩選列）：手機寬度黏在搜尋列下方，往下捲收起篩選列只留標題 */
@media (max-width: 700px) {
  .list-head { position: sticky; top: var(--topbar-h, 0px); z-index: 90; background: var(--bg); margin: 0 -16px; padding: 0 16px; box-shadow: 0 -16px 0 var(--bg); }
  .list-head.collapsed { border-bottom: 1px solid var(--border); margin-bottom: 12px; }
  .list-head .filter-bar { transition: opacity .15s; }
  .list-head.collapsed .filter-bar { display: none; }
  .list-head.collapsed header.page-header { margin-bottom: 8px; }
}
.lh-toggle { display: none; }
@media (max-width: 700px) {
  .lh-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: 2px; vertical-align: middle; border: 0; background: none; color: var(--text-soft); cursor: pointer; padding: 0; }
  .lh-toggle .ic { width: 18px; height: 18px; transform: rotate(180deg); transition: transform .15s; }
  .list-head.collapsed .lh-toggle .ic { transform: none; }
}
.ic-double-down { --ic: url("icons/double-down.png"); }
/* 篇數（7 / 302 篇）：手機寬度移到標題列右邊（有標題的清單頁），篩選列裡那份隱藏；電腦版照舊在篩選列 */
.head-count { display: none; }
@media (max-width: 700px) {
  .list-head header.page-header:has(.head-count) { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
  .list-head header.page-header:has(.head-count) > .sub { flex-basis: 100%; }
  .list-head header.page-header .head-count { display: inline; margin-left: auto; font-size: 12px; color: var(--text-soft); white-space: nowrap; }
  .list-head header.page-header:has(.head-count) ~ .filter-bar .result-count { display: none; }
}
/* 手機寬度：左欄個人檔的大頭貼圓圈不顯示（名字與板清單照留） */
@media (max-width: 700px) { .profile > .avatar { display: none; } }
/* 手機寬度：左欄的板清單改成膠囊，往左往上堆疊（換行排列） */
@media (max-width: 700px) {
  .board-list { flex-direction: row; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 6px; }
  .board-list li { flex: none; gap: 5px; padding: 4px 11px; border: 1px solid var(--border); border-radius: 999px; }
  .board-list li a { flex: none; max-width: 180px; }
  .board-list li.active { border-color: var(--accent); }
  .board-list.filters li:not(.manage-pill):nth-last-child(1 of :not(.manage-pill)) { border-top: 1px solid var(--border); margin-top: 0; padding-top: 4px; }
}
/* 手機寬度：個人檔標題併成「Johs的板」＋右邊管理板圖示，原本的名字、「我的板」小標與管理板按鈕收起 */
.phead-m { display: none; }
@media (max-width: 700px) {
  .profile .pname, .profile .plabel, .profile > a.icon-btn { display: none; }
  .profile .phead-m { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; margin: 2px 0 6px; }
  .profile .phead-m .pmanage { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: var(--text-soft); }
  .profile .phead-m .pmanage:hover { color: var(--accent); background: var(--accent-soft); }
  .profile .phead-m .pmanage .ic { width: 16px; height: 16px; }
}
.type-seg button { white-space: nowrap; }
@media (max-width: 700px) { .submit-bar.submit-top { margin: -6px 0 14px; } }
/* 手機寬度：板膠囊文字小 2px */
@media (max-width: 700px) { .board-list li { font-size: 11px; } .board-list .n { font-size: 10px; } }
/* 手機寬度：投遞清單列「縮圖在左、文字資訊在右」，狀態膠囊（完成等）放在縮圖下方 */
@media (max-width: 700px) {
  .inbox-item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 0; align-items: start; }
  .inbox-item > * { grid-column: 2; min-width: 0; }
  .inbox-item > .thumb { grid-column: 1; grid-row: 1; width: 76px; height: 76px; }
  .inbox-item > .status { grid-column: 1; grid-row: 2; justify-self: center; margin-top: 8px; }
  .inbox-item > .main { grid-row: 1 / span 2; overflow: hidden; min-width: 0; }
  .inbox-item > .main .brief, .inbox-item > .main .title { overflow-wrap: anywhere; }
  .inbox-item > .detail-actions:not(:empty) { margin-top: 6px; }
  .inbox-item:has(> .pick) { grid-template-columns: auto auto minmax(0, 1fr); }
  .inbox-item:has(> .pick) > * { grid-column: 3; }
  .inbox-item:has(> .pick) > .pick { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .inbox-item:has(> .pick) > .thumb, .inbox-item:has(> .pick) > .status { grid-column: 2; }
}

/* 手機寬度投遞頁：收合區（投遞列、頁籤、板膠囊、工具列），收起時只留「投遞」大標 */
@media (max-width: 700px) {
  .list-head .lh-body > .side { margin-bottom: 10px; }
  .list-head.collapsed .lh-body { display: none; }
}

/* 首頁（總表）的標題只在手機寬度出現，用來放篩選區收合箭頭 */
.home-head { display: none; }
@media (max-width: 700px) { .list-head header.page-header.home-head { display: flex; } }
/* 手機寬度：首頁篩選區不顯示「N 個帳號」連結 */
@media (max-width: 700px) { .filter-bar .creators-link { display: none; } }
/* 手機寬度：可收合頁面的大標比右側篇數（12px）大 7px；收合箭頭點擊後不留藍色外框（鍵盤操作仍會顯示） */
@media (max-width: 700px) {
  .list-head header.page-header h1 { font-size: 19px; }
  .lh-toggle { width: 28px; height: 28px; }
  .lh-toggle .ic { width: 16px; height: 16px; }
}
.lh-toggle:focus:not(:focus-visible) { outline: none; }
/* 手機寬度：收合後標題列上下留白一致 */
@media (max-width: 700px) {
  .list-head.collapsed, .list-head.pinned { padding-top: 10px; padding-bottom: 10px; }
  .list-head.collapsed header.page-header { margin-bottom: 0; }
  .list-head.collapsed header.page-header h1, .list-head.pinned header.page-header h1 { margin-top: 0; margin-bottom: 0; }
  .list-head.pinned { border-bottom: 1px solid var(--border); margin-bottom: 12px; }
  .list-head.pinned header.page-header { margin-bottom: 10px; }
  .list-head.pinned .filter-bar, .list-head.pinned .lh-body > :last-child { margin-bottom: 0; }
}
/* 管理板圖示膠囊：只在手機寬度出現（電腦版用側欄下方的「管理板」按鈕） */
.board-list li.manage-pill { display: none; }
@media (max-width: 700px) {
  .board-list li.manage-pill { display: flex; padding: 0; }
  .board-list li.manage-pill a { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; color: var(--text-soft); }
  .board-list li.manage-pill a:hover { color: var(--accent); }
  .board-list li.manage-pill .ic { width: 14px; height: 14px; }
}
/* 手機寬度：所有頁面大標統一 19px */
@media (max-width: 700px) { header.page-header h1 { font-size: 19px; } }
/* 手機寬度總表：篩選列收進底部篩選面板，標題列右邊放篩選鈕 */
.ic-filter { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h11.2a3 3 0 0 1 5.6 0H21v2h-1.2a3 3 0 0 1-5.6 0H3zm14 1a1 1 0 1 0 0-.01zM3 16h1.2a3 3 0 0 1 5.6 0H21v2H9.8a3 3 0 0 1-5.6 0H3zm4 1a1 1 0 1 0 0-.01z'/%3E%3C/svg%3E"); }
.hf-btn { display: none; }
@media (max-width: 700px) {
  .list-head .hf-head ~ .filter-bar { display: none; }
  .hf-head .head-count { margin-left: auto; }
  .hf-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elevated); color: var(--text); cursor: pointer; padding: 0; }
  .hf-btn .ic { width: 18px; height: 18px; }
  .hf-dot { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }
  .hf-dot.hidden { display: none; }
}
body.hf-lock { overflow: hidden; }
.hf-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, 0); transition: background .2s ease; display: flex; align-items: flex-end; }
.hf-overlay.open { background: rgba(0, 0, 0, .5); }
.hf-sheet { position: relative; width: 100%; max-height: 85vh; overflow-y: auto; background: var(--bg-elevated); color: var(--text); border-radius: 20px 20px 0 0; padding: 22px 18px 0; transform: translateY(100%); transition: transform .22s ease; box-shadow: 0 -8px 30px rgba(0, 0, 0, .3); }
.hf-overlay.open .hf-sheet { transform: none; }
.hf-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 10px; border: 0; background: var(--text); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.hf-close .ic { width: 14px; height: 14px; }
.hf-sec { margin-top: 6px; margin-bottom: 18px; }
.hf-title { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.hf-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.hf-pills button { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.hf-pills button .ic, .hf-pills button .pf-ico { width: 14px; height: 14px; }
.hf-pills button.on { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; }
.hf-actions { display: flex; gap: 12px; position: sticky; bottom: 0; margin: 8px -18px 0; padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); background: var(--bg-elevated); border-top: 1px solid var(--border); }
.hf-actions button { flex: 1; height: 46px; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.hf-reset { border: 1px solid var(--text-soft); background: transparent; color: var(--text); }
.hf-apply { border: 0; background: var(--accent); color: var(--accent-text); }
.hf-select { width: 100%; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 14px; }
.hf-pills button.hf-icon-only { padding: 7px 14px; }
.hf-pills button.hf-icon-only .pf-ico { width: 17px; height: 17px; }
/* 手機寬度總表：標題列（標題／篇數／篩選鈕）上下內距一致，底下分隔線與卡片留距 */
@media (max-width: 700px) {
  .list-head:has(> .hf-head) { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
  .list-head > header.page-header.hf-head { margin: 0; align-items: center; }
  .list-head > header.page-header.hf-head h1 { margin: 0; }
}
.hf-pills button.hf-icon-only .ic { width: 16px; height: 16px; }
.hf-other { align-items: center; }
.hf-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; margin-right: 6px; }
.hf-check input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
/* 搜尋框有關鍵字時高亮 */
.search-wrap.active { border-color: var(--accent); background: var(--accent-soft); }
.search-wrap.active .ic { color: var(--accent); }
.search-wrap.active input { color: var(--accent); font-weight: 600; }
/* 手機寬度創作者表：字小 2px、「庫內篇數」縮成「庫內」、拿掉最近入庫欄，整張表塞進視窗寬度（帳號太長就換行） */
.creator-table .lbl-m { display: none; }
@media (max-width: 700px) {
  .creator-table { font-size: 12px; }
  .creator-table th { font-size: 10px; }
  .creator-table .cr-rec-tag, .creator-table .cr-brand-tag { font-size: 8px; }
  .creator-table .lbl-d { display: none; }
  .creator-table .lbl-m { display: inline; }
  .creator-table th[data-sort="latest"], .creator-table td:nth-child(4) { display: none; }
  .creator-table td.left { white-space: normal; overflow-wrap: anywhere; }
}
.ic-board-manage { --ic: url("icons/board-manage.svg"); }
/* 手機寬度投遞頁：板膠囊、私人公開、投遞者、月份收進篩選面板 */
@media (max-width: 700px) {
  .two-col.inbox-m > .side { display: none; }
  .two-col.inbox-m .inbox-toolbar #vis-seg, .two-col.inbox-m .inbox-toolbar .who-select { display: none; }
  .list-head > header.page-header.hf-head { display: flex; align-items: center; gap: 0 8px; }
  .list-head > header.page-header.hf-head > h1 + .hf-btn { margin-left: auto; }
}
.hf-pills .n { font-size: 11px; color: var(--text-soft); margin-left: 2px; }
.hf-pills button.on .n { color: inherit; opacity: .7; }
.hf-link { display: inline-flex; align-items: center; justify-content: center; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text-soft); }
.hf-link .ic { width: 15px; height: 15px; }
.hf-sheet > .hf-close + .hf-sec { padding-right: 40px; }  /* 第一組沒標題時，膠囊別跑到關閉鈕底下 */
/* 手機寬度投遞頁：投遞列上方（到標題列分隔線）與下方（到頁籤文字）距離一致，都是 14px */
@media (max-width: 700px) { .list-head + .submit-bar.submit-top { margin: 0 0 12px; } }
/* 開關（推薦創作者頁「我推薦的」、篩選面板「我存的」）：開啟時底色變強調色、圓鈕右移並出現勾勾 */
.rec-mine-row { flex-basis: 100%; }
.tgl { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-soft); cursor: pointer; user-select: none; position: relative; }
.tgl input { position: absolute; opacity: 0; width: 0; height: 0; }
.tgl .sw { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--border); transition: background .15s; flex-shrink: 0; }
.tgl .kn { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text); display: flex; align-items: center; justify-content: center; color: var(--accent); transition: transform .15s; }
.tgl .kn .ic { width: 10px; height: 10px; opacity: 0; transition: opacity .15s; }
.tgl input:checked + .sw { background: var(--accent); }
.tgl input:checked + .sw .kn { transform: translateX(16px); background: #fff; }
.tgl input:checked + .sw .kn .ic { opacity: 1; }
.tgl:has(input:checked) { color: var(--accent); font-weight: 600; }
.tgl input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.hf-other .tgl { font-size: 14px; margin-right: 6px; }
@media (max-width: 700px) { .creator-filters.cr-m > [data-cf="brandCat"] { display: none; } }
/* 品牌帳號頁篩選鈕和語言膠囊同高（外框 32px）、寬度同一顆語言鈕加框線、圓角同語言膠囊 */
@media (max-width: 700px) { .creator-filters.cr-m .hf-btn { margin-left: 0; width: 38px; height: 32px; border-radius: 8px; } .creator-filters.cr-m .hf-btn .ic { width: 16px; height: 16px; } }
.type-seg[data-cf="brandCat"] .n { font-size: 11px; color: var(--text-soft); margin-left: 3px; }
/* 手機寬度可收合頁面：標題列不管展開、收起、捲到哪，上方都留 10px（和收起時一樣），標題位置固定不跳 */
@media (max-width: 700px) {
  .list-head { padding-top: 10px; }
  .list-head > header.page-header h1 { margin-top: 0; }
}
/* 標題列一律同高（34px，等於篩選鈕高度）並垂直置中：有篩選鈕的頁和有收合箭頭的頁，標題位置一致 */
@media (max-width: 700px) {
  .list-head > header.page-header { display: flex; flex-wrap: wrap; align-items: center; min-height: 34px; }
  .list-head > header.page-header > .sub { flex-basis: 100%; }
  .list-head > header.page-header h1 { margin: 0; }
}
/* 管理板滿版面板 */
.hf-overlay.mg-overlay { align-items: stretch; z-index: 310; }
.hf-sheet.mg-sheet { max-height: none; height: 100%; border-radius: 0; padding: 0 18px calc(24px + env(safe-area-inset-bottom)); }
.mg-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 14px 0 12px; margin-bottom: 12px; background: var(--bg-elevated); border-bottom: 1px solid var(--border); }
.mg-head h2 { margin: 0; font-size: 19px; }
.mg-head .hf-close { position: static; }
.mg-sheet .collection-row { background: var(--bg); }
.ic-grip { --ic: url("icons/grip.svg"); }
.collection-row .drag-handle .ic { width: 18px; height: 18px; vertical-align: -4px; }
/* 搜尋框清除鈕：有字（.active）時才出現 */
.search-clear { display: none; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: -6px; border: 0; border-radius: 50%; background: transparent; color: var(--accent); cursor: pointer; padding: 0; flex-shrink: 0; }
.search-clear .ic { width: 14px; height: 14px; color: inherit; }
.search-clear:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.search-wrap.active .search-clear { display: inline-flex; }
/* 我的板：板名＋縮圖一排 */
.bd-list { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.bd-head { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; margin-bottom: 10px; }
.bd-head .bd-name { font-size: 16px; font-weight: 700; }
.bd-head .bd-lock .ic { width: 13px; height: 13px; color: var(--text-soft); }
.bd-head .n { font-size: 12px; color: var(--text-soft); }
.bd-head > .ic { width: 14px; height: 14px; color: var(--text-soft); margin-left: auto; transform: rotate(-90deg); }
.bd-head:hover .bd-name { color: var(--accent); }
.bd-strip { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 7 * 10px) / 8); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.bd-strip::-webkit-scrollbar { display: none; }
.bd-th, .bd-more { aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--bg-elevated); border: 1px solid var(--border); scroll-snap-align: start; }
.bd-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-more { display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px; font-size: 12px; font-weight: 600; color: var(--text-soft); text-decoration: none; }
.bd-more:hover { color: var(--accent); }
.bd-empty { font-size: 13px; color: var(--text-soft); }
.bd-manage { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.bd-manage .ic { width: 15px; height: 15px; }
@media (max-width: 700px) { .bd-strip { grid-auto-columns: calc((100% - 3 * 8px) / 4.3); gap: 8px; } }
/* 別人的板：同事＋公開板膠囊 */
.pp-list { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.pp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pp-name { font-size: 15px; font-weight: 700; }
.pp-boards { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-board { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); text-decoration: none; font-size: 13px; }
.pp-board .n { font-size: 11px; color: var(--text-soft); }
.pp-board:hover { border-color: var(--accent); color: var(--accent); }
/* 我的板首頁兩欄（2026-10-28）：每個板佔半欄，縮圖縮成原本約 70%（手機約 52px 寬、電腦約 90px） */
.bd-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 16px; }
.bd-list > .bd-manage, .bd-list > .empty { grid-column: 1 / -1; }
.bd-head { min-width: 0; }
.bd-head .bd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bd-strip { grid-auto-columns: 90px; }
@media (max-width: 700px) {
  .bd-list { gap: 18px 12px; }
  .bd-strip { grid-auto-columns: 52px; gap: 6px; }
  .bd-head { margin-bottom: 8px; gap: 6px; }
  .bd-head .bd-name { font-size: 14px; }
  .bd-th, .bd-more { border-radius: 7px; }
  .bd-more { font-size: 10px; padding: 3px; }
}
/* 別人的板首頁兩欄（2026-10-28）：每位同事佔半欄 */
.pp-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 16px; align-items: start; }
.pp-list > .empty { grid-column: 1 / -1; }
.pp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 700px) {
  .pp-list { gap: 18px 12px; }
  .pp-boards { gap: 6px; }
  .pp-board { padding: 4px 9px; font-size: 12px; max-width: 100%; }
  .pp-head .avatar, .pp-head img { width: 24px; height: 24px; }
  .pp-name { font-size: 14px; }
}
.bd-list > .bd-manage { justify-self: start; }
/* 縮圖列末端淡出（提示還能往右滑） */
.bd-strip { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
/* 兩欄之間的間距：比照左側欄分隔線兩側的留白（各約 24px，合計 48px）；手機縮成 24px */
.bd-list, .pp-list { column-gap: 48px; }
@media (max-width: 700px) { .bd-list, .pp-list { column-gap: 24px; } }
.pp-board .ic { width: 12px; height: 12px; color: var(--text-soft); }
/* 大家的板：膠囊選取狀態＋底部「看這個板」按鈕 */
button.pp-board { font: inherit; font-size: 13px; cursor: pointer; }
.pp-board.on { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; }
.pp-all { margin-left: 4px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-soft); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.pp-all:hover { border-color: var(--accent); color: var(--accent); }
.pp-board.on .n, .pp-board.on .ic { color: inherit; opacity: .75; }
.pp-go { position: fixed; left: 72px; right: 0; bottom: 20px; display: flex; justify-content: center; pointer-events: none; z-index: 110; transform: translateY(140%); transition: transform .22s ease; }
.pp-go.show { transform: none; }
.pp-go .btn-primary { pointer-events: auto; min-width: 200px; height: 46px; padding: 0 24px; border-radius: 999px; font-size: 15px; font-weight: 600; box-shadow: 0 6px 20px var(--shadow); }
@media (max-width: 700px) { .pp-go { left: 0; bottom: calc(60px + 14px + env(safe-area-inset-bottom)); } }
.pp-chosen { max-width: 1100px; margin: 0 auto 16px; display: flex; flex-wrap: wrap; gap: 8px; }
/* 全站底部投遞欄（2026-10-28）：電腦版浮在底部中央；手機版疊在底部導覽列上方、整條有底色 */
.submit-dock { position: fixed; left: 72px; right: 0; bottom: 16px; z-index: 105; display: flex; justify-content: center; padding: 0 24px; pointer-events: none; transform: translateY(160%); transition: transform .25s ease; }
.submit-dock.show { transform: none; }
.submit-dock .submit-bar { pointer-events: auto; width: 100%; max-width: 720px; margin: 0; flex-wrap: wrap; }
.submit-dock .submit-bar input[type="text"], .submit-dock .submit-bar .btn-primary { box-shadow: 0 6px 20px var(--shadow); }
.submit-dock .submit-bar .hint:empty { display: none; }
.submit-dock .submit-bar .hint { flex-basis: 100%; }
body.has-dock #app { padding-bottom: 88px; }
body.has-dock .back-to-top { bottom: 84px; }
.pp-go { bottom: 84px; }
body.hf-lock .submit-dock { visibility: hidden; }
@media (max-width: 700px) {
  .submit-dock { left: 0; bottom: calc(60px + env(safe-area-inset-bottom)); padding: 10px 16px; background: var(--bg); border-top: 1px solid var(--border); }
  .submit-dock .submit-bar { max-width: none; }
  .submit-dock .submit-bar input[type="text"], .submit-dock .submit-bar .btn-primary { box-shadow: none; }
  .submit-dock .submit-bar input[type="text"] { min-width: 0; }
  body.has-dock #app { padding-bottom: 80px; }
  body.has-dock .back-to-top { bottom: calc(60px + 76px + env(safe-area-inset-bottom)); }
  .pp-go { left: 0; padding: 10px 16px; background: var(--bg); border-top: 1px solid var(--border); bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 106; }
  body.has-dock .pp-go { bottom: calc(60px + 66px + env(safe-area-inset-bottom)); }
  .pp-go .btn-primary { width: 100%; box-shadow: none; }
}
.dock-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 38px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elevated); color: var(--text-soft); cursor: pointer; padding: 0; }
.dock-close .ic { width: 14px; height: 14px; }
.submit-dock .submit-bar .hint { order: 9; }
/* YouTube 等嵌入影片：電腦版放大成 16:9（約 640px 寬），縮圖裁掉上下黑邊；手機版維持滿寬 */
@media (min-width: 701px) {
  .row.embed-row .img-col, .carousel .row.embed-row .img-col { width: min(640px, 58%); min-width: 0; }
  .row.embed-row .video-poster, .carousel .row.embed-row .video-poster { width: 100%; }
}
.row.embed-row .video-poster img, .img-col .row.embed-row .video-poster img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; max-height: none; }
.row.embed-row .img-col img, .carousel .row.embed-row .img-col img { width: 100%; max-width: none; }
.cap-sep { border: 0; border-top: 1px dashed var(--border); margin: 12px 0; }
/* 單篇：加註解面板＋底部按鈕 */
.annot-go { position: fixed; left: 72px; right: 0; bottom: 20px; display: flex; justify-content: center; pointer-events: none; z-index: 110; transform: translateY(160%); transition: transform .22s ease; }
.annot-go.show { transform: none; }
.annot-go .btn-primary { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; min-width: 160px; justify-content: center; height: 46px; padding: 0 24px; border-radius: 999px; font-size: 15px; box-shadow: 0 6px 20px var(--shadow); }
.annot-go .btn-primary .ic { width: 15px; height: 15px; }
.annot-sheet { padding-top: 0; }
.annot-sheet .collection-picker, .annot-sheet .note-box { max-width: none; margin: 0 0 18px; }
@media (max-width: 700px) {
  .annot-go { left: 0; padding: 10px 16px; background: var(--bg); border-top: 1px solid var(--border); bottom: calc(60px + env(safe-area-inset-bottom)); }
  .annot-go .btn-primary { width: 100%; box-shadow: none; }
}
body:has(#annot-go) #app { padding-bottom: 90px; }
/* Threads 單篇 */
.th-post { max-width: 880px; margin: 0 auto 18px; }  /* 跟上方標題區、下方「圖上文字」同寬（2026-11-05） */
.th-text { font-size: 16px; line-height: 1.6; margin-bottom: 12px; }
.th-text p { margin: 0 0 4px; }
.th-trans { font-size: 14px; color: var(--text-soft); margin: -4px 0 12px; }
.th-trans .label { display: block; font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 2px; }
.th-trans p { margin: 0 0 2px; }
.th-strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
.th-media { height: 400px; width: auto; max-width: 85%; flex-shrink: 0; border-radius: 12px; border: 1px solid var(--border); object-fit: cover; scroll-snap-align: start; background: #000; cursor: zoom-in; }
video.th-media { cursor: default; }
.th-stats { display: flex; align-items: center; gap: 20px; margin-top: 12px; font-size: 14px; color: var(--text-soft); }
.th-stats .ic { width: 16px; height: 16px; vertical-align: -3px; }
.th-stats .th-date { margin-left: auto; font-size: 13px; }
@media (max-width: 700px) { .th-media { height: 260px; } .th-text { font-size: 15px; } }
.annot-overlay { pointer-events: none; visibility: hidden; transition: background .2s ease, visibility 0s linear .22s; }
.annot-overlay.open { pointer-events: auto; visibility: visible; transition: background .2s ease, visibility 0s; }
/* Threads 圖片高度減半（電腦 400→200px、手機 260→130px） */
.th-media { height: 200px; border-radius: 10px; }
@media (max-width: 700px) { .th-media { height: 130px; } }
/* 單篇圖區齊左對齊標題；翻頁鈕放進圖裡左右兩側（比照 IG：白色小圓鈕、離邊約 10px） */
.carousel-wrap { width: 100%; max-width: 880px; margin: 0 0 16px; }
.carousel .row { padding-left: 0; padding-right: 0; }
.media-box { position: relative; }
.img-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .9); color: #262626; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; z-index: 4; }
.img-arrow .ic { width: 14px; height: 14px; color: inherit; }
.img-arrow.prev { left: 10px; }
.img-arrow.next { right: 10px; }
.img-arrow.next .ic { transform: rotate(180deg); }
.img-arrow:hover { background: #fff; }
@media (max-width: 700px) { .img-arrow { width: 26px; height: 26px; } .img-arrow .ic { width: 12px; height: 12px; } .img-arrow.prev { left: 8px; } .img-arrow.next { right: 8px; } }
/* 「加註解」按鈕用一般按鈕尺寸、寬度跟著文字（手機版底色條保留，按鈕置中） */
.annot-go .btn-primary { min-width: 0; width: auto; height: auto; padding: 9px 18px; font-size: 14px; }
@media (max-width: 700px) { .annot-go .btn-primary { width: auto; } }
/* 放大圖的左右換圖鈕（比照圖內翻頁鈕，放大一號、貼畫面左右兩側） */
.ig-lightbox .lb-arrow { width: 40px; height: 40px; }
.ig-lightbox .lb-arrow .ic { width: 18px; height: 18px; }
.ig-lightbox .lb-arrow.prev { left: 20px; }
.ig-lightbox .lb-arrow.next { right: 20px; }
@media (max-width: 700px) { .ig-lightbox .lb-arrow { width: 32px; height: 32px; } .ig-lightbox .lb-arrow.prev { left: 10px; } .ig-lightbox .lb-arrow.next { right: 10px; } }
/* 圖內翻頁鈕縮成 70%（電腦 30→21px、手機 26→18px）；放大圖的換圖鈕不受影響 */
.media-box .img-arrow { width: 21px; height: 21px; }
.media-box .img-arrow .ic { width: 10px; height: 10px; }
@media (max-width: 700px) { .media-box .img-arrow { width: 18px; height: 18px; } .media-box .img-arrow .ic { width: 9px; height: 9px; } }
/* 單篇輪播：只有圖片滑動，右欄文字停下來才換頁（2026-10-29） */
.carousel-wrap.cz { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; align-items: stretch; }
.cz > .carousel { grid-column: 1; grid-row: 1; max-width: 100%; }
.cz > .carousel-dots { grid-column: 1; grid-row: 2; }
.cz > .cz-text { grid-column: 2; grid-row: 1; position: relative; min-height: 160px; }
.cz .carousel .row { gap: 0; padding-bottom: 8px; }
.cz .carousel .row .img-col { width: auto; }
.cz-text > .text-col { display: none; position: absolute; inset: 0; padding-top: 8px; }
.cz-text > .text-col.on { display: block; }
.cz-text .text-scroll { position: absolute; inset: 8px 0 0; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
@media (min-width: 701px) { .cz .carousel .row.embed-row .img-col { width: min(640px, 52vw); } }
@media (max-width: 700px) {
  .carousel-wrap.cz { grid-template-columns: minmax(0, 1fr); }
  .cz > .cz-text { grid-column: 1; grid-row: 3; min-height: 0; }
  .cz-text > .text-col { position: static; }
  .cz-text .text-scroll { position: static; }
}
/* 「看這個板／看這幾個板」按鈕比照「加註解」：一般按鈕尺寸、寬度跟著文字（手機底色條保留） */
.pp-go .btn-primary { min-width: 0; width: auto; height: auto; padding: 9px 18px; font-size: 14px; }
@media (max-width: 700px) { .pp-go .btn-primary { width: auto; } }
.fb-go { display: none; }
@media (max-width: 700px) { .fb-go { display: flex; } body:has(#fb-go) #app { padding-bottom: 90px; } }
/* 主選單子選項（我的板） */
.nav-pop { position: fixed; z-index: 200; display: flex; flex-direction: column; min-width: 120px; padding: 6px; border-radius: 12px; background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: 0 8px 24px var(--shadow); opacity: 0; pointer-events: none; transform: translateX(-6px); transition: opacity .15s ease, transform .15s ease; }
.nav-pop.up { transform: translateY(6px); }
.nav-pop.open { opacity: 1; pointer-events: auto; transform: none; }
.nav-pop a { padding: 9px 14px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.nav-pop a:hover { background: var(--accent-soft); color: var(--accent); }
/* 投遞欄打開時，同位置的「加註解」「篩選」底部按鈕先讓位 */
body.has-dock .annot-go.show { transform: translateY(160%); }
/* 底部投遞欄輸入框：聚焦時不用瀏覽器藍框，改成按鈕的強調色框；字縮成 12px（同投遞清單摘要），提示文字更淡 */
.submit-dock .submit-bar input[type="text"] { font-size: 12px; }
.submit-dock .submit-bar input[type="text"]::placeholder { color: var(--text-soft); opacity: .6; }
.submit-dock .submit-bar input[type="text"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* 投遞頁拖曳卡片：暗背景＋畫面中央的板清單（放開＝加入該板） */
.drop-overlay { position: fixed; inset: 0; z-index: 900; background: var(--overlay-bg); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity .15s ease; pointer-events: auto; }
.drop-overlay.open { opacity: 1; }
.drop-panel { width: min(640px, 100%); }
.drop-title { text-align: center; color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 14px; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.drop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.drop-board { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 84px; padding: 12px; border-radius: 14px; background: var(--bg-elevated); border: 2px dashed var(--border); color: var(--text); text-align: center; transition: transform .12s ease, border-color .12s ease, background .12s ease; }
.drop-board .nm { font-size: 15px; font-weight: 700; word-break: break-word; }
.drop-board .n { font-size: 12px; color: var(--text-soft); }
.drop-board.drop-target { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--accent); transform: scale(1.04); }
@media (max-width: 700px) { .drop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .drop-board { min-height: 70px; } }
.drag-ghost { z-index: 950; pointer-events: none; }
/* 全站焦點框改用強調色（不用瀏覽器預設藍框）：
   輸入框與下拉選單聚焦時框線變強調色；按鈕、連結只在鍵盤操作（focus-visible）時顯示強調色外框，滑鼠點擊不留框 */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
button:focus:not(:focus-visible), a:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) { outline: none; }
/* 開關關閉時的圓鈕顏色＝旁邊文字的顏色（淡灰）；開啟時仍是白色 */
.tgl .kn { background: var(--text-soft); }
.tgl input:checked + .sw .kn { background: #fff; }
/* 總表清單檢視（仿投遞頁）：縮圖在左，右邊依序 板膠囊／帳號＋標題／摘要／讚・留言・收藏 */
.ic-list { --ic: url("icons/list.svg"); }
.view-btn-d { display: none; }
@media (min-width: 701px) { .filter-bar .view-btn-d { display: inline-flex; position: static; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elevated); color: var(--text); cursor: pointer; padding: 0; } .filter-bar .view-btn-d .ic { width: 18px; height: 18px; } }
.hf-head .view-btn + .hf-btn { margin-left: 6px; }
.grid.list-view { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.grid.list-view .card { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 12px; padding: 12px; align-items: start; }
.grid.list-view .cover-wrap { width: 76px; height: 76px; aspect-ratio: auto; border-radius: 8px; overflow: hidden; }
.grid.list-view .cover-wrap .no-img { height: 76px; font-size: 11px; }
.grid.list-view .card-body { padding: 0; display: flex; flex-direction: column; min-width: 0; }
.grid.list-view .lv-chips { order: 1; display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.grid.list-view .card-title { order: 2; font-size: 14px; font-weight: 700; -webkit-line-clamp: 2; }
.grid.list-view .card-title b { font-weight: 400; color: var(--text-soft); font-size: 12px; display: block; margin: 0 0 1px; }
.grid.list-view .lv-brief { order: 3; font-size: 12px; color: var(--text-soft); line-height: 1.5; margin: 4px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.grid.list-view .card-actions { order: 4; margin: 6px 0 0; }
.grid.list-view .card-actions svg, .grid.list-view .card-actions .ic { width: 16px; height: 16px; }
.grid.list-view .hover-layer, .grid.list-view .read-dot { display: none; }
.lv-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
@media (min-width: 701px) { .grid.list-view { max-width: 900px; } }
/* 清單檢視縮圖改 4:5 直式（IG 常見比例）：76×95 */
.grid.list-view .cover-wrap { height: 95px; }
.grid.list-view .cover-wrap .no-img { height: 95px; }
/* 清單檢視卡片 hover 抖動修正：清單卡片本身有 12px 內距，把上浮補償的 2px 加在原內距上（原本的 2px 規則被清單內距蓋掉，底邊仍會上移） */
.grid.list-view a.card:hover { padding-bottom: 14px; margin-bottom: -2px; }
/* More 按鈕（取代頁碼） */
.more-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 22px auto 8px; }
.more-btn { min-width: 140px; padding: 9px 22px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.more-btn:hover { border-color: var(--accent); color: var(--accent); }
.more-info { font-size: 12px; color: var(--text-soft); }
/* 畫面外的卡片先不排版、不繪製（content-visibility），卡片累積很多時捲動仍順 */
.grid .card, .inbox-list .inbox-item { content-visibility: auto; contain-intrinsic-size: auto 320px; }
.grid.list-view .card, .inbox-list .inbox-item { contain-intrinsic-size: auto 130px; }
/* 我的板：封面拼貼（一大兩小）＋板名＋篇數・多久前更新，兩欄 */
.bc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px 18px; }
.bc-item { display: flex; flex-direction: column; gap: 3px; color: var(--text); text-decoration: none; min-width: 0; }
.bc-cover { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: var(--border); }
.bc-cell { background: var(--bg-elevated); overflow: hidden; }
.bc-cell.big { grid-row: 1 / 3; }
.bc-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-item:hover .bc-cover { opacity: .9; }
.bc-name { display: flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 700; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-lock .ic { width: 13px; height: 13px; color: var(--text-soft); }
.bc-meta { font-size: 12px; color: var(--text-soft); }
@media (max-width: 700px) { .bc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 12px; } .bc-name { font-size: 14px; } }
/* 單篇分段切換（手機） */
.post-seg { display: none; }
@media (max-width: 700px) {
  .cz > .post-seg { display: inline-flex; grid-column: 1; grid-row: 3; justify-self: start; background: var(--border); border-radius: 999px; padding: 3px; margin: 10px 0 12px; position: sticky; top: calc(var(--topbar-h, 0px) + 6px); z-index: 5; }
  .cz > .post-seg button { border: 0; background: none; font: inherit; font-weight: 700; font-size: 13px; padding: 6px 13px; border-radius: 999px; color: var(--text-soft); cursor: pointer; }
  .cz > .post-seg button.on { background: var(--bg-elevated); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
  #app.has-ps .cz > .cz-text { grid-row: 4; }
  .ps-note { display: none; }
  #app.ps-o .cz-text .text-block.trans, #app.ps-o .cz-text .label-row:has([data-copy^="t"]) { display: none; }
  #app.ps-t .cz-text .text-block.orig, #app.ps-t .cz-text .label-row:has([data-copy^="o"]) { display: none; }
  #app.ps-t .cz-text .text-col:not(:has(.text-block.trans))::after { content: "這頁沒有中譯"; color: var(--text-soft); font-size: 13px; }
  #app.has-ps.ps-o .comments-box, #app.has-ps.ps-t .comments-box { display: none; }
  #app.ps-c .cz-text, #app.ps-n .cz-text, #app.ps-c > details.collapsible:not(.comments-box), #app.ps-n > details.collapsible { display: none; }
  #app.ps-n .ps-note { display: block; }
  #app.ps-n .comments-box { display: none; }
}
/* 左下角浮動返回鈕（手機） */
.float-back { display: none; }
@media (max-width: 700px) {
  .float-back { display: grid; place-items: center; position: fixed; left: 14px; bottom: calc(60px + 74px + env(safe-area-inset-bottom)); width: 44px; height: 44px; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: 0 4px 14px var(--shadow); color: var(--text); cursor: pointer; z-index: 112; padding: 0; }
  .float-back .ic { width: 18px; height: 18px; }
}
/* 手機版 Threads 圖片放大：高 130 → 320px（一張約佔畫面寬 3/4，可左右滑看下一張） */
@media (max-width: 700px) { .th-media { height: 320px; max-width: 82%; border-radius: 14px; } }
/* Threads 圖片高度統一 275px（電腦、手機都一樣） */
.th-media { height: 275px; }
@media (max-width: 700px) { .th-media { height: 275px; } }
/* 單篇輪播：固定在軌道左右的翻頁鈕（垂直置中在圖片區，扣掉下方頁數列） */
.cz > .trk { grid-column: 1; grid-row: 1; position: relative; min-width: 0; }
.trk > .img-arrow { top: calc(50% - 14px); width: 21px; height: 21px; }
.trk > .img-arrow .ic { width: 10px; height: 10px; }
@media (max-width: 700px) { .trk > .img-arrow { width: 26px; height: 26px; } .trk > .img-arrow .ic { width: 12px; height: 12px; } }
/* 手機版翻頁鈕放大：26 → 34px */
@media (max-width: 700px) { .trk > .img-arrow { width: 34px; height: 34px; } .trk > .img-arrow .ic { width: 15px; height: 15px; } .trk > .img-arrow.prev { left: 10px; } .trk > .img-arrow.next { right: 10px; } }
.ic-chev-left { --ic: url("icons/chev-left.svg"); }
/* 手機點按延遲修正：關掉「點兩下放大」的等待判斷（保留兩指縮放），按下時立刻有回饋 */
html { touch-action: manipulation; }
button, a, label, select, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (hover: none) { .pp-board:active, .hf-pills button:active, .type-seg button:active, .chip:active { transform: scale(.96); } }
@media (max-width: 700px) {
  #app.ps-o #cap-t, #app.ps-o .label-row:has([data-copy="cap-t"]) { display: none; }
  #app.ps-t #cap-o, #app.ps-t .label-row:has([data-copy="cap-o"]) { display: none; }
}
/* 輪播區與標題區同寬同位置（最寬 880px、置中），寬螢幕時左緣對齊標題 */
.carousel-wrap { margin: 0 auto 16px; }

/* 錯誤訊息摘要＋點開看詳細（2026-11-02） */
.inbox-item details.err { white-space: normal; }
.inbox-item details.err > summary { cursor: pointer; list-style: none; }
.inbox-item details.err > summary::-webkit-details-marker { display: none; }
.inbox-item details.err > summary::after { content: "　詳細"; color: var(--text-soft); font-weight: 400; }
.inbox-item details.err[open] > summary::after { content: "　收起"; }
.inbox-item .err-full { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--border); color: var(--text-soft); font-family: ui-monospace, Menlo, monospace; font-size: 11px; white-space: pre-wrap; word-break: break-all; max-height: 240px; overflow: auto; }

/* 拖曳暗背景最底下的鎖頭：拖進去放開＝設為私人（2026-11-02） */
.drop-lock { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px auto 0; width: min(260px, 100%); min-height: 64px; border-radius: 14px; background: var(--bg-elevated); border: 2px dashed var(--border); color: var(--text); transition: transform .12s ease, border-color .12s ease, background .12s ease; }
.drop-lock .ic { width: 20px; height: 20px; }
.drop-lock .nm { font-size: 15px; font-weight: 700; }
.drop-lock.drop-target { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--accent); transform: scale(1.04); }

/* 投遞清單的可見性符號：縮圖左上角的小圓牌；沒縮圖時接在網址前面（2026-11-02） */
.inbox-item .thumb { position: relative; }
.inbox-item .thumb .vis-ic { position: absolute; top: 5px; left: 5px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; }
.inbox-item .thumb .vis-ic .ic { width: 12px; height: 12px; }
.inbox-item .url .vis-ic { display: inline-flex; vertical-align: -2px; margin-right: 6px; color: var(--text-soft); }
.inbox-item .url .vis-ic .ic { width: 14px; height: 14px; }

/* 拖曳暗背景的板名前：鎖＝私人板、地球＝公開板（2026-11-02） */
.drop-board .nm .ic { width: 14px; height: 14px; vertical-align: -1px; color: var(--text-soft); margin-right: 2px; }
.drop-board.drop-target .nm .ic { color: inherit; }
/* 投遞視窗（2026-11-04 依草圖）：暗背景蓋全頁、點背景收起；內容區正中央一個大輸入框，關閉鈕在框外右上、送出鈕在框下右側 */
.submit-dock-back { position: fixed; inset: 0; z-index: 1000; background: var(--overlay-bg); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.submit-dock-back.show { opacity: 1; pointer-events: auto; }
.submit-dock { left: 0; top: 0; bottom: 0; z-index: 1001; align-items: center; transform: none; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; }
.submit-dock.show { opacity: 1; visibility: visible; }
.submit-dock .submit-bar { position: relative; max-width: 760px; display: block; padding-top: 48px; }
.submit-dock .submit-bar textarea { display: block; width: 100%; box-sizing: border-box; min-height: 160px; resize: vertical; font: inherit; font-size: 15px; line-height: 1.6; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.submit-dock .submit-bar textarea::placeholder { color: var(--text-soft); opacity: .6; }
.submit-dock .submit-bar textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 10px 40px rgba(0,0,0,.35); }
.submit-dock .submit-foot { display: flex; align-items: flex-start; justify-content: flex-end; gap: 12px; margin-top: 14px; }
.submit-dock .submit-foot .hint { flex: 1; margin-right: auto; width: auto; order: 0; color: rgba(255,255,255,.85); font-size: 13px; }
.submit-dock .submit-foot .btn-primary { height: 46px; padding: 0 28px; font-size: 15px; border-radius: 12px; box-shadow: none; }
.submit-dock .dock-close { position: absolute; top: 0; right: 0; width: 38px; height: 38px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #fff; }
.submit-dock .dock-close .ic { width: 16px; height: 16px; }
body.has-dock #app { padding-bottom: 0; }
/* 手機版（依草圖）：高輸入框置中、送出鈕在右下，不放關閉鈕（點暗背景收起） */
@media (max-width: 700px) {
  .submit-dock { bottom: 0; padding: 0 20px; background: none; border-top: none; align-items: center; }
  .submit-dock .submit-bar { padding-top: 0; }
  .submit-dock .dock-close { display: none; }
  .submit-dock .submit-bar textarea { height: 52vh; min-height: 220px; resize: none; font-size: 16px; }
  .submit-dock .submit-foot .btn-primary { height: 48px; }
  body.has-dock #app { padding-bottom: 0; }
}