/* ── 創作者輪播 ──
   從 search.html 內嵌 <style> 抽出（2026-07-18），
   原因：SPA導航（spa-router.js的fetch()+innerHTML換main-content）不會重新解析<head>，
   內嵌<style>只在整頁最初直接載入時生效一次；透過側邊欄連結SPA導航進入search.html時，
   這段樣式完全不生效，導致「熱門創作者」頭像/卡片跑版（頭像超大、無圓形裁切、字體異常）。
   抽成外部檔案並交給 spa-router.js manifest 管理即可修復。 */
.creator-carousel-wrap { display: flex; align-items: center; gap: 8px; }
.creator-carousel-track-wrap { flex: 1; overflow: hidden; }
.creator-carousel-track { display: flex; gap: 12px; transition: opacity 0.15s ease; }
.carousel-nav-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-color,#2F3336); background: var(--bg-secondary,#16181C); color: var(--text-secondary,#71767B); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s; }
.carousel-nav-btn:hover:not(:disabled) { border-color: var(--primary-color,#1D9BF0); color: var(--primary-color,#1D9BF0); }
.carousel-nav-btn:disabled { opacity: 0.3; cursor: default; }
.carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-color,#2F3336); cursor: pointer; transition: background 0.15s; }
.carousel-dot.active { background: var(--primary-color,#1D9BF0); }
/* ── 創作者卡片 ── */
.cc-card { flex: 1; min-width: 0; background: var(--bg-secondary,#16181C); border: 1px solid var(--border-color,#2F3336); border-radius: 14px; padding: 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: border-color 0.15s; text-align: center; }
.cc-card:hover { border-color: var(--primary-color,#1D9BF0); }
.cc-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--primary-color,#1D9BF0); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: #fff; overflow: hidden; flex-shrink: 0; }
.cc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cc-name { font-size: 14px; font-weight: 700; color: var(--text-primary,#E7E9EA); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.cc-price { font-size: 12px; color: var(--text-secondary,#71767B); }
.cc-btn { width: 100%; padding: 6px 0; border-radius: 20px; border: 1.5px solid var(--primary-color,#1D9BF0); background: transparent; color: var(--primary-color,#1D9BF0); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; margin-top: 2px; }
.cc-btn:hover { background: var(--primary-color,#1D9BF0); color: #fff; }
.cc-btn.subscribed { background: var(--primary-color,#1D9BF0); color: #fff; }
