@charset "utf-8";
/*!
 * 库库影视 · Bilibili 风格苹果CMS V10 模板
 * 文件：template/bilibili/css/style.css
 * 所属目录：css/ —— 样式资源目录（全站唯一样式表，不引第三方 CSS）
 * 说明：全站唯一样式表，含设计变量、组件、页面样式与响应式断点
 *
 * 章节索引（对应哪一类页面）：
 *    1. 设计变量                —— 全站配色 / 圆角 / 阴影，改这里就能整站换色
 *    2. 基础重置                —— 全站
 *    3. 顶部导航                —— public/head.html（全站）
 *    4. 分区快捷条（二级分类）  —— public/head.html（全站）
 *    5. 通用板块标题            —— 全站各页的「最新更新」「热播榜」等标题行
 *    6. 首页焦点图 + 排行榜     —— index/index.html
 *    7. 视频卡片                —— 首页 / 分类页 / 筛选页 / 搜索页 / 详情页的影片列表
 *    8. 通用两栏布局            —— 首页 / 详情页
 *    9. 面包屑                  —— 分类页 / 筛选页 / 详情页 / 播放页 / 留言板
 *   10. 分类页 / 筛选条         —— vod/type.html、vod/show.html
 *   11. 分页                    —— public/paging.html
 *   12. 视频详情页              —— vod/detail.html
 *   13. 播放页                  —— vod/play.html
 *   14. 搜索页                  —— vod/search.html
 *   15. 留言板                  —— gbook/index.html
 *   16. 页脚                    —— public/foot.html
 *   17. 返回顶部 / 移动端 Tab   —— public/foot.html
 *   18. 提示页 / 跳转页         —— public/msg.html、public/jump.html
 *   19. 响应式断点              —— 1200 / 992 / 768 / 480
 */

/* ============================================================
   1. 设计变量
   ============================================================ */
:root {
    --bk-pink: #FB7299;
    --bk-pink-dark: #E35D82;
    --bk-pink-soft: #FFF1F5;
    --bk-blue: #00AEEC;
    --bk-text: #18191C;
    --bk-text-2: #61666D;
    --bk-text-3: #9499A0;
    --bk-line: #E3E5E7;
    --bk-line-2: #F1F2F3;
    --bk-bg: #F6F7F8;
    --bk-card: #FFFFFF;
    --bk-dark: #18191C;
    --bk-radius: 8px;
    --bk-radius-lg: 12px;
    --bk-shadow: 0 4px 16px rgba(0, 0, 0, .06);
    --bk-shadow-hover: 0 10px 28px rgba(0, 0, 0, .14);
    --bk-header-h: 56px;
    --bk-max: 1400px;
}

/* ============================================================
   2. 基础重置
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
    margin: 0;
    background: var(--bk-bg);
    color: var(--bk-text);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { border: 0; max-width: 100%; vertical-align: middle; }
a { color: inherit; text-decoration: none; transition: color .2s; }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
iframe { border: 0; }
em, i { font-style: normal; }
:focus-visible { outline: 2px solid var(--bk-pink); outline-offset: 2px; }

.bk-container { width: 100%; max-width: var(--bk-max); margin: 0 auto; padding: 0 16px; }
.bk-hide { display: none !important; }
.bk-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   3. 顶部导航
   ============================================================ */
.bk-header {
    position: sticky; top: 0; z-index: 200;
    background: #fff;
    border-bottom: 1px solid var(--bk-line);
    transition: box-shadow .25s;
}
.bk-header.is-scrolled { box-shadow: 0 2px 12px rgba(0, 0, 0, .08); }

.bk-header-inner {
    display: flex; align-items: center; gap: 18px;
    height: var(--bk-header-h);
}

