/* === 70-gather.css — 採集地圖+採集清單 === 保序拆分自 styles.css(3753 行 > 2500 行鐵則)；cascade 順序 = 檔名數字序，index.html 依序載入 */
/* ─── 採集地圖頁 #/gather ─── */
.gather-page { display: flex; flex-direction: column; gap: var(--space-3, 0.75rem); }
/* 標題卡外觀 / 字級走 .list-header + .list-h1 共用模板（2026-06-10 統一 — 跟購物/監控/鬧鐘同款） */
.gather-clock {
  margin-left: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  font-family: var(--font-mono, monospace);
}
.gather-clock-et,
.gather-clock-real {
  font-size: var(--fs-h3, 1.0625rem);  /* 兩頁時鐘同字級（時鐘是核心功能資訊，比 body 大一階） */
  font-variant-numeric: tabular-nums;
}
.gather-clock-et { color: var(--accent); }
.gather-clock-real { color: var(--color-text-muted, #9aa3b8); }

.gather-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-4, 1rem);
  align-items: start;
}
.gather-sidebar {
  background: var(--gradient-tablet, var(--color-surface, #232a3d));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--color-border, #2f3650));
  border-radius: var(--radius-card, 12px);
  padding: var(--space-3, 0.75rem);
  position: sticky;
  top: calc(80px + var(--space-3, 0.75rem) + 68px);
  max-height: calc(100vh - 80px - var(--space-5, 1.5rem) - 68px);
  overflow-y: auto;
}
.gather-main { min-width: 0; }
.gather-search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  /* deep gradient + 2px accent 邊 + 三層 shadow（2026-06-10 去金改 cyan） */
  background: linear-gradient(180deg, rgba(19, 24, 38, 0.7) 0%, rgba(10, 14, 24, 0.75) 100%);
  /* 2026-06-14 移除 backdrop-filter: blur(8px) — 搜尋列在捲動路徑上，背後採集清單一捲就逐幀重模糊（compositor-bound）；底色已 0.7+ 不透明、blur 近乎不可見 */
  border: 2px solid rgba(78, 201, 208, 0.48);
  border-radius: var(--radius-card, 12px);
  padding: var(--space-3, 0.75rem) var(--space-5, 1.5rem);
  box-shadow:
    var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.25)),
    inset 0 1px 0 rgba(78, 201, 208, 0.18),
    0 0 28px -10px rgba(78, 201, 208, 0.25);
  margin-bottom: var(--space-3, 0.75rem);
}
.gather-search-bar:focus-within {
  box-shadow:
    var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.25)),
    inset 0 1px 0 rgba(78, 201, 208, 0.25),
    0 0 0 3px var(--color-accent-cyan-soft),
    0 0 40px -8px rgba(78, 201, 208, 0.4);
}
/* 採集地圖搜尋下方提示行 */
.gather-hint {
  margin: 0 0 var(--space-3, 0.75rem) var(--space-2, 0.5rem);
  color: var(--color-text-muted, #9aa3b8);
  opacity: 0.85;
}
.gather-hint .gather-hint-star {
  color: var(--accent);
  font-weight: 700;
  padding: 0 2px;
}
.gather-search {
  flex: 1; min-width: 0;
  background: transparent; border: none; color: inherit;
  font-family: inherit; outline: none;
}
.gather-result-count {
  flex-shrink: 0;
  color: var(--color-text-muted, #9aa3b8);
  font-weight: 600;
  font-family: var(--font-mono, monospace);
}
/* sidebar select 共用樣式（採集地圖地點 select + 搜尋頁 patch select） */
.gather-place-select,
.patch-select {
  width: 100%;
  background-color: rgba(15, 20, 32, 0.6);
  color: inherit;
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-card, 6px);
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  padding-right: 1.6rem;
  font-family: inherit;
  cursor: pointer;
  /* 去原生灰箭頭 → 自繪 chevron（修「灰的醜」），深色主題一致 */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4.5l4 4 4-4' fill='none' stroke='%239aa3b8' stroke-width='1.4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
}
.gather-place-select:hover,
.patch-select:hover { border-color: var(--accent); }
.gather-place-select:focus,
.patch-select:focus { outline: none; border-color: var(--accent); }
/* patch select 用 monospace 讓各版本「（場數）」對齊（搭配 buildPatchSelectOptions 的 nbsp padEnd）*/
.patch-select { font-family: var(--font-mono, monospace); }

.gather-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}
.gather-row {
  background: var(--gradient-tablet, var(--color-surface, #232a3d));
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-card, 8px);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  transition: border-color var(--transition-fast, .15s ease), background var(--transition-fast, .15s ease);
  /* 採集地圖內嵌：資訊左 + 小地圖右 */
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3, 0.75rem);
  align-items: stretch;
}
.gather-row-body { min-width: 0; display: flex; flex-direction: column; }
.gather-row-bottom { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-2, 0.5rem); }  /* 時間(spawn)+物品整組置卡片下方 */
.gather-row-map { align-self: start; }  /* 地圖維持頂端，不隨卡片高度拉伸 */
@media (max-width: 560px) { .gather-row { grid-template-columns: 1fr; } }
.gather-row:hover { border-color: rgba(78, 201, 208, 0.45); }
/* 節點類型細色條 — 全部中性化（hover 才微微透出資訊性） */
.gather-row--limited,
.gather-row--legend,
.gather-row--ephemeral { border-left: 3px solid var(--color-border, #2f3650); }
.gather-row--highlighted {
  border-color: var(--accent) !important;
  background: var(--color-accent-cyan-soft);
  animation: gather-pulse 1.5s ease-out 2;
}
@keyframes gather-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(78, 201, 208, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(78, 201, 208, 0); }
}

/* 重點：現在出現中 → 唯一保留色彩強調（cyan glow + 緩動），其他訊息一律中性 */
.gather-row--active {
  border-color: var(--color-accent-cyan, #4ec9d0) !important;
  background: linear-gradient(180deg, rgba(78, 201, 208, 0.06) 0%, rgba(78, 201, 208, 0.02) 100%);
  box-shadow: 0 0 12px rgba(78, 201, 208, 0.18);
  /* 拿掉持續 pulse 動畫 — 視覺干擾太強；只保留靜態 glow */
}

.gather-row-head {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  flex-wrap: wrap;
  margin-bottom: var(--space-1, 0.25rem);
}
/* 類型 — 固定寬 chip：每行同欄起點，掃讀對齊（user 反饋整齊化） */
.gather-type {
  flex: 0 0 168px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(15, 20, 32, 0.5);
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-sm, 6px);
  font-family: var(--font-mono, monospace);
  color: var(--color-text, #f5f5f5);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 地點 = 主要識別 → 加粗；座標 muted 縮在後面 */
.gather-place { color: inherit; font-weight: 600; }
.gather-coords {
  color: var(--color-text-muted, #9aa3b8);
  font-weight: 600;  /* 2026-06-12 灰字準則：座標導航必讀 */
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
}
/* ET 時刻表 + badge 群緊接類型左排（不再 margin-auto 推到右端、消除中間空白） */
.gather-head-right {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  white-space: nowrap;
}
/* badge 全部中性灰；只在 hover/active 時才用色 */
.gather-badge {
  padding: 1px 8px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--color-border, #2f3650);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-muted, #9aa3b8);
  font-family: var(--font-mono, monospace);
}
.gather-badge--limited,
.gather-badge--legend,
.gather-badge--ephemeral { /* 拿掉個別配色 */ }

.gather-spawn {
  margin: var(--space-2, 0.5rem) 0;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  background: rgba(15, 20, 32, 0.4);
  border-radius: var(--radius-card, 6px);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gather-spawn-etlist {
  color: var(--color-text-muted, #9aa3b8);
  font-weight: 600;
  font-family: var(--font-mono, monospace);
}
/* 倒數狀態列：左文字（固定寬欄 → 所有進度條同一 x 起跑）+ 右進度條 */
.gather-spawn-state { display: flex; align-items: center; gap: var(--space-3, 0.75rem); }
.gather-spawn-label { flex: 0 0 310px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gather-spawn-bar { flex: 1 1 120px; max-width: 420px; display: block; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
/* portal codex-progress 假設 div（block）；此處用 span 內嵌 — 內層填充條必須補 display 否則 width/height 失效 */
.gather-spawn-bar .codex-progress__bar { display: block; height: 100%; transition: width 1s linear; }
/* 出現中 = 綠色倒扣（剩餘窗口）；下次 = cyan 填滿（接近 spawn） */
.gather-spawn-state--active .codex-progress__bar { background: var(--color-success, #7dd87d); box-shadow: 0 0 8px rgba(125, 216, 125, 0.7); }
.gather-spawn-state--next .codex-progress__bar { background: var(--color-accent-cyan, #4ec9d0); opacity: 0.85; box-shadow: 0 0 8px rgba(78, 201, 208, 0.55); }
/* 行內迷你條（採集鬧鐘 row 用）+ 區塊內距 */
.gather-bar--mini { flex: 0 0 90px; width: 90px; display: inline-block; vertical-align: middle; margin-left: 8px; }
.gather-bar--ok .codex-progress__bar { background: var(--color-success, #7dd87d); }
.gatherlist-section .mb-inset { padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem); margin-top: var(--space-2, 0.5rem); }
/* 重點：出現中字樣 — 唯一上色之處（cyan） */
.gather-spawn-active {
  color: var(--color-accent-cyan, #4ec9d0);
  font-weight: 600;
}
/* 即將出現 — 中性，不搶 active 焦點 */
.gather-spawn-next {
  color: var(--color-text-muted, #9aa3b8);
  font-weight: 600;
}
.gather-spawn [data-countdown-end],
.gather-spawn [data-countdown-start] {
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
}

.gather-folklore {
  margin: 4px 0;
  font-weight: 600;
  color: var(--color-text-muted, #9aa3b8);
}
.gather-folklore a { color: var(--accent); text-decoration: none; }
.gather-folklore a:hover { text-decoration: underline; }

.gather-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-1, 0.25rem);
}
.gather-item-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  background: rgba(78, 201, 208, 0.08);  /* 微 accent 底 — 視覺加重，跟一般灰底節點資訊區隔 */
  border: 1px solid rgba(78, 201, 208, 0.30);
  border-radius: var(--radius-sm, 6px);
  color: inherit;
  text-decoration: none;
  transition: all .15s ease;
}
.gather-item-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(78, 201, 208, 0.18);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(78, 201, 208, 0.25);
}
.gather-item-chip:active { transform: translateY(0); }
.gather-item-chip img {
  border-radius: 3px;
  flex-shrink: 0;
}
.gather-item-chip--hidden {
  opacity: 0.7;
  border-style: dashed;
}
.gather-item-chip--collect {
  border-color: rgba(78, 201, 208, 0.4);
}
.gather-chip-collect {
  margin-left: 4px;
  color: var(--accent);
  font-family: var(--font-mono, monospace);
  background: var(--color-accent-cyan-soft);
  padding: 0 5px;
  border-radius: var(--radius-sm, 6px);
  
}

/* 不可交易 / 不可上市物品的查價區塊提示（不打 API） */
.price-not-marketable {
  text-align: center;
  padding: var(--space-5, 1.5rem);
  font-weight: 600;
  color: var(--color-text-muted, #9aa3b8);
  background: rgba(15, 20, 32, 0.4);
  border: 1px dashed var(--color-border, #2f3650);
  border-radius: var(--radius-card, 8px);
}

@media (max-width: 900px) {
  .gather-layout { grid-template-columns: 1fr; }
  .gather-sidebar { position: static; max-height: none; }
  .gather-row-head { flex-direction: column; align-items: flex-start; }
  .gather-type { flex-basis: auto; }  /* column 方向 flex-basis=主軸高度，必須歸 auto */
  .gather-head-right { margin-left: 0; white-space: normal; }
  .gather-spawn-state { flex-wrap: wrap; }
  .gather-spawn-label { flex-basis: auto; }
}

/* 採集 chip 內含 ⭐ 切換按鈕 — chip 本身 <span>，內含 <a>+<button> */
.gather-item-chip-body {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);     /* 主色 — 物品名是這 row 的「主要 action」 */
  text-decoration: none;
  font-weight: 600;              /* bold 比節點資訊（地點 / 座標）重 */
  letter-spacing: 0.02em;
}
.gather-item-chip-body:hover { color: var(--accent); text-decoration: underline; }
.gather-add-list {
  background: transparent;
  border: none;
  color: var(--color-text-muted, #9aa3b8);
  cursor: pointer;
  padding: 0 var(--space-1, 0.25rem);
  font-size: 1.3em;  /* 跟 chip 內 codex-body 字級的 1.3 倍，視覺加大 ~6px */
  line-height: 1;
  transition: color var(--transition-fast, .15s ease), transform var(--transition-fast, .15s ease);
}
.gather-add-list:hover { color: var(--accent); transform: scale(1.25); }
.gather-item-chip--in-list { border-color: var(--accent); }
.gather-item-chip--in-list .gather-add-list { color: var(--accent); }

/* 全部檢視 — 所屬清單名小標籤（跟在物品名後） */
.gatherlist-tag {
  background: var(--color-accent-cyan-soft);
  color: var(--accent);
  border: 1px solid rgba(78, 201, 208, 0.35);
  border-radius: var(--radius-xs, 4px);
  padding: 0 var(--space-1, 4px);
  margin-left: var(--space-1, 4px);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ☆ 多清單 picker popover — 掛 body、fixed 定位、邊緣 clamp 由 JS 算 */
.gather-picker {
  position: fixed;
  z-index: var(--z-dropdown, 100);
  min-width: 180px;
  max-width: 260px;
  background: var(--color-surface, #182230);
  border: 1px solid var(--color-border, #2a3b52);
  border-radius: var(--radius-sm, 6px);
  box-shadow: var(--shadow-mystical, 0 8px 24px rgba(0, 0, 0, 0.5));
  padding: var(--space-1, 4px);
}
.gather-picker-title {
  padding: var(--space-1, 4px) var(--space-2, 8px);
}
.gather-picker-row {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  width: 100%;
  background: transparent;
  border: none;
  color: var(--color-text, #e8ecf4);
  cursor: pointer;
  padding: var(--space-2, 8px);
  text-align: left;
  transition: background var(--transition-fast, 0.15s ease);
}
.gather-picker-row:hover { background: var(--color-surface-hover, #1f2c3e); }
.gather-picker-check {
  width: 1em;
  color: var(--accent);
  font-weight: var(--fw-bold, 700);
  flex-shrink: 0;
}
.gather-picker-row--in .gather-picker-name { color: var(--accent); }
.gather-picker-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 來源 section header 內的「加入採集清單」按鈕 */
.source-add-glist {
  background: transparent;
  border: 1px solid var(--color-border, #2f3650);
  color: var(--color-text-muted, #9aa3b8);
  border-radius: var(--radius-sm, 6px);
  padding: 2px 10px;
  font-family: inherit;
  
  cursor: pointer;
  transition: border-color var(--transition-fast, .15s ease), color var(--transition-fast, .15s ease), background var(--transition-fast, .15s ease);
}
.source-add-glist:hover { border-color: var(--accent); color: var(--accent); }
.source-add-glist--active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--color-accent-cyan-soft);
}

/* ─── 採集清單頁 #/gatherlist ─── */
.gatherlist-page { display: flex; flex-direction: column; gap: var(--space-3, 0.75rem); }
/* ─── 採集清單 header — 跟 shoplist 同模板（左標題+profile，右說明）─── */
.gatherlist-header {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
  padding: var(--space-3, 0.75rem) var(--space-5, 1.5rem);
}
.gatherlist-header-main {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.gatherlist-header-aside {
  flex: 0 0 auto;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-left: 2px solid rgba(78, 201, 208, 0.20);
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-end;
  font-size: 0.85em;
  max-width: 280px;
}
.gatherlist-h1 {
  margin: 0;
  background: none;
  background-clip: text; -webkit-background-clip: text;
  -webkit-text-fill-color: var(--accent);
  color: var(--color-text);
  letter-spacing: 0.04em;
  font-size: 1.15em;
  white-space: nowrap;
}
.gatherlist-count {
  display: inline-block;
  min-width: 24px;
  padding: 0 8px;
  margin-left: 4px;
  border-radius: var(--radius-sm, 6px);
  background: rgba(78, 201, 208, 0.18);
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
  font-family: var(--font-mono, monospace);
  font-size: 0.78em;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
}

/* profile bar 跟 shop-profile-bar 同設計 */
.gatherlist-profile-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 0.5rem);
}
.gatherlist-profile-select {
  background: rgba(15, 20, 32, 0.6);
  border: 1px solid var(--color-border, #2f3650);
  color: var(--accent);
  padding: 4px var(--space-2, 0.5rem);
  border-radius: var(--radius-card, 6px);
  font-family: inherit;
  cursor: pointer;
  min-width: 200px;
  transition: border-color var(--transition-fast, .15s ease);
}
.gatherlist-profile-select:hover { border-color: var(--accent); }
.gatherlist-profile-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--color-accent-cyan-soft); }

.gatherlist-profile-btn {
  background: rgba(15, 20, 32, 0.5);
  border: 1px solid var(--color-border, #2f3650);
  color: var(--color-text-muted, #9aa3b8);
  padding: 4px var(--space-3, 0.75rem);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.88em;
  letter-spacing: 0.03em;
  transition: all .18s ease;
}
.gatherlist-profile-btn--new:hover {
  border-color: var(--color-success, #7dd87d);
  color: var(--color-success, #7dd87d);
  background: rgba(125, 216, 125, 0.12);
  box-shadow: 0 0 0 2px rgba(125, 216, 125, 0.18);
  transform: translateY(-1px);
}
.gatherlist-profile-btn--rename:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--color-accent-cyan-soft);
  box-shadow: 0 0 0 2px var(--color-accent-cyan-soft);
  transform: translateY(-1px);
}
.gatherlist-profile-btn--delete:hover {
  border-color: var(--color-danger, #e57373);
  color: var(--color-danger, #e57373);
  background: rgba(229, 115, 115, 0.12);
  box-shadow: 0 0 0 2px rgba(229, 115, 115, 0.18);
  transform: translateY(-1px);
}
.gatherlist-profile-btn:active { transform: translateY(0); }

/* 鬧鐘開關 toggle — checkbox 變 pill 樣式（aside 內） */
.gatherlist-alarm-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: 4px var(--space-3, 0.75rem);
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--transition-fast, .15s ease), background var(--transition-fast, .15s ease);
}
.gatherlist-alarm-toggle:hover { border-color: var(--accent); }
.gatherlist-alarm-toggle input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px; height: 14px;
  cursor: pointer;
}
.gatherlist-alarm-toggle:has(input:checked) {
  background: var(--color-accent-cyan-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.gatherlist-header-aside .gather-clock {
  font-family: var(--font-mono, monospace);
  color: var(--color-text-muted, #9aa3b8);
  font-size: 0.95em;
  display: flex; gap: var(--space-2, 0.5rem);
}
.gatherlist-clear {
  background: transparent;
  border: 1px solid var(--color-border, #2f3650);
  color: var(--color-text-muted, #9aa3b8);
  border-radius: var(--radius-sm, 6px);
  padding: 4px 12px;
  font-family: inherit;
  /* font-size 由 codex-small class 決定 */
  cursor: pointer;
}
.gatherlist-clear:hover { border-color: var(--color-danger, #d04e4e); color: var(--color-danger, #d04e4e); }

.gatherlist-empty {
  padding: var(--space-6, 2rem);
  text-align: center;
}
.gatherlist-empty a { color: var(--accent); }

.gatherlist-section {
  padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
}
.gatherlist-section h3 { margin: 0 0 var(--space-3, 0.75rem); }

.gatherlist-list { display: flex; flex-direction: column; gap: var(--space-2, 0.5rem); }
.gatherlist-row {
  display: grid;
  /* 物品 | 類型 | 📍 地點(X,Y) | [spacer] | 出現狀態 | 動作
     固定寬度確保跨 row 對齊（max-content 在獨立 grid 各行算各的，會錯位）
     2026-05-14 字級放大後 widths +30~60px 容字 */
  grid-template-columns:
    280px   /* 物品 icon + 名稱（容 8-10 字繁中 codex-h3） */
    200px   /* 類型（傳說的礦場 Lv100） */
    380px   /* 📍 地點 + (X:99.9, Y:99.9)（容 6 字地名如龍堡參天高地） */
    1fr     /* spacer */
    auto    /* 出現狀態 */
    auto;   /* 動作 */
  align-items: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  background: rgba(15, 20, 32, 0.4);
  border: 1px solid rgba(78, 201, 208, 0.08);
  border-radius: var(--radius-card, 8px);
}
.gatherlist-row--active {
  border-color: var(--color-accent-cyan, #4ec9d0);
  background: rgba(78, 201, 208, 0.06);
}
.gatherlist-cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gatherlist-cell-place .gatherlist-coords {
  margin-left: 4px;
  color: var(--color-text-muted, #9aa3b8);
}
.gatherlist-cell-time {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  white-space: nowrap;
}
.gatherlist-time-sub {
  /* ET / 真實時間 副行：字級跟主行一致（不縮小），顏色稍淡 */
  color: var(--color-text-muted, #9aa3b8);
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
}
.gatherlist-cell-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  white-space: nowrap;
}
.gatherlist-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-fast, .15s ease);
}
.gatherlist-item:hover { color: var(--accent); }
.gatherlist-item img { border-radius: 3px; flex-shrink: 0; }
.gatherlist-type {
  font-family: var(--font-mono, monospace);
  color: var(--color-text, #f5f5f5);  /* 中性 — 類型只是資訊不該搶色 */
  /* font-size 由 codex-small class 決定 */
}
.gatherlist-place { color: inherit; }
/* 重點：出現中 → cyan（唯一保留色彩） */
.gatherlist-spawn-active { color: var(--color-accent-cyan, #4ec9d0); font-weight: 600; }
/* 即將出現 → 中性，避免跟 active 搶焦點 */
.gatherlist-spawn-next { color: var(--color-text-muted, #9aa3b8); }
.gatherlist-spawn-active [data-countdown-end],
.gatherlist-spawn-next [data-countdown-start] {
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
}
.gatherlist-pin {
  color: var(--accent);
  text-decoration: none;
  /* font-size 由 codex-small class 決定 */
  opacity: 0.7;
}
.gatherlist-pin:hover { opacity: 1; }
.gatherlist-remove {
  background: transparent;
  border: none;
  color: var(--color-text-muted, #9aa3b8);
  cursor: pointer;
  /* font-size 由 codex-body class 決定 */
  padding: 0 4px;
  transition: color var(--transition-fast, .15s ease);
}
.gatherlist-remove:hover { color: var(--color-danger, #d04e4e); }

/* 採集清單 header 下方提示行（精簡版：鬧鐘/Discord icon 速查 + 🧹 清空清單） */
.gatherlist-hint {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  flex-wrap: wrap;
  margin: 0 0 var(--space-3, 0.75rem) var(--space-2, 0.5rem);
  color: var(--color-text-muted, #9aa3b8);
}
.gatherlist-hint .gatherlist-hint-bell { color: var(--accent); font-weight: 600; }
.gatherlist-hint .gatherlist-hint-discord { color: var(--accent, #4ec9d0); font-weight: 600; padding: 0 1px; }
.gatherlist-hint .gatherlist-clear { margin-left: auto; }

/* Per-item Discord 通知開關（📢 開 / 🔕 關） */
.gatherlist-discord {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.45;
  transition: opacity var(--transition-fast, .15s ease), transform var(--transition-fast, .15s ease);
}
.gatherlist-discord:hover { opacity: 1; transform: scale(1.15); }
.gatherlist-discord.is-on { opacity: 0.95; }

.gatherlist-normal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--space-3, 0.75rem);
}
.gatherlist-normal-item {
  background: rgba(15, 20, 32, 0.4);
  border: 1px solid rgba(78, 201, 208, 0.08);
  border-radius: var(--radius-card, 8px);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
}
.gatherlist-normal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2, 0.5rem);
  padding-bottom: var(--space-1, 0.25rem);
  border-bottom: 1px solid rgba(78, 201, 208, 0.08);
}
.gatherlist-places { display: flex; flex-direction: column; gap: 2px; }
.gatherlist-place-row {
  display: flex;
  align-items: center;
  gap: 6px;
  /* font-size 由 codex-small class 決定 */
}
.gatherlist-place-type {
  font-family: var(--font-mono, monospace);
  color: var(--accent);
  flex-shrink: 0;
  min-width: 70px;
}
.gatherlist-place-name { color: inherit; flex: 1; }
.gatherlist-coords {
  color: var(--color-text-muted, #9aa3b8);
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
}
.gatherlist-common { color: var(--color-text-muted, #9aa3b8); font-style: italic; }
.gatherlist-more { color: var(--color-text-muted, #9aa3b8); font-style: italic; margin-top: 2px; }

.gatherlist-no-source-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gatherlist-no-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(15, 20, 32, 0.6);
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-sm, 6px);
  color: inherit;
  text-decoration: none;
  /* font-size 由 codex-small class 決定 */
}
.gatherlist-no-source:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 800px) {
  .gatherlist-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "item  actions"
      "type  type"
      "place place"
      "time  time";
    gap: 4px var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  }
  .gatherlist-cell-item { grid-area: item; }
  .gatherlist-cell-type { grid-area: type; }
  .gatherlist-cell-place { grid-area: place; white-space: normal; }
  .gatherlist-cell-time { grid-area: time; }
  .gatherlist-cell-actions { grid-area: actions; }
  .gatherlist-normal-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   🛒 購物清單頁 (#/shoplist) 樣式
   ─── 跟 watch-page / gatherlist-page 平行；混色用 portal token，
       禁寫死 hex；卡片走 codex-tablet 容器、徽章 codex-badge alike。
   ═══════════════════════════════════════════════════════════════════ */

/* 詳情頁 action-bar 的 🛒 加入購物清單 按鈕 — 走 watch-add-btn 同模式 */
.shop-add-btn {
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  border-radius: var(--radius-sm, 6px);
  background: rgba(15, 20, 32, 0.6);
  border: 1px solid var(--color-border, #2f3650);
  color: inherit; cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.04em;
  transition: all var(--transition-fast, .15s ease);
}
.shop-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.shop-add-btn.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--color-accent-cyan-soft);
  font-weight: 600;
}

/* 配方詳細頁 — 每行 🛒 小按鈕（pill 樣式跟 .craft-src-glist 一致避免 baseline 抖動） */
.craft-src-shop {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: 1px solid rgba(78, 201, 208, 0.25);
  border-radius: var(--radius-sm, 6px);
  padding: 2px var(--space-2, 0.5rem);
  cursor: pointer;
  font-family: inherit;
  color: var(--color-text-muted, #9aa3b8);
  vertical-align: middle;
  white-space: nowrap;
  transition: all var(--transition-fast, .15s ease);
}
.craft-src-shop:hover { border-color: var(--accent); background: rgba(78, 201, 208, 0.08); color: var(--accent); }
.craft-src-shop.in-shop {
  border-color: var(--accent);
  background: var(--color-accent-cyan-soft);
  color: var(--accent);
  font-weight: 600;
}

/* 同 source cell 內所有 chip 共用 baseline — 避免 emoji / 文字混排造成上下抖動 */
.craft-src-recipe,
.craft-src-glist {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  white-space: nowrap;
}
/* 「兌換 / 交易購買」fallback label — 無採集 / 釣魚 / 副本 / 配方來源時提示物品由商店或交易取得 */
.craft-src-vendor {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-2, 0.5rem);
  color: var(--color-text-muted, #9aa3b8);
  font-size: 0.88em;
  font-style: italic;
  white-space: nowrap;
}

/* 來源 cell 內容統一 wrapper — 跨 row 各 chip baseline 對齊 */
.craft-source-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  row-gap: 4px;
  width: 100%;
}
.craft-source-sep {
  color: var(--color-text-muted, #9aa3b8);
  opacity: 0.5;
  user-select: none;
}
/* ☆ / 🛒 已拆出來源 cell，獨立「加入清單」column；以下 .craft-add-cell 樣式 */
.craft-add-cell {
  white-space: nowrap;
  text-align: right;
  padding-right: var(--space-3, 0.75rem);
  vertical-align: middle;
}
.craft-add-cell-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.craft-add-icon { font-size: 1em; }
.craft-add-label { margin-left: 4px; font-size: 0.88em; }

/* ℹ️ 補充來源 modal — 物品詳情頁右上按鈕點開的彈窗 */
.source-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4, 1rem);
}
.source-modal[hidden] { display: none; }
.source-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 20, 0.72);   /* 2026-06-14 移除 backdrop-filter blur(4px)（背後表格/貓一動就逼整片重模糊 → 開來源彈窗卡）；底色 0.6→0.72 補遮蔽 */
  cursor: pointer;
}
.source-modal-card {
  position: relative;
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.source-modal-close {
  position: absolute;
  top: var(--space-2, 0.5rem);
  right: var(--space-2, 0.5rem);
  width: 28px; height: 28px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--color-border, #2f3650);
  background: transparent;
  color: var(--color-text-muted, #9aa3b8);
  cursor: pointer;
  font-size: 0.9em;
  line-height: 1;
  transition: all var(--transition-fast, .15s ease);
}
.source-modal-close:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--color-accent-cyan-soft);
}
.source-modal-header { margin-bottom: var(--space-3, 0.75rem); padding-right: var(--space-5, 1.5rem); }
.source-modal-header h3 { margin: 0 0 4px 0; }
.source-modal-sub { margin: 0; color: var(--color-text-muted, #9aa3b8); font-size: 0.85em; }
.source-modal-body { display: flex; flex-direction: column; gap: var(--space-3, 0.75rem); }
.src-modal-sect { padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem); border-left: 2px solid rgba(78, 201, 208, 0.3); background: rgba(78, 201, 208, 0.04); }
.src-modal-sect h4 { margin: 0 0 6px 0; color: var(--accent); font-size: 0.95em; }
.src-modal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.src-modal-list li { padding: 2px 0; line-height: 1.5; }
.src-modal-list a { color: var(--accent); text-decoration: none; }
.src-modal-list a:hover { text-decoration: underline; }
.src-modal-tag { display: inline-block; min-width: 64px; color: var(--color-text-muted, #9aa3b8); font-family: var(--font-mono, monospace); font-size: 0.85em; margin-right: 4px; }
.src-modal-meta { color: var(--color-text-muted, #9aa3b8); font-size: 0.85em; }
.src-modal-more { color: var(--color-text-muted, #9aa3b8); font-style: italic; }
.src-modal-empty p { margin: 4px 0; }
.src-modal-empty .codex-small { color: var(--color-text-muted, #9aa3b8); }
.src-modal-links { border-left-color: var(--color-accent-cyan, #4ec9d0); background: rgba(78, 201, 208, 0.05); }
.src-modal-links h4 { color: var(--color-accent-cyan, #4ec9d0); }
.src-modal-jump { margin: 4px 0 0 0; text-align: right; }
.src-modal-jump-btn {
  padding: 4px var(--space-3, 0.75rem);
  border-radius: var(--radius-sm, 6px);
  border: 1px solid rgba(78, 201, 208, 0.4);
  background: transparent;
  color: var(--accent);
  font-family: inherit;
  font-size: 0.85em;
  cursor: pointer;
  transition: all var(--transition-fast, .15s ease);
}
.src-modal-jump-btn:hover { background: var(--color-accent-cyan-soft); border-color: var(--accent); }

/* 配方詳細頁 header 右側「🛒 一鍵全加材料」按鈕 */
/* 配方頁工具列 — 共用 header 收編後，求解 / 隱藏水晶 / 全加購物 移到 header 下方獨立 bar */
.craft-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--space-2, 0.5rem);
  align-items: center;
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
}
.craft-toolbar-meta { color: var(--color-text-muted, #9aa3b8); font-weight: 600; }
.craft-header-actions {
  margin-left: auto;
  display: flex; gap: var(--space-2, 0.5rem);
  align-items: center;
  flex-wrap: wrap;
}
.craft-crystal-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2, 0.5rem);
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--color-border, #2f3650);
  color: var(--color-text-muted, #9aa3b8);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--transition-fast, .15s ease), color var(--transition-fast, .15s ease);
}
.craft-crystal-toggle:hover { border-color: var(--accent); color: var(--accent); }
.craft-crystal-toggle input[type="checkbox"] { margin: 0; cursor: pointer; }
#craftBatchShopBtn {
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-radius: var(--radius-sm, 6px);
  background: rgba(15, 20, 32, 0.6);
  border: 1px solid var(--color-border, #2f3650);
  color: inherit; cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.03em;
  transition: all var(--transition-fast, .15s ease);
}
#craftBatchShopBtn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--color-accent-cyan-soft);
}