/*
 * 卡乐售 - bili 模板（PC 端）内页公共件
 * 面包屑 / 白卡 / 返回按钮 / 统计条这几个各页都要用，统一放这里；
 * 详情页 buy.2.css、列表页 list.2.css 都假定本文件已先加载
 */

/* 面包屑 */
.bi-crumb { display: flex; align-items: center; gap: 8px; padding: 14px 2px; font-size: 13px; color: var(--bi-text-3); }
.bi-crumb a { color: var(--bi-text-2); text-decoration: none; }
.bi-crumb a:hover { color: var(--bi-pink); }
.bi-crumb i { font-style: normal; color: #c9ccd4; }
.bi-crumb b { font-weight: 600; color: var(--bi-text); max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 通用白卡 */
.bi-card-box { background: #fff; border-radius: var(--bi-radius); box-shadow: var(--bi-shadow); margin-bottom: 16px; }

/* 返回按钮（空态里用） */
.bi-buy-back { display: inline-block; padding: 7px 26px; border: 1px solid var(--bi-pink); border-radius: 18px; color: var(--bi-pink); font-size: 13.5px; text-decoration: none; }
.bi-buy-back:hover { background: var(--bi-pink); color: #fff; }

/* 右上「共 N 件/篇」 */
.bi-list-total { margin-left: auto; font-size: 13px; color: var(--bi-text-3); }
.bi-list-total b { color: var(--bi-pink); font-weight: 600; }

/* ============ 分区页 ============ */
.bi-fl { padding: 4px 24px 12px; }
.bi-fl-sec { padding: 16px 0 10px; }
.bi-fl-sec + .bi-fl-sec { border-top: 1px solid var(--bi-line); }
.bi-fl-head { display: flex; align-items: center; margin-bottom: 16px; }
.bi-fl-head h2 { display: flex; align-items: center; margin: 0; font-size: 17px; font-weight: 700; color: var(--bi-text); }
.bi-fl-head .bi-sec-bar { width: 4px; height: 16px; margin-right: 9px; border-radius: 2px; background: var(--bi-pink); }
.bi-fl-head .bi-sec-more { margin-left: auto; display: inline-flex; align-items: center; font-size: 13px; color: var(--bi-text-3); text-decoration: none; }
.bi-fl-head .bi-sec-more:hover { color: var(--bi-pink); }
.bi-fl-head .bi-sec-more svg { width: 14px; height: 14px; }
.bi-fl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 14px; }
.bi-fl-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border: 1px solid transparent; border-radius: 10px; background: #f7f8fa; text-decoration: none; transition: all .18s; }
.bi-fl-card:hover { background: #fff; border-color: var(--bi-pink); box-shadow: var(--bi-shadow-hover); transform: translateY(-2px); }
.bi-fl-img { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #fff; }
.bi-fl-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bi-fl-name { font-size: 13px; color: var(--bi-text); text-align: center; line-height: 1.4; }
.bi-fl-card:hover .bi-fl-name { color: var(--bi-pink); }

/* ============ 公告列表 ============ */
.bi-news { padding: 4px 20px 10px; }
.bi-news-head { display: flex; align-items: center; padding: 16px 0 6px; }
.bi-news-head h2 { display: flex; align-items: center; margin: 0; font-size: 17px; font-weight: 700; color: var(--bi-text); }
.bi-news-head .bi-sec-bar { width: 4px; height: 16px; margin-right: 9px; border-radius: 2px; background: var(--bi-pink); }
.bi-news-list { padding: 6px 0 12px; }
.bi-news-item { display: flex; align-items: center; gap: 18px; padding: 15px 4px; border-bottom: 1px solid #f0f1f5; text-decoration: none; transition: background .18s; }
.bi-news-item:last-child { border-bottom: 0; }
.bi-news-item:hover { background: #fafbfc; }
.bi-news-body { flex: 1 1 auto; min-width: 0; }
.bi-news-title { display: block; font-size: 15px; color: var(--bi-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-news-item:hover .bi-news-title { color: var(--bi-pink); }
.bi-news-sum { display: block; margin-top: 4px; font-size: 12.5px; color: var(--bi-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-news-date { flex: 0 0 auto; font-size: 12.5px; color: var(--bi-text-3); }

/* ============ 公告详情 ============ */
.bi-article { padding: 26px 32px 32px; max-width: 900px; }
.bi-article-title { margin: 0 0 12px; font-size: 24px; line-height: 1.45; font-weight: 700; color: var(--bi-text); }
.bi-article-meta { display: flex; align-items: center; gap: 18px; font-size: 12.5px; color: var(--bi-text-3); padding-bottom: 14px; border-bottom: 1px solid var(--bi-line); }
.bi-article-meta .bi-up { display: inline-flex; align-items: center; gap: 5px; }
.bi-article-meta .bi-up-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bi-pink); }
.bi-article-meta .bi-dan { display: inline-flex; align-items: center; gap: 4px; }
.bi-article-meta .bi-dan svg { width: 14px; height: 14px; }
.bi-article-sum { margin: 16px 0 0; padding: 12px 14px; border-radius: 8px; background: var(--bi-pink-soft); color: #a04a68; font-size: 13px; line-height: 1.8; }
.bi-article-body { margin-top: 18px; font-size: 15px; line-height: 1.9; color: #3b3f47; word-break: break-word; }
.bi-article-body img { max-width: 100%; height: auto; border-radius: 6px; }
.bi-article-body table { max-width: 100%; border-collapse: collapse; }
.bi-article-body h1, .bi-article-body h2, .bi-article-body h3 { font-size: 17px; margin: 20px 0 10px; color: var(--bi-text); }
.bi-article-body p { margin: 0 0 12px; }

/* ============ 联系客服 ============ */
.bi-kefu { padding: 34px 24px 30px; }
.bi-kefu-head { text-align: center; margin-bottom: 26px; }
.bi-kefu-head .bi-tv-lg { display: inline-flex; width: 72px; color: var(--bi-pink); }
.bi-kefu-head .bi-tv-lg svg { width: 100%; height: auto; }
.bi-kefu-head h2 { margin: 12px 0 6px; font-size: 21px; font-weight: 700; color: var(--bi-text); }
.bi-kefu-head p { margin: 0; font-size: 13.5px; color: var(--bi-text-3); }
.bi-kefu-grid { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.bi-kefu-item { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 190px; padding: 24px 28px; border: 1px solid var(--bi-line); border-radius: 12px; background: #fff; color: var(--bi-text); text-decoration: none; transition: all .2s; }
.bi-kefu-item:hover { border-color: var(--bi-pink); box-shadow: var(--bi-shadow-hover); transform: translateY(-2px); }
.kf-ico { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.kf-ico svg { width: 26px; height: 26px; }
.kf-ico-chat { background: var(--bi-pink-soft); color: var(--bi-pink); }
.kf-ico-qq { background: #eaf4ff; color: #12b7f0; }
.kf-ico-wx { background: #e9f9ef; color: #22b06b; }
.kf-name { font-size: 15px; font-weight: 600; }
.kf-desc { font-size: 12.5px; color: var(--bi-text-3); word-break: break-all; }

/* ============ 响应式 ============ */
@media (max-width: 980px) {
    .bi-fl { padding: 4px 16px 12px; }
    .bi-fl-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
    .bi-article { padding: 20px 18px 26px; }
}
@media (max-width: 700px) {
    .bi-fl { padding: 4px 12px 10px; }
    .bi-fl-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
    .bi-news-date { display: none; }
}