.bk-logo { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.bk-logo-mark {
    width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
    background: linear-gradient(135deg, #FB7299, #FF9DB8);
    color: #fff; font-weight: 800; font-size: 17px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    letter-spacing: -1px;
}
.bk-logo-text {
    font-size: 18px; font-weight: 700; color: var(--bk-text);
    max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.bk-nav { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.bk-nav-item {
    position: relative; height: var(--bk-header-h); padding: 0 12px;
    display: flex; align-items: center; white-space: nowrap;
    font-size: 15px; color: var(--bk-text-2);
}
.bk-nav-item:hover { color: var(--bk-pink); }
.bk-nav-item.is-active { color: var(--bk-pink); font-weight: 600; }
.bk-nav-item.is-active::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px;
    border-radius: 3px 3px 0 0; background: var(--bk-pink);
}

/* 搜索框 */
.bk-search {
    position: relative; display: flex; align-items: center; flex: 0 0 auto;
    width: 260px; min-width: 0; border-radius: var(--bk-radius);
    background: var(--bk-line-2); border: 1px solid transparent;
    transition: background .2s, border-color .2s;
}
.bk-search:focus-within { background: #fff; border-color: var(--bk-pink); }
.bk-search-input {
    flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 4px 0 12px;
    border: 0; background: transparent; outline: none;
}
.bk-search-input::placeholder { color: var(--bk-text-3); }
.bk-search-btn {
    width: 40px; height: 36px; border: 0; background: transparent;
    display: flex; align-items: center; justify-content: center;
    color: var(--bk-text-3); border-radius: var(--bk-radius);
}
.bk-search-btn:hover { color: var(--bk-pink); }

.bk-head-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 0; }
.bk-icon-btn {
    width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent;
    display: flex; align-items: center; justify-content: center;
    color: var(--bk-text-2);
}
.bk-icon-btn:hover { background: var(--bk-line-2); color: var(--bk-pink); }

.bk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 34px; padding: 0 16px; border-radius: 999px;
    border: 1px solid transparent; font-size: 14px; white-space: nowrap;
    transition: background .2s, color .2s, border-color .2s;
}
.bk-btn-primary { background: var(--bk-pink); color: #fff; }
.bk-btn-primary:hover { background: var(--bk-pink-dark); color: #fff; }
.bk-btn-line { border-color: var(--bk-line); color: var(--bk-text-2); background: #fff; }
.bk-btn-line:hover { border-color: var(--bk-pink); color: var(--bk-pink); }

.bk-menu-toggle { display: none; }

/* ============================================================
   4. 分区快捷条
   ============================================================ */
.bk-subnav { background: #fff; border-bottom: 1px solid var(--bk-line); }
.bk-subnav-inner {
    display: flex; align-items: center; gap: 6px; height: 42px;
    overflow-x: auto; scrollbar-width: none;
}
.bk-subnav-inner::-webkit-scrollbar { display: none; }
.bk-subnav-item {
    flex: 0 0 auto; padding: 4px 12px; border-radius: 999px;
    font-size: 13px; color: var(--bk-text-2); background: transparent;
}
.bk-subnav-item:hover { background: var(--bk-pink-soft); color: var(--bk-pink); }

/* ============================================================
   5. 通用板块标题
   ============================================================ */
.bk-section { margin-top: 26px; }
.bk-section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px;
}
.bk-section-title {
    position: relative; padding-left: 12px;
    font-size: 20px; font-weight: 700; line-height: 1.3;
}
.bk-section-title::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 18px; border-radius: 2px; background: var(--bk-pink);
}
.bk-section-title small {
    margin-left: 8px; font-size: 13px; font-weight: 400; color: var(--bk-text-3);
}
.bk-section-more {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px;
    font-size: 13px; color: var(--bk-text-3);
}
.bk-section-more:hover { color: var(--bk-pink); }

/* ============================================================
   6. 首页焦点图
   ============================================================ */
.bk-hero {
    display: grid; grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px; margin-top: 16px;
}

.bk-slider {
    position: relative; border-radius: var(--bk-radius-lg); overflow: hidden;
    background: #22262e; aspect-ratio: 16 / 9;
}
.bk-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .55s; z-index: 1; }
.bk-slide.is-active { opacity: 1; z-index: 2; }
.bk-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-slide-info {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 24px 22px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .88)); color: #fff;
}
.bk-slide-title {
    font-size: 22px; font-weight: 700; margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.bk-slide-desc {
    font-size: 13px; opacity: .85; margin-bottom: 10px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bk-slide-tags { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; }
.bk-slide-tags span {
    padding: 2px 10px; border-radius: 999px;
    background: rgba(255, 255, 255, .18); backdrop-filter: blur(4px);
}
.bk-slide-tags .bk-tag-pink { background: var(--bk-pink); }

.bk-slider-prev,
.bk-slider-next {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 40px; height: 40px; border-radius: 50%; border: 0;
    background: rgba(0, 0, 0, .35); color: #fff;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .25s, background .25s;
}
.bk-slider-prev { left: 12px; }
.bk-slider-next { right: 12px; }
.bk-slider:hover .bk-slider-prev,
.bk-slider:hover .bk-slider-next { opacity: 1; }
.bk-slider-prev:hover,
.bk-slider-next:hover { background: var(--bk-pink); }

.bk-slider-dots {
    position: absolute; left: 0; right: 0; bottom: 12px; z-index: 5;
    display: flex; justify-content: center; gap: 6px;
}
.bk-dot {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
    background: rgba(255, 255, 255, .45); transition: width .25s, background .25s;
}
.bk-dot.is-active { width: 22px; background: var(--bk-pink); }

/* 排行榜 */
.bk-rank {
    display: flex; flex-direction: column;
    background: #fff; border-radius: var(--bk-radius-lg); padding: 6px 6px 10px;
    box-shadow: var(--bk-shadow);
}
.bk-rank-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px 6px;
}
.bk-rank-head h2 { font-size: 16px; font-weight: 700; }
.bk-rank-head a { font-size: 12px; color: var(--bk-text-3); }
.bk-rank-head a:hover { color: var(--bk-pink); }
.bk-rank-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 12px; border-radius: var(--bk-radius);
    transition: background .2s;
}
.bk-rank-item:hover { background: var(--bk-line-2); }
.bk-rank-num {
    flex: 0 0 auto; width: 18px; text-align: center;
    font-size: 14px; font-weight: 700; color: var(--bk-text-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden;
}
.bk-rank-item:nth-child(2) .bk-rank-num { color: #FF6B6B; }
.bk-rank-item:nth-child(3) .bk-rank-num { color: #FF9F43; }
.bk-rank-item:nth-child(4) .bk-rank-num { color: #FFC048; }
.bk-rank-body { flex: 1 1 auto; min-width: 0; }
.bk-rank-title {
    font-size: 14px; color: var(--bk-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bk-rank-item:hover .bk-rank-title { color: var(--bk-pink); }
.bk-rank-meta {
    font-size: 12px; color: var(--bk-text-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================
   7. 视频卡片
   ============================================================ */
.bk-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 16px;
}
.bk-grid-6 { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.bk-card { display: block; }
.bk-cover {
    position: relative; aspect-ratio: 3 / 4; border-radius: var(--bk-radius);
    overflow: hidden; background: linear-gradient(140deg, #2C313A, #4B5261);
}
.bk-cover img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .4s ease;
}
.bk-card:hover .bk-cover img { transform: scale(1.06); }
.bk-cover::after {
    content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .32);
    opacity: 0; transition: opacity .25s;
}
.bk-card:hover .bk-cover::after { opacity: 1; }

.bk-cover-play {
    position: absolute; left: 50%; top: 50%; z-index: 3;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(251, 114, 153, .95);
    display: flex; align-items: center; justify-content: center;
    transform: translate(-50%, -50%) scale(.75); opacity: 0;
    transition: opacity .25s, transform .25s;
}
.bk-cover-play svg { width: 18px; height: 18px; fill: #fff; margin-left: 2px; }
.bk-card:hover .bk-cover-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.bk-badge {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 18px 8px 6px; color: #fff; font-size: 12px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .78));
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bk-score {
    position: absolute; right: 6px; top: 6px; z-index: 2;
    padding: 1px 6px; border-radius: 4px; font-size: 12px; font-weight: 700;
    color: #FFD666; background: rgba(0, 0, 0, .55);
}
.bk-corner {
    position: absolute; left: 6px; top: 6px; z-index: 2;
    padding: 1px 6px; border-radius: 4px; font-size: 12px;
    color: #fff; background: var(--bk-pink);
}

.bk-card-title {
    margin: 8px 0 2px; font-size: 14px; font-weight: 500; line-height: 1.42;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 40px;
}
.bk-card:hover .bk-card-title { color: var(--bk-pink); }
.bk-card-sub {
    font-size: 12px; color: var(--bk-text-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 横向列表卡片（搜索结果 / 侧栏） */
.bk-list-item {
    display: flex; gap: 12px; padding: 10px; border-radius: var(--bk-radius-lg);
    background: #fff; transition: box-shadow .2s, transform .2s;
}
.bk-list-item:hover { box-shadow: var(--bk-shadow-hover); transform: translateY(-2px); }
.bk-list-thumb {
    flex: 0 0 auto; width: 116px; aspect-ratio: 3 / 4; border-radius: var(--bk-radius);
    overflow: hidden; background: linear-gradient(140deg, #2C313A, #4B5261);
}
.bk-list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-list-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.bk-list-title {
    font-size: 16px; font-weight: 600; margin-bottom: 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bk-list-item:hover .bk-list-title { color: var(--bk-pink); }
.bk-list-desc {
    font-size: 13px; color: var(--bk-text-2); margin-bottom: 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bk-list-meta {
    margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 14px;
    font-size: 12px; color: var(--bk-text-3);
}
.bk-list-meta em { color: var(--bk-pink); }

/* ============================================================
   8. 通用两栏布局
   ============================================================ */
.bk-main {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px; align-items: start; margin-top: 20px;
}
.bk-panel {
    background: #fff; border-radius: var(--bk-radius-lg);
    padding: 16px; box-shadow: var(--bk-shadow);
}
.bk-panel + .bk-panel { margin-top: 16px; }

/* ============================================================
   9. 面包屑
   ============================================================ */
.bk-crumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 14px 0 0; font-size: 13px; color: var(--bk-text-3);
}
.bk-crumb a:hover { color: var(--bk-pink); }
.bk-crumb span.sep { color: var(--bk-line); }
.bk-crumb strong { font-weight: 400; color: var(--bk-text-2); }

/* ============================================================
   10. 分类页 / 筛选
   ============================================================ */
.bk-filter {
    background: #fff; border-radius: var(--bk-radius-lg);
    padding: 6px 16px; box-shadow: var(--bk-shadow); margin-top: 14px;
}
.bk-filter-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 0; border-bottom: 1px dashed var(--bk-line);
}
.bk-filter-row:last-child { border-bottom: 0; }
.bk-filter-label {
    flex: 0 0 auto; width: 56px; padding-top: 4px;
    font-size: 13px; color: var(--bk-text-3);
}
.bk-filter-items { display: flex; flex-wrap: wrap; gap: 4px 6px; flex: 1 1 auto; }
/* 没有可选项时整行隐藏 */
.bk-filter-row:not(:has(.bk-chip)) { display: none; }
.bk-chip {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    font-size: 13px; color: var(--bk-text-2); background: transparent;
}
.bk-chip:hover { background: var(--bk-pink-soft); color: var(--bk-pink); }
.bk-chip.is-active { background: var(--bk-pink); color: #fff; }
.bk-chip em { margin-left: 4px; font-size: 12px; color: var(--bk-text-3); }
.bk-chip.is-active em { color: rgba(255, 255, 255, .8); }

.bk-sortbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 16px 0 14px;
}
.bk-sortbar .bk-sort-item {
    padding: 6px 16px; border-radius: 999px; background: #fff;
    font-size: 13px; color: var(--bk-text-2); box-shadow: var(--bk-shadow);
}
.bk-sortbar .bk-sort-item:hover { color: var(--bk-pink); }
.bk-sortbar .bk-sort-item.is-active { background: var(--bk-pink); color: #fff; }
.bk-sortbar .bk-count { margin-left: auto; font-size: 13px; color: var(--bk-text-3); }
.bk-sortbar .bk-count em { color: var(--bk-pink); font-weight: 700; }

.bk-empty {
    padding: 60px 20px; text-align: center; color: var(--bk-text-3);
    background: #fff; border-radius: var(--bk-radius-lg);
}
.bk-empty svg { width: 72px; height: 72px; fill: var(--bk-line); margin-bottom: 12px; }

/* ============================================================
   11. 分页
   ============================================================ */
.bk-paging { display: flex; justify-content: center; padding: 26px 0 8px; }
.bk-paging ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bk-paging li a,
.bk-paging li span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 10px;
    border-radius: var(--bk-radius); background: #fff;
    font-size: 14px; color: var(--bk-text-2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}
.bk-paging li a:hover { color: var(--bk-pink); background: var(--bk-pink-soft); }
.bk-paging li.is-active a,
.bk-paging li.is-active span { background: var(--bk-pink); color: #fff; }
.bk-paging li.is-disabled a { color: var(--bk-text-3); opacity: .6; pointer-events: none; }
.bk-paging .bk-page-jump {
    display: inline-flex; align-items: center; gap: 6px; margin-left: 6px;
    font-size: 13px; color: var(--bk-text-3);
}
.bk-paging .bk-page-jump input {
    width: 52px; height: 36px; padding: 0 8px; text-align: center;
    border: 1px solid var(--bk-line); border-radius: var(--bk-radius);
    background: #fff; outline: none;
}
.bk-paging .bk-page-jump input:focus { border-color: var(--bk-pink); }
.bk-paging .bk-page-jump button {
    height: 36px; padding: 0 14px; border: 0; border-radius: var(--bk-radius);
    background: var(--bk-pink); color: #fff;
}

/* ============================================================
   12. 视频详情页
   ============================================================ */
.bk-hero-detail {
    position: relative; margin-top: 0; padding: 28px 0 24px;
    background: #1B1E24; color: #fff; overflow: hidden;
}
.bk-hero-detail-bg {
    position: absolute; inset: -20px; background-size: cover; background-position: center;
    filter: blur(28px) brightness(.45); transform: scale(1.15);
}
.bk-hero-detail-inner {
    position: relative; display: grid; grid-template-columns: 224px minmax(0, 1fr);
    gap: 26px;
}
.bk-hero-poster {
    position: relative; aspect-ratio: 3 / 4; border-radius: var(--bk-radius-lg);
    overflow: hidden; box-shadow: 0 10px 32px rgba(0, 0, 0, .45);
    background: #2C313A;
}
.bk-hero-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bk-hero-info { display: flex; flex-direction: column; min-width: 0; }
.bk-hero-title {
    font-size: 28px; font-weight: 700; line-height: 1.3; margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bk-hero-sub { font-size: 14px; color: rgba(255, 255, 255, .6); margin-bottom: 14px; }
.bk-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.bk-hero-tags a,
.bk-hero-tags span {
    padding: 3px 12px; border-radius: 999px; font-size: 12px;
    background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .9);
}
.bk-hero-tags a:hover { background: var(--bk-pink); color: #fff; }

.bk-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 12px; }
.bk-hero-meta dl { display: flex; gap: 6px; font-size: 13px; margin: 0; }
.bk-hero-meta dt { color: rgba(255, 255, 255, .5); }
.bk-hero-meta dd { margin: 0; color: rgba(255, 255, 255, .9); max-width: 320px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-hero-meta dd a:hover { color: var(--bk-pink); }

.bk-hero-score {
    display: flex; align-items: baseline; gap: 6px; margin: 2px 0 12px;
    color: #FFB800; font-weight: 700;
}
.bk-hero-score strong { font-size: 26px; }
.bk-hero-score span { font-size: 12px; color: rgba(255, 255, 255, .5); font-weight: 400; }

.bk-hero-blurb {
    font-size: 13px; color: rgba(255, 255, 255, .72); line-height: 1.75;
    max-width: 900px; margin-bottom: 16px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bk-hero-blurb.is-open { -webkit-line-clamp: unset; }

.bk-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.bk-hero-actions .bk-btn { height: 40px; padding: 0 24px; font-size: 15px; }
.bk-btn-ghost {
    background: rgba(255, 255, 255, .16); color: #fff;
}
.bk-btn-ghost:hover { background: rgba(255, 255, 255, .28); color: #fff; }

.bk-detail-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px; align-items: start; margin-top: 20px;
}

.bk-block-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px;
}
.bk-block-title {
    position: relative; padding-left: 12px;
    font-size: 18px; font-weight: 700; line-height: 1.3;
}
.bk-block-title::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 16px; border-radius: 2px; background: var(--bk-pink);
}

.bk-article { font-size: 14px; line-height: 1.9; color: var(--bk-text-2); word-break: break-word; }
.bk-article img { height: auto; border-radius: var(--bk-radius); }
.bk-article p { margin: 0 0 12px; }
.bk-article a { color: var(--bk-blue); }

.bk-playlist-line { margin-bottom: 18px; }
.bk-playlist-line:last-child { margin-bottom: 0; }
.bk-playlist-line h3 {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600; margin-bottom: 10px;
}
.bk-playlist-line h3 .bk-line-tag {
    padding: 1px 8px; border-radius: 4px; font-size: 12px;
    background: var(--bk-pink-soft); color: var(--bk-pink); font-weight: 400;
}
.bk-eps {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px;
}
.bk-ep {
    display: block; padding: 8px 4px; text-align: center;
    border-radius: 6px; background: var(--bk-line-2); color: var(--bk-text-2);
    font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bk-ep:hover { background: var(--bk-pink-soft); color: var(--bk-pink); }

/* ============================================================
   13. 播放页
   ============================================================ */
.bk-play-top { background: #0F1115; padding: 16px 0 24px; }
.bk-play-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px; align-items: start;
}
.bk-player-box {
    border-radius: var(--bk-radius-lg); overflow: hidden; background: #000;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .4);
}
.bk-player-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.bk-player-frame > div,
.bk-player-frame > iframe,
.bk-player-frame > video,
.bk-player-frame > embed,
.bk-player-frame > object,
.bk-player-frame .MacPlayer,
.bk-player-frame #player {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

.bk-play-titlebar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 0 0; color: #fff;
}
.bk-play-titlebar h1 {
    flex: 1 1 auto; min-width: 0; font-size: 18px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bk-play-titlebar h1 span { color: var(--bk-pink); font-weight: 400; }
.bk-play-nav { display: flex; gap: 8px; flex: 0 0 auto; }
.bk-play-nav a {
    padding: 6px 14px; border-radius: 999px; font-size: 13px;
    background: rgba(255, 255, 255, .12); color: #fff;
}
.bk-play-nav a:hover { background: var(--bk-pink); color: #fff; }

.bk-side-card {
    background: #fff; border-radius: var(--bk-radius-lg); overflow: hidden;
    box-shadow: var(--bk-shadow);
}
.bk-side-card + .bk-side-card { margin-top: 16px; }
.bk-side-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 10px;
}
.bk-side-head h2 { font-size: 16px; font-weight: 700; }
.bk-side-body { padding: 0 10px 10px; }

.bk-play-panel { background: #fff; border-radius: var(--bk-radius-lg); margin-top: 16px;
    box-shadow: var(--bk-shadow); overflow: hidden; }
.bk-lines {
    display: flex; gap: 8px; padding: 14px 16px; overflow-x: auto;
    border-bottom: 1px solid var(--bk-line); scrollbar-width: none;
}
.bk-lines::-webkit-scrollbar { display: none; }
.bk-line-tab {
    flex: 0 0 auto; padding: 6px 16px; border-radius: 999px;
    background: var(--bk-line-2); color: var(--bk-text-2); font-size: 13px;
}
.bk-line-tab:hover { background: var(--bk-pink-soft); color: var(--bk-pink); }
.bk-line-tab.is-active { background: var(--bk-pink); color: #fff; }
.bk-eps-panel { padding: 14px 16px 18px; }
.bk-eps-panel[hidden] { display: none; }
/* 播放页剧集过多时可滚动 */
.bk-eps-panel .bk-eps { max-height: 336px; overflow-y: auto; padding-right: 4px; }
.bk-eps .is-active { background: var(--bk-pink); color: #fff; }

.bk-play-info {
    display: flex; flex-wrap: wrap; gap: 8px 20px;
    padding: 12px 16px; border-top: 1px solid var(--bk-line);
    font-size: 13px; color: var(--bk-text-3);
}

/* ============================================================
   14. 搜索页
   ============================================================ */
.bk-search-hero {
    background: #fff; border-radius: var(--bk-radius-lg);
    padding: 26px 16px; margin-top: 16px; text-align: center;
    box-shadow: var(--bk-shadow);
}
.bk-search-hero h1 { font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.bk-search-hero h1 em { color: var(--bk-pink); font-style: normal; }
.bk-search-big {
    display: flex; align-items: center; gap: 8px; max-width: 620px; margin: 0 auto;
    background: var(--bk-line-2); border: 1px solid transparent;
    border-radius: 999px; padding: 4px 6px 4px 18px;
    transition: background .2s, border-color .2s;
}
.bk-search-big:focus-within { background: #fff; border-color: var(--bk-pink); }
.bk-search-big input { flex: 1 1 auto; min-width: 0; height: 38px; border: 0; background: transparent; outline: none; }
.bk-search-big button {
    flex: 0 0 auto; height: 38px; padding: 0 26px; border: 0;
    border-radius: 999px; background: var(--bk-pink); color: #fff; font-size: 15px;
}
.bk-search-big button:hover { background: var(--bk-pink-dark); }
.bk-hotwords {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin-top: 14px; font-size: 13px; color: var(--bk-text-3);
}
.bk-hotwords a { color: var(--bk-text-2); }
.bk-hotwords a:hover { color: var(--bk-pink); }

.bk-result-list { display: grid; gap: 12px; }
.bk-result-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; margin: 20px 0 14px;
}
.bk-result-head h2 { font-size: 16px; font-weight: 700; }
.bk-result-head h2 em { color: var(--bk-pink); font-style: normal; }

/* ============================================================
   15. 留言板
   ============================================================ */
.bk-gbook-form {
    background: #fff; border-radius: var(--bk-radius-lg);
    padding: 18px; box-shadow: var(--bk-shadow); margin-top: 16px;
}
.bk-gbook-form h2 { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.bk-gbook-form textarea {
    width: 100%; min-height: 120px; padding: 12px 14px; resize: vertical;
    border: 1px solid var(--bk-line); border-radius: var(--bk-radius);
    background: #FAFBFC; outline: none; line-height: 1.7;
}
.bk-gbook-form textarea:focus { border-color: var(--bk-pink); background: #fff; }
.bk-gbook-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px;
}
.bk-gbook-bar .bk-remaining { margin-right: auto; font-size: 13px; color: var(--bk-text-3); }
.bk-gbook-bar .bk-remaining em { color: var(--bk-pink); }
.bk-gbook-bar input.verify {
    width: 120px; height: 38px; padding: 0 12px;
    border: 1px solid var(--bk-line); border-radius: var(--bk-radius);
    background: #FAFBFC; outline: none;
}
.bk-gbook-bar input.verify:focus { border-color: var(--bk-pink); background: #fff; }
.bk-gbook-bar img {
    height: 38px; border-radius: var(--bk-radius); cursor: pointer;
    border: 1px solid var(--bk-line);
}
.bk-gbook-submit {
    height: 38px; padding: 0 26px; border: 0; border-radius: 999px;
    background: var(--bk-pink); color: #fff; font-size: 15px;
}
.bk-gbook-submit:hover { background: var(--bk-pink-dark); }

.bk-gbook-list { margin-top: 16px; display: grid; gap: 12px; }
.bk-gbook-item {
    background: #fff; border-radius: var(--bk-radius-lg);
    padding: 16px; box-shadow: var(--bk-shadow);
}
.bk-gbook-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bk-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
    background: linear-gradient(135deg, #FB7299, #FF9DB8);
    color: #fff; font-weight: 700; font-size: 16px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; white-space: nowrap;
}
.bk-gbook-name { font-weight: 600; font-size: 14px; }
.bk-gbook-time { margin-left: auto; font-size: 12px; color: var(--bk-text-3); }
.bk-gbook-text { font-size: 14px; line-height: 1.8; color: var(--bk-text-2); word-break: break-word; }
.bk-gbook-reply {
    margin-top: 10px; padding: 10px 14px; border-radius: var(--bk-radius);
    background: var(--bk-pink-soft); font-size: 13px; line-height: 1.75; color: var(--bk-text-2);
}
.bk-gbook-reply strong { color: var(--bk-pink); margin-right: 6px; }
.bk-gbook-foot { margin-top: 8px; font-size: 12px; color: var(--bk-text-3); }

/* ============================================================
   16. 页脚
   ============================================================ */
.bk-footer {
    margin-top: 40px; padding: 30px 0 24px;
    background: #fff; border-top: 1px solid var(--bk-line);
    color: var(--bk-text-3); font-size: 13px;
}
.bk-footer-links {
    display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px;
    padding-bottom: 14px; border-bottom: 1px dashed var(--bk-line);
}
.bk-footer-links a:hover { color: var(--bk-pink); }
.bk-footer-copy { line-height: 2; }
.bk-footer-copy a { color: var(--bk-text-2); }
.bk-footer-copy a:hover { color: var(--bk-pink); }
.bk-footer-note { margin-top: 8px; font-size: 12px; color: #B5B9BF; }

/* ============================================================
   17. 返回顶部 / 移动端底部导航
   ============================================================ */
.bk-backtop {
    position: fixed; right: 20px; bottom: 30px; z-index: 300;
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: #fff; color: var(--bk-text-2);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .14);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .25s, visibility .25s, transform .25s;
}
.bk-backtop.is-show { opacity: 1; visibility: visible; transform: none; }
.bk-backtop:hover { color: var(--bk-pink); }

.bk-tabbar { display: none; }

/* 移动端抽屉 */
.bk-drawer-mask {
    position: fixed; inset: 0; z-index: 400; background: rgba(0, 0, 0, .45);
    opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.bk-drawer-mask.is-open { opacity: 1; visibility: visible; }
.bk-drawer {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 401;
    width: 78%; max-width: 320px; background: #fff;
    transform: translateX(-102%); transition: transform .28s ease;
    display: flex; flex-direction: column;
}
.bk-drawer.is-open { transform: none; }
.bk-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--bk-line);
}
.bk-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 0; }
.bk-drawer-body a {
    display: block; padding: 12px 18px; font-size: 15px; color: var(--bk-text-2);
}
.bk-drawer-body a:hover { background: var(--bk-pink-soft); color: var(--bk-pink); }
.bk-drawer-body .bk-drawer-group {
    padding: 10px 18px 4px; font-size: 12px; color: var(--bk-text-3);
}

/* ============================================================
   18. 提示 / 跳转页
   ============================================================ */
.bk-msg-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 40px 16px; background: var(--bk-bg);
}
.bk-msg-card {
    width: 100%; max-width: 480px; background: #fff; text-align: center;
    border-radius: var(--bk-radius-lg); padding: 40px 28px; box-shadow: var(--bk-shadow);
}
.bk-msg-card .bk-msg-ico {
    width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
    background: var(--bk-pink-soft); color: var(--bk-pink);
    display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.bk-msg-card h1 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.bk-msg-card p { color: var(--bk-text-2); margin-bottom: 20px; word-break: break-word; }
.bk-msg-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   19. 响应式
   ============================================================ */
@media (max-width: 1200px) {
    .bk-hero { grid-template-columns: minmax(0, 1fr) 300px; }
    .bk-main,
    .bk-detail-layout { grid-template-columns: minmax(0, 1fr) 280px; }
    .bk-play-layout { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 992px) {
    .bk-hero { grid-template-columns: 1fr; }
    .bk-hero .bk-rank { margin-top: 0; }
    .bk-main,
    .bk-detail-layout,
    .bk-play-layout { grid-template-columns: 1fr; }
    .bk-nav { display: none; }
    .bk-search { flex: 1 1 auto; width: auto; }
    .bk-head-actions .bk-btn-line,
    .bk-head-actions .bk-btn-primary { display: none; }
    .bk-menu-toggle { display: flex; }
    .bk-hero-detail-inner { grid-template-columns: 180px minmax(0, 1fr); gap: 18px; }
    .bk-hero-title { font-size: 22px; }
}

@media (max-width: 768px) {
    :root { --bk-header-h: 50px; }
    body { padding-bottom: 58px; }
    .bk-container { padding: 0 12px; }
    .bk-logo-text { max-width: 110px; font-size: 16px; }
    .bk-section-title { font-size: 17px; }
    .bk-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
    .bk-grid-6 { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .bk-card-title { font-size: 13px; min-height: 37px; }
    .bk-slide-info { padding: 32px 14px 16px; }
    .bk-slide-title { font-size: 17px; }
    .bk-slide-desc { display: none; }
    .bk-slider-prev,
    .bk-slider-next { display: none; }

    .bk-hero-detail { padding: 18px 0; }
    .bk-hero-detail-inner { grid-template-columns: 116px minmax(0, 1fr); gap: 14px; }
    .bk-hero-title { font-size: 18px; }
    .bk-hero-blurb { -webkit-line-clamp: 2; }
    .bk-hero-meta { gap: 4px 16px; }
    .bk-hero-meta dd { max-width: 100%; }
    .bk-hero-actions .bk-btn { height: 36px; padding: 0 18px; font-size: 14px; }
    .bk-hero-score strong { font-size: 20px; }

    .bk-list-thumb { width: 92px; }
    .bk-list-title { font-size: 15px; }

    .bk-play-titlebar h1 { font-size: 15px; white-space: normal; }
    .bk-eps { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; }

    .bk-backtop { bottom: 72px; right: 12px; }

    /* 移动端底部导航 */
    .bk-tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 350;
        display: flex; height: 58px; background: #fff;
        border-top: 1px solid var(--bk-line);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .bk-tabbar a {
        flex: 1 1 0; display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 2px;
        font-size: 11px; color: var(--bk-text-3);
    }
    .bk-tabbar a svg { width: 22px; height: 22px; fill: currentColor; }
    .bk-tabbar a.is-active { color: var(--bk-pink); }

    .bk-filter-label { width: 44px; }
    .bk-filter { padding: 4px 12px; }
}

@media (max-width: 480px) {
    .bk-grid { grid-template-columns: repeat(2, 1fr); }
    .bk-grid-6 { grid-template-columns: repeat(2, 1fr); }
    .bk-hero-detail-inner { grid-template-columns: 100px minmax(0, 1fr); }
    .bk-search-big button { padding: 0 18px; }
}

/* 打印：隐藏交互元素 */
@media print {
    .bk-header, .bk-footer, .bk-backtop, .bk-tabbar, .bk-slider-dots { display: none !important; }
}