/* ================================================
   主播广场（主播列表页）v2026 风格
   路径: /public/css/v2026/zhubo_list.css
   依赖: v2026/global.css（--primary: #13c2c2）
   ================================================ */

.zbl-wrap { padding-bottom: 40px; }

/* ---- 页面标题 ---- */
.zbl-head { display: flex; align-items: baseline; gap: 12px; margin: 8px 0 18px; }
.zbl-head h1 { display: flex; align-items: center; margin: 0; font-size: 24px; font-weight: 800; letter-spacing: 1px; }
.zbl-head-bar { display: inline-block; width: 5px; height: 22px; margin-right: 10px; border-radius: 3px; background: var(--primary); }
.zbl-head .sub { font-size: 13px; color: var(--text-sub); }
.zbl-head .sub b { color: var(--primary); font-family: Arial, sans-serif; }

/* ---- 入驻引导条 ---- */
.zbl-banner { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; padding: 16px 24px; border: 1px solid #d9f5f4; border-radius: 14px; background: linear-gradient(135deg, #eefcfb, #f7fdfd); }
.zbl-banner i { flex-shrink: 0; font-size: 26px; color: var(--primary); }
.zbl-banner .tx { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.7; color: #4a6d6c; }
.zbl-banner .tx b { display: block; margin-bottom: 2px; font-size: 15px; color: #0f7c7c; }
.zbl-banner .btn { flex-shrink: 0; padding: 9px 22px; font-size: 13px; font-weight: 600; color: #fff; border-radius: 22px; background: linear-gradient(135deg, #4DE3E0, #13c2c2); box-shadow: 0 4px 12px rgba(19,194,194,.28); transition: .2s; }
.zbl-banner .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(19,194,194,.36); }

/* ---- 筛选白卡（与作品库 cate 页保持同一套观感） ---- */
.zbl-filter { margin-bottom: 16px; padding: 4px 24px; background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.04); }
.zbl-filter .filter-row { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; border-bottom: 1px dashed #eef0f2; }
.zbl-filter .filter-row:last-child { border-bottom: none; }
.zbl-filter .filter-label { flex-shrink: 0; width: 40px; line-height: 30px; font-size: 14px; color: var(--text-sub); }
.zbl-filter .filter-items { display: flex; flex-wrap: wrap; gap: 10px; }
.zbl-filter .filter-pill { display: inline-block; padding: 5px 16px; line-height: 20px; font-size: 14px; color: #555; background: #f4f6f8; border: 1px solid transparent; border-radius: 16px; }
.zbl-filter .filter-pill:hover { color: var(--primary); border-color: var(--primary); }
.zbl-filter .filter-pill.active { color: #fff; background: var(--primary); border-color: var(--primary); box-shadow: 0 4px 10px rgba(19,194,194,.25); pointer-events: none; }

/* ---- 结果条 + 排序 ---- */
.zbl-sortbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; padding: 0 4px; }
.zbl-sortbar .rs { font-size: 13px; color: var(--text-sub); }
.zbl-sortbar .rs b { margin: 0 2px; font-family: Arial, sans-serif; font-size: 16px; font-weight: 800; color: var(--primary); }
.zbl-sortbar .sorts { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.zbl-sortbar .sorts .k { margin-right: 4px; font-size: 13px; color: var(--text-sub); }
.zbl-sortbar .sorts a { padding: 5px 13px; font-size: 13px; color: #666; border-radius: 14px; }
.zbl-sortbar .sorts a:hover { color: var(--primary); background: #f0fcfc; }
.zbl-sortbar .sorts a.active { font-weight: 600; color: var(--primary); background: #e8fafa; pointer-events: none; }

/* ---- 卡片网格 ---- */
.zbl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 30px; }
.zb-card { display: flex; flex-direction: column; min-width: 0; padding: 22px 24px; background: #fff; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,.04); transition: .25s; }
.zb-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }

/* ---- 卡片头部 ---- */
.zb-hd { display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding-bottom: 16px; border-bottom: 1px dashed #eef0f2; }
.zb-ava { flex-shrink: 0; width: 64px; height: 64px; overflow: hidden; border-radius: 50%; background: #f0f2f5; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.zb-ava img { width: 100%; height: 100%; object-fit: cover; }
.zb-hd-mt { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.zb-name { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 8px; }
.zb-name .nm { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 17px; font-weight: 700; }
.zb-name .nm:hover { color: var(--primary); }
.zb-price { display: inline-block; font-size: 13px; color: var(--text-sub); border-radius: 8px; transition: .2s; }
.zb-price b { margin-right: 2px; font-family: Arial, sans-serif; font-size: 20px; font-weight: 800; color: #ff7a45; }
/* 按报价排序时，把这一格点亮 */
.zb-price.on { padding: 1px 10px; background: #fff4ee; }
.zb-view { flex-shrink: 0; align-self: center; padding: 7px 16px; font-size: 13px; color: #666; border: 1px solid #e2e6e9; border-radius: 20px; }
.zb-view:hover { color: var(--primary); border-color: var(--primary); background: #f0fcfc; }

/* 声线标签 */
.zb-sex { flex-shrink: 0; padding: 2px 8px; font-size: 11px; font-weight: 600; white-space: nowrap; border-radius: 10px; color: #8c8c8c; background: #f4f5f6; }
.zb-sex.m { color: #1677ff; background: #eff6ff; }
.zb-sex.f { color: #eb2f96; background: #fff0f6; }

/* 档期徽标：有空=绿 / 1个月内=青 / 接受预约=橙 / 暂无=灰 */
.zb-badge { flex-shrink: 0; padding: 2px 9px; font-size: 11px; font-weight: 600; white-space: nowrap; border-radius: 10px; }
.zb-badge.free { color: #389e0d; background: #f0fbe8; }
.zb-badge.soon { color: #0f8f8f; background: #e8fafa; }
.zb-badge.book { color: #c47b00; background: #fff8e6; }
.zb-badge.none { color: #8c8c8c; background: #f4f5f6; }

/* ---- 数据格 ---- */
.zb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px 0; }
.zb-stat { min-width: 0; padding: 9px 6px; text-align: center; border-radius: 9px; background: #fafbfc; transition: .2s; }
.zb-stat .v { font-family: Arial, sans-serif; font-size: 18px; font-weight: 800; line-height: 1.2; color: #333; }
.zb-stat .v em { margin-left: 2px; font-style: normal; font-size: 12px; font-weight: 600; color: #999; }
.zb-stat .k { margin-top: 3px; font-size: 12px; color: var(--text-sub); }
/* 当前排序维度对应的那一格点亮 */
.zb-stat.on { background: #eefcfc; }
.zb-stat.on .v, .zb-stat.on .v em, .zb-stat.on .k { color: var(--primary); }

/* ---- 信息行 ---- */
.zb-rows { padding-top: 4px; }
.zb-row { display: flex; gap: 8px; min-width: 0; margin-bottom: 9px; font-size: 13px; line-height: 1.6; }
.zb-row:last-child { margin-bottom: 0; }
.zb-row .k { flex-shrink: 0; width: 60px; color: var(--text-sub); }
.zb-row .v { flex: 1 1 auto; min-width: 0; color: #555; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.zb-row.tags .v { display: flex; flex-wrap: wrap; gap: 6px; }
.zb-tag { padding: 2px 10px; font-size: 12px; color: #0f8f8f; background: #f0fcfc; border-radius: 12px; }
.zb-empty-v { color: #c0c4c8; }

/* ---- 卡片底部 ---- */
.zb-ft { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 13px; border-top: 1px dashed #eef0f2; font-size: 12px; color: var(--text-sub); }
.zb-ft .spacer { flex: 1 1 auto; }
.zb-ft .contact { flex-shrink: 0; color: var(--primary); font-weight: 600; }
.zb-ft .contact:hover { text-decoration: underline; }
.zb-nodemo { color: #c0c4c8; }

/* ---- 试音试听：克制版
   不做大圆钮、不做波形，只是一枚小胶囊，
   播放时才染上主题色，进度用底部 2px 细线表示 ---- */
.zb-demo { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 10px; overflow: hidden; font-size: 12px; line-height: 1; color: #7a8085; background: #fff; border: 1px solid #e2e6e9; border-radius: 14px; cursor: pointer; transition: .2s; }
.zb-demo i { display: inline-block; font-size: 14px; color: #b9bfc4; transition: .2s; }
.zb-demo .tx { font-weight: 600; }
.zb-demo .tm { font-family: Arial, sans-serif; font-size: 11px; color: #b9bfc4; transition: .2s; }
.zb-demo:hover { color: var(--primary); background: #f5fdfd; border-color: #9fe4e4; }
.zb-demo:hover i, .zb-demo:hover .tm { color: var(--primary); }

/* 播放中 */
.zb-demo.playing { color: var(--primary); background: #f0fcfc; border-color: #9fe4e4; }
.zb-demo.playing i, .zb-demo.playing .tm { color: var(--primary); }

/* 缓冲中 */
.zb-demo.loading i { animation: zbDemoSpin .8s linear infinite; }
@keyframes zbDemoSpin { to { transform: rotate(360deg); } }

/* 播放失败 */
.zb-demo.err { color: #c0c4c8; background: #fafbfc; border-color: #eef0f2; cursor: default; }
.zb-demo.err i, .zb-demo.err .tm { color: #c0c4c8; }

/* 进度细线 */
.zb-demo .pg { position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--primary); opacity: .8; }

/* ---- 空状态 ---- */
.zbl-empty { grid-column: 1 / -1; padding: 70px 0; text-align: center; font-size: 15px; color: var(--text-sub); }
.zbl-empty p { margin: 0; }
.zbl-empty .lk { margin-top: 14px; font-size: 14px; }
.zbl-empty .lk a { color: var(--primary); font-weight: 600; }
.zbl-empty .lk a:hover { text-decoration: underline; }

/* ---- 分页（multipager page_version=2：当前页 a.sel） ---- */
.zbl-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0 10px; }
.zbl-pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; font-size: 14px; color: #555; background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.05); transition: .2s; }
.zbl-pagination a:hover { color: var(--primary); }
.zbl-pagination a.sel { color: #fff; background: var(--primary); box-shadow: 0 4px 10px rgba(19,194,194,.25); }
.zbl-pagination .clear { width: 100%; height: 0; }

/* ---- 响应式收窄 ---- */
@media (max-width: 1200px) {
    .zbl-grid { grid-template-columns: minmax(0, 1fr); }
    .zbl-sortbar { align-items: flex-start; }
}