@charset "utf-8";
/* ══════════════════════════════════════════════════════════
   V声共创平台 · 主播广场
   页头 / 筛选 / 排序 / 加载更多等通用组件在 global.css
   本文件只写主播卡片与试音播放器
   ══════════════════════════════════════════════════════════ */

/* ══════════ 双身份引导条 ══════════ */
.guide{display:grid; grid-template-columns:1fr; gap:12px; margin-top:26px}
@media(min-width:760px){ .guide{grid-template-columns:repeat(2,1fr); gap:16px} }
.guide-c{display:flex; align-items:center; gap:14px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 20px;
  transition:.24s var(--ez)}
.guide-c:hover{border-color:transparent; box-shadow:var(--sh-1); transform:translateY(-3px)}
.guide-c .gi{width:42px; height:42px; border-radius:13px; flex:none;
  display:grid; place-items:center; font-size:21px; color:var(--c); background:var(--c-s)}
.guide-c .gt{flex:1; min-width:0}
.guide-c .gt b{display:block; font-size:15.5px; font-weight:700}
.guide-c .gt span{display:block; margin-top:3px; font-size:13px; color:var(--muted); line-height:1.7}
.guide-c .gb{flex:none; display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:700; color:var(--c); white-space:nowrap}
.guide-c .gb i{transition:transform .22s var(--ez)}
.guide-c:hover .gb i{transform:translateX(4px)}
.guide-c.g1{--c:var(--violet); --c-s:var(--violet-soft)}
.guide-c.g2{--c:var(--teal);   --c-s:var(--teal-soft)}

/* ══════════ 主播卡片 ══════════ */
.zgrid{display:grid; gap:15px; grid-template-columns:1fr; align-items:stretch; margin-top:6px}
@media(min-width:680px){ .zgrid{grid-template-columns:repeat(2,1fr); gap:17px} }
@media(min-width:1100px){ .zgrid{grid-template-columns:repeat(3,1fr)} }

.zb{position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px; transition:transform .26s var(--ez), box-shadow .26s var(--ez), border-color .26s var(--ez);
  --c:var(--muted); --c-s:var(--line-2)}
.zb::before{content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--c),transparent 86%)}
.zb::after{content:""; position:absolute; right:-60px; bottom:-60px; width:170px; height:170px;
  border-radius:50%; background:var(--c); opacity:.05; transition:transform .5s var(--ez)}
.zb:hover{transform:translateY(-5px); box-shadow:var(--sh-2); border-color:transparent}
.zb:hover::after{transform:scale(1.35)}

/* 档期配色 */
.zb.d-free{--c:var(--teal);   --c-s:var(--teal-soft)}
.zb.d-soon{--c:var(--violet); --c-s:var(--violet-soft)}
.zb.d-book{--c:var(--gold);   --c-s:var(--gold-soft)}
.zb.d-none{--c:var(--muted);  --c-s:var(--line-2)}

