/* ============================================================
tp21_dark_black — main.css
本檔由 tp17_dark_black 的 main.css 整份複製而來（見 .claude/CLAUDE.md §1），
結構／選擇器／功能鉤子完全不動，這裡只改了 :root 配色（橙→粉）跟新增
Hero 輪播／頂欄搜尋框等 tp21 專屬的視覺調整，其餘規則沿用 tp17 原樣，
不要看到「tp17」字樣的既有註解就以為寫錯檔案，那些是複製過來時保留的說明。
視覺：黑底白字粉點綴，純頂欄導覽（無常駐側欄）＋漢堡抽屜選單，參考 4kvms.org 版式。
============================================================ */
/* ===== CSS Variables ===== */
:root {
/* 背景層（黑底，比 tp17 的 #0B0B0D 更深、更接近純黑，比照 4kvms.org 截圖） */
--bg-body: #060607;
--bg-page: #060607;
--bg-card: #141416;
--bg-card-hover: #1C1C1F;
--bg-elevated: #19191C;
--bg-input: #1C1C1F;
--bg-overlay: rgba(0,0,0,.75);
/* 主調色改為粉色（黑底白字＋粉色點綴，比照 4kvms.org 頂欄「首页」選中底線／
Hero 分頁圓點的顏色），用法跟 tp17 的 --accent 完全對應，只是換色票。 */
--accent: #FF2D6A;
--accent-hover: #FF548A;
--accent-grad: linear-gradient(135deg, #FF2D6A 0%, #FF6F9C 100%);
--accent-muted: rgba(255,45,106,.14);
--fill: var(--accent);
--fill-hover: var(--accent-hover);
/* 文字（白字系，黑底） */
--text-1: #FFFFFF;
--text-2: #ABABB0;
--text-3: #737379;
--border: #26262A;
--border-light: #33333A;
--topbar-bg: #0A0A0C;
--topbar-input-bg: rgba(255,255,255,.06);
--sidebar-overlay: rgba(0,0,0,.6);
--sidebar-text: rgba(255,255,255,.85);
--sidebar-text-muted: rgba(255,255,255,.6);
--topbar-h: 64px;
--sidebar-w: 0px; /* 純頂欄導覽，同 tp17，不要改回非 0，見 tp17 CLAUDE.md §1／§2 */
--container-w: none;
/* 全站（含頂欄）不設寬度上限，鋪滿到瀏覽器左右邊緣——這點刻意跟 tp17 相反
（tp17 CLAUDE.md §9 記錄的是「置中＋有上限」，那是 tp17 專屬、使用者
比對 kuaibo8.com 後才要求的行為）。tp21 依使用者截圖回報，大螢幕下要
像 tp13 那種「不置中、內容直接鋪到邊緣」的寬版面，不要看到 tp17 的
--page-max-w 用法就照搬過來當成通用規則。 */
--page-max-w: none;
--radius: 4px;
--radius-sm: 3px;
--shadow-card: 0 2px 14px rgba(0,0,0,.5);
/* tp16 移植块（详情/播放/下载/分集/专题等页共用 CSS）用的 token 别名 */
--border-2: var(--border-light);
--accent-light: var(--accent-muted);
--radius-pill: 50px;
--content-max: var(--page-max-w);
--bg-base: var(--bg-body);
--score-hi: var(--accent);
--accent-2: var(--rank-1);
--accent-2-alt: #ffe066;
--shadow-panel: 0 10px 40px rgba(0,0,0,.6);
--rank-1: #FFD700;
--rank-2: #C0C0C0;
--rank-3: #CD7F32;
--score-mid: #FFB800;
}
/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg-body); color: var(--text-1); min-height: 100%; }
body { font-family: "PingFang SC","Microsoft YaHei",Arial,sans-serif; font-size: 14px; line-height: 1.6; }
a { text-decoration: none; color: inherit; }
a:hover { color: var(--accent); transition: .15s ease-in-out; }
/* 全域圖片佔位背景（需求方 skill §B 硬性要求）：裸 img{} 選擇器，全站所有
內容 ![]()
自動套用，不用逐個 widget 補——載入前透出這個底圖/底色、載入
成功後被不透明的實際圖片蓋掉、載入失敗（onerror 沒接住或還沒觸發）時一樣
透出這個占位，避免破圖時整塊變空白。sprite 圖示是