/* === 80-shop.css — 購物清單(表格/bulk/衍生清單)+窄畫面響應式 === 保序拆分自 styles.css(3753 行 > 2500 行鐵則)；cascade 順序 = 檔名數字序，index.html 依序載入 */
/* ─── shop-page 主容器 ─── */
.shop-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);  /* 卡片間隙縮小（user 反饋）；mb-card 自帶 margin-bottom 在下面歸零防雙重間距 */
}
.shop-page .mb-card { margin-bottom: 0; }
.shop-header {
  position: relative;
  padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
}
.shop-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;  /* 比預設 h2 略小，配合 header 變矮 */
  white-space: nowrap;
}
.shop-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;
}

/* ─── header layout — 左半標題+profile bar, 右半說明 ─── */
.shop-header {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
  padding: var(--space-3, 0.75rem) var(--space-5, 1.5rem);
}
.shop-header-main {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
/* ─── profile 切換條 ─── */
.shop-profile-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 0.5rem);
}
.shop-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);
}
.shop-profile-select:hover { border-color: var(--accent); }
.shop-profile-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--color-accent-cyan-soft); }

/* profile 動作按鈕：三色 hover 特效對應動作語意 */
.shop-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;
}
/* 新增 — 綠色（建立 = positive） */
.shop-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);
}
/* 改名 — accent（編輯 = 主色） */
.shop-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);
}
/* 刪除 — 紅色（破壞 = danger） */
.shop-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);
}
.shop-profile-btn:active { transform: translateY(0); }

/* pending 狀態（cache 還沒 fetch）— warn 橘 */
.shop-cell-pending {
  color: var(--color-warn, #e8a45a);
  opacity: 0.75;
  font-style: italic;
}

/* ─── 工具列：加入道具 + 查價 / 重查 + 批次路線 + 清空 — 單行收齊（2026-06-10 重構） ─── */
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  position: relative;
  z-index: 5;  /* 加入道具 dropdown 要蓋過下方表格卡 */
}
.shop-toolbar .shop-add-box { flex: 1 1 280px; min-width: 220px; }
/* 工具列與清單表格融合成一張卡（user 反饋：兩個同級框讓清單像被藏在盒子裡）
   :has 限定有表格時才融合 — 空清單時工具列維持獨立完整卡 */
