/* ════════════════════════════════════════════════════════════════════════
   home.css — 今日匯流首頁改版(任務B · 2026-06-14)
   版型:① 頂部熱門跑馬燈 ② 焦點匯流(大版位) ③ 一般匯流(卡片流)
        ④ 討論區入口 ⑤ 右側可關閉的「產品匯流」浮動窗口
   不寫死版塊;版塊由 home.js 的 HOME_BLOCKS 設定物件驅動渲染。
   只新增樣式,沿用 app.css/enhance.css/themes.css 的 CSS 變數(--primary 等)。
   科技風(body.aiv)沿用 index.html <style> 既有覆寫,本檔僅補新元件配色。
   ════════════════════════════════════════════════════════════════════════ */

/* ── 焦點匯流:置前、稍突出的「feed 列表」(非大看板)────────────────────────
   仍是條列式 feed,只是用淡色襯底框 + 較大標題,把焦點與一般 feed 區隔開。 */
.focus-flow{ margin:0 0 8px; }
.focus-flow .focus-title{ margin-top:6px; }
.feed-focus{
  background:var(--paper-2,#f6f6f4); border:1px solid var(--hair,#ececea);
  border-radius:12px; padding:4px 16px; margin-top:6px;
}
/* 焦點條目:標題大一級;與一般 feed 共用 .feed-item(見 index.html) */
.feed-focus .fi-lead h3{ font-size:17.5px; font-weight:800; }
.feed-focus .feed-item{ border-bottom-color:var(--hair-2,#e2e2df); }
.feed-focus .feed-item:hover{ background:rgba(0,0,0,.025); }

/* ── 一般匯流:每分類一區(小標題 + 該分類 feed 列表)──────────────────────── */
.general-flow{ margin:0 0 8px; }
.cat-sec{ margin:0 0 4px; }
.cat-sec-title a{ color:inherit; text-decoration:none; }
.cat-sec-title a:hover{ color:var(--primary,#cc2229); }

/* ── 討論區入口區塊 ────────────────────────────────────────────────────── */
.forum-flow{ margin:0 0 26px; }
.forum-flow .fl-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fl-card{ background:var(--surface,#fffdf9); border:1px solid var(--line,#efe9dc); border-radius:12px; overflow:hidden; box-shadow:var(--sh-1,0 2px 8px rgba(0,0,0,.05)); }
.fl-card .fl-h{ font-size:13.5px; font-weight:900; color:var(--primary,#cc2229); padding:11px 14px 7px; }
.fl-item{ display:flex; gap:10px; padding:9px 14px; border-top:1px solid var(--line,#efe9dc); align-items:flex-start; text-decoration:none; }
.fl-item:hover{ background:var(--primary-soft,rgba(204,34,41,.06)); }
.fl-item .fl-rank{ font-weight:700; font-size:14px; color:var(--primary,#cc2229); min-width:18px; }
.fl-item > div{ min-width:0; flex:1; }
.fl-item h4{ margin:0; font-size:13.5px; font-weight:700; line-height:1.4; color:var(--ink,#1c1a17); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fl-item .meta{ font-size:11px; color:var(--muted,#7c756b); margin-top:3px; }
.fl-cta{ display:flex; gap:10px; align-items:center; margin-top:12px; }

/* ── 右側可關閉「產品匯流」浮動窗口 ──────────────────────────────────────── */
.prod-flow{
  position:fixed; right:16px; top:96px; width:248px; z-index:38;
  background:var(--surface,#fffdf9); border:1px solid var(--line-strong,#e6dcc6); border-radius:14px;
  box-shadow:-2px 10px 32px rgba(30,25,15,.16); overflow:hidden; transition:opacity .2s,transform .2s;
}
.prod-flow[hidden]{ display:none; }
.prod-flow .pf-head{
  display:flex; align-items:center; gap:8px; padding:11px 12px;
  background:var(--ink,#1c1a17); color:#fff;
}
.prod-flow .pf-head .pf-title{ font-size:13.5px; font-weight:900; letter-spacing:.5px; flex:1; }
.prod-flow .pf-close{
  background:rgba(255,255,255,.16); border:none; color:#fff; width:24px; height:24px; border-radius:7px;
  cursor:pointer; font-size:14px; line-height:1; display:grid; place-items:center; transition:background .15s;
}
.prod-flow .pf-close:hover{ background:rgba(255,255,255,.32); }
.prod-flow .pf-body{ padding:9px; max-height:64vh; overflow:auto; }
.pf-item{
  display:block; text-decoration:none; border:1px solid var(--line,#efe9dc); border-radius:10px;
  padding:10px 11px; margin-bottom:8px; background:var(--paper-2,#f5f2ea); transition:transform .15s,border-color .15s,box-shadow .15s;
}
.pf-item:last-child{ margin-bottom:0; }
.pf-item:hover{ transform:translateY(-2px); border-color:var(--primary,#cc2229); box-shadow:0 6px 16px rgba(0,0,0,.1); }
.pf-item .pf-emoji{ font-size:18px; }
.pf-item .pf-name{ font-size:13.5px; font-weight:800; color:var(--ink,#1c1a17); margin-top:2px; }
.pf-item .pf-desc{ font-size:11.5px; color:var(--muted,#7c756b); margin-top:3px; line-height:1.45; }
.pf-item .pf-soon{ display:inline-block; font-size:10px; font-weight:800; color:#fff; background:var(--accent,#e8893a); border-radius:5px; padding:1px 6px; margin-top:5px; letter-spacing:.5px; }
/* 被使用者關閉後可再叫出的小重開鈕 */
.prod-reopen{
  position:fixed; right:16px; top:96px; z-index:37; background:var(--ink,#1c1a17); color:#fff;
  border:none; border-radius:999px; padding:8px 13px; font-size:12.5px; font-weight:800; cursor:pointer;
  box-shadow:0 6px 18px rgba(30,25,15,.22); transition:transform .15s;
}
.prod-reopen:hover{ transform:translateY(-1px); }
.prod-reopen[hidden]{ display:none; }

/* ── RWD:窄螢幕收斂 ───────────────────────────────────────────────────── */
@media(max-width:900px){
  .forum-flow .fl-grid{ grid-template-columns:1fr; }
}
@media(max-width:620px){
  .feed-item .fi-thumb{ width:68px; height:52px; }
  .feed-item h3{ font-size:15px; }
  .feed-focus{ padding:2px 12px; }
}
/* 平板以下:產品浮窗不再固定浮右(會擋內容),收進文末橫幅;手機完全改成普通區塊 */
@media(max-width:1180px){
  .prod-flow{ position:static; width:auto; right:auto; top:auto; margin:0 0 24px; box-shadow:var(--sh-1,0 2px 8px rgba(0,0,0,.06)); }
  .prod-flow .pf-body{ max-height:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px; }
  .pf-item{ margin-bottom:0; }
  .prod-reopen{ position:static; margin:0 0 16px; }
}

/* ── 科技風(body.aiv)補色 ──────────────────────────────────────────────── */
body.aiv .feed-focus{ background:rgba(120,160,255,.05); border-color:var(--aiv-line); }
body.aiv .feed-focus .feed-item{ border-bottom-color:var(--aiv-line); }
body.aiv .feed-focus .feed-item:hover{ background:rgba(120,160,255,.07); }
body.aiv .cat-sec-title a:hover{ color:var(--aiv-cyan); }
body.aiv .fl-card{ background:linear-gradient(180deg,var(--aiv-panel),var(--aiv-bg2)); border-color:var(--aiv-line); }
body.aiv .fl-card .fl-h{ color:var(--aiv-cyan); }
body.aiv .fl-item{ border-top-color:var(--aiv-line); }
body.aiv .fl-item:hover{ background:rgba(34,232,224,.08); }
body.aiv .fl-item h4{ color:#dbe6ff; }
body.aiv .fl-item .meta{ color:var(--aiv-mut2); }
body.aiv .fl-item .fl-rank{ color:var(--aiv-cyan); }
body.aiv .prod-flow{ background:linear-gradient(180deg,var(--aiv-panel),var(--aiv-bg2)); border-color:var(--aiv-line2); }
body.aiv .prod-flow .pf-head{ background:rgba(8,12,24,.92); border-bottom:1px solid var(--aiv-line2); }
body.aiv .pf-item{ background:var(--aiv-bg2); border-color:var(--aiv-line); }
body.aiv .pf-item:hover{ border-color:var(--aiv-cyan); box-shadow:0 6px 18px rgba(34,232,224,.12); }
body.aiv .pf-item .pf-name{ color:#eaf1ff; }
body.aiv .pf-item .pf-desc{ color:var(--aiv-mut); }
body.aiv .prod-reopen{ background:linear-gradient(96deg,var(--aiv-cyan),#5ad8ff); color:#04121a; }