/* enhance.css · Gemini 設計協作落地(2026-06-06)
   原則:只「疊加」不覆蓋既有 app.css;只用「真實存在的 class」;在 app.css 之後載入。
   來源:Gemini 第1~3輪設計(人文新聞誌風格),已挑出有增益且安全的部分、修掉 Gemini 的筆誤/虛構 class。 */

/* ── 文章頁:舒服的閱讀區(article.html 的 #art / .back) ── */
#art {
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.85;
}
#art h1, #art h2 { letter-spacing: -.3px; }
#art p { font-size: 17px; }
#art img { border-radius: var(--r-md); box-shadow: var(--sh-1); }
#art blockquote {
  border-left: 4px solid var(--primary);
  background: var(--bg-1);
  padding: 16px 22px;
  margin: 28px 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 18px; color: var(--ink); font-weight: 500;
}
/* 返回連結 → 膠囊鈕,hover 往左輕移(回首頁的明確視覺) */
.back {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--line-strong);
  padding: 7px 16px; border-radius: var(--r-full);
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: var(--transition-smooth);
}
.back:hover { color: var(--primary); border-color: var(--primary); background: var(--bg-1); transform: translateX(-2px); }

/* ── 通用卡片微互動:hover 平滑上浮(沿用既有 .card,不改結構) ── */
.card { transition: var(--transition-smooth); }
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--line-strong); }
.card:hover .thumb { filter: brightness(1.02); }

/* ── 區塊標題左側厚實裝飾線(沿用既有 .sec-title;app.css 已有 ::before,這裡只微調粗細) ── */
.sec-title::before { width: 5px; border-radius: var(--r-xs); }

/* ── 三層分類導覽:每一層一排,垂直堆疊;次層用較淡底色做出層級深度(董事長 2026-06-06) ── */
#subnav { display: block; }
#subnav .subnav-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 3px 0; }
#subnav .subnav-row + .subnav-row { border-top: 1px dashed var(--line); margin-top: 2px; }
#subnav .subnav-row + .subnav-row a:first-child { color: var(--muted); }   /* 更深層的「全部X」標題弱化,凸顯層級 */

/* ── 主要按鈕:hover 上浮 + 柔和主色光暈(沿用 .btn.primary / button.primary) ── */
.btn.primary:hover, button.primary:hover { transform: translateY(-2px); box-shadow: var(--sh-primary); }

/* ── 空狀態/載入失敗:更舒服的留白與置中(沿用既有 .empty) ── */
.empty { padding: 48px 20px; text-align: center; color: var(--muted); line-height: 1.9; }
.empty .btn { margin-top: 10px; }

/* ── 搜尋入口觸控區 ≥40px(無障礙;沿用 header 的 .ghost 搜尋鈕) ── */
.top a.ghost { min-height: 40px; display: inline-flex; align-items: center; }

/* ── 手機:統一區塊呼吸間距 + 頁尾留白置中(Gemini 切片建議,純疊加) ── */
@media (max-width: 640px) {
  main > .games-strip, main > #boards, main > .grid, main > .sec-title { margin-top: 14px; }
  footer { padding: 24px 16px calc(20px + env(safe-area-inset-bottom, 0px)); text-align: center; }
  footer > div { margin: 4px 0; }
}

/* ════════════════════════════════════════════════════════════════
   全站一致化:把已驗證的設計語言(hover上浮/柔和過渡/膠囊互動)鋪到各頁共通元件。
   原則:只加 transition + hover 微互動,不改既有尺寸/顏色/結構 → 零風險疊加。
   ════════════════════════════════════════════════════════════════ */

/* 拍賣/刊登卡片(tcg.html / market.html 的 .acard):與首頁 .card 一致的上浮手感 */
.acard { transition: var(--transition-smooth); }
.acard:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--line-strong); }

/* 膠囊鈕/標籤(.chip:tcg/market 的登入、回首頁、分類):一致的 hover 回饋 */
.chip { transition: var(--transition-smooth); }
.chip:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }

/* 分頁標籤(.tabs a / .tabs button):底線滑入、hover 主色,層級清楚 */
.tabs a, .tabs button { transition: var(--transition-smooth); }
.tabs a:hover, .tabs button:hover { color: var(--primary); }

/* 安全宣導/須知框(.notice:tcg 等):柔和卡片化,左側主色提示條 */
.notice { transition: var(--transition-smooth); }
.notice:hover { box-shadow: var(--sh-2); }

/* 個人功能大鈕(.act:me.html 的簽到/拉霸等):卡片化上浮,溫馨好點 */
.act { transition: var(--transition-smooth); }
.act:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--primary); }

/* 站內信/列表項(.mid-item:首頁中看板 + 討論列表):hover 輕染主色背景,清楚可點 */
.mid-item { transition: var(--transition-smooth); border-radius: var(--r-sm); }
.mid-item:hover { background: var(--bg-1); }

/* 注:彈窗 .modal 出現動畫沿用 app.css 既有的 animation:pop(已夠好),不重複定義以免覆蓋。 */