.shop-page:has(.shop-list-wrap) .shop-toolbar {
  border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0;
  border-bottom: 0;
}
.shop-page #shop-list-area .shop-list-wrap {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: calc(-1 * var(--space-2, 0.5rem));  /* 抵銷 .shop-page gap，無縫相接 */
}
/* 融合卡統一平面底色 — mb-card 漸層在接縫處重啟會出現色階斷層（user 反饋不連貫） */
.shop-page:has(.shop-list-wrap) .shop-toolbar,
.shop-page #shop-list-area .shop-list-wrap {
  background: color-mix(in srgb, var(--color-surface, #232a3d) 78%, transparent);
}
.shop-toolbar .codex-btn:disabled { opacity: 0.5; cursor: wait; }
.shop-toolbar-sep { width: 1px; align-self: stretch; min-height: 24px; background: var(--color-border, #2f3650); margin: 0 var(--space-1, 0.25rem); }
.shop-bulk-group-label {
  color: var(--color-text-muted, #9aa3b8);
  font-size: 0.75em;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ─── shop-summary 全清單估算 panel ─── */
.shop-summary {
  padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
  position: relative;
}
/* inline 模式 — 黏在 shop-list panel 底部，無 codex-tablet 外殼，用 border-top 跟 row 分隔 */
.shop-summary--inline {
  /* 降層級（user 反饋：合計列視覺壓過清單本體）— 更薄、更暗、邊線更細 */
  padding: var(--space-2, 0.5rem) var(--space-5, 1.5rem);
  border-top: 1px solid rgba(78, 201, 208, 0.12);
  background: rgba(8, 12, 20, 0.35);
}
.shop-summary-totals {
  display: flex; flex-wrap: wrap; gap: var(--space-3, 0.75rem) var(--space-4, 1rem);
  align-items: baseline;
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 0.88em;
  color: var(--color-text-muted, #9aa3b8);  /* 整行退灰 — 只讓「推薦」金額跳出 */
}
.shop-summary-cell strong {
  color: var(--color-text-muted, #9aa3b8);
  font-weight: 600;
  margin-left: 4px;
}
.shop-summary-cell.is-rec { color: var(--color-text, #f5f5f5); }
.shop-summary-cell.is-rec strong {
  color: var(--money, #e6c068);  /* 結論金額 = 金幣語意 */
  font-size: 1.1em;
  font-weight: 700;
}
.shop-summary-savings {
  color: var(--color-success, #7dd87d);
  font-weight: 600;
  margin-left: var(--space-2, 0.5rem);
}
.shop-summary-world {
  margin-top: var(--space-3, 0.75rem);
  display: flex; flex-wrap: wrap; gap: var(--space-2, 0.5rem);
  align-items: center;
}
.shop-summary-world-label {
  color: var(--color-text-muted, #9aa3b8);
  font-weight: 600;
  margin-right: var(--space-1, 0.25rem);
}
/* summary 行單 row inline 版 — 「全買 · 全做 · 推薦 · 🌍 跑街」併入同一行 */
.shop-summary-sep {
  color: var(--color-text-muted, #9aa3b8);
  opacity: 0.4;
  user-select: none;
}
.shop-summary-world-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.shop-summary-world-inline .shop-world-chip {
  padding: 1px 6px;
  font-size: 0.85em;
}
.shop-world-chip {
  display: inline-flex; gap: 4px;
  padding: 1px var(--space-2, 0.5rem);
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  border: 1px solid rgba(78, 201, 208, 0.15);
  color: var(--color-text-muted, #9aa3b8);
  font-family: var(--font-mono, monospace);
}
.shop-world-chip strong { color: var(--color-text, #f5f5f5); font-weight: 600; }

/* ─── 加入道具 inline 搜尋（工具列內，dropdown absolute 撐出） ─── */
.shop-add-box {
  position: relative;
}
#shop-add-input {
  width: 100%;
  height: 38px;  /* 跟工具列 codex-btn 同高，整列對齊 */
  background: rgba(15, 20, 32, 0.6);
  color: inherit;
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-sm, 6px);
  padding: 0 var(--space-3, 0.75rem);
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition-fast, .15s ease);
}
#shop-add-input:focus { border-color: var(--accent); }
.shop-add-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--color-surface, #232a3d);
  border: 2px solid var(--accent);
  border-radius: var(--radius-card, 8px);
  max-height: 420px;
  overflow-y: auto;
  z-index: var(--z-popover, 100);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(78, 201, 208, 0.20);
}
.shop-add-suggest {
  display: flex; align-items: center; gap: var(--space-2, 0.5rem);
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--color-border, #2f3650);
  padding: 8px var(--space-3, 0.75rem);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: inherit;
  min-height: 40px;
  transition: background var(--transition-fast, .15s ease);
}
.shop-add-suggest:last-child { border-bottom: 0; }
.shop-add-suggest:hover { background: var(--color-accent-cyan-soft); }
.shop-add-suggest:focus { background: var(--color-accent-cyan-soft); outline: none; }
.shop-add-suggest-name {
  flex: 1;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-add-suggest-meta {
  color: var(--color-text-muted, #9aa3b8);
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  font-size: 0.85em;
  flex-shrink: 0;
}
/* 已加入購物清單的 suggestion — 暗色背景 + 右側 ✓ ×N 徽章；再點繼續 +1 */
.shop-add-suggest.is-added {
  background: rgba(125, 216, 125, 0.08);
}
.shop-add-suggest.is-added:hover {
  background: rgba(125, 216, 125, 0.15);
}
.shop-add-suggest-added {
  display: inline-block;
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: var(--radius-sm, 6px);
  background: rgba(125, 216, 125, 0.15);
  border: 1px solid rgba(125, 216, 125, 0.45);
  color: var(--color-success, #7dd87d);
  font-family: var(--font-mono, monospace);
  font-size: 0.8em;
  font-weight: 600;
  white-space: nowrap;
}
.shop-add-empty {
  padding: var(--space-3, 0.75rem);
  color: var(--color-text-muted, #9aa3b8);
  text-align: center;
}
.shop-add-hint {
  margin-top: var(--space-2, 0.5rem);
  color: var(--color-text-muted, #9aa3b8);
  font-size: 0.9em;
}

/* ─── empty state ─── */
.shop-empty {
  padding: var(--space-6, 2rem);
  text-align: center;
  color: var(--color-text-muted, #9aa3b8);
}
.shop-empty-hint { opacity: 0.8; margin-top: var(--space-2, 0.5rem); }
.shop-empty-hint a { color: var(--accent); }

/* ─── shop-list 真表格化（<table>）— 所有 row 共用同欄寬，header 跟 data 自動對齊 ─── */
.shop-list-wrap {
  position: relative;
  padding: 0;
  overflow: hidden;
}
.shop-list {
  width: 100%;
  border-collapse: collapse;
  /* fixed：欄寬由 header row 鎖死 — HQ 切換 / 查價更新改變 cell 內容時，欄位不再左右跳動 */
  table-layout: fixed;
}
/* 各欄鎖寬（道具欄不設寬 → 吃全部剩餘空間）；th 無個別 class 的欄用 nth-child 對位
   ⚠ fixed layout 下漏設寬的欄會跟道具欄平分 slack（採集欄曾因此吃掉品名空間） */
.shop-list .shop-head-row th:nth-child(4)  { width: 92px;  }  /* 伺服器（最長 4 字） */
.shop-list .shop-head-row th:nth-child(5)  { width: 124px; }  /* 直接買（7 位數 + HQ/NQ tag） */
.shop-list .shop-head-row th:nth-child(6)  { width: 104px; }  /* 配方做 */
.shop-list .shop-head-row th:nth-child(7)  { width: 316px; }  /* 最佳偵測（2×140 slot + gap） */
.shop-list .shop-head-row th:nth-child(8)  { width: 172px; }  /* 手動調整（自動/鎖買/鎖做） */
.shop-list .shop-head-row th:nth-child(9)  { width: 52px;  }  /* 採集（☆ 一顆鈕） */
.shop-list .shop-head-row th:nth-child(10) { width: 140px; }  /* 數量 ± input + ✕ */
.shop-list th,
.shop-list td {
  padding: 6px var(--space-3, 0.75rem);
  vertical-align: middle;
  border-bottom: 1px solid rgba(78, 201, 208, 0.08);
}
.shop-list tbody tr:last-child td { border-bottom: 0; }
.shop-list tbody tr {
  height: 52px;  /* row 高度鎖死 — 全 HQ/NQ 切換時 chip / quality tag / HQ icon 變化不再抖 row */
  transition: background var(--transition-fast, .15s ease);
}
/* HQ icon 內聯放 name 後面 — 用 middle 對齊避免 baseline 把 row 撐高 */
.shop-cell-name-text .shop-hq-icon {
  vertical-align: middle;
  margin-left: 4px;
}
/* 斑馬紋 — 行內容從深底浮出（搭配工具列融合，清單主體一眼可辨） */
.shop-list tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.025); }
.shop-list tbody tr:hover { background: rgba(78, 201, 208, 0.06); }

/* 行首色條只留錯誤行（2026-06-10：買/做色條與「可購買/可製作」chips 重複，
   且只有資料行有 → 卡片左緣變斷續虛線（user 反饋顏色疊加不連貫），移除） */
.shop-list tbody tr.shop-row--err td:first-child { box-shadow: inset 3px 0 0 0 rgba(229, 115, 115, 0.50); }

/* header row */
.shop-head-row th {
  background: rgba(20, 27, 42, 0.92);  /* 亮一階 + 近實底 — 表頭醒目（user 反饋清單像藏在卡裡） */
  border-bottom: 2px solid color-mix(in srgb, var(--accent, #4ec9d0) 35%, transparent);
  padding-top: 5px;
  padding-bottom: 5px;
  position: sticky;
  top: 0;
  z-index: 2;
  font-weight: 500;
}
.shop-cell-head {
  color: var(--color-text-muted, #9aa3b8);
  font-weight: 600;  /* 2026-06-12 灰字準則：表頭必讀 */
  font-family: var(--font-mono, monospace);
  font-size: 0.85em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: help;
  text-align: center;   /* 統一置中 — 所有欄位 header 視覺一致，不分數字 / 文字 */
  font-weight: 500;
  white-space: nowrap;
}

/* HQ 欄（最左） */
.shop-cell-hq-col {
  width: 104px;  /* thead「全NQ｜全HQ」一行並排 */
  padding-left: 12px;
  padding-right: 4px;
  text-align: left;
  white-space: nowrap;
}
/* HQ toggle label：「HQ ☐」inline 文字 */
.shop-cell-hq-col .shop-hq-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.shop-hq-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.78em;
  color: var(--color-text-muted, #9aa3b8);
  letter-spacing: 0.05em;
}
.shop-cell-hq-col .shop-hq-toggle:has(input:checked) .shop-hq-label {
  color: var(--accent);
  font-weight: 600;
}
/* thead HQ 欄 — 全切 NQ/HQ 快速按鈕（強制單行並排，header 列才壓得矮） */
.shop-hq-bulk-group {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 3px;
  align-items: center;
  white-space: nowrap;
}
.shop-hq-bulk { white-space: nowrap; }
.shop-hq-bulk {
  padding: 1px 6px;
  font-family: var(--font-mono, monospace);
  font-size: 0.7em;
  background: transparent;
  border: 1px solid rgba(78, 201, 208, 0.3);
  border-radius: var(--radius-sm, 6px);
  color: var(--color-text-muted, #9aa3b8);
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: all var(--transition-fast, .15s ease);
}
.shop-hq-bulk:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--color-accent-cyan-soft);
}

/* HQ 徽章 — 勾選後 name 後面追加遊戲內 HQ icon 圖（user 要求：唯一用圖示處） */
.shop-name-hq-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
}
.shop-hq-icon { vertical-align: middle; }

/* 直接買 cell 後面的 HQ / NQ tag — 短文字徽章 */
.shop-qual-tag {
  display: inline-block;
  padding: 1px 5px;
  margin-left: 6px;
  border-radius: 3px;
  font-family: var(--font-mono, monospace);
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.05em;
  border: 1px solid;
  vertical-align: middle;
}
.shop-qual-tag--hq {
  /* HQ = 金（配色 C 金幣語意） */
  background: rgba(230, 192, 104, 0.15);
  color: var(--money, #e6c068);
  border-color: var(--money, #e6c068);
}
.shop-qual-tag--nq {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-muted, #9aa3b8);
  border-color: var(--color-border, #2f3650);
}

/* icon 欄寬度限制 */
.shop-cell-icon-col { width: 48px; padding-right: 4px; }  /* fixed layout 含 padding：12+28+4+4 buffer */
.shop-cell-icon { image-rendering: pixelated; vertical-align: middle; display: block; }

/* 道具 column — header 置中，data（iLv + 名稱）置左；fixed layout 下超長名稱走 ellipsis 不撐欄 */
.shop-cell-name-col { text-align: left; overflow: hidden; white-space: nowrap; }
.shop-cell-name {
  text-decoration: none;
  color: var(--accent);
  font-weight: 500;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 28px);  /* 留複製鈕位 */
  vertical-align: middle;
}
.shop-cell-name .shop-cell-name-text { overflow: hidden; text-overflow: ellipsis; }
.shop-cell-name:hover .shop-cell-name-text { text-decoration: underline; }
/* 名稱後複製鈕 — 跟 name link 平級（不在 <a> 內，不觸發跳轉）*/
.shop-name-copy {
  margin-left: 6px;
  padding: 0 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9em;
  line-height: 1;
  opacity: 0.45;
  vertical-align: middle;
  transition: opacity var(--transition-fast, 0.15s);
}
.shop-cell-name-col:hover .shop-name-copy { opacity: 0.8; }
.shop-name-copy:hover,
.shop-name-copy:focus-visible { opacity: 1; }
.shop-cell-ilv {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(15, 20, 32, 0.6);
  border: 1px solid var(--color-border, #2f3650);
  color: var(--color-text-muted, #9aa3b8);
  font-family: var(--font-mono, monospace);
  font-size: 0.78em;
  font-weight: 400;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.shop-cell-name-text {
  /* name 主體 — hover 才 underline，避免 iLv badge 也跟著畫底線 */
}

/* 顏色策略：除了「推薦那條 chip」之外，其他資訊欄一律中性灰；
   把鮮明色（cyan 伺服器 / 金色買價 / 綠採集 / 黃 HQ）通通中性化，視覺焦點集中在推薦 */
.shop-cell-world {
  color: var(--color-text, #f5f5f5);
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
  text-align: center;   /* data 跟 header 一致置中 */
}
.shop-cell-world.shop-cell-na { color: var(--color-text-muted, #9aa3b8); opacity: 0.5; }

/* 數字欄統一右對齊 + tabular nums，平常中性 */
.shop-cell-num {
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  color: var(--color-text, #f5f5f5);
}
.shop-cell-buy   { font-weight: 500; }
.shop-cell-craft {
  font-weight: 500;
  text-decoration: none;
  color: inherit;
}
.shop-cell-craft:hover { text-decoration: underline; color: var(--color-accent-cyan, #4ec9d0); }
.shop-cell-na { color: var(--color-text-muted, #9aa3b8); opacity: 0.5; }

/* gather cell — 中性 outline；只「已在採集清單」才上金色（is-active） */
.shop-cell-gather { text-align: center; width: 56px; padding-left: 8px; padding-right: 8px; }
/* 採集 header 文字防垂直堆疊：用 &nbsp; 鎖在一行 */
.shop-cell-gather-head { white-space: nowrap; text-align: center; }
.shop-gather-pill {
  background: transparent;
  border: 1px solid var(--color-border, #2f3650);
  color: var(--color-text-muted, #9aa3b8);
  width: 26px; height: 26px;
  padding: 0;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition-fast, .15s ease);
}
.shop-gather-pill:hover { border-color: var(--accent); color: var(--accent); }
.shop-gather-pill.is-active {
  background: rgba(78, 201, 208, 0.15);
  border-color: var(--accent, #4ec9d0);
  color: var(--accent, #4ec9d0);
}

/* HQ tag in world cell — 直接放 HQ icon 圖（無底框） */
.shop-hq-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}
.shop-hq-tag .shop-hq-icon { filter: none; }

/* rec column — 「最佳偵測」獨立 td；內部 2 個固定寬 slot 跨 row 對齊 */
.shop-cell-rec {
  white-space: nowrap;
  vertical-align: middle;
  padding-right: 12px;
  border-right: 1px solid rgba(78, 201, 208, 0.18);  /* 視覺分隔左右半 */
}
.shop-cell-rec > * { vertical-align: middle; }
.shop-rec-auto { display: inline-block; }
.shop-rec-slot {
  display: inline-block;
  width: 140px;  /* chips 去 emoji 後文字變短，同步收窄（讓位給品名欄） */
  vertical-align: middle;
  margin-right: 4px;
}
.shop-rec-slot:last-child { margin-right: 0; }
.shop-rec-slot:empty::before {
  content: '';
  display: inline-block;
  width: 100%;
  height: 1px;
}

/* 手動調整 — 獨立 td，3 顆按鈕橫排 */
.shop-cell-manual {
  white-space: nowrap;
  vertical-align: middle;
  padding-left: 12px;
}
.shop-rec-manual {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* pending / untradable cell（colspan=2 跨左右半）— 置左跟 chip 對齊 */
.shop-cell-rec--state {
  text-align: left;
  padding-left: 0;  /* 跟正常 row 的買 chip 起始位置對齊 */
  padding-right: 12px;
  border-right: none;
}

/* 單一狀態（pending / untradable） — 整 cell 一個 chip */
.shop-rec {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-sm, 6px);
  font-weight: 600;
  font-size: 0.9em;
  white-space: nowrap;
}
.shop-rec--pending {
  background: rgba(232, 164, 90, 0.10);
  border: 1px solid rgba(232, 164, 90, 0.40);
  color: var(--color-warn, #e8a45a);
  font-style: italic;
  font-weight: 400;
}
.shop-rec--untradable {
  background: rgba(229, 115, 115, 0.10);
  border: 1px solid rgba(229, 115, 115, 0.40);
  color: var(--color-danger, #e57373);
}

/* 能力標籤（capability info tags — 不可點，純資訊性顯示）
   平常灰底淡色；推薦的 is-rec 加色塊高亮但仍視覺上像「徽章」而非按鈕 */
.shop-tag {
  display: inline-block;
  width: 100%;       /* 填滿 .shop-rec-slot 寬度 → 對齊 */
  padding: 3px 10px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--color-border, #2f3650);
  background: rgba(15, 20, 32, 0.4);
  color: var(--color-text-muted, #9aa3b8);
  font-size: 0.85em;
  font-weight: 400;
  white-space: nowrap;
  opacity: 0.55;
  cursor: default;   /* 重要：非按鈕 — 跟 .shop-mini 區分 */
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--transition-fast, .15s ease);
}
.shop-tag.is-rec {
  opacity: 1;
  font-weight: 600;
}
.shop-tag--buy.is-rec {
  /* 買=花錢 → 金（money 語意），跟 craft=cyan 成對 */
  background: rgba(230, 192, 104, 0.20);
  border-color: var(--money, #e6c068);
  color: var(--money, #e6c068);
}
.shop-tag--craft.is-rec {
  background: rgba(78, 201, 208, 0.18);
  border-color: var(--color-accent-cyan, #4ec9d0);
  color: var(--color-accent-cyan, #4ec9d0);
}
.shop-tag-extra {
  font-family: var(--font-mono, monospace);
  font-weight: 400;
  margin-left: 4px;
  opacity: 0.95;
}

/* 手動調整按鈕（.shop-mini）— 明顯按鈕感：實心邊框 + 暗底 + cursor pointer
   跟 .shop-tag（資訊性 chip）對比強烈 → user 一看就知道能點 */
.shop-mini {
  background: rgba(15, 20, 32, 0.85);
  border: 1px solid var(--color-border, #2f3650);
  padding: 4px 10px;
  cursor: pointer;
  color: var(--color-text, #f5f5f5);
  border-radius: var(--radius-sm, 6px);
  font-size: 0.85em;
  font-weight: 500;
  font-family: inherit;
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: all .15s ease;
}
.shop-mini:hover {
  background: var(--color-accent-cyan-soft);
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(78, 201, 208, 0.20);
}
.shop-mini:active { transform: translateY(0); }
/* 已選：保留暗底（icon 才看得清），用 accent outline + bold 標示 */
.shop-mini.is-active {
  background: rgba(78, 201, 208, 0.20);
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--color-accent-cyan-soft);
}
.shop-mini.is-active:hover {
  background: rgba(78, 201, 208, 0.28);
  color: var(--accent);
  transform: translateY(0);
}

/* ctrls: qty box + HQ + remove */
/* ctrls — 維持 table-cell；children inline 排，右對齊 with 數量 header */
.shop-cell-ctrls {
  white-space: nowrap;
  text-align: right;
  padding-right: 16px;
}
.shop-cell-ctrls > * { vertical-align: middle; }
.shop-cell-ctrls > * + * { margin-left: 4px; }
/* 數量 header 也加 padding-right 對齊 */
.shop-head-row .shop-cell-num:last-child { padding-right: 16px; }
.shop-qty-box {
  display: inline-flex; align-items: center;
  padding: 1px;
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-sm, 6px);
  background: rgba(15, 20, 32, 0.6);
}
.shop-qty-btn {
  background: transparent;
  border: 0;
  width: 22px; height: 22px;
  cursor: pointer;
  color: var(--color-text-muted, #9aa3b8);
  border-radius: var(--radius-sm, 6px);
  font-size: 0.95em;
  padding: 0;
  transition: color var(--transition-fast, .15s ease), background var(--transition-fast, .15s ease);
}
.shop-qty-btn:hover {
  color: var(--accent);
  background: var(--color-accent-cyan-soft);
}
.shop-qty-input {
  width: 44px;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: center;
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  outline: none;
  padding: 0 2px;
  -moz-appearance: textfield;
}
.shop-qty-input::-webkit-outer-spin-button,
.shop-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* a11y A3：數量欄原本 outline:none 無鍵盤 focus 指示 — 補 focus-visible 焦點圈 */
.shop-qty-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: var(--radius-sm, 4px);
}

.shop-hq-toggle {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px;
  border-radius: var(--radius-sm, 6px);
  background: rgba(15, 20, 32, 0.4);
  cursor: pointer;
  color: var(--color-text-muted, #9aa3b8);
  font-family: var(--font-mono, monospace);
  font-size: 0.85em;
}
.shop-hq-toggle input { cursor: pointer; }

.shop-remove-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text-muted, #9aa3b8);
  width: 22px; height: 22px;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  padding: 0;
  transition: all var(--transition-fast, .15s ease);
}
.shop-remove-btn:hover {
  border-color: var(--color-danger, #e57373);
  color: var(--color-danger, #e57373);
}

/* ─── bulk actions footer ─── */
/* ─── 衍生清單：跨服購買 + 製造材料 ─── */
.shop-derived {
  position: relative;
  padding: var(--space-3, 0.75rem) var(--space-5, 1.5rem);
  margin-top: var(--space-2, 0.5rem);  /* 跟 .shop-page gap 一致 */
}
.shop-derived-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  margin-bottom: var(--space-2, 0.5rem);
}
.shop-derived-header h3 { margin: 0; }
.shop-derived-grand {
  font-family: var(--font-mono, monospace);
  color: var(--color-text-muted, #9aa3b8);
}
.shop-derived-grand strong { color: var(--accent); font-size: 1.1em; }
.shop-derived-hint {
  color: var(--color-text-muted, #9aa3b8);
  font-size: 0.85em;
  margin: 0 0 var(--space-3, 0.75rem) 0;
}
/* 「尚未查價 / 數量變動」warning chip — 主清單還沒查完價就看製造清單時提示 */
.shop-derived-warn {
  margin: 0 0 var(--space-3, 0.75rem) 0;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-radius: var(--radius-card, 6px);
  border: 1px solid rgba(232, 164, 90, 0.5);
  background: rgba(232, 164, 90, 0.08);
  color: var(--color-warn, #e8a45a);
  font-size: 0.9em;
  line-height: 1.5;
}

/* 跨服購買清單 — 按伺服器分組 */
.shop-world-block { margin-bottom: var(--space-2, 0.5rem); }
/* 世界區塊 / 製造表格的深色內嵌面板內距 */
.shop-world-block.mb-inset { padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem); }
.shop-mat-inset { padding: 2px var(--space-2, 0.5rem); margin-top: var(--space-2, 0.5rem); overflow-x: auto; }
.shop-world-title {
  margin: 0 0 4px 0;
  padding: 4px 8px;
  border-left: 3px solid var(--accent);
  background: rgba(78, 201, 208, 0.06);
  display: flex; align-items: baseline; gap: var(--space-3, 0.75rem);
}
.shop-world-meta {
  color: var(--color-text-muted, #9aa3b8);
  font-family: var(--font-mono, monospace);
  margin-left: auto;
}
.shop-world-meta strong { color: var(--color-text, #f5f5f5); }
.shop-derived-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.shop-derived-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 12px;
  border-bottom: 1px solid rgba(78, 201, 208, 0.05);
  /* 行寬鎖窄 — 價格貼近名稱（眼睛不用橫跨整張卡），數字仍在同一右緣上下對齊 */
  max-width: 640px;
}
.shop-derived-row:last-child { border-bottom: 0; }
.shop-derived-row:hover { background: rgba(78, 201, 208, 0.04); }
.shop-derived-name {
  flex: 0 1 auto;  /* 不再獨吞剩餘空間 — 剩餘給 .shop-derived-leader 引導線 */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--accent);
  font-weight: 500;
  white-space: nowrap;
}
/* 名稱 ↔ 價格之間的點狀引導線（帳冊式）— 名稱跟數字離很遠時視線不斷行 */
.shop-derived-leader {
  flex: 1 1 24px;
  min-width: 24px;
  align-self: center;
  border-bottom: 1px dotted color-mix(in srgb, var(--color-text-muted, #9aa3b8) 45%, transparent);
  transform: translateY(2px);  /* 對齊文字 baseline 視覺 */
}
/* 衍生清單品名旁 📋 複製鈕 — hover 行才浮現（跟主表同手勢） */
.shop-derived-row .shop-name-copy { margin-left: 0; }
.shop-derived-row:hover .shop-name-copy { opacity: 0.85; }

/* 欄位標題列（數量/單價/小計）— 跟資料 row 同 flex 結構自動對齊；引導線關掉 */
.shop-derived-row--cols {
  font-size: var(--fs-xs, 0.6875rem);
  color: var(--color-text-muted, #9aa3b8);
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.08em;
  padding-top: 2px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(78, 201, 208, 0.15);
}
.shop-derived-row--cols:hover { background: none; }
.shop-derived-row--cols .shop-derived-leader { border-bottom: 0; }
.shop-derived-icon-ph { flex: 0 0 20px; }
/* 數字 column 對齊 — 每個 chip 固定 min-width + 右對齊，跨 row 同 column 起始位置（不再隨品名長度漂移） */
.shop-derived-qty {
  flex: 0 0 auto;
  min-width: 48px;
  text-align: right;
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted, #9aa3b8);
  white-space: nowrap;
}
.shop-derived-unit {
  flex: 0 0 auto;
  min-width: 88px;
  text-align: right;
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted, #9aa3b8);
  font-size: 0.85em;
  white-space: nowrap;
}
.shop-derived-total {
  flex: 0 0 auto;
  min-width: 80px;
  text-align: right;
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 直購製造素材清單 — 自取 / 未查價材料 block（muted 色，跟可買材料區分） */
.shop-world-block--self .shop-world-title {
  border-left-color: var(--color-text-muted, #9aa3b8);
  background: rgba(154, 163, 184, 0.06);
}
.shop-derived-row--self .shop-derived-name {
  color: var(--color-text-muted, #9aa3b8);
}
.shop-derived--mats .shop-world-title {
  border-left-color: var(--color-accent-cyan, #4ec9d0);
  background: rgba(78, 201, 208, 0.06);
}
.shop-derived--mats .shop-derived-name {
  color: var(--color-accent-cyan, #4ec9d0);
}

/* 製造清單 — table 樣式 */
.shop-derived--craft .shop-derived-crafted {
  margin-bottom: var(--space-2, 0.5rem);
}
.shop-derived-crafted summary {
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-card, 6px);
  background: rgba(78, 201, 208, 0.08);
  color: var(--color-accent-cyan, #4ec9d0);
}
.shop-derived-crafted-list {
  list-style: none;
  padding: 8px 16px;
  margin: 4px 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px;
}
.shop-derived-crafted-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 0.85em;
  color: var(--color-text-muted, #9aa3b8);
}
.shop-mat-table {
  width: 100%;
  border-collapse: collapse;
  /* fixed：欄寬由表頭鎖死 — 展開 ▶ 子層 / 重查不跳動；採集欄不再吃掉整段空檔 */
  table-layout: fixed;
}
/* 欄寬配置：數字群留呼吸空間（解擠），採集鎖 320，剩餘給「用在/來自」尾端留白 */
.shop-mat-table th:nth-child(1) { width: 96px;  }  /* ▶ + icon */
.shop-mat-table th:nth-child(2) { width: 240px; }  /* 材料 */
.shop-mat-table th:nth-child(3) { width: 68px;  }  /* 需要 */
.shop-mat-table th:nth-child(4) { width: 96px;  }  /* 伺服器 */
.shop-mat-table th:nth-child(5) { width: 96px;  }  /* 單價 */
.shop-mat-table th:nth-child(6) { width: 104px; }  /* 小計 */
.shop-mat-table th:nth-child(7) { width: 320px; }  /* 採集 */
/* th:nth-child(8) 用在/來自 — 吃剩餘 */
.shop-mat-table th, .shop-mat-table td {
  padding: 6px 8px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(78, 201, 208, 0.06);
  font-family: var(--font-mono, monospace);
}
.shop-mat-table th { text-align: center; }  /* 所有欄位標題置中 */
.shop-mat-table td.shop-mat-qty,
.shop-mat-table td.shop-mat-world,
.shop-mat-table td.shop-mat-price,
.shop-mat-table td.shop-mat-total { padding-left: 10px; padding-right: 10px; }
.shop-mat-table tbody tr:hover { background: rgba(78, 201, 208, 0.04); }
.shop-mat-icon { white-space: nowrap; }
/* fixed layout 下材料超長名稱 ellipsis 不撐欄 */
.shop-mat-name { overflow: hidden; }
.shop-mat-name .shop-cell-name { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.shop-mat-qty { width: 50px; }
.shop-mat-world { width: 70px; }
.shop-mat-price { width: 80px; }
.shop-mat-total { width: 70px; }
.shop-mat-altsrc { white-space: nowrap; }
.shop-mat-icon img { vertical-align: middle; image-rendering: pixelated; margin-left: 2px; }

/* 展開按鈕（▶ / ▼）+ tree marker for 子層 */
.shop-mat-expand {
  background: transparent;
  border: 1px solid var(--color-border, #2f3650);
  color: var(--color-text-muted, #9aa3b8);
  width: 18px; height: 18px;
  padding: 0;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.7em;
  vertical-align: middle;
  transition: all .15s ease;
}
.shop-mat-expand:hover {
  border-color: var(--color-accent-cyan, #4ec9d0);
  color: var(--color-accent-cyan, #4ec9d0);
  background: rgba(78, 201, 208, 0.10);
}
.shop-mat-expand-spacer {
  display: inline-block;
  width: 18px;
  vertical-align: middle;
}
.shop-mat-tree {
  display: inline-block;
  color: rgba(78, 201, 208, 0.35);
  font-family: var(--font-mono, monospace);
  font-size: 0.85em;
  margin-right: 2px;
  vertical-align: middle;
}
/* 子層 row 視覺微差異化 */
/* 展開的子層材料 — 深底 + accent 左軌 + 樹枝記號亮起（原 0.03 cyan wash 太弱，一眼分不出層級） */
.shop-mat-row--child { background: rgba(8, 12, 20, 0.55); }
.shop-mat-row--child td:first-child { box-shadow: inset 3px 0 0 0 color-mix(in srgb, var(--accent, #4ec9d0) 45%, transparent); }
.shop-mat-table tbody tr.shop-mat-row--child:hover { background: rgba(78, 201, 208, 0.08); }
.shop-mat-row--child .shop-mat-tree { color: var(--accent, #4ec9d0); opacity: 0.65; }
.shop-mat-name { color: var(--color-accent-cyan, #4ec9d0); }
.shop-mat-name .shop-cell-name { color: inherit; }
.shop-mat-qty,
.shop-mat-price,
.shop-mat-total { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-mat-world { text-align: left; white-space: nowrap; }
/* 伺服器名 — 固定寬 slot 讓跨 row 對齊（陸行鳥 DC 7 伺服器都 4 字） */
.shop-derived-world {
  display: inline-block;
  min-width: 4.5em;
  color: var(--color-accent-cyan, #4ec9d0);
  font-weight: 600;
}
.shop-mat-total strong { color: var(--color-text, #f5f5f5); }
.shop-derived-self {
  color: var(--color-success, #7dd87d);
  font-style: italic;
  font-size: 0.85em;
}
/* 採集 / 釣魚 / 副本 來源 link — 綠色 hover 飽和（提示「這條路線」） */
.shop-mat-source {
  color: var(--color-success, #7dd87d);
  font-family: var(--font-mono, monospace);
  text-decoration: none;
  font-size: 0.85em;
}
.shop-mat-source:hover { text-decoration: underline; filter: brightness(1.2); }
/* 採集 source 拆 icon / label / place 三 slot，跨 row 對齊 */
.shop-mat-source-icon {
  display: inline-block;
  min-width: 1.4em;
  text-align: center;
}
.shop-mat-source-label {
  display: inline-block;
  min-width: 3em;
  margin-right: 0.3em;
}
.shop-mat-source-place {
  display: inline-block;
}
/* 採集替代（跟「已查價」/「未查價」並排時降低視覺份量；不再加 「/ 或」分隔） */
.shop-derived-world + .shop-mat-source,
.shop-cell-pending + .shop-mat-source { opacity: 0.75; font-size: 0.82em; margin-left: var(--space-2, 0.5rem); }
.shop-mat-usedby {
  color: var(--color-text-muted, #9aa3b8);
  font-size: 0.78em;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-derived-unit-meta { color: var(--color-text-muted, #9aa3b8); font-weight: 600; margin-left: 2px; }

/* ─── 窄畫面（< 900px）— 表格保留欄位，整體橫向 scroll ─── */
@media (max-width: 900px) {
  .shop-list-wrap { overflow-x: auto; overflow-y: hidden; }
  .shop-list { min-width: 1400px; }  /* fixed 欄寬總和 ~1190 + 道具欄保底 ~200，超出 viewport 走 scroll */
  .shop-summary-totals { gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem); }
  /* 行動觸控目標撐到 WCAG 2.5.8 最低 24×24px（視覺 icon 不變，靠 min-width/height 擴 tap 區） */
  .shop-qty-btn, .shop-remove-btn { min-width: 24px; min-height: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════
 * 統一清單 header（.list-header）— shop / watch / gatherlist 共用模板
 * 結構：[h2 + count]  [profile 切換 + 新增/改名/刪除]  [右側 aside (鬧鐘/保活/clock/說明)]
 * 三個 view 高度 / padding / 字級一致；採集的鬧鐘 + clock 自然落在 aside slot
 * placed at EOF so cascade overrides any conflicting .shop-header / .watch-header / .gatherlist-header layout
 * ═══════════════════════════════════════════════════════════════════ */
.list-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  padding: var(--space-3, 0.75rem) var(--space-5, 1.5rem);
  min-height: 64px;
  position: relative;
}
/* 返回鈕內嵌標題列最左（同一行，不另佔高度） */
.list-header > .list-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.45em;  /* 從 1.15em 拉大 — user 反映三個清單標題太小 */
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
}
.list-header > .list-h1 > .list-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;
}
.list-header > .list-profile-bar {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  flex: 0 0 auto;
}
.list-header > .list-header-aside {
  margin-left: auto;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  padding-left: var(--space-3, 0.75rem);
  border-left: 2px solid rgba(78, 201, 208, 0.20);
  color: var(--color-text-muted, #9aa3b8);
  font-size: 0.85em;
  line-height: 1.4;
  max-width: 400px;
}
.list-header > .list-header-aside strong { color: var(--accent); }

/* 採集清單獨有 — clock 右上對齊（跟 #/gather 一致）、鬧鐘+保活 換到下一行並排 */
.list-header > .list-clock {
  margin-left: auto;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
}
/* 鬧鐘+保活 toggles 收進第一行（2026-06-10：原獨占第 2 行讓 header 比其他頁高，user 要求統一高度）
   位置：跟 clock 同在右端成一組（鬧鐘設定跟時間天然相鄰） */
.list-header > .gatherlist-toggles {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-left: auto;
  white-space: nowrap;
}
.gatherlist-header .list-clock { margin-left: 0; }  /* auto 讓給 toggles，clock 緊跟其後 */

/* ═══════════════════════════════════════════════════════════════════
 * 行動按鈕（craft 一鍵全加 / row 加採集 / row 加購物）— cyan 線框 + ◆ prefix
 * 2026-06-10 E 清理：金→cyan、pill→R 角；移除死 selector（.codex-action-btn /
 * .shop-link / .watch-link / .gather-link / .gatherlist-link — 舊 quicknav 已退役）
 * placed at EOF：cascade 覆蓋舊樣式（同 specificity 下後寫贏）
 * ═══════════════════════════════════════════════════════════════════ */
#craftBatchShopBtn,
.craft-src-glist,
.craft-src-shop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid rgba(78, 201, 208, 0.55);
  border-radius: var(--radius-sm, 6px);
  background: linear-gradient(180deg, rgba(78, 201, 208, 0.10) 0%, rgba(78, 201, 208, 0.03) 100%);
  color: inherit;  /* table 內按鈕從 cell 繼承 */
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  transition:
    border-color var(--transition-fast, .15s ease),
    background var(--transition-fast, .15s ease),
    box-shadow var(--transition-fast, .15s ease),
    color var(--transition-fast, .15s ease),
    transform var(--transition-fast, .15s ease);
}
#craftBatchShopBtn:hover,
.craft-src-glist:hover,
.craft-src-shop:hover {
  border-color: var(--accent, #4ec9d0);
  background: linear-gradient(180deg, rgba(78, 201, 208, 0.22) 0%, rgba(78, 201, 208, 0.08) 100%);
  color: var(--accent, #4ec9d0);
  box-shadow: 0 0 14px rgba(78, 201, 208, 0.30);
  transform: translateY(-1px);
}
#craftBatchShopBtn:active,
.craft-src-glist:active,
.craft-src-shop:active {
  transform: translateY(0);
}
/* active / in-list / in-shop — cyan 淺填 */
.craft-src-glist.in-list,
.craft-src-shop.in-shop {
  background: var(--color-accent-cyan-soft, rgba(78, 201, 208, 0.18));
  border-color: var(--accent, #4ec9d0);
  color: var(--accent, #4ec9d0);
  font-weight: 600;
}
/* row 內按鈕 inactive default — muted 灰色（避免在 table cell 預設白色太亮） */
.craft-src-glist:not(.in-list),
.craft-src-shop:not(.in-shop) {
  color: var(--color-text-muted, #9aa3b8);
}
/* row 內按鈕 — fixed min-width 防止 in-list / in-shop 切換時 label 寬度變化撐 cell 抖動 */
.craft-add-cell-inner .craft-src-glist,
.craft-add-cell-inner .craft-src-shop {
  min-width: 96px;
  justify-content: center;
  padding: 4px 10px;
  font-size: 0.88em;
}