/* ============================================================
   views.css — 首頁中欄與右欄清單、依主題瀏覽
   ============================================================ */

/* 中欄頭列：檢視切換（最新/精選/全部）+ 篇數 */
.center-head{ display:flex; align-items:center; gap:12px; margin:2px 2px 16px; }
.center-head h2{ font-size:1.15rem; margin:0; font-weight:700; }
.view-toggle{ display:flex; gap:6px; flex-wrap:wrap; }
.view-btn{ font-family: var(--font-mono); font-size:.78rem; font-weight:600; background:transparent; border:1.5px solid var(--line);
  color: var(--ink-soft); padding:5px 13px; border-radius:20px; cursor:pointer; }
.view-btn:hover{ color: var(--ink); }
.view-btn.active{ background: var(--teal); border-color: var(--teal); color:#fff; }
.center-head .count{ margin-left:auto; font-family: var(--font-mono); font-size:.74rem; color: var(--ink-soft); }

/* 卡片格線：3 → 2 → 1 欄 */
.grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
@media (max-width:1200px){ .grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){ .grid{ grid-template-columns:1fr; } }

/* 空狀態 */
.empty-state{ text-align:center; color: var(--ink-soft); font-family: var(--font-serif); padding:50px 0; }
.muted{ color: var(--ink-soft); font-family: var(--font-serif); }

/* ---- 依主題瀏覽（卡片格線下方；桌機常駐展開、手機收合手風琴） ---- */
.theme-browse{ margin-top:38px; }
.tg-groups{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.tg{ background: var(--card); border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: var(--shadow); }
.tg-head{ display:flex; align-items:center; gap:10px; padding:14px 18px; font-weight:700; font-size:.95rem; width:100%;
  background:none; border:none; font-family:inherit; color:inherit; text-align:left; }
.tg-head .cnt{ font-family: var(--font-mono); font-size:.7rem; color: var(--ink-soft); margin-left:auto; }
.tg-head .chev{ display:none; color: var(--ink-soft); font-size:.8rem; }
.tg-body{ padding:0 18px 10px; }
.tg-item{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px dashed var(--line); text-decoration:none; color:inherit; }
.tg-item:last-child{ border-bottom:none; }
.tg-item .em .emoji{ width:1.15rem; height:1.15rem; }
.tg-item .t{ font-family: var(--font-display); font-size:.9rem; }
.tg-item .z{ color: var(--ink-soft); font-size:.78rem; }
.tg-item .lv{ font-family: var(--font-mono); font-size:.6rem; background:rgba(23,126,110,.1); color: var(--teal-dark);
  padding:2px 8px; border-radius:10px; font-weight:600; margin-left:auto; flex-shrink:0; }
.tg-item .go{ color: var(--coral); font-family: var(--font-mono); font-size:.8rem; font-weight:600; flex-shrink:0; }
@media (max-width:960px){
  .tg-groups{ grid-template-columns:1fr; gap:10px; }
  .tg-head{ cursor:pointer; }
  .tg-head .chev{ display:inline; }
  .tg-body{ display:none; }
  .tg.open .tg-body{ display:block; }
}