/* ════════════════════════════════════════════════════════════════
   附屬頁專屬增益(Gemini 設計協作 2026-06-06,第二輪)
   — 以 body[data-page=...] 範圍化,只動該頁、不外洩;只用真實 class。
   — 取 Gemini 精華(媒體感標題列 / 卡片層次 / 空狀態品牌化 / 骨架屏 / 微互動),
     虛構 class(.discussion-card/.empty-hero/.game-btn…)一律改對應的真實 class。
   ════════════════════════════════════════════════════════════════ */

/* ── 共用:骨架屏(載入脈動)+ 進場淡入上浮(stagger);各頁皆可重用 ── */
@keyframes bao-pulse { 0%,100%{ opacity:.55 } 50%{ opacity:1 } }
@keyframes bao-fade-up { from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:translateY(0) } }
.skeleton{ background:linear-gradient(90deg,var(--bg-1),var(--bg-2),var(--bg-1)); border-radius:var(--r-sm); animation:bao-pulse 1.4s ease-in-out infinite; }
.skel-row{ height:14px; margin:9px 0; } .skel-row.w80{ width:80% } .skel-row.w60{ width:60% } .skel-row.w40{ width:40% }
.skel-img{ height:158px; width:100%; border-radius:0; }
.skel-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-1); }
.skel-card .skel-body{ padding:14px; }
/* 文章卡進場:逐張淡入上浮(由 JS 設 --order) */
.grid > a.card{ animation:bao-fade-up .5s var(--ease) both; animation-delay:calc(var(--order,0) * .06s); }

/* ───────────────────────── 討論區 forum ───────────────────────── */
/* 標題列:forum 自有 header 已移除,改用 shell 統一頂部(.shellTop)。
   下列舊規則只可作用於「非 shell」的自有 header(若還存在);
   絕不可命中 .shellTop,否則會把共用頂部染成 --ink 深底,
   令今日匯流 LOGO(色=--sh-ink 亦為 --ink)同色被吃掉看不見。(2026-06-09 修) */