/* 排名徽标：按维度排序时出现 */
.zb-rank{position:absolute; z-index:2; left:0; top:0;
  min-width:38px; padding:5px 10px 6px; border-radius:0 0 14px 0;
  font-family:var(--mono); font-size:12.5px; font-weight:800; letter-spacing:.02em;
  color:#fff; background:linear-gradient(135deg,var(--violet),var(--violet-2))}
.zb-rank.top{background:linear-gradient(135deg,#E8930C,#FFB03A)}
.zb.has-rank{padding-top:30px}

/* 头部 */
.zb-hd{position:relative; display:flex; align-items:flex-start; gap:13px}
.zb-av{width:52px; height:52px; border-radius:50%; flex:none; overflow:hidden;
  background:var(--line-2); box-shadow:0 0 0 3px var(--c-s); display:block}
.zb-av img{width:100%; height:100%; object-fit:cover}
.zb-id{flex:1; min-width:0}
.zb-name{display:block; font-size:16.5px; font-weight:800; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
a.zb-name:hover{color:var(--violet)}
.zb-dq{display:inline-flex; align-items:center; gap:5px; margin-top:6px;
  font-size:11.5px; font-weight:700; color:var(--c); background:var(--c-s);
  padding:3px 10px; border-radius:999px}
.zb-dq i{width:6px; height:6px; border-radius:50%; background:var(--c)}
.zb.d-free .zb-dq i{animation:zbBlip 1.9s var(--ez) infinite}
@media(prefers-reduced-motion:reduce){ .zb.d-free .zb-dq i{animation:none} }
@keyframes zbBlip{0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.65)}}

.zb-price{flex:none; text-align:right; padding:2px 8px 3px; border-radius:9px;
  transition:.22s var(--ez)}
.zb-price .v{font-size:19px; font-weight:800; color:var(--gold); line-height:1.1;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.zb-price .u{display:block; font-size:11.5px; color:var(--muted); margin-top:3px}
.zb-price .none{font-size:13px; color:var(--muted); font-weight:600}
.zb-price.on{background:var(--gold-soft)}

/* 数据条 */
.zb-stats{position:relative; display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; margin-top:18px; background:var(--line); border:1px solid var(--line);
  border-radius:12px; overflow:hidden}
.zb-stats .s{background:var(--paper); padding:11px 6px; text-align:center; transition:.22s var(--ez)}
.zb-stats .s .v{font-size:16px; font-weight:800; line-height:1.2;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.zb-stats .s .v em{font-style:normal; font-size:11px; font-weight:600; color:var(--muted); margin-left:2px}
.zb-stats .s .k{font-size:11px; color:var(--muted); margin-top:4px}
.zb-stats .s.on{background:var(--violet-soft)}
.zb-stats .s.on .v{color:var(--violet)}
.zb-stats .s.on .k{color:var(--violet); font-weight:600}

/* 资料行 */
.zb-rows{position:relative; margin-top:16px; display:grid; gap:11px}
.zb-row{display:flex; gap:10px; font-size:13px; line-height:1.7}
.zb-row .k{flex:none; width:56px; color:var(--muted)}
.zb-row .v{flex:1; min-width:0; color:var(--ink-2)}
.zb-row .v.text{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; word-break:break-word}
.zb-tags{display:flex; flex-wrap:wrap; gap:5px}
.zb-tags span{font-size:11.5px; color:var(--ink-2); background:var(--paper);
  border:1px solid var(--line); padding:2px 9px; border-radius:7px}
.zb-none{color:var(--muted)}

/* ══════════ 试音波形播放器 ══════════ */
.zb-player{position:relative; display:flex; align-items:center; gap:11px;
  margin-top:16px; padding:9px 12px; background:var(--paper);
  border:1px solid var(--line); border-radius:13px; transition:.22s var(--ez)}
.zb:hover .zb-player{background:var(--surface)}
.zb-player.on{border-color:var(--c-s); background:var(--surface); box-shadow:var(--sh-1)}

.zb-play{width:34px; height:34px; border-radius:50%; flex:none;
  display:grid; place-items:center; color:#fff; font-size:17px;
  background:linear-gradient(145deg,var(--violet),var(--violet-2));
  box-shadow:0 3px 10px rgba(91,61,245,.34); transition:.2s var(--ez)}
.zb-play:hover{transform:scale(1.07)}
.zb-play:active{transform:scale(.95)}
.zb-player.loading .zb-play i{animation:spin .8s linear infinite}
.zb-player.err .zb-play{background:var(--line-2); color:var(--muted); box-shadow:none}

.wf{position:relative; flex:1; min-width:0; height:28px; cursor:pointer; overflow:hidden}
.wf-bars{display:flex; align-items:center; justify-content:space-between;
  gap:2px; height:100%; width:100%}
.wf-bars i{display:block; flex:1 1 auto; min-width:2px; max-width:3px;
  height:var(--h); border-radius:2px; background:var(--line)}
.wf-fill{position:absolute; inset:0; pointer-events:none; clip-path:inset(0 100% 0 0)}
.wf-fill .wf-bars i{background:linear-gradient(180deg,var(--violet-2),var(--violet))}
@media(prefers-reduced-motion:no-preference){
  .zb-player.playing .wf-fill .wf-bars i{animation:zbWave 1.1s var(--ez) infinite alternate}
}
@keyframes zbWave{from{transform:scaleY(.82)} to{transform:scaleY(1.06)}}

.zb-time{flex:none; min-width:44px; text-align:right;
  font-family:var(--mono); font-size:12px; color:var(--muted);
  font-variant-numeric:tabular-nums}
.zb-player.on .zb-time{color:var(--violet); font-weight:600}

/* 底部 */
.zb-ft{position:relative; margin-top:auto; padding-top:16px;
  display:flex; align-items:center; gap:10px; z-index: 999;}
.zb-demo{display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
  font-weight:600; color:var(--teal); background:var(--teal-soft);
  padding:4px 11px; border-radius:999px}
.zb-demo i{font-size:14px}
.zb-go{margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:700; color:var(--violet); white-space:nowrap}
.zb-go i{transition:transform .22s var(--ez)}
.zb:hover .zb-go i{transform:translateX(4px)}