body[data-page="forum"] header:not(.shellTop){ background:var(--ink); border-bottom:3px solid var(--primary); color:#fff; box-shadow:var(--sh-2); }
body[data-page="forum"] header:not(.shellTop) .t{ color:#fff; }
body[data-page="forum"] header:not(.shellTop) a{ color:#fff; opacity:.85; } body[data-page="forum"] header:not(.shellTop) a:hover{ opacity:1; }
/* 討論卡(列表):加大內距、更柔的層次陰影;hover 只輕染主色邊框 + 極小陰影,不浮動跳動(董事長:別躁鬱) */
body[data-page="forum"] .thread{ padding:18px 20px; border-color:var(--line); box-shadow:var(--sh-1); transition:border-color .15s, box-shadow .15s, background .15s; }
body[data-page="forum"] .thread:hover{ transform:none; box-shadow:var(--sh-2); border-color:var(--primary); }
/* 點進去的文章/帖子內頁:內容區、紅包、留言、回覆等 .card 區塊一律不浮動(沿用全域 .card:hover 會上浮→此處關閉) */
body[data-page="forum"] .card{ transition:box-shadow .15s, border-color .15s; }
body[data-page="forum"] .card:hover{ transform:none; box-shadow:var(--shadow); border-color:var(--line); }
/* 單則貼文塊也保持安靜:不加 hover 位移 */
body[data-page="forum"] .post{ transition:background .12s; }
body[data-page="forum"] .post:hover{ background:var(--bg-0, #fafafa); }
/* 標題字級拉大、字重加粗(視覺權重 1);meta 維持輕量灰(權重 3) */
body[data-page="forum"] .thread h3{ font-size:17px; font-weight:800; color:var(--ink); line-height:1.45; margin-bottom:6px; }
body[data-page="forum"] .thread .meta{ font-size:12.5px; color:var(--muted); }
/* 標籤膠囊:降飽和、加 letter-spacing,更輕盈精緻(沿用既有 inline #fff5f6 底→統一成 token) */
body[data-page="forum"] .thread span[style*="background:#fff5f6"]{ letter-spacing:.02em; }
/* 主內容區留白加大,閱讀更舒服 */
body[data-page="forum"] main{ padding-top:26px; }

/* ───────────────────────── 我的家 me ───────────────────────── */
/* hero 進度條:載入後平滑填充(JS 設 width 時由 0 動畫到目標) */
body[data-page="me"] .lvbar > div{ transition:width 1.4s cubic-bezier(.16,1,.3,1); }
/* 兩個大功能鈕(.act):待機微浮動 + hover 主色光暈,誘導點擊 */
@keyframes bao-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } }
body[data-page="me"] .act{ animation:bao-float 3.4s ease-in-out infinite; }
body[data-page="me"] .act:hover{ animation-play-state:paused; transform:translateY(-4px); box-shadow:var(--sh-3); border-color:var(--primary); }
/* 新版 hero 戰績格:hover 微抬,點擊有回饋(成就感) */
body[data-page="me"] .hero-stats .st{ transition:transform var(--t) var(--ease),box-shadow var(--t); }
body[data-page="me"] .hero-stats .st:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); }
/* 階級徽記 lvchip:載入時彈入 */
body[data-page="me"] .hero-ava .lvchip{ animation:bao-pop .5s var(--ease) both; }
/* 勳章「已獲得」收集感:暖橘淡光暈(沿用 .badge) */
body[data-page="me"] .badge{ transition:var(--t-fast); }
body[data-page="me"] .badge:hover{ border-color:var(--accent); box-shadow:0 0 8px rgba(249,115,22,.22); }
/* 簽到 7 天格子:已點亮格子做一次彈跳「點亮」動畫(連簽儀式感) */
@keyframes bao-pop{ 0%{ transform:scale(1) } 45%{ transform:scale(1.18) } 100%{ transform:scale(1) } }
body[data-page="me"] .days .d{ transition:background .25s,color .25s; }
body[data-page="me"] .days .d.on{ animation:bao-pop .42s var(--ease) both; }
body[data-page="me"] .days .d.on:nth-child(2){ animation-delay:.05s } body[data-page="me"] .days .d.on:nth-child(3){ animation-delay:.1s }
body[data-page="me"] .days .d.on:nth-child(4){ animation-delay:.15s } body[data-page="me"] .days .d.on:nth-child(5){ animation-delay:.2s }
body[data-page="me"] .days .d.on:nth-child(6){ animation-delay:.25s } body[data-page="me"] .days .d.on:nth-child(7){ animation-delay:.3s }
/* 分頁切換輕過渡:顯示的 tabpane 淡入上浮 */
body[data-page="me"] .tabpane:not(.hide){ animation:bao-fade-up .3s var(--ease) both; }
/* 換頭像縮圖:hover 微放大、選中主色框更明顯 */
body[data-page="me"] .stys img{ transition:transform .2s,border-color .2s; }
body[data-page="me"] .stys img:hover{ transform:scale(1.08); }

/* ───────────────────────── 首頁 home ───────────────────────── */
/* 空狀態:品牌化大留白 + 引導連結用暖橘(沿用既有 .empty) */
body[data-page="home"] .empty{ font-size:15px; }
body[data-page="home"] .empty .btn.primary{ margin-top:14px; }
/* 大看板「尚無頭條」空狀態:別死白,給品牌漸層(沿用既有 .big 容器) */
body[data-page="home"] .big.is-empty{ background:linear-gradient(135deg,var(--primary),var(--ink)); align-items:center; justify-content:center; text-align:center; }
body[data-page="home"] .big.is-empty h2{ text-shadow:none; }

/* ════════════════════════════════════════════════════════════════
   首頁雜誌式空狀態 / 刊頭(2026-06-07,編輯誌風重設計)
   — 資料為空時這就是主畫面,務必有設計感。暖奶油底 + 襯線大標 +
     報刊裝飾線 + 不對稱版面(主稿區大、側邊欄目窄)。
   — 全部 body[data-page="home"] 範圍化,只用 index.html 由 JS 產的真實 class。
   ════════════════════════════════════════════════════════════════ */
body[data-page="home"] .home-hero{
  background:
    radial-gradient(120% 90% at 12% 0%, #fffdf8 0%, #faf6ec 55%, #f3ecdd 100%);
  border:1px solid #ece3d0;
  border-radius:14px;
  box-shadow:0 10px 34px rgba(60,42,16,.08), inset 0 1px 0 rgba(255,255,255,.6);
  padding:0; margin:6px 0 30px;
  display:grid; grid-template-columns:1.55fr .9fr;
  overflow:hidden; position:relative;
  animation:bao-fade-up .55s var(--ease) both;
}
/* 主色裝訂邊(像雜誌書脊),帶來「印刷品」而非「網頁」的氣質 */
body[data-page="home"] .home-hero::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:linear-gradient(180deg,var(--primary),var(--accent));
}
/* 刊頭橫條:刊別 / 日期,跨整個寬度,下方雙線(報頭感) */
body[data-page="home"] .hero-masthead{
  grid-column:1/-1; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:16px 30px 14px; border-bottom:3px double #d8cdb4;
}
body[data-page="home"] .hero-kicker{
  font-weight:900; font-size:12px; letter-spacing:.28em; color:var(--primary);
}
body[data-page="home"] .hero-date{ font-size:13px; color:#8a7a5c; letter-spacing:.03em; }
/* 主稿區:大量留白 + 襯線巨標,左對齊有張力 */
body[data-page="home"] .hero-main{ padding:40px 36px 44px; }
body[data-page="home"] .hero-mark{
  font-family:var(--serif,"Noto Serif TC",serif); font-weight:900; font-size:15px;
  color:var(--accent); letter-spacing:.1em; margin-bottom:14px;
}
body[data-page="home"] .hero-title{
  font-family:var(--serif,"Noto Serif TC",serif); font-weight:900;
  font-size:clamp(34px,5vw,52px); line-height:1.12; letter-spacing:1px;
  color:var(--ink); margin:0 0 18px;
}
body[data-page="home"] .hero-lede{
  font-size:16px; line-height:1.95; color:#5c5345; max-width:42ch; margin:0 0 26px;
}
body[data-page="home"] .hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
body[data-page="home"] .hero-cta .btn.primary{ box-shadow:var(--sh-primary); }
body[data-page="home"] .hero-ghost{ background:#fff; border-color:#e0d6c0; color:var(--ink-2); }
body[data-page="home"] .hero-ghost:hover{ border-color:var(--primary); color:var(--primary); background:var(--primary-soft); }
/* 側邊「精選欄目」:窄欄、米色卡、欄目連結直排(雜誌目錄感) */
body[data-page="home"] .hero-aside{
  background:linear-gradient(180deg,#f7f1e3,#f1e9d6);
  border-left:1px solid #e6dcc4; padding:34px 26px;
  display:flex; flex-direction:column;
}
body[data-page="home"] .hero-aside-h{
  font-family:var(--serif,"Noto Serif TC",serif); font-weight:900; font-size:18px;
  color:var(--ink); padding-bottom:10px; margin-bottom:6px;
  border-bottom:2px solid var(--primary); align-self:flex-start;
}
body[data-page="home"] .hero-cols{ display:flex; flex-direction:column; }
body[data-page="home"] .hero-col{
  display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:15.5px; color:var(--ink-2);
  padding:13px 6px; border-bottom:1px dashed #ddd0b4;
  transition:var(--transition-smooth);
}
body[data-page="home"] .hero-col::before{
  content:'›'; font-family:var(--serif,serif); font-weight:900; font-size:18px;
  color:var(--accent); transition:transform .2s;
}
body[data-page="home"] .hero-col:last-child{ border-bottom:none; }
body[data-page="home"] .hero-col:hover{ color:var(--primary); padding-left:12px; }
body[data-page="home"] .hero-col:hover::before{ transform:translateX(3px); }
body[data-page="home"] .hero-col.on{ color:var(--primary); font-weight:700; padding-left:12px; }
body[data-page="home"] .hero-col.on::before{ transform:translateX(3px); }
/* 精選欄目點擊後,左側 heroMain 載入內容:第一則大 + 其餘小區塊 */
body[data-page="home"] .hero-blocks{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
body[data-page="home"] .hblock{ display:flex; flex-direction:column; gap:4px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; text-decoration:none; color:var(--ink); transition:.15s; }
body[data-page="home"] .hblock:hover{ border-color:var(--primary); box-shadow:var(--sh-2); transform:translateY(-2px); }
body[data-page="home"] .hblock b{ font-size:14px; line-height:1.4; }
body[data-page="home"] .hblock .meta{ font-size:11.5px; color:var(--muted); }
@media (max-width:760px){ body[data-page="home"] .hero-blocks{ grid-template-columns:1fr; } }

/* 手機:單欄堆疊,側欄移到主稿下方;標題仍有張力但收斂 */
@media (max-width:760px){
  body[data-page="home"] .home-hero{ grid-template-columns:1fr; margin-bottom:22px; }
  body[data-page="home"] .hero-masthead{ padding:14px 18px 12px; flex-wrap:wrap; }
  body[data-page="home"] .hero-main{ padding:30px 22px 28px; }
  body[data-page="home"] .hero-title{ font-size:clamp(30px,9vw,40px); }
  body[data-page="home"] .hero-lede{ font-size:15px; }
  body[data-page="home"] .hero-aside{ border-left:none; border-top:1px solid #e6dcc4; padding:26px 22px; }
  body[data-page="home"] .hero-cta .btn,
  body[data-page="home"] .hero-cta .btn-outline{ flex:1; text-align:center; justify-content:center; }
}

/* ════════════════════════════════════════════════════════════════
   閱讀頁延伸(Gemini 設計協作 2026-06-06,第三輪)
   — article / market / search / tcg,全部 body[data-page] 範圍化、只用真實 class。
   — 既有頁面 <style> 在 enhance.css 之後載入,故此處用 [data-page] 提高特異度才能疊上去。
   — 取 Gemini 精華:閱讀層次 / 卡片質感 / 搜尋層次 / 收藏感;虛構 class 一律改真實 class、per-game 著色因標記無 game class 而駁回。
   ════════════════════════════════════════════════════════════════ */

/* ───────────────────────── 文章內頁 article ───────────────────────── */
/* 整篇進場:輕柔淡入上浮(媒體感、避免突兀載入) */
body[data-page="article"] article{ animation:bao-fade-up .55s var(--ease) both; }
/* 正文字級/行高:閱讀更舒服(Gemini:1.125rem / 1.8;沿用真實 .content) */
body[data-page="article"] .content{ font-size:17.5px; line-height:1.85; color:var(--ink-2); letter-spacing:.01em; }
body[data-page="article"] .content p{ margin:0 0 20px; }
/* 標題與正文拉開層次 */
body[data-page="article"] h1{ line-height:1.3; letter-spacing:-.3px; }
/* 引言區塊:主色左條 + 柔底,清楚的閱讀斷點(沿用真實 blockquote) */
body[data-page="article"] .content blockquote{
  border-left:4px solid var(--primary); background:var(--bg-0);
  padding:18px 22px; margin:28px 0; border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--ink); font-weight:500;
}
/* 封面圖:更立體的柔陰影(沿用真實 .cover) */
body[data-page="article"] .cover{ box-shadow:0 10px 22px rgba(31,33,46,.10); }
/* 分類標籤膠囊:橘底改更輕盈的橘軟底,精緻不搶焦點(沿用真實 .cat) */
body[data-page="article"] .cat{ background:var(--accent-soft); color:var(--accent-hover); }
/* 來源:斜體弱化(沿用真實 .src) */
body[data-page="article"] .src{ font-style:italic; }
/* 返回鈕還原成膠囊風(頁內 <style> 把 .back 蓋回平鋪連結,這裡用 [data-page] 提特異度搶回) */
body[data-page="article"] .back{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); color:var(--muted);
  border:1px solid var(--line-strong); margin-top:8px;
  padding:7px 16px; border-radius:var(--r-full);
  font-size:14px; font-weight:700; text-decoration:none;
  transition:var(--transition-smooth);
}
body[data-page="article"] .back:hover{ color:var(--primary); border-color:var(--primary); background:var(--primary-soft); transform:translateX(-2px); }
/* 留言區「頁中頁」層次:整區淡底卡片化、留言卡片白底浮起(沿用真實 #comments / #cList > div) */
body[data-page="article"] #comments{ background:var(--bg-0); border:1px solid var(--line); border-radius:var(--r-md); padding:22px 22px 24px; }
body[data-page="article"] #cList > div{ background:var(--surface); border:1px solid var(--line)!important; border-radius:var(--r-sm); padding:12px 14px!important; box-shadow:var(--sh-1); margin-bottom:10px; }
/* 留言輸入框 focus 主色光暈(沿用真實 .cinput,補強既有 :focus) */
body[data-page="article"] .cinput:focus{ box-shadow:var(--focus); }
/* 讚鈕一致的 hover 上浮(就地用 #likeBtn) */
body[data-page="article"] #likeBtn{ transition:var(--transition-smooth); }
body[data-page="article"] #likeBtn:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); }

/* ───────────────────────── 交流市集 market ───────────────────────── */
/* 卡片網格:加大呼吸間距(Gemini gap 建議,沿用真實 .grid) */
body[data-page="market"] .grid{ gap:18px; }
/* 刊登卡:更柔的層次陰影 + hover 上浮(覆寫頁內較陽春的 .lcard) */
body[data-page="market"] .lcard{ border-color:var(--line); box-shadow:var(--sh-1); transition:var(--transition-smooth); }
body[data-page="market"] .lcard:hover{ transform:translateY(-4px); box-shadow:var(--sh-3); border-color:var(--line-strong); }
body[data-page="market"] .lcard:hover .img{ filter:brightness(1.02); }
/* 標題層次、價格視覺強調(沿用真實 .lcard h3 / .price) */
body[data-page="market"] .lcard h3{ font-weight:800; color:var(--ink); }
body[data-page="market"] .price{ font-size:21px; letter-spacing:-.01em; }
/* 買賣標籤膠囊:加 letter-spacing、圓滿膠囊(沿用真實 .tag) */
body[data-page="market"] .tag{ letter-spacing:.02em; border-radius:var(--r-full); }
/* 聯絡框柔化(沿用真實 .contact) */
body[data-page="market"] .contact{ border-radius:var(--r-sm); }
/* 安全須知框:轉成暖琥珀「專業提醒」而非冷白框,左側橘盾色條(沿用真實 .notice) */
body[data-page="market"] .notice{ background:var(--warn-soft); border:1px solid #f5dea6; border-left:4px solid var(--accent); color:#7a4a12; }
body[data-page="market"] .notice b{ color:#5c3409; }
/* 空狀態品牌化:大留白置中(頁內空狀態是裸 <p>,這裡讓它有呼吸感) */
body[data-page="market"] #grid > p{ grid-column:1/-1; text-align:center; padding:56px 20px; font-size:15px; line-height:1.9; }

/* ───────────────────────── 搜尋 search ───────────────────────── */
/* 搜尋框:focus 主色光暈 + 加厚框,輸入意圖明確(沿用真實 .sbar input) */
body[data-page="search"] .sbar input{ flex:1; border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:12px 16px; font-size:15px; transition:border-color .2s,box-shadow .2s; }
body[data-page="search"] .sbar input:focus{ outline:none; border-color:var(--primary); box-shadow:var(--focus); }
/* 搜尋鈕:主色 + 柔光暈,互動焦點(沿用真實 .sbar button) */
body[data-page="search"] .sbar button{ background:var(--primary); color:#fff; border:none; border-radius:var(--r-sm); padding:12px 22px; font-weight:700; cursor:pointer; box-shadow:var(--sh-primary); transition:var(--transition-smooth); }
body[data-page="search"] .sbar button:hover{ transform:translateY(-2px); background:var(--primary-hover); }
/* 分組標題:右側補橘色計數膠囊感(原本「分類 (N)」灰括號,這裡讓 grp 更突出);沿用真實 .grp */
body[data-page="search"] .grp{ font-size:16.5px; color:var(--ink); margin:26px 0 12px; }
/* 「找到 N 筆」摘要列:加分隔線,把摘要與結果分開(沿用真實 .muted 首段) */
body[data-page="search"] #out > p.muted:first-child{ border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:18px; }
/* 單筆結果:hover 輕染淡底 + 右移微動,清楚可點(覆寫頁內 .res:hover 只改邊框) */
body[data-page="search"] .res{ padding:14px 16px; transition:var(--transition-smooth); }
body[data-page="search"] .res:hover{ background:var(--bg-0); border-color:var(--primary); transform:translateX(3px); }
body[data-page="search"] .res h4{ color:var(--ink); }
/* 結果逐筆進場:stagger 淡入上浮(由 JS 設 --order;無 JS 時也會整批淡入) */
body[data-page="search"] .res{ animation:bao-fade-up .4s var(--ease) both; animation-delay:calc(var(--order,0) * .04s); }
/* 初始/空狀態提示更友善:大留白置中 */
body[data-page="search"] #out > p.muted{ line-height:1.9; }

/* ───────────────────────── 卡牌 tcg ───────────────────────── */
/* 卡片網格間距 */
body[data-page="tcg"] .grid{ gap:16px; }
/* 卡片:收藏品「展示櫃」質感 — hover 上浮加深 + 暖橘亮邊(沿用真實 .acard;覆寫頁內較淺的 hover) */
body[data-page="tcg"] .acard{ box-shadow:var(--sh-1); transition:var(--transition-smooth); }
body[data-page="tcg"] .acard:hover{ transform:translateY(-6px); border-color:var(--accent); box-shadow:0 15px 30px rgba(31,33,46,.15); }
/* 佔位圖(🃏):深炭墨底 + 柔光,別灰白單調(沿用真實 .acard .img) */
body[data-page="tcg"] .acard .img{ background:linear-gradient(145deg,var(--ink),#2a2d37); color:rgba(255,255,255,.4); }
body[data-page="tcg"] .acard:hover .img{ filter:brightness(1.05); }
/* 卡名/卡編層次:卡編用等寬更像產品編號(沿用真實 .acard h3 / .sub) */
body[data-page="tcg"] .acard h3{ font-weight:700; color:var(--ink); line-height:1.3; }
body[data-page="tcg"] .acard .sub{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
/* 卡種膠囊:加邊框與字距,更精緻(沿用真實 .game;因標記無 per-game class,統一精緻化不分色) */
body[data-page="tcg"] .game{ border:1px solid var(--line-strong); letter-spacing:.04em; border-radius:var(--r-xs); }
/* 消息列表項:hover 上浮 + 標題染主色,線性時間軸感(沿用真實 .newsitem) */
body[data-page="tcg"] .newsitem{ transition:var(--transition-smooth); }
body[data-page="tcg"] .newsitem:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); border-color:var(--line-strong); }
body[data-page="tcg"] .newsitem:hover h4{ color:var(--primary); }
body[data-page="tcg"] .newsitem h4{ transition:color .2s; }
/* 平台須知框:左側主色條,專業安全形象(沿用真實 .notice) */
body[data-page="tcg"] .notice{ border-left:4px solid var(--primary); background:var(--primary-soft); }
body[data-page="tcg"] .notice b{ color:var(--primary-ink); }
/* 產品卡進場:逐張淡入上浮 */
body[data-page="tcg"] .grid > .acard{ animation:bao-fade-up .5s var(--ease) both; animation-delay:calc(var(--order,0) * .05s); }

/* ════════════════════════════════════════════════════════════════
   經營管理後台 admin(總編/店家/客服每天用的後台)— 2026-06-06
   — 範圍化於 body[data-page="admin"];後台重「效率與清楚」勝過花俏。
   — 注意:admin.html 不載入 app.css,故本區塊「只用 admin 自有色票
     (--accent/--ink/--muted/--line/--danger/--ok/--bg-1)與字面值」,
     不依賴 app.css 的 --sh-*/--r-*/--transition-* token。
   — 設計重點:資訊密度與掃讀(斑馬紋/sticky 表頭/列 hover)、表單 focus、
     危險操作視覺警示(hover 才轉紅)、狀態徽章對比、分頁明確、操作回饋。
   — 註:Gemini 橋此次不可用(池內無已登入分頁),設計判斷見
     app_dump/gemini-bao-admin-BRIDGE-UNREACHABLE.txt。
   ════════════════════════════════════════════════════════════════ */

/* 先把 admin 缺的「全站疊加層」會用到的 token 補上,讓繼承自全域的
   .card:hover / .tabs button:hover 等規則在 admin 也合法、可預期。 */
body[data-page="admin"]{ --line-strong:#cfd6e2; --sh-1:0 1px 3px rgba(20,30,60,.06);
  --sh-2:0 4px 14px rgba(20,30,60,.08); --sh-3:0 10px 26px rgba(20,30,60,.10);
  --transition-smooth:all .2s cubic-bezier(.16,1,.3,1); }

/* 後台卡片不需要前台那種大幅上浮(資料密集、會晃),收斂成輕微邊框+陰影提示 */
body[data-page="admin"] .card{ transition:box-shadow .2s,border-color .2s; }
body[data-page="admin"] .card:hover{ transform:none; box-shadow:var(--sh-2); border-color:var(--line-strong); }

/* ── 分頁籤:當前分頁加底部主色指示條,辨識更明確;修正全域 .tabs button:hover
   會把 .tab.on(紅底白字)hover 文字也轉紅→紅底紅字看不見的問題 ── */
body[data-page="admin"] .tabs{ border-bottom:2px solid var(--line); padding-bottom:8px; gap:6px 4px; }
body[data-page="admin"] .tab{ position:relative; transition:background .15s,color .15s; }
body[data-page="admin"] .tab:not(.on):hover{ background:#dfe5f0; color:var(--ink); }
body[data-page="admin"] .tab.on{ box-shadow:0 2px 8px rgba(204,34,41,.25); }
body[data-page="admin"] .tab.on:hover{ color:#fff; background:var(--accent); }

/* ── 表格:斑馬紋 + 列 hover 染色 + sticky 表頭,大量資料好掃讀 ── */
body[data-page="admin"] .card{ position:relative; }
body[data-page="admin"] table{ border-collapse:separate; border-spacing:0; }
body[data-page="admin"] thead th{ position:sticky; top:0; z-index:2;
  background:#f7f9fc; font-size:12.5px; font-weight:800; color:#4a5568;
  letter-spacing:.02em; border-bottom:2px solid var(--line); }
body[data-page="admin"] tbody tr:nth-child(even) td{ background:#fafbfd; }
body[data-page="admin"] tbody tr{ transition:background .12s; }
body[data-page="admin"] tbody tr:hover td{ background:#eef3fb; }
body[data-page="admin"] td{ vertical-align:middle; }

/* ── 表單:input/select/textarea focus 主色光暈,輸入意圖明確 ── */
body[data-page="admin"] input:focus, body[data-page="admin"] select:focus,
body[data-page="admin"] textarea:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(204,34,41,.12); }

/* ── 次要鈕 hover 回饋(.btn2:灰底)── */
body[data-page="admin"] .btn{ transition:filter .15s,box-shadow .15s,transform .1s; }
body[data-page="admin"] .btn:hover{ filter:brightness(1.06); box-shadow:0 3px 10px rgba(204,34,41,.22); }
body[data-page="admin"] .btn:active{ transform:translateY(1px); }
body[data-page="admin"] .btn2{ transition:background .15s,color .15s,box-shadow .15s; }
body[data-page="admin"] .btn2:hover{ background:#dfe4ec; }

/* ── 危險操作視覺警示:刪除/封鎖/停權鈕(行內 style="color:var(--danger)" 的 .btn2)──
   平時中性(避免整頁紅點刺眼),hover 才轉紅底白字,操作前明確警示。 */
body[data-page="admin"] .btn2[style*="--danger"]{ border:1px solid #f3c9cd; }
body[data-page="admin"] .btn2[style*="--danger"]:hover{ background:var(--danger);
  color:#fff !important; border-color:var(--danger); box-shadow:0 3px 10px rgba(220,38,38,.28); }

/* ── 狀態徽章 .pill:加邊框與字重提高對比;補 banned/紅色徽章別名 ── */
body[data-page="admin"] .pill{ font-weight:800; border:1px solid transparent; letter-spacing:.02em; }
body[data-page="admin"] .pill.pub{ background:#dcfce7; color:#15803d; border-color:#bbf7d0; }
body[data-page="admin"] .pill.draft{ background:#fef3c7; color:#b45309; border-color:#fde68a; }

/* ── 待處理數量徽章(檢舉「N 待處理」用 .pill.draft):輕微脈動引起注意 ── */
@keyframes bao-admin-attn{ 0%,100%{ box-shadow:0 0 0 0 rgba(180,83,9,.0) } 50%{ box-shadow:0 0 0 4px rgba(180,83,9,.16) } }
body[data-page="admin"] h2 > .pill.draft{ animation:bao-admin-attn 1.8s ease-in-out infinite; }

/* ── 區塊標題 h2:左側主色短條,層級清楚、像「儀表板區塊」 ── */
body[data-page="admin"] .card > h2:first-child{ display:flex; align-items:center; gap:8px; }
body[data-page="admin"] .card > h2:first-child::before{ content:""; flex:0 0 auto;
  width:4px; height:1em; border-radius:2px; background:var(--accent); }

/* ── 資訊密度:總覽/流量的數字統計卡(行內 style 卡片)輕微 hover 提示 ── */
body[data-page="admin"] #tab-overview .card div[style*="border-radius:12px"],
body[data-page="admin"] #tab-analytics div[style*="border-radius:12px"]{ transition:transform .15s; }

/* ── 危險頂部橫幅(預設密碼警告 banner,行內 style 用 --danger 邊框):輕脈動提醒 ── */
body[data-page="admin"] #app > div[style*="--danger"]:first-child{ animation:bao-admin-attn 2.2s ease-in-out infinite; }

/* ── 進場:登入後內容區淡入,操作回饋更柔順(沿用既有 keyframes)── */
body[data-page="admin"] #app:not(.hide){ animation:bao-fade-up .35s var(--ease,cubic-bezier(.16,1,.3,1)) both; }

@media (prefers-reduced-motion: reduce) {
  body[data-page="admin"] .card, body[data-page="admin"] .btn, body[data-page="admin"] .btn2,
  body[data-page="admin"] .tab, body[data-page="admin"] tbody tr { transition:none !important; }
  body[data-page="admin"] h2 > .pill.draft, body[data-page="admin"] #app > div[style*="--danger"]:first-child,
  body[data-page="admin"] #app:not(.hide) { animation:none !important; }
}

/* ════════════════════════════════════════════════════════════════
   全站今日匯流暖色站 · 設計一致性統一層(2026-06-09 全站盤點)
   — 痛點:各內頁 inline <style> 各自重定義 button/.tabs/.thread/.lcard/.res/.mid-tabs,
     用字面色與不同圓角/字重,跟主站不協調(右側焦點/最新/熱門、討論區列表尤甚)。
   — 做法:把這些分歧元件「收斂回 app.css 的 design token」(單一真相),用
     body[data-page=...] 提高特異度蓋過各頁 inline <style>(inline 在 head 內、特異度 0,1,0,
     這裡 0,1,1 勝出),只改外觀不改結構/功能/RWD。
   — 鐵則:絕不命中 body.aiv(AI 學院科技風)與 .shellTop/.shellFoot(shell.js 已統一);
     只統一 home/forum/market/search/me 等暖色站頁。色一律走 token,不寫死 hex。
   ════════════════════════════════════════════════════════════════ */
body:not(.aiv){
  /* ① 按鈕系統:全站主鈕=膠囊紅、次鈕=暖灰、外框鈕=描邊,同圓角/內距/字重/hover。
        各頁 inline button{} 用了 var(--radius)(小圓角)或字面灰,這裡統一拉回 token。 */
}
/* forum / market / search 的 inline button{} 收斂:膠囊圓角 + 統一內距字重(對齊 app.css .btn) */
body[data-page="forum"] button:not(.x):not(.shellDisc):not(.navArrow),
body[data-page="market"] button.btn,
body[data-page="search"] .sbar button{
  border-radius:var(--r-full); padding:11px 22px; font-weight:600; font-size:14.5px;
  box-shadow:var(--sh-1);
}
body[data-page="forum"] button:not(.x):not(.shellDisc):not(.navArrow):hover,
body[data-page="market"] button.btn:hover,
body[data-page="search"] .sbar button:hover{ box-shadow:var(--sh-primary); }
/* 次要鈕:全站統一暖灰底(原各頁 #eceef1/#e0e3e7 等冷灰字面值 → token) */
body:not(.aiv) .btn2{ background:var(--bg-1); color:var(--ink); box-shadow:none; }
body:not(.aiv) .btn2:hover{ background:var(--bg-2); }

/* ② 列表/卡片:右側焦點/最新/熱門(.mid-item)、討論區列表(.thread)、刊登卡(.lcard)、
      搜尋結果(.res)統一成同一張「卡」語言 — 同 token 邊框/圓角/克制陰影/hover 只染主色邊框。 */
body[data-page="forum"] .thread,
body[data-page="market"] .lcard,
body[data-page="search"] .res{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--sh-1);
}
/* 列表項 hover 一致:輕染主色邊框 + 極小陰影(不躁動,對齊 forum 既定基調) */
body[data-page="search"] .res:hover{ border-color:var(--primary); box-shadow:var(--sh-2); }
/* 右側焦點/最新/熱門 列表項:統一可點 hover 輕染暖底(對齊全域 .mid-item) */
body[data-page="home"] .mid-item:hover{ background:var(--bg-1); }
body[data-page="home"] .mid-item .mid-rank{ color:var(--primary); }   /* 排名數字用主色,與全站強調色一致(原為橘) */

/* ③ 分頁 tabs:焦點/最新/熱門(.mid-tabs)、market(.tabs a)、app(.tabs button)三套
      收斂成同一套:未選=灰、字重 700(別過粗)、active=主色 + 主色底線。 */
/* 首頁右側 .mid-tabs:active 由橘改主色底線,字重收斂 700 */
body[data-page="home"] .mid-tabs button{ font-weight:700; }
body[data-page="home"] .mid-tabs button.on{ color:var(--primary); border-bottom-color:var(--primary); font-weight:700; }
/* market 的 .tabs a:active 由黑塊 → 主色膠囊(對齊 app.css .tabs.pill 語言),未選暖灰膠囊 */
body[data-page="market"] .tabs a{ background:var(--bg-1); border-radius:var(--r-full); padding:7px 15px; font-weight:700; }
body[data-page="market"] .tabs a:hover{ background:var(--primary-soft); color:var(--primary); }
body[data-page="market"] .tabs a.on{ background:var(--primary); color:var(--on-primary); }

/* ④ 標籤 chip:討論區的 #fff5f6 pink 字面 chip → 統一 .tag 語言(token 軟底 + 主色墨字) */
body[data-page="forum"] .thread span[style*="background:#fff5f6"],
body[data-page="forum"] a[style*="background:#fff5f6"]{
  background:var(--primary-soft) !important; color:var(--primary-ink) !important;
  border-radius:var(--r-xs) !important; font-weight:700; letter-spacing:.02em;
}

@media (prefers-reduced-motion: reduce) {
  .card, .acard, .chip, .act, .mid-item, .back, .btn.primary, button.primary,
  body[data-page="forum"] .thread, body[data-page="me"] .stys img,
  body[data-page="market"] .lcard, body[data-page="search"] .res, body[data-page="search"] .sbar button,
  body[data-page="tcg"] .acard, body[data-page="tcg"] .newsitem, body[data-page="article"] #likeBtn { transition: none !important; }
  .skeleton, .grid > a.card, body[data-page="me"] .act,
  body[data-page="me"] .days .d.on, body[data-page="me"] .tabpane:not(.hide),
  body[data-page="article"] article, body[data-page="search"] .res, body[data-page="tcg"] .grid > .acard { animation: none !important; }
  body[data-page="me"] .act{ transform:none !important; }
}